Resources
![](/_next/image?url=https%3A%2F%2Fnan.fyi%2Fog%2Findex.png&w=3840&q=75)
NaN
Blog posts about advanced topics in web development.
https://www.nan.fyi/![](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Flevel-up-tutorials%2Fimage%2Fupload%2Fv1666641993%2Fcard-backgrounds%2Fsocial.png&w=3840&q=75)
LevelUpTutorials
Free development tutorial series by Scott Tolinski and others. Previously paid courses.
https://levelup.video/![](/_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F645a9acecda2e0594fac6126%2F6685b19263491b5a0279d572_tiptap-og-main.png&w=3840&q=75)
TipTap
Headless rich text editor.
https://tiptap.dev/![](/_next/image?url=https%3A%2F%2Fcalltoinspiration.com%2Fshare.png&w=3840&q=75)
Call to Inspiration
Design inspiration for common components.
https://calltoinspiration.com/![](/_next/image?url=https%3A%2F%2Fliveblocks.io%2Fimages%2Fsocial-images%2Fsocial-image.png&w=3840&q=75)
Liveblocks
Collaborative experiences in days, not months.
https://liveblocks.io/![](/_next/image?url=https%3A%2F%2Fusehooks.com%2Fmeta%2Fog.jpg&w=3840&q=75)
useHooks
Server compliant collection of React hooks. Now in a package!
https://usehooks.comCSS HD Gradients
CSS gradient generator with new CSS spec colormodes
https://gradient.style/![](/_next/image?url=https%3A%2F%2Fapp.color.io%2Fassets%2Fopengraph_colorio.jpg&w=3840&q=75)
Web Color Grading App
Color grade images online in browser.
https://app.color.io/![](/_next/image?url=https%3A%2F%2Fuicolors.app%2Fog_image.png&w=3840&q=75)
TailwindCSS Colors Generator
Generate TailwindCSS compatible 9 color palettes from hex values
https://uicolors.app/create![](/_next/image?url=https%3A%2F%2Fblog.isquaredsoftware.com%2Fimages%2Flogo.png&w=3840&q=75)
A (Mostly) Complete Guide to React Rendering Behavior
Awesome blog post about rendering in React.
https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/![](/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fddxwdqwkr%2Fimage%2Fupload%2Fc_scale%2Cf_auto%2Cw_1600%2Fv1704232232%2Fpatterns.dev%2FPostPreview_3x.jpg&w=3840&q=75)
Patterns.dev
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/![](/_next/image?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F6764957%2F53868378-2b51fc80-3fb3-11e9-9cee-0277efe8a927.png&w=3840&q=75)
React Typescript Cheatsheet
Cheatsheets for experienced React developers getting started with TypeScript
https://react-typescript-cheatsheet.netlify.app/![](/_next/image?url=https%3A%2F%2Fbuildui.com%2F_next%2Fstatic%2Fmedia%2Fog-image.4b604420.png&w=3840&q=75)
BuildUI Recipes
Code snippets for modern user interface techniques.
https://buildui.com/recipes![](/_next/image?url=https%3A%2F%2Fblurha.sh%2F0dbfa49e7af8ca42f464.png&w=3840&q=75)
BlurHash
BlurHash is a compact representation of a placeholder for an image.
https://blurha.sh/![](/_next/image?url=https%3A%2F%2Ftailwindcomponents.com%2Fgradient-generator%2Ftailwind-gradient-generator-thumbnail.webp&w=3840&q=75)
TailwindCSS Gradient Generator
Create gradients to be used in apps that use TailwindCSS.
https://tailwindcomponents.com/gradient-generator/![](/_next/image?url=https%3A%2F%2Fnpmtrends.com%2Fimages%2Fnpm_trends_share_image.png&w=3840&q=75)
NPM Trends
Search and compare NPM packages.
https://npmtrends.com![](/_next/image?url=https%3A%2F%2Fgiguom.com%2Fpattern.monster%2Fimages%2F%2FTwitterBG2.png&w=3840&q=75)
Pattern Monster
Cool svg patterns.
https://pattern.monster/![](/_next/image?url=https%3A%2F%2Fmockuphone.com%2FImages%2Fmockuphone-logo.png&w=3840&q=75)
MockUPhone
Phone mockup generator.
https://mockuphone.com/![](/_next/image?url=https%3A%2F%2Fcompressimage.io%2Fimages%2Fmetaimage.jpg&w=3840&q=75)
Compress Image Online
Image optimization web app with wonderful design.
https://compressimage.io/Colorcodes
Color codes for famous colors such as Banana Yellow.
https://colorcodes.io/![](/_next/image?url=https%3A%2F%2Flayout.bradwoods.io%2FogImage.png&w=3840&q=75)
CSS Layout Generator
Layout generator for grid and flexbox.
https://layout.bradwoods.io/![](/_next/image?url=https%3A%2F%2Fwww.blobmaker.app%2Fstatic%2Fblobmaker-cover-703617855c36334d464a0690d71f7a75.jpg&w=3840&q=75)
Blobmaker
SVG blob maker. Various options and code export.
https://www.blobmaker.app/Cubic-Bezier
Cubic-bezier curve generator.
https://cubic-bezier.com/#.17,.67,.83,.67Adobe Color Wheel
Adobe’s color picker. Multiple harmony options to pick better complimentary colors.
https://color.adobe.com/create/color-wheelColorSpace
Color palette generator. Can also do gradients very well.
https://mycolor.space/![](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F599r6htc%2Fregionalized%2Ff1571b24788ba2f22638c19dabb1f8d13adcd64c-2400x1260.png%3Fw%3D1200%26q%3D70%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
Figma
The design tool for web development.
https://www.figma.com/![](/_next/image?url=https%3A%2F%2Fsquoosh.app%2Fc%2Ficon-large-maskable-c2078ced.png&w=3840&q=75)
Squoosh
Google’s image optimization app. Also has a CLI tool for bulk optimization.
https://squoosh.app/![](/_next/image?url=https%3A%2F%2Fwww.gstatic.com%2Fimages%2Ficons%2Fmaterial%2Fapps%2Ffonts%2F1x%2Fcatalog%2Fv5%2Fopengraph_color.png&w=3840&q=75)
Google Fonts
Google’s font library.
https://fonts.google.com/