Editor's Pick
Plain Vanilla — an explainer for doing web development using only vanilla techniques. No tools, no frameworks — just HTML, CSS, and JavaScript
Modern web development frameworks are powerful in their ability to develop rich well-structured web applications quickly, and for this reason alone they are well worth your time to learn. However, this rich functionality comes at the cost of framework and tooling complexity, and the resulting projects often require regular maintenance to keep secure and up to date.
The plain vanilla style of web development makes a different choice, trading off a few short term comforts for long term benefits like simplicity and being effectively zero-maintenance. This approach is made possible by today's browser landscape, which offers excellent web standards support.
Accessibility
Beware of Vibe Accessibility
With vibe coding it’s obvious that the number of packages used and the number of new packages will only rise. Which is a good thing for the web at first glance.
But…
We need to make sure things are accessible. And this is my concern. With current situation of inaccessible webpages and mobile apps, with inaccessible components and frameworks and using the GenAI to generate quicker we risk to increase the inaccessibility.
ARIA and Web Accessibility: Going Beyond HTML
HTML is an astonishingly expressive language, allowing me to mark my content correctly. I mean, it is a markup language after all. There are at least 112 HTML elements out there, each with its own unique meaning.
But even with having so many options, there are still some complicated things that can’t be expressed with HTML alone. There are no HTML elements for menubars, context menus, dropdowns, toggle buttons…That’s why there are situations where we need to go beyond HTML and ARIA could help us with that.
CSS
Use CSS reading-flow for logical sequential focus navigation
The CSS reading-flow and reading-order properties are available from Chrome 137. This post explains the reasons behind the design of these properties and some brief details to get you started with them.
Layout methods such as grid and flex have transformed frontend development, however their flexibility can cause a problem for some users. It's very easy to create a situation where the visual order mismatches the source order in the DOM tree. As this source order is what the browser follows if you navigate the site using a keyboard, some users can encounter unexpected jumping around as they navigate around a page.
The reading-flow and reading-order properties have been designed and added to the CSS Display specification, to try and solve this long standing problem.
Guitar Chords in CSS
In my previous article, I looked into the new, improved attr() method in CSS. This time, I’ll continue looking into the attr() method, showing how we can make easily readable components — at least for guitarists.
The Height Enigma
One of the most perplexing and befuddling things in CSS for me, for many years, was the behaviour of percentage-based heights. Sometimes, seemingly at random, setting “height: 100%” would have no effect at all. When I finally figured out what was going on, it was like a puzzle piece snapping into place; everything made so much more sense! In this post, I’ll share the epiphany I had, and we’ll explore some solutions.
Anchor Positioning Just Don't Care About Source Order
The fact that anchor positioning eschews HTML source order is so CSS-y because it's another separation of concerns between content and presentation.
How to have the browser pick a contrasting color in CSS
Have you ever wished you could write simple CSS to declare a color, and then have the browser figure out whether black or white should be paired with that color? Well, now you can, with contrast-color(). Here’s how it works.
Creating Flower Shapes using clip-path: shape()
Create flower-like shapes using the new shape() function.
JavaScript
How To Detect Memory Leaks In Your Web App (2025)
In this lesson, I will explain how to debug memory leaks in web applications. We will be debugging an Angular application, but these techniques work for any framework. In this video, you will learn the concept of memory leaks in JavaScript and which debugging techniques you can apply to find them.
We will dive in-depth into Chrome DevTools and learn how to use tabs like "Performance" and "Memory", and how they can help us to come to the exact point in the code that causes a memory leak.
Making a new form control
There are some things that a web developer knows they shouldn't attempt. Making clever use of contenteditable. Building custom form controls. Making complicated custom elements without a framework. But do we really know what we think we know? Why not try to do all three, just for fun? Could it really be that bad?
Narrator: it would indeed be that bad.
JavaScript, when is this?
JavaScript’s “this” keyword trips up all developers — junior and senior. In the first of two parts, Mat Marquis goes deep on the groundwork you need to better understand “this” and how it works.
JavaScript, what is this?
In the second part of his series, Mat Marquis explains what “this” actually is and helps you to understand what it equates to, based on various contexts.
How to integrate your Phaser 3 game with any JavaScript Framework
Just because you can integrate Phaser 3 directly into your JavaScript framework doesn’t mean you should. Frameworks like Vue and React are primarily designed for rendering user interfaces, managing application state and handling routing — not for running games. While it’s possible to build games using them, they don’t provide the specialized tools that a proper game engine like Phaser 3 does. Phaser excels at things like physics, animations, and game logic, making it far better suited for game development.
What the f*ck JavaScript? A list of funny and tricky JavaScript examples
The primary goal of this list is to collect some crazy examples and explain how they work, if possible. Just because it's fun to learn something that we didn't know before.
Miscellaneous
Plain Vanilla — an explainer for doing web development using only vanilla techniques. No tools, no frameworks — just HTML, CSS, and JavaScript
Modern web development frameworks are powerful in their ability to develop rich well-structured web applications quickly, and for this reason alone they are well worth your time to learn. However, this rich functionality comes at the cost of framework and tooling complexity, and the resulting projects often require regular maintenance to keep secure and up to date.
The plain vanilla style of web development makes a different choice, trading off a few short term comforts for long term benefits like simplicity and being effectively zero-maintenance. This approach is made possible by today's browser landscape, which offers excellent web standards support.
Falsehoods software teams believe about user feedback
The feedback we get from users is not what it seems. As software creators we apply a lens that makes us take user feedback in many different - often unhelpful - ways from how it was intended. Here’s a list of user feedback myths to help jog assumptions.