Web Directions Year round learning for product, design and engineering professionals

I spend a lot of my time keeping up with what’s happening in front end development–so you have to spend less time doing so.
​
You’d think this might get easier, or the pace of innovation might have slowed now we’re well into the web’s 4th decade (sorry if that makes some of us feel old!) but whether it’s CSS, JavaScript, your favourite framework, not to mention practices like performance, security, and operations, there seems to be an ever increasing rate change.

So today a roundup of some recent articles you might find useful in keeping up. And of course we’ll be covering all this and more at Web Directions Code in Melbourne (and streaming!) in June.

 Pareto and performance–pluck that low hanging fruit

Unless you’re working on something absolutely brand new, we all know, whether we’ve been developing a codebase or we’ve inherited one, it will have accumulated all kinds of technical debt–including performance debt. Perhaps the metrics that now matter most weren’t even on the radar when this project started. So when you run a lighthouse test and score, gulp, 20, where do you start? What I’ve found, and as Artem Perchyk recently discusses is Pareto’s law really applies here–20% of your efforts will yield 80% of your results, and there are usually some easy wins to really improve performance without a lot of effort.

Now, what’s important is that performance optimizations are a real rabbit hole, and there’s almost always something else that can be optimized. The Pareto principle applies here perfectly: a set of things can be done relatively easily, but they can have a meaningful impact

Low-Hanging Web Performance Fruits: A Cheat Sheet

Lots of great suggestions there for relatively easy performance wins.

The Ultimate Guide to Image Optimisation

One of those suggestions is of course asset optimisation, and as we learned from Henri Helvetica at Web Directions Summit last year, that typically means JavaScript and images. So the excellent folks at Calibre, a great Australian company that helps you monitor your site performance have a guide to image optimisation covering concepts, practices and tools.

Image optimisation is often the first step in a person’s web performance and page speed journey. It’s a relatively easy fix with potentially high rewards. Optimising a single image isn’t complicated or time-consuming, and it could equate to site speed gains, better UX, and noticeably improved Core Web Vitals.

The Ultimate Guide to Image Optimisation

2023 Web Framework Performance Report

Love ’em, hate ’em, we increasingly rely on them. But Frameworks, as we covered a couple of weeks back, are coming under increasing scrutiny particularly in relation to performance. So, Fred Scott from Astro (which as it happens does well in the report) has a detailed report into how 6 popular JS frameworks fare when it comes to Core Web Vitals and Lighthouse.

The purpose of this report is to look at real-world data to better understand the relationship between framework choice, performance, and actual user experience on the web. We’ll attempt to shed light on a few key questions:

How do modern web frameworks compare in real-world usage & performance?
Does framework choice influence a site’s Core Web Vitals?
How related is framework choice to JavaScript payload size, and what is the impact?

2023 Web Framework Performance Report

Garbage in, Garbage out

Many, perhaps most developers these days, particularly those who have spent their lives developing for the web platform have not had to worry themselves with memory allocation and deallocation–all of which is done magically for us in ‘memory safe‘ programming languages. Their runtimes employ ‘garbage collectors’ that detect when memory (for example an object or variable value) can be safely deallocated. But, memory leaks are still possible, and difficult to track down.

And, in certain circumstances it can be useful to have an idea of what is really going on when an object is deallocated. In JavaScript developers have relatively recently become able to know when an object has been garbage collected. So, if you’re interested in learning a bit more, Alexey Lebedev explores this in Experiments with the JavaScript Garbage Collector

Recently I’ve learned that JavaScript provides a class called FinalizationRegistry that allows you to programmatically detect when an object is garbage-collected. It’s available in all major web browsers and Node.js.

Experiments with the JavaScript Garbage Collector

We actually covered this in some detail at GlobalScope, our online JavaScript focussed conference last year, so for more, check out Strength in weakness: JavaScript memory management and weak references

So, you want to safely authenticate with 2FA? App stores are still not the solution

In recent weeks, Twitter has turned off SMS based 2 factor authentication (2FA) for all but Twitter Blue subscribers (users can and absolutely should use another 2FA method like authenticator apps, though most will probably simply turn off 2FA and leave themselves exposed to a far, far higher chance of having their account hijacked–which some time back happened to me with an ancient twitter account we setup for one of our early events and which we hadn’t used in probably a decade.)

Meanwhile, high profile damaging breaches, that leak details that simply should not be being stored are a frequent occurrence (and for which, other than ensuring the use of unique passwords–people frequently reuse passwords–and using 2FA when it is available there’s little more we as users can do.

Meanwhile, we tend to, consciously, or otherwise, blame the user–for reusing passwords, for not using 2FA. But this is a deeply systemic problem. And chief among the issues is that passwords are just a truly terrible solution to authenticating people. This is something we’ve focussed a lot on at our conferences for some years now (we even had a dedicated front end security focussed conference in 2021). And something we’ll be addressing at Code.

But we simply don’t pay anywhere near enough attention to security online–our own, or our users.

Recently, Christian Heilmann wrote about his experience of looking for a 2FA App on the Google Play App Store,

This is exactly what App stores were advertised as to prevent. The web was a wild, untamed and terribly unsafe place full of software you can’t trust. App stores, instead, are curated and safe havens of only tested and tried, genuine software

So, you want to safely authenticate with 2FA? App stores are still not the solution

And we’ll cover this all much more at Code, Summit and elsewhere.

Need to keep up?

If you’re keen to keep yourself and your team up to date with the latest developments in performance and security, as well JavaScript, CSS, browser APIs and all things front end, Code is coming up in Melbourne in June, and we’ve got hundreds and hundreds of relevant high quality presentations at Conffab.