Frontend  Focus

#463 — October 21, 2020 | Read on the web

Introducing Microsoft Edge Preview Builds for Linux — With this release Microsoft’s Edge browser is now available for all major desktop and mobile platforms. This Linux version supports Ubuntu, Debian, Fedora and openSUSE distributions. Here’s what to expect, and how to install it.

Kyle Pflug (Microsoft)

min(), max(), and clamp(): Three Logical CSS Functions to Use Today — If you’re looking for something reasonably simple but powerful to add to your arsenal of CSS knowledge, start here. min, max, and clamp provide some powerful capabilities that enable more responsive styling with fewer lines of code.

Una Kravets

Measure What Matters to Users, Browsers Don't Have Feelings — Page load time isn't enough to guarantee you're providing a solid user experience; your users care about perceived performance. Learn to track interactivity metrics like `firstInteraction` so you can build for impact. Your users will thank you.

New Relic sponsor

Apple Bringing Face ID and Touch ID to the Web — Multi-factor authentication has taken off online in a big way, but can often require clumsy mechanisms like text messages or third party apps to work. So Apple is bringing its native Face ID and Touch ID mechanisms to the Web on top of the Web Authentication API.

Jiewen Tan (WebKit)

Video Processing with WebCodecsWebCodecs is an API that provides low-level access to media encoding and decoding, so you can work with components of a video stream or unmuxed chunks of encoded video or audio, say. Currently it’s in Chrome 86 only but a Mozilla developer is co-editor of the spec.

Eugene Zemtsov

The State of CSS Survey 2020 — CSS is an ever evolving beast, and this survey (now in its second year) aims to keep track of what the trends are. We’ll be sure to circle back and share the results as they will no doubt prove informative.

Raphaël Benitte & Sacha Greif

⚡️ Quick bits:

💻 Jobs

Sr Frontend Developer Needed in Beautiful Norway — Ready for your next frontend job? We're looking for a strong frontend developer with an eye for great UI to join our highly international team in the south of Norway.

Snowball Digital

Find a Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

🧑‍💻 Looking to share your job listing in Frontend Focus? There's more info here.

📙 Tutorials, Articles & Opinion

Preload Late-Discovered Hero Images Faster — Optimizing for Largest Contentful Paint? Addy explains how preload can be a game-changer for speeding up late-discovered hero images and resources, loaded via JavaScript.

Addy Osmani

I Want My Own Media Queries in Browsers — What if developers didn’t have to wait for browsers to support certain CSS features? Here, Kilian writes about how it would be neat to allow devs to emulate arbitrary media features for testing before the ‘real thing’ arrives.

Kilian Valkhof

Focus Management and the inert Attribute — Managing focus requires some skill and care, but is very much worth doing. The inert attribute can go a long way to making this easier to do.

Eric Bailey

The Most Useful Accessibility Testing Tools and Techniques — A list of tools the author regularly uses to make sure everything they do is accessible for folks with different abilities, “whether they are blind or holding a sandwich in their hand”.

Artem Sapegin

How To Use Face Motion To Interact With Typography — Explores using Machine Learning, variable fonts, and CSS grids to create layouts that respond to the proximity, inclination, etc, of a users face.

Edoardo Cavazza

How to Deploy a Vue.js Jamstack App on Netlify with Automatic Security Updates

Snyk sponsor

How to Create a Realistic Motion Blur with CSS Transitions

Neale Van Fleet

Take Screenshots using Built-in Commands in Chrome/Edge

Niels Swimberghe

Getting Started with Web Push Notifications

Doug Kumagai

Introducing: The Async Cookie Store API

Matan Borenkraout

🔧 Code, Tools and Resources

Layoutit Grid: An Interactive CSS Grid Generator — Can’t remember the various CSS properties to get a basic grid running? Never fear, just lay things out here and copy and paste the code (or even create a CodePen on the fly to experiment further).

Leniolabs

Detect GPU: Determine What Tier of Graphics Performance Users Have — Imagine user-agent detection but for the GPU. This returns information about the user’s graphics capabilities including a simple 0-3 score as to the level of rendering power available, which you could use to turn on/off extraneous visual effects. Demo here.

Tim van Scherpenzeel

15 Tools to Customize Your Terminal and Command Line — Start customizing your terminal or command prompt, and start developing more efficiently and beautifully.

Shopify Partners sponsor

The Good Line-Height — A handy browser-based calculator for getting the perfect line-height for your type scale.

Fran Pérez

SVG Favicon Maker — An online tool to quickly build a letter based SVG favicon which are supported by most browsers, though not Safari. The ‘emoji’ variant didn’t work for me in Chrome, however.

Formito

'This Page is a Truly Naked, Brutalist HTML Quine' — A quine is a program that, with no input, produces a copy of its own source code as its output, and it’s possible with HTML too. File this under ‘fun’.

Leon Bambrick

HitCount: A Simple Modern Website Hit Counter — In case you’re ever in a “Make Your Website Look Like 1999” contest. The code is just an image tag with some optional parameters to customize the counter’s look.

HitCount

ScreenshotAPI: A Chrome-Based Pixel-Perfect Website Screenshot API — 100 screenshots per month in the free plan, then paid plans after that. Images can be downloaded or hosted on Google Cloud.

TechLite