Joshua's Docs - Elevator Pitches

Elevator Pitches

What is this? Read on:

I get frustrated by the number of tools/frameworks/etc. in the tech stack that don't have a good elevator pitch. This is especially annoying in the web-dev world, where the stack is growing at an exponential rate, and new tools are being introduced on an hourly basis.

I don't need boasts about how your tool is better than all the others, or two pages of bullet point features; I need a couple of sentences that tell me what your tool actually IS. That is what this page tries to be (at least for myself).

This is a long page, and I keep adding to it, so don't be afraid to CTR+F to find something!

Web Dev

CSS / Styling

Name & Link What
Sass (or SASS) From wikipedia: "Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS)."

There are a bunch of features that Sass has that CSS does not - most notably nesting, mixins, extending, imports, and variables (although CSS now has variables).

There are two major syntaxes - the original, which uses indentation as the major rule, and SCSS, which uses blocks/braces, and is similar to CSS in rules.
Less (or LESS, or less.js) Very similar to Sass (see above row). Main difference is that Less can be transpiled to CSS in-browser, with their JS lib.
PostCSS In my mind, it is closer to webpack or babel than it is to something like SASS. It is not a replacement for CSS, but rather a pipeline (built with JS) that takes in CSS (parser), formats and/or transpiles it according to rules and plugins, and then spits out the generated output (generator).

Popular example: Write your CSS without concern for browser version, and then use PostCSS autoprefixer to prefix for browser vendors, and postcss-preset-env to polyfill newer CSS features for older browsers.
Styled-Components A CSS-in-JS tool that lets you write CSS in JS for components with the normal CSS syntax; no need for the camelCase variant.

Uses tagged template literals so you can still easily pull JS variables into the CSS, despite using the non-js syntax.

Styling generators

A handy tool that deserves a separate callout from the above list is Tema, by the talented Yoksel. It could be described as a derivative palette generator, in that you can give it a starting palette, and then it will generate corresponding CSS color variables that are darker and lighter shades of that original palette.

CSS Frameworks

CSS Framework comparisons

Component UI Dev Tools

  • Storybook JS
    • Browse, view, and develop UI components in isolation, without needing to load your entire app.
    • Supports React, Vue, and even plain HTML
  • Components.studio
    • Similar to Storybook; way to build components in isolation without needing to scaffold an entire project.
    • Key differentiating features:
      • Online IDE
      • One-click starter templates for dozens of frameworks (React, Vue, Angular, Svelte, etc.)
      • Handles bundling & release to NPM!
  • bit.dev
    • Components as a service?

Design Tools

Design Tools - SVGs

General SVG Editing

  • SVGOMG (Online SVG Optimizer)
    • GUI layer over SVGO (SVG Optimizer)
    • Great for quick optimization, can copy and paste input & output
  • Free online SVG Editors
  • Paid online SVG Editors
    • Boxy SVG - Pricey, but has one of the smoothest and most enjoyable UX out of any SVG editor I've ever used.
  • Offline SVG Editors

Path Editing and Visualizing

Web Animation Tools and Libraries

Libraries:

  • GreenSock's GSAP Library
    • Powerful JavaScript library for high-performance animations / tweening, of pretty much anything in the DOM
    • Although easy to use, it is a JS lib, so not WYSIWYG and definitely lower level than some other approaches
    • Warning: unusual license model
  • Kute.js
    • JS animation library, kind of similar to GSAP
    • MIT license, open-source
  • Velocity.js
    • JS animation library, focused on being a replacement for jQuery's $.animate()
    • A nice slim alternative to GSAP (and others) if you just need a few animations and not more advanced features
    • MIT license
  • Anime.js (repo) (website)
    • Lightweight, MIT licensed
    • Bonus: Spring easing, keyframes, timeline, etc.
  • Popmotion
  • snabbt.js (repo) (website)
    • Lightweight, MIT licensed
    • Last commit was 2015...

Library comparisons - https://dev.to/bnevilleoneill/comparing-the-top-js-animation-libraries-for-use-in-react-apps-51i1

interact.js is not an animation library, but is strongly related

Framework Libraries:

Editors / Tools:

Hosting / Pipeline / Deployment

Cloud Hosting

Separate cheatsheet / section: Cloud Services Overview.

Static / JAMStack Cloud Hosting
Name & Link Type of Hosting Description Free Tier?
Netlify JAMStack / Static
(+ Serverless Functions)		 Static site host that tends to focus on CI/CD integrations, speed (of both static generation and delivery infrastructure), and being easy to use / developer friendly. Generous free tier. Integrates very nicely with Github (auto-comments on PRs with deploy previews, checklists, etc.).

Also: Awesome free service - Netlify Drop - drag and drop ZIP of static HTML, and get instant live URL to share.		 Yes
Vercel (formerly Zeit / Zeit Now) JAMStack / Static
(+ Serverless Functions)		 Similar to Netlify; static site host focused on streamlined automated CI/CD, speed (build & delivery), and integrations. Generous free tier, tight Github integration, and great developer support. Yes
Surge Static Very focused feature set; upload a folder of static HTML and get an instant live site, even with a custom domain.

Unlike Netlify, Surge does not handle any of the build process themselves, so if you are using a generator system, or really any build system at all, you have to run that first and pass the final output folder to Surge. As such, it is often used for fast CLI based usage, such as to update a preview for a client.		 Yes
Stackbit JAMStack / Static Provides extremely easy setup and WYSIWYG (possibly no-code) solution for JAMStack. Plug-n-play solutions, that allow for mixing and matching (e.g. Gatsby + Contentful + Github)

They are somewhat new to market, and currently only offer a very generous free tier. However, certain integrations are still WIP.		 Yes*
Tiiny Host Static Upload a zip with static files, for an instant (temporary, unless Pro) shareable URL. Yes

The table above is a WIP, and omits a lot of offerings that are easy to find if you search for hosting solutions.

Local Hosting

Here are a few of my favorite local host (as in localhost) hosting tools:

Name & Link What Free Tier?
Laragon WAMP stack. Amazing, crazy easy and fast to use, tons of features, can't say enough good things about it. Yes
lwsjs/local-web-server Local static file host. Fast and very configurable, which is why it is one of my favorites. Yes

Image File Hosting (embeddable / hotlinkable)

Name & Link What Free Tier?
Cloudinary Image host with advanced transformation and processing features Yes
Github Technically, you can use Github to serve images by dropping an image into a "new issue" area, and copying the generated link.

Not exactly "fair use"...		 Yes*
Google OpenSocial Proxy Gadget Unofficial / undocumented image resizer, proxy, and cache layer. You can use this as a tool to proxy image requests to get around CORs or insecure image host issues, cache short-lived image URLs, and/or resize images on the fly.

Warning: If you try to access URLs directly, instead of through img tags, you are likely to get a "your computer or network may be sending automated queries" error page.		 Yes
images.weserv.nl Free image resizer, proxy, and cache layer. Similar to Google OpenSocial, but well-documented, free, and open-source! Yes

Package CDNs

Web Dev - Compilers, Bundlers, Build Tools

Web Dev - Bundlers

  • Webpack
  • Rspack
    • Modern, fast, replacement for Webpack
  • Parcel
    • Really focused around bundling as a consumer (e.g. if you are building an app), with limited features for those trying to author a package a or library
  • Rollup
    • Incredibly powerful and extensible; powers a lot of other bundlers under-the-hood
    • This is a great article explaining the difference of and need for Rollup
  • bili
    • Low-config default, easy-to-use, wrapper around Rollup
  • microbundle
    • Low-config default, highly-extensible wrapper around Rollup
    • Native TS support
  • Browserify
  • Gulp
  • Grunt (kinda, since it is a generic task runner, but has plugins/integrations for bundling)
  • Snowpack
  • ESBuild (ðŸ”Ĩ🚀)
  • tsup
    • Low-config bundler focused on TypeScript libraries, powered by esbuild (+ Rollup).
    • Also supports .js, .json, etc.
  • TSDX
    • Calls itself a "Zero-Config CLI for TypeScript Package Development". Uses Rollup under the hood.
    • Built-in linting and formatting, tests, etc. Might be overkill for smaller packages.
    • Similar to create-react-app, you are meant to use this both run and scaffold your new project - conversion for an existing repo is probably trickier.
  • Estrella (uses esbuild)
  • bunchee
    • Zero-config bundler built on SWC + Rollup

This is a great new resource (2020) for a comparison of common bundlers and build tools, especially based on supported feature sets 👉 bundlers.tooling.report

My WIP Cheat Sheet: /js/js-bundlers

Web Dev Build Tools - CLI Tools

  • Madge
    • Analyzes and generates an analysis/graph of dependencies (internal by default) used in your projects / files, and even detect circular dependencies!
    • Can output an image visualization of what the dependency resolution / chain looks like

Web Dev - Build Tools - Unsorted

  • Rome (Linter + ...)
    • Rome aims to be the ultimate all-in-one build tool / processor for frontend development (i.e. Javascript, TS, CSS, etc.), focused on simplicity of use and no external dependencies
    • Stated goals are to implement linting, bundling, test runners, compilers, and more
    • Pretty ambitious pitch / announcement, but at the time pretty much only linting is implemented; we will have to wait and see how viable this becomes as a replacement for so many tools in the web dev toolbox.

Online Sandboxes ("code playgrounds")

📄 I maintain a more comprehensive list of "scratchpads and playgrounds" in this repository.

Name & Link What Free Limits Anonymous Sharing Supported? Private Projects?
CodePen Sandbox. Supports pre-processors and some JS transpiling. Community oriented (comments, featured pens, etc). Private pens are pro. Unlimited public pens, but
- No private pens
- Storage limits
- No "projects"		 No Paid
JSFiddle Very similar to CodePen, with maybe less glamour, but more dev features. Unlimited public fiddles, but no private fiddles. Yes Paid
SassMeister Just for Sass (shows Sass Input -> CSS Output) No No No
Glitch Advanced code playground, with more of a 'project' or 'app' scope rather than a small snippet. The idea is you can build entire multi-file apps within Glitch, share, and remix others'.

Also loves to be quirky and fun.		 No private projects, some limits on resources and uptime. Yes Paid
CodeSandbox Probably the most powerful multi-file sandbox. Basically like your own VSCode IDE + Node, in a shareable online environment. Supports package.json + NPM dependencies, imports, and much more. In addition to no private projects allowed, you also only get 20 public projects under the free plan. Plus resource limits, etc. Yes Paid
Gitpod Open any Github or Gitlab repo instantly in an online IDE, with built-in advanced support for things like Docker, build processes, etc. Extremely fast and powerful. Yes, see pricing page NA NA
Repl Similar to CodeSandbox; top-tier online IDE, which supports dozens of languages and complicated setups. Extra angle is collaboration; built-in "multiplier" mode. Unlimited public projects, but no private. Resource limits. Yes Paid
StackBlitz Similar to CodeSandbox or Repl. Unlimited public projects, no private projects. Yes Paid
fiddles.io Collection of links to other fiddles. Seems out of date... NA NA NA
sqlfiddle.com Online **SQL sandbox (MySQL, PostgreSQL, etc.) No Yes NA
RunKit Playground to run and test specific NPM packages, in a NodeJS environment. For example, to play around with moment.js. NA No NA

Anonymous Sharing = You can create a project and get a shareable URL, all without having to sign up and register an account (free or otherwise)

Private Projects = There can be varying levels of "privacy", but a bare minimum, your projects are not searchable, do not show up in public "feeds", and don't show up under your public profile listing. Some platforms offer greater degrees of privacy - e.g., locking down by password or allowlist of members that can access.

Options that have been retired:

Name & Link What Date Retired
Katacoda Dozens of different playground types, including NodeJS, Dotnet, and more. June 15th, 2022

Static Site Generators

Name What Input Types Output Types
Gatsby (gatsby.js) JS-powered, extensible, static PWA generator that is focused around React + GraphQL Unique: Flexible, and can take data from almost anywhere, including a CMS like WordPress. Uses GraphQL APIs. Themes. React based static site with PWA features.

Flexible and not limited to blogs.
11ty / Elventy JS-powered, static site generator that is rather un-opinionated and does not include boilerplate client-side JS. Markdown, HTML, JS, etc. Vanilla HTML, no boilerplate JS by default.

Easy to augment to preference though.
Hugo Go-powered, markdown-based static site generator. Main focus is on generation speed, and running as single binary with no dependencies. Themes Markdown Standard static site.

Lots of pre-built themes to pick from.
Jekyll Ruby-powered, markdown-based static site generator. Used for Github pages. Markdown or Liquid Standard static site. Focused around blogs.

👉 StaticGen is an easy-to-browse collection of the most popular SSGs for Jamstack sites.

JS / NPM Package Comparison Sites

JS Utility Libs

  • date-fns - Date/time utility library
    • Benefit over moment.js is tree-shakability, smaller bundle size, and immutability
    • Says it's "like lodash for dates"

Site Auditing & Performance Tools

Name & Link What Free?
Google Search Console Monitor the SEO of your site, as it relates to Google's search engine. Submit sitemaps, get alerted on issues, etc. Yes
Google Analytics Track and monitor traffic to your site, from any source, and easily pull reports, create dashboards, and more. Requires adding tracking code to your site. Yes
ismyhostfastyet.com List of average TTFBs for popular web hosts, based on Chrome stats and public info. Yes
web.dev/measure Get an instant webpage performance report, similar to Lighthouse, but no extension or dev tools required. Yes
Google Lighthouse An automated webpage analyzer that provides an audit of common performance and SEO issues. Powers the "audit" panel now built into Chrome, but is also available as a standalone browser extension. Yes

Monitoring and Session Troubleshooting Tools

Name & Link What Free Tier?
Replay Time travel debugger - record a web session, with actual code execution, for easier post-session replay and debugging Yes

Frameworks

Front-end Focused

Name & Link What Stack
React Front-end framework, probably the most well-known. Uses the Virtual-DOM. React
Vue Front-end framework, which also uses the Virtual DOM. Embraces SFCs, directives, and built-in transitions. Vue
Ember Front-end framework. Syntax seems similar to Vue. Has more baked-in stuff than Vue and React, versus leaving it up to Dev to decide. Ember
Svelte Front-end slim framework. It is in a weird position; kind of halfway between Vue and just using handlebars.js and a little bit of custom JS. Kind of harkens back to how a lot of people hand-built their first sites without frameworks.

Aims to be as minimal as possible.

Compiles to native JS at build time, and at runtime it "surgically updates the DOM" instead of using VDOM like React (thus way faster).		 Svelte syntax, simple HTML + JS + CSS
Stencil TSX based framework for building web components (calls itself a "component compiler"). Similar to Svelte, the code is statically compiled. TSX, but heavy emphasis on TS classes and decorators.

Compiles to web components, which can be used anywhere.
Alpine Front-end slim framework / templating. Similar to Svelte and Handlebars, and uses an HTML attribute / directive driven syntax (e.g. <div @click=""></div>).

No build step or VDOM; just plug and play.		 Alpine syntax (similar to Vue), simple HTML + JS
Angular Front-end framework. Out of all the front-end frameworks, this one is usually known for being the most "out-of-the-box" full package; pretty much everything is built-in already. But that also makes it big and complicated. Angular. Now supports Dart too!
next.js React framework focused on server-side rendering and having built-in features for typical static site needs (routing, automatic code splitting, etc) React, JavaScript/TypeScript, HTML, etc.
Astro Build SSG / Hybrid Static Site Generator, that is interoperable with many different UI frameworks (React, Svelte, Vue), and by default ships zero-JS. Unlike Next.js, Astro can offer partial hydration, so that you can opt only part of a page into using interact JS / SPA stuff, instead of hydrating the entire app.
Web Components Web Components are less of a framework, and more of a set of cutting-edge native browser APIs and specs that enable the creation of reusable custom components and corresponding tags.

For example, makes use of the new Shadow DOM API to help maintain component isolation / encapsulation.

No native build step, but frameworks might target it as output, and/or polyfill for older browsers.

Main benefit: It is native browser code, so by default, it is interoperable with almost everything. Whereas a React component might only play nice with other React components, a Web Component should work with vanilla websites, React, Vue, etc.		 HTML + JS (Web APIs)
Remix Form and Route based approach to fullstack websites. Heavy emphasis on progress-enhancement, error boundaries, and routing. React, JavaScript/TypeScript, HTML, etc.

Front-End Comparisons

🔗 This is a good article on why maybe we should not focus on Frameworks themselves so much, but rather the final product (and built target) - O'Shaughnessy: "Disappearing Frameworks"

Back-end Focused

Name & Link What Stack ORM Stars / Contributors
Django All-in-one Python backend. Comes with DB ORM, migrations, middleware, auth, boilerplate scaffolding, etc. - all out of the box. Python Django GitHub stars
GitHub contributors
Laravel All-in-one PHP backend. Comes with DB ORM, migrations, middleware, auth, boilerplate scaffolding, etc. - all out of the box. Mature framework, heavily MVC based. PHP, specialized methods, ORM, Blade Template files Eloquent GitHub stars
GitHub contributors
Lumen Literally a slimmed down version of Laravel, maintained by the same team and sharing the same core features. Focused around APIs and microservices, so has higher throughput and lower latency, but less overall features. PHP Eloquent GitHub stars
GitHub contributors
Symfony Not exactly a framework as much as a collection of components that can be used to build a framework. Laravel uses several components from Symfony and adds on top of it. As such, using Symfony directly can often result in better performance PHP Doctrine GitHub stars
GitHub contributors
ubiquity Slimmed down MVC PHP framework, focused on performance (particularly in ORM). Faster than Symfony and Laravel PHP Built-in, Annotation powered GitHub stars
GitHub contributors
Yii MVC PHP framework. Looks like it has slightly better perf than Laravel/Lumen or Symfony. PHP Yii Query / Yii Active Record / etc GitHub stars
GitHub contributors
Adonis Closest JS/NodeJS based alternative to Laravel; a full-featured MVC framework that comes with the expected features - DB ORM, routing, etc. JavaScript Lucid GitHub stars
GitHub contributors
Hapi Slim NodeJS framework focused on speed and security (no dependencies). Kind of a micro-framework, so probably best for things like APIs, services, etc.

Also, see hapi-pal		 JavaScript BYO - Objection.js is a popular pick GitHub stars
GitHub contributors
Feathers Unique in that it does not use the MVC pattern - instead it uses hooks and services, designed to reduce boilerplate code writing and make scaling easier.

Personally, I find the syntax a little off-putting and the balance of "what comes out of the box" to be off.		 JavaScript / TS BYO, but lots of officially integrated adapters, including Objection GitHub stars
GitHub contributors
FoalTS Full featured, with controllers, services, hooks, etc. Uses a lot of dependency injection, which might make it a more comfortable choice for .NET users. TS Default integration is TypeORM GitHub stars
GitHub contributors
Total.js Framework Looks like it tries to be as "full-service" as possible, but also a little hard to follow what they are selling... JavaScript node-sqlagent GitHub stars
GitHub contributors
Sails NodeJS MVC framework, with lots of built-ins. On the slower side (slower than Hapi, RingoJS and Fastify)

I've heard it shares a lot of commonality with Ruby on Rails		 JavaScript Waterline ORM GitHub stars
GitHub contributors
NestJS NodeJS framework that is a wrapper around Express. Focused on being modular (install what you need), dependency injection, and building APIs. Built with TypeScript, so plays extra nice with it.

Lots of DI, decorators, and annotations.		 JavaScript / TS Default integration is TypeORM GitHub stars
GitHub contributors
Blitz.js Wrapper around Next.js, full-stack batteries-included, Ruby on Rails inspired, open-source. Includes authentication, middleware, database connections, etc. - lots of stuff that Next.js doesn't include out of the box. TypeScript Default integration is Prisma GitHub stars
GitHub contributors
Loopback Focused on API scaffolding. Seems a little over-complicated... JavaScript / TS Built-in GitHub stars (v3) + GitHub stars (v4) / GitHub contributors
ASP.NET Core MVC ASP.NET based MVC framework. A little confusing in that it is now based on .net core, but there is a different version based on .net 4.x. Furthermore, they share some features and codebase; it looks like both versions use Entity Framework, which is ASP's DB ORM solution (with migrations, etc.).

But then for EF, there are two versions - EF 6, which uses .NET 4.x, therefore only running on Windows, or EF Core, which of course runs on .NET Core, and can run anywhere.		 C#, Razor (templating, like Laravel Blade) BYO, top choices being either Entity Framework (EF), or Dapper GitHub stars
GitHub contributors *

Fastify is an honorable mention, but I'm not sure I would qualify it as a full traditional framework (at least not an MVC one). Although it has things like middleware and logging, its main focus is just on being a very fast request handler, as a replacement for express. Same goes for VertX, even though they are super unique in that they allow languages other than Java to run on the multithreaded JVM.

Other honorable mentions that are not quite frameworks, and closer to Express alternatives are Koa, Polka, Restify

Note on ASP.NET versioning: With the bump from version 4.6 to ASP.NET version 5 (ASP.NET 5), MS decided to rename v5 to ASP.NET Core and there will no longer be two versions moving forward. It looks like MVC-6 uses the new Core 1.0 and it plus web api / core are just called ".NET Core", whereas MVC-5 uses the traditional ASP.NET 4.6. See this and this post for details. A further note is that this is really a merge of .NET Core and regular ASP.NET - Although this will be V1.0 of the merged name, technically it will kind of be .NET Core 4.0 (current release is 3.x) merged with ASP.NET 5 (current release is 4.x).

Nuxt (Nuxt.js) is also an exception to this list. I am reluctant to call it a framework (maybe a framework for a framework), since really it is more of an plug-n-play build/serve system around Vue. In this way, it might almost be comparable to Gatsby, since they share a lot of common objectives - such as serving both a JS powered reactive version, as well as static rendering / SSR version of the same codebase, automatically.

Performance Focused Backends

Backend Comparisons

DB to API Wrappers / Generators / Consumer Clients

These are frameworks / libraries that typically sit between the DB and the client, and handle a large part of the API generation and query handling.

In the case of GraphQL, these libraries also often include UI clients (aka consumers, resolvers, etc) - which bind the UI layer to the data layer in a way where you, the developer, does not have to handle manually coding the data fetching.

  • Apollo (JS) - GraphQL Wrapper
    • Main features are clients, which go in the UI, and the server, which generates GraphQL endpoints
    • Has automatic freebies: caching, etc.
    • Good intro guide by Flavio Copes
  • Prisma (JS / TS) - GraphQL Wrapper
    • Similar to Apollo, but with better Type-Safety in the client
    • Also exposes a more traditional ORM syntax (e.g. where, first, etc.)
  • Several headless CMS solutions also fall under the umbrella of "automatic API generator"
    • See list under relevant heading
    • For example, you often see Strapi recommended for building APIs, despite it branding itself as a headless CMS

Headless CMS

Side Note - What the heck is a "headless CMS"?

Short answer: A CMS that does not care about presentation (templates) or anything to do with the user-facing part of your site, and is only concerned with the backend content-editing and admin management part.

One example is the NetlifyCMS. It provides a GUI editor for editing the site content, which is then synced to a Git repo (serves as database). You then have to use it with something like Gatsby, which turns the actual files stored in that synced repo into front-end HTML, CSS, and JS.

The misleading part is that there tends to be a lot of overlap between headless-CMS and non-headless-CMS. I mean, technically, if you uninstall all your themes from Wordpress and only use the built-in APIs to pass strings from MySQL to Gatsby, then WordPress is actually acting as a headless CMS!

APIs and API Tools

Name & Link What Free
jsonbox.io Simple POST/GET temp API endpoint for playing around Yes
mocky.io Quickly get a single URL you can mock response from Yes
req|res Dummy rest API Yes
HTTP Toolkit Intercept, mock, modify, and redirect requests in real-time. Even mock entire endpoints. Yes* (some features)
Postman Desktop app to easily make API requests, save responses, run tests, etc. Yes* (most features)
Insomnia Similar to Postman; tools for making API requests, replaying, saving responses, designing APIs, etc. Yes* (except Sync)
mailtrap.io Test sending email! Yes (50 emails at a time)
RequestBin Instant endpoint you can use to capture and review HTTP requests Yes
JSONPlaceholder Fake mock REST API Yes
JSON Generator Generate dummy JSON data, with structured templates Yes
Programmable Web - API Directory Directory of APIs (both free and paid) Yes
Public-APIs A massive collection of free (and public-facing) APIs, as a Github repo. Here is a nice GUI for searching and browsing, as well. Yes

User Analysis Tools for Support

I'm not sure if there is a more specific name for these types of tools, but basically, these are web pages (or small pieces of software) that analyze a user's tech stack and generate a shareable report based on the findings; it might include things such as screen resolution, browser user-agent, internet speed, IP address, etc. These reports can help you (or your IT team) troubleshoot related issues.

Name & Link What Share by URL Free
What Is My Browser Spits out a report of browser basics, plus a little extra. Examples: OS, IP, resolution, etc. Browser version is included, but full UA string is not. Yes Yes
MyBrowser.fyi ðŸŠĶ Minimal browser report, designed to be as minimal (privacy considerate) and readable as possible. Yes Yes
testRTC Network Test Designed to test browser capabilities that are essential to Web RTC and remote collaboration software. Full explanation here.

Example Report: here		 Yes No
WebRTC Troubleshooter Designed to test Web RTC related browser capabilities and network performance. Report shows pass / fails, but you can click to expand with a little more detail. *Yes Yes
Twilio WebRTC Diagnostics Same as WebRTC Troubleshooter - pass / fail test for Web RTC tech stack. However, pass/fail requirements are specific to Twilio. No Yes
Belarc Advisor Installed software (not browser-based) that scans the computer and generates a full report, with info such as OS, CPU, Memory, Security Patches, etc. *No (But exportable reports) *Yes (non-commercial)

Lists:

Built in browser support report pages:

  • Firefox: about:support
  • Chrome:
    • chrome://system/
    • chrome://version/
  • Edge:
    • edge://system/
    • edge://version/

Search Terms:

  • browser "report" "support" OR "IT" OR "diagnostics" OR "diagnostic" OR "troubleshooter" "speed" OR "bandwidth" "jitter" OR "lag" "resolution" OR "browser size" "operating system" OR "OS" -requirements -google -books
  • generate browser "report" OR "summary" OR "export" "for support" OR "for it support"

Unsorted online dev-tools

Name & Link What Free
CyberChef Online web-app for string manipulation.

You can chain together multiple complex transformations, and save as a "recipe", which you can then reuse later or share!		 Yes
globster.xyz Glob tester with visual preview and explanations Yes
World Time Buddy Quickly convert between timezones with interactive slider Yes
Jeff Kayser's strftime() formatter Preview and test strftime() date/time conversion patterns Yes
strftime.net Preview and test strftime() date/time conversion patterns Yes
Mockaroo Quickly generate some fake data sets Yes
Desmos graphic calculator A nice visual way to look at equations, play around with input sliders, etc. Yes
brumm.af/shadows CSS Shadow Generator Yes
CSS Transform Playground CSS Transform Functions Playground / Generator Yes
larsenwork.com/easing-gradients CSS gradient generator. You can copy CSS rules directly out of the tool. Yes
colors-and-fonts Collection of Palettes, fonts, etc. Yes
Resolution Scale Calculator Calculate downscale (or upscale) options, limiting to integer resolutions. Yes
Git History View a timeline / slideshow of a single file's Git history. Yes
QuickType A quick web-app tool for instantly turning JSON into code, even with nested types. Supports TypeScript, Dart, C++, and more! Yes
transform.tools Easily convert between different code representations; e.g. CSS to JS Objects or JSON to YAML. Yes
cron-job.org Schedule URL-triggered CRON jobs, for free, up to 60 / hour. Yes
transformations.jobertabma.nl Detect string transformation methods that have been used between given input and output.

Helpful for reverse-engineering, security audits, etc.		 Yes
epochconverter.com Easily convert epoch-based timestamps back and forth with readable dates. Yes
tree.nathanfriend.io Basically an online version of tree, to generate visual text representation of a directory structure. Great for generating trees to insert into documentation. Yes

Browsers and Browser Tools

Browser Extensions, Bookmarklets, etc.

Name & Link What Free
tota11y Accessibility analyzer / debugger. Yes
Requestly Redirect network requests, swap headers, etc. *Yes

Preview / Dev Browsers

Name & Link Free
Responsively Yes! (and Open-Source)
Sizzy No
Polypane No

Sizzy has a lot of additional features and is generally well-liked by the dev community.

No-Code / Low-Code Solutions

NoCode / Low-Code Automation Workflows

Name & Link What Free Tier My Opinion
IFTTT "If This, Than That" - visually set up small flows (trigger + execution). Many different native integrations. Yes (basically everything) Honestly? I'm amazed that this is ever talked about positively; extremely limited capabilities, the UI is a mess (why is "create" hidden under a menu?), and it seems unreliable at best.
Zapier Visual flow / automation builder. Has offerings for both technical and non-technical users; you can stick to simple steps, or you can also make use of scripts and advanced steps. Yes (100 executions / month, max of 5 flows total) Good UI and overall feel, but extremely pricey; even paying $20/month limits you to 750 executions a month, which you would burn through in just 5 days if you have a zap that runs once every 10 minutes.
Integromat Visual flow / automation builder, with advanced controls, branching, logic, aggregators, and more. Yes (1,000 executions / month, 15 minute minimum interval) I would say that this is a strong "step up" from Zapier, and in my opinion, much better situated in terms of pricing and feature set. Tons of integrations. Have not yet tried it, but like the look.
automate.io Visual flow / automation builder, in the same category as Zapier. Now owned by Notion. Yes, free plan includes 300 monthly actions. Haven't tried it yet.
Pipedream Hosted platform for building scalable workflows, tying different APIs together. Not really no-code/low-code, but removes / abstracts a lot of the complexities of scaling and execution so you only have to focus on individual steps. Yes - very generous - 100,000 invocations / month Have yet to try, but looks impressive and I like the pricing model!
Microsoft Power Automate (Previously Flow) Visual flow builder and pipeline designer. Growing number of integrations, especially with other MS business products. Maybe? The licensing for this seems like a nightmare... I haven't used this at all, so I can't really give an opinion. I like that they are adding some "intelligence" to flows, with some sort of AI. That alone puts them a bit above some competitors. I really wish this had simplified pricing and licensing - as it is, it seems like they are only interested in catering to business employees, and not individuals.
Huginn Open-Source "agent based" work flow automation platform. Ruby-based, and extensible with gems.
- here is a brief overview		 Yes (self-hosted) N/A - no experience
n8n Open-Source WYSIWYG workflow automation builder platform, based on nodes and the connections between them. Built with Node.js and TypeScript. Yes (self-hosted) No experience with it, but the GUI looks really impressive, and there is an extensive list of integrations for a project like this.
Superblocks Visual flow / automation builder Yes (generous) Haven't tried it yet, but looks cool.

File Sharing

Name & Link What Automatic E2E Encryption? Free Tier
transfer.sh Upload directly from your local command line (or via web interface). Up to 10GB, link expires after 14 days. No Yes
WeTransfer Sent via Email, or get shareable link. Upload in browser. No Yes (limited to 2GB, 1 week expiration)

Pro also adds password protected sharing
Wormhole New service (2021). Automatic expiring download links, end-to-end encryption, etc. Yes Yes
Magic Wormhole CLI for sending files (or directories) across devices, using websockets for P2P transfer Yes (*) Yes

There are also a number of free WebRTC based p2p file sending sites, like sharedrop.io, which make it fast and easy to send large files directly between devices instead of involving a hosting service in the middle. Plus, WebRTC requires that encryption is used 🔏.

Local Dev Tools

Task Runners and Script Automation Tools

Comparing task runners:

Program Config file formats Parallel Execution? Watcher? Autocomplete? Conditionals? Branching? Caching / "Fingerprinting" Non-shell Languages?
taskctl YAML, JSON, TOML ✅ ✅ ✅ ✅ ✅ ⛔ ⛔
task (aka go-task) YAML ✅ ✅ ✅ ✅ ⛔ ✅ ⛔
just (justfile) YAML ⛔ ⛔ ✅ ðŸŸĻ ⛔ ⛔ ✅
maid MD (Markdown) ✅ ⛔ ✅ ⛔ ⛔ ⛔ ✅
  • Queueing / Task Execution Management:
Markdown Source Last Updated:
Sat Sep 28 2024 22:49:50 GMT+0000 (Coordinated Universal Time)
Markdown Source Created:
Mon Aug 19 2019 17:06:24 GMT+0000 (Coordinated Universal Time)
ÂĐ 2024 Joshua Tzucker, Built with Gatsby
Feedback