A no-fluff, experience-driven guide to the tools, references, playgrounds, and utilities that actually make a difference in your day-to-day development work.
There's a difference between knowing a tool exists and actually having it ingrained into your muscle memory — the kind where your fingers type the URL before your brain has finished forming the thought. This list is about the second kind.
After years of building projects, debugging at 2 a.m., onboarding into unfamiliar codebases, and constantly switching between frontend, backend, DevOps, and everything in between, a set of websites has emerged that I return to again and again. Some are well-known. Others are criminally underrated. All of them have saved real hours of real work.
This guide is organized by category so you can jump straight to what matters most right now. Every entry includes what the tool actually does, why it earns a bookmark, and a practical note on when to reach for it.
Table of Contents
- Documentation & Reference Hubs
- Code Playgrounds & Sandboxes
- CSS Utilities & Generators
- Regex Tools
- API Development & Testing
- Performance & Optimization
- Design-to-Code & UI Resources
- Learning & Career Growth
- Version Control & Collaboration
- Deployment & Hosting Platforms
- Developer Utilities & One-Off Tools
- Debugging & Monitoring
- AI-Powered Developer Tools
- Security & Vulnerability Resources
- Community & Staying Current
1. Documentation & Reference Hubs
Documentation is where you spend a surprising portion of your actual working hours. The difference between a docs site that's navigable and one that isn't is the difference between a 30-second lookup and a 10-minute rabbit hole. These sites understand that.
MDN Web Docs
MDN is the single most important reference website for anyone writing HTML, CSS, or JavaScript. Run by Mozilla with contributions from the broader web community, it covers web standards with a depth and accuracy that no other source matches.
What separates MDN from competitors is that it documents behavior, not just syntax. When you look up Array.prototype.flatMap(), you don't just get the signature — you get browser compatibility tables, edge case behavior, polyfill guidance, and runnable examples. The same applies to CSS properties, HTML elements, HTTP headers, and Web APIs.
Use it for: Any fundamental web platform question. When you're unsure whether a CSS feature is safe to use in production, whether a JavaScript method has IE quirks, or how a specific HTTP header is supposed to behave — MDN is your first stop, not a secondary one.
Pro tip: MDN has a dark mode and offline PWA support. If you're working in environments with unreliable connectivity, install it as a PWA and cache the docs you reference most.
DevDocs
DevDocs is one of those tools you'd build yourself if it didn't already exist. It aggregates API documentation for over 100 languages and frameworks — Python, Go, JavaScript, React, Rails, Django, PHP, Rust, Docker, and dozens more — and presents them all in a single, unified interface with instant fuzzy search.
The interface is deliberately minimal. No ads, no distractions, no paywalls. You select which documentation sets you want enabled, and DevDocs only loads those. The search is fast enough that you can treat it like a keyboard-driven command palette for all your documentation needs.
It also works completely offline once you've enabled and cached your selected docs. For developers who travel frequently or work in environments with limited internet access, this alone makes it invaluable.
Use it for: Day-to-day API lookups across multiple tech stacks. Instead of having 12 different documentation tabs open, DevDocs consolidates everything. Teams that work across polyglot codebases benefit enormously from a shared default docs URL.
Can I Use
Every frontend developer has asked "can I use this in production?" at some point. Can I Use exists specifically to answer that question with data instead of guesswork.
Paste in any CSS property, JavaScript feature, or Web API, and the site returns a global support matrix across Chrome, Firefox, Safari, Edge, and mobile browsers, broken down by version. It also shows global usage percentages — so you can make an informed call about whether to add a polyfill or just ship it.
What makes it especially useful is the filtering. You can configure it to reflect your specific user base rather than global stats. If your analytics tell you 95% of your users are on Chrome 115+, you can filter accordingly and stop worrying about Firefox compatibility on features that are Chrome-specific.
Use it for: Any frontend feature gating decision. Before you use container queries, CSS subgrid, the Web Speech API, or backdrop-filter, spend 30 seconds on Can I Use. It's the fastest way to avoid embarrassing production issues with Safari.
Devhints
Devhints is a beautifully designed collection of developer cheat sheets maintained by Rico Sta. Cruz. Unlike reference documentation, cheat sheets are designed for speed — they assume you know what you're doing and just need a quick syntax reminder.
The cheat sheets cover bash scripting, Vim, ES6, React, Go, Docker Compose, Sass, tmux, GraphQL, cron syntax, and dozens more. They're formatted as dense, scannable cards with code snippets front and center.
The design matters here. Each cheat sheet is visually clean, well-organized, and actually printable. This isn't documentation designed to be comprehensive — it's designed to get you back to coding in under 30 seconds.
Use it for: When you're proficient in a tool but haven't used it in a while. Returning to a bash script after three months of TypeScript? Open devhints.io/bash and you'll have everything you need in one scroll.
QuickRef.ME
QuickRef is a newer reference site that's been gaining traction as a complement to Devhints. It covers over 30 programming languages and a range of tools, with a clean two-column layout that's particularly well-suited for quick lookups.
Where it shines over Devhints is breadth — it has strong coverage of languages like Kotlin, Rust, C++, and PHP that are less represented in the Devhints collection. The keyboard shortcuts section is also particularly well-done for tools like VS Code, IntelliJ, and macOS terminal.
Use it for: When Devhints doesn't have what you need. QuickRef is a strong complementary bookmark that covers the gaps.
2. Code Playgrounds & Sandboxes
Playgrounds are where ideas live before they become pull requests. They're also where you reproduce bugs, test concepts, share snippets with teammates, and learn without a setup cost. A good playground removes every barrier between thought and execution.
CodePen
CodePen is the definitive frontend playground. It's been around since 2012 and has accumulated an enormous community library of HTML, CSS, and JavaScript experiments, animations, UI components, and art projects.
The editor is clean and live-reloads as you type, making it genuinely useful for interactive CSS debugging. The real value goes beyond just writing code, though — CodePen's public collection is searchable and filterable, which means when you need to understand how a clip-path animation works or how someone built a pure CSS accordion, you can often find a working example in under a minute.
Use it for: Frontend prototyping, CSS experimentation, and sharing self-contained UI demos with teammates or in Stack Overflow answers.
StackBlitz
StackBlitz raised the bar for what a browser-based development environment can be. It runs a full Node.js environment inside the browser using WebContainers — meaning you can run npm install, start a dev server, and get hot-reloading for React, Next.js, Vue, Angular, Astro, and more, all without leaving the tab.
The startup time is impressive. You can go from zero to a running React project in about 10 seconds, without installing anything locally. This makes it excellent for quickly testing a new library, sharing a reproducible bug report, or onboarding someone onto a concept without making them clone a repo.
StackBlitz integrates directly with GitHub, so you can open any public repository in a live environment with one click — a feature that's become incredibly useful for exploring open-source projects.
Use it for: Rapid full-stack prototyping, bug reproductions, and collaborative demos that involve a build step. Any time you need to share working code that can't run in a simple HTML/CSS/JS sandbox.
CodeSandbox
CodeSandbox and StackBlitz occupy similar territory, and honestly, which one you prefer often comes down to team workflow. CodeSandbox has historically been stronger for collaborative editing and has a more polished UI for non-developers to navigate. It also has a strong library of community templates.
Where CodeSandbox distinguishes itself is in its team features — shared sandboxes, branching from repositories, and a review flow that integrates with your PR workflow. For design and development teams that need to preview and comment on UI changes, CodeSandbox's collaboration layer is worth exploring.
Use it for: Team environments where designers or PMs need to preview frontend code without a local setup. Also excellent for interactive documentation.
JSFiddle
JSFiddle is older and simpler than StackBlitz or CodeSandbox, but its simplicity is a feature. You get four panels — HTML, CSS, JavaScript, and output — with no configuration required. There's no account needed to try things out.
It's excellent for quick JavaScript experiments that don't need a build step, and the fact that you don't need to sign in makes it frictionless for ad hoc testing. The sharing URL is short and reliable, which makes it a good choice for quick Stack Overflow reproductions.
Use it for: Quick, lightweight JavaScript or CSS tests where you don't need a framework. The no-login-required workflow is genuinely faster than setting up a full CodeSandbox for simple cases.
Replit
Replit takes a slightly different angle — it's less focused on web-specific development and more on supporting any programming language in a runnable environment. Python, Go, Rust, C, Java, Ruby, and 50+ others are all available with no local setup.
For learning, this is incredibly valuable. But for working developers, Replit's killer feature is collaborative editing. Multiple people can edit the same file in real-time, which makes it useful for pair programming sessions, technical interviews, and live coding workshops.
Use it for: Cross-language experimentation, collaborative pair programming, and any scenario where you need to share runnable code with someone who isn't set up in your specific tech stack.
3. CSS Utilities & Generators
CSS is deceptively complex. Grid, Flexbox, gradients, animations, shadows, clip-paths — the mental overhead of writing them from scratch is real. These tools eliminate that overhead.
CSS Grid Generator
Sarah Drasner's CSS Grid Generator is a visual drag-and-drop tool that outputs clean, production-ready grid CSS. You define your columns and rows, click to span items across grid cells, and the tool writes the code for you.
It's not just a shortcut for beginners. Even experienced developers who know grid syntax inside out benefit from the visual confirmation that their mental model matches the actual output. Grid layout bugs are often subtle, and having a visual builder as a sanity check is worth it.
Use it for: Scaffolding complex grid layouts quickly. Also useful for explaining grid concepts to teammates who haven't internalized the spec.
Flexbox Froggy & Grid Garden
These are technically games, but they're also the fastest way to genuinely internalize Flexbox and CSS Grid. Flexbox Froggy has you write Flexbox properties to move frogs to lily pads. Grid Garden does the same for CSS Grid.
What makes them more effective than reading documentation is the immediate feedback loop. You write justify-content: space-between, watch the frogs reposition in real time, and the spatial relationship between the property and its effect burns into memory. Both can be completed in under an hour and are worth revisiting when you're onboarding someone or feel rusty.
CSS Gradient
CSS gradients look simple until you try to write complex ones by hand. CSS Gradient is a visual editor for linear, radial, and conic gradients with full controls for color stops, angles, and blending. The output is clean, cross-browser CSS that you copy and paste directly.
Use it for: Any gradient that goes beyond two colors or involves a non-standard angle. The visual preview eliminates the trial-and-error cycle of tweaking percentage values blind.
Coolors
Coolors is a color palette generator that's become the industry standard for quick palette creation. Hit the spacebar and it generates a new five-color palette. Lock any color you like, and it regenerates around the locked ones. You can import an image and extract its palette, browse millions of community-created palettes, or fine-tune contrast ratios for accessibility.
Use it for: Starting any UI design from scratch, or when your current palette feels off and you need structured alternatives. The contrast checker is also useful for verifying WCAG compliance before shipping.
Neumorphism.io & CSS Box Shadow Generator
Box shadows are incredibly versatile but notoriously annoying to write by hand. Neumorphism.io is a visual generator specifically for the soft-shadow "neumorphic" style, while CSSMatic's box shadow generator covers general-purpose shadow creation with full control over spread, blur, offset, and color.
Between these two, you can generate any shadow effect visually and never have to debug shadow syntax in the browser again.
Animista
CSS animations are powerful but the syntax for complex keyframe animations is genuinely tedious. Animista provides a library of pre-built animation presets — entrances, exits, attention-seekers, text effects — that you can preview, customize (duration, direction, timing function), and then copy the exact CSS.
Use it for: Adding polished motion to UI elements without bringing in a JavaScript animation library. The generated CSS is clean, and you only copy what you need — there's no importing a full library for a single animation.
4. Regex Tools
Regular expressions remain one of those areas where even experienced developers benefit from tooling. Writing complex regex from memory is possible; writing it correctly from memory is a different story.
Regex101
Regex101 is the gold standard for regex development and debugging. It supports PCRE, JavaScript, Python, Go, Java, C#, and Rust — and critically, it explains every part of your regex in plain English in a sidebar panel. You can see exactly which part of the pattern is matching what, why a match fails, and get instant feedback as you type.
Beyond the basic tester, it has a unit test builder (write test cases, see them pass or fail as your regex changes), a code generator that outputs your validated regex in the language of your choice, and a saved-expression library built from community contributions.
Use it for: Any regex more complex than a simple email validation. The explanation panel alone is worth the bookmark — it teaches you regex as you use it.
RegExr
RegExr is a solid alternative to Regex101 with a slightly more visual approach to displaying matches. It color-codes capture groups within matched text, which is particularly helpful for complex multi-group patterns where the boundaries between groups matter. It also has an excellent built-in regex cheat sheet that stays visible while you're testing.
Use it for: When you're working with complex capture groups and want color-coded visual clarity. The cheat sheet panel makes it a good learning environment for developers getting comfortable with regex syntax.
Debuggex
Debuggex takes a completely different approach — it renders your regex as a railroad diagram. Instead of text-based explanation, you see a visual flowchart showing exactly how the regex engine traverses your pattern. For complex patterns with alternation, lookaheads, and nested groups, this visualization can be far more illuminating than text.
Use it for: Complex patterns where you need to understand the logical structure at a glance. Railroad diagrams make it immediately obvious whether your alternation is being evaluated in the right order.
5. API Development & Testing
APIs are the connective tissue of modern software. Whether you're building them, consuming them, or debugging them, these tools make the process faster and far less painful.
Postman
Postman has been the dominant API platform for years. It started as a simple HTTP client and has since evolved into a comprehensive platform for designing, testing, documenting, and monitoring APIs.
The core workflow — creating collections of requests, organizing them by environment, and running them against different stages — is still excellent. But what makes modern Postman indispensable are the surrounding features: environment variables that let you switch between dev/staging/prod with a dropdown, automated test scripts using JavaScript, mock servers for frontend development before the backend is ready, and collaborative workspaces that your entire team can access.
Use it for: Any API work that goes beyond one-off requests. The collection + environment model maps well onto real-world projects, and sharing collections with teammates eliminates the "how do I call this endpoint?" question from your standup forever.
Hoppscotch
Hoppscotch (formerly Postwoman) is an open-source Postman alternative that runs entirely in the browser with no installation required. For developers who don't want another Electron app running, or who need to quickly test an API from a machine where Postman isn't installed, Hoppscotch is excellent.
It supports REST, GraphQL, WebSocket, and SSE testing. The interface is clean and fast, and the GraphQL client is particularly well-executed. It also has a self-hostable option for teams that need to keep API requests internal.
Use it for: Quick API testing without installing software, GraphQL development, and teams that prefer a lightweight open-source option over the Postman ecosystem.
JSONPlaceholder
JSONPlaceholder is a free, online fake REST API. It provides endpoints for posts, comments, albums, photos, todos, and users — and every request returns realistic-looking JSON that you can use in prototypes, tutorials, and tests.
It's deceptively simple but enormously useful. When you're building a frontend component that displays a list of articles and you don't want to stand up a backend just to have some data to work with, JSONPlaceholder gives you everything immediately.
Use it for: Frontend prototyping, learning new frameworks (most React/Vue tutorials use it), and testing HTTP client code without needing a real backend.
Mockaroo
Mockaroo generates realistic test data at scale. You define a schema — name, email, date of birth, country, credit card, UUID, custom regex, anything — and it generates thousands of rows in CSV, JSON, SQL, or Excel format in seconds.
Unlike JSONPlaceholder's fixed dataset, Mockaroo gives you full control over data shape and volume. Need 5,000 user records with realistic names, email addresses, geographic data, and timestamps for load testing your database? Done in two minutes.
Use it for: Database seeding for development environments, performance testing, and any situation where you need structured, believable fake data in large quantities.
Swagger UI / SwaggerHub
Swagger/OpenAPI remains the dominant standard for REST API documentation. SwaggerHub provides a hosted environment for designing APIs using the OpenAPI specification, with real-time validation, collaborative editing, and the ability to generate server stubs and client SDKs from your spec.
Even if you don't use SwaggerHub specifically, understanding OpenAPI and being comfortable with Swagger UI is essential. Most well-documented APIs expose a Swagger UI at /docs or /api-docs, and being fluent with it helps enormously when consuming unfamiliar APIs.
Use it for: Designing APIs contract-first, generating client code, and hosting interactive API documentation that your consumers can test directly.
6. Performance & Optimization
Performance is a feature. Users abandon slow sites, search engines rank them lower, and poor Core Web Vitals scores are visible in your analytics. These tools identify where the problems are before they become complaints.
BundlePhobia
BundlePhobia does one thing: it tells you the true size cost of any npm package. Type a package name, and you instantly see its minified size, gzip size, all of its dependencies, and an estimate of how long it will take to download on different connection speeds.
This matters more than most developers realize. It's easy to npm install something small-sounding that has a transitive dependency tree that adds 80KB to your bundle. BundlePhobia exposes that reality before you've committed the package to your project.
Use it for: Pre-install due diligence on npm packages. Also useful for justifying to stakeholders why you're choosing a lighter alternative to a popular library.
PageSpeed Insights
Google's PageSpeed Insights analyzes a URL and gives you a score and specific recommendations based on real-world Chrome User Experience Report (CrUX) data. It measures Core Web Vitals — LCP, FID, CLS — plus a range of other performance signals.
What makes it authoritative is that the data isn't theoretical. It reflects how your actual users are experiencing your site across their real devices and connections, not a simulated desktop in a data center.
Use it for: Production performance audits, validating optimization work, and generating a concrete list of performance issues with specific severity ratings and implementation guidance.
WebPageTest
WebPageTest gives you more granular control over performance testing than PageSpeed Insights. You can test from dozens of geographic locations, choose specific browsers and connection speeds, run multiple tests and compare waterfalls, and view filmstrip screenshots showing your page loading frame by frame.
The waterfall chart is particularly powerful for understanding how resources load in relation to each other — it makes render-blocking resources immediately visible and shows exactly which requests are creating bottlenecks.
Use it for: Deep-dive performance investigations. When PageSpeed Insights tells you there's a problem, WebPageTest helps you understand exactly what's happening and why.
GTmetrix
GTmetrix combines Google Lighthouse and other performance analysis into a single report with a convenient history and monitoring feature. You can track a URL's performance over time and get alerts when scores drop below a threshold.
Use it for: Ongoing performance monitoring for production sites. The historical data and alerting make it useful as a lightweight monitoring solution alongside your core observability stack.
7. Design-to-Code & UI Resources
The gap between design and production code has narrowed dramatically in recent years. These tools and resources help bridge what's left.
Figma
Figma is where design lives in 2025. It's a browser-based design and prototyping tool with real-time collaboration that has essentially replaced Sketch and Adobe XD in most teams' workflows.
For developers, Figma's most valuable feature is the developer handoff mode. You can inspect any element to get exact CSS values, spacing measurements, color hex codes, and exportable assets. The auto-layout system maps closely to Flexbox and CSS Grid, which means Figma designs translate to code more predictably than designs made in other tools.
Use it for: Implementing designs accurately, participating in design reviews, and understanding the intent behind a design spec without guessing at values.
UIverse
UIverse is a community-built library of over 3,000 free CSS and Tailwind CSS UI elements — buttons, loaders, cards, checkboxes, toggles, tooltips, and more. Every element is created in pure CSS (no JavaScript), and you can copy the code with one click.
The quality varies, but the best contributions are genuinely production-ready and creative. It's an excellent source when you need a polished micro-interaction or a loading state and don't want to spend an hour building it from scratch.
Use it for: Finding ready-to-use CSS components for side projects, prototypes, or projects where a full component library would be overkill.
ray.so
Ray.so (from the team behind Raycast) turns code snippets into beautiful images. You choose a theme, language, and background color, and it generates a shareable image of your code that looks professional and readable.
It's a small tool that serves a specific purpose — sharing code visually on social media, in documentation, in presentations, or in team channels. The output quality is noticeably better than screenshots, and the customization options are enough to match your brand or preference.
Use it for: Creating code images for blog posts, documentation, social sharing, or any presentation where a code screenshot would look rough.
Carbon
Carbon is the original code-to-image tool and remains the most feature-complete option. It supports more themes and language settings than ray.so, and it integrates with the Carbon GitHub app, which lets you generate code images directly from PRs.
If you share code visually often, Carbon's additional customization and GitHub integration make it worth bookmarking alongside ray.so for comparison.
Icones
Icones is a comprehensive icon search engine that covers dozens of icon sets — Heroicons, Material Icons, Phosphor, Tabler, Feather, Lucide, Radix, and many more — in a single searchable interface. You can search across all sets simultaneously, preview icons at different sizes, and copy them as SVG, component code (Vue, React), or CSS class names.
Use it for: Finding the right icon without toggling between multiple tabs. The ability to copy as a React or Vue component is a significant time saver over downloading and importing SVG files manually.
Fontsource
Fontsource packages open-source fonts as self-hostable npm packages. Instead of loading from Google Fonts via a CDN (which can slow your site and has privacy implications due to Google tracking), you install the font as a dependency and serve it yourself.
Every major Google Font is available, along with many others not in the Google catalog. The setup is clean: npm install @fontsource/inter, then import in your CSS or JavaScript entry file.
Use it for: Any project where performance or privacy are concerns, or where you need fonts to work without external network access (electron apps, internal tools, air-gapped environments).
8. Learning & Career Growth
Staying sharp is an ongoing responsibility. These resources go beyond basic tutorials — they help you build genuine depth.
roadmap.sh
Roadmap.sh is the most comprehensive career path visualization for developers on the internet. It has interactive roadmaps for frontend, backend, full-stack, DevOps, mobile, data engineering, machine learning, and more — and each roadmap is maintained by the community with contributions from hundreds of practitioners.
Each node in the roadmap is clickable and links to curated resources, so it's not just a list — it's a structured guide to building competency in a given area. The fact that it's the 6th most-starred project on GitHub speaks to how widely it's trusted.
Use it for: Career planning, identifying skill gaps, onboarding new team members, and understanding what skills are expected at different levels of a given discipline.
freeCodeCamp
freeCodeCamp has evolved from a JavaScript bootcamp into a comprehensive free curriculum covering HTML/CSS, JavaScript, Python, data science, machine learning, SQL, and information security. The projects-based approach to certifications means you're demonstrating skills by building things, not just passing multiple-choice questions.
The learning experience is structured, browser-based, and genuinely rigorous at the intermediate-to-advanced levels. The community on their forums and Discord is one of the most supportive in developer education.
Use it for: Structured learning when you're new to a concept or discipline, and when you want a clear sense of progress through a defined curriculum rather than picking up scattered tutorials.
The Odin Project
The Odin Project takes a more project-heavy approach than freeCodeCamp and leans into the full development workflow — Git, command line, debugging, setting up a real development environment. It's intentionally opinionated about what matters and doesn't try to cover everything.
What makes it distinct is the emphasis on "learning to learn" — understanding how to read documentation, how to debug systematically, how to use developer tools. These meta-skills are often missing from structured curricula, and The Odin Project bakes them in.
Use it for: Building the habits and workflows of a professional developer alongside the technical skills. The curriculum reads like it was written by someone who's hired developers and knows what they actually need.
LeetCode
LeetCode is the dominant platform for algorithmic problem solving, and whether you're preparing for technical interviews or simply want to sharpen your algorithmic thinking, it remains the most comprehensive resource.
The problem library covers data structures, algorithms, system design, SQL, shell scripting, and concurrency. The company-specific problem sets (problems tagged as frequently asked by Google, Meta, Amazon, etc.) are particularly useful for targeted interview preparation.
Use it for: Interview preparation and deliberate practice on data structures and algorithms. The discussion sections for each problem often contain multiple approaches with complexity analysis, which is more educational than the problem itself.
Exercism
Exercism takes a different approach to language learning — you work through a track of exercises in your chosen language, submit solutions, and optionally get mentored feedback from real developers who volunteer their time.
It covers 65+ programming languages, which makes it uniquely useful for learning idiomatic patterns in less common languages. The mentorship aspect is what separates it from LeetCode — you're not just getting an accepted verdict, you're getting feedback on style, idioms, and approach from someone experienced in the language.
Use it for: Learning a new language deeply rather than superficially. If you want to go from "can write Python" to "write idiomatic Python," the mentored tracks on Exercism are excellent.
Frontend Mentor
Frontend Mentor provides realistic frontend challenges with professional design files and a community to review your solutions. The challenges range from simple card components to full multi-page applications, and they're structured around real design briefs the way client work actually comes to you.
Use it for: Portfolio building with projects that look real rather than tutorial-ish, and practicing the design-to-code workflow that defines actual frontend work.
9. Version Control & Collaboration
Git is the backbone of professional development, and a handful of web tools make working with it significantly smoother.
GitHub
GitHub needs no introduction, but it's worth acknowledging that it's evolved well beyond code hosting. Pull request reviews, Actions for CI/CD, Discussions for community/internal Q&A, Projects for lightweight project management, Codespaces for browser-based development, and Security Advisories for vulnerability reporting — the platform is comprehensive enough that many teams never need to leave it.
GitHub Copilot, integrated directly into VS Code and JetBrains IDEs, has become one of the most-used AI coding tools in professional development. The code suggestion quality has improved significantly, and the chat feature for explaining code and generating tests is genuinely useful.
Use it for: Everything. If you're not on GitHub, the tools and integrations available elsewhere are a step behind. That said, the points below about alternatives are real.
GitLab
GitLab's key differentiator has always been that it's fully self-hostable and has a deeply integrated CI/CD pipeline built in from day one. For enterprises, regulated industries, or teams that need their code to never leave their own infrastructure, GitLab remains the best option.
GitLab's CI/CD configuration through .gitlab-ci.yml is more expressive than GitHub Actions for complex multi-stage pipelines. If you're building sophisticated deployment workflows, it's worth understanding both.
Use it for: Enterprise deployments requiring self-hosting, complex CI/CD pipelines, or teams that prefer an all-in-one DevOps platform over GitHub's more modular ecosystem.
Conventional Commits
Conventional Commits is a specification for standardizing commit message format. The basic structure (feat:, fix:, chore:, docs:, refactor:, test:) is simple, but the ecosystem it enables — automatic changelog generation, semantic versioning, release automation — is powerful.
Tools like Commitizen, commitlint, and semantic-release integrate directly with the Conventional Commits spec to automate your entire release process. Once you've experienced release automation working off clean commit history, going back to freeform commit messages feels wasteful.
Use it for: Any project that has releases. Adopting Conventional Commits requires minimal discipline change but enables significant automation downstream.
GitHub CLI
The GitHub CLI (gh) brings GitHub into your terminal. You can create and review PRs, manage issues, clone repos, create gists, and trigger workflows without leaving your command line context.
For developers who live in the terminal, gh pr create --web to open a draft PR or gh issue list --assignee @me to see your current issues is the kind of workflow improvement that compounds. It's also scriptable, which means you can build simple automation on top of GitHub's API without dealing with REST directly.
Use it for: Reducing context switches between terminal and browser for routine GitHub operations. The PR review workflow in particular is improved significantly.
10. Deployment & Hosting Platforms
The infrastructure decisions you make for deployment shape how your development workflow feels. These platforms have earned their dominant positions.
Vercel
Vercel redefined what deployment should feel like for frontend and full-stack JavaScript projects. Connect a GitHub/GitLab/Bitbucket repository, and Vercel automatically detects your framework, builds on every push, and deploys with preview URLs for every pull request.
The preview URL feature is transformative. Every PR gets a unique URL that non-developers can open, test, and comment on — before anything is merged. The built-in Edge Network, serverless functions, Edge Functions, and increasingly AI tooling make it a complete platform for Next.js, SvelteKit, Astro, Remix, and most other modern JavaScript frameworks.
Use it for: Any JavaScript-based project that you want to deploy with minimal configuration. Vercel's DX is the benchmark against which other deployment platforms are measured.
Netlify
Netlify was doing continuous deployment from Git before Vercel existed, and its feature set remains comprehensive. The Netlify Forms, Identity, Functions, and Edge Functions ecosystem means you can build surprisingly capable sites without managing separate backend infrastructure.
Where Netlify has an edge is in its redirect and rewrite rules (the _redirects file is simpler than Vercel's configuration for complex routing), its split testing feature for A/B testing different deploys, and its generous free tier for open-source and personal projects.
Use it for: Static sites, JAMstack applications, and projects where you want Netlify's built-in form handling, CMS integrations, or identity management without pulling in separate services.
Railway
Railway is what happens when someone looks at Heroku and decides the developer experience should be significantly better. It supports Node.js, Python, Go, Ruby, PHP, and more, plus PostgreSQL, MySQL, Redis, and MongoDB databases — all provisionable with one click.
The deployment model is git-push-based, the pricing is usage-based (you pay for actual CPU/memory time, not a fixed dyno), and the UI is clean enough that explaining a deployment to a non-technical stakeholder over video call is actually possible.
Use it for: Backend APIs, side projects with a database, and any server-rendered application that outgrows static hosting. Railway fills the gap left by Heroku's pricing changes without the complexity of AWS.
Fly.io
Fly.io lets you deploy Docker containers to a global network of datacenters in minutes. The CLI-first workflow is excellent, and Fly's focus on latency — running your application in the regions closest to your users — makes it genuinely different from platforms that treat region selection as an afterthought.
For applications with real performance requirements, running compute close to users matters. Fly makes that straightforward.
Use it for: Full-stack applications in Docker containers that need geographic distribution, latency-sensitive APIs, and backends that are too stateful or complex for serverless.
11. Developer Utilities & One-Off Tools
These are the tools that don't fit neatly into a category but solve specific, recurring problems remarkably well.
Transform.tools
Transform.tools is a collection of code transformation utilities in a single interface. It converts JSON to TypeScript types, JSON to Zod schema, CSS to JS objects, HTML to JSX, SVG to React components, GraphQL to TypeScript, and dozens of other transformations.
The individual conversions are things you could write yourself, but doing so every time is tedious. Transform.tools makes them instant.
Use it for: The inevitable "I have JSON from this API and need TypeScript types" problem, converting SVGs to React components, or translating between configuration formats.
JSON Crack
JSON Crack visualizes JSON data as an interactive graph. Paste in any JSON object — no matter how deeply nested — and it renders a node-based diagram that lets you explore the structure interactively.
For complex API responses or configuration files with heavy nesting, the visual representation often makes structural issues immediately obvious in a way that staring at collapsed JSON in a text editor doesn't.
Use it for: Understanding deeply nested JSON structures, debugging API response shapes, and explaining data structures to people who aren't fluent in reading raw JSON.
Explainshell
Explainshell does exactly what its name suggests: paste in any Unix/Linux shell command, and it breaks it down argument by argument, pulling the relevant section from each command's man page and displaying it inline. grep -rn --include="*.js" "TODO" ./src becomes a annotated breakdown of what -r, -n, --include, and each subsequent argument do.
This is invaluable for understanding commands you've copied from a Stack Overflow answer or from a colleague's script. It's also useful for validating that the command you wrote actually does what you think it does.
Use it for: Demystifying shell commands, learning the flags and options of unfamiliar tools, and building your bash fluency systematically rather than just memorizing incantations.
Crontab.guru
Crontab syntax is notoriously difficult to get right from memory. Crontab.guru is a simple, focused tool that translates cron expressions into plain English and vice versa. Type your expression, and it instantly tells you "At 09:00 on Monday through Friday." Type what you want ("Every 15 minutes between 8 AM and 6 PM"), and it gives you the expression.
It also shows the next five scheduled execution times, which is invaluable for confirming that what you wrote actually fires when you expect it to.
Use it for: Every time you write a cron job. Without exception.
httpbin
httpbin is a service that returns request data for inspection. You send it an HTTP request, and it sends back a JSON response containing your headers, args, origin IP, form data, and any other request details. There are endpoints for testing specific behaviors: /delay/3 introduces a 3-second delay, /status/404 returns a 404, /redirect/5 triggers 5 redirects.
Use it for: Testing your HTTP client code without needing a real external API, validating that your headers are being sent correctly, and simulating error conditions and timeouts.
Public APIs
Public APIs is a curated directory of free, public APIs organized by category — animals, sports, weather, finance, government, music, and more. Every entry includes whether the API requires authentication, whether it supports HTTPS, and whether it allows CORS.
Use it for: Finding a real API to use in a prototype or side project, exploring data sources for portfolio projects, and discovering interesting public datasets.
SVGOMG
SVGOMG is a web interface for SVGO, the industry-standard SVG optimization library. Paste or upload any SVG, and it applies a configurable set of optimizations that typically reduce file size by 40-60% without any visible quality loss. You can toggle each optimization individually to see exactly what impact it has.
Use it for: Every SVG you're about to add to a web project. Unoptimized SVGs exported from Figma, Illustrator, or Inkscape are almost always significantly larger than they need to be.
Meta Tags
Meta Tags gives you a live preview of how your page will appear in Google search results, on Twitter/X, on LinkedIn, on Facebook, and as a Slack unfurl — all in one interface. You can also generate the complete, correct meta tag code for all platforms from a single form.
Use it for: Before launching any public page, verifying that your OG tags are configured correctly. The difference between a page with proper meta tags and one without is enormous in terms of click-through rate when shared.
12. Debugging & Monitoring
Bugs are the tax on building software. These tools make collection and triage faster.
Sentry
Sentry is the industry standard for application error monitoring. It captures exceptions in real time, with full stack traces, user context, environment details, and breadcrumbs showing what happened leading up to the error.
What separates Sentry from basic logging is the grouping and deduplication. Instead of drowning in individual error logs, Sentry groups related errors by type and shows you how many users are affected, which releases introduced the error, and whether it's been seen before. This turns error monitoring from a reactive fire-fighting activity into something manageable.
Use it for: Any application with real users. The free tier handles a surprisingly high volume, and the signal-to-noise improvement over raw logs is immediate and dramatic.
LogRocket
LogRocket records full session replays of user sessions — every click, scroll, input, and network request — alongside console logs and Redux/Vuex state. When a user reports a bug, you can watch exactly what they did, in their browser, on their device, without asking them to reproduce it.
Use it for: Reproducing and understanding frontend bugs that are difficult to replicate from a description alone. The "watch what the user actually did" feature is dramatically more efficient than asking users to provide reproduction steps.
Lighthouse
Lighthouse is built into Chrome DevTools (accessible under the "Lighthouse" panel) and also available as a CLI tool. It runs an automated audit of any page and produces scored reports covering performance, accessibility, best practices, SEO, and Progressive Web App criteria.
The accessibility audit is particularly thorough and catches a wide range of WCAG violations that aren't obvious from visual inspection. Running Lighthouse as part of your CI pipeline — with failing thresholds for accessibility and performance — is a concrete step toward maintaining quality over time.
Use it for: Comprehensive audits before a major launch, setting a performance and accessibility baseline, and identifying quick wins across multiple quality dimensions.
13. AI-Powered Developer Tools
AI has moved from novelty to genuinely useful workflow component for a specific set of tasks. These are the tools where the reality has caught up to the hype.
GitHub Copilot
GitHub Copilot has evolved significantly since its initial release. The autocomplete suggestions are faster and more context-aware, and the chat interface for explaining code, generating tests, writing commit messages, and discussing architectural decisions has become a meaningful part of many developers' workflows.
The key to using Copilot well is understanding its strengths: boilerplate, repetitive patterns, test case generation, documentation writing, and converting pseudocode to implementation. Its suggestions for novel algorithmic problems are less reliable and should be verified carefully.
Use it for: Accelerating the mechanical parts of coding — writing getters/setters, implementing standard patterns, generating test scaffolding, writing JSDoc/docstrings, and converting pseudocode into a first draft of real code.
Cursor
Cursor is a VS Code fork with AI deeply integrated throughout. Beyond autocomplete, it has a chat interface with full codebase context, the ability to make changes across multiple files simultaneously via natural language, and a particularly good implementation of "explain this code" that understands multi-file dependencies.
The "Composer" feature — where you describe a change in natural language and Cursor makes it across your entire project — is the most compelling demonstration of where AI-assisted development is heading.
Use it for: Developers who want deeper AI integration than Copilot offers within VS Code, especially for refactoring tasks that span multiple files.
v0.dev
Vercel's v0 generates React components with Tailwind CSS from text descriptions or screenshots. The output quality is genuinely impressive for UI components — you describe what you want, it produces a working React component, and you can iterate with follow-up prompts.
The generated code is clean, uses shadcn/ui components, and is production-ready enough to use as a strong starting point. It's particularly useful for quickly scaffolding standard UI patterns — data tables, forms, dashboard layouts — that would otherwise be a significant time investment.
Use it for: Rapid UI prototyping, generating component starting points, and accelerating frontend work where the logic is trivial but the markup is tedious.
14. Security & Vulnerability Resources
Security awareness isn't optional. These resources keep you informed and give you tools to address vulnerabilities systematically.
OWASP
The Open Web Application Security Project maintains the most authoritative documentation on web application security in existence. The OWASP Top 10 — the definitive list of the most critical web application security risks — is an essential read for any developer responsible for a production system.
Beyond the Top 10, OWASP maintains the Web Security Testing Guide, the Application Security Verification Standard (ASVS), and a library of cheat sheets covering SQL injection prevention, XSS prevention, authentication, session management, and more.
Use it for: Understanding the security landscape, building security into code reviews, and having an authoritative reference when arguing for security investments with non-technical stakeholders.
Have I Been Pwned
Troy Hunt's database of breached credentials covers billions of compromised email addresses and passwords from thousands of data breaches. The API is public and widely used in authentication systems to check whether a user's proposed password appears in known breach datasets.
Use it for: Building password hygiene checks into your authentication system, checking whether your own credentials are in a breach, and understanding breach data for security research.
Snyk
Snyk scans your project's dependencies for known vulnerabilities and surfaces them with severity ratings, remediation paths, and automatic pull request creation for fixes. It integrates with GitHub, GitLab, and Bitbucket, and can run in your CI pipeline to block merges that introduce known vulnerabilities.
Use it for: Continuous dependency vulnerability monitoring. One-time scans are useful, but the real value is in the ongoing monitoring that alerts you when new vulnerabilities are disclosed against packages you're already using.
SSL Labs Server Test
SSL Labs provides a deep analysis of any server's SSL/TLS configuration, grading it from A+ to F and identifying specific configuration problems — weak cipher suites, BEAST vulnerability, certificate chain issues, HSTS status, and more.
Use it for: Verifying that your HTTPS configuration is actually secure after setting up a new server or after certificate changes. An "A" rating requires more than just having a certificate — the configuration matters.
15. Community & Staying Current
The best developers stay curious and connected to the broader ecosystem. These resources make that sustainable.
dev.to
Dev.to is the most active developer blogging community on the internet. The writing quality varies, but the platform consistently surfaces practical, experience-driven posts from working developers. The weekly newsletters for specific tags (javascript, python, devops, etc.) provide a curated feed of relevant writing without the noise of a general tech news aggregator.
Use it for: Discovering practical perspectives from developers in the field, sharing your own work, and staying connected to how practitioners are actually using current tools.
Hacker News
Hacker News remains the most consistently high-signal forum for technology discussion. The comment sections on technical posts often contain insights from the original authors, domain experts, and practitioners with decades of experience. The noise level is lower than most alternatives, and the culture values technical accuracy.
Use it for: Staying informed about significant developments in software, infrastructure, security, and computer science. The "Ask HN" threads are particularly valuable for unfiltered perspectives from practitioners.
Stack Overflow
Stack Overflow needs no defense of its utility — every developer uses it constantly. What's worth being intentional about is how you use it. The questions and accepted answers are often years old, and the technology landscape moves fast enough that a 2018 answer about a React lifecycle method or an npm package might be outdated.
Always check the date of the top answer relative to the current version of whatever you're working with. A 5-star-rated answer from 2016 for a library now on v4 might be actively harmful.
CSS-Tricks
Chris Coyier's CSS-Tricks has been publishing high-quality frontend development content since 2007. The archive contains some of the most comprehensive guides to CSS Flexbox, Grid, custom properties, animations, and JavaScript patterns that exist online. The Almanac section is a particularly good reference for individual CSS properties.
While the publication frequency has slowed since its acquisition, the existing archive is dense with value and the Almanac remains one of the best CSS references outside of MDN.
Smashing Magazine
Smashing Magazine publishes longer, more in-depth technical articles than most blogs — detailed walkthroughs of complex CSS techniques, accessibility deep dives, performance engineering case studies, and UX research analysis. The writing is vetted and consistently high quality.
Use it for: Building depth on specific topics. A Smashing Magazine article on a given CSS feature or performance technique will go further than most other sources.
The Changelog
The Changelog podcast network covers the open-source ecosystem, infrastructure trends, and software engineering craft. The flagship show interviews open-source maintainers, company founders, and influential engineers about what they're building and why. The "Ship It!" and "JS Party" podcasts cover DevOps and JavaScript ecosystems respectively.
Use it for: Long-form audio content for commutes or background listening. The interviews tend to be more honest and technical than marketing-driven tech podcasts.
Building Your Actual Bookmark Setup
Having 60 useful URLs is only helpful if you can access them without friction. The way you organize your bookmarks matters.
Consider organizing browser bookmarks into a "Dev Tools" folder with subfolders matching the categories above. The URLs you reach for most often — MDN, DevDocs, Can I Use, Regex101, BundlePhobia — deserve to be in your browser's bookmark toolbar, not buried in a nested hierarchy.
For teams, a shared bookmark collection in Notion, Confluence, or even a GitHub repository with a TOOLS.md file ensures that when a new developer joins, they have access to the team's accumulated tooling knowledge from day one. The difference between a team that documents its tool choices and one that doesn't shows up within the first week of onboarding a new person.
It's also worth acknowledging that the tooling landscape shifts. The right habit is to revisit your bookmarks annually — not to prune aggressively, but to add the genuinely useful tools that have emerged and retire the ones that have been superseded. The tools that survive that review for multiple years in a row are the ones that have earned permanent real estate in your workflow.
Quick Reference: All Bookmarked URLs
Top comments (0)