how do you decide what to write about? How do you put together the material? What does your publishing process (including toolchain) look like?
1 overview#
1.1. topics - 5 min
- I’ve also had a long-running game development web site, older than wikipedia or slashdot, believe it to be the oldest surviving gamedev site https://web.archive.org/web/19990117080207/http://www-cs-students.stanford.edu/%7Eamitp/gameprog.html[1] - archive from 1997, but site up since 1995
- my topics were things I wanted to use in future projects and also things I’ve used in previous projects
- kept updating site over the years, java applets 20 years ago, flash applets, now html5
- java and flash were interactive diagrams, contained to a rectangle, whereas html5 let me make the whole page interactive
- lots of java applets were standalone, without even much text on page
- https://www-cs-students.stanford.edu/~amitp/game-programming/road-applet/roads.html[2] - standalone interactive parts
- https://www.redblobgames.com/articles/probability/damage-rolls.html[3] - change text or code, draw on images
- leading towards integration of text and diagrams
- inspirations
- prototyping
- debug visualization in games
- visualization as a “tool for thought”
- http://theory.stanford.edu/~amitp/diagrams/car-blind-spots/[4]
- discovered things wasn’t expecting
- but then I applied this to my tutorials, making them interactive
- most of my pages aren’t successful
As my pages got more polished I ended up fighting perfectionism. Ended up splitting the site.
- regular pages: fixed scope variable time
- “x” pages: fixed time variable scope, separate folder - https://www.redblobgames.com/x/
- even then, art projects let me freely explore things, but sharing makes me explore less!
- don’t think interactivity helps for many problems, so I only use it on some pages
1.2. page structure - shorten to 3 pages - 5 min
- page structure — audience is typically trying to solve a problem; need a diagram up front that will both show that this page will help them solve the problem
- textbooks in a classroom where it is the only path forward vs many web pages to choose from
- are they coming for novelty or for problem-solving? → chart shows mostly steady state not social media
- lower investment in a web page than a book, so higher rate of abandonment
- noticed this when buying a $60 game I’m willing to spend a few hours learning it, but when trying a free demo or free game, I’m less willing to spend time on it, because there’s no sunk cost
- I want to teach something else other than what the reader came to learn - https://www.redblobgames.com/articles/probability/damage-rolls.html[6] - nonparametric
- I might start with a simpler but suboptimal answer
- alternate diagrams and text (james bond) - https://www.redblobgames.com/articles/visibility/[7]
- mix of top down and bottom up, don’t have a consistent approach
- strongly believe in learning by motion, interactive diagrams not fully there, but best I can think of; they need to follow through by writing something, and some of my pages have implementation guides to help them do that
- theory & implementation pairs - noise, a*, hexagons ; didn’t want to show implementation early on but changing my tune
- low confidence that this style is actually more effective than other forms if attention is constant, but believe that this style is more likely to get/keep people’s attention; also going for pages that feel good, because of belief that feeling good makes learning better
- favor linear over novel navigation
- favor long pages - scrolling, ctrl+f, recognition (also: diagram initial state), no hidden sections
2 diagram structure - 10 minutes#
- start with the idea that every static diagram could be interactive by adding parameters
- open sandbox
- problem is that the state space is vast, and you the writer know how to navigate (hans rosling) but the reader does not
- main solution is to limit state space
- also give instructions
- interesting: implicit desire to fill space https://www.redblobgames.com/x/1505-beta-distribution/[11]
- most people I show this to want to fill the box, esp. on a touch device - why?
- for “process” diagrams initial state might be blank
- solution is initial state
- also when coding: start with a working program then modify it; easier than starting with a blank source file
- problem: comparison
- try running animation on https://qiao.github.io/PathFinding.js/visual/[13]
- then want to see how it compares to another
- try to remember what happened first time, then run different one, then compare to what you remember
- solution: side by side diagrams
- https://www.redblobgames.com/pathfinding/a-star/introduction.html[14]
- try one set of parameters at a time
- then watch animation!
- then try another set of parameters!
- want to summarize but don’t have that yet; see http://worrydream.com/LadderOfAbstraction/[15]
- plan to add to A* page: charts showing expansion over time, so you can see entire process summarized, and also compare 3 algorithms
- show all > show interactivity > show less
- if you start with the idea of static diagram that’s made interactive, you’d change inputs and page calculates outputs
- but people learn by doing and you’re not letting them run the algorithm
- but also experimenting with page providing inputs and you’ll have to calculate outputs
- https://www.redblobgames.com/pathfinding/a-star/main-loop.html[16]
- https://blocks.roadtolarissa.com/jmahabal/raw/8f010c62112dec083b559cb047a51048/[17]
- all this still assumes diagrams are their own thing! why not extend into page?
- why not change text of page?
3 implementation process - 5 minutes#
- in games we say to get a square up on the screen, moving around
- usually start with one interactive diagram
- but also start with set of topics for a page
3.1. diagrams
- sketch out on paper but often doesn’t work, lots of false starts
- dependency tracking, automatic redraw https://www.redblobgames.com/making-of/diagram-structure/[21]
- layers https://www.redblobgames.com/making-of/line-drawing/[22] and https://www.redblobgames.com/pathfinding/a-star/making-of.html[23]
- shared state between diagrams
- one diagram, global variables, figure out something I like, then build abstractions
- used to overabstract; now I underabstract
- use copy paste a lot
3.2. page
- rough drafts
- lots of abandoned pages, revisit sometimes
- some things take a long time; I revisit a topic for years
- standalone experiments to learn/practice, then put things together into a full page (tower defense before a*; mapgen4 experiments; probability before hex)
4 tech - 5 minutes#
4.1. reader
- site spread out across several servers, but share css
- client-only static pages, no server component - simpler, cacheable, archivable, works on my local machine, works as zip files
- printable, non-js pages?
- page load time tradeoffs
- video seems to be far more popular but text + diagram lets me keep improving over time (decades)
4.2. writer - show emacs?
- 1995–2020 is a long time, went through several generations of build steps, including c preprocessor!
- backwards compatibility over a very long time, still updating pages from 1995
- currently bxml, lets me update style and top level structure of all pages going back 25 years; html to bxml; org to bxml; md to bxml
- usually support multiple generations but then port older ones
- develop locally in emacs, build step is two phases but first phase is fast and runs on save
- generally don’t use build step, no minification, everything can be seen with view source like it’s 1999
- second phase edits html for cache timestamps, also builds site index
- markdown or org turn into bxml turns into html using xsltproc
- rsync to server
- exceptions to everything
5 implementation - skip#
- collecting details https://www.redblobgames.com/making-of/little-things/[27]
- responsive pages https://www.redblobgames.com/making-of/responsive-design/[28] - tool for thinking, as this page helped me think through the problem, and come up with a solution that I liked better than anything I saw out there
- direct manipulation https://www.redblobgames.com/articles/curved-paths/making-of.html[29]
- wish I had something better, often find myself tweaking something and reloading
6 work environment - skip#
- noticed that I get more done in a “busy” environment (office, deadlines) but I get /better work done in a “relaxed” environment (nature, no deadlines); do have to occasionally put soft deadlines on myself
- want other people around occasionally but not all the time
- using discord, twitter more this year