Editor's Pick
Hexagon shapes with rounded corners
We can create a hexagon shape using clip-path: polygon()
but what about the rounded corners variation? It's now possible with the new clip-path: shape()
. The code is more complex but you can easily control it using CSS variables.
CSS
Tailwind's @apply Feature is Better Than it Sounds
Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obviously, nobody wants to use it. Personally, I think Tailwind's @apply feature is better than described.
Charts.css - CSS data visualization framework
Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts.
Custom CSS Functions in the Browser
There’s been a lot of progress in the CSS Working Group lately, but I want to draw your attention to a prototype that landed in Chromium ‘Canary’ (v136+) browsers with the experimental platform features flag enabled. Author-defined Functions are coming to CSS, and you can start to experiment with them now.
The unknown behavior of flex-wrap
flex-wrap: wrap
allows items to wrap onto multiple lines but it has another function. It transforms your flex container from a single-line to a multi-line container even if at the end you have only one flex line. This means we can use align-content
to align the content.
In other words, you need to use flex-wrap: wrap
to align the content using align-content
even if there is no wrapping.
The CSS shape() function
Shapes are an important aspect of graphic design. The shape()
function provides a new way to author shapes that can adapt and scale with mixed proportions based on the size of the element.
Tailwind CSS Cheat Sheet
A comprehensive Tailwind CSS cheat sheet to instantly find all utility classes and their CSS properties in one place.
At the time of this writing, covers v3 and v4.
The customizable select - Part two: Potions, anchoring, and radial shenanigans in CSS
The second part customizable select with CSS series. Highlighting anchor positioning to create a radial potion select element with just HTML and CSS.
Hexagon shapes with rounded corners
We can create a hexagon shape using clip-path: polygon()
but what about the rounded corners variation? It's now possible with the new clip-path: shape()
. The code is more complex but you can easily control it using CSS variables.
Polygon shapes with rounded corners
Similar to the hexagon shape, here is a generic code to create any regular polygon shape with rounded corners. Powered by Sass and the new shape()
function.
HTML
Default styles for h1 elements are changing
Browsers are starting to roll out changes in default UA styles for nested section headings. This post describes the incoming changes, how to identify if it's an issue on your websites, and hints for conformant and better-structured pages.
JavaScript
The Case for Web Components with Lit
Explore how Lit simplifies the creation of Web Components—so you can spend more time crafting great user experiences and less time wrangling setup code.
The Case for Angular
Angular delivers tremendous value for teams building complex, enterprise-grade applications. Its opinionated structure, comprehensive feature set, and deep TypeScript integration make it an excellent choice for projects that:
- Require long-term maintenance and stability
- Involve large teams with varying levels of expertise
- Need built-in solutions for common challenges (routing, forms, HTTP)
- Benefit from strong typing and tooling support
While React or Vue might be lighter options for simpler applications, Angular's comprehensive approach helps teams avoid "framework fatigue" and the constant churn of integrating various libraries. Its emphasis on maintainability and consistency brings structure to complex projects that might otherwise become unwieldy.
Mastering default values in JavaScript with the nullish coalescing (??) operator
One important piece of JavaScript syntax that I’ve enjoyed using is the nullish coalescing (??
) operator. The ??
operator handles default values more effectively compared with the traditional approach using the logical OR (||
) operator. It’s a 100% must-have tip.
Both the ??
and ||
operators return the right-hand operand if the left-hand operand is “falsy”. But the key difference lies in what they consider falsy.
7 Best Practices of File Upload With JavaScript
I've been working on StorageBowl, a modern all-in-one storage bucket that includes placeholder images, media streaming, shadcn-like components, and much more, for months now. As you can guess, it requires knowing the best practices for uploading functionalities. In one of my previous blogs, I said "Uploading functionality is not a one-time to-do list, it's recursive. You'll need to come again and again throughout scaling your app to meet your needs" One thing I can do to help you to come back less is to give you real actionable best practices. Following these practices will increase the performance of your websites and the speed of your uploading functionality.
Why the Latest JavaScript Frameworks Are a Waste of Time
At first, it’s exciting. A cleaner syntax, better performance, fewer headaches! But after years of jumping from React to Vue to Svelte to Solid (and back again), I’ve come to a realization constantly chasing the latest JavaScript framework is a waste of time.
Don’t get me wrong—innovation is great. But at some point, you have to ask yourself Am I actually building things, or am I just constantly relearning how to build the same thing in a slightly different way?
React Reconciliation: The Hidden Engine Behind Your Components
In my previous articles (1, 2), I explored how React.memo
works and smarter ways to optimize performance through composition. But to truly master React performance, we need to understand the engine that powers it all: React’s reconciliation algorithm.
Reconciliation is the process by which React updates the DOM to match your component tree. It’s what makes React’s declarative programming model possible - you describe what you want, and React figures out how to make it happen efficiently.
How to Open and Close HTML Dialogs
Learn how to use the show()
, showModal(),
and close()
methods to toggle the visibility of a HTML <dialog>
.
Angular Signals: A Deep Dive
Angular Signals represent a significant paradigm shift in how Angular handles reactivity. Introduced in Angular 16 and expanded in subsequent versions, Signals provide a fine-grained reactivity system that brings numerous benefits to Angular applications. This article explores the Signal API in depth, with practical TypeScript examples to help you master this powerful feature.
Miscellaneous
The Reality of Working in Tech: We're Not Hired to Write Code
I later realized that in the fast-paced tech industry, companies prioritize delivering products and features above all else. Managers are responsible for delivering results to higher-ups. As such, it is crucial for developers to work on building and maintaining the company's products and features, regardless of their coding specializations.
The Open Guide to Equity Compensation
If you’re an employee or a candidate for a job, some of these may apply to you:
- You’ve heard phrases like stock, stock options, strike price, ISOs, RSUs, 83(b) election, 409A valuation, AMT, or early exercise and know they are probably important but are mystified by what some of them really mean or whether they apply to your situation.
- You’re considering a job offer but don’t know how to navigate or negotiate the equity component of the offer.
- You’re joining a startup for the first time and are overwhelmed by all the paperwork.
- You’re quitting, taking a leave of absence, or are being laid off or fired from a company where you have stock or options and are thinking through the decisions and consequences.
- A company you work for is going through an acquisition, IPO, or shutdown.
- You have stock in a private company and need cash.
Decisions related to negotiating an offer and exercising stock options, in particular, can have major financial consequences. Because the value of employee equity is determined by the fate of the company, an employee’s equity may be illiquid for a long time or ultimately worth nothing, while taxes and the costs of exercise, if they apply, may not be recouped. Even when a company is doing well, an employee may suffer catastrophic tax pitfalls because they didn’t anticipate the tax consequences of their decisions.
State of Web Dev AI 2025
The first ever State of Web Dev AI survey. We tried to also poll developers who still have their reservations about AI, in order to paint a more accurate picture of the current State of the AI ecosystem.
The State of Web Scraping 2025
What are the biggest trends and developments in web scraping? What does 2025 likely have in store for web scraping?