Joshua's Cheatsheets
Light
help

Elevator Pitches

What is this? Read:

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

CSS Frameworks

Hosting / Pipeline / Deployment

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*

Compilers, Bundlers, Build Tools

Bundlers

CLI Tools

  • Madge

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

Online Sandboxes ("code playgrounds")

Name & Link What Anonymous Sharing Supported?
CodePen Sandbox. Supports pre-processors and some JS transpiling. Community oriented (comments, featured pens, etc). Private pens are pro. No
JSFiddle Very similar to CodePen, with maybe less glamour, but more dev features. Yes
SassMeister Just for Sass (shows Sass Input -> CSS Output) 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.
Yes
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. Yes
Repl Similar to CodeSandbox; top-tier online IDE, which supports dozens of languages and complicated setups. Extra angle is collaboration; built-in "multiplier" mode. Yes
StackBlitz Similar to CodeSandbox or Repl. Yes
fiddles.io Collection of links to other fiddles. Seems out of date... NA
sqlfiddle.com Online **SQL sandbox (MySQL, PostgreSQL, etc.) Yes
RunKit Playground to run and test specific NPM packages, in a NodeJS environment. For example, to play around with moment.js. No

Static Site Generators

Name What Input Types Output Types
Gatsby (gatsby.js) An 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.
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.

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"

Frameworks

Comparisons

Front-end Focused

Name & Link What Stack
Vue ___ Vue
React ___ React
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.
Svelte syntax, simple HTML + JS + CSS
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.

Back-end Focused

Name & Link What Stack ORM Stars / Contributors (Sep 2019)
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 16,870 / 511
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 featuers. PHP Eloquent 6,435 / 50 *
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 21,629 / 1,931
ubiquity Slimmed down MVC PHP framework, focused on performance (particularly in ORM). Faster than Symfony and Laravel PHP Built-in, Annotation powered 197 / 9
Yii MVC PHP framework. Looks like it has slightly better perf than Laravel/Lumen or Symfony. PHP Yii Query / Yii Active Record / etc 4,864 / 266
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 6,881 / 38
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 11,460 / 186
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 11,903 / 159
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 538 / 21
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 4,011 / 26
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 20,824 / 216
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 19,366 / 113
Loopback Focused on API scaffolding. Seems a little over-complicated... JavaScript / TS Built-in 13K (v3) + 2.4K (v4) / 130
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 13,663 / 644 *

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

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
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

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
larsenwork.com/easing-gradients CSS gradient generator Yes

Browser Extensions, Bookmarklets, etc.

Name & Link What Free
tota11y Accessibility analyzer / debugger. Yes
Requestly Redirect network requests, swap headers, etc. *Yes
Markdown Source Last Updated:
Sun Feb 09 2020 12:09:23 GMT+0000 (Coordinated Universal Time)
Markdown Source Created:
Mon Aug 19 2019 17:06:24 GMT+0000 (Coordinated Universal Time)