Editor's Pick
Advanced TypeScript manipulation features for the real world
To expand on a previous Piccalilli article about TypeScript's utility types, Jordan Seiler walks us through some very useful advanced type manipulation features in the context of a home monitoring system.
CSS
New CSS features to know for 2025
This is the first installment of a new series I'm going to start called CSS Quarterly, where I'm going to look at the newest CSS features that are on their way to browsers, as well as look at features that are hitting Baseline Newly Available and Baseline Widely Supported.
Using CSS backdrop-filter for UI Effects
Tips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.
Polishing your typography with line height units
It might seem like no big deal that the web gained two new units, lh and rlh, to reference line heights. Support shipped in every browser in 2023 without much fanfare. But wow, are they powerful.
Basically, 1lh equals the height of one line of text, for the current font at the current line height. “LH” stands for Line Height. The accompanying 1rlh unit is the equivalent of one line height at the root, just like how rem is the em at the root. “RLH” stands for Root Line Height.
Blob shape with hover effect
Use the new shape() and create a cool CSS-only blob shape to your image with a cool bouncy hover effect.
Chrome-only at the time of this writing.
Easier layout with margin-trim
The margin-trim property lets you tell a container to trim the margins off its children — any margins that push up against the container. In one fell swoop, all of the space between the children and the container is eliminated.
This also works when the margins are on the grandchildren or great grand-children, or great great great great grand-children. If there is space created with margins on any of the content inside the container, and that space buts up against the container, it’s trimmed away when margin-trim is applied to the container.
Support for margin-trim shipped in Safari over two years ago. But so far, Safari is the only browser with support.
HTML
Revisiting Image Maps
Image maps are hard-coded and time-consuming to create without tools. Even with tools for generating image maps, converting paths to points, and then recalculating them using JavaScript, they could be challenging to maintain at scale.
<area> elements aren’t visible, and except for a change in the cursor, they provide no visual feedback when someone hovers over or presses a link. Plus, there’s no easy way to add animations or interaction effects.
But the deal-breaker for me was that an image map’s pixel-based values are unresponsive by default. So, what might be an alternative solution for implementing my map using CSS, HTML, and SVG?
JavaScript
Mastering tsconfig.json: The Ultimate Guide to Configuring TypeScript Projects
This article deeply demystifies tsconfig.json, improving real-world code examples, replacing vague variable names, and walking you through configuration strategies for various project sizes and scopes.
When to use map() vs. forEach()
Learn the key differences between map() and forEach() methods in JavaScript, when to use each, and why map() is often the better choice for transforming data and writing cleaner, more functional code.
Advanced TypeScript manipulation features for the real world
To expand on a previous Piccalilli article about TypeScript's utility types, Jordan Seiler walks us through some very useful advanced type manipulation features in the context of a home monitoring system.
Miscellaneous
14 web performance tips for 2025
Strategic web performance tips that you should be focusing on in 2025 to improve Core Web Vitals.
Design Tokens Name Generator
Create consistent and scalable design token naming conventions for your design system.