~/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, then 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. Good for deciding whether a package is worth adding, before you or an assistant reaches for it.
  • Repomix. Packs a whole repo into one file for pasting into a model. It respects .gitignore and counts tokens per file, so you can see what’s eating the context window.
  • Gitingest. The same idea with no install. You get a text digest of the repo: summary, directory tree, file contents. Both 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 to 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

  • Gemini Notebook. 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 sound 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 packages the same benchmarks into 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, etc.

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