Skip to content

Latest commit

 

History

History
43 lines (35 loc) · 2.59 KB

readme.md

File metadata and controls

43 lines (35 loc) · 2.59 KB

tuckie.zone website :>

this is my personal portfolio. the goal was to have as much of a SPA-type experience as posible without really resorting to a framework.

There's a single entrypoint html, one style sheet, and one js file. initial pageload as of writing is ~27.22 kB transferred. (okay, there are two css files but the other is a font.)

this is my site's excerpt about the tech stack:

tuckie.zone is designed for minimal html/js/css bundle size and uses sprae for hydrating as a SPA. i've written my portfolio in vue/vite a few times but honestly i'd personally rather cut about 300 dependencies, 4 build steps, and save you the bandwidth these days. in a lot of ways i enjoy working with the DX and simplicity of modern frameworks, but sometimes its a matter of deciding what the priorities of a site are and for a static portfolio, i'd rather optimize for pageload speed and network traffic than 'show off' too much ://

this is a more substantive runown of it all:

dev server / build: bun

  • bun std lib basically covers 99% of the dev env for this project
  • bun has builtin ts compilation and jams everything into a single file
  • easy enough https server for local dev
  • currently using a plugin to set html as the entrypoint, but honestly not sure its all that necessary. i can probably just copy over html directly, but its nice it minifies it :/

note: """hot reloading"""

  • re-run the build script for every http request of '/', then serve whatever file was requested
  • this is fine, actually.
  • i think a more robust solution would filter by extension and just build that one thing. im not really worried about it so far.

frontend: sprae

  • this is the only JS dep for the site
  • basically vue "progressive hydration" / alpinejs style html templating
  • gzips into like <4kb
  • composable directives, i only use [if, each, text, value]
  • https://github.com/dy/sprae

SPA functionality

  • its really not that complicated to build a react-router in 20 lines of code
  • basically just hook into window.onhashchange
  • run hash change handler on pageload to handle external links
  • in sprae i just populate a current_route property and :if out the current section
  • you could practically do this in pure css with the :target selector

fonts

  • a purely minimalist site would just use whats available on the system
  • i like monofur though :(
  • https://github.com/Munter/subfont turned out to be pretty useful here
  • it cuts from a 44kb woff2 to 7.9kb of css
  • downside is it limits to whatever characters it finds in your html
  • right now the page will load the woff2 when encountering anything not in the initial css