Web libraries and tools

Frameworks

Name	Description
Astro Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between. https://astro.build/	Full stack framework, best for content-focused websites
Nue: The content-first web framework Nue is a fresh Next.js and Astro alternative with a content-first development model, universal hot-reloading, and extreme performance. https://nuejs.org/	Attempts to bridge interactive and content-first websites
htmx - high power tools for html htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext https://htmx.org/	Easily swap out hypertext content directly in HTML
Tauri 2.0 The cross-platform app building toolkit https://tauri.app/	Tiny desktop app bundler

Libraries

Design

Name	Description
Pico.css • Minimal CSS Framework for semantic HTML Elegant styles for all native HTML elements without .classes and dark mode automatically enabled. 7.9 kB minified and gzipped! https://picocss.com/	CSS framework that uses mostly plain HTML
Mantine https://mantine.dev	Full featured component library
Tamagui React style library and UI kit that unifies React Native and React web https://tamagui.dev/	React and React Native style framework that supports CSS features, with a component library
Radix UI Components, icons, and colors for building high‑quality, accessible UI. Free and open-source. https://www.radix-ui.com	Simple UI components
A Modern CSS Reset I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles! https://www.joshwcomeau.com/css/custom-css-reset/	A simple, unopinionated, modern CSS reset
CSSFX - Beautifully simple click-to-copy CSS effects Browse a carefully crafted collection of loaders, hover effects, transitions, and other CSS effects to use in your next project. Effects are designed with an emphasis on fluidity, simplicity, and ease of use. https://cssfx.netlify.app/	CSS effects for buttons, inputs, and spinners
system-fonts/modern-font-stacks System font stack CSS organized by typeface classification for every modern operating system https://github.com/system-fonts/modern-font-stacks	CSS snippets for pre-installed fonts
aholachek/animate-css-grid: Painless transitions for CSS Grid Painless transitions for CSS Grid. Contribute to aholachek/animate-css-grid development by creating an account on GitHub. https://github.com/aholachek/animate-css-grid	Animate CSS Grid property changes and element addition/removal
ztext.js \| 3D Typography for the Web Easy to implement, 3D typography for any website and every font. https://bennettfeely.com/ztext/	Fun 3D text effects, can be triggered on mousemove or scroll

Other

Name	Description
React Scan React Scan automatically detects and highlights components that cause performance issues in your React app. Drop it in anywhere – script tag, npm, you name it! https://react-scan.million.dev/	Detect unnecessary React app renders
Introduction to Immer \| Immer Immer (German for: always) is a tiny package that allows you to work with immutable state in a more convenient way. https://immerjs.github.io/immer/	Simple immutable state library (see Introducing Immer - Immutability the easy way)
toss/es-toolkit: A modern JavaScript utility library that's 2-3 times faster and up to 97% smaller—a major upgrade to lodash. A modern JavaScript utility library that's 2-3 times faster and up to 97% smaller—a major upgrade to lodash. - toss/es-toolkit https://github.com/toss/es-toolkit	Modern utility library (lodash/underscore alternative)
date-fns date-fns provides the most comprehensive yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. https://date-fns.org/	Modern date utility functions
sindresorhus/ky: 🌳 Tiny & elegant JavaScript HTTP client based on the Fetch API 🌳 Tiny & elegant JavaScript HTTP client based on the Fetch API - sindresorhus/ky https://github.com/sindresorhus/ky	Tiny `fetch` wrapper
Native dual-range input Two native range inputs and fifty lines of JavaScript to make them work together. https://muffinman.io/blog/native-dual-range-input/	Native dual-range input slider
tsuyoshiwada/sweet-scroll Contribute to tsuyoshiwada/sweet-scroll development by creating an account on GitHub. https://github.com/tsuyoshiwada/sweet-scroll	Cancelable scroll library with tons of options
rikschennink/fitty: ✨ Makes text fit perfectly ✨ Makes text fit perfectly. Contribute to rikschennink/fitty development by creating an account on GitHub. https://github.com/rikschennink/fitty	Resize text to fit its container
bramstein/hypher: A fast and small JavaScript hyphenation engine A fast and small JavaScript hyphenation engine. Contribute to bramstein/hypher development by creating an account on GitHub. https://github.com/bramstein/Hypher/	Adds soft hyphens to text
Pagefind \| Pagefind — Static low-bandwidth search at scale Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure. https://pagefind.app/	Index generator for client-side search
stefanbohacek/detect-missing-adblocker Provide a more secure experience to your website’s visitors. https://github.com/stefanbohacek/detect-missing-adblocker	Warning for users without an adblocker
GitHub - ai-robots-txt/ai.robots.txt: A list of AI agents and robots to block. A list of AI agents and robots to block. Contribute to ai-robots-txt/ai.robots.txt development by creating an account on GitHub. https://github.com/ai-robots-txt/ai.robots.txt	Attempts to block AI scrapers

Not recommended

Parcel:
- build caching is extremely buggy, ended up having to edit the dev and build scripts to delete the cache before every build
- couldn't get publicUrl to work with relative paths in the HTML, had to use sed in build script to replace

Tools

Name	Description
Mocky: The world easiest & fastest tool to mock your APIs Don't wait for the backend to be ready, generate custom API responses with Mocky and start working on your application straightaway https://designer.mocky.io	API mock creator
PageSpeed Insights https://pagespeed.web.dev/	Lighthouse score tester
WebPageTest https://www.webpagetest.org/	Lighthouse test your site across devices
Web Vitals Measure metrics for a healthy site https://chromewebstore.google.com/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en	Chrome extension to measure Core Web Vitals
WAVE Chrome, Firefox, and Edge Extensions https://wave.webaim.org/extension/	Accessibility checker browser extension
OddContrast Color contrast checker with Oklch, Oklab, Display P3, and more – helping designers meet WCAG 2 accessibility standards. https://www.oddcontrast.com/	Color converter and contrast checker
Modular Scale Calculate, visualize, and learn about modular scales. https://www.modularscale.com/	Font scale tester
Font style matcher https://meowni.ca/font-style-matcher/	Find fallback fonts that minimize layout shift
SmolCSS Minimal snippets for modern CSS layouts and components https://smolcss.dev/	Minimal snippets for modern CSS layouts and components
Gradient Generator https://www.learnui.design/tools/gradient-generator.html	Gradient generator with color space support
Clippy — CSS clip-path maker https://bennettfeely.com/clippy/	CSS clip-path maker
CSS Spring Easing Generator A tool designed to intuitively generate spring easings for linear() in CSS. Includes presets and customizable inputs for perceptual duration and bounce. https://www.kvin.me/css-springs?ck_subscriber_id=2180556632	Customize easings with bounce