Frontend Focus
Issue 231 — March 16, 2016
Some insights into what the Web Platform Working Group (which has responsibility for W3C’s HTML spec) has been doing with HTML and its future plans.

Go beyond simple linear and radial gradients with something less predictable, using a small base64-encoded SVG directly within your CSS.
Oliver Rivo

Brad Green’s keynote from Fluent on how new techniques are making it easy to use advanced browser features like Web Workers, HTTP/2, and service workers.
O'Reilly Media

Frontend Masters
Two upcoming workshops:
Four Semesters of Computer Science in Six Hours Workshop on March 23rd for self-taught devs
2 Day: Complete Intro to React Workshop on March 24th-25th to learn React/Redux.
Frontend Masters   Sponsor

A workflow for working with location data using best practices, providing users with privacy-friendly options, and working with a regard for the law.
Smashing Magazine

WebAssembly is an emerging standard with a goal to define a safe, portable, size- and load-time efficient binary compiler target with near-native performance.
Mozilla Hacks

A rich WebGL debugging toolkit for productive WebGL development and building more efficient WebGL apps.

Robin Rendle explains a process for building stylesheets for a responsive site that uses both em and rem to give more control at the module level.

Exploring using an HTML5 Canvas to recreate Instagram-style filter effects. Includes lots of code and CodePen examples.
Nate Hunzaker

Jobs Supported by

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

    In Brief

    What's New in Chromium 49 and Opera 36 news
    Mostly ES6 related features, but also CSS Custom Properties.
    Mathias Bynens

    Web Notification Improvements Coming to Chrome news
    Four changes to web notifications coming in Chrome 50, including custom icons.
    Paul Kinlan

    Experimental Support for WebAssembly in V8 news
    Seth Thompson

    Web Animation Improvements Coming in Chrome 50 news
    A brief round-up of the changes coming to the Web Animations API.
    Alex Danilo

    Parallax Burns: Converting Photos from 2D to '3D' with SVG tutorial
    Alex Walker

    8 Tips to Write CSS You Won't Hate tutorial
    A handful of tips on writing clean, maintainable CSS.
    Taha Shashtari

    How to Make Floating Input Labels With HTML5 Validation tutorial

    On CSS :not and Specificity tutorial
    Ire Aderinokun

    Prioritizing Your Resources with  

    Cleaning Up a CSS Codebase tutorial
    Looking at linting, structure, and simply smart CSS practices.
    Hugo Giraudel

    Debugging Service Workers and Push with Firefox DevTools tutorial
    Mozilla Hacks

    Understanding Socket.IO tutorial
    A brief introduction to a long standing library for realtime communication in Web apps.
    Grigor Khachatryan

    Animated CSS Highlighting on Hover State tutorial
    A neat trick.
    Wes Bos

    Dreamfactory simplifies data connections for web apps tools
    Free and open source, DreamFactory automatically generates REST APIs from nearly any data source. We'll even host it for you for free.
    DreamFactory  Sponsor

    snapline: Convert Chrome Timeline Screenshots to GIF tools
    Pierre-Marie Dartus

    Strips.css: Sass Mixin to Create Linear Stepped Gradients code

    Grd: A (512 byte) CSS Grid Framework using Flexbox code
    Shogo Sensui

    react-mt-svg-lines: Animate SVG Lines code
    Peter Morawiec

    A Grid Solution for the Responsive Tables Problem code tutorial
    Rachel Andrew

    quiet.js: Transmit Data at 44.1KHz using Web Audio code
    Brian Armstrong

    Apply to 3,000+ Jobs in 10 Minutes & 1 Application rawurl
    Top companies apply to you on Hired. Get salary and equity upfront before interviewing.  Sponsor