Frontend Focus
Issue 245 — June 22, 2016
A look at ‘how to harness the machines’ to help you with your front-end dev work using Grunt, Gulp, Webpack and npm scripts, along with examples of how and why each is used.
Adam Simpson

How to use new properties and values from upcoming CSS specifications today using the PostCSS tool.
Pavels Jelisejevs

Pubnub
Learn to build your own AngularJS chat app with realtime messages and more in no time. View Tutorial.
Pubnub   Sponsor

How do we make sure a site’s layout stays responsive and displays correctly on all kinds of devices with various resolutions? Here’s one solution.
Ivan Shubin

A practical proof of concept design / proposal to persist sessions using Service Workers.
Google

A proposed API for sharing data (text, URLs, images) from the web to an app of the user’s choosing.
Matt Giuca

Jobs Supported by Hired.com

  • Job Offers. No resume necessary.Create your Hired profile to get top companies to start applying to hire you. Get offers from $75,000 - $250,000 on the platform in 1 week. Hired.com

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

In Brief

Flexbox Gets New Behavior for Absolute Positioned Children news
In Chrome 52+, Edge, and Opera 39+.
Joseph Medley

CSS Containment in Chrome 52 news
The new CSS Containment property lets developers limit the scope of the browser’s styles, layout and paint work.
Paul Lewis

The Shortened HTML5 Doctype Was Proposed 11 Years Ago news
W3C

Add a 'playsinline' Attribute to the 'video' Element news
Gives a standardized pragma for opting into inline behavior in iOS Safari.
WHATWG

Lightning fast SSD hosts for your HTML5 project rawurl
Host your HTML5 site on Linode servers - the fastest VPS hosts available. Use promo code HTML520 for $20 credit.
Linode  Sponsor

Using A Gamepad for HTML5 Projects tutorial
Dave Voyles

Accessing the User's Camera with JpegCamera and Canvas tutorial
JpegCamera falls back to Flash if the browser doesn’t support getUserMedia.
Martín Martínez

How to Use Chrome Developer Tools to Test Layouts tutorial
Creative Bloq

The Essential Meta Tags for Social Media tutorial
A run down of the necessary meta tags for social media to display rich previews.
Adam Coti

Leveling Up in CSS tutorial
Four pieces of advice to help you work with CSS at scale.
Jonathan Z. White

CSS Snap Point Design Guidelines opinion
Zach Saucier

Save Scoped CSS opinion
The W3C recently updated the draft specification for CSS scoping, using the @scope syntax. However, vendor support seems minimal.
Keith J Grant

The Sad State of Printing on the Web opinion
Kyle Kemp

Fawkss: A CSS Preprocessor in an AWK Script tools
Bills itself as a “CSS preprocessor for people who dislike CSS preprocessors.”
Alex Palaistras

Blisk: Your Next Web Development Browser? tools
Blisk is a new developer-only browser that uses the Blink rendering engine.
Craig Buckler

speedline: Calculate Speed Index & Visual Perf Metrics from DevTools Timeline tools
Pierre-Marie Dartus

See what your users see. rawurl tools
Meet FullStory, the pixel-perfect session playback tool that makes it easy to answer any question about your customers online experience. Try it free for 2 weeks.
Periscope Data  Sponsor

React CSS Components: Define React Presentational Components with CSS code
Andrey Popp

Snapper: A CSS Snap Points Carousel code
Scott Jehl

Decorative Text Underlines with box-shadow and text-shadow demo code
Jonathan Neal

Coloring Emoji using CSS demo code
Beware: the poop emoji appears in many colors.
Roman Komarov