Sep 25, 2020

Friday Front-End - Issue #261: AVIF images, web share API, dual-screen media queries, and more!

By Scott Vandehey • Issue #261 • View online

Links

AVIF is a new image format derived from the keyframes of AV1 video. It’s a royalty-free format, and it’s already supported in Chrome 85 on desktop. Android support will be added soon, Firefox is working on an implementation, and although it took Safari 10 years to add WebP support, I don’t think we’ll see the same delay here, as Apple are a member of the group that created AV1.

jakearchibald.com • Share

A polyfill for button type=”share”

This polyfill takes an Inception approach to feature detection. There are three nested levels:

1) This browser supports button type=“share”. Great! Don’t do anything. Otherwise proceed to level two.

2) This browser supports the JavaScript Web Share API. Use that API to share the current page URL and title. Otherwise proceed to level three.

3) Use a mailto: link to prefill an email with the page title as the subject and the URL in the body. Ya basic!

The idea is that, as long as you include the 20 lines of polyfill code, you could start using button type=“share” in your pages today.

adactio.com • Share

Understanding the Event Loop, Callbacks, Promises, and Async/Await in JavaScript

As a JavaScript developer, you need to know how to work with asynchronous Web APIs and handle the response or error of those operations. In this article, you will learn about the event loop, the original way of dealing with asynchronous behavior through callbacks, the updated ECMAScript 2015 addition of promises, and the modern practice of using async/await.

www.taniarascia.com • Share

Introducing Web APIs for Dual Screen and Foldable Devices

Today, we are pleased to announce the availability of two new experimental features that will help web developers effectively lay out content in a browser window that spans multiple display regions and create responsive websites that are a natural fit for this new class of device:

CSS screen-spanning media feature and a set of environment variables to describe the geometry of the fold.

JavaScript window segments enumeration API, a companion API to the CSS primitives, useful when working with non-DOM targets like Canvas2d and WebGL.

blogs.windows.com • Share

Moment.js is Done

We recognize that many existing projects may continue to use Moment, but we would like to discourage Moment from being used in new projects going forward. Instead, we would like to recommend alternatives that are excellent choices for use in modern applications today. We would also like to promote the Temporal addition to the JavaScript language, which is looking for feedback and contributors.

We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done.

momentjs.com • Share

Videos

You Really Don't Need All That JavaScript, I Promise, by Stuart Langridge

JavaScript is your behavior layer; the way to add interactivity to your sites, to provide a slick and delightful user experience, to make everything fast and easy and clean. But at some point everything changed: the tail started to wag the dog instead and development became Javascript-first. We’ll talk about how you maybe shouldn’t rely on JS as much as you’re told to, and some practical strategies for how to build sites without reaching for a JS framework as first, last, and only tool for making the web happen.

www.youtube.com • Share

Sponsor

Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.

Did you enjoy this issue?

By Scott Vandehey

Front-end development links tweeted daily, emailed weekly.

Tweet

Share

If you don't want these updates anymore, please unsubscribe here.

If you were forwarded this newsletter and you like it, you can subscribe here.