Dev Tools

Tools

• progressive-tooling - links to various open-source tools, a goldmine of a find!
• grep.app - my favorite, it makes searching across github repos blazingly fast
• IT Tools - an all in one tool collection
• WebpageTest - industry-recognized tool to visualize your page’s request timeline
• Symbols - a one-stop shop for copying unicode symbols
• jsnice - js deobfuscation tool, super handy for the reverse engineers out there
• sli.dev - create great-looking presentation slides using code
• Security Headers - validate your website’s security headers
• crontab - easily create cron job schedule expressions
• browserling - free cross-browser testing tool
• badssl - visualize issues due to improper SSL configuration
• gimme-an-img - create an optimized <img /> tag
• useful-forks - find useful forks of a github repository

UI Components

Non-Framework:

• ui-verse - tons of components to choose from
• ui-buttons - that’s a lot of buttons!
• toggles.dev - a website dedicated to theme toggles, why not!
• shoelace - web components for different UI primitives
• free-frontend - mix of different UI components
• Daisy UI - tailwind based

Framework:

• Radix UI - they come unstyled, perfect as a good base
• Mantine - react based
• Headless UI - react + tailwind based

CSS

• clay.css - a cool 3D-isque shadow effect for your cards
• smolcss.dev - tiny snippets to achieve various layouts
• CVA - class based component approach
• open-props - css variable first utilities
• primer - github’s official design system
• picocss - minimal css base
• milligram - another minimal css base, they keep coming!
• half-moon - dark theme supported css variables
• shadow-palette - create multi-layered shadows for added realism
• gradient-generator - create beautiful lush gradients
• animista - pure css keyframe animations

JS Ecosystem

• fresh - web framework built with deno
• fastify - an alternative to Node’s Express.js
• trpc - offers end-to-end typesafe APIs, must check it out for a fresh project!
• neutralino.js - a lightweight alternative to Electron.js
• mitosis - write components once, compile to every framework
• neo - a web worker-driven rendering framework, most interesting!
• quicklink - prefetch resources in the background when idle
• comlink - makes working with web workers a breeze!
• memlab - profile and detect memory leaks in your code
• swup - seamlessly add page transition effects

React specific:

• framer-motion - production-ready motion library for react
• remotion - programmatic .mp4 video generation, this should blow your mind!
• react-flow - customizable flow charts in react
• auto-animate - automatic animations with a single line of code
• linaria - zero runtime css-in-js library

Icons

Sites offering both svg and png formats for free!

• SVG Repo - great collection of svg icons
• Free Icons - has free icons and illustrations
• Ming Cute - unstyled icons
• Feather - more unstyled icons

Sites with a mix of free and premium:

• Flat Icon - png’s are always free here
• Icons 8 - mixed
• Icon Finder - mixed

Fonts

• google-font-helper - helper to self-host your google fonts
• font-bunny - collection of open source fonts
• font-style-matcher - helps minimize FOUC through a matching fallback font
• fonttools - save kB’s by removing unused font glyphs
• font-unicode - unicode ranges for fonts
• icomoon - create custom icon fonts

Design

• mesh-gradient - create beautiful gradient images
• reasonable.colors - collection of accessible color palettes
• undraw - free illustrations
• manypixels - more free illustrations
• colorbox - color palette generator

Social

• shields.io - generate github shields for use on a repository’s README.md file
• socialify.git - create social banners for your github projects
• socialsharepreview - visualize your og images for sharing on social media
• emoji-picker - copy an emoji’s shortcode
• meta-tags - generate meta tags for SEO

Self Hosted

• Umami - self hosted analytics platform
• Dashy - your very own personal dashboard
• Uptime Kuma - nifty monitoring tool
• Pikapods - cloud offering for self-hosted apps
• ChangeDetection - monitor changes in a website, neat!

AI

• regexgo - regex patterns powered by AI? count me in!
• bigjpg - upscales your images, the best free one I’ve come across!
• calligrapher.ai - converts text to beautiful handwriting

Docs

• frontend-checklist - checklist to follow for every website
• frontend-perf-checklist - performance checklist for websites
• browser-hacks - hacks to resolve cross-browser incompatibility issues
• fugu-tracker - track development of web platform features
• cssdb - CSS spec tracker
• glob-primer - understand glob expressions easily
• http-archive - check this out to understand various metrics of the web
• what-happens-when - learn what happens during certain events on the web, amazing!
• git-flight-rules - my goto resource to resolve issues with git
• you-dont-need-lodash - native alternatives to lodash functions
• project-guidelines - guidelines to follow when creating a fresh web project
• clean-code-js - the javascript clean code reference
• tailwind-cheat-sheet - handy cheatsheet for tailwind.css
• jamstack.org - lists various static site generators and CMS tools available

Phew! that took a while to compile…

As I was preparing this list, I felt amazed by the insane number of resources out there, all accessible thanks to the openness of the Web.

Heartfelt gratitude to all the creators and authors out there! ❤️