June 24, 2020 #446 — June 24, 2020Read on the WebFrontend Focus Safari 14 Beta Release Notes — Revealed at this week’s WWDC, Safari 14 will ship alongside iOS 14 & macOS 11 later this year. Here are the headlines:Adds support for WebP images and HDR video playback;Support for HTTP/3;Ditches Flash;Will support both the :is() and :where() pseudo-selectors;…and adds Web Extensions support to the macOS version (more below).AppleWelcoming Safari to the WebExtensions Community — Yup, Safari is adopting a Web-based API for browser extensions similar to Firefox’s WebExtensions API making it easy to build once and port to multiple browsers (including Chrome). Here’s Apple’s intro video on how to get started.Mozilla Hacks New Course: React Native — Leverage your JavaScript and React skills for mobile iOS and Android platforms using React Native – ship your very own native mobile applications.Frontend Masters sponsorPrefetching? At This Age? — An excellent trip down the rabbit hole of caching, CDNs, what issues can occur when both clients and CDNs are caching content, and how the Age HTTP header helps. Plus a Chromium bug, just for good measure.Tim KadlecAn Overview of Scroll Technologies — There are a number of scroll related technologies out there (parallax, scroll snap, etc), so this article’s aim is to provide an overview of them and tools to help choose the one that’s right for you.Zach Saucier? New Features and Improvements for Safari and WebKit — More from Apple! Following the main WWDC 2020 Keynote, Apple are sharing a number of sessions throughout the week covering extensions, privacy, APIs, CSS and JS, web inspector changes and more. Worth bookmarking and coming back to at the weekend once all sessions are live.Apple?? Quick bits:If you use Google Analytics, be prepared to see the Safari stats tumble, as Safari is going to start blocking Google Analytics entirely.It has been five years since the first line of code for AMP was written.Chrome is working on an experimental implementation of upload streams so you can start uploading data to a server before you necessarily have all of it to hand. Work continues on Mozilla’s paid VPN, (a U.S. only beta is available now).Version 69 of Opera has Twitter (and other social media services) ‘built-in’, accessible via the sidebar.? 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 started.Vettery?? Interested in running a job listing in Frontend Focus? There’s more info here.? News, Tutorials & OpinionIs WebP Really Better Than JPEG? — According to Google, WebP is 25-34% smaller than JPEG at equivalent quality. But how much of it is really true? To find out, Johannes ran a few tests.Johannes SiipolaUsing Custom Property ‘Stacks’ to Tame the Cascade — A look at using CSS Custom Properties to manage/control both cascade and inheritance.Miriam SuzanneAfter Three Years of Work, Chrome Killed My Extension and Won’t Tell Me Why — This is a story worth checking out if your work ends up on the Chrome Webstore in any way (such as if you’re distributing a browser extension): “Complaining on the internet should not be a support channel. Developers should not have to rely on the internet attention lottery. The Chrome Webstore has been around 10 years and needs to get its act together.”LipSurfNew: Learn How Intercom Reduced Test Times by 85% ? — Read our case study on how Intercom reduced test times while deploying ~150 times per day across multiple apps.Buildkite sponsorLet Them Paste Passwords — Some sites prevent pasted passwords (which can even break some password managers). The UK’s cyber security officials stress that this a security anti-pattern. Today I also learnt that “Sociotechnical Security Researcher” is an actual job title – cool!National Cyber Security Centre (UK)The Return of the 90s Web — Max asks if we’re ready to revisit some of the ideas of the early web (no-code tools, personal sites, etc), adding that certain trends suggest that we might just have come full circle.Max BöckHow to File A Good Browser BugRobert Nyman, Pete LePage? Code, Tools and Resources knopf.css: A Modern, Modular, and Extensible Button System — A CSS library to easily build a diverse set of button styles that can be adapted to your brand via CSS variables. Includes a playground for fiddling with the variety of modifiers.team.videokeen-slider: An Agnostic Touch Slider — Think ‘carousels’ but comfortable and smooth when using touch. They work with the mouse and touchpads as well, of course, and there are no dependencies. Live examples here.Eric BeyerTailwind CSS Cheat Sheet — This clear, scannable resource has been around for a while, however it remains up-to-date with the latest version of Tailwind (plus we’ve not shared it here before).Jay Elaraj Octopus.do: A Visual Sitemap Builder — An online tool that allows you to build a website’s sitemap (e.g. for prototyping structure) or you can import an existing sitemap.xml from a URL and work with that.octopus.do? Tzdb: A Simplified and Grouped List of Time Zones and Offsets — The official IANA time zone list has over 500 entries but you can simplify this substantially, as done here.Vincent VoyerNo More Rework, Bug-Free Code on the First Commit. DeepCodeDeepCode.AI Powered Analysis sponsorCreate HTML5 Boilerplate: Quick Start for HTML5 Boilerplate — Similar in concept to create-react-app, but for kickstarting projects based on the popular HTML5 Boilerplate project.H5BPweb-vitals-reporter: A Tiny Utility to Simplify Web Vitals Reporting — Makes it easy to collect data from Google’s new Web Vitals API.Treo A Photocopied Magazine Effect in CSSLynn Fisher codepen Source link