Ben Crowder

Blog: #web

49 posts :: tag feed :: about the blog :: archive

Links #48

#coding #css #fonts #generative-art #links #prism #stackless #svelte #typography #web #web-components

George Francis on Voronoi tessellations in generative art. Enjoyed this. Seems like a decent alternative to circle packing at least some of the time.

Elise Hein on her experience with stackless dev. The minimalist in me is pretty much always interested in this angle on web development.

WebComponents.dev on all the ways to make a web component. Lots of charts. Prism and Svelte look intriguing.

Josh Comeau on designing beautiful shadows in CSS. The techniques definitely make a difference.

Fleta Selmani’s Escheresque impossible type (via Kottke). Love this.


Reply via email or via office hours

Links #47

#accessibility #css #generative-art #html #links #macos #maps #music #web

Stephanie Eckles on practical uses of CSS math functions. Some great examples here.

Matt DesLauriers on pen plotter art and algorithms. I keep thinking about buying or building a plotter. Someday…

Paul Foster’s HTML tags memory test. Got 70.

Sakira Ventura’s world map of female composers. Love this.

Eric Bailey’s introduction to macOS Voice Control. Both this and Head Pointer are really quite impressive.


Reply via email or via office hours

#css #web

Came across Miriam Suzanne’s CSS scope proposal this morning (via Jeremy Keith). Looks good.


Reply via email or via office hours

#css #design #genealogy #html #sparklines #svg #web #working-in-public

Lately I’ve been playing around with implementing genealogy sparklines on the web. Still very much a work in progress, but I’m trying to do more working in public, so here’s the messy current status (and at some point I’ll post the actual HTML/CSS):

Ruby test

sparkline-test-002.png

Implementation notes:

  • The sparklines use inline SVG
  • This test uses the <ruby> and <rt> tags, with ruby-position set to under and ruby-align set to start (though only Firefox supports it so it’s not sadly viable for actual use yet)
  • I don’t really like that it makes the leading uneven (lines that have ruby vs. lines that don’t)

Design notes:

  • Rather than having solid squares at the births and deaths, I’ve gone for vertical lines so they’re less obtrusive (and have also considered just getting rid of the vertical lines, though I haven’t tried it out yet)
  • Circles are simple so I went with them for marriages and children

Absolute positioning test

sparkline-test-003.png

Implementation notes:

  • The names are wrapped in span tags with position: relative set, and the SVG gets position: absolute. Fairly simple.
  • Even leading!
  • There’s some wonkiness right now when the span is at the beginning of a line (the sparkline shows up at the end of the previous line), haven’t tried very hard to fix it yet

Reply via email or via office hours

Links #46

#astro #canvas #coding #javascript #links #spa #travel #web

Google’s Well-Tempered Traveler. Love this. Baghdad in July, though — whew.

Matthew MacDonald on whether Canvas rendering might replace the DOM. I like Canvas a lot, but I hope this potential future is far from the timeline we’re living in.

Astro is an intriguing newish static site builder.

Tom MacWright on alternatives to SPAs, also in a similar vein. I need to look more into the projects he links to.

Tim Daub on how he builds JavaScript apps in 2021, which I suppose is also in a similar vein. Sensing a theme here. (And much of this resonated with me. The more minimal the build process, for example, the happier I am.)


Reply via email or via office hours

Links #45

#coding #css #fast-software #history #links #newsletter #newsletters #styled-components #web

The Science Museum Group’s Never Been Seen collection. Fun idea. I was the first Internet person to lay eyes on this dental stopper, for example.

Samo Burja on why civilization is older than we thought. Göbekli Tepe, Sumeria, and more.

vfoley on making reasonable use of computer resources. Data-oriented design has now snagged my curiosity. I think about this overall topic fairly often, though I still haven’t done anything about it. Also in this vein: Craig Mod’s essay on fast software.

Robin Sloan on having newsletters live on the web and just emailing out a link instead of the full thing. My own newsletter has been sadly dormant for the past several months, but when I revive it I plan to do this.

Josh W. Comeau on how styled-components works. This was good.


Reply via email or via office hours

#arc #blogging #codex #coding #css #django #fastapi #html #javascript #leaf #meta #tools #vinci #web

I seem to have forgotten how to blog. (Actual blogging, as opposed to merely linking to new art.) In an attempt to get back on the saddle again:

Outside of art, my project time lately has primarily been swallowed up by some internal tooling changes. I alluded to this back in June, though the plan changed along the way. Rather than merging all those apps into one behemoth conglomerate, I decided it would be better (along at least a few axes) to follow the Unix philosophy and stick with smaller tools that do one thing well. Which conveniently lines up with the set of tools I’ve already built. Fancy that.

Arc is (was) my notes app, written using FastAPI. I wanted an app that felt more a wiki, and I wanted to move it to Django (easier to maintain, considering most of my other tools are also in Django). And I didn’t really like the name anymore. Thus Codex was born. Heretically, I built it using hardly any JavaScript — just a bit for keyboard shortcuts and another bit for the autosuggest when linking to another page. Everything else uses plain old HTML forms.

In fact, it was so liberating and fun that I plowed onward and decided to ditch Vinci (my internal blog/notebook app) and build a new app, Leaf, using the same technique; the only JS it uses is for keyboard shortcuts. It’s simpler, easier to maintain (I think? it’s still early on), and in a way it feels more in line with the grain of the web.

One other thing I did differently with both apps was to wait to write any CSS until after the functionality was all in place. It was disconcerting and delightful, building something with bare browser styles, and it certainly helped me focus on functionality first rather than getting distracted by layout.

Conclusion: while I doubt I would ever build apps at work this way, this old-school mode was invigorating and absolutely worth it for these personal projects.


Reply via email or via office hours

Links #44

#covid-19 #electron #history #links #mechanical-engineering #medieval-history #personal-sites #renaissance #web

Tauri looks like an interesting lightweight alternative to Electron. Quill is the only Electron app I’m still actively using, but it’d still be nice to reduce its footprint a bit.

Ada Palmer on the Renaissance. Better than the Middle Ages? Doubtful. (Also, there was so much more plague over the centuries than I’d realized. Goodness.)

Robin Rendle on redesigning his personal site. The latter half of the post is what resonated most with me. Sometimes I feel like my site has gotten perhaps a bit too focused on smoothly delivering projects, at the cost of some character. I hope to restore some of that character over the next year.

Bartosz Ciechanowski explains internal combustion engines. His interactive diagrams are superb as always.

Donald G. McNeil, Jr., on the end of Covid. A fairly measured take, I thought. My wife and I are both fully vaccinated now, by the way, but we can’t unquarantine until the kids get their shots (mid-to-late fall is our current loose expectation on that).


Reply via email or via office hours

Links #43

#generative-art #lighthouses #links #maps #optical-illusions #personal-sites #productivity #web

Tyler Hobbs on color arrangement in generative art. I haven’t done much generative art lately (and don’t know how much I’ll end up actually doing in the future), but I like Tyler’s work and this is a good writeup.

Phil Plait on David Novick’s colored spheres optical illusion. Wow.

Shawn Wang on quality vs. consistency. Which is something I feel I could do much, much better at here on this site.

Matthias Ott about personal websites. A good thing to remember.

Jason Kottke linking to a map of the world’s lighthouses. Look at Norway!


Reply via email or via office hours

#coding #deploys #django #shell #ssh #web

I used to use Fabric to deploy my personal apps, but I often ran into issues with it, so several months ago I switched over to simple shell scripts that use ssh. Much more resilient, and far easier to maintain (at least for me).

Here’s a sample of what one of these deploy scripts looks like for a Django app:

#!/bin/sh

git push

ssh myusername@myhost /bin/zsh << EOF
  cd /path/to/app/code/

  echo "- Pulling the code"
  git checkout main && git pull

  echo "- Restarting the app"
  supervisorctl restart myappname

  echo "- Running migrations"
  /path/to/venv/bin/python manage.py migrate

  echo "- Collecting static"
  /path/to/venv/bin/python manage.py collectstatic --noinput
EOF

I’ve thought about using a CD pipeline instead, but I’m not convinced that introducing an extra dependency — no matter how slick — is actually worth it for something small and personal like this. (CI/CD sure is nice at work, however.)


Reply via email or via office hours