---
title: "This Week's HTML5 and Browser Technology News (Issue 246)"
publication: "Frontend Focus"
issue: 246
published_at: "2016-06-29"
canonical_url: "https://frontendfoc.us/issues/246"
---

This Week's HTML5 and Browser Technology News (Issue 246)

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

Frontend FocusIssue 246 — June 29, 2016[The Languages Which Almost Became CSS](https://eager.io/blog/the-languages-which-almost-were-css/?utm_source=frontendfocus&utm_medium=email)A enjoyable essay looking at technologies and approaches that were proposed for styling Web documents before CSS became the firm favorite. Zack Bloom 
[Content Jumping (and How To Avoid It)](https://css-tricks.com/content-jumping-avoid/?utm_source=frontendfocus&utm_medium=email)“Few things are as annoying on the web as having the page layout unexpectedly change or shift while you’re trying to view or interact with it.” Brandon Smith 
[A Single Div: A CSS Drawing Project](http://a.singlediv.com/?utm_source=frontendfocus&utm_medium=email)Detailed, elegant icons rendered with CSS upon just one div element. (You’ll want to open your browser's element inspector to dig into these.) Lynn Fisher 
[![Red Gate\](https://copm.s3.amazonaws.com/64e063a7.gif)](http://www.red-gate.com/products/dotnet-development/ants-performance-profiler/?utm_source=html5weekly&utm_medium=displayemail&utm_content=slowest_code&utm_campaign=antsperformanceprofiler&utm_term=email-24885)[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=html5weekly&utm_medium=displayemail&utm_content=slowest_code&utm_campaign=antsperformanceprofiler&utm_term=email-24885)Boost the performance of your .NET application with ANTS Performance Profiler. Get rich performance data on your code and database queries to find your application's bottleneck fast. Try ANTS Performance Profiler on your app now. Red GateSponsor
[Improved Font Loading in Webkit](https://webkit.org/blog/6643/improved-font-loading/?utm_source=frontendfocus&utm_medium=email)“Many fonts are large, causing a long delay until the browser can use them. WebKit has mitigated this.” Myles Maxfield 
[Image Replacement Techniques in the Modern Age](https://www.sitepoint.com/image-replacement-techniques-in-the-modern-age/?utm_source=frontendfocus&utm_medium=email)Baljeet Rathi explains the various CSS image replacement techniques available to web developers today and their pros and cons. Baljeet Rathi 
[Three Real-World Uses for Mutation Observer](https://eager.io/blog/three-real-world-use-cases-for-mutation-observer/?utm_source=frontendfocus&utm_medium=email)Mutation Observer is a feature, supported by all modern browsers, that let you detect when elements in a page are inserted, changed or removed. Zack Bloom 
[Everything You Could Want to Know About The Referer Header](https://blog.fastmail.com/2016/06/20/everything-you-could-ever-want-to-know-and-more-about-controlling-the-referer-header/?utm_source=frontendfocus&utm_medium=email)What is the Referer header and how can you control its presence (or lack thereof)? A handy resource for security-minded Web developers. Neil Jenkins 
[An Introduction to Website Animation with Velocity.js](https://spin.atomicobject.com/2016/06/23/web-animation-velocity-js/?utm_source=frontendfocus&utm_medium=email)A quick walkthrough of building your first animation with Velocity.js to animate a list. Includes a CodePen example. Bryan Elkus 
[The 14 Most Popular CSS Links of 2016 So Far](https://medium.com/statuscode/the-14-most-popular-css-links-of-2016-so-far-96a6e64378d5?utm_source=frontendfocus&utm_medium=email)We’ve taken a look through all the stats from HTML5 Weekly published so far in 2016 and collected the most popular CSS links we shared. Chris Brandrick 


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)

- [Palantir co-founder’s new startup in SF looking for Front End Engineer](https://affinity.recruiterbox.com/jobs/fk06vmm?cjb_hash=O_vJbg36&apply_now=true)At Affinity we're building a better way for enterprise to understand, share and nurture professional relationships. Have front-end experience? Join us in SF to learn, experiment and support our team. Apply [here.](https://affinity.recruiterbox.com/jobs/fk06vmm?cjb_hash=O_vJbg36&apply_now=true) Affinity
- [The Easiest Way to Find a Job](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-html5&utm_content=easiest&utm_campaign=q2-16-html5weekly&utm_location=us)Hired lets you sit back while job offers come to you. When you complete your profile, instantly apply to 3,500+ companies on the platform who will contact you with job offers, including salary and equity up-front. [Try it today.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-html5&utm_content=easiest&utm_campaign=q2-16-html5weekly&utm_location=us) 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

[Dreamweaver Is Back for Us, Coders](https://medium.com/@helloanselm/dreamweaver-is-back-for-us-coders-2a1be75ae595?utm_source=frontendfocus&utm_medium=email) news 
A look at the beta of Adobe’s refreshed code editor, Dreamweaver.
Anselm Hannemann

[D3.js 4.0 Released: The Popular Data Visualization Library](https://github.com/d3/d3/releases/tag/v4.0.0?utm_source=frontendfocus&utm_medium=email) news
D3

[HTML5 Ads Aren't That Safe Compared to Flash, Experts Say](http://news.softpedia.com/news/html5-ads-aren-t-that-safe-compared-to-flash-study-reveals-505597.shtml?utm_source=frontendfocus&utm_medium=email) news
Catalin Cimpanu

[Apple Releases Safari 10 Developer Beta for OS X Yosemite and El Capitan](http://www.macrumors.com/2016/06/23/safari-10-developer-beta-yosemite-el-capitan/?utm_source=frontendfocus&utm_medium=email) news
MacRumors

['Chrome does not respond dynamically to @media rules inside @supports'](https://thatemil.com/blog/2016/06/20/enquire-within-upon-media/?utm_source=frontendfocus&utm_medium=email) news
Emil Björklund

[Contextual Identities on the Web in Firefox Nightly](https://blog.mozilla.org/tanvi/2016/06/16/contextual-identities-on-the-web/?utm_source=frontendfocus&utm_medium=email) news
Tanvi Vyas

[New Good Parts of JavaScript and the Web Course](https://frontendmasters.com/courses/good-parts-javascript-web/?utm_source=frontendfocus&utm_medium=email) rawurl 
Douglas Crockford greatly expands JavaScript the Good Parts with more programming challenges, ES6, async, how web browsers work, web security and more.
Frontend MastersSponsor

[Don't Overthink Flexbox Grids](http://css-tricks.com/dont-overthink-flexbox-grids/?utm_source=frontendfocus&utm_medium=email) tutorial 
Vanilla, framework-free grids are easy-peasy with Flexbox.
Chris Coyier

[Form Design: How to Automatically Format User Input](http://webdesign.tutsplus.com/tutorials/auto-formatting-input-value--cms-26745?utm_source=frontendfocus&utm_medium=email) tutorial 
Learn how to format, real time, user input in a form field.
Thoriq Firdaus

[Building Better Accessibility Primitives](http://robdodson.me/building-better-accessibility-primitives/?utm_source=frontendfocus&utm_medium=email) tutorial 
A look at ARIA and HTML in relation to modals and disabling tabindex.
Rob Dodson

[Drawing Waveforms with the Web Audio API and SVG](https://robots.thoughtbot.com/javascript-audio-api?utm_source=frontendfocus&utm_medium=email) tutorial
Matt Sumner

[Build Your First Thing With WebAssembly](http://cultureofdevelopment.com/blog/build-your-first-thing-with-web-assembly/?utm_source=frontendfocus&utm_medium=email) tutorial
Nick Larsen

[The Landscape of Front-End Testing](https://vimeo.com/album/3953264/video/165995134?utm_source=frontendfocus&utm_medium=email) video
Alicia Sedlock

[A Different Approach](http://www.launchbit.com/taz/11157-6455-111?utm_source=frontendfocus&utm_medium=email) rawurl tools 
Take control of your website with features you won't find anywhere else. Find out why PageCloud is the world's most advanced website creator.
PageCloudSponsor

[Tool to Draw Pixel Art, Get CSS Back](http://pixelart.jvrpath.com/?utm_source=frontendfocus&utm_medium=email) tools
Javier Valencia Romero

[Algolia Places: Address Autocompletion for 'input' Fields](https://github.com/algolia/places?utm_source=frontendfocus&utm_medium=email) tools code 
There’s a [full intro post](https://blog.algolia.com/introducing-algolia-places/) too.
Algolia

[Tridiv: A Web-Based Tool for Creating 3D Shapes with CSS](http://tridiv.com/?utm_source=frontendfocus&utm_medium=email) tools
Julian Garnier

[Vidage: Full-Screen Background Video and Image Library](https://github.com/dvLden/Vidage?utm_source=frontendfocus&utm_medium=email) code 
Automatically switches the video for a fallback image on small/touch devices.
Nenad Novaković

[griddy.css: A Simple, Responsive 12 Column Based Grid in ~1KB](https://github.com/voronianski/griddy.css?utm_source=frontendfocus&utm_medium=email) code
Dmitri Voronianski

[gl-water2d: 2D Liquid Simulation with WebGL](https://github.com/Erkaman/gl-water2d?utm_source=frontendfocus&utm_medium=email) code
Eric Arnebäck

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/246)

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