Editor's Pick
Patterns.dev - Learn JavaScript design and performance patterns for building more powerful web applications
Patterns.dev is a free online resource on design, rendering, and performance patterns for building powerful web apps with vanilla JavaScript or modern frameworks.
Accessibility
What does aria-hidden=true actually do to interactive elements?
Just recently I had to fix a pattern in a design system that was causing a lot of errors reported in our automatic accessibility testing. Namely – using aria-hidden="true" on interactive elements (or their parents). I remembered from my trainings and from research that such a combination is bad for accessibility, as elements still get focused when “tabbing” to them, even when they are deliberately hidden from accessibility tree.
CSS
Hue-Rotate Animation Mesh Gradient Animated Fluid Background Effect
Applying a hue-rotate animation to a mesh gradient gives a cool "fluid animation" to some of the colours. Have a play in this codepen.
Flow Charts with CSS Anchor Positioning
CSS Anchor Positioning is a great way to position an element relative to another element. Learn how to use CSS Anchor Positioning to create flow charts and diagram with just CSS.
Grid by Example - Usage examples of CSS Grid Layout
The following examples include an image of how the example should look in a supporting browser, they each link to a page with more information about the technique being shown, code and a CodePen of the example. Unless otherwise noted these examples work in any browser supporting the up to date Grid Specification.
JavaScript
roosterjs: a framework-independent javascript rich text editor
Rooster is a framework-independent JavaScript rich-text editor neatly nested inside one HTML <div> element. Editing operations performed by end users are handled in simple ways to generate the final HTML.
Rooster is working on top of a middle layer data structure called "Content Model". All format API and editing operation are using this Content Model layer as content format, and finally convert to HTML and show it in editor.
By Microsoft.
New JavaScript Set methods
New JavaScript Set methods are landing across browsers. Learn about sets, how you can use these methods to compare different sets, create new sets with specific properties, and more.
Understanding React Compiler
React's core architecture calls the functions you give it (i.e. your components) over and over. This fact both contributed to its popularity by simplifying its mental model, and created a point of possible performance issues. In general, if your functions do expensive things, then your app will be slow.
Performance tuning, therefore, became a pain point for devs, as they had to manually tell React which functions should be re-run and when. The React team has now provided a tool called the React Compiler to automate that manual work performance tuning for devs, by rewriting their code.
What does React Compiler do to your code? How does it work under-the-hood? Should you use it? Let's dive in.
Please Stop Using Local Storage (to store sensitive user information)
I don’t know what it is, exactly, that drives so many developers to store session information in local storage, but whatever the reason: the practice needs to die out. Things are getting completely out of hand.
Almost every day I stumble across a new website storing sensitive user information in local storage and it bothers me to know that so many developers are opening themselves up to catastrophic security issues by doing so.
Let’s have a heart-to-heart and talk about local storage and why you should stop using it to store session data.
The JavaScript Set methods are now part of Baseline
You can now use the JavaScript Set methods to perform set operations like intersection, union and more.
Patterns.dev - Learn JavaScript design and performance patterns for building more powerful web applications
Patterns.dev is a free online resource on design, rendering, and performance patterns for building powerful web apps with vanilla JavaScript or modern frameworks.
Miscellaneous
Awesome Frontend Resources: A curated collection of awesome resources for frontend developers: tutorials, tools, libraries, design assets, and more
Awesome Frontend Resources is a curated collection of top tutorials, tools, libraries, and design assets for frontend development. Whether you're a beginner or a seasoned pro, this easy-to-navigate repository is designed to simplify your learning and development process.
A Rant about Front-end Development
I am a front-end developer who is FED up about front-end development. If you write front-end, this isn’t about you personally. It’s about how your choices make me angry. Also this is about how my choices have made me angry. Also this is mostly just about choices, the technologies are incidental.
Public CDNs Are Useless and Dangerous
Once upon a time, loading common scripts & styles from a public CDN like cdnjs or Google's Hosted Libraries was a 'best practice' - a great way to instantly speed up your page loads, optimize caching, and reduce costs.
Nowadays, it's become a recipe for security, privacy & stability problems, with near-zero benefit. Just last week (2021), a security researcher showed how this could go horribly wrong.
How To Hack Your Google Lighthouse Scores In 2024
Do perfect Lighthouse scores mean the performance of your website is perfect? As it turns out, Lighthouse is influenced by a number of things that can be manipulated and bent to make sites seem more performant than they really are, as Salma Alam-Naylor demonstrates in several experiments.
How to be a Better Software Engineer
Software is a team game, and it's one played by high-performing individuals. Respect them, respect yourself.
Engineering Cultures of Technical Debt - Some engineering cultures drive tech debt
I haven’t met a team without technical debt. And while there are some drivers behind technical debt (I wrote about it in “Reasons for Technical Debt”), there are engineering and product development cultures that breed technical debt.