Techstack

JAMstack

JAM staat voor JavaScript, API & Markup.

"A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup" — Mathias Biilmann (CEO & Co-founder of Netlify).

Ik gebruik een static site generator om alles te pregeneraten zodat ik alles vervolgens met 100% performance kan hosten via Github Pages. Leek mij tof om wat meer bekend mee te raken/te oefenen en is tot nu toe best prima gelukt. Voelt ook wel als een cleane work/dataflow zo.

Nunjucks (templating)

Ik gebruik Nunjucks als taal om m'n data mee op de pagina te renderen.
Toen ik begon aan dit project gebruikte ik eerst NJK (Nunjucks) als standaard, toen gooide ik het om naar het voor mij iets bekendere EJS, maar ik kwam daar zo mee in de knel dat ik het alsnog weer heb omgegooid naar Nunjucks.

It is a Rich Powerful language with block inheritance, autoescaping, macros, asynchronous control, and more. Heavily inspired by jinja2. It supports all modern browsers.

SCSS

Ik gebruik SCSS als preprocessor van CSS; hiermee kan ik m'n css netter opdelen in modules, op nettere wijze variabelen gebruiken en kan ik wel één gestructureerde styles.css-file enjoyen.

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

11ty (site generator)

Ik gebruik Eleventy om een static site te genereren/serven/prerenderen.

This is a simpler static site generator. An alternative to Jekyll. Written in JavaScript. Transforms a directory of templates (of varying types) into HTML. Works with HTML, Markdown, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug, and JavaScript Template Literals.

GitHub Pages (deploy)

Ik gebruik momenteel Github Pages om m'n static site te hosten. Ik had ook Netlify gekoppeld maar ik heb iets gedaan met build commands omgooien waardoor 'ie niet meer werkt, maar dat leek mij niet een prioriteit aangezien ik gewoon een werkend product heb al via GP.

Public webpages hosted directly from your GitHub repository. Just edit, push, and your changes are live.

D3.js

Verder gebruik ik d3.js om de data mee in te laden, te manipuleren en uiteindelijk de datavisualisaties mee te maken.

It is a JavaScript library for manipulating documents based on data. Emphasises on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework.