Frontend Focus
Issue 226 — February 10, 2016
The most extensive walkthrough of background-clip and its potential uses I’ve ever seen. You’ll pick up something useful here if CSS is your bag.
Ana Tudor

Fast, uses 3D rendering and CSS3, and lets you coordinate and animate hundreds of DOM elements together. Looks very promising.
David Valdman

A look at some updates to Chrome’s DevTools, including support for custom CSS properties and a new ‘dark theme’ (a la Firefox Developer Edition).
Paul Bakaus

Telerik Kendo UI
Will JavaScript continue to rise in use? What’s in store for the most popular JavaScript frameworks? Learn the answers to these questions in this whitepaper containing interviews with developers building the JavaScript of tomorrow.
Telerik Kendo UI   Sponsor

Give it the URL of a CSS file and it’ll highlight any unnecessary complexity and help you analyze your selectors for duplicates, etc.
Luke Fender

A quick look at the technical challenges the New York Times is facing breaking away from Flash to entirely using HTML5 video.
The New York Times

A call for help on a matter that affects service workers. How should they work with base URIs?
Jake Archibald

Draw pixel art with this simple online tool and get a CSS box-shadow value to use in your own projects to reproduce the image without any extra files.

One key benefit of native CSS variables is they can be updated dynamically by JavaScript, unlike, say, Sass variables.
Wes Bos

PostCSS is a CSS parser and framework for creating plugins that can analyse, lint, and transform parsed CSS.

Jobs Supported by

  • Lead, Front-end & Design (London, UK)You’ll join our team of designers & front-end devs that works across all product teams to create a unified design and UX for our apps. You’ll build a range of websites that tell our story using HTML, CSS, and SASS. AlphaSights
  • Stop Applying to Jobs - Let Companies Apply to YouOn Hired, sign up in 10 minutes and get offers from top companies like Facebook, Uber, & Stripe. Engineers get an average of 5 offers on the platform in 1 week. Try it today.

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

In Brief

Web Audio Updates in Chrome 49 news
Chris Wilson

Google Will Stop Running Flash Display Ads On January 2, 2017 news
Another step in the big goodbye to Flash, in favor of HTML5-based solutions.

The Tech Behind The AirConsole Karaoke Machine news
A look behind an online HTML5-based karaoke machine.

Custom Elements No Longer Contentious news
Anne van Kesteren

Smoother Scrolling in Firefox 46 with APZ news
APZ is Asynchronous Panning and Zooming, a new way of avoiding ‘jank’ in the browser.
Mozilla Hacks

Mozilla Outlines the End of Firefox OS on Phones news
The Verge

Say Goodbye to Flash with the Brightcove Player Version 5 news tools

Learn UI/UX Design Skills with 1-on-1 Mentorship from Elite Designers course
Learn UI UX design through part-time, online courses with 1-on-1 mentorship from expert designers.
Designlab  Sponsor

Short Note On The Use of alt='' and the 'title' Attribute tutorial
Steve Faulkner

Building A First-Class App That Leverages Your Website: A Case Study tutorial
Smashing Magazine

16 CSS Lessons via Post-It Notes tutorial

Automatically Art-Directed Responsive Images? Here You Go tutorial
Vitaly Friedman looks at some options for automatically ‘art directing’ images in the browser to respect both responsiveness and the images’ content.
Smashing Magazine

How To: Pure CSS Masonry Layouts (with No JavaScript) tutorial
Jhey Tompkins

How I Test CSS opinion
Atomic Spin

Hocus-Pocus: Building a Design-Free Sass Framework opinion
Bartłomiej Kozal

html5validator: Command Line Tool to Test The Validity of Static HTML5 Files tools
Also works with CircleCI and TravisCI.
Sven Kreiss

FontReaper: Break Up Icon Fonts Into CSS Classes with Embedded SVG Backgrounds tools
A Node-based tool.

sipML5: The World's First Open Source HTML5 SIP Client tools
Written entirely in JavaScript for integration with social networks.
Doubango Telecom

MediumEditor: A Simple Inline Editor code
Love’s simple editor? This bills itself as a clone.

mapillary-js: WebGL JS Library for Displaying Street Level Imagery code

WebGL Ocean Wave Simulation demo
David Li

Virtual Oscilloscope demo

Discover 52 tips to improve your .NET performance rawurl
Our new eBook features dozens of tips and tricks to boost your .NET performance. Download your free copy.
Redgate  Sponsor