#383 — March 20, 2019

Read on the Web

Frontend Focus

Firefox 66: The Sound of Silence — Users can now determine whether a site can autoplay sound or not, improvements have been made to scrolling, Touch Bar support has been added for macOS, and various security issues have also been resolved. Here’s the full release notes.

Mozilla

KV Storage, the Web’s First ‘Built-in’ Module? — Chrome is experimenting with a concept called built-in modules, essentially a sort of standard library for JavaScript that requires no extra downloads in clients such as browsers. Exciting, but controversial.

Google Developers

Build & Deploy Serverless Apps on a Global Cloud Network — Learn how to start writing serverless APIs in JavaScript, and reserve a custom subdomain for your next project.

Cloudflare Workers sponsor

An Introduction to Web Components — The first in a series on Web Components. This introductory post looks at why they’re a great tool for delivering “high-quality user experiences without complicated frameworks or build steps” without the risk of becoming obsolete.

Caleb Williams

I Used The Web for a Day on Internet Explorer 8 — IE8 was released 10 years ago this week. Chris Ashton tries it out against the modern web, and considers how we can build our sites to last.

Chris Ashton

Who Has The Fastest Website in F1? — Comparing the performance of 10 recently updated Formula One (the motor-racing sport) sites and seeing what common issues exist. Jake also goes through the tools and techniques used for such testing.

Jake Archibald

? 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

Product-Focused & Driven Frontend Engineers in Stockholm — Join our 30-person team of A-players, solve problems at global scale and help us become the most trustworthy online health company.

Diet Doctor Sweden AB

Find A Job Through Vettery — Vettery specializes in dev roles and is completely free for job seekers.

Vettery

? Articles, Tutorials & Opinion

Sophisticated Partitioning with CSS Grid — A detailed case study looking at creating compelling grid patterns by harnessing specificity.

Rob Weychert

Getting Started with PostCSS in 2019 — Learn how PostCSS can help improve your front-end workflow this year.

Emmanuel Yusufu

Scope in CSS — An explainer going through the problems with scoping in CSS and some potential solutions.

Peter-Paul Koch

?  The State of CSS with Una Kravets — Google developer advocate Rick Viscomi discusses the state of CSS with Una Kravets, touching upon Flexbox, Grid, Houdini and more.

Google Chrome Developers

Planning for Responsive Images — “Adjusting the width simply doesn’t cut it when it comes to handling responsive images.”

Chris Nwamba

IMAGECON: The Ultimate Event For Devs on Rich Media. Learn More

Cloudinary sponsor

Hacking Custom Checkboxes & Radios with CSS — Improving the look of native radio buttons/checkboxes while still preserving accessibility.

Glad Chinda

How to Build a Member App using Facial Recognition and the Serverless Framework — Using AWS Rekognition and AWS Lambda via the Serverless Framework to build a scalable member management system to replace membership cards.

James Beswick

You Probably Don’t Need Input type="number" — A cautionary tale, as Brad quickly makes the case against always using type="number".

Brad Frost

My CSS Reset — Designer and developer Zell Liew shares his personal preference for a CSS reset.

Zell Liew

? Code and Tools

Pseudo 3D Text Effect — A well-realised pseudo 3D technique here, with the text formed from particles. Moves on hover.

JK codepen

Shop Like a Developer – Discover and Experiment with Hot New Cloud Services ?

Manifold sponsor

webp-in-css: PostCSS Plugin and Tiny JS Script to Use WebP in CSS Backgrounds — This 128-byte script claims to make your background images around 25% smaller for Chrome, Firefox, and Edge.

Andrey Sitnik

lax.js: Animation Scroll Effects — A simple and lightweight (2kb minified and zipped) plugin to create smooth animation on scroll. Here’s the repo.

Alex Fox

Micromodal: A Tiny JS Library for Creating Accessible Modal Dialogs — Just 1.9KB minified and gzipped.

Kalpesh Singh and Indrashish Ghosh

? Create Feature-Rich JavaScript Data Grids & Tables with ZingGrid

ZingGrid sponsor

A Collection of jQuery Table Plugins — …to create responsive, functional and dynamic tables.

Prasad G

A Tiny Script to Make Your Google Fonts Render Faster

Perf Perf Perf

CVS Receipt — If you know, you know. ? Get ready to scroll.

Garrett W codepen

AutoNumeric.js: Automatically Format Numbers and Currency Inputs — No dependencies, ES6-friendly. The configuration page is a really neat touch. Play and test with the options on the fly.

Alexandre Bonneau

? P.S. We are supporting the annual Coding Sans State of Software Development survey and encourage you to take part. It takes under 10 minutes, there are a variety of prizes on offer for random entrants, and the results from previous years have been useful.