wsf-xviii

Published Aug 22, 2019

Web platform. Keeping an eye on Learn CSS from Scratch, a new, work-in-progress book by Andy Bell / TIL that Safari is never going to implement customized built-in elements

Toolbox. p5.riso a p5.js library for generating files suitable for Risograph printing, by Sam Lavigne and Tega Brain / quicklink makes navigation faster by prefetching links during idle time / Get a visualization of npm dependencies for any package, a tool by Andrei Kashcha / Doug Wilson is maintaining a spreadsheet of good open typefaces; see also Chad Mazzola's Beautiful web type / Color swatch file formats by Olivier Berten; Devine Du Linvega proposes using SVG in Themes

UI. Adrian Roselli on the basic requirements for custom UI controls / React 16.9 is out, and a new suite of developer tools too / (audio) Javan Makhmali talks about Trix, Basecamp's rich text editor

Performance. Browsers, input events, and frame throttling by Nolan Lawson / Image lazy-loading is available in Chrome 76 / Carter Sande observes that browsers are pretty good at loading web pages, it turns out / Making cloud.typography fast(er), an exercise by Harry Roberts

Corpus. Turns out a lot of books published 1924-1963 are secretly in the public domain?!

Making software. Alan Kay on old computer science books that are still good / Neat debug visualizations, a Twitter thread / De-risking custom technology projects, a handbook by the 18F team / Text size in translation (2007) by the W3C Internationalization Activity / JavaScript testing best practices, a guide by Yoni Goldberg / How to build good software by Li Hongyi / Git 2.23 splits git checkout, a near-universally confusing command, into git switch and git restore.

Today I Learned

npx things from GitHub. Turns out npx works with GitHub as well, and you can even specify a branch:

npx username/repository#branch

This is great: if you're building a Node CLI, people can test experimental branches without you needing to publish them to npm. Speaking of npx, Rich Harris made degit, a tool to pull the latest commit off a GitHub repo. It also supports branches, so you can run:

npx degit username/repository#branch

and you'll get a snapshot of the repo in your current folder. As opposed to git clone-ing it, you don't get the entire Git history. This is useful for bringing in starter/template repositories.

Bye-bye FTP, hello rsync. Small websites, e.g. WordPress blogs, can be published on cheap shared hosting. In the past, I'd used FTP to upload local changes to the server, and Transmit Sync removed the most annoying parts. But cheap shared hosting comes with a palette of quirks and little recourse to fix them, and my last experience was the straw that broke the camel's back. The host seemed to crap out after a few Sync runs and stopped accepting FTP connections. I knew about rsync but never looked into it, but now I'm glad I did.

You'll need to look for cheap shared hosting that allows you to connect via SSH, but most seem to provide it these days.

I had already generated a SSH key pair for using with GitHub, so I copied the public key:

cat ~/.ssh/id_rsa.pub | pbcopy

and added it to the hosting provider, in a dedicated section of the typically byzantine admin UI that varies from provider to provider.

I needed to add some config in the ~/.ssh/config file to define how to connect to the SSH host, because it used a different port than the default 22, but also because I wanted to include the rsync script on a public GitHub repo without exposing the details of the connection:

Host myhost
  Hostname mydomain.com
  User myuser
  Port 18765

With this in place, I could swap the whole start up Transmit, connect to the server, synchronize the folders, wait 30 seconds, or more, for it to finish ceremony with a shockingly-fast rsync command:

rsync --archive --compress --progress --exclude-from=".rsync-exclude" ./ myhost:public_html/path/to/destination

A quick breakdown of the various flags:

--archive is a shortcut for a few things: copy all files recursively, and maintain their metadata (permissions, timestamps, etc.). It's "archive" in the sense of "backing up things" rather than "ZIP archive"
--compress compresses files before transferring them
--progress is described in the rsync manual as giving a bored user something to watch.
--exclude-from specifies a file containing patterns for excluding files from the transfer. You'll probably want to ignore the .git folder, node_modules, and other things that don't make sense on the server. See a sample file below.
./ is the local path. Notice the trailing slash, which instructs rsync to copy the contents of the folder, rather than the folder itself.
myhost:public_html/path/to/destination is the remote path. rsync knows the HOST:PATH pattern refers to SSH, and we've defined myhost host in the ~/.ssh/config file.

And here's the (abridged) .rsync-exclude file:

/node_modules
/.git

You can read more about using rsync in these articles:

The man rsync page is also quite informative.

So long, FTP! (For now, at least)

Soundtrack: Blanck Mass — Animated Violence Mild