Frontend Focus
Issue 283 — March 29, 2017
Eric Meyer looks at the process behind converting existing designs to CSS Grid without breaking non-supporting browsers.
Eric Meyer

Addy Osmani digs deep into Chrome’s networking stack to see how features like link preloading and prefetching work, and how you can use them more effectively.
Addy Osmani

Rather than breaking out of container DIVs, you can pad/margin all non image/video elements instead.
Dave Rupert

Progress
Kendo UI delivers everything you need to build modern web applications under tight deadlines - from the must-haves Data Grids & DropDowns to Spreadsheet & Scheduler. Choose from 70+ UI components and combine them to create beautiful, responsive apps.
Progress   Sponsor

The macOS browser now supports the Fetch API, IndexedDB 2.0, the Gamepad API, Input Events, Custom Elements, CSS Grid, HTML5 form validation, and more.
Apple

Toggling classes with checkboxes, editing content with designMode, hiding elements, screenshots, color changes, and more.
Ahmad Shadeed

A fun, creative coming together of Canvas, the Web Audio API, the Commodore 64 & NES.
Greg Hovanesyan

A demo of how the SpeechRecognition and SpeechSynthesis interfaces of the Web Speech API can be used to create a voice assistant for a website.
Suvi Vignarajah

Jobs Supported by Hired.com

Can't find the right job? Want companies to apply to you? Try Hired.com.

In Brief

Faster 3D Rendering with WebGL 2.0 news
Google

CSS Custom Properties in Microsoft Edge news
As of EdgeHTML 15, Microsoft Edge supports CSS Custom Properties.
Greg Whitworth

Discover How to Write Apps in Angular with Rangle’s Online Sessions course
Register to join Rangle’s FREE Angular online training course for JavaScript developers on Apr 4-5.
Rangle.io  Sponsor

A Complete Guide to CSS Grid Layout tutorial
Chris House

Build a Shifting Underline Hover Effect With CSS and JS tutorial
George Martsoukos

Using matrix3d() for Frame-Perfect, Jank-Free Custom Scrollbars tutorial
Google Developers

You 'Kinda' Can Use Custom Fonts in HTML Emails tutorial
Sorry, no Gmail, but Apple and iOS Mail and others have support.
Chris Coyier

Is Using SVG Images Good for Your Site's Performance? opinion
Maria Antonietta Perna

8 CSS Gotchas to Start Your Morning Off Right opinion
A tongue-in-cheek critique of CSS from someone who’s clearly been burnt by its quirks. :-) (Haven’t we all?)
Isaac Lyman

Track errors in your apps with Sentry tools
Sentry's open-source error tracking tells you when your code breaks, without the need for bug reports.
sentry  Sponsor

HTMLMinifier: JavaScript-Based HTML Compressor/Minifier tools
Juriy Zaytsev

Polished: A Lightweight Toolset for Writing Styles in JavaScript tools
Maximilian Stoiber

Pushy Button: CSS Pressable 3D Buttons code
Dronca Raul

Emerge: Declaratively Coordinate How Elements Appear on Page Load code
Ilya Birman

Choices: Configurable Select Box and Text Input (without jQuery) code
Similar to Select2 and Selectize but without the jQuery dependency.
Joshua Jackson

A Self-Truncating Horizontal List Without Using JavaScript demo
I won’t spoil it but figuring out how this works is fun.
CodePen

A Facebook Live-Style Bouncing Emoji/Reaction Effect demo
CodePen