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).
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 (
Popular example: Write your CSS without concern for browser version, and then use PostCSS
|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.
Utility focused (little or no pre-built components)
- Tailwind *
Hosting / Pipeline / Deployment
- Grunt (kinda, since it is a generic task runner, but has plugins/integrations for bundling)
Online Sandboxes ("code playgrounds")
|Name & Link||What||Anonymous 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.
|CodeSandbox||Probably the most powerful multi-file sandbox. Basically like your own VSCode IDE + Node, in a shareable online environment. Supports
|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|
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.|
- hueniverse.com: On Node Framework Popularity
Server Side IO Performance, by Brad Peabody
- Good read on how server IO processing works with different languages
|Name & Link||What||Stack|
|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!|
|Name & Link||What||Stack||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||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||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||21,629 / 1,931|
|ubiquity||Slimmed down MVC PHP framework, focused on performance (particularly in ORM). Faster than Symfony and Laravel||PHP||197 / 9|
|Yii||MVC PHP framework. Looks like it has slightly better perf than Laravel/Lumen or Symfony.||PHP|
|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
||C#, Razor (templating, like Laravel Blade)||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 Koa and Polka. And VertX, even though they are super unique in that they allow languages other than Java to run on the multithreaded JVM.
ASP.NETversioning: 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).
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](https://reqres.in/)||Dummy rest API|
|mailtrap.io||Test sending email!||Yes (50 emails at a time)|