Resources
Web Dev

Books
Things I Like

Remix

Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.

UI Components Handbook

The definitive guide to standardize the design/code of the UI Components based on the 39 most popular Reference Systems.

Effect TS

A fully-fledged functional effect system for TypeScript with a rich standard library

Arcjet

Security as code. Bot detection. Rate limiting. Email validation. Attack protection. Data redaction. A developer-first approach to security.

Act - Run Github Actions Locally

Run your Github actions locally without having to struggle through the commit, push, go to Github loop.

Protomaps

A free, open source, and self hostable map of the world

A Complete Guide To Check Data Types In JavaScript

Learn the easiest way to check and compare data types in JavaScript

TS Docs

Browse type documentation for npm packages

Capacitor

A cross-platform native runtime for web apps.

TypeHero

Connect, collaborate, and grow with a community of TypeScript developers. Elevate your skills through interactive coding challenges, discussions, and knowledge sharing

Delicious Donut Components

Learn about React Server Component patterns to that allow you to use Server Components inside of Client Components.

Triplit

A realtime database that syncs between the server and browser automatically

Easy Frontend

Great visual tool to give you a starting point for your Tailwind or Bootstrap based components

Magic UI

A series of components and templates built in React, Typescript, and Tailwind

useState vs useReducer

A simple guide with suggestions on when to use state or reducer hooks

Mobile UI Design Components

A collection of web components for mobile oriented design systems

Kirby in Typescript

Kirby like Platformer Game made with TypeScript + Kaboom.js

Architecture Notes

Learn about the systems you use everyday from the engineers who built them

Box Shadow Generator

Generate smooth box shadows with an intuitive UI that generates CSS for you.

Tailwind and Open Props Transitions

Use Open Props Springy CSS Transitions in your Tailwind project with custom classes.

Threlte: Three.js + Svelte

Threlte lets you use every feature of Three.js in a declarative way. Compose your scene with Threlte's render components and let Threlte handle the rest.

Shadcn/ui Color Generator

Generate configuration files for shadcn/ui

Upstash

Serveless data platform services for Redis, Kafka, and QStash

Simple React Typescript Cheatsheet

Github Repo with quick references on how to use Typescript with React in 2023

Hover.dev

Animated UI Components for React & Tailwind

Shadcn Landing Pages

Build your React landing page effortlessly with the required sections to your project.

Turborepo

Turborepo is a high-performance build system for JavaScript and TypeScript codebases.

Javascript.info

The modern JavaScript tutorial. How it's done now. From the basics to advanced topics with simple, but detailed explanations.

Relational Databases Explained

How Relational Databases Work. This post talks about how indexes and transactions work on the inside of relational databases.

Icon Buddy

Huge collection of SVG icons

UseInterval as a Custom Hook

Dan Abramov teaches how to combine useRef() and useEffect() to create a new useInterval() hook

CSS Anchor Positioning Tool

Visually see the values of the CSS Anchoring Position "inset-area" property

WireIt - An NPM scripts upgrade

Provides an enhances experience for NPM scripts including parallel runs, local caching, and workspace support.

Use Cases for Typescript Extract Function

Extract is a powerful built in function for Typescript. Learn some useful pattersn and examples of how to use it.

Tiny Stack

A web stack of Astro, SQLite, and Litestream

Backend Cheats

A repo full of cheatsheets for backend development

Redis Explained

A deep technical dive into all things Redis. Covering various Redis topologies, data persistence and process forking.

Leveling up Your APIs with Typescript

Learnings on how you can leverage Typescript to get the most out of your API projects.

React Server Components Lessons Learned

Learn how and why the the Mux team transitioned to using React Server Components

Local-First Web Development

A community resource providing education and tooling for local first web development.

Open Props

Super charged CSS variables to add to any project

Cache Control Cheatsheet

A quick and easy to understand guide on the various cache-control values

Typescript Style Guide

An opinionated and well reasoned guide to working with Typescript

Remix the Web

A set of web utilities that lean on web standards

Bruno

A FOSS alternative to Postman and Insomnia for API client testing

WXT

An open source tool that makes Chrome Extension development faster than ever before.

Reflect

High performance sync for multiplayer web apps

React State Strategies

A quick flowchart on which state strategy to use in React

Merge Refs in React

Merge refs in React so a component can have more than one ref

React Libraries

A comprehensive, opinionated list of React Libraries, broken down by domain and function.

useAnimated Text Hook

A BuildUI React Hook for animating text

Omatsuri

A frontend swiss army knife: - convert svg → jsx and back - compress svg - generate fake json - keyboard event codes - generate colour shades & gradients - + more

Type-safe polymorphic React components

Instructive guide on how to setup polymorphic and type safe React components

Perf.link

JS Benchmark tool

React Marquee Component

A nice Marquee Component that can be copy pasted in a la shadcn/ui

Adapting Typography to User Preferences with CSS

A method to adapt a font to your users' preferences, so they're maximally comfortable reading your content.

Authentication in Remix

Learn how to properly add authentication to your Remix App

Legend State

A super fast and powerful state library that enables fine-grained reactivity and easy automatic persistence

Looping in Typescript

Quick guide on how to use loops in Typescript

Total Typescript

Educational content for Typescript

Patterns.dev

Patterns.dev is a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.

Encore

A development platform for building event-driven and distributed systems.

Create Typescript App

An opinionated starter for generating a Typescript app

Trigger.dev

The open source Background Jobs framework for TypeScript

Aceternity Ui

Copy paste components with lots of nice visual effects

Npkill

Easily find and remove old and heavy node_modules folders

Create SVG Sprites in React

Learn how and why creating SVG sprites in React is the way to go

Robin Wieruch

Valuable learning resources for React, Node, and GraphQL

Remove Background Bulk Tool

Simple single use tool to bulk remove backgrounds from images

Transform Union to Records

How to transform a Typescript Union to a Record. Useful for library devs

Color Designer

A collection of tools to help you design your color palettes

Ray.so - Code Images

A simple tool to create beautiful images for your code

Playroom Kit

Playroom Kit is a high-performance sync that handles the networking and the room management so you can focus on building your game.

Checklist Design

A collection of the best design practices in convenient checklists to use as you build.

Image Background Removal

A local LLM Hugging Face model to remove backgrounds from images.