#420 — December 11, 2019

Read on the Web

Frontend Focus

Z’s Still Not Dead Baby, Z’s Still Not Dead — A fun look at five CSS properties, including background-blend-mode, that can add “depth and richness to your designs”.

Andy Clarke

Firefox 71: A Year-End Arrival — Introduces a “plethora of new developer tools” including the web socket message inspector, console multi-line editor mode, log on events, and network panel full text search.

Chris Mills (Mozilla)

Chrome 79 Released with Tab Freezing, Back-forward Caching, and Loads of Security Features — Version 79 shipped yesterday with support for predictive phishing, real-time Safe Browsing detections, and a built-in Password Checkup tool. Here’s a video from Google running through what’s new.

Catalin Cimpanu

DNS Issues? Five Practical Strategies to Avoid Single Points of Failure — This year, several high profile outages have proven the adage that no provider is too-big-to-fail. This article details safeguards against DNS outages, including a deep-dive into major outages, their cause, and their impact over the last 20 years.

Ably sponsor

Six Web Performance Technologies to Watch in 2020 — The author argues not to place big bets “on 5G and HTTP/3 to make things faster” as there are a range of other technologies that he believes will have a bigger impact on web performance over the next twelve months.

Simon Hearne

Accessibility Testing by People with Disabilities — Reviews the challenges associated with accessibility testing and how you can go about formally including testers with disabilities to further improve your testing processes.

Becky Gibson

A Roundup of Web Development ‘Advent Calendars’ for 2019 — The idea of having developer-oriented ‘advent calendars’ where one article is posted on each of the 24 days of advent has really caught on. So if you want more reading, fill your (Santa) boots here.

? Jobs

Front-End Developer / UX Developer – in Berlin, Germany or Remote — One of Germany´s fastest growing Tech-Startups is looking for a Design-Driven Software-Enthusiast.

virtualQ

Find a Job Through Vettery — Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers.

Vettery

Technical Content Producer (Interim) at Ably (London, Remote OK) — Ably builds tools and cloud infrastructure for the realtime internet. They need a developer/tech writer on a temporary basis to coordinate, outsource, and review the creation of technical content for a developer audience.

Ably

? Articles, Tutorials & Opinion

prefers-color-scheme in SVG Favicons for Dark Mode Icons — Chrome will soon be supporting SVG favicons, meaning you’ll be able to use CSS and the prefers-color-scheme media query to serve up a favicon that’s unique for dark mode users. Here’s a little demo.

Thomas Steiner

Beautiful Scrolling Experiences – Without Libraries — A look at the relatively new CSS Scroll Snap spec and how it can control the scrolling behaviour of a web page (to a degree) – without resorting to heavy libraries.

Michelle Barker

Take Your Front-End Skills to the Next Level — In our 4.5-day course learn how to craft responsive web apps, build performant backends, & simplify design through maintainable user interface components.

Big Nerd Ranch sponsor

?  Building Responsive Layouts in The Browser — Una Kravets presents this well-rounded introduction to building a responsive layout, and how the browser can help with just that.

Google Chrome Developers

“Link In Bio” Is A Slow Knife — Thoughts on how the ‘link in bio’ phrase (often seen over on Instagram) can be seen as a subtle, and yet pervasive, attempt to “kill the web”.

Anil Dash

How to ‘Fight Back’ Against Google AMP As A Web User and A Web Developer — There continues to be a push back against AMP from the developer community. If that includes you, this post is something of a quick guide to avoiding using it.

Marko Saric

How DNS Works — A fun little comic that explains in a straightforward manner what happens when you browse to a website.

DNSimple

Understanding the Difference Between CSS Resolution and Device Resolution

Elad Shechter

Tried & True Productivity Tips from 25 React Experts

Progress KendoReact sponsor

Create A JAMstack Site with Open Authoring Using Netlify CMS

Brian Rinaldi

? Code, Tools & Resources

noUiSlider: Lightweight Range Slider with Full Multi-Touch Support — Pretty powerful and flexible. There’s a full page of examples.

Leon Gersen

OpenLayers: High Performance Frontend Mapping Library — A system for putting dynamic maps onto your pages that can render map tiles pulled from various sources, vector data layers, markers, etc. Supports both Canvas and WebGL as appropriate. Examples here.

OpenLayers

Falco: Helps Monitor, Analyze, and Optimize Websites — This open-source performance tool can audit your site automatically, delivering WebPageTest results/reports to action against.

Theodo.FR

Find Out Who Can Use Your Color Combination — A tool that brings attention and understanding to how color contrast can affect different people with visual impairments.

Who Can Use

ResponsiveViewer — A Chrome extension for testing responsive sites. Shows multiple screens in one view.

skmail