~/ruandre.com

Tools worth bookmarking

A working web developer's bookmarks: free tools for SVG, CSS and layout, format conversion, package inspection, icons, diagrams, benchmarking, and a stack of one-job utilities.

▷

My bookmarks bar is a graveyard. Something looks handy, I save it, and then I never think about it again. This is the opposite of that: the web development tools I keep going back to.

Getting context to a coding agent

  • npmx — a faster front end for the npm registry. Install size including transitive dependencies, ESM/CJS badges, outdated-dependency and OSV vulnerability warnings, provenance, and JSR cross-references. Handy for deciding whether a package is worth adding before you or an assistant reach for it.
  • Repomix — packs a whole repo into one file for pasting into a model. It respects .gitignore, counts tokens per file so you can see what’s eating the context window.
  • Gitingest — the same idea with no install. Get a text digest of the repo: summary, directory tree, file contents. Both of these are how I get a library’s real docs in front of an assistant.
  • Name That UI — describe an interface element in your own vague words and get back what it’s actually called, the API symbol for it, and a prompt you can hand to a coding agent.

Working out what you can ship

  • Can I use — still the first tab I open for a support question.
  • Web Features Explorer — the same data cut by Baseline status. Newly available, widely available, limited, discouraged; features missing from one engine; what shipped in the last release of each browser.
  • Browserslist — a playground for the query in your package.json. Type > 0.2% and not dead, see the browser list and the audience coverage it buys you.
  • Can I email — the same thing for email clients, which is a bleaker read but a necessary one.

CSS and layout

  • oklch.com — an OKLCH colour picker with the P3 and sRGB gamut boundaries drawn in, so you can see when a colour is about to fall out of range.
  • Easing Wizard — visual editor for CSS timing functions. Bézier curves, plus springs, bounce, wiggle, overshoot and jumps, with CSS or Tailwind output.
  • Utopia — fluid type and space calculators. Set a scale for a small screen and a large one, and it hands you the clamp() that interpolates between them, so you can drop most of the in-between breakpoints.
  • CSS Grid Generator — set columns, rows and gutters, drag out the areas, copy the CSS. Good for the first draft of a layout.
  • Layoutit Grid — the same idea with more room to work: draw the grid on a canvas and copy out the HTML and CSS together. Better when the layout has real structure.
  • Tailwind Grid Generator — drag out a grid and get Tailwind classes back as HTML or JSX, for when the project is on Tailwind and you don’t want raw CSS.

SVG

  • SVGOMG — Jake Archibald’s GUI for SVGO. Toggle each optimisation, watch the byte count fall against the original, and it works offline once loaded.
  • SVGR — paste an SVG and get a React component out, optimised, using currentColor and taking props. The playground mirrors the CLI and build-plugin options, so you can settle on a config here first.
  • Boxy SVG — a paid vector editor that runs in the browser (and as a desktop app). It writes clean, readable SVG rather than the tag soup most editors leave behind.

Icons, logos and loaders

  • Lucide and Phosphor — the two general-purpose icon sets I reach for. Lucide for a plain, consistent line set; Phosphor when I want weights (thin through fill) from one family.
  • SVGL — brand and product logos as SVG, with an API if you need them programmatically.
  • Lobe Icons — logos for AI providers and models specifically, which the general logo sets tend to be behind on.
  • Circle Flags — country flags as circles, all the same size and shape. Rectangular flags in a list never quite line up; these do.
  • LDRS and SVG loaders — spinners and loading indicators, HTML/CSS/SVG, as React or web components.
  • dot/matrix — 60 quiet dot-matrix loaders, each a self-contained SVG of about four kilobytes with the animation in CSS keyframes. No JavaScript, no GIFs, and they respect prefers-reduced-motion.

Converting code and data

  • Transform — a wall of converters in one place: JSON to TypeScript or Zod or Go, CSS to JS objects or Tailwind, HTML to JSX, SVG to components, and back the other way for most of them.
  • quicktype — feed it JSON, a JSON Schema or a URL and get typed models out in around twenty languages: TypeScript, Go, Rust, Swift, Kotlin and the rest.
  • AST Explorer — see the syntax tree for JavaScript, TypeScript, CSS, GraphQL and a long list of others, and prototype a codemod or lint rule against it with jscodeshift, Babel or ESLint.
  • snippet generator — turn a chunk of code into the JSON that VS Code, Sublime Text or Atom wants for a snippet, tab stops and all.

On the command line

  • explainshell — paste a long command and it breaks each flag out against the matching man-page line. Pipes and redirection included.
  • FFmpeg Buddy — tick the boxes for scale, trim, rotate or drop the audio, and it assembles the ffmpeg command you were about to go and search for.

Drawing and diagrams

  • Excalidraw — the hand-drawn whiteboard. Infinite canvas, end-to-end encrypted rooms for live collaboration, exports to PNG or SVG, and it keeps your work in the browser.
  • tldraw — a second infinite canvas, crisper than Excalidraw’s sketchy look. I reach for it when the diagram wants straight lines.
  • Kleki — a free browser paint app with layers, pen pressure and a proper set of brushes. Good for a quick sketch without opening anything heavier.
  • edit.photo — a browser photo editor that does the work locally; nothing gets uploaded. Handles JPEG, PNG, WebP, HEIC and GIF.
  • PostSpark — wraps a screenshot in a device frame and a background for posting.

Words and text

  • NotebookLM — upload your own sources and ask questions answered only from them, with citations back to the page. The audio overview turns a pile of documents into something you can listen to.
  • DeepL Write — fixes spelling and grammar and offers a few rephrasings of a sentence. I trust its ear for tone more than the usual grammar checkers.
  • DeepL Translator — the translation I reach for over Google Translate; the phrasing tends to come out more natural.
  • Detergent — paste in the copy a stakeholder sent you and get it back cleaned: invisible characters stripped, straight quotes curled, entities encoded, widows removed.
  • RegExr — a regex editor that explains each token as you build it, against your own test text.

Smaller things

  • BenchJS and tinybench — benchmarking two ways. BenchJS runs and compares JavaScript in the browser with a shareable URL; tinybench is the same statistics as a tiny, zero-dependency library for your own repo.
  • PDFTool — merge, split, rotate, sign, OCR and encrypt PDFs, all in the browser via WebAssembly. Nothing is uploaded; pull the network cable and it still works.
  • JSON to YAML — exactly that, both directions, for when you don’t need the whole of Transform.

Newsletters

  • Web Weekly — Stefan Judis rounds up web-platform news every Monday: new browser features with their Baseline status, an MDN fact, and a tiny helper or two.
  • React Status — a weekly, hand-picked React digest from Cooperpress. Hooks, patterns, performance, React Native, the ecosystem worth tracking.

If you have one that belongs here, I’d like to hear about it.