June 10, 2020 #444 — June 10, 2020Read on the WebFrontend Focus Current browser support for ‘is()’ via caniuse.comCSS :is() and :where() Are Coming to Browsers — Šime Vidas explains how these new CSS pseudo-classes can be used (for reducing repetition, and keeping specificity low respectively).Web Platform NewsThe Complete Guide to CSS Media Queries — A solid, thorough guide on all things CSS media queries, good as a primer, or worth revisiting for a refresher.Polypane JAMstacked: An Email Update on The Evolving JAMstack Ecosystem — Join Brian Rinaldi for a regular email update on all things JAMstack, including all of the latest resources developers need to know about.Cooperpress sponsorAnimate.css v4: Just-add-water CSS Animations — This is one of the most popular of the ‘drop-in’ CSS animation libraries, and they’ve now moved to version 4. Significantly, among the changes is a prefix on classes.daniel edenCool Little CSS Grid Tricks for Your Blog — An exploration of how you can use CSS Grid, along with properties such as auto-fit and auto-fill, to produce some nifty looking image galleries.Ana TudorPublishers Sue Internet Archive For ‘Mass Copyright Infringement’ — Whilst the legal action here is specifically to do with ebooks, it’s important to underline the excellent preservation work of the Internet Archive (which includes the Wayback Machine) and how hugely important it is to the long-term conservation of the web as a whole.Colin Dwyer (NPR)?? Quick bits:A new CSS function for mixing two colors is in the works.Version 8 of the popular HTML 5 Boilerplate template is now available. Here’s the related GitHub repo.The recently released ‘ScrollTrigger’ GSAP plugin claims to ‘reinvent scroll-driven animations‘.Oops. The Brave browser has been observed autocompleting to URLs it could profit from.A second release candidate for Vivaldi 3.1 has been released.? JobsFrontend Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.X-TeamFind A Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get startedVettery?? Interested in running a job listing in Frontend Focus? There’s more info here.? Tutorials & OpinionThe Service Worker Lifecycle Explained — Explaining the lifecycle of Service Workers in PWAs and how to update them as fast as possible.Felix Gerschau AboutGrid for Layout, Flexbox for Components — Ahmad looks at the key differences between these two layout options, and although there’s no right or wrong here, he recommends some use-cases for where you may want to use each.Ahmad ShadeedThe Mad Magazine Fold-In Effect in CSS — An impressive CSS-only recreation of the Mad magazine fold-ins (where folding a printed page would reveal a hidden message in the artwork).Thomas ParkQuick Tips for High Contrast Mode — A few simple pointers to improve the High Contrast Mode experience for Windows users.Sarah HigleyScale Your Software Projects Without Losing Speed — See how Shopify used Buildkite CI/CD to scale from 300 to 1800 engineers while keeping build times under 5 minutes.Buildkite sponsorHow to Create a Motion Hover Effect for a Background Image Grid — You’ll need to see the demo to get it, but it’s a neat visual effect well suited for when you’ve got a variety of photos to illustrate a concept.Mary LouStyling Numbered Lists with CSS Counters — How to use CSS counters to customize the appearance of numbers in an ordered list.Supun KavindaCSS Viewport Units: A Quick Start — Covers vh, vw, vmin and vmax.Asha Laxmi and Maria Antonietta PernaSass Color Functions in CSSJim Nielsen? Code, Tools and Resources CSS Grid: Newspaper Layout — This is an excellent demo showing how Grid can be used to create a responsive newspaper-style layout.Olivia Ng codepenFAB: Frontend Application Bundles — A bundle format for frontend applications that unify static sites, SPAs, server-side rendering (SSR), and server-side logic in a single format that’s easy to deploy.Frontend Application BundlesGrid.js: An Advanced Table Control — A lightweight, advanced table plugin that can work alongside React, Angular, Vue, or, well, nothing. Check out some of the examples for more on how to use it. It uses Preact under the hood.Afshin MehrabaniQuotebacks: Embed Quotes Without Losing Context — This is a small library that can embed a quote in an attractive format within the source context. Can also be used as a Chrome extension that saves to local storage.Tom Critchlow and Toby ShorinSorted CSS Colors: A Way to Navigate CSS Colors By Hue — This feels like quite a natural way to navigate the over 100 ‘named’ CSS colors (like Gainsboro, Firebrick, and LawnGreen).Mustafa EnesSweetAlert: Attractive Modal Popup Alerts/Messages — Bills itself as ‘a beautiful replacement for JavaScript’s “alert”’Tristan Edwards et al.?Jam: A Minimalistic Jamstack Approach for Creating GitHub-Pages Hosted Sites — Use Visual Studio Code as a lightweight authoring and publishing tool for small to medium websites.Stefan Goessner Source link