+ Once upon a time, I needed to draw some Bezier curves because I was trying to create a Japanese kanji composition system that turned strokes + into outlines, and that required knowing how to offset Bezier curves and... at the time (2011, time flies) there was no good single source of + information for Bezier curves on the web. So I made one. Sure it started small, but it turns out that if you just keep adding bits to + something, several years later you have quite the monster, and a single HTML file becomes intractible. +
++ So, in 2016, when React.js exploded onto the scene, I rewrote the primer as a React app, and it became a lot easier to + maintain. Like, a lot a lot. However, there was a downside: no JS meant no content. Sure, server-side rendering sort of existed, but + not really, and because the Primer is hosted through github, there was no "server" to run. Plus, trying to rehydrate an app the size of the + Primer from a giant HTML file had truly dire performance. +
++ So I left it a regular React app, and every time I thought "wouldn't it be nice if it was just... a web page again?" the browser landscape + just hadn't caught up. Finally, in 2020, things are different: with a global pandemic, and some vacation time, and something random causing me + to look up the state of HTML custom elements, everything was pointing at it being time to finally, finally, turn the Primer back into + a normal web page. +
++ The new tech stack is, frankly, pretty amazing. It does some thing that weren't possible even a year ago, let alone back in 2016, and this is + the first in a series of posts on how the new tech stack works. To give a bit of a teaser, the series will cover: +
+-
+
- Essentially reinventing (a limited form of) Processing.js +
- Writing a custom build system, because I'm exhausted with Webpack and hope to never use it again. +
- Using modern ES module code that runs in both the browser and Node.js. +
- Chapter content written as easy to read and write markdown format. +
- A custom
<graphics-element>
element that turns asrc="blah.js"
into an interactive canvas graphic...
+ - ...with that same source code being read in and run by Node.js on a canvas to generate fallback images. +
-
+ Real LaTeX code, that gets compiled into optimized SVG using
xelatex
,pdfcrop
,pdf2svg
, and +svgo
. +
+ - Localized content based on a simple filenaming scheme. +
- Nicely formatted HTML, CSS, and JS thanks to
prettier
.
+ - Responsive CSS, so the content intelligently reflows where possible. +
- A "Live build" setup for working on the content and code. +
- Automatic link-checking to make sure none of the links in the Primer lead you to a 404. +
- This "news" section, so that I can write posts to go along with new sections getting added, or notable changes being made. +
+ It's going to take me a while to detail the entire tech stack, but ultimately what matters is that you get a Primer that is a normal "vanilla" + HTML, CSS, and JS page again, that "just works" even with JS disabled. +
++ Enjoy The new Primer on Bézier Curves, and if you find any problems, + you know where to go. +
+See you in the next post!
+— Pomax
+