fullctx-highimpact-frontend-daily #1
Front of the Frontend Focus
Hey Full Context Developers,
Welcome to the first daily issue of the High Impact Frontend Newsletter. I will try a new approach to keep the momentum going. (Which was down recently.) The plain is to publish smaller pieces of content on a near-daily basis and send out a properly ranked compilation as the weekly newsletter.
About the system: If you need introduction to my scoring or impact analysis systems, check out any of the recent weekly releases (for example this), and the generic introduction post. I added the web complexity scale to the very end for reference.
Special note: I will only publish these daily posts on the Substack website starting with the next one. This goes out as an email too, but only this time to let you all know what’s happening. Hope you will like this format and follow along on the site!
Crafting the Next.js Website
🏆 News of the Day 🏆
📊 16 Points: Hype 4 x Value 4
I honestly felt bad for covering so little front-of-the-frontend stuff recently. You know the kind of news that’s not about frameworks, meta-frameworks, SPAs or MPAs but pure HTML, CSS and JS/TS. There are lots of interesting things going on in that part of our field with the potential of high impact and today I will finally talk about a lot of those.
The first and most impactful of such news comes from Rauno Freiberg. A detailed article about his experience building the new Next.js website. 🤩
I don’t know about you but for me Vercel together with Next.js are one of the most interesting spaces in the current frontend landscape. They are relentlessly pushing the boundaries of frontend technology forward. They gather some of the most innovative and influential technologists of our field under the same company. They engage with the largest players of the Web like Google, Meta and Microsoft. So I keep a close eye on what they are up to and usually whatever comes out of their secret, underground lab is world class in quality, definitely worthy of attention. (I guess you could call me a fan)
With all that in mind, when I saw this article I got really excited and it didn’t let me down. Rauno offers us a look into the fine details of crafting a technically excellent frontend experience, it just blew my mind. You can learn about:
Dynamic & responsive grid lines around elements
Blinking switchboard effect that’s consistent across browsers and avoids unnecessary re-paints
Consistent focus states
A nifty trick to create beautiful quotation marks
Explicit accessibility labeling
How to use
dataattributes for stylingGradient tracing
Smooth border fade-out
It’s the kind of front-of-the-frontend stuff I was talking about and between you and me, this is the level of expertise that makes me secretly jealous. Hopefully in another 10 years I will have mastered some part of the profession to this level.
What can we take away from the article?
➡️ For Vercel the impact of such a well crafted website is of course tremendous. Customer Experience is impacted through the user experience improvements, which is a huge driving factor of increased engagement. In this case that can translate to increased framework adoption, which increases revenue for Vercel in the end. Cross browser compatibility and accessibility are some of the key factors of creating new Business Opportunities as frontend engineers. This is very important to keep in mind and push for to deliver business value! They increase the addressable market by allowing a wider audience to engage with the website and become part of the user base.
➡️ For us this is a source of technical insights that can help to get similar tasks done more efficiently, increasing our Productivity and that always has the potential to help us with career advancement.
Who should care?
➡️ The most likely projects where these benefits can fully manifest are in the Level 1 and Level 2 web complexity categories. More specifically the user facing, conversion oriented websites, landing pages or engagement based platforms like web-shops, news sites or any other kind of content focused businesses. Some techniques like the consistent focus states and accessibility labeling are applicable more generally.
Best case impact:
Customer Experience - System | Productivity - Group | Business Opportunity - Organization
Web Workers For Practical Multithreading
📊 12 Points: Hype 3 x Value 4
Next front-of-the-frontend news focuses on JavaScript with a surprisingly practical take on Web Workers. I’ve used them a couple of times in production, in particular with Comlink to offload expensive Redux state management stuff, and looked into Partytown to speed up 3rd party code loading, but the kind of generic applications this article covers never appeared on my radar. The main topics include:
Offloading CPU intensive work
Handling network requests
Parallel computation instead of sequential main-thread processing
You get code examples for each of these cases, a thorough exploration of the limitations and considerations of using web workers and strategies for mitigating those issues.
I will be looking for situations where these techniques can bring benefits to the projects I’m working on. It’s awesome to learn while writing the newsletter.
Question: Have you ever used web workers to achieve similar goals? If yes, I would love to hear your story in the comments down below. (I’m doing my best to create some engagement! Please talk to me 😭. Damn, I suck at this…)
What can we take away from the article?
➡️ By offloading appropriate work to web workers, we can make our applications more responsive. The RAIL model immediately comes to mind, these techniques can help to meet those budgets resulting in better Customer Experience. Depending on the situation it can mean life and death for a project. Where I used the off thread redux worker approach, if we couldn’t pull that off, the app would have been dysfunctional freezing for roughly 1 second in every 2 seconds. Even in less dramatic situations the gains can be massive by improving site loading speed and other metrics.
Who should care?
➡️ The Level 2 & 3 web complexity projects. Here again the performance sensitive, user facing, conversion oriented websites, landing pages or engagement based platforms like web-shops, news sites or any other kind of content focused businesses are best suited to reap benefits.
Best case impact:
Customer Experience - System
Maneuvering JavaScript’s Event Loop
📊 12 Points: Hype 3 x Value 4
Last front-of-the-frontend news is about JavaScript again from Alex MacArthur. You can learn the ins and outs of function execution order in the JS engines and the tools we have to manually place our code to certain points of it. It’s a topic that I rarely see covered. The main techniques it discusses are:
The good old setTimeout
MessageChannel
queueMicrotask - With practical examples I never saw before !!!
requestAnimationFrame
requestIdleCallback
Everything has code examples here as well and nice diagrams too. I took away some new insights from here. What I missed from the article is a mention of how Observer callbacks behave. I know for a fact that the IntersectionObserver and the MutationObserver classes put stuff on the microtask queue.
Question: I’m really curious here as well, do you have experience with using the more esoteric methods in practical situations? Let us know!
What can we take away from the article?
➡️ This is a tricky topic. Real life situations where these tools come up are usually sources of confusion and are a pain to maintain. But that’s exactly why we all need to understand their details, in my experience these are unavoidable on the long run. As most of these technical articles this one comes down to increasing our Productivity and improving Customer Experience with all the benefits these provide.
Who should care?
➡️ The Level 2 & 3 web complexity projects. Here again the performance sensitive, user facing, conversion oriented websites, landing pages or engagement based platforms like web-shops, news sites or any other kind of content focused businesses are best suited to reap benefits.
Best case impact:
Productivity - Group | Customer Experience - Group
Wrapping Up
If you enjoyed this High Impact Frontend daily post and/or found it valuable please consider sharing it with your friends and colleagues. It’s a huge help to keep this newsletter running! (Not financially, but through the motivation it gives me. 😎)
See you in the next one!
Joe @fullctxdev
The Web Complexity Scale:
