Editor's Pick
Printing music with CSS Grid
Music notation should be as accessible and as fluid as text is on the web. CSS Grid helps us get there.
CSS
Hidden Gems of Tailwind CSS
Unlock the full potential of Tailwind CSS for your Rails-based SaaS apps with our guide on hidden features. From changing checkbox colors to leveraging peer modifiers and custom variants, enhance your web UIs effortlessly.
CSS Grid Generator
You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.
Though this project can get a basic layout started for you, this project is not a comprehensive tour of CSS Grid capabilities. It is a way for you to use CSS Grid features quickly.
Printing music with CSS Grid
Music notation should be as accessible and as fluid as text is on the web. CSS Grid helps us get there.
Detect JavaScript Support in CSS
I had been aware of the scripting CSS media feature but I was still under the impression that cross-browser support was lacking. What a pleasant surprise to discover that it has been available in all modern browsers as of December 2023 according to caniuse.com. With this feature, we can provide alternative CSS rules depending on whether or not JavaScript is available in the user's browser. It can also help reduce flashes of unstyled content or undesirable layout shifts.
As exciting as this feature is, I've learned that there are a couple unfortunate gotchas. I've amended the article with an issues section.
Creating Perfect Font Fallbacks in CSS
Learn how to use three CSS properties to override font metrics and minimize layout shifts during font load.
Combining CSS :has() And HTML <select> For Greater Conditional Styling
Amit Sheen demonstrates using :has() to apply styles conditionally when a certain in a element is chosen by the user and how we gain even more conditional styling capabilities when chaining :has() with other pseudo-classes, such as :not() — no JavaScript necessary.
JavaScript
Cheat sheet for moving from jQuery to vanilla JavaScript
This reference guide will help you convert jQuery's most common patterns to vanilla JavaScript.
Vue Fluid DnD - Drag and Drop Library for Vue
Vue Fluid DnD is a fluid, smooth and versatile drag and drop library for lists with Vue.
nivo - provides a rich set of dataviz components, built on top of D3 and React
nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3.
Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.
rocketicons - React and React Native icons powered by Tailwind
The icon library you've been looking for. Works in React and React Native without any changes. Just one code that runs wherever you need it. And with all the power you already know from Tailwind.
I Reviewed 1,000s of Opinions on HTMX
HTMX is a trending JavaScript library that enables the construction of modern user interfaces using hypermedia as the engine of application state.
In a nutshell, you can implement a button that replaces the entire button with an HTTP response using HTML attributes.
If you follow popular web development trends or are a fan of popular developer-focused content creators, you have probably heard about it through Fireship or ThePrimeagen. However, HTMX has brought an absolute whirlwind of controversy with its radically different approach to building user interfaces. Some folks are skeptical, others are excited, and others are just curious.
A React Developer's Guide to Learning SolidJS
When we initially set out to build Stashpad Docs, one of the first decisions we had to make was whether to use React or to pivot to a different front-end framework. React was the default choice because the engineers at Stashpad are experienced React developers and already had used it to build Stashpad Lists.
SolidJS (colloquially referred to as Solid) had been on our radar for quite some time, and this project felt like a good opportunity to give it a shot. React had worked fairly well for us in Stashpad Lists, but we'd hit enough performance bottlenecks and quirky bugs that it felt worth our while to explore other options. We wanted to build something simple and blazingly fast, and the absence of a virtual DOM plus fine-grained reactivity aligned Solid with our goals quite well.
UX
Dark Design Patterns Catalog
New regulations from the Government of India prohibit the use of 12 common dark design patterns. These sneaky practices are unethical applications of established UX knowledge to make interface designs that harm users instead of helping them.
“Dark design patterns” are ways of cheating users through a variety of misleading user interfaces — or sometimes simply by making it unnecessarily difficult to accomplish actions that the user wants but that the company wants to prevent, such as canceling a subscription.
Miscellaneous
FrontendLead - Frontend Interview Preparation Platform
All in one preparation platform for front end interviews. 300+ practice questions (with answers) across system design, UI and more.
Not free, though they have some free material. It's worth a look.