Frontend Focus
Issue 252 — August 10, 2016
Shadow DOM provides a framework-free way to create self-contained Web components with compartimentalized DOM and CSS. This is a great intro.
Eric Bidelman

A brief look back at the early days of the Web as it turns 25 years old.

Google notes “90% of Flash on the web loads behind the scenes to support things like page analytics” but that Chrome 53 will “begin to block it.” And “in December, Chrome 55 will make HTML5 the default experience.”

Linode's SSD hosts are the perfect environment for any HTML5, CSS, and Javascript media. Meet your website's demands with a lightening-quick cloud host offered at competitive pricing. 99.9% uptime and 24/7 support.
Linode   Sponsor

Friendlier HTML form controls with a little CSS magic from GitHub’s Director of Design. Designed for IE9+, as well as the latest Chrome, Safari, and Firefox.
Mark Otto

Chrome 53 is the latest beta channel release and it supports the Shadow DOM spec and, on Android, the PaymentRequest API for seamless payment functionality.

An interesting look (and practical demo) at how some layering trickery can be used to get users to inadvertently share parts of their browser history.
Michał Zalewski

A look at using CSS4’s color functions to adjust colors around a theme. Until CSS4 is supported natively, PostCSS can be used to make it all work.
Erik Jung

This starts with a big ‘don’t do this’ warning, but the effect of using a canvas as a mouse cursor is undeniably striking. Live demo here.
Stoyan Stefanov

Jobs Supported by

  • Director, Front-End Engineering, San Francisco, CAHealthline is the 2nd largest and fastest growing health site. We are building a high quality team, will be very competitive and have great benefits. Come help us build a modern stack to grow on. We will relocate.
  • Front End Developer - Brentwood, TN (onsite, Full-time)Would you enjoy building websites and digital experiences in HTML, CSS & JavaScript that reach millions of people with a positive message every day? We are looking for a talented Front-End Developer who wants to do Work that Matters. Ramsey Solutions, A Dave Ramsey Company
  • Get 5+ Engineering Job Offers in 1 WeekWith Hired, companies apply to hire you - get salary and equity offers before you interview from companies like Facebook, Postmates, & Square.

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

In Brief

EdgeHTML 14 Rolling Out with the Windows 10 Anniversary Update news
Windows 10 users now get improved power usage, performance, and support for the Web Notifications, Fetch, and Web Speech APIs.
Kyle Pflug

Firefox Developer Edition 50: Console, Memory Tool, Net Monitor and More news
Source map support and network stack traces now available.
Mozilla Hacks

“Now in Chrome Canary: Disable JS from the Command Menu” news
Chrome DevTools on Twitter

Js13kGames: Code Golf for Game Devs news
A look back at the last contest and announcing the next, starting this Saturday.
Mozilla Hacks

Getting to Know Cutestrap, a Lightweight CSS Framework tutorial
Maria Antonietta Perna

Advanced CSS: Sass Maps to UI Components tutorial
Ria N. Carmin

Animating Like You Just Don’t Care with Element.animate tutorial
Firefox 48 will ship the Element.animate() API.
Mozilla Hacks

(Ab)Using the HTML5 Battery Status API tutorial
Christopher Demicoli

Reflections on HTML's 'input' Element video
A 30 minute talk on one of HTML’s most complicated and flexible elements.
Monica Dinculescu

An Engaging 50 Minute Tutorial for CSS Animations, Spinners, and Loaders video
Travis Neilson

Komodo IDE: The Best IDE for Web and Mobile Developers rawurl tools
Web and mobile devs get all their favorite frameworks, languages, and tools in one cross-platform, polyglot IDE.
ActiveState  Sponsor

Sharing Buttons: Fast, Easy Social Media Sharing Buttons without JavaScript tools
These use no JavaScript and no tracking.
Max Stoiber

Starability: An Accessible Star Rating System for Web Pages code
Lunar Logic

Scrollanim: CSS3 and JavaScript Scroll-Based Animation code
Afshin Mehrabani

This Image is Also an HTML Webpage demo
A clever hack.
Ben Halpern

A CSS-Only Scroll Indicator demo
An interesting technique used here.
Mike Riethmuller

Pure CSS Olympic Rings demo

SQL Source Control: track each change to your SQL Server database rawurl
Get a full history in your source control system. See who made changes, what they did and why. See how
sqlsourcecontrol  Sponsor