Editor's Pick
10 Hidden Gems in Angular That You Should Use
Everyone talks about the big new features in every Angular version, like Standalone Components, Signals, or Control Flow Syntax. But did you know that Angular also has many hidden gems? These features are not very popular, but they can make your code cleaner, faster, and easier to maintain.
In this article, I’ll list 10 useful but not well-known Angular features that you should start using in your projects. I will also mention which Angular version introduced them, so you know if you can use them in your project.
Accessibility
Don’t Sleep on the European Accessibility Act
The upcoming European Accessibility Act (EAA) is about to create disruption for digital products. Everyone will have to comply, and most companies are not ready for it.
By 28 June 2025, every company operating in the EU[1] must be accessibility-compliant. This date is only a few months away, and if you’re not already working on this, you might fall behind.
[1] Companies with fewer than 10 employees and an annual turnover or balance sheet total under €2 million, are exempt from these requirements.
Understanding the European Accessibility Act (EAA)
The European Accessibility Act (EAA) requires that products and services made available to citizens of the European Union (EU) are accessible. Like most EU Directives, the EAA (DIRECTIVE (EU) 20191882) is hard to understand, and this has left many people unsure about what it means - and more importantly, what they need to do to make sure their products and services comply. With this in mind, we'd like to share our understanding of the EAA as it applies to digital products and services.
CSS
A Deep Dive into the Inline Background Overlap Problem
How to get a semitransparent background following some inline text with padding, but without the overlap problem.
The customizable select - Part one: history, trickery, and styling the select with CSS
Exploring customizable select elements. This series explores styling possibilities. The first article covers the history and provides a guide to building a custom select as a progressive enhancement. Styling selects with CSS for unique and fun experiences.
Faster Rendering with the content-visibility CSS Property
Have you ever loaded a page with tons of content and noticed how slow it feels? The browser has to process everything at once - even the content you can't see yet! That's where the content-visibility property comes in. It's a CSS feature that tells browsers to skip rendering off-screen content until it's needed.
Let the stagger experiments begin
Elements can now know which position they are in the DOM tree (index) and how many other elements there are in total (count) via sibling-index() and sibling-count().
This greatly simplifies staggered animations. Now available in Chrome Canary.
Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries
A little while back, Chris shared this nice hexagonal grid. And true to its name, it’s using —wait for it — CSS Grid to form that layout. It’s a neat trick! Combining grid columns, grid gaps, and creative clipping churns out the final result.
A similar thing could be accomplished with flexbox, too. But I’m here to resurrect our old friend float to create the same sort of complex and responsive layout — but with less complexity and without a single media query.
Chilled Out Text Underlines
I sometimes struggle with what the perfect look for a link within body text should look like. It needs to be clearly a link, but also not styled so intensely it distracts from reading a paragraph.
A fluid CSS methodology
Fluid CSS methodologies have completely transformed my approach to web integration by improving the responsive aspect and simplifying maintenance. I find this topic deceptively simple yet incredibly powerful and still relevant today.
Split and assemble an image using CSS mask
Split an image into pieces using the mask property, then show it fully on hover. A single-element implementation using less than 10 CSS declarations.
The Cicada Principle and Why It Matters to Web Designers
How can the lifecycle of the humble cicada help you to make better seamless tile backgrounds? It will all make sense soon.
Styling Counters in CSS
Going from the most basic ways to style lists directly in HTML to advanced customization techniques that are even capable of making things that aren't lists look like lists.
The bare minimum you need to enable View Transitions on your website
View transitions are a great way to make your website feel more dynamic and engaging when users navigate between pages. The View Transition API, in particular, lets you create animated transitions between different website views.
This includes animating between DOM states in a single-page app (SPA) and animating the navigation between documents in a multi-page app (MPA).
While the API is quite extensive, allowing you to create complex transitions, control the initial state of the view, handle the transition among selected elements, and so on, you can achieve a basic view transition with just a few lines of CSS and HTML meta tag. These changes are progressive enhancements, meaning they won’t break the user experience in browsers that don’t support the feature.
CSS view-timeline shine effect
Demo showcases a CSS view-timeline shine effect using animation-timeline: view(), animating elements based on scroll position.
Limited browser support on animation-timeline at this point.
Zig-Zag edges using CSS mask
One line of code to add Zig-Zag edges to any element using the mask property.
CSS Animation with offset-path
This is from last year when I tried to recreate Rach Smith's P5.js animation using CSS. The animation seemed like it could be implemented in a breeze, but there's an illusion of simplicity. The process of manually updating the positions and directions of each box was a bit tricky.
After some effort, I realized that I only needed to track the positions of a single box in keyframes, the rest would follow and be evenly separated through different values of animation-delay. Negative delays were used to start the animation immediately.
A few days later, I found a simpler method and got it working with the offset-path property. The inset() function would create a square path and then the boxes would move along with it by animating the offset-distance values.
I was excited because I had previously thought that offset-path only supported SVG paths.
Quick Reminder That :is() and :where() Are Basically the Same With One Key Difference
There’s one catch with the :is() selector - the specificity. The :is() selector’s specificity matches the most specific selector in the function’s arguments. That’s not a big deal when working with a relatively flat style structure containing mostly element and class selectors, but if you toss an ID in there, then that’s the specificity you’re stuck with.
The :where() selector is the exact same thing as :is() but without the specificity baggage. It always carries a specificity score of zero. You might even think of it as a sort of specificity reset.
HTML
HTML Starter Template
For all of us who can't remember any of the tags we should/shouldn't include in the HTML head or which ones are now deprecated because they used to be a hack for IE6.
Direct link to a commented version here, explaining how and why you should use each tag.
JavaScript
There are a lot of ways to break up long tasks in JavaScript
It's very common to intentionally break up long, expensive tasks over multiple ticks of the event loop. But there are sure are a lot of approaches to choose from. Let's explore them.
10 Hidden Gems in Angular That You Should Use
Everyone talks about the big new features in every Angular version, like Standalone Components, Signals, or Control Flow Syntax. But did you know that Angular also has many hidden gems? These features are not very popular, but they can make your code cleaner, faster, and easier to maintain.
In this article, I’ll list 10 useful but not well-known Angular features that you should start using in your projects. I will also mention which Angular version introduced them, so you know if you can use them in your project.
Underrated Angular Features
Angular is a very, very powerful framework, which means it has lots of features. Of course, everyone knows the essentials, like components, services, routing, etc. But obviously, almost every Angular developer has some features they've never tried, or even heard of. In today's article, we are going to cover some of the features that are relatively obscure, but can supercharge our applications.
Lazy Load Background Images with the IntersectionObserver API
While we can defer offscreen images using the loading HTML attribute, lazy loading background images takes a bit more work. Since they are added by CSS rather than HTML, we need to use JavaScript to detect when offscreen background images are about to enter the user's viewport.
The IntersectionObserver API provides a modern and performance-friendly way to lazy load background images by using the compositor thread to asynchronously observe the location of offscreen elements, instead of blocking the main thread. By deferring offscreen background images, you can reduce page weight, speed up page load times, and improve Core Web Vitals.
Beyond React.memo: Smarter Ways to Optimize Performance
When it comes to React performance optimization, React.memo is often the first tool developers reach for. It’s the hammer we grab when we notice re-render issues, and suddenly everything looks like a nail. But what if I told you that in many cases, there are simpler, more elegant solutions that align better with React’s compositional nature?
Today, I want to explore some fundamental concepts about how React renders components and share composition patterns that can dramatically improve performance without the complexity and gotchas of memoization.
Intl.DurationFormat: Format Time Durations with Locale Support
Stop writing manual duration formatting code. Instead, leverage the new powerful Intl.DateTimeFormat API for internationalized time displays.
Konva - JavaScript Canvas 2d Library
Konva is 2d Canvas JavaScript framework for drawings shapes, animations, node nesting, layering, filtering, event handling, drag and drop and much more.
UX
Explaining UX Design Through the Lens of Construction
Explaining my work as a UX designer to my dad inspired this comparison, and I often find myself explaining my work to others in similarly relatable terms.
Miscellaneous
The Art of Tech Interviewing
Ultimately, mastering the art of tech interviewing isn’t about achieving immediate perfection. It’s about confidently communicating your thought process, handling uncertainty gracefully, demonstrating authentic enthusiasm, and continuously refining your approach. These are traits I’ve observed in the interviews I’ve overseen at Google and hope the advice resonates even more broadly.
Underrated Soft Skills: Charisma
Engineers focus too much on technical skills, often overlooking other essential skills, such as soft skills—or human skills, as I prefer to call them.
An engineer is more than a technical skill set. First and foremost, an engineer is a human being immersed in a human environment. If they fail to understand how to navigate human complexity and intricacies, they will not understand how a team or an organization works, eventually reducing their ability to build meaningful things and create an impact wherever they go.
If, up until this point in your career, you have focused on developing your technical skills rather than your soft skills, don’t despair. You are always one decision away from significantly changing your approach. You can radically change your career by focusing on developing your human skills, i.e., by focusing on human development.
VisuAlgo - visualizing data structures and algorithms through animation
Contains animations of 26 algorithms—from basic ones like sorting, to rarer ones like graph traversal.
As the animation plays, an explanation of what’s happening is displayed at the bottom-right hand corner, along with pseudocode, which consists of short English phrases (resembling programming code) that explain how the algorithm works.
There’s also the option to rewind, fast forward, play/pause, and change the speed of the animation through toggling the buttons at the bottom.
The Burnout Machine
Let’s get real for a minute: the tech industry loves to sell us on the myth of the "dream job." You know the pitch - beanbags in the office, free kombucha on tap, and "Agile" processes that are supposed to make everything more flexible, more efficient. But the reality? It’s a meat grinder that chews up developers, sysadmins, and infosec pros and spits them out the other side - burnt out, disillusioned, and disposable.
We’re living in a world where billion dollar tech companies expect us to live and breathe code, demanding 80 hour weeks under the guise of "passion." And what do we get in return? Burnout, anxiety, and the constant threat of layoffs. It’s time to face facts: this industry is not your friend. It’s a machine, and unless we start organizing, it’s going to keep grinding us down. It’s time to talk about unionizing tech jobs.