The shortest month of the year, done and dusted. By popular opinion, it’s like this month did not exist. But we have news, because the Web never stops ⚡️.
Some updates on our favourite remote work environments.
Time for new age codecs
AVIF and JPEG XL are making a splash in browser space this year and they offer much much lesser image sizes than JPEG or PNG. According to HTTP Archive, images make up more than 20% of web traffic. So optimising is usually the very first step to optimising your webpage.
While we are all for smaller images, how do we achieve them?
- Squoosh.app - Google’s app provides Web UI for compressing images into all modern formats including AVIF and JPEG XL. With the newly launched CLI, this is a treat to use.
- Gatsby Image - Gatsby’s image plugin provides loading images in different sizes and auto generates them on the client. But because this includes different codes and some C++ it is sometimes a pain to install and maintain.
- Next Images - You can enable automatic format management and sizes on the server side with NextJS API for image management. It currently works with providers like Vercel, Cloudinary, Akamai and Imgix.
Releases
- Firefox 86 - Firefox 86 comes with Total Cookie Protection that confines a cookie created to it’s origin. No more cross origin tracking (in strict mode)
- NPM 7 - NPM now installs peer dependencies by default.
- Vite 2.0 - The coming of age for one of the fastest build tools for frontend development from Vue’s creator Evan You. Vite is now framework agnostic and work’s with different tools like React, Preact, Lit Element and server side rendering support.
Tutorials
- Debugging Service Workers - Service Workers are very hard to debug (and update of course!) The latest MS Edge makes it a bit easier.
- Tackling TypeScript - Axel Rauschmayer who is one of the pioneers and leaders of JavaScript related content now has a book on TypeScript and it’s great.
- JavaScript counters the hard way - HTTP 203
- Jake and Surma complicate things on this show HTTP 203. In this episode, they take counters and discuss how we can make accurate JavaScript counters.
- CSS Transitions - CSS transitions are simple to perform and difficult to reason. Josh makes the MDX a tool worth having on your blog.
- What the heck is z-index - Did I tell you how much I love Josh’s blogs! If you think you know z-index, think again.
- Before you memo - Dan Abramov lists tips to try before you use
memo and unlike very unlike Dan it’s very short (not that I’m complaining for his detailed case studies)
In the Spotlight 🔦
Chris Coyier (CSS Tricks, Codepen and more) did a thread on what’s happening in JavaScript in 2021 and some predictions to go with it.
In Other News
- Excel is now a programming language - The best software in the world is now also a programming language by introducing Lambda functions. Also, turing complete.
- UI and UX micro tips - UI and UX can be confusing, this article provides some easy microtips with clear examples of the right and wrong usage.
- Github 1s - Append
1s being github in the URL for a repository and open it up in a complete VS Code development environment. Perfect in case you are still waiting for codespaces.
- WebRTC becomes a W3C standard - WebRTC is now supported in all major browsers and officially a web standard.
Looking Forward
