Editor's Pick
Stack Overflow Does Not Want To Help You
The current narrative is that AI is killing Stack Overflow. But maybe AI is just making it easier to leave a community that was already pushing people away.
CSS
daisyUI — Tailwind CSS Components
The most popular component library for Tailwind CSS.
daisyUI adds component class names to Tailwind CSS so you can make beautiful websites faster than ever.
CSS Animation Generator | Create Beautiful CSS Animations Online
Create stunning CSS animations with our intuitive generator. Customize timing, easing, and properties to bring your web elements to life. Preview and export your animations instantly.
View Transitions API: Single Page Apps Without a Framework
An introduction to View Transitions, a modern web platform feature to improve user experience and perceived performance.
View transitions offer a way to animate the transition between different views in a web application.
There are two parts to the View Transition API:
- Same-document view transitions: animations that occur when the user interacts with the same page, for example within a Single Page App.
- Cross-document view transitions: animations that occur when navigating between two different documents, e.g. from clicking on a hyperlink to navigate to a new page on the same website.
Beautiful focus outlines
Focus outlines highlight the active interactive element on a web page. They’re crucial for accessibility, especially for keyboard users and those with motor impairments. If you ever tried navigating a website without a mouse, you can imagine how frustrating it is when you can’t see where you are. If not, imagine not seeing your cursor. Or just try it yourself by tabbing through your favorite website.
Unfortunately, focus outlines are often overlooked in web design. Clients and designers might not even notice them, leaving developers to handle design and implementation. Some might even suggest removing focus outlines for a cleaner aesthetic.
Frosted Glass from Games to the Web
During my time as a UI developer for Forza Horizon 3 and Forza Motorsport 7, I had the opportunity to work with stunning frosted acrylic design elements.
Inspired by this design, I've always wanted to create a similar effect using HTML. On this page, I share my attempt at achieving a beautiful glass effect, along with sample code and assets for anyone who wants to explore this technique themselves.
How to animate an element's height with CSS grid
Use CSS grid to animate an element's height from 0 to auto.
Dark Mode In CSS Guide
Let’s get into dark mode in the context of websites. We’ll delve into different options and approaches to implementing a dark mode design and the technical considerations they entail. We’ll also touch upon some design tips along the way.
Create a darkmode using minimal JavaScript
Learn how to implement a simple darkmode using CSS variables and minimal JavaScript. This guide walks you through the steps to add darkmode and make it persist using localStorage for a better user experience.
JavaScript
JavaScript Sets and Maps: Beyond Arrays and Objects
How to handle unique values and key-value pairs properly without type coercion and performance issues.
The Fight to Free JavaScript from Oracle's Control
The creator of JavaScript and Node.js are challenging Oracle's control over the JavaScript name I’ve been following the JavaScript trademark saga closely, and let me tell you - it’s more fascinating than your typical tech legal battle.
Ryan Dahl (creator of Node.js) and Brendan Eich (creator of JavaScript itself) are taking on Oracle over a trademark that’s become as generic as “escalator” or “thermos.”
As someone who’s watched the open source community evolve, this feels like a pivotal moment.
React Router v7
Today we are happy to announce the stable release of React Router v7.
React Router v7 brings everything you love about Remix back into React Router proper. We encourage all Remix v2 users to upgrade to React Router v7.
For the majority of the React ecosystem that has been around for the last 10 years, we believe React Router v7 will be the smoothest way to bridge the gap between React 18 and 19.
Sonda - Universal visualizer and analyzer for JavaScript and CSS
The most accurate visualization of the final bundles, after tree-shaking and minification.
Works with Vite, Rollup, webpack, Rspack, and esbuild
Vite 6.0 is out - the most significant major release since Vite 2
It has been an eventful year. Vite adoption keeps growing, with npm downloads per week jumping from 7.5 million to 17 million since the release of Vite 5 a year ago.
Loupe - JavaScript Event Loop Visualisation
Loupe is a little visualisation to help you understand how JavaScript's call stack/event loop/callback queue interact with each other.
Neutralinojs v5.5 released
Neutralinojs is a lightweight and portable desktop application development framework. It lets you develop lightweight cross-platform desktop applications using JavaScript, HTML and CSS.
If you can build a website, you can build cross-platform desktop apps too because Neutralinojs is a framework for creating native desktop applications with web technologies like JavaScript, HTML and CSS. You can indeed use your favorite frontend framework (such as Angular, React, Svelte, Vue, etc.) for building your next Neutralinojs app.
Miscellaneous
The End of Front-End Development
Large language models like GPT-4 are becoming increasingly capable, at an alarming rate. Within a couple of years, we won't need developers any more! …Or at least, that's the narrative going viral on Twitter. I'm much more optimistic about what these AI advancements mean for the future of software development.
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages published by a threat actor “sanchezjosephine180” who designed them to mimic highly popular libraries through typosquatting. The threat actor targeted libraries babel-cli, chokidar, streamsearch, ssh2, npm-run-all, and node-pty, which have tens of millions of downloads and are integral to the developer community.
Firefox DevTools Network Tab - How to filter requests by properties
The search box recognizes specific keywords, which can be used to filter the requests by specific request properties. Those keywords are followed by a colon and a related filter value. The filter values are matched case insensitive. Prepending a minus (-) negates the filter. You can combine different filters together by separating them with a space.
Stack Overflow Does Not Want To Help You
The current narrative is that AI is killing Stack Overflow. But maybe AI is just making it easier to leave a community that was already pushing people away.
guitars + programming = guitartonic?
Guitartonic is a guitar improvisation tool that helps practice different scales in multiple positions and learn to play over the whole fretboard.
Scrum’s Definition of Done Is Polishing Plates in a Burning Kitchen
Imagine a kitchen in chaos. Orders are shouted, chefs scramble to grab random tasks, and no one has time to stop or plan. Amid this whirlwind, the maître d’ stands at the door with a clipboard, refusing to let any dish go out unless it meets an impossible checklist of perfection. It doesn’t matter that the stove is broken or the knives are dull—the dishes must be flawless.
This is Scrum’s Definition of Done in a nutshell: instead of addressing the chaos of the process, it places all responsibility for quality on the developers. Rather than fixing systemic issues like unrealistic deadlines or poor collaboration, the Definition of Done simply demands that teams deliver perfection, no matter the odds.