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.
YouTube
An objective set of pros, cons and helpful tips spanning the various ways of loading Web fonts on your site.
Zach Leatherman
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.
Eugene Chiong
Eight days of sessions and workshops on React, D3, Angular 2, Accessibility, Progressive Web Apps and Functional JS.
ForwardJS
Sponsor
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.
Heather Migliorisi
A quick online game/tutorial to help you learn CSS selectors (or at least refresh your knowledge).
Luke Pacholski
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.
Tommy Hodgins
Patrick Catanzariti looks at how the Internet of Things may affect front-end web development in the future.
Patrick Catanzariti
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”
W3C
Jobs
Can't find the right job? Want companies to apply to you? Try Hired.com.
In Brief
New Good Parts of JavaScript and the Web Course rawurl news Douglas Crockford greatly expands JavaScript the Good Parts with more programming challenges, ES6, async, how web browsers work, web security and more. 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. WebAssembly Project
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. Giulio Prisco
Using Zopfli to Optimize PNG Images tutorial A way to reduce the size of your PNGs (often significantly) in a lossless fashion. Ariya Hidayat
Accessibility Options for Unlabelled HTML 'input' Search Fields tutorial Jeremy Keith
How To Build A Cross-Platform WebGL Game with Babylon.js tutorial David Rousset
How to Scale SVGs Without Scaling Their Strokes tutorial Useful when scaling icons, for example. Nick Salloum
How to Set Up Automated, Cross-Browser JavaScript Unit Testing tutorial Philip Walton
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. Designlab Sponsor
How The Guardian is Experimenting with Interactive Web Notifications story Madeline Welsh
How Will Web Components Change CSS Architecture? opinion Jonathan Snook
We Built Our Website Without CSS: The Highs and The Lows opinion “If I started a personal project today, I would do my styling in JavaScript.” David Gilbertson
Practical Use Cases for the 'picture' Element opinion Corey Bruyere
The Hottest Trend in Web Design Is Making Intentionally Ugly, Difficult Sites opinion Washington Post
Reflecting on the W3C Web Payments WG opinion The Payment App API was adopted as an editor’s draft this week. Adrian Hope-Bailie
The Moment CSS Started Making 'Sense' opinion Geoff Graham, Robin Rendle and Sarah Drasner share what it took for them to ‘get’ CSS. Geoffrey Graham
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.. KeyCDN
aXe 2.0: An Open Source Accessibility Testing Engine tools Automated testing of HTML-based UIs for accessibility defects. Marcy Sutton
VidzPlayer: A React-Based HTML5 Video Player code A simple video player built in React, leveraging vidz for the player creation. Plant The Idea
ZingTouch: A JavaScript Mobile Gesture Detection Library code Provides six standard gestures that are completely customizable (Try it on a touch-enabled device). ZingChart
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
|