r/webdev • • Sep 02 '26

Resource What are the best tools you’ve discovered over the years?

Let’s share hidden gem tools, not the usual stuff that shows up in every "top developer tools" post, but smaller tools and projects that made you think, "wait, this is actually really useful."

I'll start with 3 I've come across:

1. Archify
https://github.com/tt-a1i/archify

Found this recently. It's an agent skill that works with Claude Code, Cursor and Codex and basically turns a codebase into an interactive architecture map.

You can export it as HTML/PNG/SVG/WebM, and one thing I thought was pretty cool is that you can diff the architecture before a merge to see how a PR changes the system.

2. boneyard-js
https://boneyard.vercel.app

Generates skeleton screens from your actual UI instead of making you manually recreate the layout with placeholder components.

Pretty nice alternative to manually maintaining react-loading-skeleton stuff.

3. Gradient Studio
https://gradientsaas.blogspot.com

Simple procedural CSS gradient generator.

Has stuff like mesh gradients, aurora effects and grain. You mess with the settings and copy the result as CSS, Tailwind or SCSS.

I've been using it mostly for quick landing page backgrounds.

What's one tool you keep recommending that somehow still isn't very well known?

220 Upvotes

76 comments sorted by

146

u/Octoclops8 Sep 02 '26

35

u/[deleted] Sep 02 '26

[removed] — view removed comment

22

u/actionscripted Sep 02 '26

Also a CSS garden, but more…zen: https://csszengarden.com

8

u/[deleted] Sep 02 '26 edited 16d ago

[deleted]

1

u/bzbub2 Sep 02 '26

oh gosh

2

u/helpinghandful Sep 02 '26

I personally prefer my CSS gardens with CSS 🥕 and ponds with CSS 🐸

2

u/RemoDev Sep 02 '26

50+ yo,  right?

I feel at home now...

1

u/stumblinbear Sep 03 '26

caniuse is a GOAT

32

u/HiKite Sep 02 '26 edited Sep 02 '26

For regex;

  • regex101 is amazing for testing the regex patterns up against certain inputs/texts
  • For debug purposes Debuggex is super nice to use too as it visually shows what the regex does (better than regex101 IMO).

11

u/avidvaulter Sep 02 '26

regexr probably the better tool. does both of those things and explains the regex while also providing reference cheatsheets.

26

u/godhand_infamous Sep 02 '26

does lazygit counts?

8

u/oh_jaimito front-end Sep 02 '26

Can't mention lazygit without lazydocker.

5

u/OiFelix_ugotnojams Sep 02 '26

I found ugit which supposedly helps undo git commands. But I never used it myself

17

u/SergOutdoors Sep 02 '26

A few I don't see mentioned much:

ripgrep (rg) - grep but stupidly fast on big repos. Haven't touched plain grep since.
fzf - fuzzy finder for the terminal, pipe anything into it. I use it for files, branches, command history, all of it.
Excalidraw - hand-drawn-style diagrams. Great for sketching architecture mid-call without it looking like you spent an hour on it.
lazygit - terminal UI for git. Finally made me understand what my rebases were actually doing instead of just praying.

10

u/Khavel_dev Sep 02 '26

just (the command runner, not the word). Replaced make in every repo for me. Cross-platform, sane syntax, and running just with no args prints the available commands. New people on the team stop asking "how do I run the tests" on day one.

mkcert for local HTTPS. Real trusted certs in 30 seconds, no Chrome warnings, no OAuth callback pain.

21

u/Designer_Piece7723 Sep 02 '26

boneyard-js is interesting, manually maintaining skeleton components is such a time sink for no reason

one I keep pushing people to try is a tiny CLI called entr, it reruns any command when files change, way simpler than setting up nodemon or watch mode for random scripts

12

u/case2000 Sep 02 '26

https://www.charlesproxy.com/ is great for visibility into everything using your network.

2

u/Punsire Sep 02 '26

Is wire shark a comparable program?

3

u/flamey Sep 02 '26

yes, this is a popular alternative

5

u/osiux Sep 02 '26

https://gchq.github.io/CyberChef/

A simple, intuitive web app for analysing and decoding data without having to deal with complex tools or programming languages. CyberChef encourages both technical and non-technical people to explore data formats, encryption and compression.

1

u/Web-Dude Sep 03 '26

Give me an example use case.

6

u/DailyDrivels Sep 02 '26

For osX, my first install whenever I get a new machine is Chrome, then Rectangles. I love living windows to the correct half screen with just few keystrokes. 

1

u/ExecutiveChimp Sep 02 '26

Does OSX still not have this as native functionality? Or does Rectangle provide something extra?

5

u/Healthy-Wishbone1471 Sep 02 '26

desktop goose is not related to programming, is registered by your system as a virus, hasn't been updated since 2021, and is annoying in every possible way. I love it.

3

u/saramaganta Sep 02 '26 edited Sep 02 '26

Not too long ago I discovered Mole for cleaning my Mac as it was running out of disk space constantly. Turned out Docker was a huge contributor...

Also Beyond Compare is great for diffing. I highly prefer it over my internal IDE tool

2

u/h2ooooooo Sep 02 '26

In terms of figuring out what is taking space I use ncdu on UNIX servers and WizTree on Windows.

3

u/SquareWheel Sep 02 '26

TinyPng for simple image quantization (lossy web compression), and Squoosh for granular compression and conversion.

Stop sending one megabyte images down the pipe to users.

2

u/Background-Front-925 Sep 02 '26

I use Squoosh but the last commit is 2 years ago and is browser only but gets the job done perfectly. Is there any tool that can be use in nodejs environment?

5

u/jo3la Sep 02 '26

Plenty of browser based tools: https://codeshack.io/tools/

I've been using this site since early 2020s (before AI)

2

u/rbobby full-stack Sep 02 '26

Dr Explain is a nice way to produce web based manuals.

VisualBuildPro is a gui based build engine. I like it because its gui, and I can do steps, even subroutines (gah I did this), macros... the whole magilla. I especially like it because my sole/one use is to build an application from source repository to self extracting exe based installer. All with one F5 key press. And the best thing about it... it's visual. I don't have to hunt and peck through a zillian files... it's in a nice tree right there. Each step has a nice gui screen of the parameters. Even spots for names and descriptions. And network share silliness if you need. All in all it's really good for something really important but also really rarely touched.

Could I have used MSBuild to do the whole thing? Sure. But so much pain. So much pain.

2

u/Bright-District9739 Sep 02 '26

Two from the ops side of a small project, both boring, both saved me.

healthchecks.io as a dead-man switch. My nightly backup job sat dead for 14 days under launchd and nothing told me, because the job that was supposed to alert was the job that died. Now the last line of the script pings a URL and silence for a day is the alert. Free tier covers a handful of checks.

qpdf --qdf for any PDF you need to actually read. It rewrites the file with objects uncompressed and in order, so the thing opens in a text editor and you can see what a "save" really changed. Pairs well with grep -c '%%EOF' to count how many times a file was appended to.

4

u/forgestudiofx Sep 02 '26

Not a package, more a two-line habit in my release script that has saved me twice: after the build, unzip the artifact and confirm the JS bundle is actually inside it.

I shipped a React Native release AAB that installed fine and opened to a white screen. Nothing failed in the build. gradle saw a stale generated bundle, decided it was up to date, and packaged no JS at all. Deleting the generated bundle before the build is the fix, but the only thing that catches it before users do is listing the archive contents and looking for index.android.bundle.

Costs nothing to add, and a missing bundle shows up in none of the dashboards you'd normally check.

1

u/[deleted] Sep 02 '26

[removed] — view removed comment

1

u/webdev-ModTeam Sep 02 '26

We do not allow any commercial promotion or solicitation. This can lead to a permanent ban from the subreddit.

1

u/[deleted] Sep 02 '26

[removed] — view removed comment

1

u/webdev-ModTeam Sep 02 '26

We do not allow any commercial promotion or solicitation. This can lead to a permanent ban from the subreddit.

1

u/InsuranceMedical6581 Sep 02 '26

I’m on Mac so ymmv

TinyGit.app for gui git client
Patterns app for regex testing
Placeholder.co for fpo images (rip fillmurray)

1

u/vrrtvrrt Sep 02 '26

Gradient Studio is great, thanks.

1

u/[deleted] Sep 02 '26

[removed] — view removed comment

1

u/webdev-ModTeam Sep 10 '26

We do not allow any commercial promotion or solicitation. This can lead to a permanent ban from the subreddit.

1

u/Background-Top5188 Sep 03 '26

Perhaps not devrelated per se but 10 cookies for handbrake (video encoder) and gifski (make gifs heh).

I use both of them in combination with my own custom bash command that extract images every N ms and zips them up so I can send that zip to chatgpt for analysis, as it doesn’t understand neither videos nor gifs (classic doesyat the least 🤷)

Screen record -> compress with handbrake -> make gif -> extract and zip frames from gif. Also use record -> handbrake -> gifski for the eventual social media posts about projects.

👌

https://handbrake.fr/

https://gif.ski/

1

u/steveHimself Sep 03 '26

SVGOMG

I use this tool regularily. In my opinion the best tool to optimize/standardize/compress svg markup. I basically throw every graphic designer provided svg in there to get rid of all the crap they get from their graphics tools. great UX during usage imho. especially love the ability to just past svg markup into the window to load it. feels really nice

1

u/dannebc Sep 03 '26

RemindMe! 2 days

1

u/[deleted] Sep 03 '26

[removed] — view removed comment

1

u/webdev-ModTeam Sep 04 '26

We do not allow any commercial promotion or solicitation. This can lead to a permanent ban from the subreddit.

1

u/CianXOX Sep 04 '26

Raycast is probably mine. Clipboard history alone saves me constantly. I also use plaud with claude through MCP for meeting stuff. Handy when I'm already in Claude and need something from an old call without going hunting for the notes first.

1

u/WishboneImmediate509 Sep 05 '26

Wispr Flow for me. I use it a lot when I know exactly what I want to say but can't be bothered typing the whole thing out. Also use plaud for meetings. I pay way more attention now that I'm not trying to type notes at the same time.

1

u/geesuth Sep 02 '26

RemindMe! 2 days

0

u/RemindMeBot Sep 02 '26 edited Sep 03 '26

I will be messaging you in 2 days on 2026-09-04 12:03:57 UTC to remind you of this link

2 OTHERS CLICKED THIS LINK to send a PM to also be reminded and to reduce spam.

Parent commenter can delete this message to hide from others.

RemindMeBot is switching to username summons. Instead of !RemindMe 1 day, use u/RemindMeBot 1 day. More info.


Info Custom Your Reminders Feedback

0

u/Electronic-Truck-659 Sep 02 '26

Difftastic is the one I keep recommending, it diffs by syntax tree so a reindent stops showing up as a hundred changed lines.

0

u/meccaster Sep 03 '26

Claude code

-1

u/[deleted] Sep 02 '26

[removed] — view removed comment

1

u/webdev-ModTeam Sep 02 '26

We do not allow any commercial promotion or solicitation. This can lead to a permanent ban from the subreddit.