Resources

LevelUpTutorials

DevelopmentCoursesVideo

Free development tutorial series by Scott Tolinski and others. Previously paid courses.

https://levelup.video/

TipTap

DevelopmentReact

Headless rich text editor.

https://tiptap.dev/

Call to Inspiration

DesignResources

Design inspiration for common components.

https://calltoinspiration.com/

Liveblocks

ReactDevelopment

Collaborative experiences in days, not months.

https://liveblocks.io/

useHooks

ReactDevelopment

Server compliant collection of React hooks. Now in a package!

https://usehooks.com

CSS HD Gradients

ToolsColorsCSSStyling

CSS gradient generator with new CSS spec colormodes

https://gradient.style/

Web Color Grading App

ToolsColorsImages

Color grade images online in browser.

https://app.color.io/

TailwindCSS Colors Generator

ToolsColorsTailwindCSS

Generate TailwindCSS compatible 9 color palettes from hex values

https://uicolors.app/create

A (Mostly) Complete Guide to React Rendering Behavior

BlogsReactResources

Awesome blog post about rendering in React.

https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/

Patterns.dev

ResourcesBooksDevelopment

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

https://www.patterns.dev/

React Typescript Cheatsheet

ResourcesTypeScriptReact

Cheatsheets for experienced React developers getting started with TypeScript

https://react-typescript-cheatsheet.netlify.app/

BuildUI Recipes

ResourcesStylingCSSSVGAnimation

Code snippets for modern user interface techniques.

https://buildui.com/recipes

BlurHash

OptimizationImagesTools

BlurHash is a compact representation of a placeholder for an image.

https://blurha.sh/

TailwindCSS Gradient Generator

ToolsTailwindCSSCSSStyling

Create gradients to be used in apps that use TailwindCSS.

https://tailwindcomponents.com/gradient-generator/

NPM Trends

Tools

Search and compare NPM packages.

https://npmtrends.com

Pattern Monster

ToolsDesignSVG

Cool svg patterns.

https://pattern.monster/

MockUPhone

ToolsDesignMockup

Phone mockup generator.

https://mockuphone.com/

Compress Image Online

OptimizationImagesTools

Image optimization web app with wonderful design.

https://compressimage.io/

Colorcodes

ColorsTools

Color codes for famous colors such as Banana Yellow.

https://colorcodes.io/

CSS Layout Generator

CSSTools

Layout generator for grid and flexbox.

https://layout.bradwoods.io/

Blobmaker

ToolsSVG

SVG blob maker. Various options and code export.

https://www.blobmaker.app/

Cubic-Bezier

ToolsAnimation

Cubic-bezier curve generator.

https://cubic-bezier.com/#.17,.67,.83,.67

Adobe Color Wheel

DesignToolsColors

Adobe’s color picker. Multiple harmony options to pick better complimentary colors.

https://color.adobe.com/create/color-wheel

ColorSpace

DesignToolsColors

Color palette generator. Can also do gradients very well.

https://mycolor.space/

Figma

DesignTools

The design tool for web development.

https://www.figma.com/

Squoosh

OptimizationImagesTools

Google’s image optimization app. Also has a CLI tool for bulk optimization.

https://squoosh.app/

Google Fonts

FontsResources

Google’s font library.

https://fonts.google.com/