Resources
Javascript
Typescript
- https://decipher.dev/30-seconds-of-typescript/ : 30 seconds of typescript (hooks, snippets, more)
libraries
- https://videojs.com/ : HTML5 video player library
- https://tempo.formkit.com/ : date library
- vanilla js libraries
- Animate on scroll and its github
- https://roughnotation.com/: Hand drawn annotation animations. Great for blogs.
- https://atroposjs.com/docs: Parallax in JS
- https://sonner.emilkowal.ski/getting-started: toast library
- https://sweetalert.js.org/guides/: better alert library
- https://popmotion.io/: simple animation library
- https://simpleparallax.com/: simple parallax library
React libraries
These are my references:
- https://github.com/CopilotKit/CopilotKit : Ai Copilot for SAAS product
- REact DND : React drag and drop library
- https://github.com/Nozbe/WatermelonDB : WatermelonDB, a SQLite abstraction for REact and React Native
- https://github.com/segmentio/evergreen : Evergreen UI library, including file uplaoder
- https://github.com/vercel/react-tweet : React tweet component
- https://react-svgr.com/playground/ : SVG to React component
- https://mantine.dev/ : React UI library
- https://usehooks-ts.com/ : React Typescript hooks
- https://primereact.org/: React UI library
- https://www.webbie.app/: React + Tailwind components
- https://react-rainbow.io/#/Components: React component library
CSS
TOols collection
- https://gradients.app/en : CSS tools collection
- https://keyframes.app/ : CSS tools collection
- https://10015.io/css-tools : CSS tools collection
- https://www.cssportal.com/ : CSS tools collection
- https://designjunction.xyz/ : Free design assets
- https://www.fffuel.co/ : CSS tools collection Use this! it's great
- https://uiverse.io/ : CSS and tailwind tools collection
- https://github.com/goabstract/Awesome-Design-Tools : design tools repo
- https://github.com/bradtraversy/design-resources-for-developers : design tools repo
CSS tools
- glassmorphism css generator
- https://hype4.academy/tools/glassmorphism-generator : glassmorpshism creator
- https://shadows.brumm.af/ : Multilayered shadow generator
- https://neumorphism.io/#e0e0e0 : Neumorphism generator
- https://cssbuttons.app/ : CSS button generator
- https://cssbud.com/css-generator/css-glow-generator/ : CSS glow generator
- https://gradients.app/en/mesh : CSS gradient choices
- https://cssgradient.io/gradient-backgrounds/ : CSS gradient backgrounds
- https://www.cssportal.com/css-loader-generator/ : CSS loader generator
- https://animate.style/ : CSS animation choices
- https://tobiasahlin.com/spinkit/ : CSS loader choices
- https://loading.io/: CSS loader choices
- https://uiball.com/ldrs/: CSS loader choices
- https://github.com/IanLunn/Hover : CSS hover effects stylesheet
- https://cssgrid-generator.netlify.app/ : CSS grid generator
- https://9elements.github.io/fancy-border-radius/ : CSS border radius generator
- https://scrollbar.app/ : CSS scrollbar styling
- https://uiverse.io/loaders : CSS loader generators
- https://cssfx.netlify.app/ : free CSS animations and effects
- https://cubic-bezier.com/#.17,.67,.83,.67: CSS Cubic Bezier Tool
- https://www.vantajs.com/: Animated background tool
- https://cssloaders.github.io/: CSS Loaders collector
- https://www.minimamente.com/project/magic/: Copy and paste animations
- https://sarcadass.github.io/granim.js/examples.html: gradient animation library
- https://gra.dient.art/: advanced gradient design generator
SVG generator tools
- https://haikei.app/generators/ : All in one SVG curves and blobs generator
- https://svgl.app/: SVG collection
- https://angrytools.com/blob-generator/ : blob svg generator
- https://coolbackgrounds.io/ : cool svg backgrounds
- https://getwaves.io/ : SVG wave generator
- https://tabbied.com/ : SVG pattern doodles
- https://app.haikei.app/ : SVG curves
- https://www.shapedivider.app/ : SVG curves for hero section
- https://svgwave.in/ : SVG waves
- https://www.svgshapes.in/ : SVG shapes
- https://svgcrop.com/ : Crop your SVGs
- https://favicon.io/ : favicon generator
- https://boringavatars.com/ : SVG avatars
- https://www.svgbackgrounds.com/ : SVG graphics collection
- https://marvelapp.github.io/devices.css/ : CSS phone mockups
- https://undraw.co/illustrations : SVG illustrations
- https://doodleipsum.com/ : SVG illustrations
- https://getavataaars.com/ : SVG avatar generator
- https://3dicons.co/ : 3d icons
- https://storyset.com/ : SVG illustrations
- https://shapefest.com/ : 3d SVG illustrations
- https://marvelapp.github.io/devices.css/: Phone mockup
Utilities
Tools Suite
These websites have all-in-one solutions to many problems:
- https://allinone.tools/ : video, image, code, etc.
- https://it-tools.tech/ : open graph, decoding, etc.
- https://app.lazyweb.rocks/ : search for tools
- https://cheatography.com/ : cheatsheets for everything
- https://tinywow.com/tools: tools for pdfs, images, videos
Images
- AI image upscaler
- image compressor: SQUOOSH
- Screely : add backgrounds to your screenshots
- resize images
- Remove watermark
- Remove background from images
- Image Background Remover | Text over Image tool | The place where you can share your business ideas or projects.
- Remove unwanted things from iamge
- Image upscaler
- Remove background from image
Uploading images
Video
APIs
- https://apivault.dev/ : API marketplace
- https://apipheny.io/free-api/ : free apis
- https://dog.ceo/api/breeds/image/random : free dog image
Code
- https://transform.tools/js-object-to-json : converts code from one language to another.
- https://ray.so/ : code screenshotter
- https://carbon.now.sh/ : code screenshotter
- https://playcode.io/new : code playground
- http://knutsynstad.com/fauxcode/ : code screenshotter for fake code
AI TOols
- https://www.warp.dev/ai : command line AI agent
- https://aider.chat/ : AI copilot in terminal
- https://leonardo.ai/ : AI image generation
- https://fronty.com/: convert image to HTML (great for making websites)
Other
- https://markdowndown.vercel.app/ : Convert webpages into markdown
- https://selfh.st/apps : self hosted apps
- https://smallpdf.com/ : edit PDFs
- https://www.tldraw.com/ : free whiteboard app
Chrome extensions
- web maker online web playground
- mobile devtools simulator
- tailscan: an extension that lets you change tailwind classes in the devtools browser with a nice UI.
Learning
- CSS cheatsheets : CSS cheatsheets
- Collection of cheatsheets
- learn typescript from this repo
- functional programming js guide
- you don't know JS github series
- Learn HTML DOM
- Learn debugging
- JS cheatsheet
- complete cheatsheet collection
- Learn CSS animations blog
- Best roadmaps
- Free programming books
- Learn software design pattern
- Learn through creating impressive projects
- Learn animations Emil Kolwaski