Main

I have been confused for the longest time what all of these web development frameworks actually do for the developer.

especially when it comes to the fact that this site (as of writing this) only uses eleventy and nunjucks. beyond that it's just hand-written html and css. i haven't even forayed into javascript yet because i don't know what it would be used for.

a friend talked me through it and it helped me understand what each of these tools do and why they sound so similar in their descriptions without saying anything at all about what they actually provide for the developer.

Static site generator

SSGs are command-line tools that generate web pages files from plain text files.

Static site generators use web template engines.

They handle all the copy-pasting, file translation, and folder reorganization required to put your site's content into the proper HTML and folders for your website structure.

Template engine

Software that processes and combines content and template resources to produce documents transmittable over an internet protocol

Examples:

• nunjucks (engine written in javascript that parses plaintext files into HTML)
• liquid (engine written in javascript that parses plaintext files into HTML)

Template language

A specialized programming language used to create templates that can be populated with content or data to produce documents or web pages.

These aren't exclusive to documents or web pages; really these are just fancy text replacement systems that are extremely suitable for HTML content (which has a lot of repetition).

This confused me for a while, but template languages themselves are just plain text files. In the domain of web development, template languages just tailor their syntax and functionality to be useful for markup language files - HTML, Markdown, and so on.

• nunjucks (language for nunjucks engine)
• liquid (language for liquid engine)

CSS tools

• CSS preprocessors
• CSS extension languages
• CSS frameworks

Web template system

Composed of:

• Content resource - any file with input data stream, e.g. relational databases, XML files
• Template resource - web templates specified according to a template language
• Template engine - software that processes and combines the content and template resources to produce documents transmittable over an internet protocol

• Eleventy
• Hugo
• Svelte
• SvelteKit
• Astro
• Vite
• Vue
• Next
• React
• Nuxt
• SASS
• HTMX
• Node.js
• Jekyll

Frontend build tool

Web framework

Preprocessor

a program that processes its input data to produce output that is used as input in another program.

my first thought was "is Prettier a preprocessor?" because to me that sounds like processing something before it's used elsewhere. but it turns out there's a difference; formatters format code, changing the style, while preprocessors transform the code. for example, text substitutions, macro expansions count, and so would a preprocessor that optimizes code by changing it.

in this web development space of research i'm doing, it felt like CSS preprocessors were the only ones, but apparently there are HTML and javascript preprocessors, too.