Frontend Focus
Issue 307 — September 13, 2017
Ditch console.log debugging once and for all by learning to use breakpoints to debug code within the DevTools.
Brandon Morelli

Browsers try to render SVG images on every frame, this can be slow. Here, Jake shows us how the createImageBitmap method can speed things up.
Jake Archibald

The trick to learning Flexbox is simply by playing with it, so these 7 examples and walkthroughs provide a lot of food for thought.
Ohans Emmanuel

Frontend Masters
Secure a year of access to 1st-rate training that advances your skills and expands your professional horizons. Frontend Masters' catalog of expert courses is continually added and updated throughout the year. Don't delay—discount ends September 18th.
Frontend Masters   Sponsor

How can we make the Web better by designing and developing with performance in mind? A look at various ways of making impactful performance improvements.
Karolina Szczur

Explains the reasoning behind Webpack, and what makes it more than a mere bundler.
Jack Histon

With a single line of CSS, we can completely reorient any element. Dan Wilson gets into the transform property and how you can use it to change your site.
Heart Internet

Jobs Supported by

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

In Brief

Watch Microsoft Edge Web Summit 2017 Live On Channel 9 Today news
Starts today (Weds Sep 13) at 9am Pacific/12pm Eastern.
Kyle Pflug

Web Content Accessibility Guidelines 2.1 Working Draft news

Web Share API Goes Live in Chrome 61 on Android news
Google Developers

Chrome’s Plan to Distrust Symantec Certificates news

The Developer Has Spoken 
HEVC is rising and HLS is still king. Get the 2017 Video Developer Report and see for yourself.

Getting Started with Website Accessibility tutorial
Carie Fisher

Accessible SVG Line Graphs tutorial
Adding ARIA roles to improve the accessibility of SVG graphs.
Léonie Watson

Building Skeleton Screens with CSS Custom Properties tutorial
Max Böck

2 Ways to Break CSS Grid and How to Fix It tutorial
Dave Rupert

HTML Templates via JavaScript Template Literals tutorial
Chris Coyier

Switching Your Site to HTTPS on a Shoestring Budget tutorial
Christopher Schmitt

How I Recreated The Gorillaz Andromeda Music Video using WebGL story
Yağız Gürgül

Experimenting with WebAssembly and Computer Vision story
Mozilla Hacks

Micro Frontends: Extending Microservice Ideas to Frontend Development opinion
Micro Frontends

CSS-in-JS Is Like Replacing A Broken Screwdriver with Your Favorite Hammer opinion
Kevin Ball

Disabled Form Buttons Suck, and Here's Why opinion
Hampus Sethfors

The Zen of Just Writing CSS opinion

Full-stack app monitoring with Datadog 
Get real-time metrics from your web applications with Datadog. Start quickly with auto-instrumentation.
Datadog  Sponsor

src2png: Turn Source Code Into Beautiful Syntax-Highlighted Images tools
Matt Lewis

Stencil: A Tool for Building Modern Web Components tools