---
title: "The Web turns 25, Shadow DOM tour, and better HTML form controls"
publication: "Frontend Focus"
issue: 252
published_at: "2016-08-10"
canonical_url: "https://frontendfoc.us/issues/252"
---

The Web turns 25, Shadow DOM tour, and better HTML form controls

[Read this e-mail on the Web](http://frontendfoc.us/issues/252)

Frontend FocusIssue 252 — August 10, 2016[A Tour of Shadow DOM: Self-Contained Web Components](https://developers.google.com/web/fundamentals/primers/shadowdom/?utm_source=frontendfocus&utm_medium=email)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 
[25 Years Ago The World Changed Forever](https://www.w3.org/blog/2016/08/25-years-ago-the-world-changed-forever/?utm_source=frontendfocus&utm_medium=email)A brief look back at the early days of the Web as it turns 25 years old. W3C 
[Flash and Chrome: Chrome to Block Flash from Chrome 53](http://chrome.googleblog.com/2016/08/flash-and-chrome.html?utm_source=frontendfocus&utm_medium=email)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.” Google 
[![Linode\](https://copm.s3.amazonaws.com/21d0ae2e.png)](https://welcome.linode.com/html5-weekly/?utm_source=cooperpress&utm_medium=primary&utm_term=html5&utm_campaign=html5-weekly)[Building Your HTML5 Project? Host with Linode](https://welcome.linode.com/html5-weekly/?utm_source=cooperpress&utm_medium=primary&utm_term=html5&utm_campaign=html5-weekly)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. LinodeSponsor
[WTF, Forms? Friendlier HTML Form Controls](http://wtfforms.com/?utm_source=frontendfocus&utm_medium=email)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 Beta: Now with Shadow DOM (and PaymentRequest)](http://blog.chromium.org/2016/08/chrome-53-beta-shadow-dom.html?utm_source=frontendfocus&utm_medium=email)Chrome 53 is the latest beta channel release and it supports the [Shadow DOM spec](http://w3c.github.io/webcomponents/spec/shadow/) and, on Android, the [PaymentRequest API](https://www.w3.org/TR/payment-request/) for seamless payment functionality. Google 
[CSS mix-blend-mode Is Bad for Your Browsing History](https://lcamtuf.blogspot.com/2016/08/css-mix-blend-mode-is-bad-for-keeping.html?utm_source=frontendfocus&utm_medium=email)An interesting look (and [practical demo](http://lcamtuf.coredump.cx/whack/)) at how some layering trickery can be used to get users to inadvertently share parts of their browser history. Michał Zalewski 
[Building Themes with CSS4 Color Features](https://cloudfour.com/thinks/building-themes-with-css4-color-features/?utm_source=frontendfocus&utm_medium=email)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 
[Custom Animated Cursors via Canvas](http://www.phpied.com/custom-animated-cursor-via-canvas/?utm_source=frontendfocus&utm_medium=email)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.](http://www.phpied.com/files/cursor/cursor.html) Stoyan Stefanov 


Jobs [![Supported by Hired.com\](http://s3.cooperpress.com.s3.amazonaws.com/hired1.png)](https://hired.com/join/?utm_source=petercooperpress&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-swe%29%28q2-17-frontend-focus%29&utm_content=newsletter)

- [Director, Front-End Engineering, San Francisco, CA](http://www.healthline.com/health/careers?cjobid=KD304748630&rpid=19048)Healthline 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. Healthline.com
- [Front End Developer - Brentwood, TN (onsite, Full-time)](http://jobs.jobvite.com/daveramsey/job/o2Wq2fwa?utm_source=frontendfocus&utm_medium=email)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 Week](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_campaign=q3-16-frontendfocus)With Hired, companies apply to hire you - get salary and equity offers before you interview from companies like Facebook, Postmates, & Square. Hired.com

Can't find the right job? Want companies to apply to _you?_ [Try Hired.com.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-frontend&utm_campaign=q2-17-frontend)

In Brief

[EdgeHTML 14 Rolling Out with the Windows 10 Anniversary Update](https://blogs.windows.com/msedgedev/2016/08/04/introducing-edgehtml-14/?utm_source=frontendfocus&utm_medium=email) 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](https://hacks.mozilla.org/2016/08/developer-edition-50-console-memory-tool-net-monitor-and-more/?utm_source=frontendfocus&utm_medium=email) news 
Source map support and network stack traces now available.
Mozilla Hacks

[“Now in Chrome Canary: Disable JS from the Command Menu”](https://twitter.com/ChromeDevTools/status/762694908381569025?utm_source=frontendfocus&utm_medium=email) news
Chrome DevTools on Twitter

[Js13kGames: Code Golf for Game Devs](https://hacks.mozilla.org/2016/08/js13kgames-code-golf-for-game-devs/?utm_source=frontendfocus&utm_medium=email) news 
A look back at the last contest and announcing [the next](http://2016.js13kgames.com/), starting this Saturday.
Mozilla Hacks

[Getting to Know Cutestrap, a Lightweight CSS Framework](https://www.sitepoint.com/getting-to-know-cutestrap-a-lightweight-css-framework/?utm_source=frontendfocus&utm_medium=email) tutorial
Maria Antonietta Perna

[Advanced CSS: Sass Maps to UI Components](https://blog.prototypr.io/sass-maps-to-ui-components-f14e1f34412e?utm_source=frontendfocus&utm_medium=email) tutorial
Ria N. Carmin

[Animating Like You Just Don’t Care with Element.animate](https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/?utm_source=frontendfocus&utm_medium=email) tutorial 
Firefox 48 will ship the Element.animate() API.
Mozilla Hacks

[(Ab)Using the HTML5 Battery Status API](https://blog.cdemi.io/abusing-the-html5-battery-status-api-for-advertising/?utm_source=frontendfocus&utm_medium=email) tutorial
Christopher Demicoli

[Reflections on HTML's 'input' Element](https://vimeo.com/176453149?utm_source=frontendfocus&utm_medium=email) 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](https://www.youtube.com/watch?v=lQxt6TdzsAo) video
Travis Neilson

[Komodo IDE: The Best IDE for Web and Mobile Developers](http://komodoide.com/web-ide/?utm_source=frontendfocus&utm_medium=link&utm_term=&utm_content=text&utm_campaign=komodo-x-q3) rawurl tools 
Web and mobile devs get all their favorite frameworks, languages, and tools in one cross-platform, polyglot IDE.
ActiveStateSponsor

[Sharing Buttons: Fast, Easy Social Media Sharing Buttons without JavaScript](http://sharingbuttons.io/?utm_source=frontendfocus&utm_medium=email) tools 
These use no JavaScript and no tracking.
Max Stoiber

[Starability: An Accessible Star Rating System for Web Pages](http://lunarlogic.github.io/starability/?utm_source=frontendfocus&utm_medium=email) code
Lunar Logic

[Scrollanim: CSS3 and JavaScript Scroll-Based Animation](http://scrollanim.kissui.io/?utm_source=frontendfocus&utm_medium=email) code
Afshin Mehrabani

[This Image is Also an HTML Webpage](https://dev.to/ben/this-image-is-also-an-html-webpage?utm_source=frontendfocus&utm_medium=email) demo 
A clever hack.
Ben Halpern

[A CSS-Only Scroll Indicator](https://codepen.io/MadeByMike/pen/ZOrEmr?editors=1100) demo 
An interesting technique used here.
Mike Riethmuller

[Pure CSS Olympic Rings](http://codepen.io/AllThingsSmitty/pen/cHjIC/?utm_source=frontendfocus&utm_medium=email) demo
CodePen

[SQL Source Control: track each change to your SQL Server database](http://www.red-gate.com/products/sql-development/sql-source-control/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=track_every_change_v2&utm_campaign=sqlsourcecontrol&utm_term=email-24969) rawurl 
Get a full history in your source control system. See who made changes, what they did and why. [See how](http://www.red-gate.com/products/sql-development/sql-source-control/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=track_every_change_v2&utm_campaign=sqlsourcecontrol&utm_term=email-24969)
sqlsourcecontrolSponsor

Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/).

[Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/252)

Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK