---
title: "This Week's HTML5 and Browser Technology News (Issue 255)"
publication: "Frontend Focus"
issue: 255
published_at: "2016-08-31"
canonical_url: "https://frontendfoc.us/issues/255"
---
This Week's HTML5 and Browser Technology News (Issue 255)
[Read this e-mail on the Web](http://frontendfoc.us/issues/255)
Frontend FocusIssue 255 — August 31, 2016[The Case for Custom Elements](https://medium.com/dev-channel/the-case-for-custom-elements-part-1-65d807b4b439?utm_source=frontendfocus&utm_medium=email)Google’s Rob Dodson makes the case for why he thinks Custom Elements make sense on the modern Web, particularly within large organizations. Rob Dodson
[Ways To Reduce Content Shifting on Page Load](https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/?utm_source=frontendfocus&utm_medium=email)Any time a browser has to recalculate the positions of elements in a document, a reflow occurs which can affects performance and the user experience. How can these shifts be minimized? Smashing Magazine
[Slicing SVG 9 Ways for Flexible Web Shadows](https://aerotwist.com/blog/slicing-svg-9-ways/?utm_source=frontendfocus&utm_medium=email)While developing a 3D card flip effect for the Web, Google’s Paul Lewis ran into some challenges with making good shadows. This post explores how he overcame them. Paul Lewis
[](http://www.telerik.com/campaigns/kendo-ui/responsive-must-know-techniques?utm_medium=newsletter&utm_source=HTMLWeeklyPrimary&utm_campaign=dt-kendo-responsive-wp-oct15)[Building a responsive HTML5 app? Learn the must-know techniques with this free whitepaper](http://www.telerik.com/campaigns/kendo-ui/responsive-must-know-techniques?utm_medium=newsletter&utm_source=HTMLWeeklyPrimary&utm_campaign=dt-kendo-responsive-wp-oct15)If you're a HTML5/JS dev, maybe you have already jumped in on a responsive project and would like to learn more. If not, responsive web design will probably be a requirement in the near future. This whitepaper will give you the must-know responsive web. ProgressSponsor
[Memento at the W3C: A 'Time Travel' Extension for HTTP](https://www.w3.org/blog/2016/08/memento-at-the-w3c/?utm_source=frontendfocus&utm_medium=email)_“The W3C Wiki and the W3C specifications are now accessible using the Memento ‘Time Travel for the Web’ protocol.”_ Memento is an HTTP extension that adds a ‘time dimension’ to the Web. Herbert Van De Sompel
[Upgrading CSS Animation With Motion Curves](https://www.smashingmagazine.com/2016/08/css-animations-motion-curves/?utm_source=frontendfocus&utm_medium=email)A look at techniques for making CSS animations and transitions feel more natural and professional. Nash Vail
[Start Building with Web Bluetooth and Progressive Web Apps](https://medium.com/@urish/start-building-with-web-bluetooth-and-progressive-web-apps-6534835959a6?utm_source=frontendfocus&utm_medium=email)How to use Web Bluetooth to control any Bluetooth Low Energy device directly from your PC or smart phone as a Progressive Web App. Uri Shaked
[Cache Fetched AJAX Requests Locally: Wrapping the Fetch API](https://www.sitepoint.com/cache-fetched-ajax-requests/?utm_source=frontendfocus&utm_medium=email)A look at building a wrapper for the Fetch API, step-by-step, to cache fetched AJAX results and avoid repeated requests to the server. Peter Bengtsson
[A Free Web Accessibility Course by Google and Udacity](https://www.udacity.com/course/web-accessibility--ud891?utm_source=frontendfocus&utm_medium=email)Build some practical experience in making webapps accessible with Alice Boxhall and Rob Dodson in this online course. Udacity
Jobs [](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)
- [Stop wasting time - know what you'll earn before the interview](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_campaign=q3-16-frontendfocus)On Hired, sign up in 10 minutes and get offers from top companies like GitHub, Uber, & Stripe. Engineers get an average of 5 offers on the platform in 1 week. 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
[W3C Invites Implementations of its Data on the Web Best Practices](https://www.w3.org/blog/news/archives/5760?utm_source=frontendfocus&utm_medium=email) news
W3C News
[Microsoft Edge and Continuum: Your Desktop Browser On Mobile](https://blogs.windows.com/msedgedev/2016/08/24/microsoft-edge-continuum/?utm_source=frontendfocus&utm_medium=email) news
Microsoft
[WebDriver Support Now in Safari 10](https://webkit.org/blog/6900/webdriver-support-in-safari-10/?utm_source=frontendfocus&utm_medium=email) news
WebDriver is a browser automation API that enables people to write automated tests.
WebKit.org
[Celebrating 15 Years of WebKit](https://webkit.org/blog/6888/celebrating-15-years-of-webkit/?utm_source=frontendfocus&utm_medium=email) news
The first commit to the public WebKit repository was made in August 2001.
Maciej Stachowiak
[HTML Spec Changing Behavior of Line Breaks with minlength and maxlength](https://github.com/whatwg/html/commit/163703186794c21daa92cc2718218afa44f26071?utm_source=frontendfocus&utm_medium=email) news
WHATWG
[Webinar: 3 Tips to Deliver Fast Performance Across Mobile Web](https://info.dynatrace.com/apm_wc_mobile_performance_na_registration.html?utm_medium=display&utm_source=cooperpress&utm_campaign=mobileperf&utm_content=eventlisting&utm_term=none) rawurl
Tips to ensure your responsive web design is high-performance and customer-friendly. [Register now.](https://info.dynatrace.com/apm_wc_mobile_performance_na_registration.html?utm_medium=display=cooperpress=mobileperf=eventlisting=none)
DynatraceSponsor
[The New Rules of (Web) Form Design](http://www.uxbooth.com/articles/the-new-rules-of-form-design/?utm_source=frontendfocus&utm_medium=email) tutorial
Mike Madaio
[A Thorough Intro to Spectre: A Lightweight CSS Framework](https://www.sitepoint.com/spectre-a-lightweight-css-framework/?utm_source=frontendfocus&utm_medium=email) tutorial
Baljeet Rathi
[CSS Positioning Explained By Building An Ice Cream Sundae](https://medium.freecodecamp.com/css-positioning-explained-by-building-an-ice-cream-sundae-831cb884bfa9#.bre2ft96g?utm_source=frontendfocus&utm_medium=email) tutorial
Kevin Kononenko
[Fun Times with CSS Pixel Art](https://css-tricks.com/fun-times-css-pixel-art/?utm_source=frontendfocus&utm_medium=email) tutorial
Techniques for producing retro-style ‘pixel art’ for the Web using CSS, Canvas and SVG.
Geoff Graham
[Using WebP Images](https://css-tricks.com/using-webp-images/?utm_source=frontendfocus&utm_medium=email) tutorial
Still only supported in Chrome, however.
Jeremy Wagner
[Use Cases for Fixed Backgrounds in CSS](https://css-tricks.com/use-cases-fixed-backgrounds-css/?utm_source=frontendfocus&utm_medium=email) tutorial
Geoff Graham
[Webpack from First Principles: A Smooth 15 Minute Intro](https://www.youtube.com/watch?v=WQue1AN93YU) video
Front End Center
[Demythstifying Web Components: 4 Myths Debunked](http://www.backalleycoder.com/2016/08/26/demythstifying-web-components/?utm_source=frontendfocus&utm_medium=email) opinion
Daniel Buchner
[How to find and fix the slowest code in your .NET application](http://www.red-gate.com/products/dotnet-development/ants-performance-profiler/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=slowest_code&utm_campaign=antsmemoryprofiler&utm_term=email-24970) rawurl tools
Find bottlenecks in your code or database and boost performance with new ANTS Performance Profiler 9. [Try free](http://www.red-gate.com/products/dotnet-development/ants-performance-profiler/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=slowest_code&utm_campaign=antsmemoryprofiler&utm_term=email-24970).
ants performance profilerSponsor
[Grade: Generate Complementary Gradients From Supplied Images](https://github.com/benhowdle89/grade?utm_source=frontendfocus&utm_medium=email) code
The [demo](http://benhowdle.im/grade/) shows it off well.
Ben Howdle
[Badgerly: A CSS 3 Library for Rendering Badges](https://github.com/stevenmhunt/badgerly?utm_source=frontendfocus&utm_medium=email) code
Steven Hunt
[React Static Plate: Build Static Sites with React + CSS Modules](https://github.com/webyak/react-static-plate?utm_source=frontendfocus&utm_medium=email) code
Uses ES6, supports hot reloading locally, generates a sitemap.xml file.
Yannik Schweinzer
[Interactive 3D CSS Cubes](https://christinecha.github.io/3d-css-cubes/?utm_source=frontendfocus&utm_medium=email) demo
A simple interactive grid in 3D space. The effects are pure CSS.
Christine Cha
[Make a Depth of Field Effect with CSS Animation](http://pixelonezero.com/depth-of-field-css-animation?utm_source=frontendfocus&utm_medium=email) demo
Simulating depth-of-field with HTML and CSS alone is “surprisingly easy”. [Demo of it in action.](http://pixelonezero.com/demo/depth-of-field.php)
Pixel One Zero
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/255)
Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK