Editor's Pick
Leetcode Wizard - The #1 Coding Interview AI Assistance App
The invisible desktop app powered by AI, instantly providing answers to Leetcode problems for effortless coding interviews, like having ChatGPT in your ear.
I can't personally vouch for this in any way, but it certainly looks interesting in this day and age of interviewing. I would love to hear from anyone, especially those working on the front-end, who have used this. Reach out on X @hexawow
Accessibility
Gov.uk Forms open source on GitHub
GOV.UK Forms is an easy to use form building platform with accessibility, security and hosting built-in. We do lots of the hard work for teams such as complying with government standards, including on accessibility and cyber security, so they can focus on building forms and using expert knowledge to run public services.
See also GOV.UK Forms in motion
The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?
“Should I use pixels or rems?”. In this comprehensive blog post, we'll answer this question once and for all. You'll learn about the accessibility implications, and how to determine the best unit to use in any scenario.
CSS
Tooltip Best Practices
What are tooltips, exactly? There's two kinds and the one you use has implications on the user experience, as Zell illustrates in this explainer on best practices.
Has some good accessibility tips.
How to Create Filling CSS Loaders Using One Element
In a previous article, I showed you how to create two types of CSS loaders: a spinner and a progress bar. In this article, you’ll learn about another variation called a filling CSS loader. I think a demo is worth thousands of words, so check out this Codepen.
Simplifying CSS animations with the display and size properties
New CSS features simplify animating elements by allowing transitions for display and size properties, reducing the need for complex JavaScript workarounds.
Conditional class names using DOM attributes as state
Store the component's "state" in data attributes and conditionally apply styles based on the element—not the data in the template.
CSS sprite sheet animations
On the web sprite sheets are used mainly to reduce the amount of HTTP requests by bundling multiple images together into a single image file. Displaying a sub-image involves clipping the sheet in the appropriate coordinates.
The bandwidth benefit has been largely mitigated by HTTP/2 now, but sprite sheets have another purpose: animations! Displaying animations is one of the primary uses of sprite sheets, besides loading performance.
It’s neat for small raster-based animations such as loading spinners, characters, icons, and micro-interactions.
A Friendly Introduction to Container Queries
It’s been a couple of years since container queries started landing in browsers… so why isn’t anyone using them? It turns out that container queries are kinda tricky; they’re not as straightforward as media queries. In this tutorial, we’ll break it all down and make sense of them, so that you can start using them in your work.
How unit division works in CSS, and how to use it today
Unit division in CSS has been at the top of my CSS wishlist for years. It allows you to take one value and manipulate it to do something else entirely. This is huge. CSS units may be typed as a <length>, <color>, <number>, or <angle>. Unit division allows us to compare and manipulate any type of unit with any other type of unit for the first time.
But how exactly are we using this feature if it’s only just now released in Safari Technology Preview?
New CSS that can actually be used in 2024
The amount of CSS novelty in the last two to four years has been staggering. Multiple innovations have been released and are now supported in all modern browsers, and some of them fundamentally change how to make websites.
This page is a cheat sheet for new CSS things I want to start using in 2024. Note that, to support older browsers, it's sometimes a necessity to use polyfills.
Build Colors from Colors with CSS Relative Color Syntax
The feature here is that you can take a color you already have and manipulate its components. Which things you can change vary by the color space you choose, so for an RGB color you can change the red, green, blue, and alpha channels, for an HSL color you can change hue, saturation, lightness, and alpha, and for my beloved OKLCH you can change lightness, chroma, hue, and yes, opacity.
Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not
Because Scroll-Driven Animations are only active when there is scrollable overflow, it is possible to use them as a mechanism to detect if an element can scroll or not. Mix in a Space Toggle or a Style Query, and you’ve got all you need to selectively style an element based on it being scrollable or not.
HTML
The <details> and <summary> elements are getting an upgrade
It's going to be easier to style the '<details>' and '<summary>' elements.
HTML link, or button, that is the question
Did you know that HTML links and buttons are not interchangeable? Learn more about their proper use cases in this article.
JavaScript
Wolfensvelte 3D - Wolfenstein 3D, reimagined in Svelte - rendered with the DOM
Yes, it's a Svelte "port" of Wolfenstein 3D. No, there's no WebGL, or canvas.
Kinesis - easily create complex interactive animations
Kinesis.js is a versatile library for adding dynamic, interactive, and physics-based animations to your web components. It includes features like transforming elements based on mouse movement, scroll events, and even audio frequency data.
Optimising HTML5 Canvas Rendering: Best Practices and Techniques
Like most charting libraries, we faced a choice between SVG and Canvas. We chose Canvas because rendering hundreds of thousands of SVG elements would degrade performance, whereas the Canvas allows for more efficient drawing of shapes and lines. Despite this, Canvas isn't a silver bullet and still comes with its own performance challenges. This blog explores some of the techniques we applied when building AG Charts to get the best performance possible out of the Canvas.
Three.js Resources
Your go to hub for all things 3D with three.js. From tools to textures, lighting & more, find everything you need for your Three.js projects in one place.
Generating Random Mazes with JavaScript
I didn't get a chance to hit the pumpkin patch this year, so I missed out on seeing any corn mazes. To make up for it, I decided to make some mazes of my own. Being a programmer, I over-engineered it and built a random maze generator.
Building an SVG Dissolve Animation Effect in React
Learn how to create an eye-catching button dissolve animation using SVG filters, React hooks, and JavaScript. A step-by-step guide to implementing advanced SVG filter effects for modern web interfaces.
Generating Lever-Door Puzzles (with JavaScript)
A lever-door puzzle is a challenge where players navigate through a series of rooms by using levers connected to various doors. When a lever is activated, it toggles the state of one or more doors. The objective of the puzzle is to progress from the starting room to a final room that holds some sort of reward.
How to Use Enums in JavaScript - A Complete Guide
Learn how to implement and use enums in JavaScript effectively. This complete guide covers simulating enums using objects, numeric and bidirectional enums, using Symbol for unique values, and how TypeScript handles enums.
Hacking cars in JavaScript (Running replay attacks in the browser with the HackRF)
My ultimate goal was to answer the question... is it possible to hack a car using JavaScript? I didn't know at all if I was going to get there because my knowledge of all things SDR (Software-Defined Radios) related is still minimal, but I'm very excited to share that it works. This blog post explains the process I went through to figure things out.
Even though this post is about cars specifically, this can be used to hack garage doors, remote lights, doorbells, some drones, theoretically anything that is remotely controlled by an RF receiver/transmitter.
20 TypeScript Tips for Cleaner, More Efficient Code in 2024
TypeScript enhances JavaScript with type safety and powerful features, but many developers use only its basics. Here’s a guide to 20 advanced TypeScript tricks that can boost your productivity, code maintainability, and will help improve code efficiency and readability. Each trick is demonstrated with practical code examples.
Animating videos using JavaScript, CSS transitions and sprite sheets
Both ChatGPT and Claude kindly assured me it could be done, and one good way to do it would utilize sprite sheets. Turns out, you can also use sprite sheets to display frames of a video clip.
Sprite sheets give you precise control over frame-by-frame playback, such as quickly changing direction or speed, without the need for computationally-expensive video decoding. With a sprite sheet, your 'video decoder' can simply be JavaScript and CSS animations (which, can be GPU-accelerated on most modern devices).
Mastering DOM Manipulation in Vanilla JavaScript: Why It Still Matters
Learn the essentials of DOM manipulation in vanilla JavaScript. Explore common methods, practical scenarios, and why knowing the fundamentals still matters in a world of frameworks.
UX
AI in UX Research Report 2024
How are researchers using AI in 2024? An analysis of the most used tools, use cases, and concerns for artificial intelligence in UX research.
Miscellaneous
Leetcode Wizard - The #1 Coding Interview AI Assistance App
The invisible desktop app powered by AI, instantly providing answers to Leetcode problems for effortless coding interviews, like having ChatGPT in your ear.
Code Reviews, Not Code Approvals
The real issue here is that code reviews aren’t reviews at all—they’re approvals. “Review” implies that something is complete and you’re looking it over after the fact. But what we call a “code review” today is more of a gate-keeping process, where the code is almost done, and someone has to give it a green light. It’s not simply getting a second opinion; it’s waiting for permission, holding up the flow while work sits on the sideline. If it were a true review, you’d be able to push your code live and get feedback afterward. Instead, you’re stuck, watching as progress slows.
37 Tips from a Senior Frontend Developer
I really liked @abbeyperini post and decided to share my tips after 5+ years as a software dev.
Some really solid tips for only being in the game 5 years.