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 have created a collection in Trello, which are automatically listed here.
Image Candy - Online Image Editor
https://imgcandy.com/Edit images online with the complete image processing toolkit.
Favicon Generator
https://www.favicon.software/Generate favicons online and in-browser from an image or logo for free
npmgraph
https://npmgraph.js.org/Show interactive dependency graph of a npm module or analyze your complete package.json
WhatTheDuck
https://whattheduck.incentius.com/Run SQL queries against your CSV files right in the browser
Exifr Demo
https://mutiny.cz/exifr/This demo page of the EXIFR library is great for getting a quick overview of the metadata of an image
Color Picker Tool | 0to255
https://www.0to255.comsChoose colors for your logo, website, business, room, or print design project. Adjust colors quickly and easily
Test for modern Internet Standards like IPv6, DNSSEC, HTTPS, DMARC, STARTTLS and DANE.
https://internet.nl/Test for modern Internet Standards like IPv6, DNSSEC, HTTPS, TLS, HSTS, DMARC, DKIM, SPF, STARTTLS and DANE.
OddContrast
https://www.oddcontrast.com/This tool lets you check color contrast ratios using modern CSS formats
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
QR Code Styling
https://qr-code-styling.com/An open source JS library for generating styled QR codes
Bigjpg
https://bigjpg.com/enAI Super-Resolution lossless image enlarging / upscaling tool using Deep Convolutional Neural Networks
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
Maskable.app
https://maskable.app/editorMaskable.app Editor lets you generate maskable PWA icons before adding them to your web app manifest.
Easing Gradients
https://larsenwork.com/easing-gradients/Linear gradients often have hard edges where they start and/or end. We can avoid those by controlling the color mix with easing functions.
OpenGraph.xyz
https://www.opengraph.xyz/Preview Social Media Share and Generate Metatags - OpenGraph
Mastodon List Manager
https://acbeers.github.io/mastodonlm/mainManager for Mastodon lists to separate user groups for easier reading
GitHub Contributions Chart Generator
https://github-contributions.vercel.app/Visualize your GitHub contributions in a customized image
12ft Ladder
https://12ft.io/Shows a paywalled website as the Google crawler sees it ... without the paywall
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.
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.
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
fediverse.space
https://fediverse.space/instance/indieweb.socialfediverse.space is a tool to visualize networks and communities on the fediverse.
IndieLogin.com
https://indielogin.com/IndieLogin.com makes it easy to add web sign-in to your applications
Bridgy
https://brid.gy/Bridgy connects your web site to social media. Likes, retweets, mentions, cross-posting, and more...
PWABuilder
https://www.pwabuilder.com/imageGeneratorGenerates all necessary images for a PWA manifest
AnimatiSS
https://xsgames.co/animatiss/A nice, colorful collection of CSS animations for your projects
IP2Location.io
https://www.ip2location.io/IP2Location.io provides a fast and accurate IP Geolocation API tool to determine a user's location
Request Map
https://requestmap.webperf.tools/render/220602_BiDc3P_74TVisual request map of third-party services
[Array Builder]
https://www.arraybuilder.com/Array Builder is a free tool to visualize the returned values of array transformations and computations made from map/filter/reduce.
hue.tools
https://hue.tools/Tools for mixing, blending and modify colours with several interpolation modes
Icônes
https://icones.js.org/Great and very useful collection of icon collections, to find and bundle the icons you need
TinyWow - Free PDF, Video, Image & Other Online Tools
https://tinywow.com/Create, convert or manipulate PDF, XML, CSV, images, videos and more with different tools
Cryptii - Unicode Lookup
https://cryptii.com/pipes/unicode-lookupWeb app offering modular conversion, encoding and encryption online.
Iconoir | Free Icons
https://iconoir.com/Iconoir is one of the biggest open source libraries with currently 1007 SVG Icons.
CSS Gradient Generator
https://www.joshwcomeau.com/gradient-generator/Create beautiful, lush gradients
Non Boring Gradients
https://non-boring-gradients.netlify.app/Web tool for generating gradients by selecting different interpolation spaces and easing.
ffflux → Online SVG Fluid Gradient Background Generator
https://fffuel.co/ffflux/SVG generator for fluid gradient backgrounds
Modern fluid typography editor
https://modern-fluid-typography.vercel.app/Generate fluid typography CSS
CSS Shadow Palette Generator
https://www.joshwcomeau.com/shadow-palette/?utm_source=CSS-Weekly&utm_campaign=Issue-482&utm_medium=RSSCreate a set of lush, realistic CSS shadows
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
Cleanup.pictures
https://cleanup.pictures/Remove objects, people, text and defects from any picture
Online CSS Analyzer
https://www.projectwallace.com/analyze-cssAnalyze CSS is an online tool that analyzes your website’s CSS
MConverter: Easy to Use Online File Converter
https://mconverter.eu/Convert videos, images, documents, audio files and much more.
Share a secret
https://scrt.link/Share a secret with a link that only works one time and then self-destructs.
Accessible Palette
https://accessiblepalette.com/?lightness=98.2,93.9,85,76.2,67.4,57.8,48,40.2,31.8,24.9&fe6400=0,0&f8d147=0,-10&56d25b=0,0&0088cb=0,0&397ae5=1,15&69788f=0,0&808080=0,0Create color systems with consistent lightness and contrast
Share a secret - One Time
https://onetimesecret.com/Keep sensitive info out of your email and chat logs by creating a one-time link to send to your recipient.
SVGOMG - UI for SVG Optimizer
https://jakearchibald.github.io/svgomg/UI for SVG Optimizer, a Node.js-based tool for optimizing SVG vector graphics files.
Vytal
https://vytal.io/Vytal shows you what traces your browser leaves behind while surfing the web.
Redirect Detective - Discover where those redirects really go to
https://redirectdetective.com/Redirect Detective – Analyze redirects without opening them yourself
SVG Gobbler
https://www.svggobbler.com/Download icons, logos, and vector SVGs from any site via Chrome or Firefox extension
Wicked Backgrounds
https://wickedbackgrounds.com/backgrounds.htmlCreate beautiful backgrounds waves for your illustrations.
Unicode Arrows
https://unicodearrows.com/all-arrowsCollection of Unicode arrows for using on websites
Compress Image Online | compressImage.io
https://compressimage.io/Compress JPG and PNG images at light speed with Browser based Image compressor.
Yellow Lab Tools - Page Speed audit
https://yellowlab.tools/Online test to help speeding up heavy web pages
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.
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.
css.gg
https://css.gg/Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
RANDOM.ORG - String Generator
https://www.random.org/strings/?num=10&len=10&digits=on&upperalpha=on&loweralpha=on&unique=on&format=html&rnd=newGenerate random strings
VISIWIG - Indie Icons
https://www.visiwig.com/icons/Click + Paste Graphics - that elevates your your website and brand visuals
SlidesCodeHighlighter
https://romannurik.github.io/SlidesCodeHighlighter/Create syntax-highlighted code for your slide decks.
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.
ProductShot
https://productshot.app/Generate better performing screenshots by focusing the user's attention.
regex101: build, test, and debug regex
https://regex101.com/Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java. Features a regex quiz & library.
Waterfaller
https://waterfaller.dev/Site owners and digital marketers use Waterfaller as as an alternative to Google PageSpeed Insights to find and fix problems with page speed and core web vital scores.
dropmail.me - Email for 10 minutes or more
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.
UI Gradient Generator
https://learnui.design/tools/gradient-generator.htmlCreate gorgeous, buttery-smooth color gradients for UI design. Export as CSS or SVG image.
Compare your Page Speed
https://pagespeed.compare/Compare performance metrics of your pages against each other or your competitors using Google PageSpeed Insights.
Easing Gradients
https://larsenwork.com/easing-gradients/Supercharge your gradients with non-linear color mix and custom color spaces.
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.
Type Scale - A Visual Calculator
https://type-scale.com/Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.
Omatsuri
https://omatsuri.app/Progressive Web Application with 12 open source frontend focused tools
myScale - Quick SVG Icon Resizer
https://webkul.github.io/myscale/Small Lightweight Tool scratched in Pure JavaScript to Quickly Resize and Convert SVG to PNG
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.
URL and website scanner - urlscan.io
https://urlscan.io/Website scanner for suspicious and malicious URLs
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.
JPEG.rocks: Privacy-aware JPEG optimizer
https://jpeg.rocks/Browser-based, privacy-aware JPEG optimizer
Tabler Icons: over 1250 vector icons for web design
https://tabler-icons.io/Free and open source icons designed with attention to detail to make your design stand out.
RegExr: Learn, Build, & Test RegEx
https://regexr.com/RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).
remove.bg
https://www.remove.bgRemove Image Background: 100% automatically – in 5 seconds – without a single click – for free.
Favicon Generator for perfect icons on all browsers
https://realfavicongenerator.net/The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages.
useAnimations
https://useanimations.com/Animated icons in Lottie Framework and for immediate implementation to your apps or websites.
Responsinator
https://www.responsinator.com/The Responsinator is designed to test responsive websites on different device resolutions
Multi Screen Test
http://whatismyscreenresolution.net/multi-screen-testTest your website at different screen resolutions.
CSS Filter Generator
https://www.cssfiltergenerator.com/CSSFilterGenerator produces CSS filters and mix-blend-mizode overlay code using a graphical user interface.
CSS clip-path Editor
https://codepen.io/stoumann/full/abZxoOMGenerate clip-path CSS code, based on editable templates.
Tint and Shade Generator
https://maketintsandshades.com/Easily make tints and shades that match the output of Chrome DevTools, PostCSS, and Sass.
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!
link-to-qr
https://link-to-qr.com/Free beautiful QR codes. Add/remove borders. Add text, use transperant background, apply any color.
Color Contrast & Color Perception Accessibility Checker
https://www.websitehostingrating.com/color-contrast-perception-checker/This tool lets you check the color contrast between different color pairings and check for common color perceptions against WCAG accessibility standards.
google webfonts helper
https://google-webfonts-helper.herokuapp.com/fontsA Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets!
webhint's online scanner
https://webhint.io/scanner/Analyze any public website using webhint's online tool
web.dev Measure
https://web.dev/measure/See how well your website performs. Then, get tips to improve your user experience.
TinyJPG – Compress JPEG images intelligently
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%!
SSL Checker
https://decoder.link/Verify that your SSL certificate is installed correctly, identify installation issues if any.
Squoosh
https://squoosh.app/Compress and compare images with different codecs, right in your browser
Analyse your HTTP response headers
https://securityheaders.com/Quickly and easily assess the security of your HTTP response headers
Open Graph (OG) Meta Tags Checker
https://www.opengraph.xyz/Check how search engines and social medias such as Google, Facebook, Twitter display your website.
jpeg.io - Convert any major image format into a highly optimized JPEG
https://www.jpeg.io/Convert any major image format into a highly optimized JPEG
HTTP Status Codes — httpstatuses.com
https://httpstatuses.com/HTTP Status Code directory, with definitions, details and helpful code references.
FA Icons - Copy Font Awesome Icons as SVG
https://faicons.devEasily copy your favorite icons from Font Awesome as SVG
Browser Default Styles
https://browserdefaultstyles.comSearch against any element for standardized and default styles from all major rendering engines (WebKit, Blink, Gecko, Trident)
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
All Characters
https://aymkdn.github.io/charactersA simple page that shows all the different characters and their HTML code
Alchemize
https://alchemizeapp.com/appA free app to minimize, pretty print, and inspect HTML, CSS, Javascript, JSON, or XML
All – Tiny Helpers
https://tiny-helpers.dev/A collection of free single-purpose online tools for web developers.
