Day 01 - JAMStack Architecture

Welcome to part 1 / 3 workshop series on building documentation sites using JAMStack architecture.

Remember to check in at events.mlh.io/events/11730!

Intro - Whoami

  • I am a Coach @MLH
  • I also teach CS and robotics for grades 6-12
  • I like Star Wars, indie games, and lettuce
mlh portrait

What type of workshop is this?

  • First day is less coding, more templates + learning resources
  • Workshops will support each other, but 100% attendance is not mandatory!

Technical things we'll do today

  • Build your own website with 0 code using templates
  • Learn how to prototype like a designer with tldraw + penpot

Agenda

  • What is the JAMStack architecture
  • What is the learning path for this pattern
  • Designing our own documentation website

No need to take notes!

This slide deck and all the resources in it will be available to you via the MLH discord server in the #announcements channel.

Architectural pattern that separates content from experience

drake meme. 'writing in html' vs 'writing in markdown'

DRY - Don't Repeat Yourself

  • Avoids repeating code
  • Building with resuable components
  • Can get complicated, but frameworks can help with this

Quick crash course on types of web development

Here's an even shorter highlight

Few types of websites

  • MPA - Multi-page-application: server sends web files but full page reloads
  • SPA - Single-page-application: browser builds web files but slower
  • Hybrid: best of both?

Why use a meta-framework

  • hybrid applications
  • hydration optimization
  • emphasis on templating

Why learn webdev with a meta-framework?

  • 43.5% of all websites run on WordPress W3Techs
  • Building static sites can take you far
  • Better than learning vanilla where you can learn bad patterns

Site generators are tools that take content and templates as input and generate static HTML files as output. They allow developers to build websites that are fast, secure, and easy to deploy by pre-rendering pages at build time, rather than generating them on the fly with each request.

Which one are we going to build?

DISCLAIMER: I personally have only played around with a few of these: Astro, Docusaurus, and 11ty. Ultimately, it doesn't hurt to try out any of the meta-frameworks that seem interseting to you.

  1. Docusaurus: fully-featured out of the box
  2. 11ty: fast, lightweight, easy mental model
  3. Astro: use any component framework + hip one

Resources for learning web dev

Roadmap.sh: FOSS learning roadmaps. go here to figure out roughly what order you should learn everything in

The Odin Project: FOSS bootcamp with assignments and stuff

Personal roadmap recommendation for JAMStack

  1. Pick a tech stack thats popular to get more support stackoverflow
  2. Learn the anatomy of an HTML object
  3. Learn the anatomy of a CSS selector, but start by using somebody else's style picocss
  4. Learn how to handle the DOM with JS
  5. Learn a templating language
  6. Learn a meta-framework
  7. Learn a component framework

Most of React's "problems" are just people being bad at JavaScript

Theo - t3.gg

Debugging

The key to debugging web dev bugs is a simple 3 step process

  1. Figure out where problems can come from
  2. Identify the problems
  3. Solving the problem (probably by going to documentation first)

Bonus tips on FOSS and job-seeking

  • Get practice on large code bases by building FOSS projects
  • Read techincal blogs of places you want to work at
  • Look at FOSS projects of a company to get familar with their style
  • There's a lot of resources on github, just search through it sometimes
  • Student developer pack is super cool btw (also has some stuff)

That's pretty much it for JAMStack

Stick around if you want to learn how to do FOSS design work

For the project we built on stream today

Check out this repo