In just 30 minutes, Jake Archibald presents a practical guide to the technologies behind taking an online-only site and turning it into a fully network-resilient offline-first progressive webapp.
An objective set of pros, cons and helpful tips spanning the various ways of loading Web fonts on your site.
A Chrome DevTools extension that lets you simulate interactions with a site as a completely, partially or color-blind person, as well as run an accessibility audit. More insights here.
Eight days of sessions and workshops on React, D3, Angular 2, Accessibility, Progressive Web Apps and Functional JS.
A code and example-dense look at how the rising popularity of Scalable Vector Graphics (SVG) could impact users of assistive technology, and what can be done to ensure a great experience.
A quick online game/tutorial to help you learn CSS selectors (or at least refresh your knowledge).
A discussion of the history and uses of element queries and how this led to the creation of EQCSS, a plugin that supports element queries, Scoped CSS, and more.
Patrick Catanzariti looks at how the Internet of Things may affect front-end web development in the future.
The level one draft for the CSS Grid Layout spec has been updated, outlining the differences between Flexbox and Grid: “Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts”
Can't find the right job? Want companies to apply to you? Try Hired.com.
Frontend Masters Sponsor
HTML5test Updated; Now Supports Many New Web Specs news
A Start on a Human-Readable Prose-Led WebAssembly Spec news
Still very much a work in progress, like WebAssembly itself.
The W3C and MIT Media Lab Host First ‘Blockchain and the Web’ Workshop news
Blockchain and Web standards experts discussed what needs to happen to integrate blockchains into the Web.
Using Zopfli to Optimize PNG Images tutorial
A way to reduce the size of your PNGs (often significantly) in a lossless fashion.
Accessibility Options for Unlabelled HTML 'input' Search Fields tutorial
How To Build A Cross-Platform WebGL Game with Babylon.js tutorial
How to Scale SVGs Without Scaling Their Strokes tutorial
Useful when scaling icons, for example.
6-Step Responsive Design Guide: Grids, Progressive Disclosure, & Layouts rawurl tutorial
Learn how to truly design mobile-first and the 3 vital questions to ask before you start any web development project.
How The Guardian is Experimenting with Interactive Web Notifications story
How Will Web Components Change CSS Architecture? opinion
We Built Our Website Without CSS: The Highs and The Lows opinion
Practical Use Cases for the 'picture' Element opinion
The Hottest Trend in Web Design Is Making Intentionally Ugly, Difficult Sites opinion
Reflecting on the W3C Web Payments WG opinion
The Payment App API was adopted as an editor’s draft this week.
The Moment CSS Started Making 'Sense' opinion
Geoff Graham, Robin Rendle and Sarah Drasner share what it took for them to ‘get’ CSS.
A Look at WebP Support in Browsers opinion
WebP offers some advantages over JPEGs and PNGs but how broad is support for the format? More common than you’d think..
aXe 2.0: An Open Source Accessibility Testing Engine tools
Automated testing of HTML-based UIs for accessibility defects.
VidzPlayer: A React-Based HTML5 Video Player code
A simple video player built in React, leveraging vidz for the player creation.
Plant The Idea
Provides six standard gestures that are completely customizable (Try it on a touch-enabled device).
Recreating The Sounds of The BBC Radiophonic Workshop demo
The BBC has reproduced an early electronic instrument using the Web Audio API. You can play with it here and also see how it was built. Several other examples can also be found in the footer.
BBC Research and Development