#340 — May 16, 2018

Read on the Web

Frontend Focus

The Front-End Tooling Survey 2018 Results — Over 5,000 frontend developers took part in this survey we linked a few months ago. Here are the results on what tools and techniques devs are using right now. Lots to digest here.

Ashley Nolan

A Strategy Guide To CSS Custom Properties — Michael Riethmuller takes a thorough look at strategies for getting the most out of CSS Custom Properties (a.k.a. ‘CSS variables’) which are now supported in all mainstream browsers.

Smashing Magazine

?  What’s New in Chrome DevTools — At Google I/O 18, Paul Irish and Jason Miller presented a great roundup of what’s new in the Chrome DevTools. 30 minutes here could boost your productivity for the rest of the year.

Google Chrome Developers

HTML. CSS. JavaScript. Learn Free For 10 Days — Learn the right skills in the right order with learning paths for top front-end technologies. Get 10 days free on Pluralsight.

Pluralsight sponsor

Introducing the Microsoft Edge DevTools Protocol — As of the Windows 10 April 2018 update, Microsoft’s Edge browser includes support for diagnosing and debugging Edge tabs remotely. They’re aligning with Chrome’s own DevTools protocol and as a result a working group has been created to help with interoperability.

Brendyn Alexander (Microsoft)

?  The Web: A Google Flavored State of The Union — A Google I/O talk highlighting recent transformations of the modern web and a sneak peak into new advances coming to the platform in the near future.

Ben Galbraith and Malte Ubl

All The Ways to Deal With Line Breaks with CSS and HTML — Some helpful approaches and suggestions for dealing with troublesome line breaks both with HTML and CSS.

Chris Coyier

What’s New in Firefox 61: Developer Edition — The developer tools are now more customizable, work better with Babel and webpack, and include a new Accessibility Inspector.

Mozilla Hacks

Web Authentication API Added to ‘Can I Use’ — The popular ‘Can I Use’ Web API browser support tool is now tracking which browsers support the new Web Authentication APIs. Currently just Firefox 60, but Chrome and Edge have support coming soon.

Can I Use

Blink Intent to Ship: CSS Scroll Snap — CSS Scroll Snap introduces snap positions as a way to enforce the scroll offsets that a scroll container’s visual viewport may end at after a scrolling operation has completed.

Yunjia (Sandra) Sun

Blink Intent to Experiment: Picture-in-Picture (PiP) Support — Allow sites to create a floating video window on top of other windows so users may continue consuming media.

François Beaufort

The O’Reilly Fluent Conference — Keynoting at Fluent: Cory Doctorow and Brendan Eich. Get your pass today and save 20% with code JSW20

O’Reilly Media, Inc. sponsor

? Jobs

Sr. Fullstack Engineer (Remote) — Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work.

Sticker Mule

Frontend Web Engineer (London, UK) — Join us to develop our web app and internal tools that enable us to build cities & run transport services.

Citymapper

Front-End Expert? Sign Up for Vettery — Top companies use Vettery to find the best tech talent. Create your profile to get started.

Vettery

? Tutorials

Responsive Tables, Revisited — A brief exploration of using CSS to convert table rows to a more list-like layout for thinner viewports without duplicating content.

Lea Verou

Managing SVG Interaction with the Pointer Events Property

Tiffany B. Brown

Cheat Sheet Alert – Functional Programming with JavaScript Is Out Now

Progress Kendo UI sponsor

CSS’s ‘!important’ and What To Use It For — The !important keyword gives the associated CSS property precedence.

Adam Laki

7 Rules of Using Radio Buttons vs Drop-Down Menus for Forms

Saadia Minhas

First Input Delay: A New Web Interactivity Metric — First Input Delay (FID) is a new performance metric for measuring page responsiveness for real users in the wild.

Philip Walton (Google)

Bringing Screen Capture to Microsoft Edge with the Media Capture API — Edge is the first browser to support Screen Capture via the Screen Capture API.

Angelina Gambo and Bernard Aboba (Microsoft)

How to Create A Simple, Accessible CSS Loading Spinner — A step-by-step tutorial on how to create an animated, single element CSS loading spinner that’s accessible.

Stuart Nelson

Linux Cloud Hosting Starting at 1GB of RAM for $5/mo

Linode Cloud Hosting sponsor

? Golden Oldies

How to Use HTML5 Custom Data Attributes (and Why)

SitePoint

The Power of CSS’s rgba() Color Function — Some tricks you can pull off with the rgba color function.

Ahmad Shadeed

Combining Fonts with CSS’s ‘unicode-range’ Property

Jake Archibald

5 Image Lazy Loading Techniques to Improve Performance

Maria Antonietta Perna