Ben Crowder

Blog

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

#drawbot #go #harfbuzz #ink #pagedjs #pdf #plotdevice #press #rust #svg #unicode #working-in-public

Update on Press (the PDF compiler). I haven’t worked on it at all lately, but I wanted to document its current state for history’s sake, and as part of working in public. (I’ve also been sitting on this post for over a year.)

Back in 2017 I did end up re-architecting Press to use Low Ink as an intermediate page description language. In the process, Low Ink changed from a JSON-based idea to this:

:page 11x8.5in
:bleedbox x=0.125in y=0.125in w=5.75in h=8.75in
:fontmap family=helv weight=regular style=normal standard=Helvetica
:yinvert
:push
:translate x=72 y=72

# ascender
:push
:translate x=0 y=1040
:strokecolor hex=#999
:linewidth 0.25pt
:line x1=0 y1=0 x2=1080 y2=0
:stroke
:push
:fillcolor hex=#999
:font family=helv size=14pt
:text x=1085 y=-3 text="ascender"
:pop
:pop

# filled glyph
:push
:translate x=1320 y=240
:fillcolor hex=#000
:moveto x=0 y=0
:pathto x=400 y=300 cx1=120 cy1=300 cx2=140 cy2=300
:pathto x=320 y=200 cx1=540 cy1=300 cx2=320 cy2=180
:lineto x=350 y=350
:lineto x=450 y=250
:lineto x=150 y=0
:moveto x=200 y=200
:lineto x=200 y=250
:lineto x=250 y=250
:lineto x=250 y=200
:lineto x=200 y=200
:fill
:pop

It was intended to be a fairly low-level wrapper on the PDF format, with the idea being that other libraries/apps would provide more ergonomic abstractions on top of it.

I initially used Python because Press started out as a library, but with the pivot to a compiler model, I think Go or Rust would probably end up being a better choice (Rust would make integrating HarfBuzz a bit easier, at any rate).

Potential improvements

To my 2021 eyes, the language design isn’t particularly elegant. I like that the parameters are named (clarity), but for most of the commands there aren’t actually that many parameters, because many of the settings that would normally be parameters are separate commands. For parameters that are clearly unambiguous, the names hamper readability. For example, I think something like this might be better:

:line 0,0 to 1080,0
:fillcolor #345

I’ve also thought that push and pop could potentially be clearer as curly braces, and that the initial colons aren’t really necessary:

{
  translate 0,1040
  strokecolor #999
  linewidth 0.25pt
  line 0,0 to 1080,0
  stroke

  {
    fillcolor #999
    font 14pt helv
    text 1085,-3 "ascender"
  }
}

The future

My initial reason for building Press was to have an easy, programmable cross-platform way to create language chart PDFs (so I could move away from PlotDevice/DrawBot), and what I’ve realized (acknowledging that I haven’t really been making language charts in recent years) is that there are some other, better options now.

One that seems decent is SVG, converted to PDF by way of Inkscape. Initial tests here seem like it would probably work fine.

Another promising option that I admittedly haven’t looked into very much yet is Paged.js. HTML and CSS are already great for declarative typesetting, and the more I’ve thought about programmatic typesetting, the more this model seems to be the future I’d want to work with (and not just because of parity with web, though that makes it much more compelling).

tl;dr I don’t see myself continuing on with Press, so we may as well call a mortem on it.


Reply via email or via office hours

#art #releases #religious

Two new pieces. First is He Sent Forth a Dove, a reference to Noah and the ark:

He Sent Forth a Dove

Second is Taken Home to That God Who Gave Them Life, about the period between death and resurrection:

Taken Home to That God Who Gave Them Life

I expect to use this clean-line approach on most of these abstract pieces going forward (feels like a better fit).


Reply via email or via office hours

#blogging #jsonfeed #meta #rss

For those subscribing via RSS or JSON Feed: I’ve added the post tags to the top of each post, mirroring what you see on my site.

(My reasoning for including the tags and putting them at the top, by the way, is to make it a little easier to see at a glance what a post is about and whether you want to skip it.)


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

#lds #religion

My friend Stephen Cranney wrote a guest post for Times & Seasons about Church growth in the United States. I especially want to echo his third point at the very end of the article. Expecting unending growth seems like one of those flawed assumptions that inevitably lead to disappointment and disaffection.


Reply via email or via office hours

#project-gutenberg

Eons ago in 2006, I apparently — I have no memory of this and happened to stumble across it tonight — wrote up a small piece for the Project Gutenberg Volunteers’ Voices page about my experience with PG.

In case the page ever goes away (yes, quite aware of the irony should that happen), here’s the text of it, with the referenced projects linked:

I’ve been a book lover ever since the day I learned to read. Several years ago I discovered Project Gutenberg while surfing the net and was delighted to find so many good books freely available. I downloaded all the etexts I was interested in and read quite a few of them. After a few years, I decided to get more involved, so I started proofing with Distributed Proofreaders. I liked that a lot — I was a newspaper editor in high school for two years — but I felt an itch to try to produce etexts on my own. I didn’t have a scanner, however, so the only solution I could see at the time was to find a book and start typing it in by hand. I’m a relatively fast typist and I figured it wouldn’t take that long.

So, I went to my university library, found a pre-1923 edition of G.K. Chesterton’s The Ball and the Cross (Chesterton is one of my favorite writers), and began typing. It took much longer than I expected — certainly over 30 hours, perhaps even close to 50. When I finished, I came across a page on the PG site that mentioned there should be two spaces between sentences. I looked at the etext I’d just typed in and realized in horror that I’d used single spaces the whole way through. :) [1] I had been sure that PG used single spaces, convinced that I’d read it in one of the PG docs, which had taken a little while to get used to since I normally use two spaces. But all the PG etexts I checked had two spaces between sentences, so I began the monotonous task of adding an extra space between each sentence (and being very careful not to add spaces in where they shouldn’t be). Several hours later the book was finally done. I’d gotten copyright clearance before I started, so I soon submitted it and within a few days I saw those lovely words in my inbox, “Posted (#5265, Chesterton)”.

[1] Ben was right both times: people have posted advocating both one space and two. Either would have been accepted! –jt

Since then, I’ve been addicted to producing etexts. Languages interest me greatly, so I found an Old Icelandic primer that someone had scanned in, OCRed the images using DocMorph (it didn’t take as long as I thought it would, and the output was decent enough to work with), and realized I would have a problem entering in the foreign characters (o’s with hooks underneath, etc.). Thank heavens for Unicode. Vim (my editor of choice) has fairly good Unicode support and it didn’t take long to make a list of the Unicode codes for the Icelandic characters.

As noted, I use Vim for all my editing. I can rewrap lines to 65 characters by typing “gq”, I can use regular expressions for search and replaces (very handy), I can edit in Unicode when I need to, and I can speed things up greatly by making keyboard mappings for repetitive tasks. (On one text I was working on, I had to add a blank line between each paragraph. Each was numbered, but the blank lines had somehow been taken out before I got the text, so I started going through and adding them in by hand. The file was 30,000 lines long, however, and I quickly realized it would take a long time. I then noted which keys I was pressing to add the blank line between each paragraph, mapped them to [this bit got lost somewhere along the way], and held the key down while Vim zipped through the rest of the file. It sped it up by a factor of over a hundred.)

My university library is well-stocked and has lots of old books, so I usually rely on it when I need to get TP&Vs for texts I’m not typing in myself. I still don’t have a scanner, so I either find already-existing texts on the Internet and reformat them for Project Gutenberg (after getting permission, of course), or find page images on the net and OCR them myself, or type the books in by hand. Typing in by hand takes a long time and so I prefer the first two methods.

Volunteering with Project Gutenberg has been extremely satisfying. The people are wonderful to work with, the work is fun, and it feels very good to know that one is making a difference in the world.

One unimportant point I feel the urge to clarify: I absolutely do not use two spaces between sentences anymore. (I use three! Sometimes four when I’m feeling exuberant!) (But alas, no, my typographic preferences very much inhibit such unbridled playfulness.)


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

#bookshelf #codex #gate #home-screen #ios #iphone #liszt #momentum #projectile #pwa #saturn #slash #storybook

Since the phone is now the window to the soul, here’s my current home screen:

iphone-home-screen.png

Things of possible interest (or more likely imminent boredom):

  • 30 Seconds is a system shortcut I made that starts a thirty-second timer, which I use for my physical therapy exercises morning and night (I used to use a third-party app until I realized I didn’t need one)
  • Projectile (an app version of my project tracker), Bookshelf (reading tracker), Slash (blog engine), Storybook (writing app), Momentum (time tracker), and Liszt (to-do list) are all PWAs I’ve built
  • While it’s kind of weird (they’re the same exact app), I love that Marvin SxS is on the App Store alongside Marvin; I use the dark-background Marvin for fiction and the white-background Marvin for nonfiction
  • From left, the three bottom apps in the dock are Codex (notes app), Saturn (launcher), and Gate (Drafts clone), which are also PWAs I’ve built, and clearly I have a problem
  • I currently have 136 tabs open in mobile Safari, and clearly I have two problems

Reply via email or via office hours