Frontend Focus
Issue 322 — January 10, 2018
HTML 5.2 became an official W3C Recommendation (REC) a month ago, but what did it introduce and change?
Ire Aderinokun

A quick and easy high level introduction to the main concepts of CSS Grid given by Morten Rand-Hendriksen at Wordcamp Europe 2017.

A front-end performance checklist with everything you need to know to create fast Web experiences this year.
Vitaly Friedman

Frontend Masters
Get up and running in a hurry with the Vue.js JavaScript framework. Learn how to build and maintain complex applications quickly and efficiently in this practical guide to Vue.js by Sarah Drasner.
Frontend Masters   Sponsor

Eight new guides covering the real use cases of Flexbox, looking at where Grid should be used instead, and clarification on how the spec works with Writing Modes, Box Alignment and ordering of items.
Mozilla Hacks

Rather than replace your HTML or rendering mechanisms, Stimulus augments your existing HTML with functionality. From the creators of Ruby on Rails.

You’ve probably heard of Meltdown and Spectre, two timing attacks that can affect modern CPUs which can also be taken advantage of from browsers..
Mozilla Security Blog

If you’ve not played with CSS Grid yet this is an accessible example-led study of what it makes easy.
Per Harald Borgen

Dig into the CSS Grid Layout specification to uncover some features you might have missed – and some coming soon.
Rachel Andrew


In Brief

What Spectre and Meltdown Mean For WebKit news
An explainer on how Spectre and Meltdown affect existing WebKit security mechanisms and what short-term and long-term fixes WebKit is deploying to provide protection against this new class of attack.
Filip Pizlo

Improving URLs for AMP Pages news
AMP pages will now show a page’s original URL, instead of using the URL scheme.
Accelerated Mobile Pages Project

Making CSS Animations Feel More Natural tutorial
Brandon Gregory

Better Web Typography with Font Variants tutorial
Learn about a wide variety of font-variant- CSS properties.
Jonathan Harrell

Robust Client-Side JavaScript: A Developer’s Guide tutorial
Mat​hia⁠s S​chäf⁠er

Animating With Minimal CSS and SVGs tutorial
David Brennan

Be A Full Stack Expert. Learn MongoDB Free in M001, MongoDB Basics 
MongoDB University courses are free and give you everything you need to know about MongoDB.
mongodb  Sponsor

Permissions On The Web Suck opinion
“there are uses for push notifications, what we really need to fix are the permissions”
Phil Nash

Web Design Trends 2018: What Could Make an Impact This Year? opinion
Oliver Lindberg

11 Things I Learned Reading the CSS Grid Specification opinion
Ohans Emmanuel

Chrome Only? Careful Now opinion
Chris Coyier warns developers not to build web experiences that only work in Chrome.
CSS Tricks

Introducing Heroicons: A Set of 104 SVG UI Icons tools
Steve Schoger

Real-Time Error Monitoring, Alerting, and Analytics for JavaScript 🚀 
ROLLBAR  Sponsor

Uppy: A Powerful, Modular JavaScript File Uploader code

headless-devtools: Perform Chrome DevTools Actions From Code code
Johnny Cowchimp

element-ready: Detect When an Element is Ready in the DOM code
Sindre Sorhus

Popmotion: A Functional JavaScript Motion Library code
Mix tweens, physics, and user input actions to create elegant Web-based interactions - all in 11KB.

Save Time with the Best, Fastest Angular Spreadsheets & UI Components 
GrapeCity JavaScript Solutions  Sponsor