Piku
piku, inspired by dokku, allows you do git push deployments to your own servers.
Resources
TerminalTextEffects
A terminal visual effects engine.
matcha.css
A pure CSS library designed to style HTML elements similarly to a default browser stylesheet.
franken/ui
HTML-first, framework-agnostic, beautifully designed components that you can truly copy and paste into your site.
Popover API
The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content.
Deep Reinforcement Learning: Zero to Hero
A short and practical introductory course on foundational and classic deep reinforcement learning algorithms.
canvas-confetti
A performant confetti animation in the browser.
AI Illustration Generator
An AI image generator to create stylistically consistent illustrations in minutes.
Tailwind CSS Components
A free collection of Tailwind CSS UI components.
MarkdownDown
Convert any webpage to a clean markdown with images downloaded.
Lucia Auth
Lucia is an open source auth library that abstracts away the complexity of handling sessions.
Paper.js
An open-source vector graphics scripting framework that runs on top of the HTML5 Canvas.
svg-spinners
A collection of 24 x 24 dp SVG spinners.
Kener
An open-source Node.js status page tool, designed to handle service monitoring and incidents.
nativecn-ui
Beautiful and customizable React Native components.
LoaderShip
A CSS-only loader configuration tool that allows you to effortlessly customize and generate loaders.
Current Time UTC
A time converter for lighting fast local times for cities, timezones, and airports.
ScrollyVideo.js
A JavaScript library for responsive scrollable videos.
Triplit
A complete solution to data persistence, state management, and realtime synchronization for web applications.
ArchiveBox
An open-source self-hosted web archiving. It takes an URLs/browser history and etc. and saves HTML, JS, PDFs, media, and more.
Melt UI
An open-source Svelte component library for building high-quality, accessible design systems and web apps.
HTMX Playground
A tool that allows you to write code in a backend-like environment, running entirely inside the browser.
TinyDevKit
A collection of handy developer tools like URL parsing, base64 encoding/decoding, and other convenient utilities.
39 Useful CSS Tools for Developers
A list of 39 CSS tools for developers, including calculators and generators.
schedule-x
A library for a material design event calendar and date picker.
PocketBase
An open-source backend in 1 file with realtime database, authentication, file storage and admin dashboard.
EHTML
A set of custom elements that you can place on an HTML page for different purposes and use cases.
DevResume
A free web-based resume editor based on writing YAML with realtime preview and PDF export.
inpaint-web
A free and open-source inpainting and image-upscaling tool powered by webgpu and wasm on the browser.
You Don't Need Lodash Underscore
A list of JavaScript methods which you can use natively + ESLint Plugin.
Sourcemap Tools
Apply source maps to the JavaScript error stack trace and get the original error position.
FastBootstrap
A library of beautiful Bootstrap UI components designed with Atlassian Design.
Taildashboards
Fully responsive and carefully crafted, one-page dashboards.
OpenMailer
A minimalist Next.js alternative to Mailchimp, Beehiiv, Convertkit etc.
Google Icons
Icons in material design style in three styles and four adjustable variable font styles.
Pieces for Developers
A Mac app to save, search, share & reuse key developer resources in a AI-powered code snippets + screenshots hub.
Open Source Software
A website to find open source alternatives to popular projects as well as projects to contribute to.
Hex Colors
A free color tool providing information about any color and generating matching color schemes.
Keep React
A library of 40+ open-source React UI components and interactive elements.
Remix Icon
A set of open source neutral style system symbols. All of the icons are free for both personal and commercial use.
CodeX Docs
A simple free application for your internal, public or personal docs.
Tailwind Blocks
A collection of modern, reusable UI blocks and components for React, Next.js and Astro build on top of TailwindCSS.
Animated Background Headers
Creative website header animations using Canvas and JavaScript.
Front Tips
Daily short video tips and tricks for HTML, CSS, JavaScript, frontend libraries and tools.
Let’s learn how modern JavaScript frameworks work by building one
An interesting article that walks through building a JavaScript framework to understand the underlying code.
JavaScript Algorithms and Data Structures
A GitHub repository with algorithms and data structures implemented in JavaScript with explanations.
CSS Background Patterns
A nice article with a lot of CSS patterns.
FadBlock
A fast, lightweight, and undetectable YouTube Ads Blocker for Chrome, Opera and Firefox.
json-server
A library to create a full fake REST API with zero coding in less than 30 seconds.
Trianglify.io
Create colorful low poly triangle patterns that can be used as wallpapers and website assets.
LDRS
A collection of free, open-source loading animations. Available as copy/paste HTML or drop-in web components.
CSS Ribbon Shapes
A CSS-only collection of Ribbon Shapes made with a single element.
Noun Project
A website to search for over 3 million icons, which can be used for free with attribution.
Pieces
A tool to save, search, share & reuse key developer resources in a AI-powered code snippets + screenshots hub.
Subtle Patterns
A huge list of more than 500 subtle background patterns and textures.
An Interactive Guide to CSS Grid
A guide on how CSS Grid works and how we can use it effectively.
image-dimensions
A JavaScript library to get the dimensions of an image.
CSS4 Is Coming
A great video with an explanation of why CSS4 is coming even though we were told that it will never happen.
Self-Hosting Web Apps On Ubuntu
A guide I recently wrote on how to set-up and host applications on an Ubuntu server.
Modern frontend testing
A blog post about frontend testing using Vitest, Storybook, and Playwright.
SVG Backgrounds
A collection of customizable SVG-based repeating patterns and backgrounds.
SignalDB
A reactive local JavaScript database with a MongoDB-like interface, first-class TypeScript support and signal-based reactivity.
UXWing
A lot of icons that are free for any personal and commercial use and available as .svg and .png.
fusion.ssg
A minimal framework for building static websites, with no initial project config required.
Minimalist Affordances: Making the right tradeoffs
An article where Lea Verou discusses the balance between usability and aesthetics in user interface design.
Card Components: A Dive into Best Practices
A short article about the best practices of card-based UI design.
NeoBrutalismCSS
A CSS framework that brings the aesthetics of NeoBrutalism to your web projects.
CSS Button Generator
A free online tool that allows you to create cross browser CSS button styles.
Just normal web things
A plea for us to get back to building websites that can do normal website things.
Big Heads
A tool to easily generate avatars for your projects by combining expressions, clothing, hair styles and colors.
HTML First
Principles to make building web software easier, faster and more inclusive.
EasyCaptchaJS
A lightweight and user-friendly jQuery/JS library that simplifies the integration of Google reCAPTCHA API into web pages.
React Datasheet Grid
An Airtable-like| React component to create beautiful spreadsheets.
Vector maps
An SVG world map, where you easily select and export countries and regions as SVG.
ExpandifyCSS
A lightweight, CSS-only library for creating expandable and collapsible sections with ease.
Milligram Plus
A minimalist CSS framework for a fast and clean starting point, designed for better performance and higher productivity.
Digital Accessibility Blogs and Newsletters
A personal list of valuable resources, including blogs and newsletters around accessibility.
FastBootstrap
A free Bootstrap theme with fully responsive, powerful CSS utilities, expertly crafted components with Atlassian Design.
Free Stock Video
A collection of free high-quality stock video footage without watermarks.
react-magic-motion
A React library that magically animates your components.
React Knob Headless
A React library for an unstyled & accessible knob primitive.
CSS Selectors/Combinators Classifier
A simple interactive tool to learn CSS selectors and combinators.
Home Assistant
Open source home automation that puts local control and privacy first.
The Negative Impact of Mobile-First Web Design on Desktop
An article on how mobile-first web designs cause significant usability issues when viewed on desktop.
Terms of Service; Didn't Read
A project to help fix that almost no one really reads the terms of service we agree to all the time.
Design books for non-designers
A collection of design books for non-designers, recommended by the Stripe design team.
verto.sh
A website that simplifies your entry into the open-source world by curating accessible projects.
ReactAgent
An experimental autonomous agent that uses the GPT-4 language model to generate and compose React components.
Free Animated Background Videos
A website with various free mp4 video backgrounds that loops perfectly.
Mirror a text area
An interesting series about a technique to mirror a text area element for various use cases.
OpenAPI DevTools
A Chrome extension that automatically generates OpenAPI specifications in real time for any app or website.
sweetalert2
A responsive, highly customizable and accessible replacement for JavaScripts popup boxes.
Ree.js
A framework for building web applications at scale. It is designed to be simple, flexible and powerful.
formbricks
An open-source solution to add surveys to your website.
tsParticles
A library to easily create highly customizable particles, confetti and fireworks as animated backgrounds.
Next.Nav
A VSCode extension for easily navigating and creating routes, folders, and files in Next.js applications.
tech-vault
A GitHub repository with many interview questions in tech.
A Mobile-Only Grid
An interesting article by Chris Coyier on how he achieved the mobile-only grid design of his website.
Spectrum.Art
A collection of website color schemes to find a color scheme for your site using the real examples.
Shadcn for Vue
Beautifully designed components built with Radix Vue and Tailwind CSS.
Homepage.gallery
A collection of successful and popular websites on various topics as an inspiration for your projects.
Creatosaurus
A collection of free icons, illustrations, clipart, vector SVG, and 3D assets for your designs.
Neobrutalism components
A collection of type-safe components written in React and Tailwind.
Abell
A low-level, framework agnostic, Vite powered static site generator for JavaScript developers.
Spacedrive
An open source cross-platform file explorer, powered by a virtual distributed filesystem written in Rust.
Sorted App
An app that uses open AI to intelligently organize your folders in one click.
Footer gallery
A curated gallery for website footer inspiration. Find the footers you need and sort by type and style.
Flintable
An ESLint rules playground that lets you play with ESLint fixable rules on your chosen language code.
Pure CSS low-poly
A fun demo of Fish, octopuses, starfish and more created with just CSS and HTML.
Dark Themed Web Design Inspiration
A curated list of the best hand-picked dark themed websites on the internet.
UX Product Design Hints
Bite-sized hints and cheat sheets about UX Product Design.
playhtml
An open-source library that adds interactive, collaborative html elements with a single attribute
Landings
A website to find the best landing pages for your design inspiration based on your preference.
Free Books for Developers
FreeCodeCamp just created freeCodeCamp Press, where they publish full-length books and handbooks for free.
JSONGenerator.io
A tool to generate, modify, and visualize JSON data with ease.
Wind Basics
Beautifully crafted Astro.js & Tailwind CSS Themes under Creative Commons license.
SeaGOAT
A local search tool that leverages vector embeddings to enable to search your codebase semantically.
Stirling PDF
A locally hosted web application that allows you to perform various operations on PDF files.
Shader Gradient
Create beautiful moving gradients on Framer, Figma and React.
UI Skeleton Gallery
A free customizable collection of SVG skeleton loader UI elements for design wireframes & mockups.
Free Vector Illustrations
Four sets of hand-drawn, free vector illustrations.
awesome-bun
A curated list of awesome things related to Bun.
Photo Blog with Admin Panel
A photo blog template with built-in admin panel, Vercel Postgres as CMS, and Vercel Blob for image storage.
react-plock
A 1kB masonry grid library for React.
Active Table
A framework agnostic table component for editable data experience.
localhost.run
A tool to connect web applications running on your computer to the internet instantly.
SVG Gradient Wave Generator
Generate SVG waves using gradients, randomness, and other parameters.
Buttons.cool
A collection of free HTML and CSS button code examples
hyperdx
An open source observability platform to resolve production issues using unifying session replays, logs, metrics, traces and errors.
Transparent Textures
A large collection of CSS patterns, which can be filtered and colorized.
Elysia
A fast and friendly bun web framework with end-to-end type safety and great developer experience.
Oh My Git!
An open source game about learning Git.
Linear easing generator
A website to generate linear() easings from JavaScript and SVG.
`make` as a Static Site Generator
A small article that explains how to create a SSG using Makefile.
Supermotion
A tool to create beautiful sharable videos from static & video assets.
Creating Dynamic README.md File
An interesting article about creating a dynamic Github profile using GitHub Actions.
Nue
A powerful React/Vue/Vite/Astro alternative with separation of concerns and universal hot reloading.
Code Diagram
An extension for Visual Studio Code to create code flow diagrams quickly from inside your VSCode tabs.
Bunny Fonts
A website to explore faster & GDPR friendly Fonts.
Maily
A free and open-source editor that makes it easy to craft beautiful emails. It comes with a set of pre-built components.
better-select
A minimal custom web component for a better select tag.
CSS Box Shadows Generator
A tool to create, edit, and generate multiple custom CSS box shadows with ease.
DevTools Tips
A collection of helpful cross-browser DevTools tips and tricks.
CSS Loaders
A collection of more than 500 CSS-only loading animations using a single element.
Pattern Library
A compiled list of beautiful patterns by different designers.
particles.js
A lightweight JavaScript library for creating particles.
DevToys
An offline Windows app that helps in daily tasks like formatting JSON, comparing text, testing RegExp.
Even More SVG Tricks
An article by Chris Coyier with a lot of cool SVG demos.
iconbundler
Convert and optimize SVG icons to React, Vue, and Svelte components.
react-tweet
A React library to embed tweets in your React application.
React Email
A collection of high-quality, unstyled components for creating beautiful emails.
Mastering SEO for Developers
A guide for developers looking to optimize their websites for search engines.
blog-cells
A script to add interactive code cells to any webpage, similar to Jupyter or ObservableHQ.
ProductSlide
A website that helps you to easily discover & promote products.
Learn Privacy
A course to help you build more privacy-preserving websites.
Vanilla JavaScript Reactivity
An article that teaches patterns for reactivity with modern vanilla JavaScript.
Lightning CSS
An extremely fast CSS parser, transformer, bundler, and minifier.
frolic-react
A React component library to build analytics dashboard.
transfer.zip
A web application that allows you to easily transfer files between two devices.
Solar Icon Set
A large icon library consisting of pictograms that are modern in style.
OS.js
An open-source JavaScript web desktop platform with a window manager, GUI toolkit and more
Open Graph Preview
A tool to test and validate your Open Graph meta tags.
Feather
A collection of simply beautiful open source icons with an emphasis on simplicity, consistency and readability.
Creating responsive data tables with CSS
An article explaining techniques for making tables accessible and easy to use on mobile devices.
MongoDB Cheat Sheet
A useful cheat sheet for everything around MongoDB.
Image Caption Generator
A free tool that uses AI to generate captions for any images.
ExpressoTS
A developer-friendly typeScript framework for server-side applications
SVG Doodle Icons
A free collection of fun SVG scribbles.
little-rat
A small chrome extension to monitor other extensions' network calls.
BatteryBoi
A replacement for the battery icon in the MacOS menu bar.
react-custom-hooks
A GitHub repository with 20+ hooks to unlock new levels of productivity in your React projects.
walk
A simple and minimalistic Terminal file manager to help with faster navigation in the filesystem.
Logo To Use
A website with free high-quality logos to help you easily find and using a fake logo.
Reader Mode
A Chrome reading extension and web app that removes clutter, ads and distractions from articles.
r3f-confetti-component
An easy to use Confetti component for React Three Fiber.
casual-markdown-cv
A minimal way to create resumes using markdown.
AI Image Upscaler
An AI tool to upscale your image to 2x or 4x without losing any textures or details.
Ikonate
An adaptable set of optimized, customizable, accessible SVG icons. Ready to be used as images, inline SVGs, or SVG sprites.
Firecamp
A multi-protocol API platform with team collaboration, API documentation, API collection and more.
Accessible Animated GIF Alternatives
An article that shows if GIF-like embeds support playback controls, alternative text, and reduced motion.
Terminal CSS
A modern and minimal CSS framework for terminal lovers.
react-sweet-state
A combination of Redux and React Context API to build a flexible, scalable and easy to use state management solution.
CSS Selectors: A Visual Guide & Reference
Visual guide to CSS selectors, including pseudo-classes, functional pseudo-classes, and pseudo-elements.
Video Thumbnail API
A free tool to get thumbnail images from any public video URL via API or browser.
VPS Benchmarks for Self-hosters
A useful article with a comparison of a lot of server providers.
Hono
A small, simple, and fast web framework for the Edges, that works on any JavaScript runtime.
The UX Cookbook
Handcrafted recipes to get you started with everything UX — user research, design, usability testing, and more.
SVG Drawing
A simple canvas to draw lines. It can be replayed or exported as SVG.
Randomness in CSS using trigonometry
An article explaining a new technique to generate random numbers with plain CSS.
Understanding React Server Components
A nice article by Vercel to learn the fundamentals of React Server Components.
I'm betting on HTML
A short article on some great HTML features.
The joy of simplicity in web development
A short article on keeping things simple.
animotion
A presentational framework for creating beautiful slides and visualizing ideas with Svelte.
OpenStatus
An open source alternative to your current monitoring service with a beautiful status page.
Linkwarden
A self-hostable, open-source collaborative bookmark manager to collect, organize and archive webpages.
CSS effects on images II
The second part of a series, where Temani Afif creates fancy effects using only the img element and CSS.
Coding Randomized Zelda Patterns
An interesting article about re-creating zelda patterns with SVG, CSS and JavaScript.
Web Components
An article where Dave Rupert asks why he is not using them Web Components if they are so great.˝
Avatartion
A tool to generate a personalized Notion-style avatar by choosing different facial features, clothing, and accessories.
HTML to JSX
An online tool to easily convert your HTML to JSX instantly.
GitHub merge queue
A blog post by GitHub introducing merge queue, the newest feature to improve team velocity.
Dev Radar
An AI-powered news aggregator that helps you stay up to date with software development.
Million.js
A virtual DOM replacement for React to make it up to 70% faster.
Mage Icons
An open-source icon system for deployment in web, iOS, Android, and desktop environments.
Interactive SVG Animations
A text-based mini-course on making whimsical, playful SVG animations.
How to search code using grep
A guide on how to use the command-line tool to search for patterns.
Simple Stupid Tools
A bunch of small, useful image, text, color and coding tools.
Plate
A toolkit that makes it easier for you to develop with Slate, a popular framework for building text editors.
Free Faces
A curated collection of typefaces that are available under a variety of free licences.
URL.canParse
A new JavaScript method, that will soon be available, to validate URLs.
AWS Docs GPT
An AI-powered search and chat for AWS Documentation.
Hotkeys Master
A small web app to practice and learn keyboard shortcuts for different applications.
JavaScript Collections Guide
An interesting article about the different types of collections in JavaScript.
Avatars
A collection of diverse avatar images, designed to add personality and character to your projects.
Firefox address bar tips
A short article on how you can use modifiers with the Firefox address bar to improve your results.
ThreadsMedia
A small web app to download videos and images from Threads.
The React Graph Gallery
A gallery that guides you through the basic concepts of data visualization with React and D3.js.
Advanced macOS Command-Line Tools
An article with a lot of interesting CLI commands for all of you using macOS.
CallToInspiration
A cool website with design inspiration for various website elements and sections.
Understanding SVG Paths
An awesome interactive guide to understanding SVG paths and path commands.
chatgpt.js
A JavaScript library that allows for easy interaction with the ChatGPT DOM.
that-is-impossible
An intro to Impossible.js, an Object Oriented JavaScript library for building cross-platform terminal apps.
Your Lucky CSS Pattern
Get a nice random background from a collection of more than 100 CSS patterns.
DevPod
An open-source alternative to Codespaces to spin up dev environments in any infrastructure.
Pines
A library of animations, sliders, tooltips, accordions, modals, and more for Alpine and Tailwind UI.
Barcode.so
An AI powered generator that creates beautiful QR Codes based on different styles.
UI Skeleton Gallery
A free customizable collection of SVG skeleton loader UI elements for design wireframes & mockups.
OpenResume
A free, open-source, and powerful resume builder to create a professional resumes easily.
Blur Vignette effect in CSS
A nice article that explains how to create a blur vignette effect in CSS.
Capacitor
An open source runtime for building native apps for iOS, Android, and PWAs with JavaScript, HTML, and CSS.
Color & Contrast
An interactive guide for learning about the theory, science, and perception of color and contrast.
Native JSON Output From GPT-4
A nice blog post that explains how to generate structured data, like JSONs with the new GPT-4 API.
SVG versus Canvas
An article that helps you choose the right technology for your web application.
Vercel AI SDK
An interoperable, edge-ready software development kit for AI apps built with React and Svelte.
Cloudflare Email
A simple proxy server that can be used for sending free transactional emails through Cloudflare workers.
Next.js 13 App Router
A visual guide to learn about new App Router in Next.js 13.
lax.js
A simple & lightweight vanilla JavaScript library to create smooth & beautiful animations when you scroll.
Template String Converter
A Visual Studio Code extension converts a string to a template string when "${" is typed.
Metorik
A tool that will help you track and analyze your API usage by dispatching events in your server code
Modern CSS in Real Life
A blog version of a presentation Chris Coyier did about real life usage of CSS.
Reken
A library for fast reactive HTML compliant web pages without virtual DOM or the need for build tools.
An introduction to @scope in CSS
An interesting article about scoped styles and the upcoming @scope.
Lemmy
A self-hosted, social link aggregation and discussion forum in the Fediverse as an alternative to Reddit.
Spruce CSS
A low-level, lightweight and modern CSS design system, authoring tool built on Sass.
React 18 Snippets
A VS Code extension with React 18 snippets for functional components.
The good line-height
An online tool that calculates the exact line-height number so it always fits the baseline grid.
React Hooks Simplified
A free course that covers every single React hook and 30 unique custom hooks.
Gradient Along SVG Path with GSAP
A nice article on how to create and animate a gradient SVG with GSAP.
HN Resume to Jobs
A tool that finds jobs from Hacker News 'Who's Hiring' posts most relevant to your resume.
The Quest to Replace Passwords
An interactive article evaluating the real-world use of different web authentication schemes.
Ultimate Web Development Resources
A nice collection on GitHub with a lot of web development resources.
Text Cleaner
A simple online tool for all-in-one text cleaning and text formatting.
QR code designer
A QR design web app to create QR codes that have arbitrary designs in the middle section.
TableConvert
A converter to convert Excel or other spreadsheets into Markdown tables.
Built At Lightspeed
A directory of 4000+ templates & UI kits for the modern stack.
Plaiceholder
A JavaScript library to create beautiful image placeholders from pure CSS to SVG.
Introducing the popover API
An article introducing a new set of declarative HTML APIs for building popovers.
Graph Slider
An interesting article on how to create a SVG graph slider.
Plane
An open-source JIRA alternative, that helps you track your issues, epics, and product roadmaps.
Scroll-driven Animations
A bunch of demos and tools to show off Scroll-driven Animations.
uploadthing
An open source library for easy file uploads.
Strawberry
A small frontend framework that gives you reactivity and composability with zero-dependencies and without a build step.
SpaceBadgers
A website to create fast and clean SVG badges for your projects.
QuickRef.ME
A website with various cheatsheets and quick references contributed by open source.
VanJS
A lightweight, zero-dependency, and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM.
publint
A tool to lint npm packages for packaging errors, ensuring maximum compatibility across environments.
Aimless.js
A tiny and unopinionated JavaScript library that helps you with handling randomness.
React Buddy
An advanced plugin for IntelliJ IDEs with visual tools and code assistance.
ReactPlay
An open-source platform to learn, create and share ReactJS projects with the developer community.
SnyPy
An open-source code snippet manager that helps you to organize and to share your snippets.
Democoding
A free collection of HTML and CSS animation code examples.
Degreeless Design
An opinionated curated collection of UX and product design links, books, articles, and more.
Glint
A powerful graphical user interface application, for interacting with git version control.
How to measure page loading time
An interesting article on how to use the Performance API to measure page loading time.
UI Goodies
A great curated list of digital design resources from around the Web.
Simpler cookie notices
An article on how to use the native dialog element and the Cookie Store API for a simple cookie notice.
Teletrace
An open-source troubleshooting tool based on traces, designed for cloud-native distributed applications.
jsonformer
A Bulletproof Way to Generate Structured JSON from Language Models.
A (Mostly) Complete Guide to React Rendering Behavior
An article on how React rendering behaves, and how use of Context and React-Redux affect rendering.
Start UI
An opinionated frontend starter repository using NextJS, Chakra UI, TanStack Query and Formiz.
Blur camera background
A blog post explaining the popular function in modern video conferencing applications.
Tailwind Animations
A repository that contains different animations implemented using tailwind CSS.
Neutralinojs
A framework to build lightweight cross-platform desktop apps with JavaScript, HTML, and CSS.
react-voice-recorder-player
A React component that lets users record and playback their voice directly in the browser.
List.js
A vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists and tables.
Stretch 15
A free 15 min daily stretch routine to help you avoid aches and pains.
Featurevisor
A tool to manage feature flags and remote configuration declaratively from your git workflow.
Soft Serve
A self-hostable Git server for the command line
The “const” Deception
An article that explains the difference between assignment and mutation in JavaScript.
Pattern Club
A curated gallery of patterns, textures and visuals by designers & illustrators.
txt-shuffle
A JavaScript library to create customisable text shuffling animations.
AutoFocusDOF
An autofocus DOF component for React Three Fiber.
Yet Another React Lightbox
A modern React lightbox component that is performant, easy to use, customizable and extendable.
Gut
A user-friendly Git CLI for Windows, Mac, and GNU/Linux with intuitive commands and streamlined workflows.
Gradient Style
A small tool to generate wide gamut color 4 compliant CSS gradients.
Recreating the title effect from creativesouth.com
An interesting article on how to create a mouse-aware “3D” effect on text.
WebGPU Fundamentals
A very useful set of articles to help learn WebGPU.
Favpie
A CLI to generate favicons in all necessary sizes, creating a webmanifest, and providing a piece of CSS for easy integration.
README Template
An article on how to create an automatically generated table of contents in your README.
Midjourney AI Guide
A guide on getting started with image generation using Midjourney.
react-timezone-select
An extremely usable and dynamic React timezone selector .
refine.new
An open source, React-based web application framework for rapid development.
SVG Doodles
A free collection of 208 SVG Doodles to spice up your online and offline designs.
Tech Icons
A list to easily download and copy-paste tech icons in SVG and PNG format for your projects.
Dynamic GitHub Profile
An article on how to use GitHub Actions to make your GitHub profile dynamic.
CSS Masking
An article that explains what CSS masking is, how it works, and a few use cases and examples for it.
Supabase Logs
A blog post about the new open source logging server by Supabase.
Plotteus
An open-source JavaScript data visualization library designed to help you tell better stories.
A small JavaScript pattern
A short article were Kilian Valkhof shares a JavaScript pattern that he enjoy using.
Fighting inter-component HTML bloat
A nice article on how to prevent bloated HTML in the space between components.
CodeReview BOT
A code review bot powered by ChatGPT.
The Ultimate Guide to Image Optimisation
An article that teaches how to optimize imagery without sacrificing its quality.
Hooks You Probably Don't Need
An interesting article on some known and lesser-known React Hooks and how to use them properly.
Make Bookmarklets
A bookmarklet generator which is clean and easy to use. Create and test bookmarklets in your browser.
Coursemate
A platform to connect with other self-learners and learn together.
ColorsWall
A simple tool to get color inspiration.
Mirrorful
An open-source design system framework to generate colors and other design tokens for your project.
6 CSS snippets
An article with 6 CSS snippets every front-end developer should know in 2023.
ThumbHash
A very compact representation of an image placeholder. It's similar to BlurHash but more detailed.
Trigonometric functions in CSS
An article on how to write to write mathematical expressions to calculate the sine, cosine, tangent, and more in CSS.
Circular Text with CSS
An interesting article by Jhey Tompkins on how to lay out some text in a circle with pure CSS.
vanilla-extract
A library to write type‑safe, locally scoped classes, variables and theme stylesheets in TypeScript.
Float UI
A collection of open-source, responsive UI components and website templates with modern design.
commandlinefu.com
A repository for the most elegant and useful UNIX commands. A comprehensive resource for working from the command-line.
ChatGPT Tailwind CSS components
A tool to generate and customize Tailwind CSS templates and components to get you started quickly.
AI Component Generator
A tool to create and preview React + Tailwind CSS components using AI.
IndieProjects
A platform where designers and developers can showcase their projects and get inspiration from fellow devs.
Next JS Themes
A curated list with open-source Next.js Themes of one-page templates, blog templates, and admin dashboards.
Introducing react.dev
Last week the React team launch react.dev, the new home for React and its documentation.
Screen
A fast way to create screenshots of your app for product pages on Apple App Store, Google Play Store, etc.
Modern Font Stacks
A sorted list of fonts that are available for every modern OS.
SuperReminder
A browser extension that lets you set up set up smart reminders for websites to not forget about them.
flatnotes
A self-hosted, database-less note taking web app that utilises a flat folder of markdown files for storage.
Copy-Paste SVG Shapes
A Collection of 120+ basic SVG shape. Click on a shape to copy its SVG code to your clipboard.
VS Code Snippets
An article on how to create VS Code snippets to speed up your workflow.
JavaScript One-Liners
An article with 10 essential one liners that you can use in virtually every JavaScript project you create.
Linkshare
A GitHub pages layout to show your links and make it easy to copy them for social sharing.
Common Beginner Mistakes with React
Another great article by Josh Comeau on the 9 most common gotchas in React development.
React Builder
A great tool to create beautiful React templates by using a visual editor.
API RANK
Security and reliability rankings of all the public REST/OpenAPI endpoints on the internet.
Resource
A crowdsourced list of best resources, tools, and products for developers, designers, and marketers.
DeepNotes
An open source, end-to-end encrypted visual note-taking tool with deep page navigation.
Turbowatch
A fast file change detector and task orchestrator for Node.js as alternative to Nodemon.
Windstatic
A set of 161 elements & layouts made with Tailwind CSS and Alpine.js
UI Guideline
A guide to standardize the design/code of the UI Components based on the 39 most popular Reference Systems.
Pure CSS Loader Generator
A code generator that helps you to create simple CSS spinners.
ImageHover
An open-source pure CSS hover effect library for images.
WebContainers
A browser-based runtime from StackBlitz to build instant, interactive coding experiences.
Iconhunt
A search engine with 150.000+ free, open sources icons. You can download them with one click.
Use Maps More and Objects Less
An interesting article on the benefits of Maps over Objects in JavaScript.
Better CSS transitions
An article with ten tips to improve your CSS transitions and animations.
PrimeReact
A rich set of open source UI Components for React.
Scribble Diffusion
A website to easily turn your sketch into a refined image using AI.
Comparing Static Site Hosts
An article that compares performance, build times and pricing of the most famous static site hosts.
Modern SPAs without bundlers, CDNs, or NodeJS
An article where Kofi Gumbs describes how he sets up a simple SPA.
Bun
A fast JavaScript runtime with a native bundler, transpiler, test runner, and npm-compatible package manager.
Try out CSS Nesting today
Safari and Chrome have implemented CSS nesting. This article describes how to try it.
Project Based Learning
A list of programming tutorials to learn how to build an application from scratch in various languages.
Poste.io
A full featured self-hostable email server including anti-spam methods, webmail and easy administration.
StatiCrypt
A script to password protect the content of a public static HTML file, without any back-end.
Openverse
A website to search over 600 million free and openly licensed images, photos, audio, and other media types.
Screenstab
A website that turn screenshots into 3d images by adding blur and angle.
clamp() Calculator
A handy little tool for calculating viewport-based clamped values.
ColorSpace
A tool to find the perfect matching color scheme, palettes or gradients for your next project.
Learn Images
An in-depth course on images for the web for beginner and advanced web developers alike.
aitools.fyi
A website that curates the best AI tools to help you build your next project faster.
Bite-Sized Accessibility
Learn something new about accessibility with short and solid posts.
zrok
An open source sharing solution that provides Private or Public tunneling of applications from anywhere.
PhotoPrism
A self-hostable, privacy-friendly Google Photos alternative that uses AI to categorise the photos.
Add to Calendar Button
A JavaScript Web Component, which lets you reliably create buttons, where people can add events to their calendars.
Startup Next.js Template
A free, open-source, and premium-quality startup website template for Next.js.
gitmoji
Gitmoji is an emoji guide for GitHub commit messages, which aims to be a standarization cheatsheet.
Visual design rules
A nice article with some design rules you can safely follow every time.
Yopta Editor
An open source notion-like editor build on top of the Slate JS framework.
Atlas Icons
An open-source icons library, available in variable stroke SVG format, web font, Figma, React, Vue and Flutter.
Sponsor Ninja
An open-source project I've created last week to easily collect sponsorships for your projects.
Quick.js
A lightweight JavaScript library aims to help users to stop writing long, repetitive code.
Better Folding
A VS Code extension that provides many commonly requested folding-related features.
shadcn/ui
Accessible and customizable open-source Next.js components that you can copy and paste into your apps.
Pico.css
A minimal CSS Framework with elegant styles for all native HTML elements and dark mode automatically enabled.
CURL Converter
A tool to transpile curl commands into JavaScript and a lot of other languages.
Fallback Font Generator
A tool to reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks.
Rete.js
A modular framework for visual programming, which allows you to create a node-based editor directly in the browser.
There's An AI For That
A comprehensive database of AIs available to help you find the best AI for your task.
Logggos
A website to discover inspiring logos sorted by industries, themes, typography style, branding color and more.
Git-Heat-Map
A tool to highlight the files that were changed the most in a repository.
Gradient Picker
A simple color picker that allows you to freely create your own gradient and get the CSS code.
Gluon
A new framework for creating desktop apps from websites, using system installed browsers and NodeJS.
waitlist.rsvp
A website to create a waitlist page to collect emails with one click.
Legitify
A tool to detect and remediate misconfigurations, security and compliance issues across all your GitHub and GitLab assets.
ImaginAIry
A python CLI tool to generate stable diffusion images and edit them afterwards.
Own Your Data
A website that get organizations to delete your account or provide a copy of your personal information.
Ddosify
A high-performance load testing tool, written in Golang for distributed and Geo-targeted load testing
2022 JavaScript Rising Stars
An overview of the trending projects in the JavaScript eco-system over the last 12 months.
Alpine.js
A minimal tool for composing behavior directly in your markup, like jQuery for the modern web.
Lorem Faces
AI generated people faces that you can use in your works for free.
val town
A website for writing and running scripts in the browser, including versioning, an API, scheduling and more.
react-scroll-spinner
A React library to make HTML elements spin in response to scrolling.
pageres-cli
A CLI for capturing screenshots of websites in various resolutions.
Radix
Unstyled, accessible components for building high‑quality design systems and web apps in React.
SSSVG
A visual & interactive SVG reference to quickly look up how to define SVG shapes, transforms, masks, patterns, gradients, text and more.
analyzemyrepo
A free tool to learn about adoption, contributions, diversity and governance of your GitHub repository.
companies.tools '22 recap
A recap on how and which apps and tools tech teams all over the world used in 2022.
interact.js
A JavaScript library for drag and drop, resizing, and multi-touch gestures.
3D in CSS
An interesting article that explains how to use the CSS 3D properties like perspective, translate or rotate3d.
Sailboat UI
A modern UI component library for Tailwind CSS with 150+ open source components.
Twisted Colorful Spheres with Three.js
A tutorial that explains how to deform and color spheres to create an interesting animation with Three.js.
Green Wall
A small tool to review the contributions you have made on GitHub over the years.
HTML data scraper
An easy and free tool to extract data from HTML to quickly gather the information you need.
CSS Halftone Patterns
An interesting article on how to create cool halftone patterns with CSS.
formify
An open source application that lets you create, manage and embed forms on any site with No Code.
Boringer Avatars
A tiny JS library that generates custom, SVG-based avatars from any username and color palette.
UpDownQuest
A fun game where you have to find as many words as possible that match a pattern.
Things CSS Could Still Use Heading Into 2023
A nice article by Chris Coyier on ideas for the future of CSS.
CSS Subgrid
A nice article that explains what new feature of grid can do.
Compress An Image Before Upload
A quick tutorial that explains how to compress images selected with a file input element using JavaScript.
Gauss
A Stable Diffusion app for macOS built with SwiftUI and Apple's ml-stable-diffusion CoreML models.
Heledron File Converter
A super simple file converter that converts between video and image formats. All conversions are done locally in your browser.
CSS Plasma Background Generator
A simple tool written in vanilla Javascript to generate a plasma background for your website.
AngryTools
A website with a lot of free online tools for web development.
UI Content
A website to find professional placeholder text as alternative to Lorem Ipsum.
microfeed
A lightweight cms self-hosted on cloudflare, for podcasts, blogs, photos, videos, documents, and curated urls.
Social Sharing Links
A useful GitHub Gist by Marko Denic including the URL structures to share links on various social media websites.
React Snap Carousel
A responsive carousel for React that leaves the DOM in charge of scrolling.
React Wrap Balancer
A simple React component that makes titles more readable.
Brandables
A website that automatically fetches available domains with a length of 5 characters.
URL Animations
A fun project that creates ascii art animations through your browsers URL field.
Portable Secret
A little hack that allows you to send encrypted messages & files over insecure channels and to store sensitive information.
Places To Post Your Startup
Compiled list of links of places to post your startup to get beta users.
Emoji Pattern Generator
A generator to create gorgeous emoji patterns in one click.
Theme Toggles
A collection of easy to use, animated toggles, designed for switching between light and dark modes.
User Interface Design: Rules of Thumb
Five rules of thumb you can apply to common UI design challenges when building web applications.
wweb.dev weekly interview
An interview I did earlier this week on how and why I launched this newsletter.
tech-stack.tools
A curated list of creative tools for developers, designers, and creators.
melonJS
An open source HTML5 game engine that empowers developers and designers to focus on content.
GitHubUnwrapped
A fun tool to get a personalized video of your GitHub activity in 2022.
Unovis
A modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript.
Open Source Alternative To
A list of 400+ popular open source alternatives to your proprietary SaaS.
Product Hunt Alternatives
A nice article by Musharof with websites to launch your next product, startup, or tool.
PlaceMyApp
A simple tool to create customizable phone mockups of your app screenshots.
MetalliCSS
A tiny, dependency-free JavaScript library to create metallic UI elements.
Console Ninja
A VS Code extension to show the console log output right next to your code.
GitHub Skills
Interactive courses designed for beginners and experts to learn how to use GitHub.
scroll-into-view
Element.scrollIntoView ponyfills for things like "if-needed" and "smooth".
Snow effect
A small JavaScript library to embed a snow effect on your website.
DevTunes FM
A cool online radio for coders with various genre stations.
Classless CSS
A nice list on GitHub of classless CSS themes and frameworks.
Does WWW still belong in URLs
An interesting read by Pieter De Decker about the history and the issues of URLs with and without WWW.
pppsychedelic
A background generator that shows a fluid motion, which you then can stop and export as an image.
FreeTube
A YouTube client for Windows, Mac, and Linux built around using YouTube more privately.
utterances
A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!
Variants Tool
A tool to make unlimited variations of your image using color palettes in one click.
Eleven
A CLI to create code sandboxes with automatic HTTPS and long running processes in your cloud provider account.
aaabstract
A tool to generate free high resolution abstract wavy backgrounds and textures.
SmartyNames.com
An AI tool that helps you search available domain names by describing your company or project.
Accessible color palette generator
A tool to discover color combinations that follow the Web Content Accessibility Guidelines.
MrScraper
A hassle-free web scraper to process information from websites, easily and without getting blocked.
Fancy frames with CSS
An article that gives some alternatives to the default rectangular boxes by using fancy CSS borders.
An Interactive Guide to Flexbox
A great guide about flexbox with a lot of interactive examples.
superplate
A well-structured production-ready frontend boilerplate for React.js, Next.js, and refine.
JSON Hero
JSON Hero makes reading and understand JSON files easy by giving you a clean and beautiful UI packed with extra features.
hhholographic
A tool to generate custom holographic & iridescent backgrounds and textures.
Dev Resources
A collection of resources for developers presented in curated lists.
more.graphics
A bunch of cool generator tools with a choice of ready-made works and with advanced customization possibilities.
URL to Screenshot
A tool to take high-quality screenshots of any website by simply providing the URL with custom size support.
Git Notes
An article about a Git feature that enable you to amend new information about old commits in a special namespace.
Remix Page Blocks
A collection of functional blocks like Header, Footer, Hero, Banner, Features, Testimonials, and more.
CSS Timeline
An open-source timeline for the CSS evolution and history of tooling, libraries and frameworks.
poxi
A fun website builder where you can drag-n-drop and rotate anything, change themes and place stickers.
Sapling
A scalable, user-friendly source control system to make development easier by simplifying common source control workflows.
TourGuide JS
A Javascript library written for creating user tours and on-boarding steps for your apps.
Copy & Paste CSS
A website to find the inspiration for HTML elements and copy the CSS.
GitHub Blocks
A preview of GitHub blocks with which you can extend your codebase with custom, interactive blocks.
Meta Tags Generator
A tool to view, edit, optimize, and generate meta tags for google search and social media shares.
CSS Pattern
A nice collection of background patterns made with CSS gradients.
Edit Video
A great tool for free online video editing in your browser.
JSON Crack
A website to seamlessly visualize your JSON data instantly into graphs.
Starter Tab
A customizable website to replace your 'New Tab' homepage.
Tailwind Sites
A website with free Tailwind CSS site templates for your next project.
Online Image Compressor
A browser-based image compressor, that makes it super easy to compress your JPG or PNG images at a fast speed.
nfty.sh
An open-source notification service to send push notifications to your phone or desktop via PUT/POST.
TanStack Router
A typesafe router with search-param APIs and built-in caching, built for JS/TS, React, Preact, Solid, Vue and Svelte.
Boarding
A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page.
missing.css
A CSS library to build common components using plain, semantic HTML.
Review Lens
A tool to draw, annotate and comment directly on-top of your web app or website's User Interface.
Generative OG images
A nice article by Matthew Ström on how to create generative art Open Graph preview images.
playlist.lol
A Spotify playlist that gets updated automatically every day with one of the best 1001 Albums in history.
Supersonic Plugin
A customizable 3kb plugin for scroll based animation which animates 1000 elements without lags.
Futuristic CSS
An article takes a look at some futuristic CSS features that might one day make their way to the browser.
The Component Gallery
A repository of interface components based on examples from the world of design systems.
Charts.css
A modern CSS framework that uses CSS utility classes to style HTML elements as charts.
Projectbook
Project ideas for people looking to learn a given language.
Illustration.lol
A curated collection of editorial illustrations and images.
Email Template Builder
A free drag n drop email HTML template builder to create responsive emails.
FormBold
Ready to use free HTML form templates that you can copy-paste and start using immediately.
WebC
A framework-independent standalone HTML serializer for generating markup for Web Components.
Blaze Slider
A high-performance JavaScript UI library for creating sliders.
Launchini
A tool that sends you an email whenever anyone you follow on Twitter launch something on Product Hunt.
CSS Shapes
A list of CSS shapes like triangles, arrows, diamonds, tooltips, bubbles, ready to use, click to copy.
Loading Disco
An alternative animation to the loading spinner.
Magic Eraser
A tool to easily remove unwanted things from images.
Can I DevTools?
A website that curates commands browser devtools for different browsers.
Randoma11y
A cool website that generates and shows random, accessible color combinations.
Animate CSS Grid
A library to seamlessly animate all CSS grid properties.
tailwindcss-highlights
A plugin for Tailwind CSS to add highlights to your text.
Prefixed API Key
A module for generating a prefixed API key for better key handling.
miniparallax
A lightweight & powerful parallax script for your next project.
Templating in HTML
A nice post about the template HTML element and how to use it.
resource.fyi
Handpicked free tools, resources and products for developers and designers.
Wavy Shapes
An good in-depth article describing how to create wavy shapes with CSS.
kill-sticky
A bookmarklet to remove sticky elements and restore scrolling to web pages.
Engineering assessments
A library of effective take-home hiring assessments.
Dear Console…
A repository of little scripts you can use in the browser console to achieve the described task.
mediaquery.style
A website that lists popular media queries with a copy button for code the snippet you need.
Learn Accessibility
A new course written by Carie Fisher for the essentials of building accessible websites.
Enhance
A web standards-based HTML framework to build lightweight and flexible web applications.
Scraft
AI-powered writing tool that helps you craft better arguments by asking questions like Socrates.
58 bytes of CSS
A simple CSS snippet to make websites it look good on most displays.
Landing Love
A showcase of the best animation websites.
Practical Deep Learning
A free course designed for people with coding experience, who want to learn about deep- and machine learning.
No-Signup Tools
A curated collection of web-based products that don't require an account or registration.
Internxt Send
A website, that allows you to encrypt and share files fast.
Microstartup alternatives
A list of small internet startups built by solo developers as alternatives to big tech.
lightGallery
A lightweight, modular, JavaScript image and video lightbox gallery plugin. Available for React.js, Vue.js, Angular, and TypeScript.
Lapa Ninja
A gallery featuring the best 5245+ landing page examples.
Diffusion Bee
An application to run Stable Diffusion locally on your M1 Mac.
Mockoops
Create stunning product mockups and simply drag-drop to present your screen-recordings beautifully.
Emoji Button
A simple vanilla JavaScript emoji picker that supports all Unicode emojis.
Dynamic Open Graph Images
A nice article on how to dynamically create open graph images with Cloudinary and Next.js.
GitHub Readme Stats
A tool to automatically generate dynamic statistics for your GitHub readmes.
MiroTalk P2P
A simple and secure WebRTC real-time video conferences tool.
Tao of Node
A list with design, architecture & best practices for Node.js.
React Arborist
A full-featured tree component for React.
jless
A command-line JSON viewer designed for reading, exploring, and searching through JSON data.
Addy Codes Toolkit
A collection hand-picked tools & resources for web designers & developers.
Turbulent Buttons
A Codepen button demo with an interesting flow.
Preview.js
An extension for VS Code and IntelliJ/WebStorm that lets you preview Vue and React components instantly.
nextjs-components
A collection of React components, transcribed from Vercel.
react-typical
A React typing animation in ~400 bytes of JavaScript.
CSS Checker
A CLI that checks your CSS styles for duplications and find the diff among CSS classes.
Next.js Blog Template
A simple blog template, which has a clean design and provides a lot of flexibility.
7 Fresh Links on Performance
A handful of good links to articles about performance on CSS-Tricks.
MarkdownSite
A tool to create a website from a git repository in one click.
Build a business, not an audience
A good read by Jakob Greenfeld about the pitfall of procrastinating by focusing only on building an audience.
pppalette
A great color palette generator that creates various different palettes based on a primary color.
CSS Generators
Two CSS Generators where you can add your setting and get your CSS code.
React Awesome Shapes
A library to easily insert shapes into your react site.
SingleFile
A Web Extension and CLI tool to save a copy of an entire web page in a single HTML file.
Almond.CSS
A collection of class-less CSS styles to make simple websites look better.
DevDocs
A website that combines multiple API documentations in a fast, organized, and searchable interface.
One Tooling
A collection of useful tools for developers.
Gooey Warping SVG Numbers
An article on how the morphing number CodePen from Fabio Ottaviani works.
SuperShields
Supercharged SVG status badges/shields for your Github repository.
shell.how
A website that explains how your shell command works by using open-source data from Fig.
free-programming-books
A huge list of free programming books in various languages.
Hoppscotch
An open-source alternative for Postman.
React Shimmer
A Suspense-like img component that (optionally) simulates a shimmer effect while loading.
awesome-tunneling
List of ngrok alternatives and other ngrok-like tunneling software and services.
privacy-redirect
A web extension that redirects requests to Twitter, YouTube, and more to privacy friendly alternatives.
RegEx Library
A curated list of useful regular expressions for different programming languages.
Streamline Icons
A big collection of icons with different styles and themes.
Monorepo Explained
Everything you need to know about monorepos, and the tools to build them.
tinydomain
A tool to find easy to remember domains with 8 characters or less.
Creating Generative SVG Grids
A nice article by Alex Trost on generative grids.
Image to ASCII Art
A fun tool to turn any image int ASCII Art.
Markdown diagrams
An article by GitHub on how to include diagrams in your markdown files with Mermaid.
DevToysMac
A useful app for various tasks like encoding, decoding, and formatting code.
HTML Dialog
An article on how to replace JavaScript dialogs with the new HTML dialog element.
Files
A Single-file PHP app that can be dropped into any folder, instantly creating a gallery of files and folders.
Oldbook.css
A cool CSS library that applies a clean, old-school parchment style.
Device Frames
A tool to create mockups by using a 3D device .
Unique Buttons Animation
A nice codepen with a bunch of creative button hover animations.
Scale by Flexiple
A website with free multi-color illustration that gets updated every day.
Google Webfonts Helper
A website that helps you to easily self-host Google Fonts.
LetMeScroll
A JavaScript library to help handling scroll events.
Favicon Generator
A generator to make your favicons look great everywhere.
Poly Pizza
A cool website with over 7000 free low poly models.
Cool Backgrounds
A beautifully curated selection of cool, customizable backgrounds.
Make Free Stuff
An article by Max Böck on creating free stuff instead of trying to monetize everything.
TypeScript Cheat Sheets
Downloadable syntax reference pages for different parts of everyday TypeScript code.
There’s No Such Thing as Clean Code
A nice article that argues that there is no universal "clean" code.
What's New Since CSS3
A summary of CSS features that have been added since 2015.
edit.photo
A free, privacy friendly photo editor in your browser.
Compress Images Online
A privacy first and fast way to compress images online.
Git History
A tool to quickly browse the history of files in any git repo.
Form Validation
An article on form validation using JavaScript's constraint validation API.
Polka Dot Generator
Generate polka dot patterns using CSS custom variables for background images.
Godly
Godly is a curation of web design inspiration, with e-commerce websites, portfolio websites, and animation websites.
Bladecoder Adventure Engine
A Classic point and click adventure game engine and editor.
Make Beautiful Gradients
An article on how to prevent gradients to be gray and washed-out in the middle.
Pixel Distortion Effect with Three.js
An interactive WebGL pixel distortion effect with lots of possibilities.
Simple.css
A classless CSS framework that makes semantic HTML look good.
Announcing Parcel CSS
A new CSS parser, compiler, and minifier written in Rust.
Non Boring Gradients
A web tool to make gradients that looks good.
Slowfil.es
A cool project, that serves files with a delay for testing.
CSS Spinner loader
A small codepen with four simple CSS spinner loaders.
Design Gradients
A free platform of 48 linear gradients curated by designers.
Vanilla List
A big collection of vanilla JavaScript plugins to keep your website lightweight.
My first impressions of web3
A nice article on the problems with web3 by Signal founder Moxie Marlinspike.
Tech blogs
A big list of Awesome Tech Blogs, where you can also add yourself.
Dropdown Arrows
A cool demo of dropdown arrow animations by Mikael Ainalem.
Wrapping text
A nice article by Jay Freestone on how to wrap text inside an SVG using CSS.
Dura
A background process that watches your Git repositories and commits so you don't lose your work.
The Thinner Book: Atomic Habits
A nice summary of the book, "Atomic Habits" for everyone who wants to form new habits or get rid of bad ones.
You Should Keep a Journal
An article on reasons to keep a journal by Chris Saylor.
alternative-front-ends
Overview of alternative open source front-ends for popular internet platforms (e.g. YouTube, Twitter, etc.)
Deploy a Gmail-like email server
An article by Andy Callaghan on how to run your own email infrastructure.
ColorHuddle
A collection of color palettes on which you can easily copy the hex codes.
BlackMagic
A browser plugin to enhance your Twitter experience.
Alternate Column Scroll Animation
A grid layout with columns that scroll in opposite directions and a content preview animation.
Coding Fonts
A collection of coding fonts with infos about designers, character charts, features, and more.
How to use React Context effectively
An interesting article on React Context by Kent C. Dodds.
Bangle.io
A powerful note taking web app that works on top of your locally saved Markdown files.
Intab Resources
A curated list of 84+ web development resources.
GitHub repositories
A nice Twitter thread with GitHub repositories to improve your programming skills.
Icon Shelf
An icon manager for developers to have all icons in one place, easily copyable as code.
Glitch Image Generator
A cool generator for creating glitchy images.
CSS Reference
A website to look up CSS properties and see them in a visualized way.
Flowbite
An open-source library of over 400+ web components and interactive elements built with Tailwind CSS.
Myths about useEffect
Some common mistakes people make with useEffect and how to avoid them.
Beginner’s guide to Svelte
An article to learn svelte from basics to state management and animation.
The web starts on page four
An interesting article on the current state of the web.
Doodle CSS
A simple hand drawn HTML/CSS theme.
Don’t start with microservices
An interesting article on microservices and monoliths by Arnold Galovics.
Straw Page
A fun drag and drop website builder that works on mobile.
Glitch effect
A cool glitch effect on text in pure CSS.
Guess CSS!
A fun CSS quiz to test your knowledge.
SVG Quick Editor
A nice online tool to change colors and to remove paths of SVGs.
The 2021 Web Almanac
HTTP Archive’s annual state of the web report.
Floating UI
A library to position all types of floating elements, like tooltips, popovers, dropdowns and more.
Web Browser Engineering
A book that explains how to build a basic but complete web browser.
Defensive CSS
A list of defensive CSS techniques to avoid potential future issues.
SuperSEO Tips
SEO Tips that will help you rank higher and drive more organic traffic.
uBlacklist
A browser extension prevents blacklisted sites from appearing in Google search results.
Lovely Little Websites
A nice showcase of small websites by Cosima Mielke on Smashing Magazine.
Understanding re-rendering and memoization in React
A nice article by Kolby Sisk to increase Reacts performance.
Modern for Wikipedia
A cool browser plugin to enable a redesigned user interface for Wikipedia.
Open Props
CSS custom properties to help accelerate adaptive and consistent design.
Nice Modal
A zero dependency utility to manage modals in a natural way for React.
PickBetterPack
Discover similar packages from your package.json dependencies.
Free Userpics Pack
A collection of a hundred free userpics for your design projects.
Using Emojis in HTML, CSS, and JavaScript
An article on how to use emojis in your web documents.
EmailTimer
A free countdown timer for your emails.
42 things I learned from building a production database
A nice article by Mahesh Balakrishnan.
Image Optimizer
A free and open source tool for optimizing images and vector graphics.
a11y myths
A small website debunking common accessibility myths.
Icons in Pure CSS
An article on how to use any icons on-demand in purely CSS.
React Canvas Draw
A simple yet powerful canvas-drawing component for React
Shadow Palette Generator
A cool generator to create a set of lush, realistic CSS shadows.
Browserflow
A tool to automate repetitive tasks on any website. No coding required.
Mesh Gradients
A collection of 100 hand-curated mesh gradients.
1-Line Layouts
10 Modern CSS layout and sizing techniques in a single-line of styling.
RegEx Learn
An interactive tool to learn regex step by step.
react-burger-menu
An off-canvas sidebar React component with a collection of effects and styles.
React Location
A library for powerful, enterprise-grade routing for React applications.
Web Performance Metrics Cheatsheet
A nice cheat sheet for performance metrics by Ire Aderinokun.
You Probably Don't Need Media Queries Anymore
An article on how to use Flex and Grid instead of media queries.
AppFlowy
An open source alternative to Notion, where you are in charge of your data and customizations.
Can I Include
A tool to help determine if one HTML tag can be included in another HTML tag.
Morphing Submit Button
A nice Codepen demo of a button that changes after submit by Jon Kantner.
Image Upscaler
A nice tool to increase the size of your images by batch uploading them.
Do-nothing scripting
An article about reducing manual effort on dev tasks.
Iconscout
A list of high-quality free vector Icons, Illustrations, 3D assets, and Lottie Animations.
Excalidraw
A whiteboard tool that lets you easily sketch diagrams with a hand-drawn feel to them.
Cheat Sheets
A list of various cheat sheets related to web development.
Image Component
A nice article on building an effective image component for best practices and optimized images.
Life of Discipline
A habit tracking tool with a GitHub-like view.
The New CSS Reset
A simple and light CSS reset using the new CSS features.
nice-waves
A Vanilla JS library for creating animated waves.
LT Browser
A browser build to build, test & debug mobile websites..
100 Best Free Fonts for Designers in 2021
A nice list by the people of awwwards.
Image Optimization Test
A nice tool by Cloudflare, to test how well your images are optimized.
We Analyzed 425,909 Favicons
An article about some insights on favicons of various websites.
Lorem.space
A placeholder image generator for various categories.
Analyze CSS
A website to analyze your website's CSS, by entering the URL or pasting the CSS.
136 facts every web dev should know
An interesting list by Baldur Bjarnason.
HTML with Superpowers
A nice talk by Dave Rupert about Web Components.
Optimizing resource loading with Priority Hints
An article on how to use priority hints to enable optimal loading.
O&O ShutUp10++
A tool to disable unwanted Windows features and to prevented the transfer of personal data.
Stripe Gradient
Learn how to create the tilted gradient effect on Stripe's new website.
LocalStack
A fully functional local AWS cloud stack for developing and testing offline.
CSS backgrounds
A nice collection of 100+ free CSS patterns.
Minimap
A showcase of an experimental CSS property to display a live image from an arbitrary HTML element.
How to win at CORS
The 'how' and 'why' of CORS, from start to finish.
Vizzu
Open-source JavaScript library designed to easily create animated data visualizations and data stories.
Uptime Kuma
A fancy self-hosted monitoring tool like Uptime Robot.
Skeleton Screen Loading Animation using HTML & CSS
A nice article by Shantanu Jana on creating a simple skeleton animation
Creating the Perfect Commit in Git
The first part of an advanced Git series.
Faster React Apps With Memoization
An article by Nick Lanam on how to debug and fix excessive re-rendering.
How I built a modern website in 2021
A good article by Kent C. Dodds on his recent tech stack.
redact.photo
A nice tool to censor sensitive information of images online.
CSS Gradient Editor
A tool for creating colorful CSS gradient backgrounds and patterns.
FettePalette
A JavaScript function that generates color ramps based on a curve.
ct.css
A diagnostic CSS snippet that exposes potential performance issues in your page’s head tags.
LuckyResumeMaker
A tool to make a professional resume and download the PDF for free.
Best Online Tools
A curated list of various online tools.
What's new in react 18?
A nice article by Yagmur C. Tas on the new things of React 18.
Funky button
A creative button with clip-paths randomize on reload and hover/focus.
Free Background Remover
A tool to automatically delete backgrounds from your photos using artificial intelligence.
10 Trending projects on GitHub
The latest part of a nice series of web development repositories.
VanillaTreeViewer
A minimalist file browser for compactly displaying several files at once.
Putting an image on the page is easy, until it's not
An article by Paul Kinlan on how to serve images on the web.
react-philosophies
A list of things to think about when writing React code.
How I Make CSS Art
A nice article by Yosra Emad on how she approaches CSS Art.
Basic Pattern Repository
A collection of hand-coded SVG <pattern>'s, ready to be used in inline SVG or however you like.
Animated Backgrounds
A collection of 30+ animated backgrounds for websites and blogs.
Guide to browser cookies
Learn how browser cookies work and how you can access, manipulate and control their visibility across browser with JavaScript.
Today's 28 Best React Blogs
A list of React blogs, where you'll find news and tutorials about React.js, Gatsby, Next.js, and React Native.
Doodle Ipsum
A tool to customize doodles, grab the code, and use them on your prototypes.
Theatre.js
A JavaScript animation library with a GUI. It animates the DOM, WebGL, and more.
Beginners Shouldn't Learn React
An article by Flavien Bonvin on how to learn as a beginner.
Grainy Gradients
An article on how to generate colorful noise to add texture to a gradient.
Interactive Learning Tools
A nice list of games and tools for learning Front-End technologies.
Nano Colors
A tiny and fast Node.js library for formatting terminal text with ANSI colors.
15 Developer Portfolios to Inspire You
A cool list of creative portfolios by Muthu Annamalai Venkatachalam.
errorpush
A minimalist error collection service. An open-source alternative to Sentry or Rollbar.
Design Junction
A curated list of design resources, handpicked from around the web.
SpeedVitals
A performance testing tool to improve your website performance.
Profiling React.js Performance
An article about measuring React component render performance.
Free Developer Resources
A list of free resources of different categories.
Lively Wallpaper
An open-source project that allows users to set animated desktop wallpapers.
Buttons Generator
A list of CSS styles for buttons for copy-pasting.
Note Garden
A writing tool to optimize your learning process while taking notes.
UI cheat sheet: Spacing friendships
A nice article on how to approach spacing in web design.
Awesome Actions
A curated list of awesome things related to GitHub Actions.
couleur.io
A simple tool to help you create harmonizing color palettes.
React-Toastify
A simple react library for adding notifications to your project.
100 underline/overlay animations
A nice CSS collection of animations without SVG, JavaScript and keyframes.
View Source (on Mobile)
An article on how to see the HTML source while using a mobile browser.
Openby.design
A website for free and open-source design assets.
Progressive Tooling
A list of community-built, third-party tools that can be used to improve page performance.
The State Of Mobile First and Desktop First
A nice article by Ahmad Shadeed.
CSS Modules
An article about the native browser feature CSS Module Scripts.
Superhero Animation Effect with SVG Filters
A tutorial how to create an interactive illustration effect using SVG filters and masks.
Using Absolute Value, Sign, Rounding and Modulo
A nice article by Ana Tudor on CSS-tricks.
CSS Gradients
A website with 42 CSS gradients, with easy editing features.
Boltz Engine
A fast Node.js microservices engine for running cloud functions.
StackFinder
A VS Code extension for finding stackoverflow answers and pasting them into your code.
Password-protected pages on Netlify
A nice article on how to create password protection on Netlify.
Welcome UI
A customizable design system library made with react, styled-components.
Next.js Blog Boilerplate
A boilerplate for a blog based on Next.js 10+ framework with Tailwind CSS 2.0.
Wicked Backgrounds
A generator to create beautiful SVG backgrounds for your UI designs.
Salvia-kit
Cool dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js.
SVG Gobbler
A browser extension to download icons, logos, and vector SVGs from any site.
excalidraw-claymate
A tool based on Excalidraw to create stop motion animations and slides.
:fullscreen
A CSS pseudo-class that allows you to style any element that is currently in fullscreen mode.
wobbles and bubbles
A nice scrolltrigger demo.
My First CSS
An article about some base concepts of CSS.
Back to the Future with RSS!
An article about how to save the open web, & get (re)started with RSS.
Maker Stations
A website to explore home office setups from makers across the globe.
graphlatte
A Next.js template with GraphQL, Urql, Prisma, Nexus and Tailwind.
Sa11y
An accessibility quality assurance tool that visually highlights common accessibility and usability issues.
Khagwal 3D
Free 3D illustration pack for web & mobile app designers
GradientArt
A feature-packed editor for designing illustrations, patterns, icons, and more.
Line Icons
5000+ handcrafted free line icons for modern user interfaces.
gridless.design
A website that describes the problems with traditional design when they it is used for web experiences.
Bulletproof React
A simple, scalable, and powerful architecture for building production ready React applications.
use-color
A powerful color hook that includes parsing, stringifying and type checking at compile time.
UI Snippets
A small collection of hover effect UI Snippets.
Difftastic
An experimental structured diff tool that compares files based on their syntax.
Modern Unix
A collection of modern/faster/saner alternatives to common unix commands.
Front-End Boilerplates
An article with a bunch of useful front-end boilerplates and starter kits.
Free Dev Stuff
A list of free stuff or services for developer by developer to use
Aspect Ratio In CSS
An article on how to use the native aspect ratio in CSS.
Mega creator
An online creator for graphic design for social media graphic design.
Super Agent
A browser extension and web service that will auto-accept cookies for you.
The right tag for the job
An article on why you should use semantic HTML.
Beginner JavaScript Notes
A free resource for getting started or improving your JavaScript skills.
GitHub Flat Data
A tool to bring working sets of data to your repositories.
The perfect link
A nice article on how to create the perfect link.
Astro
A tool to build websites with your favorite JavaScript framework and ship the minimum amount of JavaScript.
BootStarters
An open source collection of free themes for Bootstrap 5.
Handwriting Generator
A tool to automatically generate images or GIFs of handwriting from text.
Mail Studio
An application for designing responsive emails that work everywhere.
Faster web fonts
An article on how to fine-tune your font files and optimize your loading strategy for maximum speed.
CSS Layout Generator
A CSS Grid & Flexbox generator for creating layout components.
Liquid Hover Effect with GSAP & SVG
Add a vector-based, fluid hover effect to any simple SVG path.
Mastershot
A free and intuitive web-based video editor.
Links on Performance
A nice list of articles on how to improve the performance by Chris Coyier
Animate.css
A library of ready-to-use, cross-browser animations.
CSS Generators
A nice list of various CSS Generators for things like CSS shadows or overlays.
macOCR
A command line app that enables you to turn any text on your screen into text on your clipboard.
Boring Avatars
A tiny JavaScript React library that generates custom, SVG-based, round avatars.
Helsinki Design System
An open-source design system for digital products and experiences.
svg-loader
A Different Way to Work With External SVG.
The Button Cheat Sheet
A cheat sheet to help you with the right markup for buttons.
Color Gradient
A cool generator for various color gradients.
How to Cleanup Async Effects in React
An article on how to handle common asynchronous side-effects in React.
Awesome Privacy
A big list of free, open source and privacy respecting services and alternatives to private services.
Unveiling Material You
The new design approach by Google.
Harold
A static site generator that can help quickly set up static websites, blogs and documentation sites.
pmndrs market
A website for free, web-ready 3D assets.
TODO.md Kanban Board
A VS Code extension to create Todo Kanban Boards and save them as TODO.md.
Tail Blend
A tool to quickly experiment with the Mix Blend Mode feature of Tailwind.
50 UI Tips
A small e-book with tips to improve user interfaces.
Learn JavaScript
Learn the basics of JavaScript by solving interactive coding challenges.
Modern Javascript
An article with everything you might have missed over the last 10 years.
Undoing Mistakes With Git
A cool guide to repair mistakes by using Git.
24 HTML Tags you may not know
An article with some lesser-known HTML Tags.
DOM Events
A website to learn about the DOM Event system through exploration.
Open color
An open-source color scheme for UI like font, background, border, etc.
100 CSS loaders
A cool article with a lot of pure CSS loaders.
HTML and CSS Checkbox Examples
An article with some cool CSS checkbox examples.
Web Accessibility for Newbies
Introductory information and advice on how to think about and approach web accessibility
Building split text animations
A foundational overview of how to build split letter and word animations.
The Quest for “Perfect” Infinite Scrolling
An article about a concept, to help you think about animations in a different way.
How React hooks work
An in depth article that explains and demonstrates how React hooks work.
Bootstrap 5
Bootstrap is shipping the first stable release of the new major version.
Fluid typography
An online tool to create text that scales with the window size.
Tailwind dashboard template
A free admin dashboard template built on top of Tailwind CSS and fully coded in React.
Spotlight
An easy to integrate lightbox gallery library, which is lightweight with no dependencies.
CSS Flexbox Tutorial
An article about CSS Flexbox basics including a flexbox properties cheat-sheet.
Hosting SQLite databases on Github Pages
An article about a tool to be able to use a real SQL database in a statically hosted website.
useStateMachine
A ½ kb state machine hook for React.
css-shorthands
A list of CSS shorthand properties.
Horizontal Rules
An article on how to get creative with the <hr> element.
Frontend Practice
A collection of real websites for developers to recreate to improve and test their skills.
react-icon-blur
A tiny React library that can be used to create frosted glass effect of icons.
MailMask
A great email forwarding service, that helps you to stay safe and private on the internet
Waterfaller
An alternative to Google PageSpeed Insights to improve your page experience.
Tooltip appear
Using clip-path to create an appear effect consisting of repeated shapes.
HTML boilerplate
A modern HTML boilerplate with explainations of the used elements.
SimpleR State
A React library for simple app state management.
Kallithea
A source code management system that supports the two leading version control systems, Mercurial and Git
Awesome-Selfhosted
A list of Free Software network services and web applications that can be hosted locally.
How to actually test UIs
An article on testing techniques used by leading engineering teams.
Content-aware image resizing in JavaScript
An article on how to create an interactive content-aware resizer.
The `ping` attribute on anchor links
How to use the ping attribute for link tracking.
Frontend Toolkit
A customizable dashboard for your recurring Frontend tasks
Design Resources
A curated list of design resources from design templates, stock photos, icons, colors, and more.
GitHub Theme
A theme for Visual Studio code, that is made and used by GitHub.
DirectShare
A free and secured file transfer solution with no size constraint.
Understanding browser cookies
A nice article that explains the basics of browser cookies.
natto
A tool for fidgeting with JavaScript. Write and manipulate JavaScript expressions on a spatial canvas.
Creating a Smart Navbar With Vanilla JavaScript
Create a navbar that gets visible when the user scrolls up.
Advanced React pattern - Compound Component
A React pattern that allows writing complex components in a clean and declarative way.
React + D3.js
An article on how to combine the two technologies to visualize data.
Fontshare
A free fonts service with a growing collection of professional grade fonts that are free for personal and commercial use.
Swipey image grids.
A nice article on how to use SVG animations for an image grid.
How to design almost any UI element
A curated list of 58 articles in a Twitter thread.
CSS Filters Generator
Generate cross-browser CSS rules to modify images hue, saturation, brightness, contrast and other.
Gradient Generator
A generator for linear gradients, radial gradients, and conic gradients that can be exported as CSS or SVG image.
ReactJS coding challenges
A repository with React coding challenges with a variety of difficulties.
GitHub Skyline
A tool by GitHub to view a 3D model of your GitHub contribution graph.
transition.css
A repository with 46 pre-built, drop-in CSS transitions transitions.
Conditional animations with CSS properties
A nice article about how to use reduced motion in CSS.
How to Improve CSS Performance
Learn the most common speed issues caused by CSS and how to avoid them.
use-local-storage-state
A React hook that persist data in local storage.
Theme Studio for VS Code
A tool that lets you easily design, and deploy your own VS Code themes from scratch.
Creating Patterns With SVG Filters
A cool article about generating patterns with a few lines of SVG.
chatwoot
An Open-source customer engagement suite as an alternative to tools like Intercom or Zendesk.
Sorted CSS Colors
A tool that sorts the named CSS colors in a way that it shows related colors together.
Focalboard
An open-source, self-hosted alternative to Trello, Notion, and Asana.
Learn LaTeX
A website to get started with LaTeX: the basics, installation, writing code and more.
JavaScript Visualizer 9000
A tool to interactively visualize JavaScript's Event Loop.
Fluid Space Calculator
A calculator for space value pairs, with a nice visualization and a CSS generator.
How to style broken images with CSS
A quick tutorial by Dima Prohorenko on dev.to.
StartupToolbox
A crowdsourced collection of 700+ tools for startup makers.
CSS Grid Cheat Sheet Illustrated in 2021
A Cheat Sheet of everything you can do with Grid to get started in 2021.
Clone Wars
A list of open-source clones of popular sites like Airbnb, Amazon, Instagram, and more.
Password Keeper
An app to manage your passwords in Google Drive.
flowchart.fun
An open-source tool for generating flowcharts from text.
Webmention.io
A hosted service created to easily receive webmentions on any web page.
Three Ways to Blob with CSS and SVG
An article on how to create smooth, random, jelly-like shapes, which can be used as illustration elements.
Generative SVG Social Images
A cool codepen to generate customized social images for your blog posts.
HTML-over-WebSockets
An article about the future of web-based software architectures.
Epic React Exercises
A few practical React exercises with detailed solutions for real-world use cases.
Real-Time Wave Tracing
An amazing example of in-browser wave tracing.
Local PDF Tools
A website that uses Webassembly to edit your PDFs inside your Browser.
Circular Text Effect
An experimental circular SVG text animation by Codrops.
Inclusive Components
A blog about designing inclusive web interfaces, piece by piece.
Code
A platform to create interactive code questions for testing your knowledge and preparing for interviews.
HTML Boilerplates
A website to create a custom HTML Boilerplate.
Front-End Tips
Super tiny, quick tips, tricks, and best practices of front-end development.
Before You memo()
An article about rendering optimizations in React with memo().
Easing Gradients
An article on how you can improve your gradients with non-linear color mix and custom color spaces.
simple-keyboard
A fast, dependency-free and customizable virtual keyboard for web applications.
Getting Deep into Shadows
A nice in-depth article about shadows in web design.
Reseter.css
A CSS reset and normalizer, that resets all the premade styles by the browser.
Zsh Tricks to Blow your Mind
An article with some tips and tricks to optimize your development with the command line interface.
Tools Every Developer Should Know and Use
A list of useful websites and extensions.
React Awesome Loaders
High quality, responsive, and customizable Loading Animations for React.
Evernote.Design
A large collection of links for designers.
React Hooks cheat sheet
A PDF containing the information you’d like to find as quickly as possible when using hooks.
Page Transitions
An article with creative examples, resources, and some tips for page transitions.
CSS Polygon Shapes
A bunch of shapes generated with css-doodle and clip-path.
Illustration Kit
A collection of illustrations, which gets updated daily.
Remotion
A tool to create MP4 motion graphics in React. Use CSS, SVG, and WebGL to render videos programmatically.
svgwaves.io
A cool generator for svg wave shapes.
Front-End Performance Checklist 2021
An annual front-end performance checklist, with everything you need to know to create fast experiences on the web.
An Interactive Guide to CSS Transitions
A guide that shows the basics of how to use CSS transitions
Windows 10 calendar effect CSS
A codepen for a cool hover effect that looks like the Windows 10 calendar.
React Upload Box
A minimal Upload component for React.
CSS Stripes Generator
A generator to create striped backgrounds using only CSS.
Akar Icons
A rounded icon library made for designers and developers.
Free Animated Headers
A generator for beautiful, animated headers with gradients.
Free JavaScript Resources
A collection of the latest and up to date resources to learn JavaScript.
SVG Shape Generator
A free SVG shape generator to create SVG blob shapes for your web design with gradient, complexity levels, and more!
The Complete Guide to Centering in CSS
An article about centering in CSS using grid, flexbox, and classic block element layout.
Archivy
A self-hosted knowledge repository that allows you to preserve content that contributes to your own searchable and extensible wiki.
Beginner's Series to: Dev Containers
A guide for using Docker containers as a development environment.
The styled-components happy path
Josh Comeau shares his personal best practices for styled-components.
John Doe Webpage
A single HTML file that uses the #anchor suffix and the :target CSS selector to show and hide pages/content.
Create App
A config generator for webpack, parcel, and snowpack with React, Vue, Typescript, and more.
</placeholders>
A collection of web components used as placeholders.
Glassmorphism
A generator for an effect, based on background blur with transparency.
Vue Native
A framework to build cross-platform native mobile apps using JavaScript.
Cyberpunk 2077 Buttons
A cool demo of pure CSS buttons in cyberpunk 2077 look.
Understanding Clip Path in CSS
An introduction about CSS clip-path, how it works, with example and use-cases.
On-Scroll Letter Animations
A small set of examples showing how letters can be animated on scroll.
CSS Clamp Wrapper
An article on how to use CSS Clamp to create a more flexible wrapper utility.
JPEG.rocks
A Privacy-aware JPEG optimizer that does all the processing entirely in the browser.
Nested Media Queries
A small article about nesting media queries.
ButtonBuddy
A generator for buttons with accessible colors.
State of JS 2020
The results of the annual survey about the latest trends in the JavaScript ecosystem.
OpenScan
An open-source app to scan hard copies of documents or notes and convert them into a PDF file.
useAnimations
A library for animated icons in the Lottie Framework for immediate implementation to your apps or websites.
2020 JavaScript Rising Stars
The annual round-up of the JavaScript landscape, comparing the number of stars added on GitHub.
IDEA
A series of nonverbal algorithm assembly instructions, that explain how various popular algorithms work.
Test for accessibility
A nice article with seven ways to test for accessibility of your web site with browser Developer Tools.
Figma Crash Course
A deep dives into powerful Figma features like prototyping, auto-layout, systems, and illustration.
The future of CSS: Higher Level Custom Properties
An article on having one CSS Custom Property control a varying set of other properties by using Higher Level Custom Properties.
Pattern Generator
A generator for seamless, unique, royalty-free patterns, which are exportable as SVG, JPEG, or PNG.
tailwindshades
A tool to help generate color shades for Tailwind CSS.
10 KB Club
A curated collection of websites whose home pages do not exceed 10 KB compressed size.
The React Cheatsheet for 2021
A comprehensive visual cheat sheet of all the major concepts and features of the React library in 2021.
The Complete CSS Flex Tutorial
A good tutorial for getting started with CSS Flex.
Search Engine Optimization Checklist
A nice checklist for implementing the best SEO practices.
Scale
A list of customizable high-quality, open-source illustrations, which gets updated every day.
Tailwind-kit
A collection of over 200 CSS responsive components, based on Tailwind CSS 2.0 and Font Awesome.
Hotwire
An alternative approach to building modern web applications by sending HTML instead of JSON.
Scrollytelling with React
An article about creating a visual and interactive form of storytelling.
5 Years of Design
A collection of beautiful designs ordered by month and year.
Handling Short And Long Content In CSS
An in-depth article on how to handle short and long content in CSS.
EStimator
Calculate the size and performance improvement a site could achieve by switching to modern JavaScript syntax.
Polotno Studio
A free online editor to create images for social media, youtube previews, and Facebook covers.
Minimal CSS Loader Collection
A nice collection of Codepens for CSS loaders.
SuperTokens
A simple email and password sign up functionality for your site or app.
The Import On Interaction Pattern
An article about lazy-load non-critical resources when a user interacts with UI requiring it.
Accessible icon links
An article on how to make icon links accessible.
CSS in readme
A trick to style your readme files using CSS.
TabPanel Widget
A Semantic, Accessible, and Responsive solution to create TabPanel and Accordion Widgets.
Animated SVG Links
Some cool link animations using SVG.
Checklist Design
A nice collection of the best design practices.
Moonbridge
A simple generator for WebGL experiments.
Social Image Generator
A generator to create beautiful looking social images for your open-source packages.
An introduction to micro-frontends
An article on what micro-frontends are, and how to use them.
React is slow, what now?
An article about improving the performance of your React App.
CSS Animation Tutorial
A detailed tutorial for CSS animations.
How to Add Text in Borders Using Basic HTML Elements
A nice article on adding borders with text.
Goodbye to Google Fonts
Comparing Google Fonts to self-hosting fonts.
reading-time
A JavaScript library for adding medium's like reading time estimation.
Why it's good for users that HTML, CSS and JS are separate languages
An article arguing against replacing HTML, CSS and JavaScript with just one language.
Text Gradients
An article on how to create text gradients in CSS.
Use console.log() like a pro
An article about advanced usage of console.log
Advent of Code
An Advent calendar of small programming puzzles for a variety of skill sets and skill levels.
UI Design in Practice: Colors
A nice article with practical tips & tricks for building your color palette
React Emotion Multi-step Form
An interactive multi-step form library with concise declarative code.
Thinking Like a Front-end Developer
How to think as a front-end developer and account for edge cases you might have missed.
React hover animation effect with React Spring
A nice tutorial by Josh Comeau on hover transitions with React
Pattern Collect
A curated gallery of patterns by designers & illustrators
React Styleguidist
Isolated React component development environment with a living style guide.
Tailwind CSS v2.0
The release notes for the new Tailwind CSS v2.0
Pretty Snap
A tool to add pretty backgrounds to your screenshots.
linkinator
A simple site crawler and broken link checker.
Building Your Color Palette
A nice guide on how to create a color palette for your website.
Socialify
Generate a beautiful project image including a custom logo, description, badges, fonts, and background patterns.
beautiful-react-diagrams
A tiny collection of lightweight React components for building diagrams with ease
Operator Lookup
A simple website where you can enter a JavaScript operator to learn more about it.
Notion Clone
An open-source version of the note-taking app Notion, built with Next.js.
What's Missing From CSS?
The answers of 2,000 participants of the State Of CSS Survey 2020.
Seasonal.css
A CSS library that supplies a seasonal colour scheme based on the day of the year.
Font Of Web
Find the fonts a website uses, see where they are used, download fonts used by the website.
22120
An archivist browser controller that caches everything you browse and makes it searchable.
vue-float-menu
A customizable floating menu for Vue.
Inline Menu Layout
An inline menu layout with a playful hover animation and a gallery content preview panel.
A Nerd’s Guide to Color on the Web
A list of some lighter CSS frameworks out there.
Effective Skeleton Screens
A nice article on the performance and UX of skeleton screens.
Pattern Monster
An online pattern generator to create repeatable SVG patterns.
Comparing Various Ways to Hide Things in CSS
A nice article explaining different ways to hide things in CSS.
My Side Project Rocks
A website to post your side projects and to discover side projects by others.
Super Tiny Icons
SVG versions of logos, which are under 1KB each
Device Shots
Create high-resolution device mockups with the screenshot of your website.
PRESENTA Lib
A javascript library that generates web presentations from config objects.
Cirrus.CSS
A component and utility centric SCSS framework designed for rapid prototyping.
CSS Spider
A browser extension to copy, visualize, edit and export CSS.
The Complete CSS Grid Tutorial
A detailed guide on CSS Grid.
Next.js 10
The release notes for Next.js 10, which introduces Built-in Image Optimization, Internationalized Routing, and more!
Developer Resources - Frontend
A huge collection of resources for Frontend development.
Placeholder Logos
Get a placeholder brand for a project. Completely free, with six different color variations as PNG and SVG.
Minimal CSS Frameworks
A list of some lighter CSS frameworks out there.
cypress-routines
A library that enables you to organize your test setups neatly per spec-file.
React Flow
A highly customizable React.js library for building interactive node-based editors, flow charts, and diagrams.
Native CSS Masonry Layout
An article about the new specification for a native CSS masonry layout, as part of the Grid Layout.
Next.js Commerce
A starter kit for high-performance e-commerce sites for Next.js.
link-to-qr
A free and easy QR code generator.
vanilla-hamburger
A port of hamburger-react to vanilla Custom Elements.
Checka11y.css
A CSS stylesheet to quickly highlight a11y concerns.
SVG Favicon Maker
A generator for SVG Favicons.
Radix Icons
A set of 15×15 icons designed by the Modulz team.
Phosphor Icons
A flexible icon family for interfaces, diagrams, presentations, and more.
React Nice Dates
A responsive, touch-friendly, and modular date picker library.
Free Tailwind landing page template
A free landing page template built on top of TailwindCSS and coded in React.
State Of CSS 2020
The annual survey about the latest trends in CSS.
Responsive Height Design
A nice article about testing for responsive height.
react-chrono
A Modern Timeline component for React, which can render timelines in three different modes.
Fullstack JAMstack with Next.js
An article on how to build an Authenticated JAMstack App with Next.js, Airtable, Tailwind CSS, and Auth0.
How to Recreate the Ripple Effect of Material Design Buttons
Learn to make the ripple effect of Material Design's button component.
cssbuttons
A Collection of HTML and CSS Buttons
Butter Slider
A lightweight vanilla JS drag and hold slider made for easy setup.
CSS Background Patterns
A bunch of cool pure CSS background patterns.
dragmove.js
A tiny Javascript library to make DOM elements draggable and movable.
Coded Mails
A list of free responsive HTML email templates.
Preload late-discovered Hero images faster
A nice article on how preloading your images can boost your image display speed.
ScreenBean
A tool to add colorful backgrounds to screenshots.
smooth DOC
A ready to use documentation theme for Gatsby.
handwritten.js
A JavaScript library to convert typed text to realistic handwriting.
60+ Most Useful Web Design Resources
A big list of web design resources.
Duet Date Picker
An accessible date picker that allows you to set a minimum and a maximum allowed date.
A Simple Explanation of JavaScript Iterators
A nice article about iterators by Dmitri Pavlutin.
How to Make Charts with SVG
In this article Robin Rendle explains why and how to make charts with SVG.
ScrollTrigger Demos
A collection of inspirational demos build with ScrollTrigger.
Secure Password Reset
An in-depth article about everything around a secure password reset
Git Log Cheatsheet
A nice cheatsheet for everything around the git command log.
Modfy
A browser-based privacy-first video tool for converting, compression, etc without uploading your files
3 things about CSS variables you might not know
An article that explains some concepts of CSS variables.
Full-Bleed Layout Using CSS Grid
A nice article on how to solve a tricky modern layout with CSS grid.
Micro-frontends in context
A good read on when, and why developers should consider this smaller frontend architecture pattern.
CSS font-size-adjust
An article on how the CSS property font-size-adjust works.
A Complete Guide to CSS Media Queries
An article on how media queries work.
Creating Mirrors in React-Three-Fiber and Three.js
A brief walk-through of how to create a mirror scene with react-three-fiber.
Mono Icons
A simple, consistent open-source icon set.
How to use CSS masking
An article on how to use the mask-image property in CSS.
Learn Git Branching
Some cool interactive step-by-step demonstrations to learn Git.
Check Browsers Support
A browser extension to check if a given web technology is supported by browsers.
Box-Shadow Generator
A CSS generator for smooth box-shadows.
The failed promise of Web Components
A good article by Lea Verou about the problems of web components.
Layoutit Grid
A nice generator for CSS grid layouts.
Headless UI
Unstyled, fully accessible UI components, designed to integrate with Tailwind CSS.
False Simplicity in UI Design
A nice article on why simple isn't always better.
filters.css
A CSS only library to apply color filters.
GitHub CLI 1.0
An article introducing GitHub for your terminal.
Size My Image
A fast image resizer and compressor, identical to exports of Figma and Sketch apps.
How HTTPS Works
A cool comic that explains why HTTPS is important and how it works.
QreditRoll
A fun project, that lets you add movie-like credits to your website.
Front-end JavaScript performance
An article on how to investigate and fix JavaScript performance problems.
Halfmoon
A front-end framework with a built-in dark mode and full customizability using CSS variables.
Web Design and Carbon Impact
An article on how can we, as web professionals, help to make the web more energy efficient.
content-visibility
Chris Coyier writes about how the new CSS property can boost your rendering performance.
Form design
Best practice, research insights and, examples for forms.
Vanilla Colorful
A tiny, framework-agnostic color picker.
lookup.design
A cool website for finding design inspiration and examples.
Tooltip Sequence
A library to show a sequence of tooltips to take your users on a walkthrough of your app.
GitHub Profile README Generator
A simple generator for GitHub profile READMEs.
react-three-flex
A library to place content in three.js with flexbox.
Stitches
A lightweight, performant styling library with a focus on component architecture and developer experience.
JSchallenger
A website to learn Javascript by solving challenges.
Beyond Media Queries
An article about using newer HTML & CSS features for responsive designs.
React Icons
A VSCode extension to search and paste icons into your code as SVG or JSX.
Tailwind Ink
An AI palette generator trained with the Tailwindcss colors.
Selecto.js
A component that allows you to select elements in the drag area using the mouse or touch.
Shortcuts.design
A shortcut reference for the most important tools of designers.
Meta Tags
A website to edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter, and more.
CSS Values
A web app to search the syntax and all possible values for any valid CSS property.
Morphing SVG With react-spring
A nice article by Mikael Ainalem about SVG animations in React.
CSSplit
A CSS splitter that takes in your main.css file and splits into component-specific CSS files
The Animated Web
A website for animation resources and inspiration from around the web.
umami
A simple, self-hosted web analytics solution as a privacy-focused alternative to Google Analytics.
Thumbnail to Full Width Image Animation
An experimental animation where an image goes from thumbnail to full width by Codrops.
GitDuck
A video call tool that enables you to talk, share your code, and do pair programming with ease.
Light Date
A lightweight library for a fast and easy way to format dates.
Dropbase
A tool to centralize offline data by import files and applying transformations to clean up data.
Responsively
An app to preview all target screens in a single window side-by-side.
Enhancing User Experience With CSS Animations
A nice article by Stephanie Walter about implementing decent CSS Animations.
Docusaurus
A project for building, deploying and maintaining open source project websites easily.
Embla Carousel
A library agnostic, dependency-free carousel library with good swipe precision.
How I Structure My CSS (for Now)
Matthias Ott writes about his methodologies for structuring CSS.
Lite YouTube Embed
A custom element, that renders youtube embeds approximately 224x faster.
Supercharging <input type=number>
Kilian Valkhof writes about how to build a better input type=number.
Storybook 6.0
The release notes for the new version of Storybook.
moment-guess
A utility package for getting the date's format based on an input.
dorking (how to find anything on the Internet)
A good article about the use of search engines to find very specific data.
React v17.0 Release Candidate
Notes about the first Release Candidate for React 17.
content-visibility
A nice article about the new CSS property that boosts your rendering performance.
Magnetic Buttons
A small set of magnetic buttons with some fun hover animations by Codrops.
Free Online Programming & CS Courses
A list of 700 Free Online Programming & Computer Science Courses You Can Start This August.
Luckysheet
An online spreadsheet like excel that is powerful, simple to configure, and completely open-source.
It's time to lazy-load offscreen iframes!
An introduction to lazy-loading iframes with Chrome 76.
Teenyicons
An elegant icon set by Anja van Staden with more than a thousand icons.
Front-end Job Interview Questions
A number of front-end interview questions that can be used when vetting potential candidates
useImageColor
A React hook to grab the color palette from any image.
Laws of UX
A collection of maxims and principles that designers can consider when building user interfaces.
Building a self-updating profile README for GitHub
An article by Simon Willison on automating GitHub your GitHub profile README
Differences Between Static Generated Sites And Server-Side Rendered Apps
A nice article by Timi Omoyeni about the differences between SSR and SSG.
Warp SVG Online
A simple online tool that allows you to warp, bend, and distort SVG files.
emoji-picker-element
A lightweight emoji picker, distributed as a web component.
Rows n' Columns
An Excel-like DataGrid component for React. Built for high performance rendering similar to google sheets.
Bar chart race generator
A fun generator for bar chart races based on CSV data.
Invert, always, invert
Not strictly programming related, but an interesting article about the mental modal around inverting.
Build JavaScript applications with Node.js
A course about building Node.js apps by Microsoft.
A CSS-only, animated, wrapping underline.
A tutorial by Nicky Meuleman on creating an animated underline.
3D Book Image CSS Generator
Generate an animated 3D image from a book cover and export to HTML/CSS to embed on your website.
Fancy-Border-Radius
A visual generator to build organic looking shapes with the help of the CSS3 border-radius property.
pageoflinks
The code for a small an simple page of links.
Things I Wish I’d Known About CSS
A nice article about some useful things to know about CSS.
Super Expressive
A JavaScript library that allows you to build regular expressions in almost natural language.
The WET Codebase
A talk by by Dan Abramov about why writing code that is free of duplication leads to software we can’t understand.
JavaScript books for programmers
A bunch of books by Axel Rauschmayer about different aspects of JavaScript.
this vs that
A cool collection of articles that point out the difference of similar frontend concepts.
How To Create A GitHub Profile README
A guide on how to use the recently released feature by GitHub.
Hex Color Blender
A tool, that blends two hex colors by giving a specified number of intermediates between them.
Capsize
A tool adjust adjusts font-size and to crop space from text nodes above capital letters and below the baseline.
Learn Awesome
A learning platform for gathering learning resources for a topic.
Responsive Navigation Generator
Quickly get the HTML and CSS for a customizable, responsive menu.
Perf Track
A tool to track and measure the performance of sites that use popular JavaScript frameworks and libraries.
whatthefuck.is
A casual glossary/blog of Computer Science terms by Dan Abramov.
Developer Handbook 2020
An opinionated guide on how to become a professional Web/Mobile App Developer.
Tabler Icons
A list of 558 fully customizable free SVG icons.
Web Monetization
A JavaScript browser API, that allows the creation of a payment stream from the user agent to the website.
Sign-in form best practices
A good read by Sam Dutton about the best practices for login forms, including a checklist.
html.systems
A set of components built with HTML, CSS and JavaScript.
Linear
An issue tracking tool to streamline software projects, sprints, tasks, and bug tracking.
Screenshot.Rocks
A nice tool to create browser mockups in seconds.
Tailwind cheat sheet
A cheat sheet that provides an active reference for utility classes and CSS properties provided by Tailwind CSS.
Rotated Revealer Effect
A set of rotated reveal and overlay effects for page transitions by Codrops.
Whole page slider
A JavaScript library for scrolling through whole pages vertically or horizontally.
Textures.js
A library to add SVG patterns for data visualization on top of d3.js.
whenipress
A simple JavaScript package to add keyboard bindings to your application.
Slides for Programming Courses
A collection of slides for programming courses, created from markdown sources.
Creating my logo animation
A good article on animating SVGs with CSS.
tree.nathanfriend.io
An online tree-like utility for generating ASCII folder structure diagrams.
Elevator.js
A fun demo of a "scroll to top" button, that works like a real elevator
Selection controls — UI component series
A good overview of selection controls and when to use them.
Grid Cheatsheet
A cool cheat sheet for everything you can do with CSS Grid.
React Boilerplate meets CRA
The React Boilerplate as a Create React App template.
Mozilla VPN
Mozilla is announcing their own VPN. The Beta is available for U.S.
Bootstrap 5 alpha
The new bootstrap version, dropping jQuery and IE support, goes into alpha
Application State Management with React
An article by Kent C. Dodds about managing your application state in React.
Lightweight alternatives to Google Analytics
An article reviewing alternatives to Google Analytics.
Gradient Generator
A cool gradient generator on CodePen.
GitHub Super Linter
A new GitHub action to automate the linting.
How to Compare Objects in JavaScript
Learn how to check for equality in JavaScript with this article.
React Query 2.0
Tanner Linsley just released the new version of React Query with a lot of improvements.
Understanding client-side web development tools
Another good guide by MDN about client-side tooling.
Static Hosting Benchmark 2020
A benchmark of the most popular static hosting services in 2020.
Code Notes
A Gatsby theme for publishing code-related notes to your website.
Grid for layout, Flexbox for components
A good article by Ahmad Shadeed about when to use flexbox or grid.
Image Grid Motion
A cool demo by Codrops of a motion hover effect on a background image grid.
Collected Notes
A note-taking app, with markdown support. It uploads the taken notes to a blog.
keen-slider
A library agnostic touch slider with native touch/swipe behavior and great performance.
Basic.css
Classless CSS Starter File with basic CSS formatting and ability to make basic grids with only HTML5 syntax.
GitHub Etiquette
A small guideline on how to communicate on GitHub.
Best GitHub Repos for Web Developers
A list of GitHub repositories, which can greatly enhance your skills and also help you write better code.
Grid.js
An open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.
ScrollTrigger
A plugin for scroll-based animations with minimal code.
No Design Development
A collection of tools for developers who have little to no artistic talent.
GitHub Classroom
A tool for teachers to automate repository creation and access control to distribute code and collect assignments on GitHub.
Shape Dividers
A generator for beautiful SVG shape dividers.
New in Firefox 77
DevTool improvements and web platform updates in Firefox 77.
Stack Overflow Developer Survey 2020
Get insights on demographics, technologies, salaries, and career satisfaction of developers around the globe
Amazon Web Services
A good overview of all services AWS offers, with a short description on what it is for.
Rough Notation
A small JavaScript library to create and animate hand-drawn annotations on a web page.
MDN - Getting started with React
The MDN web docs now also have a guide for React.
htmx
A small JS library, that allows you to access AJAX, WebSockets and Server Sent Events directly in HTML, using attributes.
What's New In DevTools (Chrome 83)
An overview of new features in Chrome 83 DevTools
Tailblocks
A collection of customizable, ready-to-use Tailwind CSS blocks.
Are You a Developer?
A cool article by Landon Schropp about developers and the imposter syndrom.
Tools for better thinking
A collection of thinking tools and frameworks to help you solve problems, make decisions and understand systems.
Background Patterns, Simplified by Conic Gradients
An article by Ana Tudor about how background patterns with gradients work.
Spinners React
Lightweight SVG/CSS spinners for React.
UI Components
A collection of ui/ux design components, patterns, examples and inspiration.
Complete Guide to CSS Functions
A really good guide on all the functions that can be used in CSS
Learning to Be a Tech Lead
A nice read by Chris Saylor about his transition to a lead engineer.
Marketing for Engineers
A hand-picked collection of resources for solving practical marketing tasks.
Linux Productivity Tools
A 89 page .pdf about building powerful command-lines in Linux
SEO Cheat Sheet
A cheat sheet for the technical side of On-Page SEO, which includes a sorted list of best practices.
Generate Social Media Images Using Cloudinary
A utility function that builds social media images by overlaying a title and tagline over an image using Cloudinary’s APIs.
Norde Source
An SVG Icon manager and editor for easily customizing entire icon sets.
JavaScript Array Functions CheatSheet
A CheatSheet to quickly find all functions that can be executed on a JavaScript Array.
LaTeX.css
An almost class-less CSS library turns your HTML document into a website that looks like a LaTeX document
ChartS.css
Accessible html/css charts with markdown support
JSNation
A 2-day JavaScript conference to stay up-to-date on the latest JS tech. It has a free Ticket.
WebGL guide
A complete, summarized WebGL tutorial with interactive demos.
Real-Time Debugging
An extension for VS Code that visualizes how a program is being executed in real time.
Modern CSS Solutions
A cool series of articles by Stephanie Eckles on solving old CSS problems with modern CSS.
React Native for Windows + macOS
React Native adds support for the Windows 10 SDK as well as the macOS 10.12 SDK.
quicklink
A drop-in solution for sites to prefetch links based on what is in the user's viewport.
Tiny helpers
A collection of free single-purpose online tools for web developers.
Modern JavaScript Cheatsheet
A nice Cheatsheet for some modern JavaScript syntax.
React Virtual
The new React library by Tanner Linsley adds hooks for virtualizing scrollable elements in React.
How URLs work?
A small educational website that explains the counterparts of a URL.
CSS Grid Generator
A quick way to generate the code for CSS Grid.
Design Resources For Developers
Brad Traversy just released this awesome list of free design resources.
Draw.io VS Code
A cool extension integrates Draw.io into VS Code.
Pose Animator
Take a 2D vector illustration and animate its containing curves in real-time.
Codespaces
GitHub is launching a Visual Studio Code experience inside of GitHub. You can sign up for an early request right now.
endpoints.dev
Get a unique public url to capture and analyze http request info with this tool.
Creative Hover Effects
A collection of six creative hover effects for your inspiration.
Responsive CSS Motion Path
An article on different approaches how to make motion paths responsive.
Gooey Text Hover
A cool demo of morphing text effects on hover on Codrops.
SSH Tips & Tricks
Some good tips on how to use SSH more effectively.
Hero Generator
A cool generator for hero sections by Sarah Drasner.
What I wish I knew about React
An article by Ire Aderinokun about some of the challenges she encountered while learning React.
Editly
A tool and framework for programmatically creating a video from a set of clips, images, and titles.
Insomnia Designer
A new open-source desktop application that provides a modern workflow for teams to design and collaborate on APIs.
Are you using SVG favicons yet?
A guide on how and why to use SVG favicons.
10 open source SVG icon libraries
A list of SVG icon libraries discovered in a Reddit thread.
Create a CSS only image gallery
An article on creating an image gallery without the use of JavaScript.
actions-cli
A tool to monitor your Github Actions from the command line.
next-dark-mode
A package for enabeling dark mode in Next.js apps.
67 Free device icons
A free set of 67 device icons in multiple file formats.
background generator
A cool generator, which also has a small list of backgrounds created with it.
Eloquent JavaScript
A very well written Book and great re-introduction to JS/programming fundamentals.
Spaced Time
An application, which helps you remembering stuff - it also has a cli.
pattern.css
A CSS only library to fill your empty background with beautiful patterns.
40 Free HTML landing page templates
A nice list of landing templates, written on dev.to by Davide Pacilio.
react-see-through
Draw attention to the important parts of your website with this react package.
Meanderer.js
A JavaScript micro-library for responsive CSS motion paths
Crank.js
A new JS framework for writing JSX-driven components with functions, promises and generators.
GitHub is free for teams
GitHub just made all of the core features free for everyone. Here's their blog post announcing it.
Image compare viewer
A vanilla JS library for adding a before and after compare slider to images.
BEM Cheat Sheet
A nice cheat sheet for all of you who are using BEM for naming their CSS classes.
AHA Programming
AHA stands for 'Avoid Hasty Abstraction' and is a design principle by Kent C. Dodds. It deals with problems caused by the DRY principle.
Vue.js v3.0-beta
The new Vue.js version 3.0 is going beta. Check their blog post for more information.
React landing page template
A free React landing page template for creating quick landing pages.
React Query
A really cool React library for handling server state with fetching, caching and updating.
Winddown
A VS Code extension, which reminds you to take a break by slowly fading out the colors.
Responsive Images the Simple Way
A good article by Scott Vandehey about getting responsive images right.
Wireframer Font
An open source typeface made of purposely redacted letters, which is presenting content as abstract bars.
React Summit - Remote Edition 2020
The remote version of the React Summit conference this friday is offering free tickets.
Rapid Image Layers Animation
A rapid animation of multiple layers of images for intros or page transitions.
Level Up Your CSS Animation Skills
A four hour youtube course about bringing animation to your websites with CSS animations.
multicopy
A VS Code extension that lets you copy and paste multiple snippets of code in your workspace.
Pluralsight #FreeApril
Pluralsight is offering all of their video courses for free this april.
Open UI
An open-source project to maintain a standard for UI and to promote its adherence and adoption.
AllTheFreeStock
A large list of free stock images, videos, music and more.
How to SSH Properly
A good guide about SSH by Gus Luxton on Gravitational.
How I Became a Better Programmer
A nice article by James Long, listing what things helped him becoming a better programmer.
colors.lol
A collection of overly descriptive color palettes.
Prettier 2.0 “2020”
The release notes for the most recent prettier release.
Video Puppet
A tool to generate videos from markdown files.
Animated Custom Cursor Effects
Some demos for interactive custom cursor animations using SVG filters by Codrops.
Motion Layout
A react library, which helps you link components together to animate them when changing views.
Web Skills
A visual overview of useful skills to learn as a web developer.
MVP.css
A CSS library, which styles the basic HTML elements. No CSS classes needed for a decent website styling.
Puddle.js
A fluid simulation library based on ASCII/Node and built using vanilla JS and CSS Grids.
CSS Section Separator Generator
A collection of customizable CSS section separators, with the possibility to easily copy the code.
CI/CD - Serverless Ebook
A tutorial on how to publish eBooks with Gitbook CLI, Github Pages, Github Actions CI/CD, and Calibre.
How to animate CSS and SVG's with AnimeJS
An article about working with SVG's and CSS in AnimeJS.
How to Build HTML Forms Right: Semantics
The start of a series of articles about getting HTML Forms right.
Parametric Color Mixer
An awesome tool for building color palettes, inspired by audio parametric equalizers.
simpleParallax.js
A tiny Vanilla JS library for adding a parallax effect on any image.
Animated Hamburger Icons
A nice React library for animated hamburger menus.
Awesome Javascript
A big list of Blogs, Books, People, Podcasts, Conferences, NewsLetters, Videos and Documentaries about JS.
Stop using isLoading booleans
An article by Kent Dodds about the downsides of isLoading booleans.
JavaScript CheatSheet
A nice reference for JavaScript, including the most important concepts of the language.
Jitsi Meet
A simple video conferencing solution, which is fully encypted and open source.
Background Scale Hover Effect
A cool background scale hover effect by Mary Lou of Codrops.
browser-2020
A list of amazing things modern browsers can do.
Essential Docker for Javascript and Front End Developers
A cool guide to getting started with Docker.
Slide to Subscribe
A super simple signup form, which can be included with one line of HTML.
Introduction to D3.js
An introduction to the JavaScript library for manipulating documents based on data.
Micromodal.js
A javascript library for accessible modal dialogs with less than 2kb.
Distorted Link Effects with SVG Filters
Cool ideas for link distortion effects using SVG filters by Mary Lou of Codrops.
Faux Code Generator
A generator that turns real code grom GitHub Gists into faux code SVG images.
Tailwind UI
Early access to beautiful UI components by Adam Wathan and Steve Schoger.
React Hook Form
Use React Hooks to create performant, flexible and extensible forms with easy-to-use validation.
SaaS landing page examples
A nice list of landing pages to get ideas and inspiration from.
How to brainstorm great business ideas
Courtland Allen of Indie Hackers shares his framework for coming up with great business ideas.
css.gg
A library of more than 500 minimalistic CSS icons, which are customizable and retina-ready.
Mailbrew
Create automated newsletters from your favorite resources on reddit, twitter and other sources.
Revealing Hero Effect
A small tutorial by Claudia Romano about adding a reveal on scroll to sections.
Create Diagonal Layouts Like It's 2020
A cool tutorial by Nils Binder how to craft diagonal sections in CSS.
Vue.js: The Documentary
A documentary by Honeypot about the story of Vue.js.
JavaScript Interview Questions: Common Gotchas
A nice article by Stephen Hartfield about the gotchas in interview questions about JavaScript.
7 Ways To Make Sure Your Website is ADA Compliant
An article by Carol Sankar about the things you can do to make your website accessible.
Google Lighthouse for Firefox
Google Lighthouse just published its plugin for the Firefox browser.
DesignValley
A big tool depository for things all around design.
Announcing TypeScript 3.8
The article by Microsoft about the new release of TypeScript 3.8.
5 Top Free Programming Books for Front-End Developers
A list of books for the self-taught front-end developer.
cra-template-redux
Yesterday the first release of the redux template for create-react-app was released.
Turbulence
A cool CodePen using animated SVG filter on hover.
GitHub CLI
The article by GitHub, introducing the new GitHub CLI and what it can do.
Learn UI Design Fundamentals
A free course about browser-based user interfaces using HTML and CSS only.
The JavaScript Way
A beginner-friendly, open source book about JavaScript.
Good first issue
A list of issues from popular open-source projects, which helps you make your first contribution.
DarkModeJS
A simple plugin, which helps to add a darkmode to your website.
Full Stack Open 2019
An open online course by University of Helsinki on modern web development with Javascript.
ScrollProgressBar
A lightweigt library for adding a scrollbar, which displays how far an user has scrolled.
Learn CSS Positioning
A cool interactive article by Ahmad Shadeed about how positioning works in CSS.
Neumorphism
A CSS Code generator for Soft-UI code.
Octomments
A cool alternative to Disqus for comments using GitHub issues.
Toggle dark/light theme based on your user's preferred scheme
An article about how to switch between the dark and the light theme based on the users preference.
UI/UX Design Trends for 2020
A list of twenty design trends, which might become more relevant in 2020.
24 modern ES6 code snippets to solve practical JS problems
A cool collection of snippets by Madza on dev.to.
Old CSS, new CSS
A good read about how CSS used to work and where we are now.
ESLint configuration and best practices
A nice post by Lucas Santoni about the best practices of eslint.
Vanilla Web Projects
A list of 20 projects by Brad Traversy, which are build without frameworks or libraries.
Intrinsic Sizing In CSS
An article by Ahmad Shadeed about extrinsic and intrisic sizing.
You Don't Know JS Yet
The 2nd edition of the book series is out. Definetly woth to check it out.
iHateRegex
A list of commonly used regular expressions - a usefull cheatsheet.
Image Dragging Effects
A set of cool dragging effects by Mary Lou from Codrops.
React Kawaii
A library of cute illustrations, which are also easily customisable.
The Complete Freelance Web Developer Guide
A detailed article by Luke Ciciliano how to make money through freelancing.
Awesome Stock Resources
A huge list of stock resources, including photography, videos, fonts icons and more.
Screen Size Map
An interactive map of the most popular screen sizes.
Introducing Yarn 2
An article by Maël Nison about the release of the new yarn version.
Dark Reader
A chorme and firefox extension to add a dark mode to any website.
IsometricSass
A sass library for isometric animations.
React Libraries
A curated database of popular React libraries.
CSS Gradient Animator
A website to generate an animated gradient background.
is-website-vulnerable
A cli tool to find vulnerabilities in your website npm wouldn't find.
GoatCounter
Simple, open source and privacy aware web statistics.
30 seconds of code
A collection of short code snippets for JavaScript, CSS, Python and React.
Next.js 9.2
Read about the latest release of Next.js and it's new features.
Proton Native
Create cross-platform desktop applications with React syntax.
Hero Patterns
A cool collection of repeatable SVG pattern backgrounds by Steve Schoger.
JamTemplates
A curated collection of free Gatsby templates.
cacolor.co
A good way to manage and share color palettes.
Gradient Magic
A huge collection of beautiful CSS gradients.
Craft.js
A react framework to create your own page editor. It comes with a drag-n-drop system and handles the way user components should be rendered, updated and moved.
How to move your project to TypeScript - at your own pace
A guide how to move your project to Typescript.
23 lesser known VS Code Shortcuts as GIF
A nice article by Andreas Müller about useful shortcuts for VS Code.
CSS-Only Carousel
A good article how to create a carousel with only CSS by Chris Coyier.
Colorsinspo
A cool website around colors - including palettes, tools, gradients, inspiration, tutorials and more.
DarkModeDesign
A list of resources for designing and building dark mode experiences.
Oh Shit Git!?!
It's easy to screw up using Git. This website helps you figuring out how to fix your mistakes.
Rhubarb
A lightweight WebSocket library optimized for multiplayer JS games, which works on WebWorkers with binary data.
Redux Style Guide
The new list of recommended patterns, best practices, and suggested approaches for writing Redux applications.
astuto
An open source customer feedback tool, helping to collect, manage and prioritize feedback from users.
Generative Placeholders
Use generative art for your placeholder images.
CoreUI Icons
1500+ simply beautiful open source icons in multiple formats SVG, PNG, and Webfonts.
Convert2Svg
A free and open-source tool to easily transform any image or photo into a multi colored svg vector file
Accessibility tools for designers and developers
A nice article by Lisa Dziuba about accessibility and tools to test it.
Just JavaScript
A new email course by Dan Abramov about the JavaScript Mental Models he uses.
The Most Hearted Of 2019
The most popular Pens from the year 2019 of Codepen. Definitely worth checking out.
Top GitHub Apps You Should Know About
A few, effective GitHub apps for your workflow.
Replacing Redux with observables and React Hooks
A good read how (and why) Simon Trény got rid of Redux with observables and React Hooks.
What Is JavaScript Made Of?
An interesting read by Dan Abramov about the details of Javascript.
V 8.0 Release
V8 is Google’s open source high-performance JavaScript and WebAssembly engine. It is used in Chrome and in Node.js, among others.
20 ways to become a better Node.js developer in 2020
A good read by Yoni Goldberg skills, technologies and considerations for Node.js in 2020.
Things end users care about but programmers don't
A list if things that end users would often like to see.
Nedux
A simplified version of redux. You don't have to create actions & reduces, just the store.
musicForProgramming
57 hours of non disturbing music to help you concentrate.
How to Use New CSS “:is()” for Easy Element Targeting
A nice article by tutspoint, about the usage of the new CSS ":is()".
No to Chrome
They are raising awareness of how Google is shaping the internet, your present and future for its own ends.
A Curated List Of Websites For Free SVG Illustrations
A list of websites for free SVG icons, I've gather thoughout the years.
The State of UX in 2020
From the tools we'll use, to our process, to the behaviors that will change the way we design — here's a list of what to expect for User Experience (UX) Design in the next year.
CSS: An Art, a Science, a Nightmare
An in depth article about CSS by Tania Rascia for people who have had to touch CSS a few times but ultimately don't feel like they know what they're doing, or struggle with making basic layouts.
react-spring
A simple, spring-physics based animation library that should cover most of your UI related animation.
Deep Sea
A really cool demo by Neal Agarwal. It's also totally worth to check out his other stuff!
Leonardo
A colors generator based on a desired contrast ratio for beautiful, accessible, and adaptive color systems.
Labels are a last resort
A good guide by the people of Refactorig UI about the usage of labels in UI.
6 GitHub Repos For Instant Knowledge Boost
Mirosław Farajewicz lists a bunch of smaller and more single-subject repositories.
CSS Layout
A collection of popular layouts and patterns made with CSS.
Responsive Image Breakpoints Generator
Easily generate the optimal responsive image dimensions.
Bootstrap Icons
Bootstrap is releasing Icons their very first icon set that’s designed entirely by their team. It's open sourced for everyone to use, with or without Bootstrap.
Making a Better Custom Select Element
An interesting article by Julie Grundy how to make a custom select element accessible.
JavaScript Christmas
A few days late, but this is a advent calendar with 24 days of articles about JavaScript.
Lighthouse CI
A possiblity to integrate Lighthouse into your CI, viewing the changes, and preventing regressions.
Button - Press for knowledge
An in-depth anatomy of Buttons.
Procedurally Generated SVG Landscapes
Kevin Wang wrote this great article how to create a generator for beautiful landscape svgs.
roughViz.js
A nice JavaScript library for creating sketchy/hand-drawn styled charts.
Checklist to avoid the most common accessibility errors
A nice article by Bruce Lawson about the most common accessibility errors and how to avoid them.
Free for developers
A list of software (SaaS, PaaS, IaaS, etc.) and other offerings that have free tiers for developers.
Colors, fonts and resources for web developers
Curated library of colors and fonts for Web Developers & Digital Designers and a curated collection of resources.
Developer Roadmaps
Step by step guides and paths to learn different tools or technologies.
Firefox Developer Tools Tips & Tricks
Curated series of 30 productivity tips and tricks that helps debugging web applications with the Firefox Developer Tools.
Pika
A package registry that handles formatting, configuring, building and publishing every package on the registry.
Fresh Folk -
An illustration library of people and objects with a range of poses, outfits and skin tones.
Divjoy
A nice templete generator including marketing pages, contact forms, pricing, faq, authentication and routing.
Animated CSS Background Generator
A collection of pure CSS animated backgrounds with the possibility to customize.
Postwoman - An API request builder
A free, fast, and beautiful alternative to Postman.