#365 — November 7, 2018

Read on the Web

Frontend Focus

A 101 Course on Crafting 404 Pages — Here’s why making an effort with a 404 page could better your site’s chances of people coming back despite the inconvenience, and how to track those errors to reduce how often people see it.

Shelby Rogers

A Netflix Web Performance Case Study — An interesting look at how Netflix worked to improve the ‘time-to-interactive’ metric on their desktop Web experience. It involved both prefetching and ripping out React.

Addy Osmani

Free: 💯 Complete Intro to Web Development, v2 — Get our complete introductory course to web development for free. This is a modern intro course where you'll go from building your first website to having the foundations to become a professional web developer.

Frontend Masters sponsor

▶  Improve Animated GIF Performance with HTML5 Video — Everyone loves a good animated GIF (right?) but the nature of the GIF format can lead to huge file sizes and more CPU used than necessary. One workaround? Use HTML5’s native video support.

Ayo Isaiah

▶  How One Dev Does Web Development on an iPad Full Time — I couldn’t do this myself, but it’s neat to see how the process works.

Curtis McHale

Chrome Will Soon Ad-Block An Entire Website If It Shows Abusive Ads“With Chrome 71, Google is stepping up its fight against the internet’s abusive ads problem by blocking every ad on a site that persistently shows them.”

Jon Porter

Using calc() to Change The Height of a Hero Component — For situations where you need to mix relative units and pixels. For example: calc(24px + (18 - 24)*(100vw - 400px)/(1200 - 400))

Martino Stenta

💻 Jobs

Frontend Developer at X-Team (Remote) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team.


Software Engineer, Front-End (Browser Extensions) - San Francisco — We're looking for an Engineer to join our Browser Extension team to help achieve our mission of improving lives by improving communication.


Join Our Career Marketplace & Get Matched With A Job You Love — Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.


📘 Tutorials

Optimizing CSS by Removing Unused Media Queries

Dario Gieselaar

Simple Named Grid Areas“I think of named grid areas in CSS Grids as bring-your-own syntactic sugar. You don’t absolutely need them (..) but it can make that placement more intuitive.”

Chris Coyier

Secure and Accelerate Your Cloud Storage — Use Cloudflare Workers to cache content while still preventing unwanted access with HMAC and JSON Web Tokens.

Cloudflare Workers sponsor

Measuring Performance With Server Timing — The HTTP Server-Timing header provides a convenient way to communicate backend server performance timings to browser-based developer tools.

Drew McLellan

Signed HTTP Exchanges Coming to Chrome 71 — Chrome will soon experimentally support ‘Signed Exchanges’ which let sites sign web content such that the content can be verified as to where it was originally from.

Google Developers

▶  How Basecamp Uses CSS Grid in Production

Important Show

How to Use SVG Patterns As Backgrounds

Adi Purdila

How Do Top Developers Deliver Video? - Download the 2018 Video Report

Bitmovin sponsor

Simple Recommendations for Writing Text Descriptions That Make A Big Difference

Léonie Watson

🔧 Code and Tools

Shapes Created Solely with CSS Background Gradients — Gradients can do a lot more than, well, just make gradients.


Howler.js: JavaScript Audio Library for the Modern Web

James Simpson

md-page: Create a Web Page with Just Markdown — No advance compilation required. Just add a script to a Markdown document and it Just Works™. Interesting idea.

Oscar Morrison

Prettier 1.15: Now with HTML, Vue, Angular and MDX Support — This opinionated code formatter now has support for HTML, Vue, Angular & MDX.

Ika (Prettier)