WDRL — Edition 224: Abortable Fetch, A Lazy Loading Guide, And Scooped Corners

Celý článek

Hey,

We often get new features, new JavaScript APIs and are excited about them but then put little attention to it or use it rarely. But only time and a lot of experiments show what these features are able to provide. Let’s take the Fetch API. It was built as a simple way to fetch content from another source via JavaScript. Now over time we learn how we can optimize this, use it asynchronously, and with the latest additions to the API can even cancel requests. And if you wonder what the use case for this would be, it’s something as simple as saving request resources on an autocomplete field or a multi-file upload field when the input changes and older values get invalid. This weeks edition contains a couple of techniques that show how we can make use of latest technologies to make our applications much more robust, whether it’s a autocompletion field, a robust lazy loading technique or adding a Content Security Policy to protect your users. Enjoy and improve your skills!

News

• iOS 11.3 is available to the public now and as already announced, this release brings support for Progressive Web Apps to iOS. Maximiliano Firtman now shares what this means, what works and what doesn’t work (yet).

Security

• Christoph Rumpel shares how he implemented a Content Security Policy and shares about CSP challenges with AJAX requests and Turbolinks, a dynamic pageload enhancer.

Web Performance

• Jeremy Wagner shares the best practices on how to build a lazy loading mechanism for images and videos. This resource is definitely not the quickest solution but instead shares how to build the best experience and performance based on the latest technologies available in browsers.

JavaScript

• The React.js documentation now has an extra section that explains how to easily and programmatically manage focus states to ensure your UI is accessible.
• James Milner shares how we can use abortable fetch to cancel requests in JavaScript by making the example of asynchronous requests on an autosuggest field to abort obsolete, outdated requests that haven’t finished yet. And while the first idea should still be adding the debounce-technique, this is a great addition to further lower the request impact of autosuggestion fields.

CSS

• Ana Tudor is known for her special CSS skills. Now she explores and describes how we can achieve scooped corners in CSS with some clever tricks.

Go beyond…

• Fred Pearce wrote about how we can make the world’s largest data centers more efficient. If you wonder why this would be a desired goal, it’s important to know that these data centers by now are responsible for 3% of the overall global CO2 emissions — as much as the airline industry.

—Anselm