Almost every day, while reading news and social media posts, I stumble across small web tools that can make developer life immensely easier. In order not to lose sight of them, I collect them in Obsidian and automatically generate this list out of it.
Tiny Tools
12ft Ladder
https://12ft.io/Shows a paywalled website as the Google crawler sees it ... without the paywall
Accessible Palette
https://accessiblepalette.comCreate color systems with consistent lightness and contrast
Address Autocomplete API
https://adresssuche.toyumobility.de/High-performance, open-source German address search with intelligent fuzzy matching, typo tolerance, and reverse geocoding. Free to use for developers.
Alchemize
https://alchemizeapp.comA free app to minimize, pretty print, and inspect HTML, CSS, Javascript, JSON, or XML
All Characters
https://aymkdn.github.io/charactersA simple page that shows all the different characters and their HTML code
Analyse your HTTP response headers
https://securityheaders.com/Quickly and easily assess the security of your HTTP response headers
AnimatiSS
https://xsgames.co/animatiss/A nice, colorful collection of CSS animations for your projects
Animista
https://animista.net/playAnimista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use
Bigjpg
https://bigjpg.com/enAI Super-Resolution lossless image enlarging / upscaling tool using Deep Convolutional Neural Networks
Bridgy
https://brid.gy/Bridgy connects your web site to social media. Likes, retweets, mentions, cross-posting, and more...
Browser Default Styles
https://browserdefaultstyles.comSearch against any element for standardized and default styles from all major rendering engines (WebKit, Blink, Gecko, Trident)
CSS Code Quality Analyzer
https://www.projectwallace.com/css-code-qualityThe best way to analyze your CSS is to use the CSS analyzer, but if you're in a hurry or if you want an opinionated tool, then you can use this CSS Code Quality analyzer.
CSS Filter Generator
https://www.cssfiltergenerator.com/CSSFilterGenerator produces CSS filters and mix-blend-mizode overlay code using a graphical user interface.
CSS Gradient Generator
https://www.joshwcomeau.com/gradient-generator/Create beautiful, lush gradients
CSS Grid Generator
https://cssgrid-generator.netlify.app/You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.
CSS Shadow Palette Generator
https://www.joshwcomeau.com/shadow-paletteCreate a set of lush, realistic CSS shadows
CSS clip-path Editor
https://codepen.io/stoumann/full/abZxoOMGenerate clip-path CSS code, based on editable templates.
Cleanup.pictures
https://cleanup.pictures/Remove objects, people, text and defects from any picture
ColorPalette Pro
https://colorpalette.pro/Synthesizer-styled color palette generator - Generate customizable color palettes in advanced color spaces that can be easily shared, downloaded, or exported
Compress Or Die
https://compress-or-die.com/analyzeShow metadata (Exif, IPTC, ICC...) hidden inside your photos
Convert variable font TTF to WOFF2
https://webfont.yabe.land/en/misc/convert-ttf-woff2Google Fonts f.e. sometimes only offers TTF files, but the compressed WOFF2 Webfonts are smaller for using on website. This tool converts them easily.
Cryptii - Unicode Lookup
https://cryptii.com/pipes/unicode-lookupWeb app offering modular conversion, encoding and encryption online.
Device.js
https://erovas.github.io/Device.js/Helpy small tool, to get some device features, such as the different widths, heights, orientation, full screen, mobile or desktop, height of the navigation bar, etc.
DiceBear Avatars
https://www.dicebear.com/Create avatars for your profiles, designs, websites or apps. Piece by piece or based on a seed.
Easing Gradients
https://larsenwork.com/easing-gradients/Supercharge your gradients with non-linear color mix and custom color spaces.
Favicon Generator for real
https://realfavicongenerator.net/The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages.
Favicon Generator
https://www.favicon.software/Generate favicons online and in-browser from an image or logo for free
Fediverse Observer
https://mastodon.fediverse.observer/mapFediverse Observer checks all servers in the Fediverse and offers you an easy way to find a home using a map or list
Flowbite
https://flowbite.com/icons/Collection of free and open-source SVG icons compatible with Flowbite and Tailwind CSS based on solid and outline styles with React (JSX) and Figma support
GitHub Contributions Chart Generator
https://github-contributions.vercel.app/Visualize your GitHub contributions in a customized image
Google Title Rewrite Checker
https://www.seowl.co/title-rewrite-checker/Because SEO should be accessible, you can use this free tool to check if Google is rewriting the title of a list of pages
Granary
https://granary.io/Fetches and converts data between social networks, HTML and JSON with microformats2, ActivityStreams 1 and 2, Atom, RSS, JSON Feed, and more.
HTML Arrow Symbols, Entities and Codes
https://www.toptal.com/designers/htmlarrows/arrows/HTML Arrows is a comprehensive reference website for finding HTML symbol codes and entities, ASCII characters and Unicode hexadecimal values to use in your web design.
HTTP Status Codes
https://httpstatuses.com/HTTP Status Code directory, with definitions, details and helpful code references.
Haikei
https://app.haikei.app/A web-based design tool to generate unique SVG design assets for websites, social media, blog posts, desktop and mobile wallpapers, posters, and more! Our generators let you discover, customize, randomize, and export generative SVG design assets ready to use with your favorite design tools.
Huemint
https://huemint.comHuemint uses machine learning to create unique color schemes for your brand, website or graphic
IP2Location.io
https://www.ip2location.io/IP2Location.io provides a fast and accurate IP Geolocation API tool to determine a user's location
Iconoir
https://iconoir.com/Iconoir is one of the biggest open source libraries with currently 1007 SVG Icons.
Icons - Google Fonts
https://fonts.google.com/iconsMaterial Icons are available in five styles and a range of downloadable sizes and densities. The icons are based on the core Material Design principles and metrics.
Icônes
https://icones.js.org/Great and very useful collection of icon collections, to find and bundle the icons you need
IndieLogin.com
https://indielogin.com/IndieLogin.com makes it easy to add web sign-in to your applications
JSON Hero
https://jsonhero.ioOpen-Source JSON explorer for the web that lets you browse, search and navigate your JSON files at speed.
Loadership
https://www.loadership.comLoaderShip is a CSS-only loader configuration tool that allows you to customize and generate stunning loaders for your website.
Maskable.app
https://maskable.app/editorMaskable.app Editor lets you generate maskable PWA icons before adding them to your web app manifest.
Mastodon List Manager
https://www.mastodonlistmanager.orgManager for Mastodon lists to separate user groups for easier reading
Modern fluid typography editor
https://modern-fluid-typography.vercel.app/Generate fluid typography CSS
Multi Screen Test
http://whatismyscreenresolution.net/multi-screen-testTest your website at different screen resolutions.
Node.js Toolbox
https://nodejstoolbox.com/Find actively maintained and popular libraries in the Node.js ecosystem
Non Boring Gradients
https://non-boring-gradients.netlify.app/Web tool for generating gradients by selecting different interpolation spaces and easing.
OddContrast
https://www.oddcontrast.com/This tool lets you check color contrast ratios using modern CSS formats
Omatsuri
https://omatsuri.app/Progressive Web Application with 12 open source frontend focused tools
Online CSS Analyzer
https://www.projectwallace.com/analyze-cssAnalyze CSS is an online tool that analyzes your website’s CSS
OpenGraph.xyz
https://www.opengraph.xyz/Preview Social Media Share and Generate Metatags - OpenGraph
PWABuilder
https://www.pwabuilder.com/imageGeneratorGenerates all necessary images for a PWA manifest
ProductShot
https://productshot.app/Generate better performing screenshots by focusing the user's attention.
QR Code Styling
https://qr-code-styling.com/An open source JS library for generating styled QR codes
Redirect Detective
https://redirectdetective.com/Redirect Detective – Analyze redirects without opening them yourself
RegExr
https://regexr.com/RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).
SSL Checker
https://decoder.link/Verify that your SSL certificate is installed correctly, identify installation issues if any.
SVG Gobbler
https://www.svggobbler.com/Download icons, logos, and vector SVGs from any site via Chrome or Firefox extension
SVG Path Visualizer
https://svg-path-visualizer.netlify.appDescribes a SVG path in natural language
SVG Repo
https://www.svgrepo.com/Browse 300.000+ SVG Vectors and Icons. Explore, search and find the best fitting icons or vectors for your projects using wide variety vector library.
SVGOMG
https://jakearchibald.github.io/svgomg/UI for SVG Optimizer, a Node.js-based tool for optimizing SVG vector graphics files.
Share a One Time Secret
https://onetimesecret.com/Keep sensitive info out of your email and chat logs by creating a one-time link to send to your recipient.
Share a secret
https://scrt.link/Share a secret with a link that only works one time and then self-destructs.
SlidesCodeHighlighter
https://romannurik.github.io/SlidesCodeHighlighter/Create syntax-highlighted code for your slide decks.
Squoosh
https://squoosh.app/Compress and compare images with different codecs, right in your browser
Tabler Icons
https://tabler-icons.io/Free and open source icons designed with attention to detail to make your design stand out.
TempMail4U
https://tempmail4u.com/Keep your inbox safe with our free temporary email service. Get instant temp mail to block spam, stay private, and skip sign-ups, no registration needed!
Test for modern Internet Standards
https://internet.nl/Test for modern Internet Standards like IPv6, DNSSEC, HTTPS, TLS, HSTS, DMARC, DKIM, SPF, STARTTLS and DANE.
Text to SVG
https://text-to-svg.com/abril-fatface-font-to-svgConvert text to SVG paths quickly and easily
The good line-height
https://www.thegoodlineheight.com/Tool to calculate the exact number of the right line-height for every text size in the scale, so it always fits the baseline grid!
Tint and Shade Generator
https://maketintsandshades.com/Easily make tints and shades that match the output of Chrome DevTools, PostCSS, and Sass.
Tiny Helpers
https://tiny-helpers.dev/A collection of free single-purpose online tools for web developers.
TinyJPG
https://tinyjpg.com/Make your website faster and save bandwidth. TinyJPG is the best automatic JPEG optimizer and compresses your JPEG images by 40-60%!
TinyWow
https://tinywow.com/Create, convert or manipulate PDF, XML, CSV, images, videos and more with different tools
Toools Cloud Glob Tester
https://toools.cloud/files-and-folders/glob-pattern-tester/Visualise and Test Glob Pattern Matching Online
Type Scale Visual Calculator
https://type-scale.com/Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.
UI Gradient Generator
https://learnui.design/tools/gradient-generator.htmlCreate gorgeous, buttery-smooth color gradients for UI design. Export as CSS or SVG image.
URL-encoder for SVG
https://yoksel.github.io/url-encoder/Convert SVG image code into CSS for background image
Unicode Arrows
https://unicodearrows.com/all-arrowsCollection of Unicode arrows for using on websites
VISIWIG Indie Icons
https://www.visiwig.com/icons/Click + Paste Graphics - that elevates your your website and brand visuals
Vert
https://vert.sh/convert/Convert image, audio, video, and document files to several formats in batch mode. Open Source and free.
Video Splitter
https://huayemao.run/video-splitterA local, browser‑based video splitter — no install, no upload. Choose between fast mode and precise mode, powered by FFmpeg WASM to slice by seconds.
Video to JPG
https://videotojpg.com/Video to JPG is a free online tool to extract high-quality images from your videos.
Vytal
https://vytal.io/Vytal shows you what traces your browser leaves behind while surfing the web.
Webmention Rocks!
https://webmention.rocks/Webmention Rocks! is a validator to help you test your Webmention implementation. Several kinds of tests are available on the site.
WhatTheDuck
https://whattheduck.incentius.com/Run SQL queries against your CSV files right in the browser
Wicked Backgrounds
https://wickedbackgrounds.com/backgrounds.htmlCreate beautiful backgrounds waves for your illustrations.
World in Dots
https://www.worldindots.com/Create vector dotted maps with custom options and download them as SVG or PNG files
compressImage.io
https://compressimage.io/Compress JPG and PNG images at light speed with Browser based Image compressor.
css.gg
https://css.gg/Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
dropmail.me
https://dropmail.me/en/Create a temporary email. For 10 minutes or more. Anonymous email service allows you to receive emails for a safe registration on sites and services. Unlimited mailbox lifetime. No registration. Unlimited mailbox size. Attachments allowed.
fediverse.space
https://fediverse.space/instance/indieweb.socialfediverse.space is a tool to visualize networks and communities on the fediverse.
gathio
https://gath.io/Create and share events that act as a Fediverse actor others can follow and comment
gradient.style
https://gradient.styleCreate HDR Gradients with this interactive tool from Adam Argyle.
grep.app
https://grep.app/Search Code Across a Half Million GitHub Repos — A code search engine that lets you use regexes or syntax in your search
hue.tools
https://hue.tools/Tools for mixing, blending and modify colours with several interpolation modes
link-to-qr
https://link-to-qr.com/Free beautiful QR codes. Add/remove borders. Add text, use transperant background, apply any color.
myScale SVG Icon Resizer
https://webkul.github.io/myscale/Small Lightweight Tool scratched in Pure JavaScript to Quickly Resize and Convert SVG to PNG
npmgraph
https://npmgraph.js.org/Show interactive dependency graph of a npm module or analyze your complete package.json
regex101
https://regex101.com/Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java. Features a regex quiz & library.
remove.bg
https://www.remove.bgRemove Image Background: 100% automatically – in 5 seconds – without a single click – for free.
useAnimations
https://useanimations.com/Animated icons in Lottie Framework and for immediate implementation to your apps or websites.
web.dev Measure
https://web.dev/measure/See how well your website performs. Then, get tips to improve your user experience.