Modern Web Development Tools Worth Trying
A random and unordered collection of things I thought might be fun or interesting to use in web development.
T3 Stack
What is it? The “T3 Stack” is a web development stack made by some nerd that is composed of Next.js TypeScript and Tailwind CSS. It can optionally include tRPC, Prisma or Drizzle, and NextAuth.js.
Why is it cool? It makes making a web app super easy. I have used this in the past for both personal projects and commercial work. I personally love the combination of drizzle, tRPC and Next.js.
Kysley
What is it? A type-safe SQL query builder for TypeScript,
Why is it cool? ORM’s make working with a SQL DB much easier, but they don’t handle complex queries or help to optimize queries. Sometimes the best way to get things done is to just write some SQL. Kysley is a tool that makes working with SQL in Typescript easier. If you have existing code that uses SQL, you aren’t likely going to be able to add an ORM, but adding Kysley should be a possibility.
Drizzle
What is it? Drizzle is an ORM for TypeScript
Why is it cool? It allows you to specify your DB schemas in Typescript. That it. Thats the killer feature for me. It supports all the types of DBs I like to use, has active support and development and supports a few different styles of querying.
AuthJs
What is it? An authentication library for JS.
Why is it cool? I often have to add authentication for various OAuth services. A lot of other libraries are specific to a framework and / or a specific OAuth provider. Authentication is boring, painful and it’s super critical that you get it right. This library looks like it focuses on making things more convenient without being tied to a specific way of doing things.
Jotai / Zustand
https://github.com/pmndrs/jotai
What is it? State management libraries for JS.
Why is it cool? See this video for details about Jotai and Zustand. Redux is too easy to mis-use, so IMO these libraries are improvements. It’s probably best to not start a project with a state management library unless you are absolutely certain you are going to need one.
How does Zustand compare to other state management libraries?
Legend State
https://www.legendapp.com/open-source/state/
What is it? Another state manage library that focuses on speed.
Why is it cool? I’m kind of a nerd for state management libraries. This one is signal-based, and signals are cool.
Turborepo
https://turbo.build/repo/docs/core-concepts/monorepos
What is it? Turborepo is a build system for JS and TS code bases that focused on monorepo support and speed.
Why is it cool? Monoerepos are a bit overrated at the moment IMO, but there are situations where they are absolutely called for. Webpack seems to be on its way out, this seems like a decent upgrade.
HeadlessUI
What is it? A component library for React and Vue that can be styled using Tailwind.
Why is it cool? There are tons of UI libraries out there of varying quality and opinions. What I want is a library that does something like 80% of the work for me, but lets me control style and fine tune some behavior. This seems like it might fit that description, plus I like the way it looks out of the box.
shadcn/ui
What is it? UI components and the tools to build them.
Why is it cool? You only install the components you need. It’s not a component library so much as a tool to build a component library. Fully customizable. Nice looking defaults.
dnd kit
What is it? A drag and drop library for React
Why is it cool? It’s a drag and drop library for React.
AutoAnimate
https://auto-animate.formkit.com
What is it? Small, simple and easy to use animation library.
Why is it cool? Its not Lottie animations, it’s a tool that help to add all the small UI animations that make your app feel nice.
upstash
What is it? Serverless Redis, vector storage, messaging and functions
Why is it cool? It has a free tier and can scale to 0.
usehooks-ts
https://github.com/juliencrn/usehooks-ts
What is it? A collection of hand React hooks written in TS
Why is it cool? You will have to look at the whole list to know what its about, but I particularly like the useLocalStorage hook.
heroicons
What is it? SVG icons from the creators of Tailwind CSS
Why is it cool? It’s free, easy to use, the icons look nice and you don’t have to install anything.
danfo
What is it? It’s a data processing library. Basically a JS version of Pandas
Why is it cool? Why should we have to do data processing in Python? Python is for data science nerds that don’t know how to code. I will probably never really use this, but its fun to pretend.
tensorflow JS
What is it? It’s Tensorflow
Why is it cool? See above
Protonmaps
What is it? Open source map tiles
Why is it cool? Normally you would pay for map tiles and the server that provides them. This lets you host the map tiles yourself. Adding a map to your app is not easy. This is a useful part of a map toolkit.
css buttons
https://github.com/guivr/cssbuttons
What is it? A collection of css buttons
Why is it cool? Good for inspiration. You can copy the CSS to use as your starting point.
CSS Loaders
What is it? Huge collection of animated CSS loaders
Why is it cool? Great for inspiration or if you just want to quickly grab a cool looking loader.
Biome
What is it? A fast code formatter
Why is it cool? It’s like Prettier, but much faster.
Dribble
https://dribbble.com/tags/mobile-table
What is it? A collection of UI designs
Why is it cool? I am not a designer, but I am pretty good at implementing a design. This is good place to get UI inspiration. I was especially interested in their mobile table designs.
Pintrest
https://www.pinterest.nz/pin/5770305763381702/
What is it? Its Pintrest.
Why is it cool? I was mildly surprised that I could find UI designs in Pintrest. Good place for UI inspiration.
Envato
https://elements.envato.com/web-templates/admin-templates
What is it? A collection of UI templates.
Why is it cool? Not certain how much I like the designs, but it has the best examples of admin page UIs that I could find.
Mintlify
What is it? Documentation hosting
Why is it cool? Tools to create documentation and host it. Has a free tier. I like the way the documentation looks.
Hoppscotch
What is it? An API testing tool, like Postman / Insomnia / Bruno
Why is it cool? It’s 100% open source. Won’t nag you to log in online or upgrade to a paid service. Nicer than just using CURL.
Source Map Support
https://www.npmjs.com/package/source-map-support
What is it? NPM dependency that adds source map support to Node.
Why is it cool? TS on Node is more common now. I haven’t tried this out yet but seems like it could come in handy. Not sure if using Bun or Deno would also solve this problem.
Posthog
What is it? Analytics solution for your app. Actually, it does a lot more than analytics but I don’t understand all of it.
Why is it cool? It has a free tier. All the cool kids are going on about it.
llm-ui
What is it? A React UI library for building LLM apps
Why is it cool? Pure FOMO. If you aren’t building LLM apps no one will hire you! Seriously though, it has some nice features for writing chat apps in general. I find the markdown rendering to be interesting.
iconify
What is it? A huge collection of SVG icons
Why is it cool? Has a good search feature. Lots of nice options when copying the icons.
Magic UI
What is it? A UI library for React and Tailwind
Why is it cool? You can copy and paste the components. Has components that other libraries don’t often have, like a filetree component.