Nicki Vance: Writings

Sewing: Reversible Vest

2026-09-16T00:00:00Z

Sewing: Reversible Vest

The reversible vest turned out great, despite some bumps in the road. I’m particularly happy about the mint green bias binding on the edges. In fact, I wish I’d also added it to the open edge of the pockets, or perhaps the whole outline of the pockets.

Sometimes I make things because I want a certain thing. But sometimes, this will probably resonate with other sewers, I have a fabric I like and I want to make something with it. The light grey knit with a darker grey pattern was a gift from a friend about 4 years ago when I was starting to sew again. This is one of those patterns that is almost more of a texture. This knit is probably part cotton, part polyester and is also very thinly quilted, again probably with polyester filling. The opposite material is a black denim.

Prior to this, I’ve made three sweatshirts and one collared shirt. I feel pretty comfortable with putting the vest part together but the collar can still be a little tricky.

All in all, this probably took 1-2 weeks but the work was spread out over 9 months. (TBH, I lost a lot of motivation during the heat of summer. Who wants a vest in summer?)

The Pattern

I made a pattern by tracing an existing vest and adjusting it to fit better (it was too small). I used a couple other jackets I like to check measurements for shoulder width (also a style choice for these to sit in a bit from my actual shoulder), chest width, hip width, and length.

There are 4 pattern pieces: front half, back half, collar, and pocket.

Colors

I experimented with colors a bit. I wanted a highlight of color. I have a variety of zippers of different colors - I love a contrast zipper. Reddish colors appealed to me but I went with the mint.

Edge Binding

I opted to bind the edges instead of hiding seams on the interior of the vest. This gave me just the right amount of color highlight across the whole vest. I’m a fan of contrast edgebinding for a lot of clothing.

I tried out black denim first, thinking that I would use each of the primary fabrics as the binding on the opposite side. But then I realized that the effect would only work for the pockets because well, both sides share the same edge along the arms, collar, and bottom edge.

It was super handy to mock this up on an extra piece of material to see how difficult it was to edge bind with denim (quite) and how it looked over the knit material.

Binding an edge, though, takes some practice. I’m getting better but there are always places where I go a little close to the edge and get a visible thread on the other side. On the light side, it doesn’t show as much but the mint thread is higher contrast on the dark side.

In this photo, you can see an earlier test of a black binding and a small mistake where the thread crosses outside the binding. (Isn’t the mint binding much nicer??)

Pockets

The most important feature of any clothing item: pockets.

I needed to iterate on the size here because my technique for hemming the edges took up more material than expected and made the pocket a bit too small.

These work pretty well but somehow the alignment of the pockets between the sides is off - the pockets on the light side are a little lower than the dark side - and as a result the light side is a little more comfortable. Maybe I mixed up the measurements.

Here are the two different pocket sizes:

Closures

You know, the zipper color options are pretty limited for double sided zippers. I looked for a long time for a mint green zipper with mint green tape. They exist, but only as one-sided zippers.

I thought, ok, the important part of a double sided zipper is that the zipper pull has a loop that allows the pull to slide over to the opposite side of the zipper head. Maybe I can just replace the zipper head. It is definitely hard to find a mint green reversible zipper head. Maybe paint it? I don’t really want to go through all the iterations of trying to find the right color paint and to learn how to paint a tiny thing like that well. Maybe 3D print it? No, no, wow, I don’t have a printer that can do detail that fine, even if it could be sturdy enough to be pushed and pulled over hard plastic teeth. That sounds like another deep side project.

Other options for closures: buttons, loops & toggles, string ties, snaps.

Snaps seemed fun and a good match for the style. However, it took me a good hour plus to wrap my head around how they might work for a reversible garment. I tested out the snaps to make sure I understood which sides went together. Then I had to make a paper mockup and label the sides A, B, C, D, and fold it around different ways to make sure that B-C and A-D matched up in either direction. Got in some good shape rotator practice there.

Once I trusted that I could assemble the correct parts for each snap, it was an easier process than I expected. So far though, the downside is that they rattle a tiny bit which implies that I didn’t smash them with the mallet enough. I’m also a bit scared that I will rip them out of the cloth trying to open one - I’ll report back if that happens.

Thanks for reading!

Language Note

“vest” means a coat with arms in Dutch. In UK English, a “vest” is a formal button vest to wear with suits whereas a vest like this is called a “gilet” (zhee-lee), borrowed from French.

Dutch Buddy: an iOS app for practicing my Dutch

2026-08-26T00:00:00Z

Dutch Buddy: an iOS app for practicing my Dutch

Dutch Buddy is the first iOS app I’ve ever made. Now that I have AI to help with the scaffolding and I don’t need to learn Swift myself, iOS isn’t as daunting as it used to be.

The app is not available publicly; I load it onto my phone every week with Xcode. =p

dutch-buddy on Github

Realtime ChatGPT

I was motivated to build this app after testing out the realtime chat functionality of ChatGPT to practice my Dutch. I love the flow of being able to talk while I was walking, not needing to look at a screen.

The ChatGPT realtime models sit behind a streaming connection that + buffers audio, + detects “turns” or breaks in the conversation where the speaker pauses to indicate a reply is expected, + translates audio to text, + writes a response + which is then converted text-to-speech so that I can hear the audio response.

It’s amazing that this can happen fast enough to feel relatively natural. In English, at least.

Multi-Language Issues

There are a couple problems, however, when I try to speak in Dutch.

Turn Detection

First, I am a newbie which means that I have great big pauses while I speak Dutch as I wrack my brain for a certain word. The default settings on ChatGPT’s realtime chat are set to detect a conversation turn after a short pause. When I (frequently) exceed that short pause, ChatGPT stops listening, prepares its own response and starts replying to my half-finished sentence.

Language Setting

Second, there are times when I want to see the transcript of what I just said or what the agent just said to me.

When I open the app to look at the history of my verbal conversation with ChatGPT, my portions of the conversation are transcribed in English, not Dutch. This is because the app is using two different models to build the realtime chat experience.

While the realtime model is receiving buffered audio files that it then transcribes, the app has a separate process that collects the audio once the end-of-turn is detected and sends that audio to a different transcription model through an async API call. This process is configured to use English (probably based on my user preferences gathered from my operating system when I initially signed up) so when it receives audio other than English, it translates and transcribes.

I need the transcript of my own speech to stay true to the language I’m speaking in, Dutch.

As a side note, there is a lot more to say on this topic about mixed language usage, for example when I use an English word in the middle of a Dutch sentence because I don’t know the Dutch word. Detecting language switches in audio is tricky.

Please Repeat

Third, as a language learner, it’s really helpful to hear something repeated. When I ask the realtime chat to repeat itself (“nog een keer”), it goes through the loop of creating a new response which is never exactly the same. Usually it’s a rephrasing because the chat conversation loop has no mechanism for exactly repeating itself. It simply wasn’t designed for this use case. In this scenario, ideally it would replay the audio of its last response.

Smoothing Over Mistakes

There is also a gap sometimes when I am fumbling a word or don’t pronounce it correctly. I’ve seen this either result in a misunderstanding (the model is going to guess something rather than ask me to repeat myself) or, just as unfortunate, smoothing over my mistakes as the model guesses correctly based on sentence context (correcting “getrouwen” to “betrouwen” means that I will continue asking people if they trust each other when I mean to ask if they are engaged).

Dutch Buddy

The app I’ve built came together very quickly.

The main function is to have a conversation. This functionality kicks off a chat using a websocket to a realtime model (gpt-realtime-1.5). The language is set to Dutch and there is a prompt that emphasizes staying in Dutch and instructs the agent to give feedback appropriate for my level of Dutch.

Similar to ChatGPT’s realtime chat functionality, audio clips are asynchronously sent off for transcription (gpt-4o-transcribe) at each turn so that the UI has a record to show.

For Text-to-Speech, I’m using tts-1.

The chat also has instructions to detect a “please repeat” command and when detected, to replay the stored TTS audio clip from the most recent response, rather than going through the chat response loop again.

Model Exploration

I tried out a few different models for each distinct task. For example, whisper-1 was the first model I tried for STT transcription and I found it just wasn’t great with Dutch. gpt-4o-mini-transcribe worked better and lately I’ve upgraded to gpt-4o-transcribe.

I used gpt-realtime-mini for a little while but I think the mini just didn’t have sufficient skills. For a short time, I tried using it for both streaming conversation and producing a transcript. But I it wasn’t made for transcription, it was too strongly inclined to respond, even with a clear prompt to transcribe only.

OpenAI released gpt-realtime-1.5 and I’m much happier with it. I use it for the streaming conversation and gpt-4o-transcribe for the transcript in the UI.

So far, cost hasn’t been an influential criteria for model choice, probably since it’s just me testing.

Daily Speaking Feature

Recently, I’ve added a second feature: Daily Speaking.

My Dutch language teacher asks us at the beginning of each course to come up with a goal for the course (my first one was to make a slide about a different bird every day). This time, I decided I wanted to work on my speaking by doing a short off-the-cuff monologue everyday. Say, 2 minutes, to make sure it doesn’t feel overwhelming.

My UX design includes the following:

Generate a Prompt Optionally, you can generate a prompt if you don’t know what to talk about. This generates a prompt in Dutch, of course.

Record Audio Begin the recording. The recorder shows how long it has been recording and changes color when you’ve reached 2 minutes. You can stop anytime and continue as long as you like (or until the app hits some limit I haven’t reached).

Transcribe When you stop the recording, a Dutch transcription is immediately generated using gpt-4o-transcribe.

The transcription is an important part of the process because I want to review it to look for mistakes I made, the heart of the learning process.

Flag Mistakes I created a text input area (with optional speech input) to identify my own mistakes. I also note transcription mistakes but I don’t currently have a feedback loop for using that data. Maybe in the future I will store the transcription mistakes separately as data I could somehow use to improve the process.

Review I have a review area where I can type or speak or just tap a button to request a review. The conversation model (gpt-4o-mini) reviews the transcript and replies with a list of fixes and acknowledges and corrects the ones I flagged.

So far this is working great. It’s very useful in catching my grammar mistakes with word order, mismatched singular/plurals, verb tense, etc.

For those that are curious, this app was built with Cursor in the first half of 2026. I leave Cursor on Auto model selection so I don’t know which models it was working with.

Did the app work?

Sadly, I have to admit I’m not using the conversation feature. I’ve been frustrated with the mistakes the models are making.

I began building out a set of evals with recordings of my own speech (just 10 recordings to start with) to quantify testing but honestly I have run out of steam on that task. It’s not the kind of work I love doing.

I am really happy with the Daily Speaking feature - the failure there is just like any habit-building, I’m still trying to find a way to sit down and do it every day. =p

CLI Backup Tools: Restic, Borg, Kopia

2026-02-02T00:00:00Z

CLI Backup Tools: Restic, Borg, Kopia

Time for some early spring cleaning.

I’ve got a shoddy backup system in place that needs to be revamped. Dropbox (which can’t be fully downloaded onto my laptop, its so large) and five external hard drives, each a snapshot of the Dropbox drive at a different point over the last 10 years and with some other random things thrown onto them.

I used to have Backblaze but quit it years ago for some reason I don’t remember.

I’d like to follow the 3-2-1 Backup Rule:

3 copies of my data
2 different media (e.g. cloud and external hard drive)
1 copy off-site

I actually have all this covered but not in a consistent fashion – none of the 3 copies are the same or all up-to-date. My off-site drive is in Seattle and hasn’t been updated for at least 3 years.

If I could fit my Dropbox onto my laptop then I would maybe do the hacky things and periodically create a whole copy to two empty external hard drives, recycling the drives for each update. But I can’t anymore.

I want a tool that helps me make backups with deduplication, so I can add to an existing backup rather than make a whole new copy. I don’t want to have to hop around between backups because my 2022 photos are in one backup and my 2023 photos are in another.

My Use Cases

I’m not doing anything too fancy nor are the stakes super high.

There are three things I want to be able to do easily:

Maintain a backup of my data that I can browse occasionally.
Backup my recent documents and photos on a monthly basis.
Browse and tag my photos.

I have Dropbox and iPhoto both backing up my recent photos from my phone. And any recent documents on my laptop that could be lost between monthly backups is probably in my email or another cloud service, nor is it super important if I didn’t already put it in Dropbox, we’re basically talking my Downloads folder and the random screenshots I like to take of good or bad UX on the web that I never actually look at again.

Testing backup tools

I’m testing out three open source command line tools to see which one I like best.

I don’t trust any company fully with my data and it sounds like the open source tools do a solid job, so why not go with free?

I had ChatGPT come up with a very basic testing script so I could get a feel for each tool. Basically, it’s a directory with a couple files that I backup, make some changes, backup again, and restore from the original backup. Making some changes allows me to see how the tool handles deduping.

1mkdir -p ~/backup-test/{src1,src2,src3}
2cd ~/backup-test
3
4echo "file A" > src1/a.txt
5echo "file B" > src1/b.txt
6echo "file C" > src1/c.txt

Restic

Restic Documentation — restic 0.18.1 documentation
Language: Go

 1brew install restic
 2
 3export RESTIC_REPOSITORY=/backup-test #doesn't have to be the same dir
 4export RESTIC_PASSWORD=testpassword
 5
 6restic init
 7
 8restic backup src1
 9
10# only the changes will be backed up
11rm src1/b.txt
12echo "file D" > src1/d.txt
13
14restic backup src1
15
16repository 3de9effd opened (version 2, compression level auto)
17created new cache in /Users/boo/Library/Caches/restic
18no parent snapshot found, will read all files
19[0:00]          0 index files loaded
20
21Files:           3 new,     0 changed,     0 unmodified
22Dirs:            1 new,     0 changed,     0 unmodified
23Added to the repository: 1.805 KiB (1.113 KiB stored)
24
25processed 3 files, 21 B in 0:00
26snapshot c6277153 saved
27
28# copy the current backup to another dir and add a file to test deduping
29cp -r src1 src2
30echo "file E" > src2/e.txt
31
32restic backup src2
33
34repository 3de9effd opened (version 2, compression level auto)
35using parent snapshot c6277153
36[0:00] 100.00%  1 / 1 index files loaded
37
38Files:           1 new,     0 changed,     2 unmodified
39Dirs:            0 new,     1 changed,     0 unmodified
40Added to the repository: 1.791 KiB (970 B stored)
41
42processed 3 files, 21 B in 0:00
43snapshot 3d20c1b2 saved
44
45# list snapshots
46restic snapshots
47
48repository 3de9effd opened (version 2, compression level auto)
49ID        Time                 Host                        Tags   Paths                                Size
50---------------------------------------------------------------------------------------
51c6277153  2026-01-30 16:53:12  Nickis-Laptop.local              /Users/boo/dev/backup-test/src1  21 B
523d20c1b2  2026-01-30 16:59:52  Nickis-Laptop.local              /Users/boo/dev/backup-test/src1  21 B
533a9d7c2d  2026-01-30 17:00:05  Nickis-Laptop.local              /Users/boo/dev/backup-test/src2  28 B
54d55cba5e  2026-01-30 17:00:30  Nickis-Laptop.local              /Users/boo/dev/backup-test/src3  12 B
55---------------------------------------------------------------------------------------
564 snapshots
57
58# restore a snapshot
59restic restore  --target /tmp/restore-work {snapshot ID}
60
61repository 3de9effd opened (version 2, compression level auto)
62[0:00] 100.00%  4 / 4 index files loaded
63restoring snapshot c6277153 of [/Users/boo/dev/backup-test/src1] at 2026-01-30 16:53:12.927071 +0100 CET by boo@Nickis-Laptop.local to /tmp/restore-work
64Summary: Restored 4 files/dirs (21 B) in 0:00
65
66ls /tmp/restore-work
67
68rm -rf /tmp/restore-work

I like the restic commands the best of the three I’ve tried, mainly because I don’t have to name the backup.

Borg

Language: Python

borg uses the term “archive” where restic uses “snapshot”.

 1export BORG_REPO=/Users/boo/dev/backup-test-2/repo #needs to be an empty dir
 2export BORG_PASSPHRASE=testpassword
 3
 4borg init --encryption=repokey
 5
 6IMPORTANT: you will need both KEY AND PASSPHRASE to access this repo!
 7
 8Key storage location depends on the mode:
 9- repokey modes: key is stored in the repository directory.
10- keyfile modes: key is stored in the home directory of this user.
11
12For any mode, you should:
131. Export the borg key and store the result at a safe place:
14borg key export           REPOSITORY encrypted-key-backup
15borg key export --paper   REPOSITORY encrypted-key-backup.txt
16borg key export --qr-html REPOSITORY encrypted-key-backup.html
172. Write down the borg key passphrase and store it at safe place.
18
19borg create $BORG_REPO::path/to/src1 src1
20
21borg list $BORG_REPO
22src1     Sat, 2026-01-31 22:06:03 [e1bb98882f01e225e2a099aa83611fb91870ca5e5383d8391478c7b834e711ad]
23
24rm src1/c.txt
25echo "file D" > src1/d.txt
26
27borg create $BORG_REPO::src1-2 src1
28borg create $BORG_REPO::src2 src2
29
30borg list $BORG_REPO
31src1     Sat, 2026-01-31 22:06:03 [e1bb98882f01e225e2a099aa83611fb91870ca5e5383d8391478c7b834e711ad]
32src1-2   Sat, 2026-01-31 22:10:25 [32b95f572f19ed6d103a184789c6aa060324789fa3b87570de66356dcb0ce0c1]
33src2     Sat, 2026-01-31 22:12:42 [8a9fe564ab649e47736e1a01e81e116946bf74ca131e6e1b94b14b1ad2dea520]
34
35borg info
36Repository ID: be5ca57233423b0ad2cc12b2a262b20790d1dde7b9a4f0c34a93740f234c39e7
37Location: /Users/boo/dev/backup-test-2/repo
38Encrypted: Yes (repokey)
39Cache: /Users/boo/.cache/borg/be5ca57233423b0ad2cc12b2a262b20790d1dde7b9a4f0c34a93740f234c39e7
40Security dir: /Users/boo/.config/borg/security/be5ca57233423b0ad2cc12b2a262b20790d1dde7b9a4f0c34a93740f234c39e7
41------------------------------------------------------------------------------
42                        Original size      Compressed size    Deduplicated size
43All archives:                   42 B                300 B              2.87 kB
44
45                        Unique chunks         Total chunks
46Chunk index:                      10                   12
47
48borg extract $BORG_REPO::src1-2

The requirement to manually name each snapshot/archive could be either a pro or a con. The naming scheme I’ve used in the example above is terrible. I’m not sure what I’d want to use other than a date, which is repeated in the list.

As you can see from the init process, a key is created. You need both the key and the passphrase to access a borg repository.

Interesting features to explore:

compacting
compression

Kopia

Language: Go

 1kopia repository create filesystem --path /Users/boo/dev/backup-test-3/repo
 2Enter password to create new repository: testpassword
 3Re-enter password for verification: testpassword
 4Initializing repository with:
 5block hash:          BLAKE2B-256-128
 6encryption:          AES256-GCM-HMAC-SHA256
 7key derivation:      scrypt-65536-8-1
 8splitter:            DYNAMIC-4M-BUZHASH
 9Connected to repository.
10
11NOTICE: Kopia will check for updates on GitHub every 7 days, starting 24 hours after first use.
12To disable this behavior, set environment variable KOPIA_CHECK_FOR_UPDATES=false
13Alternatively you can remove the file "/Users/boo/Library/Application Support/kopia/repository.config.update-info.json".
14
15Retention:
16Annual snapshots:                 3   (defined for this target)
17Monthly snapshots:               24   (defined for this target)
18Weekly snapshots:                 4   (defined for this target)
19Daily snapshots:                  7   (defined for this target)
20Hourly snapshots:                48   (defined for this target)
21Latest snapshots:                10   (defined for this target)
22Ignore identical snapshots:   false   (defined for this target)
23Compression disabled.
24
25To find more information about default policy run 'kopia policy get'.
26To change the policy use 'kopia policy set' command.
27
28NOTE: Kopia will perform quick maintenance of the repository automatically every 1h0m0s
29and full maintenance every 24h0m0s when running as boo@nickis-Laptop.
30
31See https://kopia.io/docs/advanced/maintenance/ for more information.
32
33NOTE: To validate that your provider is compatible with Kopia, please run:
34
35$ kopia repository validate-provider
36
37kopia snapshot create /Users/boo/dev/backup-test-3/backup_dir
38Snapshotting boo@nickis-Laptop:/Users/boo/dev/backup-test-3/backup_dir ...
39* 0 hashing, 3 hashed (21 B), 0 cached (0 B), uploaded 211 B, estimating...
40Created snapshot with root k8631e4a74fa1bfb7327d82b503a46a8b and ID 1f6bf45929328b1372b1d8b37237e294 in 0s
41Running full maintenance...
42GC found 0 unused contents (0 B)
43GC found 0 unused contents that are too recent to delete (0 B)
44GC found 7 in-use contents (1.1 KB)
45GC found 2 in-use system-contents (1.2 KB)
46GC undeleted 0 contents (0 B)
47Compacting an eligible uncompacted epoch...
48Advancing epoch markers...
49Attempting to compact a range of epoch indexes ...
50Cleaning up unneeded epoch markers...
51Cleaning up old index blobs which have already been compacted...
52Cleaned up 0 logs.
53Finished full maintenance.
54
55kopia snapshot list /Users/boo/dev/backup-test-3/backup_dir
56boo@nickis-Laptop:/Users/boo/dev/backup-test-3/backup_dir
572026-02-01 10:33:07 CET k8631e4a74fa1bfb7327d82b503a46a8b 21 B drwxr-xr-x files:3 dirs:4 (latest-1..2,hourly-1,daily-1,weekly-1,monthly-1,annual-1)
58- 1 identical snapshots until 2026-02-01 10:33:58 CET
59
60kopia ls -l k8631e4a74fa1bfb7327d82b503a46a8b
61drwxr-xr-x           21 2026-01-31 22:14:47 CET k6647c300e69cecccd21f920519c29abb  src1/
62drwxr-xr-x            0 2026-01-31 22:14:40 CET k1f7f41f99d34ce2bda1e9b82182cec5e  src2/
63drwxr-xr-x            0 2026-01-31 22:14:40 CET kf1038421ff24d338a963ef2deef7bc44  src3/
64
65kopia show k6647c300e69cecccd21f920519c29abb
66{"stream":"kopia:directory","entries":[{"name":"a.txt","type":"f","mode":"0644","size":7,"mtime":"2026-01-31T21:14:47.012334056Z","uid":501,"gid":20,"obj":"694bbedb98415f944e757fb04da85a00"},{"name":"b.txt","type":"f","mode":"0644","size":7,"mtime":"2026-01-31T21:14:47.012475682Z","uid":501,"gid":20,"obj":"680c1e63c73751bf535d6f56c1904958"},{"name":"c.txt","type":"f","mode":"0644","size":7,"mtime":"2026-01-31T21:14:47.012585432Z","uid":501,"gid":20,"obj":"cf894e34efbbdea5902193cd762aa89f"}],"summary":{"size":21,"files":3,"symlinks":0,"dirs":1,"maxTime":"2026-01-31T21:14:47.012585432Z","numFailed":0}}

I’d recommend creating env variables for kopia because it requires the use of absolute paths.

Interesting features to explore:

retention policies
automated backups
compression
ignore rules
GUI

After just a quick glance, kopia is exciting because it appears to have some great features for more complex use cases. There appears to be multiple contributors and an active user community. I like, for example, that there is a discourse forum (but unfortunately also a Slack). Complexity, on the other hand, often means more interdependencies and therefore higher risks.

Next Steps

I’m going to move forward with borg mainly because my partner also uses it (aka in-house help desk).

Set up two external hard drives with a full copy of Dropbox
Set up borg repos on the drives and my laptop
Create a script to run manually once a month
Test it out for a couple months, including my photo browsing & metadata update workflow

Note: Here’s why syncing a backup repo isn’t recommended: Can I copy or synchronize my repo to another location?

Insect Houses as Building Decorations in Amsterdam

2026-01-17T00:00:00Z

Insect Houses as Building Decorations in Amsterdam

I love building decoration. It’s one of the differences between the US and many older countries that I haven’t grown blind to. I take pictures constantly of the many stone characters, brickwork patterns, even the mailslots, that grace the buildings here.

These started to catch my eye and I’ve collected 4 so far. They’re gorgeous.

This one's my favorite, possibly because its so well customized to its surroundings.

These have been a mystery to me for a couple years. They don’t seem to be part of the original building because the material doesn’t exactly match and they don’t repeat like other decorative elements on the buildings. And the small scale is a giveaway. I wondered if they were some makers mark, perhaps from the Stadgenoot that owns and renovates many buildings (their mark happened to be on these buildings but its just a coincidence). Or maybe the best form of street art I’ve ever seen?

Now that I’ve sat down to write about them, I’ve finally put my photo into Google Reverse Image search and found the answer on the first try: they’re insect houses. But also art, like I thought, but they have an additional purpose.

These insect houses are created by artist Bastiaan Meijer who continues to make them. Luckily, he’s got his own website explaining the project: wat zijn insectenhuisjes The site also includes a map of all the locations where the insect houses have been installed. There are between 1 and 2 thousand.

I haven’t done a full survey of the insect houses but many of them, including the ones that caught my eye, are inspired or modeled after the Amsterdamse School architectural movement. I’m a big fan of this architectural style because it brings a beautiful layer to Amsterdam. A lot of cities may have a quaint, cozy old town in the center and everything else is new. Amsterdam architecture is organized like tree rings, each one surrounded the existing city when it was developed. The Amsterdamse School ring of urban growth dates from the 1910s-1930s.

If you’re visiting the city and are interested in architecture, I highly recommend visiting Museum Het Schip to see more fine examples.

I’m so happy to learn that there are many more of these insect houses out there to discover.

More examples on Bastiaan Meijer’s YouTube channel.

De kleine huisjes op de foto’s hierboven waren een mysterie voor me. Ik vind de stijl erg grillig en ze vereren de beroemde Amsterdamse School architectuurstijl. Ik dacht eerst dat het straatkunst was. Ik ben blij te ontdekken dat de kunst van een lokale kunstenaar is gemaakt.

De kunstenaar heet Bastiaan Meijer en hij maakt de huisjes voor insecten. De huisjes moedigen meer verschillende insecten aan en vergroten biodiversiteit. Insecten zijn belangrijk omdat ze planten en bomen bestuiven en helpen bij de afbraak van afval.

Wat een slim idee! Biodiversiteit en schoonheid gecombineerd.

Als je meer wilt leren, bezoek de webpagina van de kunstenaar: wat zijn insectenhuisjes. De kunstenaar geeft één of twee keer per jaar workshops over het maken van insectenhuisjes, waar je je voor kunt aanmelden.

2023 Summer Exhibition

2023-07-13T00:00:00Z

2023 Summer Exhibition

I wish I remembered who first told me about the Royal Academy of Arts Summer Exhibition so I could give them a big squeezy hug. This was easily one of my favorite experiences of the year.

The iconic entrance to the Burlington House, where the Summer Exhibition takes place each year.

What’s the Summer Exhibition?

The Summer Exhibition is an annual open submission art exhibition coordinated by the Royal Academy of Arts in London.

Open submission means anyone can submit (though few are chosen); the works displayed are created by a range of people - experienced, established artists, new talent, or a first time work from anyone. I think this wide range of sources is a large part of why I feel such a strong connection to this event – I can imagine someone like myself made some of these works.

I also find it fascinating that almost all these works are for sale. Proceeds benefit the Royal Academy of Arts to support its various charitable activities.

By the Numbers

The first was hosted in 1769.
This year’s exhibition is the 255th.
It runs through the summer, this year from June 13 to August 20. I visited in mid-July.
11,204 works were submitted to the open call (total submissions were capped at 16,500).
A submission costs £38.
1,613 works were exhibited, by 998 artists.
12 gallery rooms, plus a small side room.
Over £70,000 in prizes were awarded.
The lowest listed art for sale was £45.
The highest listed art for sale was £1,354,999 (it was authored by a comedian so I wonder if it’s a joke). The next highest priced artwork was £210,000. Many works were Not for Sale (NFS) and may have already been sold for more.
167,000 visitors attended the exhibition.

First Impressions

It was 10am on a weekday when I visited so it wasn’t crowded. I enjoyed having the space to see the works and watch the galleries fill up with visitors.

The layout of the galleries at the Summer Exhibition.

A view of the galleries. (Gallery III)

The first couple rooms I went through seemed like normal contemporary art galleries.

Architecture

My interest ratcheted up in the Architecture gallery because I’ve never seen architectural samples and models and sketches presented together in this way and I loved it.

And, to be honest, I was very impressed with the bright green this gallery was painted. Shocked even. I’ve never seen a gallery painted a bright color.

Wow, that green. And a cantilever!

The architecture exhibits I’ve seen so far in my life have been showcasing finalized works through photos, sketches, and floor plans. Usually these focus on a specific building or an architect and try to emphasize the overall effect of the architecture.

My favorite part of architecture is often the details - the materials, the textures, and the decoration. I was thrilled to see this wide range of architectural artifacts, which are often art on to themselves, and up close.

From the List of Works introduction to the gallery:

The architecture room has been curated by Peter Barber RA. He has considered the overall theme and decided to focus on sociologist Richard Sennett’s assertion that ‘making is thinking’, and through the physical craft of making we have a better connection with the world around us. Barber has focused on architectural pieces that are more analogue and crafted – a product of the mind and the hand. Looming large and cutting through the room is ‘Tree and the Truss’, conceived by Design + Make, Architectural Association Hooke Park.

236: Pangolin grotesque for New College, Oxford, NFS, David Kohn Architectrs, Stoneraise sandstone

264: Moonlight towers, £30,000, American red oak, Jonah Luswata

Models, samples, and joints.

221: Barbican Centre: grain and scale, NFS, Plaster, Allies and Morrison

219: A cultural venue to spark children’s creativity . (Sectional concept model)., NFS, 3d print, acrylic and chemiwood, Thomas Heatherwick RA

Galleries

I’d never really thought about what goes into hanging a gallery. I’d considered the expertise that is necessary to handle and hang the work, which can be much more challenging than the normal flat painting on a wall. I’d also considered archival challenges like room temperature and keeping oily fingers from touching. I’ve even taken a course on exhibit design as part of library school which included designing an exhibit guide - What is the story you want to tell? What viewpoints do you want to offer the visitor?

Here, each gallery has been curated by one of 7 committee members. (I imagine a fight breaking out between committee members over the Darth Vadar piece.)

Gallery V

661: Frequency, £13,000, Stainless steel, Sam Shendi (Gallery V)

859: Veg box, £90,000, Painted bronze, Gavin Turk (Gallery VI). Rarely does an everyday object labeled "art" impress me, but the craftsmanship and the pique of replicating a styrofoam box in bronze was highly amusing. The jaunty angle of the lid is a nice touch. If my napkin math is correct, this box weighs over 800 kilos. 😁 I'd like to have it for a coffee table.

I like the toilet painting in the bottom right. (Gallery VI)

From a pinkish room to a lime green room. Note how the pieces are grouped by color and how that color is set off by the wall color.

1613: Poem in the dark about sadness, filíocht faoi bhrón, as an dorchadas. No price listed. Sculpture in hand bent metal bar, primer, high tension wire, hand sewn recycled jersey, polyamide, lycra, recycled silk, cotton thread. By Richard Malone. This is the headline piece that graced the exhibition marketing images. It looks like it would be a fun bird.

Wall Colors

Honestly, I was really surprised to see that the walls of the galleries weren’t just white. And I love thinking about how the curators for each gallery chose these colors.

Some of these colors do a lot to bring out the colors in the pieces in a fascinating way.

Here is a rough estimate of these colors, as a palette. I wouldn’t guess from this palette that it would work so well but I’m a color newbie. But since these are different rooms, they aren’t really competing with each other.

How do the curators develop each gallery?

And what happens if multiple curators want the same piece for their gallery?

Did they flip coins to see who would get to include a piece in their gallery? Is there a formal challenge like drawing an owl?

If you know, please get in touch. :)

People Watching: An artist shares a moment with someone close

I witnessed an endearing moment wherein a woman photographed an older woman with a young fellow (barely 20) in front of his submission, a small photograph. The scene had the feel of a art teacher or mentor meeting her mentee to share the joy and pride of seeing the success of someone you care about. It was very touching to observe.

So Much Fun Stuff

I’ll stop writing here and leave you with a bunch of pictures of favorites.

527: Daft vader, £155, Etching, Martin Langford, (Edition of 100 at £120)

650: Londinium plaza, £300, Screenprint, Frank Kiely, (Edition of 150 at £200)

858: Studio tiolet, left cubical, £495, Oil on board, A. Lincoln Taber

856: Winter hyacinth, £2,800, Oil on gesso board, Ffiona Lewis

831: Moments from 365 days of Whistling 1, £10,000, Ceramic whistles, Emma Carlow

More detail of 831

809: Pick it up I, £600, Oil on board, Kate Wilson

972: Held, £250, Screenprint, Alexandra Helm, (Edition of 30 at £170)

Theme: Animals

871: If only he could talk, NFS, Cotton and wool thread on linen and cotton, Christina MacDonald

1434: Together, £1,000, Oil on linen, Catherine Brereton. I like the window washers as subject.

Theme: interior spaces

Love these detailed views of city intersection construction. 1237: No stopping, £655, Acrylic, Matt Bannister. 1240: Push button and wait, £655, Acrylic, Matt Bannister.

Embroidery of an electrical outlet diagram. 1441: Flip the switch, £400, Digital embroidery on felt, Irini Bachlitzanaki, (Edition of 20 at £300).

Highway vistas. 1266: From you to me, £595, Oil on cradled board, Jen Orpin. 1267: From A to B, £595, Oil on cradled board, Jen Orpin.

Theme: stripes and lines

1304: Library, £2,250, Oil, James Judge

1452: Daybreak communion, £950, Oil on board, Sam Forbes-Whitehead

1278: Tilt, £3,750, Acrylic and oil, Lindsey Lavender

1512: Switch, £250, Marble and steel screw heads, Sharon Rankin, (Edition of 3 at £200). 1513, Banana shoes, £550, Porcelain and underglaze, Poppy Houston. 1583: Burnt out, £4,800, Resin, Helga Stentzel, (Edition of 5 at £4,800) (looks like a toaster made of bread).

Submit

If you’re interested in submitting, go for it! Entry tickets go on sale in early January and the details of the work(s) must be submitted by early February: Call for Submissions

Google Sign-In Integration

2022-01-10T00:00:00Z

One of my larger work projects at in 2021 was to implement Google Sign-In authentication as a method for signup (account creation) and login. This is an overview of the existing architecture and the changes and decisions made. I’m curious if you’ll have suggestions for alternative approaches.

The Setting

The business hypothesis was that signups would increase. But if you follow that logic through, the corollary is that people are giving up on signing up because they don’t want to create a password. That feels unlikely?? Regardless, we thought it would be nice and make our application look more professional and trustworthy. And doesn’t it, tho?

I was already familiar with the current architecture for signup (having implemented self-serve signup) but for this project I needed to get familiar with our existing authentication methods (password, API token, Guest token, SAML, and PKI), and authorizations.

Architecture

Note to the reader: The fact that I’m writing about this architecture does not necessarily mean it represents best practices. I’m open to comments and discussion. You may have or need a different architecture depending on your requirements.

When a visitor signs up, they provide a name, email, and password. Users must have a unique email address.

The self-serve signup process creates an organization for the user as all user work must be associated with an organization.

To join an existing organization, there are two invitation methods:

Email: An organization admin sends an invitation to the user’s email. The user cannot change this email address. (Note: This is an important design decision and completely avoids a need to link existing accounts when an additional account is accidentally generated by the user.)
Invite URL: A potential user visits a unique signup URL that was created for the organization. The user must provide an email address which matches a configured host domain.

To prevent bot signups, a hidden Google Recaptcha creates a token which includes Google’s conclusion on whether the visitor is a bot. The token is added to the signup submission data and verified serverside.

Because a user’s email address represents their identity, email verification is paramount and required before the user gains access to an account. Email invitees don’t need to have a verification email sent to them because they have already proven email ownership by following the invitation link emailed to them.

To log in, a user must provide the correct email and password combination. The login page posts the email and password to the session creation endpoint which authenticates the data and, if valid, fetches the user’s API token and additional account information. This information is encoded and stored in a session cookie.

The authentication step, in addition to verifying identity, returns the user’s authorization, a definition of their access privileges such as member, owner, admin, or, in the case of guests, read_only.

Information privacy measures

To avoid leaking information about whether an email address is already associated with an account, the signup process shows everyone the same success message to check for a verification email. In fact, a user who has an existing account will receive a different email letting them know that they tried to signup and already have an account.

Similarly, when a visitor attempts to login, the same failure message is shown to everyone regardless of whether or not the email address is associated with an account.

Integration

Since I’d never worked on authentication before, I was really starting with some basic questions. How do we know someone is who they say they are? Who can we trust?

With Google Sign-In, the client application is asking Google to authenticate the user. Does this user have an account with Google? Are they currently authenticated with Google? If not, we’re happy to wait while they authenticate with Google right now.

How it works

The clientside application must initialize the Google Sign-In JS with our organization’s client ID. This script can be used to generate a “Sign in with Google” button that can be placed where desired.

When the user clicks on the “Sign in with Google” button, a new browser window opens where the user is asked to select a Google account that they are already logged into or allowed to log into a different account. Once they have selected and authenticated an account, they are shown a consent screen declaring the content that Google will share with your organization (in this case, just profile info like name and email).

When the user confirms, the window is closed and the clientside Google Sign-In script executes a callback with a JSON Web Token (JWT) as an argument. The JWT may be decoded (there are third-party libraries for decoding) to access data about the user.

The JWT should be sent, still encoded, to your server to complete the account creation. A serverside Google Sign-In library is very useful to decode and verify the JWT.

The process is the same for login. There are options in the clientside JS to select the label and styles of the Google Sign-In button.

Next Time

What would I do differently next time?

Well, I didn’t give alternatives a serious thought. auth0, okta? Would these be easier? If you have an opinion, I’d love to hear it. I liked working with the source, Google itself, rather than an intermediary, to learn about Google Sign-In.

I knew I didn’t care about adding other signup methods, like Facebook or Github, which would be the advantage of these other solutions.

I also didn’t need to look into handling Google authorizations beyond user profile information. Connecting a user’s Google Calendar or Google Docs data is an additional set of concerns.

PS: Dear Product Team

One of the improvements I think could be made to Google Sign-In, as a user, would be some indication of which account I had signed in with before, if at all.

I’m usually authenticated in 3 different Google accounts at a time and I have many more.

When asked to authenticate with Google, I forget which Google account I used to login and accidentally create a new account (depending on the implementation of said app).

This is the main reason I don’t use Google Sign-In unless required. I don’t like accidentally creating multiple accounts. What’s an extra account? It’s not like the stack of loyalty coffee cards that stretch out my wallet which in turn wears a hole in my jean pocket.

To deal with this, this little pet peeve, I create 1Password logins for sites even when I use Google Sign-In so that I can leave a note to myself about which Google account I used. Dear 1Password product team…

Resources

If you’re doing a Google Sign-In integration, start with the official docs.
Documentation: Google Auth Library: Node.js Client

Here’s an example JWT from the docs:

 1// header
 2{
 3  "alg": "RS256",
 4  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
 5  "typ": "JWT"
 6}
 7// payload
 8{
 9  "iss": "[https://accounts.google.com](https://accounts.google.com/)", // The JWT's issuer
10  "nbf":  161803398874,
11  "aud": "[314159265-pi.apps.googleusercontent.com](http://314159265-pi.apps.googleusercontent.com/)", // Your server's client ID
12  "sub": "3141592653589793238", // The unique ID of the user's Google Account
13  "hd": "[gmail.com](http://gmail.com/)", // If present, the host domain of the user's GSuite email address
14  "email": "[elisa.g.beckett@gmail.com](mailto:elisa.g.beckett@gmail.com)", // The user's email address
15  "email_verified": true, // true, if Google has verified the email address
16  "azp": "[314159265-pi.apps.googleusercontent.com](http://314159265-pi.apps.googleusercontent.com/)",
17  "name": "Elisa Beckett",
18  // If present, a URL to user's profile picture
19  "picture": "[https://lh3.googleusercontent.com/a-/e2718281828459045235360uler](https://lh3.googleusercontent.com/a-/e2718281828459045235360uler)",
20  "given_name": "Elisa",
21  "family_name": "Beckett",
22  "iat": 1596474000, // Unix timestamp of the assertion's creation time
23  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
24  "jti": "abc161803398874def"
25}

Leftovers: What's the difference between Clojure's rem(ainder) and mod(ulus) functions?

2018-11-29T00:00:00Z

Leftovers: What’s the difference between Clojure’s rem(ainder) and mod(ulus) functions?

Clojure has two functions for finding the remainder in integer division: rem and mod. Turns out, many other languages also have remainder and modulus functions.

Why? What the heck? What’s the difference?

At first blush, these functions seem the same:

 1(rem 5 3)
 2=> 2
 3
 4(mod 5 3)
 5=> 2
 6
 7(rem -5 -3)
 8=> -2
 9
10(mod -5 -3)
11=> -2

This sameness only holds when the arguments are both positive or both negative.

Check this out:

 1;; negative numerator, positive divisor
 2(rem -5 3)
 3=> -2
 4
 5(mod -5 3)
 6=> 1
 7
 8;; positive numerator, negative divisor
 9(rem 5 -3)
10=> 2
11
12(mod 5 -3)
13=> -1

If one of the arguments is negative, we get different results from rem and mod. Not only that, we get different results within rem and mod depending on whether its the numerator or divisor that is negative.

Why are there two functions? Why isn’t there just one way to calculate a remainder like I learned in school? When do you want to use one over the other?

I thought these questions would be easy to answer. There are certainly a lot of answers but not many were complete.

The first level answers

These are the two most common and useful answers I found:

mod is different because it returns a remainder that reflects the sign of the divisor.
mod floors the quotient toward negative infinity while rem truncates the quotient toward zero.

The first explanation is true and it answers my second question, “When do you want to use rem over mod?” by saying, “Use mod when you want the remainder to have the same sign as the divisor.”

This explanation implies that the reason there are two different functions is because you might want the results to be different in these certain cases.

As far as explanations go, it falls flat. What’s the motivation? Humans made this! What were they thinking? Is there a Hollywood heist movie behind this - computer programmer replaces rem with mod to siphon off remainders of the stock market?

I disqualify the first explanation because it doesn’t satisfy my “why” questions.

The second explanation provides a little more information about the decision (flooring vs truncating) that results in the first explanation.

I’m still not satisfied with “why” we have two ways to calculate the remainder but first, I want to take a quick detour into integer division and the concepts of flooring and truncating.

Integer division: what’s happening inside `rem` and `mod`

When I first learned about rem and mod, I was surprised that there are multiple ways to calculate a remainder.

I am much more surprised that I was surprised. I have a math degree, shouldn’t I know this? I spent years in elementary school carrying out division and manipulating fractions - why didn’t I notice then? Did I forget that I knew this once? I really don’t know.

Are rem and mod based on the the division algorithms we learn in school? What did we learn in school?

I learned a simplified version of integer division.

The convention is to return the value of x that satisfies the congruence and lies between 0 and m. (source)

 1;; division: -5/3 = 5/-3 -1.66
 2
 3;; - / + negative numerator, positive divisor
 4
 5;; integer division: -5 = (3 * -1) + (-2)
 6(rem -5 3)
 7=> -2
 8
 9;; integer division: -5 = (3 * -2) + 1
10;; -2 is closer to negative infinity than the -1 quotient provided by `rem`
11(mod -5 3)
12=> 1
13
14;; + / - positive numerator, negative divisor
15
16;; integer division: 5 = (-3 * -1) + 2
17(rem 5 -3)
18=> 2
19
20;; integer division: 5 = (-3 * -2) + (-1)
21;; -2 is closer to negative infinity than the -1 quotient provided by `rem`
22(mod 5 -3)
23=> -1

Use case: bucketing values

Remainders are a way for us to identify groups of numbers.

 1(mod 3 -3)
 2=> 0
 3
 4(mod 2 -3)
 5=> -1
 6
 7(mod 1 -3)
 8=> -2
 9
10(mod 0 -3)
11=> 0
12
13(mod -1 -3)
14=> -1

You can see a pattern emerge in the remainders. Because we’re dividing by -3, our remainder can only ever be between 0 and -3. We can group {0, 3} together because they both have remainder 0 when divided by -3, same with {-1, 2}.

Doesn’t rem do the same thing?

 1(rem 3 -3)
 2=> 0
 3
 4(rem 2 -3)
 5=> 2
 6
 7(rem 1 -3)
 8=> 1
 9
10(rem 0 -3)
11=> 0
12
13(rem -1 -3)
14=> -1
15
16(rem -2 -3)
17=> -2

Nope! Because rem is flooring to zero, it starts a new cycle of remainders when it passes 0. -1 and 2 are no longer in the same group.

Why would we want to group numbers based on their remainders?

Use case: limiting a function range

This morning, I happened across this basic Clojure exercise:

Using REPL documentation functions, find the documentation for the rem and mod functions. Compare the results of the provided expressions based on the documentation.

from: https://clojure.org/guides/learn/syntax

rem is “…the integer “left over” after dividing one integer by another to produce an integer quotient (integer division).”

mod stands for modulus or modulo operation which is defined as “… the operation that produces such a remainder when given a dividend and divisor.”

Sounds like rem and mod do the same thing, so what’s the difference?

Turns out this question is asked a lot in programming because functions for remainder and modulus vary between language. Language designers had to make a choice about how to implement these mathematical concepts.

I don’t remember learning multiple ways to calculate a remainder in school so I did some digging. The following is a summary of what I learned. I tried to keep it easy-to-understand and memorable so that I won’t forget it a second time.

You can skip the refresher on integer division if you just want to know what the difference is between rem and mod in Clojure.

My main source of understanding came from an excellent run down by Eric Lippert on the Microsoft Developer blog from 2011.

Why do we divide things?

Division is dividing something up into equal parts. 10 pies divided amongst 4 people means each person can have 2.5 pies. That’s great. We’re all happy.

Sometimes the objects we’re dividing aren’t useful when we cut them into parts. Half a pie is still tasty but half an iPhone is not usable.

If we have 5 iPhones and 3 people, how many iPhones can each person have so that each person has the same number of iPhones?

Remember, we want to make sure each person has an equal amount, to avoid fighting.

When we have more objects than people, then we have leftover iPhones, a remainder.

5 / 3 = 1 iPhone per person, with 2 leftover iPhones.

5 / 3 = 1, remainder 2.

We can flip this equation around to say:

(1 iPhone per person * 3 people) + 2 leftover iPhones = 5 iPhones.

(1 * 3) + 2 = 5

Following this algorithm, we can generate other valid solutions.

(2 iPhones per person * 3 people) + 1 missing iPhone = 5 iPhones

(2 * 3) + (-1) = 5

(-1 iPhones per person * -3 people) + 2 iPhones = 5 iPhones

(-1 * -3) + 2 = 5

Negative remainders

When we’re out in the world dividing up pies and iPhones, the leftover, or remainder, is always positive. We don’t have negative pies or iPhones, or do we?

Wouldn’t it also be true to say, that each person could have 2 iPhones but one person would have to give up one of their two iPhones?

(2 iPhones per person * 3 people) + (-1 iPhone) = 5 iPhones.

(2 * 3) + (-1) = 5

5 iPhones divided by 3 people = 2 iPhones per person, with one iPhone returned.

5 / 3 = 2, remainder -1.

This is conceptually possible (being short an iPhone) and mathematically correct.

I don’t know about you, but I’d prefer to tell my friends they can each have one iPhone and hide the extras rather than tell them they are entitled to two as long as we agree that someone won’t get their second.

There are endless other solutions that are less useful. For example, 5 / 3 = 20, remainder -55. I give each of you 20 iPhones but altogether you’ve got to give me 55 of them back? It works on paper but…

Choosing a Solution

I’ve been talking about iPhones because I want to convince you that there are many possible solutions. We don’t think about it much because we have a preference for certain solutions over others.

How do you choose a solution?

In the above scenario, my preferred remainder is:

positive (To maintain peace and keep things simple.)
small (I can’t afford 60 iPhones even if I’m going to return 55.)

This matches what mathematicians use to define integer division.

The answer should be the least positive remainder.

What about negative numbers?

We can consider a negative iPhone is an iPhone owed, lent, or given away.

Imagine we can construct a mega iPhone from 5 iPhones. I’ll call it a MEGAPhone. I need convince my friends to lend me their iPhones so I can create a MEGAPhone.

We could have:

1) -5 / 3 = -1, remainder -2

3 people contribute 1 iPhone each and we’re still 2 iPhones short for our MEGAPhone.

Or maybe…

2) -5 / 3 = -2, remainder 1

3 people contribute 2 iPhones each for a total of 6 loaned iPhones, which is 1 iPhone more than we needed.

What if we flip the signs of our numbers?

3) 5 / -3 = -1, remainder 2

4) 5 / -3 = -2, remainder -1

Frankly, I don’t know how to explain what the above equations mean in real-world terms. We’ll come to a better example of a negative divisor in minute.

Choosing a Solution Again

Which solution should I choose?

In this example, I’d rather not be short an iPhone because the MEGAPhone isn’t a MEGAPhone with just 4 loaned iPhones.

That means I use either

2) -5 / 3 = -2, remainder 1

4) 5 / -3 = -2, remainder -1

But imagine I can only get 1 iPhone from each friend. Then I need to know, “How many iPhones do I need to provide personally?” In that case, I want to know that I am 2 iPhones short, remainder -2.

If we go back to the mathematicians, they further define integer division as returning the least absolute remainder.

The mathematicians prefer that I ask my friends for 2 iPhones each so that I have one extra.

Why doesn’t this sound like what I was taught in school?

To be honest, all I remember is carrying out long division on positive integers and having a remainder.

I can’t recall anything about finding the least absolute remainder.

Do you remember learning that there are multiple ways to divide a number when you can play with the remainder? Or that you should take the absolute value of your remainder?

Let me know, I’m curious what you remember from school.

The difference between `rem` and `mod` in Clojure

I’ll run a couple experiments to show the difference before I talk about it.

 1;; positive numerator, positive divisor
 2(rem 5 3)
 3=> 2
 4
 5(mod 5 3)
 6=> 2
 7
 8;; negative numerator, positive divisor
 9(rem -5 3)
10=> -2
11
12(mod -5 3)
13=> 1
14
15;; positive numerator, negative divisor
16(rem 5 -3)
17=> 2
18
19(mod 5 -3)
20=> -1
21
22;; negative numerator, negative divisor
23(rem -5 -3)
24=> -2
25
26(mod -5 -3)
27=> -2
28
29;; also note the zero cases
30(rem -5 0)
31=> java.lang.ArithmeticException: / by zero
32
33(mod -5 0)
34=> java.lang.ArithmeticException: Divide by zero
35
36;; I'm not sure yet why one error uses `/` and the other uses `Divide`, feel free to email me if you have an idea or the answer.

rem and mod act the same when the numerator and divisor are the same sign (negative or positive).

Why do they act differently when the numerator and divisor have opposing signs?

Let’s investigate the source code.

 1(source rem)
 2(defn rem
 3  "remainder of dividing numerator by denominator."
 4  {:added "1.0"
 5   :static true
 6   :inline (fn [x y] `(. clojure.lang.Numbers (remainder ~x ~y)))}
 7  [num div]
 8    (. clojure.lang.Numbers (remainder num div)))
 9=> nil
10
11(source mod)
12(defn mod
13  "Modulus of num and div. Truncates toward negative infinity."
14  {:added "1.0"
15   :static true}
16  [num div]
17  (let [m (rem num div)]
18    (if (or (zero? m) (= (pos? num) (pos? div)))
19      m
20      (+ m div))))
21=> nil

Discussing the source of rem is beyond the scope of this article. The implementation of rem was set first, and mod was created to offer a different choice in case the definition of rem doesn’t suit your purposes.

Let’s look at how mod utilizes rem and what creates the difference.

1(let [m (rem num div)]
2    (if (or (zero? m) (= (pos? num) (pos? div)))
3      m
4      (+ m div))))

mod considers three cases. Here are the first two:

the remainder is 0 => just return 0, end of story
the numerator and divisor are the same sign (either both positive or both negative) => return the remainder; act just like rem

Thirdly, the else case. After eliminating the first two cases, we have a non-zero remainder and the numerator and divisor have opposing signs.

In this else case, (+ m div), add the divisor to the remainder.

 1;; negative numerator, positive divisor
 2(rem -5 3)
 3=> -2
 4
 5(mod -5 3)
 6;; (+ (rem -5 3) 3)
 7;; (+ -2 3)
 8=> 1
 9
10;; positive numerator, negative divisor
11(rem 5 -3)
12=> 2
13
14(mod 5 -3)
15;; (+ (rem 5 -3) -3)
16;; (+ 2 -3)
17=> -1

As a result, mod gives us a least absolute remainder.

I actually don’t have a nice way to wrap this up. From what I can tell, mod aligns with Wikipedia and Wolfram Alpha, which must be the indisputably true way.

So, how did rem originate? Why can mod rely on this simple bit of addition to create a least absolute remainder from rem?

Stay tuned.

A multipart mishap: adding plain text email support to Stop Slacking

2018-07-23T00:00:00Z

A Multipart Mishap:
Adding plain text email support to Stop Slacking

Update

December 21, 2025

This project has been retired. After a couple years, Slack finally introduced this feature. :)

Recently, I discovered that Stop Slacking, a free reply-by-email service I operate, wasn’t processing plain text emails. This is a story about troubleshooting with a product design footnote.

Step 0: Never ignore your error messages

A user let me know that nothing happened when they tried to subscribe. Their subscription email looked fine so I reviewed my error message logs for another clue.

For weeks, I had been receiving error messages that said:

1java.lang.IllegalArgumentException: No matching method found: getBodyPart for class java.lang.String

A function called getBodyPart couldn’t use the input it was receiving. getBodyPart is used in only one part of Stop Slacking – to parse incoming emails (subscription requests, replies to notifications, emails to me).

I had ignored the error messages. I wasn’t familiar with the function getBodyPart because I hadn’t written this bit of code. I told myself that if it was really a problem, I’d hear about it or see the problem myself (hah).

Why are only some emails causing an error? What’s different about these emails?

Step 1: Recreate the error

In a Clojure REPL, I put an unsuccessful email through my email parsing function and received the error I expected:

1java.lang.IllegalArgumentException: No matching method found: getBodyPart for class java.lang.String

I have an error in an environment I can play with. Check.

Next, I can step through the function to see what my computer sees. (Fingers crossed the computers remember my empathy when they take over.)

Step 2: Diagnosing the problem

Here’s the Clojure function my computer is trying to carry out when the error occurs:

1(defn parse-email
2  [email]
3  (-> (MimeMessage.
4      (Session/getDefaultInstance (java.util.Properties.))
5      (io/input-stream (.getBytes (:content email) "UTF-8")))
6      (.getContent)
7      (.getBodyPart 0)
8      (.getContent)))

You can see the .getBodyPart function in the middle.

Why does .getBodyPart throw an error when it gets a string? What are the successful emails giving .getBodyPart?

To see what is happening at each step, I’ve removed the last two instructions from this function and I’ll add them back one at a time.

1(defn parse-email
2  [email]
3  (-> (MimeMessage.
4      (Session/getDefaultInstance (java.util.Properties.))
5      (io/input-stream (.getBytes (:content email) "UTF-8")))
6      (.getContent)))

Compare the outputs:

Input	Output
Unsuccessful email	`"Hi, this is the body of the email. Such email text."`
Successful email	`#object[javax.mail.internet.MimeMultipart 0x6af1733c "javax.mail.internet.MimeMultipart@6af1733c"]`

When I input the unsuccessful email into parse-email, I get the message body. When I input the successful email, I get an object identifier back.

What happens when I follow the next instruction in my program, .getBodyPart?

1(defn parse-email
2  [email]
3  (-> (MimeMessage.
4      (Session/getDefaultInstance (java.util.Properties.))
5      (io/input-stream (.getBytes (:content msg) "UTF-8")))
6      (.getContent)
7      (.getBodyPart 0)))

The outputs:

Input	Output
Unsuccessful email	`java.lang.IllegalArgumentException: No matching method found: getBodyPart for class java.lang.String`
Successful email	`#object[javax.mail.internet.MimeBodyPart 0x39370e77 "javax.mail.internet.MimeBodyPart@39370e77"]`

The unsuccessful email gets me the error that started this quest. The successful email gets another object. It’s a different identifier this time, interesting.

If I had stopped manipulating the unsuccessful email in the last step, I would’ve had what I wanted.

I want to see how my successful email message makes it through this program. What happens when I add the second .getContent from my original function?

1(defn parse-email
2  [email]
3  (-> (MimeMessage.
4      (Session/getDefaultInstance (java.util.Properties.))
5      (io/input-stream (.getBytes (:content msg) "UTF-8")))
6      (.getContent)
7      (.getBodyPart 0)
8      (.getContent)))

The outputs:

Input	Output
Unsuccessful email	(Not applicable)
Successful email	`"Hi, this is the body of the email. Such email text."`

In summary, the full set of instructions works for some emails but is too much for other emails.

What’s the difference between these two types of emails?

Take a look at the emails themselves. (Note: These have been simplified for readability.)

The successful email:

 1Return-Path: <sender@example.com>
 2Subject: test email
 3To: recipient@example.com
 4Content-Type: multipart/alternative; boundary=\"123\"
 5--123
 6Content-Type: text/plain; charset=\"UTF-8\"
 7Hi, this is the body of the email. Such email text.
 8--123
 9Content-Type: text/html; charset=\"UTF-8\"
10Content-Transfer-Encoding: quoted-printable
11<html><head><style>body{font-family:Helvetica,Arial;font-size:13px}</style></head><body><div>Hi, this is the body of the email. Such email text.</div><br><div></div></body></html>
12--123--

The unsuccessful email:

1Return-Path: <sender@example.com>
2Subject: test email
3To: recipient@example.com
4Content-Type: text/plain; charset=\"UTF-8\"
5Hi, this is the body of the email. Such email text.

You can see that the successful email starts with a Content-Type: multipart and contains two children, text/plain and text/html. The unsuccessful email has only Content-Type: text/plain.

This is the crux of the problem. My program expected only multipart emails, not plain text, or what I like to call “singlepart”, emails.

Diagnosis complete.

Step 3: Resolve the problem.

Now that I knew the problem, I knew that I needed to detect whether an email was single or multipart and then parse accordingly.

Because I don’t know which order the body parts will arrive in, my new function lists the body parts and their types so that I can select the longest of each type. For example, if there are two plain text parts in the email, I grab the longer one and parse it. If needed, I can select html and fall back on the plain text.

I’ve a newfound admiration for the folks that build email clients and email services because they must anticipate a forest full of sneaky edge cases just waiting to pounce.

Playing with email clients

I’ve discovered that Fastmail sends plain text emails by default and sends multipart emails in response to multipart emails.

You can write and send plain text emails from Gmail if you select “Plain text mode” from the little dropdown in the bottom right corner, to the right of the trash icon. This is handy for testing.

You can also examine the raw email in Gmail by selecting the “Show original” option from the top right dropdown, to the right of the reply arrow on an individual email message.

Now you can look at the email messages you’ve received and see if they’re multipart messages or single part plain text messages.

It’s cool that email supports a variety of options because we’re all different people with different needs.

Product Design Footnote

Is it worthwhile to support plain text emails? Are you going to support every little edge case?

Plain text emails aren’t just an edge case for Stop Slacking.

Folks who want to use lower bandwidth tools like Stop Slacking are highly likely to use plain text email because it is the lowest bandwidth type of email.

The primary purpose of Stop Slacking is to offer a lower bandwidth method for using Slack. I want to support my users in their efforts to use other low bandwidth tools.

This is probably the easiest product design decision I’ve ever made. :)

Drop me a line if you have any questions, have encountered odd types of emails in your work, or know of a set of raw emails that could be used for testing email parsers.

Stop Slacking: integrating Slack into email

2018-06-17T00:00:00Z

Stop Slacking:
integrating Slack into email

Slack is an endless meeting with no agenda.

Update

December 21, 2025

This project has been retired. After a couple years, Slack finally introduced this feature. :)

Summary

To minimize my data usage and increase my productivity, my partner, Kevin, and I built a reply-via-email service for Slack (a chat app used by many businesses for internal communication).

Stop Slacking sends you an email when you are mentioned or direct messaged on Slack (the important stuff) and then posts your reply to Slack.

Try it out at stopslacking.com.

The Setting (or How to Work in a Campervan)

During April, Kevin and I lived out of a converted minivan in southern New Zealand. On a given morning I’d pat myself on the back for my life choices and then spend the next hour agonizing over connectivity.

When wi-fi wasn’t working well, I moved into range of a cell tower and watched the MBs rack up at $10/GB. I quickly became aware of how much data I was using.

In short, I didn’t want to be opening Slack more than I needed to. Email was faster and cost less, not to mention it helps me stay focused.

The Big Product Design Decisions

The design of Stop Slacking started with a few key decisions about medium and functionality. I’ve outlined these decisions in order of how much different Stop Slacking would have been if we’d made different choices.

1. Stop Slacking is not an official Slack App.

The scope needs to stay small. We just wanted to get something working. The alternative to making an official Slack App is to use their legacy API tokens. A user can access a token for their account on a given workspace and send it to Stop Slacking to create a subscription. Administrators can disallow this functionality and thus control access to their data.

This decision chooses speed over making sure the service works for every workspace.

2. The interface will be email.

Stop Slacking lives only in email. All commands and feedback are sent via email. There’s no web interface; it’s a text interface like a terminal program.

This satisfies our goal of minimizing data use. Email is a data-light communication channel. We don’t have to worry about keeping a web interface light-weight.

Choosing to use a text interface means we need to design for discoverability. All emails from Stop Slacking include footers enumerating options for interacting with Stop Slacking.

3. Replies are posted in Slack as threaded replies.

Slack has two ways to reply to a message. The original method was a general reply, meaning that the reply appeared at the bottom of the channel. Later, Slack added threaded replies. A threaded reply defaults to being truncated beneath the parent message and the entire thread can be opened in a side panel. This is useful when discussions on multiple topics carry on simultaneously in the same channel.

When you reply to a Slack message, do you want it to be a general reply or a threaded reply?

Specifying this choice with each message requires you to type a keyword or character to indicate a general or threaded reply. The error potential goes through the roof for this functionality. Since we’re using text, we’d have to correctly identify your command and separate it from your reply and the quoted email that most email clients include. Could we predict all the ways that could go wrong and prevent those errors?

A preference setting might be a solution for people who have a strong preference one way or another but not for people who use both general and threaded replies regularly.

I made the call to keep the product simple with threaded replies only. The reply will always be in-context, even if you are replying hours later.

4. @ mentions and direct messages

Which Slack messages do you want to receive notifications about?

For a busy person, these @ mentions and direct messages cover their most urgent tasks.

On company I work with has such an overflow of Slack messages that the team has learned to @ mention every time they address someone. Urgent has become the norm. (Red flag, anyone?)

Notification source preferences are on the idea list for future features.

Omitted for Brevity

In the future, I’ll write more about designing the emails (when and what, variation between quoting and threading in email clients) and implementation (a Clojure app on a server, the underside of Slack APIs, and a handful of AWS consoles - S3, SES, SNS, ACM, Cloudfront).

What do you want to hear about?

What’s Next?

I’ve enjoyed working on a text-only interface. And the landing page was fun to build - especially those high-quality “screenshots”.

My task now is to test our design decisions against the real-life needs of other people. How do other people want to use Stop Slacking? What do they need to improve their workflow?

I’d love to hear your comments and questions. Feel free to email me at nicki@stopslacking.com.

Update July 2, 2018: Kevin has posted a stellar article that covers another side to the product design and discusses what’s under the hood – the development considerations unique to email, Slack, and low bandwidth.

My "screenshot" of an email reply.

Floatin' my boat with CSS animation: Troubleshooting stutter caused by animating layout properties

2017-12-21T00:00:00Z

Floatin’ my boat with CSS animation:
Troubleshooting stutter caused by animating layout properties

Meep meep!

I’ve been building a simple CSS animation of a boat traveling across the viewport, puffing smoke as it goes. This article is a write-up for others who are building CSS animations and might benefit from a few of the things I learned on this project, namely:

why you shouldn’t animate properties that affect layout
how to layer multiple animations

None of these are new discoveries. I just want to add to the examples out there that we all use to help each other learn.

If you were hoping for a good beginner’s tutorial, I highly recommend Kirupa’s free tutorials. These are clear, to-the-point, and come in both article and video formats.

The Basic Boat

First, I drew a little boat in Sketch and exported it as an svg. From the Sketch svg, I copied out the lines that were clearly useful and discarded the additional info.

This little tugboat is called "Boatsie".

The animation comes in three parts:

the boat moving side-to-side
the boat rocking up and down
the engine smoke puffing up and away behind the boat

Transitions vs Animations

It’s always worth asking yourself if you should be using a transition or an animation. In my case, I want this animation to run continuously so I need to use the animation property. For more discussion about animation vs transition, see the cssanimation.rocks article on the topic.

Moving Side-to-side

First, I made the boat move side-to-side. This animation is created by changing the margin-left property. I borrowed this idea from somewhere else but the source escapes me. We’ll talk later about why animating margin-left isn’t a great idea.

The animation loop consists of moving across the screen, flipping the boat when it reaches the end of the page using the transform: rotateY() property, and moving back across the screen.

Rocking up and down

The rocking motion is an animation of the transform: rotate property. This is the 2D rotate property.

I didn’t want the edges of the bottom of the boat to come out of the water because it would ruin the illusion that this is a boat sitting in water. For this effect, I positioned the boat lower and used the boat’s parent div as a clipping path using an inset rectangle (CSS-Tricks article on clipping paths).

With a clipping path:

I ended up adding the rocking motion to the same animation that moves the boat side-to-side. I would like a way to combine multiple animations but I couldn’t because both animations used the same property, transform.

In the side-to-side animation, I have transform: rotateY() and in the rocking, I have transform: rotate(). Even though rotate and rotateY are different, they still define the transform. If I created two separate animations and applied them to the same element, the CSS would use the transform instructions from the latter animation. The highest rule of CSS: there can be only one [of each property declaration]!

Engine smoke

The smoke was a bit trickier than the other two movements. To begin with, the smoke needs to move with the boat. That’s easy, just apply the same side-to-side animation as the boat. Since the boat animation merges side-to-side and rocking motions, I had to create a new animation just for the side-to-side and apply this to the smoke.

The smoke is made up of a container svg, which takes the side-to-side animation, and small svg circles as children.

<svg class="smoke" width="100px" height="40px" viewBox"0 0 153 40">
   <circle class="one" fill="gray" cx="47" cy="35" r="4"></circle>
   <circle class="two" fill="gray" cx="47" cy="35" r="4"></circle>
</svg>

Here’s the boat with smoke:

Next, I needed to make the smoke puff. I experimented with the movement and opacity in an animation on the first circle.

This just took a bit of troubleshooting. Let me know if you have a tool for generating the frames of an animation. That would make this process a little easier than watching the animation over and over.

I originally had three circles but when I started applying the same puffing animation to each circle and staggering them with a delay, I realized I might not need all three. Two seemed to do the trick.

Looks pretty good, eh? You’ve probably noticed by now that when the boat flips and the smoke flips, a puff of smoke makes an incredible jump in space that indicates some very improbable fluid dynamics.

I spent a bit of time drawing little timelines to visualize how I could make the puffing animation a factor of the boat’s animation so that the puffs would dissipate conveniently before the boat flips.

I mistakenly assumed that the delay occurs with every cycle of the animation.

This syncing is something I still haven’t resolved. I’ve got bigger fish to fry.

Why you shouldn’t animate layout changes

My partner, Kevin, noticed that the animation wasn’t quite smooth.

We recorded the animation using Chrome Dev Tools and found that nothing was slowing the animation down.

You can see that there is a frame rendered approximately every 16 seconds, as expected. The blocks of color show when the browser is thinking and there are gaps in there so we aren't pressed for time.

How did we figure this out?

The browser carries out any instructions one at a time. We’re computing on a single thread here. To animate a change, the browser has to calculate all those fancy in-between frames for us and render them.

If carrying out computing instructions takes too long, the render doesn’t happen regularly and results in a visible lag. If the lag is great enough, the browser is smart enough that it can skip a frame to try and catch up. You might see an even larger visible jump in your animation.

If you zoom in, Chrome Dev Tools shows you how long each of these instructions takes. It’s really incredible how much detail is in the performance readout. You can zoom in and out of huge amounts of data quickly and easily. This tool is really one of the best interactive data visualizations I’ve ever seen.

In my case, you could see that the frames were still being rendered at the expected frame rate.

At this point, my partner asked me how I was animating the boat. When I mentioned the margin-left, he explained two valuable lessons he has learned:

The browser rounds pixels, sometimes resulting in imprecise graphics.
Every time you change a layout property, the browser recalculates the entire layout, even if nothing but the element in question was affected.

He suggested a quick test, push the browser width to extremes to see if the problem gets worse.

Making the browser width very small had a telling result:

The duration of this animation is 10 seconds so the boat has to move the width of the viewport in 10 seconds. The browser has to divide up the width of the viewport into 10 seconds x 60 frames per second = 600 frames. When the browser divides the width of the viewport by 600, there is bound to be some rounding because it’s unlikely that the viewport width is a multiple of 600.

Ok, so we have some pixel rounding. If my viewport is 601 pixels wide, my little boat will have to jump one extra pixel at some point.

If my viewport is less than 600 pixels wide, then my boat will have to pause a lot because multiple frames will round to the same pixel position.

I replaced all of my margin-lefts with transform: translate and the result is much smoother.

Wrapping Up

This is where I’m stopping. I tried to make two more changes but got stuck.

I still haven’t fixed the smoke puffs that flip when the boat reaches the end of the screen. I admit I’m stumped.
I want the boat to cross the screen at the same speed, regardless of viewport width.

On this second point, I tried using calc to try and turn a vw length value (px) into a time value (seconds). I couldn’t find a way to make it work.

The other option is to use Javascript, something I’ve been avoiding with this whole project. It appeals to me to be able to use CSS as much as possible.

Returning to my goals, when I put this on my website, I will probably have the boat go off the edges of the page instead of turning around so that will solve problem #1.

Props to Glitch.me

I began this animation using a cool live development tool called Glitch.me. It was a great way to get started quickly because Glitch creates the basic files for you to jump in and start editing. I didn’t have to worry about setting up my project files and creating a git repo. Also, Glitch has a cute interface that is wonderfully different than everything else out there.

I eventually moved the code into a local git repo and finished building it there. I wanted to document the process of creating this animation. My favorite way to do this is by making commits in a git repo so I can roll back the code and snapshot significant steps.

I’ll update here when I’ve added the animation to my site. Thanks for reading!

Update

I’ve added the animation to my site. To create a roughly similar boat speed on different size screens, I’ve used media queries.

I discovered that Chrome made an update recently that undoes my clip-path on the boat. I was totally stumped so Kevin was super helpful again. He is quick about coming up with hypotheses for what might be wrong AND simple tests to check if the hypothesis is on the right track. He turned off the boat’s animation and found that the clip-path worked again. So animation is part of the problem. He also tried tinkering with the z-index of the boat and that showed us that by changing the z-index, we could undo the clipping on the still boat. Kevin said there might be a bug in Chrome that is causing the animation to composite funny. Perhaps someone who enjoys digging into bugs like this can provide an explanation. :)

Concept Design: A lightning talk for the Melbourne Web Meetup

2017-12-12T00:00:00Z

Concept Design: A lightning talk for the Melbourne Web Meetup

Title: Why writing about concepts before you start sketching will win you money, respect, or well, at least warm fuzzy feelings

A product is, at its heart, a collection of ideas linked together in a greater whole. Like a building’s foundation we want the core ideas to be sound and mutually supportive. Design processes don’t address these core ideas adequately, often resulting in awkward experiences.

My talk is a brief introduction to the practice of concept design. The talk was originally titled “Why writing about concepts before you start sketching will win you money, respect, or well, at least warm fuzzy feelings”. When done well and included at the beginning of a project, concept design has the potential to avoid major changes in design, thus saving money and frustration. It’s up to you to convert that into direct benefits to yourself.

For more information, check out the work Daniel Jackson at MIT has done to define and establish concept design with his students, in particular Santiago Perez De Rosso.

Paper: Towards a Theory of Conceptual Design for Software Paper:What’s Wrong with Git? A Conceptual Design Analysis Talk: SATURN 2016 Keynote: Rethinking Software Design

You can take a look at the slides or watch the video:

Compiling Clojurescript

2017-11-29T00:00:00Z

Compiling Clojurescript

I am making little web games in Clojurescript and I want to be able to put them up on github so my friends can play them. So far I have been working in a live-reloading-dev environment so I haven’t given this problem any thought.

After a bit of fuss, trying to read lots of tutorials and looking at code my partner wrote for one of our projects, I figured it out. I’m writing it up here for two reasons.

So I can retrace my steps next time I need to set up compilation code in a Clojurescript project (it can vary each time!).
For anyone else who is looking for help.

I looked at these tutorials but neither gave me a working answer out-of-the-box.

https://clojurescript.org/guides/quick-start (I ran into a namespace error while following this tutorial. I think it was resolved by the bash code below that grabs the classpath from leiningen. Writing the correct classpaths when you have lots of pieces in multiple directories is hard!)
http://www.flyingmachinestudios.com/programming/how-clojure-babies-are-made-lein-run/ (This has tons of great detail but is a lot of new concepts for me to handle.)

Don’t get me wrong - the guys who wrote these have created tons of awesome resources that are very accessible!

Here’s what worked for me!

Make sure I have the following:

source files (this is usually a directory and can contain multiple files that you want to be compiled)
cljs.jar
build.clj
start.sh

The cljs.jar is a big library. I’m not 100% sure it’s a library because I just needed to make sure it was in the right place after I downloaded it. I didn’t need to edit it or open it.

The build.clj file is the clojure code that specifies what you want compiled. Mine contained:

1(require 'cljs.build.api)
2(cljs.build.api/build "src" {:output-to "resources/public/js/outs/main.js"})

src is the directory path that contains everything I want compiled.

The string after :output-to is the directory path and file name that I want created. (It needs to be a javascript file because that’s what we’re outputting! But I haven’t tried anything else so I’m not sure what mischief might occur.)

The directory paths are relative to the location of the build.clj file. (BTW, you can name the build file other things, but “build” or “builds” seems common.)

The start.sh file makes using the terminal easier. It contains:

1#!/bin/bash
2JVM_OPTIONS="
3  -cp `lein classpath`
4  -Djava.awt.headless=true
5  -client
6  -XX:+UseConcMarkSweepGC
7  -XX:+CMSClassUnloadingEnabled"
8rlwrap java $JVM_OPTIONS clojure.main build.clj development

I think the first line says, “hey, we’re talking in bash” so the terminal or shell (what’s the difference?) knows which language we’re in. I owe Kevin Lynagh for writing this file and most of this app set up.

I forget what rlwrap does. I use it for starting figwheel, too.

java is the command or program we’re invoking.
The $JVM_OPTIONS looks like a list of options for invoking java.
clojure.main is not something I understand.
build.clj is the name of the build file you want to run.
development is…?

Now that I have these files in place, I navigate to my project directory in the Terminal and run ./start.sh

This gets everything going!

You should see a folder labeled out in your current directory. This contains all the code for the dependencies not in your source. You should also be able to find the .js file you defined as the output of your build.clj file.

You’ll need an index.html file that contains:

~~~html

Animating A Tile Flip For An Adventure Game With CSS

2017-11-28T00:00:00Z

Animating A Tile Flip For An Adventure Game With CSS

I was reading a game post mortem from an awesome indie game developer, Daniel Linssen, about some ideas he’d had for The Sun and The Moon:

“My first idea was to make either a top down game or a platformer where you could use the mouse to flip tiles and expose what was beneath the surface. By flipping tiles you could create paths, remove spikes, block enemies, and so on.”

The game he ended up building, The Sun and The Moon, was very different from this idea. There are no tiles that flip.

I wanted to see what this dynamic would be like, the mouse creating a path ahead of a character that revealed what was underneath, on the flipside of the world. With a slight delay, there would be the opportunity to undo the path before the character arrived and seek out a better one. I’m not sure about spikes and enemies yet. But it felt like a great game mechanic to prototype. It’s also conceivably within reach but I’d still need to learn a lot.

Here’s the initial prototype:

This worked out pretty nicely.

Making the animation less choppy

I asked a few friends who have a good eye for this stuff for suggestions and they were wonderfully helpful!

The first suggestion I tackled (the only one I discuss in this post) was that the animation is a bit choppy. It seems to skip forward.

By the way, this is built using Clojurescript which means the animations were done in CSS. I used CSS animations, not CSS transitions. I used animations because I wanted to introduce a property and then make it go away over the course of the animation. E.g. Start at 0, go to 50, and then go back to 0. Transitions only introduce a property and make the change. That would just be starting at 0 and going to 50.

I’ve come up with two possibilities for the choppiness:

I’ve asked my keyframes to move 45% of the total distance travelled in 25% of the total time.
I’ve been changing layout properties in my animations. This causes the browser to spend a bunch of time calculating how the layout changes affect everything else in the layout. Too much thinking = slow.

There might be other possibilities. My computer only has 4GB of RAM and every program thinks it should have all of it so my computer is constantly running close the edge of its abilities. (Edit: I found out later that I was getting worse choppiness when my computer is over-stressed so I doubt that when it was working better it was still because of the memory. Unless memory scarcity declines in stages instead of all at once??)

As usual, instead of testing what’s causing the delay, I just jumped into solving one possibility. It did seem like good form to remove the layout properties from the animation anyway.

Recreating the tile flip without layout properties

I found a nice tutorial about creating the tile flip animation, from David DeSandro. Here’s the resulting tile flip:

A cool perspective

While exploring the card flip tutorial, I found that I could make the whole game field look like you were looking at it from an angle above.

I really like this but when I use it, it cancels out the perspective on the flipping tile. Notice how the tile flip looks more like an elevator door opening and closing. It’s not coming up off the plane of the flat tiles.

Getting everything I want

I’m not quite sure why I can’t have everything I want. It might take a bit of investigation. I think it has something to do with only being able to use the transform property once for each element. Here’s the pseudo code:

HTML Structure:

1<div class="box-with-perspective-view"> <!--apply perspective-->
2   <div class="grid-that-contains-small-tiles"> <!--use transform: preserve 3d to keep perspective of parent-->
3      <div class="tile-in-the-grid"></div> <!--use transform to rotate-->
4   </div>
5</div>

At this point, I wonder if I should be building small examples of perspective and transform to improve my understanding, or if I should move forward with other ideas for improving the animation. Tough choices. I’ll report back either way.

Update Dec 4 2017:

I improved the performance of the prototype. You can play with it online

Laws Of Repulsion: Building A Herding Dog Game

2017-11-15T00:00:00Z

Laws Of Repulsion: Building A Herding Dog Game

My latest project has been the basic game mechanics for herding humans with a dog. Why herd humans with a dog? You’ll find out if I ever finish this game. I don’t want to spoil it in advance.

My partner and I started this project earlier this year. In one short pair programming session, we built a dog (a box with a nose) that would animate to wherever you clicked or tapped on the screen.

My goal has been to get a simple version of the game play working that I can evaluate whether it’s fun to herd humans with a dog and thus whether the rest of the game is worth building.

It’s simple, right?

Here are the basic steps:

Draw a human (another box with a nose).
Tell the human to walk in a straight line.
Tell the human to turn 30 degrees when the human is within 10 pixels of the dog (a single corner of the dog, not anywhere on a rectangle, to keep things simple).

Then stop at this point because so far this sucks. The human spins like crazy when the dog is nearby because the human spins faster than it can move away from the dog.

[Sorry, I don’t have a video of this. I must’ve deleted the code before I got too dizzy.]

Side tangent about the programming I’m learning

Despite the stupid spinning human, I’m happy because I’d learned how to use threading macros in Clojure and was getting familiar with them.

A threading macro is a nicer way to write out a set of nested instructions. Here’s a familiar example from math: ((3 * 2) + 1) is one math expression nested inside another. You start with evaluating (3 * 2) and then you take the result and add it to 1.

A threading macro writes this in the order it will be evaluated:

-> (3 * 2)

(+ 1)

At first, I couldn’t see how these chained together or the order of the arguments. Is it ((3 * 2) + 1) or (1 + (3 * 2))? There is a rule that determines this and you just have to learn it. Not so bad. Very useful.

[If you’re interested in Clojure, you can read about it in this article about threading macros. I didn’t show clojure code here because I think it would confuse most people I know – standard math notation is more familiar.]

Building a grid

I was a bit stumped about the spinning human.

I needed a system that would give the human a new direction only once, not repeatedly. I was stuck trying to imagine how to do this with the proximity check I was already using.

My partner suggested that I build a grid system. So I thought about it for a bit and it began to appeal to me. I did a little reading about grids from Amit Patel. (Someday I want to try a hex grid. Amit has great tutorials about building these.)

Since I’m working with a web browser, I’m already using the pixel grid. But it’s been difficult because my characters are larger than a pixel; so which of its many pixels defines a character’s location? Keeping track of those pixels gets complicated.

By building my own grid, I can group the pixels together, say in 40px by 40px boxes, and my characters can be located within the box. Now, the location of my human is simply a pair of coordinates on the grid (similar to the x,y coordinates of graphing equations). It’s much simpler.

Having a visible grid made it easier for me to debug because I could see when things weren’t lined up right.

Moving on a grid, sensing walls and the dog

Once I had the human and dog on the grid, I wanted the human to move about the grid without input from me.

First, I had the human move straight down the grid and stop when it reached the walls, the edges of the grid.

Then I added a check for the dog. If the dog was in the way, the human would stop.

Just moving straight down the screen is quite boring but it’s a necessary step towards something more interesting.

Semi-independent movement

There’s no element of surprise in what I’d built so far. The human is so predictable and all you can do as the dog is stand in its way.

Someday, I want the human to have a path it is trying to follow but to start simple, I’m just going to have the human move around so I can try and herd it with the dog.

Movement 1: Look at the four boxes adjacent to the human, discard any that are off the grid or that contain the dog, then randomly choose one to move into.

The human walked all over the place, willy nilly. How do you herd something like that?

Movement 2: You are given a direction, move in that direction until you reach a wall or the dog, then turn to a randomly chosen direction.

This worked okay but my human tended to walk around mostly along the edges of the grid. I want the human to cross the middle sometimes.

Movement 3: Toss a 5 sided die and if it’s a 1 (20% chance) then change direction, otherwise, follow the instructions of Movement 2.

Pretty passable. The human is a bit tricky to herd but the feeling of the interaction is beginning to take shape.

Laws of repulsion

I want to simulate the way herding dogs can push other animals (or humans) in a certain direction.

The human shouldn’t want to cross in front of the dog. It might be really cool to do some kind of reverse gravity stuff here but I need to start with something simpler. A dog-zone.

I created a line of boxes in front of the dog that are considered the dog-zone, a place that causes the human to change direction.

Now, the dog has more reach, enough to do some basic herding. With some imagination.

Next up

This is a good, basic prototype for dog herding. Prototypes should be bare bones, the least effort to get the most learning. I had bigger ideas but this does an excellent job of testing out a very simple version of the most important aspect of this game.

Is it fun to herd humans? I don’t think this prototype gives me a definitive “yes” but it doesn’t tell me “no”.

I’m going to take a break from this and work on something else. The grid work in this project will probably be really useful for other games I want to build. A little time away will help me decide what to prototype next for dog herding.

Thanks for reading! Let me know if you have any questions or ideas for what to try next with the dog herding.

The So Fresh 9000: A washing machine interface built with state charts

2017-11-04T00:00:00Z

The So Fresh 9000:
A washing machine interface built with state charts

Summary

I had a bad experience with a washing machine so I tried building my own using a state machine. The project has convinced me that I want to keep doing product design with state machines and state charts.

The Cabrio that never stops

A year ago, I was trying to wash the linens at a friend’s vacation home before I left for the airport. I was using Whirlpool’s Cabrio WTW7300DW.

Not sure what the green, red, and blue lights in the center mean.

With seven minutes left on the wash, the Cabrio got stuck in a loop. Each time I went back to check on it, it still showed seven minutes and the linens were spinning in water, far too wet to put in the dryer. Doesn’t this machine have a spinning teacups mode for extracting as much water as possible?

Obviously there’s an error but there’s nothing telling me what’s wrong.

Problem #1: no user feedback for an error.

Problem #2: the error is looping. Why is there a state with no exit?

My options are just to pause the cycle and try to run another cycle. Preferably just the spin cycle. Problem #3: I didn’t notice the option to Rinse & Spin.

On the interface, this is a small label above something labeled Utility Tools. Is it an option I can select? I’m not sure.

Tools that are so full of utility.

I stumbled on the solution. I shuffled the linens around in the wash tub and once I started the machine again, the time remaining began to count down. Turns out the laundry was unbalanced and for some reason that was preventing the cycle from finishing.

The machine is top-loaded so the laundry sits in a vertically-oriented cylinder that is spun by a motor. If the laundry is unevenly distributed, more weight on one side of the cylinder than the other, then the cylinder will wobble as it spins. An unbalanced laundry tub can cause wear on the motor and its connections to the tub. It can also makes disturbing thumping noises.

I’m not sure why the unbalanced load caused the machine to loop. Seems like it would do more damage that way.

Anyway, this is how the story starts. I was worried about either missing a flight or creating a moldy laundry monster for the next vacationers. It was a crappy product experience.

But I don’t want to just throw shade, I decided to try to make something better.

The problem to solve

My goal was to build a washing machine interface that:

allows users to choose their wash preferences or use presets
runs the wash based on the user inputs
displays the time remaining
displays an error when the machine is unbalanced

In addition to these basic goals, I included the usual things you expect from a washing machine. For example, if you open the door, it should pause which means that it remembers what it was doing and resumes when you close the door. Give it an elephant’s memory. I won’t list the rest of these details here.

The solution

The solution could’ve been much simpler. I could’ve just drawn you a picture or even marked up a photo of the current interface to say “Add an error message here when the sensor registers an unbalanced load!”

I wanted to work through designing the whole system to see how things like settings and sensors on the machine could work together to present a clear, usable interface.

So I built a web-based prototype of the interface that I could interact with and move through its various states.

For unbalanced loads, I’ve simply made an unbalanced load message appear on the interface that is cleared if the balance is regained. I’m just working with the interface here so I’ve made assumptions about the physical sensors and how frequently they report back to the washing machine’s control system.

How it’s made

The washing machine prototype is basically a functioning website.

The core of the program is a state machine. The state machine is terrifically useful because it controls the app by moving between states. For example, when the washing machine is inactive, it’s in the Dim-Display state. I can tell the interface to dim the display when the washing machine is in this state.

Then, when someone presses the Start button, the machine knows to transition from the Dim-Display state into the Ready state.

The awesome thing about state machines is that you create a system of logic for your program to follow. Based on this state machine in this chart, there is no way to move from the Ready state to the Done state. So in creating the machine, I can declare the behavior I want and prevent behavior I don’t want.

I built the state machine with a tool my partner, Kevin, has been working on. He hasn’t shared anything about it publicly yet so just ask if you’re curious.

I was able to define the state machine in code which generates an interactive chart. Being able to see the chart and navigate it helps me test out the system I’ve created. I can explore the possibilities I’ve created and look for gaps in functionality or behavior I want to prevent.

In addition to defining the state machine, I can code up an interface that responds to events in the system. That’s what you saw above.

Statecharts make design better

My process for designing interfaces used to start with

a bit of writing – goals, use cases, a list of screens I think I need to draw,
an information architecture diagram,
sketching out the screens,

and so on.

None of these tools does a good job of conveying the underlying functionality of the system.

The information architecture is the closest I used to come to looking at the system from a high level. And to be honest, an information architecture is a poor representation of a program. It’s a rough approximation of how websites used to be built using just HTML and CSS, before programs on servers began generating the HTML, CSS, and Javascript that web browsers read. Information architecture is best used for communicating how a website will be organized.

With a state chart I can define the control system that affects how people interact with what I’m designing.

I’m curious to try this out with other folks. I hope state machines will make it easier for the teams I work with to align and get a prototype working quickly.

Animating with Quicktime and nudging objects

2017-10-23T00:00:00Z

Animating with Quicktime and nudging objects

I wanted to make this animation based on a handkerchief I saw in a shop window.

I recreated the basic shapes in Sketch, a vector drawing tool. At first, I thought I’d do this in the stop-animation style: draw each frame and join the frame pngs into a gif.

You know what’s easier? Build one image and film yourself nudging it across the screen.

There are a lot of tools that take a video file and output a gif. From what I’ve read and proved with my own experiments, gifs are actually larger than video files. A gif is an image file format. But a lot of websites where you might want to post your animation don’t support video upload, only image upload. I’ve heard this is because there are security concerns but I haven’t investigated.

This only took me 2 hours, start to finish. I’d like to try it again in the future. It would be nice if the boat could go at an angle to the water lines. And to create the little wave that boats push out in front of them. Or to generate this all programmatically. Next time! :)

Designing interactive tables: keyboard navigation and selection

2017-10-23T00:00:00Z

Interactive tables are an extremely useful feature of many digital products. Think Excel or Google Spreadsheets, Gmail, Quicken, Jira, and many business tools. People use these programs at home and on the job to review and operate on large amounts of data.

This article covers some considerations I encountered when designing an interactive table that supported both mouse and keyboard inputs. Hopefully, it’s helpful to those of you working on a project that includes interactive tables.

Let’s start with a short definition of an interactive table

Excel is a classic example of an interactive table. It’s a tool for editing and organizing data. You can select data, copy it, apply functions, and so much more.

A screenshot of Google Spreadsheets because it's close enough for our purposes but I talk about Excel here because it's the original program I learned from.

My experience with interactive tables comes from designing a personal finance app, Moneyhawk. Central to the app is a table of bank transactions. People who use Moneyhawk need to be able to edit data in one or more of their transactions.

For example, I want people to be able to change the payee on a dozen bank transactions from “SQ 34COF#222” to something more readable like, “34th St Coffee”.

We’ve got a goal, how do we get there?

I started by breaking down the desired functionality into basic actions:

select a transaction
select multiple transactions
edit selected transaction(s)

Are the multiple transactions all adjacent or here-and-there? Let’s split the multiple transactions selection into two actions:

select multiple transactions adjacent to each other
select multiple transactions spread out through the list

What if someone wants to clear their selection? Or select everything? (The latter is especially likely if someone used search to filter the list to the set of transactions they want to change.)

select all transactions
deselect a transaction
deselect all transactions

Here you can see the selection and deselection my partner and I built:

No surprises, right? These interactions should look familiar.

The design here was mostly about reusing the same kinds of interactions we see in apps like Finder and other file management programs. Click on a row to select it. Click on another row and the previous selection is cleared and the target row is selected. We use keys to modify the click’s action. Shift + click selects everything between a selected row (which one if multiple are selected?) and the target row. Command + click adds toggles the selection of the target row.

I don’t want these few paragraphs and a quick video to imply that building this was trivial. Discussing the intricacies of designing click functionality is beyond the scope of this article. To give you a peek, here are a few considerations:

What if someone double clicks? Is that the same as a click?
What if someone clicks and holds the click for a long time? What is their intention?
Do you want a hover state for the objects you can click on?
What should the cursor look like?
Is there an active state that changes the appearance when the user clicks down? Or when they release the click? What meaning do these visual changes convey?

Designing for keyboard input

Ok, we’re pretty happy with what we’ve got above. But how do we do the same actions with a keyboard? How do we use a keyboard to tell a computer that we want a,b, and e transactions selected and we want to edit their payee?

Maybe this question seems too simple. Of course we use a cursor or a pointer of some kind! I actually feel hesitant about this answer because using a cursor feels too obvious and obvious answers hamper ingenuity.

But I don’t want to push the envelope with keyboard selection because it’s worthwhile to work with pre-existing systems when they are widely familiar.

Many, many people are accustomed to using cursors for text interfaces. The text interface is a series of tiny cells. Each cell can hold a single character and so we move our cursor left, right, up, down to point at an empty cell or a character we want to change.

In this text editor, there are 432 characters and just as many destinations for our cursor.

Ok, that’s a good start. We can use arrows to move a cursor around our screen so we can point at stuff. But it can be really slow to move your cursor through thousands of characters to make edits. A table helps us create chunks of information that we can organize to be more easily navigated and discovered.

In a this table, our data is in chunks. Instead of navigating the 180 characters in this table, we can navigate the 60 cells.

Excel offers us a table to chunk information into cells. Each cell of the table is its own text interface that can do incredible functions and equations, and store images and masses of text. Heck, these little text interfaces can even reference each other!

When you move around in Excel, either with a mouse or keyboard, a border around the cell matches your movements. Like a text cursor, this cell border is the pointer that indicates your current target for any actions. When you click on a cell, the pointer moves at the same time that the action occurs, relegating the pointer to a piece of feedback.

Look at how fast we can zoom around this screen!

Pointing at rows or cells?

In Moneyhawk, I chose to have row pointers instead of cell pointers for two reasons:

Transactions are more significant objects than their parts. I chose to emphasize transactions.
I wanted to limit the number of decisions someone has to make when they’re using a keyboard. This helps with speed and reduces cognitive load.

Moneyhawk's pointer is the blue row outline. A selected row has a blue background to differentiate from the pointer.

Instead of navigating to a cell and hitting an edit command, you navigate to the row and hit one of 4 edit commands that correspond to the cell, or field, that you want to edit. There are 3 extra edit commands to remember (hopefully eased by tying them to the first letter of the field name – cmd + p for editing payee) but there are only n rows to navigate instead of n * 4 cells.

I wouldn’t suggest that Excel take this route because the promise of Excel is flexibility. You can assign any meaning you want to the rows and columns.

Here’s the keyboard command list for Moneyhawk:

Command	Action
arrow keys	move pointer up/down a row
Spacebar	select a transaction, select multiple transactions, deselect a tranasction
CMD + a	select all transactions
Escape	deselect all transactions
CMD + p	edit payee of selected transaction(s)
CMD + t	edit tag(s) of selected transaction(s)
CMD + k	edit category(ies) of selected transaction(s)
CMD + n	edit notes of selected transaction(s)
CMD + c	copy selected transactions

Note: The spacebar handles most of the selection and deselection actions based on where the pointer points. The keyboard command for selecting or deselecting a transaction is actually a combination of these two actions: toggle selection.

My partner and I felt strongly about including keyboard commands so we actually built them first, before adding the mouse functionality. I recommend building the keyboard commands out first because it’s easier to map mouse actions to keyboard actions than vice versa.

Another example of a keyboard interface

I want to give a shout out to Gmail which served as an example for me in my design work. You may not know this, but you can navigate pretty quickly through Gmail with keyboard commands. The pointer in this system is a little blue bar on the left edge of the email bar.

Admit it, you still email yourself sometimes.

Sometimes it disappears but that’s a story for another post. Let me know if you have a guess or a certainty why that blue pointer disappears.

Do you have any favorite keyboard-based interfaces? Please share!

In conclusion…

Hopefully, you’ve found some useful tidbits in here for the next time you work on a keyboard interface or an interactive table.

Thanks for reading. If you think this is worth sharing, I’d be grateful if you would. Cheers!

Living in Melbourne

2017-10-11T00:00:00Z

Living in Melbourne

At the beginning of October, my partner and I began an extended stay in Australia. We’ll be in Melbourne for the next bit.

So far, I can say that I love how Australians shorten nouns into diminutives. Especially when I see it in formal contexts.

The Australian Post career opportunities list "Postie" as an admirably gender neutral version of "postal delivery worker".

A Small Flickering Fireplace

2017-10-09T00:00:00Z

A Small Flickering Fireplace

Moneyhawk App: Organize your money without trusting the cloud

2017-10-06T00:00:00Z

Moneyhawk App:
Organize Your Money Without Trusting The Cloud

Update

December 21, 2025

This project has been retired.

I still use it myself but it's not under development or publicly available.

cloudless, your data is stored on your computer
drag ‘n drop file import
view totals for categories
create tags, categories, and notes
rename transaction payee
fast search
date and account filtering
keyboard commands

This post covers the thinking behind a couple of our key features: data safety, spending categories, and performance. To create these features, we’ve made some unconventional trade-offs such as eschewing auto-download bank sync, mobile or web apps, and budgets.

Tracking instead of budgets

In Moneyhawk, we’ve built out the tools to categorize transactions for tracking but we haven’t added a way to create a budget. Should a budget number persist for each future month? Should a budget be for calendar months or any time period you choose? For example, I want people to be able to change the payee on a dozen bank transactions from “SQ 34COF#222” to something more readable like, “34th St Coffee”.

Are budgets as accurate as they promise to be? Do you always end up with the final balance at the end of the month that you expected from following your budget? What happens when reimbursements are delayed for months? When bills are divided amongst housemates?

There are other great tools out there for budgeting (YNAB, for example), so we’re satisfied with tracking spending for now.

Data safety and privacy

It feels like every day another large company is hacked and our sensitive data is compromised. But there aren’t many options on the market that protect our data. Many promise high levels of encryption on servers and clients and pieces of the puzzle we’ve never heard of before.

We chose a simpler solution - we don’t transfer or store your data. You have full control.

Having full control over your data with Moneyhawk means that:

you never have to trust us with your bank passwords
you store your bank data locally on your computer, not in a cloud server that could be hacked

The tradeoff with our approach is that you need to download your data from your bank and import it into Moneyhawk, unlike the many automated services out there today. We feel data security is worth the effort.

Performance

Our goal is to make Moneyhawk fast and reliable. A tool you can grow comfortable using.

One aspect of being fast is being responsive. Check out the search. It matches your keystrokes immediately.

Another aspect of being fast is having keyboard commands. Muscle memory wins out over mousing around. Here’s a few of the commands:

Tab to navigate between search and the transaction list
CMD + p to edit payee
CMD + t to edit tags
CMD + k to edit categories (didn’t want to get in the way of CMD + c for copy)
CMD + n to edit notes
Enter to save
Shift + Enter to save & edit the next transaction for the same field

Reliability means that Moneyhawk won’t spaz out and lose the data you just entered.

A side benefit of our security approach is that we don’t have to worry about the difficulties of syncing between your bank, our cloud server, and the local app on your computer. Large companies with armies of developers are still working on making the syncing experience seamless.

You might’ve guessed we’re fans of old-school desktop software.

What’s next?

We have a few things in progress.

Totals can be confusing. Right now, we sum debits, credits, and all transactions. There are two problems to solve:

transfers give the appearance of higher spending and income - did you really “spend” $100 if you just moved it between accounts?
an overall total could match the sum of your bank balances but only if you’ve imported your full transaction history (because some banks may not keep the full history, we may need to introduce an “initial balance”)

Date filtering for custom time frames.

Better design documentation. This one’s a behind-the-scenes feature. You might never see it but it will help us build a better Moneyhawk. For example, we’re building a nice state chart for our subscription page so we can make sure the app moves smoothly between states (new, pending, subscribed, cancelled) and won’t get stuck in an undefined black hole.

~~You can download the app for free at moneyhawkapp.com.~~ (We’ve stopped hosting the website.)

To clear skies,

Nicki

Sitting Stools - Part 2

2017-08-11T00:00:00Z

Sitting Stools
Part 2

The July sitting stool project has wrapped up. I made a cement-top stool and three A-frame stools from Ikea bed slats. To top it off, we had a little party with friends, some of whom showed off their own sitting stools they’d made for the occasion.

Professionals made the ones on the far left, unfortunately they're hard to see in this photo. The furry one was easily most comfortable and personifiable.

In the photo, the second stool from the right is the cement-top design I learned from this awesome how-to video from HomeMade Modern. I tried three times to build a cement stool. Only one survived.

The tricky thing about cement is landing the mixture and how we humans try to describe consistency. I read that the cement should feel like cookie dough when you try to stir it. But cookies don’t have rock aggregate in them so…. My partner recommended peanut butter consistency. That seemed to work for me but at the party we discovered that we all disagreed on whether that meant chunky or smooth peanut butter. What I do know is that if you have too much water, the extra evaporation of that water can cause cracks, which is what I think did in my other two stool attempts.

This is attempt #1. If you look closely, you can see three cracks. Luckily the dowels came out so I was able to reuse them.

The whole thing was a big success. I was really thrilled with my fine friends who all brought really amazing sitting stools.

Smash Banana - Part 2

2017-07-19T00:00:00Z

Smash Banana
Part 2

The game is going great. The obstacles are bananas that are flung off screen and the car is looking like my car. There are points! The game starts and stops!

The car is now a proper maroon Volvo 240 station wagon and the obstacles are bananas!

You can play it here.

The bananas were a bit of a challenge. What is a fun thing to run a car over? I felt bad about running over cute things, cows, people, aliens. Other cars would require some advanced damage animation. Stretch goal. The bananas are actually a throwback to an old DOS game I used to play with my dad - you would give an angle and a speed for a king kong sized gorilla standing on a city scape to throw an exploding banana at another gorilla.

As I’ve been building, I’ve realized that there are probably many different ways to structure a game. Which functions are looping to provide continuous action? How do I bring in the input from the players and collisions? I’ve started restructuring my game but it’s about time I look at other games to see what advantages or disadvantages they have in their code structure.

Sitting Stools - Part One

2017-07-17T00:00:00Z

Sitting Stools
Part One

My partner is interested in woodworking but seemed to be delayed getting started so I challenged him to build four sitting stools over the month of July.

I choose the number four because:

You’ve got to make more than one of something to get good at making it.
A week per sitting stool seemed reasonable for planning and execution.
Sitting stools can be simple to build but the possibilities are great and they don’t need to be as structurally sound as a step stool.

The stools we saw in Vietnam really kicked off our interest. Little sidewalk restaurants use them to set out a dining area while open and stack them away after closing.

I’m making some sitting stools, too. My interest is stools that can be stacked easily and I found many great ideas on Pinterest. I was most impressed with a design that stacked horizontally instead of vertically.

AA Stools by Torafu Architects

I read about them a bit in this Dezeen article. The website for Torafu Architects is www.torafu.com. There is a nice story about how the architects designed this as a joint project with a community workshop established after the tsunami.

These seemed simple enough for me to make. My partner created some drawings for them, making up an angle for the legs.

These came pretty close! A bit of a mishap in the heights.

Before I go further, I want to say that TOOL LIBRARIES ARE AWESOME! We were able to borrow this great miter saw in the photo and it was so helpful.

Making thing is hard! The photo hides a lot:

gaps between the wood because I didn’t clamp them together while screwing in the screws
accidentally screwing in on the outside instead of the inside of the legs
an extra screw on the top to try and reduce wiggle

I took one apart and pretty much redid the whole thing. I made 3 of these so that knocked out most of the month’s requirement. ;)

Smash Banana - Part 1

2017-05-19T00:00:00Z

Smash Banana
Part 1

Following up on my experiment to code a moving road (as you would see it from a helicopter), I began building a driving game in Javascript. It will feature my Volvo once I get around to designing the graphics.

I switched from Processing to Javascript because HTML/CSS/JS are the real workhorses underneath the web and app tools that I design in my work and I wanted to better understand the limitations and possibilities of these languages.

The road moves. And I can move the car with left/right arrow. Woo!

Now I have obstacles appearing on the road. But I need them to look like they're sitting on the road, not falling down the screen.

The next big task was collision detection. To start, the road obstacles just disappear when they collide with the car (the white box).

It’s been a lot of fun. I have a long way to go. All of this is vanilla Javascript, that means no libraries. A library might already have something like collision detection where you give a function to objects and the function tells you if they are overlapping. I wanted to figure it out for myself. Did a little trigonometry – my favorite math in high school.

Next, I want the obstacles to bounce away from the car.

Make a Moving Road

2017-02-06T00:00:00Z

Make a Moving Road

This past week, one of my experiments has been to program a moving road. I’d love to make a driving game, a super basic 2D game where your car moves only left and right and the road appears to move under you. I set myself the task of making just the appearance of a moving road. I used Processing (a programming language) because it’s familiar; I spent a semester playing with in graduate school.

The white box is going to be my car. Right now it follows my mouse.

Basically, my road is a set of dashes that move down the screen each time a new frame is drawn. One dash was easy. Then I created a set of dashes to fill the screen but the set would just move down the screen, leaving it empty above the first dash. I was resetting the position of the set based on the the first dash reaching the bottom of the screen, so the rest were further below the screen edge. Now I have a set of dashes twice as tall as the screen so visually cycles. And I made it to fill whatever height screen you have. Extra credit. But this method isn’t efficient because I have twice as many dashes as I need. My next experiment could be to find a way to drop the dashes onto the screen individually, starting each one over as it reaches the bottom.

Launched: New site for UNOCHA's Financial Tracking Service

2017-01-23T00:00:00Z

Launched: New site for UNOCHA’s Financial Tracking Service

Congratulations! After over a year of hard work, the Financial Tracking Service team just launched their improved website for sharing data on humanitarian aid funding.

I’ve enjoyed working with these folks since August. My focus has been on the Data Search feature that makes it possible for the humanitarian community to download and make use of the data FTS collects.

Check out the site: https://fts.unocha.org/

Be Excited: Ici & Maintenant

2017-01-18T00:00:00Z

Be Excited: Ici & Maintenant

Excitement category: music videos

I don’t know about you but there are some music/dance videos that inspire such embarrassing feelings of happiness and love that I question my agnosticism. When I am feeling bummed, watching one of my favorite music videos will turn me around. And possibly waste an hour on YouTube.

Ici & Maintenant by Yelle on YouTube

My latest favorite is Yelle’s Ici & Maintenant (Here & Now) and it’s destined to stay at the top of my list for a long time. The video fulfills my basic criteria for a good video:

it tells a fun story,
it makes the most of mood in the music,
the dancing makes me want to dance, too, and
it doesn’t have characters who are depressed, cruel, or only sexual.

What takes this video to awesome-as-space level is that it is playful, inclusive art. The team that created this video took an odd idea, a relationship in which one person is always moving spastically, and they delved into the absurdity. Who are these people? Why is one always moving? Are they in a relationship? What kind of relationship?

As I watch, I go from being curious and amused to becoming attached to this endearing couple and the mystery of their lives. And at the end, I’m rewarded with a fun surprise - a final clue that extends the mystery. Did they switch places at midnight? What does that mean?

I don’t know French so perhaps understanding the lyrics might change my opinion. The Google translate version of the lyrics doesn’t seem unexpected or inappropriate so I’ll stick to my opinion: I absolutely love it and I’ll probably be happier and more creative if I watch it every morning.

Hope you like it, too!

Papel Picado

2016-07-20T00:00:00Z

Papel Picado

My friend, Sabrina, asked me to make a sign for her wedding. Something to put out in front of the house where the wedding would be hosted, to help people find the place. The wedding had a Mexican theme with bright paper flowers and paper cut flags (papel picado).

I spent a while looking at papel picado examples and came up with a design. I printed a black & white version of the design and gathered some plywood and hinges. I was able to get the plywood store to cut a sheet down into the right sizes to save myself a step (also I’m still learning how to cut straight with a skilsaw). I tried a few methods for transferring my design onto the wood and found the best method on the third try. I covered the plywood with masking tape and carved over the paper design through the tape. Then I could remove the tape from the areas I wanted to paint. This made painting super easy.

When it was dry, I pulled up the remaining tape and it left crisp lines. Let me tell you, pulling up the tape after painting was soooo satisfying. Assembling the sign was pretty simple after that.

Congratulations, friends!

PDX Webvisions Conference 2016: My favorite talks from bearded men

2016-06-07T00:00:00Z

PDX Webvisions Conference 2016: My favorite talks from bearded men

I don’t know how many bearded men spoke at Webvisions in Portland this year but I went specifically to see Aaron Draplin and Mike Monteiro. Both were epic and inspiring and qualify for the “watch again” category.

Aaron Draplin is the pride of the Portland design scene because he is a prolific, well-known designer of logos, posters, and the creator of much-beloved Field Notes. I admit I thought maybe Portland overhyped him because he’s a hometown hero - but no, he’s explicatively fantastic. He gave a standard here’s-how-I-became-a-designer talk but it was awesome because it came with so much happiness, authentic gratitude, and love for the world. This guy loves the doing the design he does and he told a touching story about how he was able to help a guy out a tough spot with a good logo. I think he’s such a happy guy because he is doing what he loves doing and doesn’t take it for granted.

I feel lucky that I feel the same way. I’m going to be able to look back on my career and how it impacted my life in the same way. I feel like a rockstar because I get to do UX design as a job. I’ve felt that way since I got my first job, barely knew nothing, barely paid much, but totally in love with UX.

Mike Monteiro is a master at giving talks. His talks aren’t just good talks, they’re next level. He hits you in the gut with meaning and spins a bunch of tops that wobble around in your brain for days. His talk this year addressed a problem I didn’t even know existed. There’s a huge demand for designers and there aren’t enough good designers prepared for it. Sounds like a good problem to have. Except that our lives are spent interacting with designed products and services and we suffer when they aren’t designed well.

Mike covered how schools and industry aren’t doing enough to educate new designers. I paid a lot of attention here because, as a UX manager, I wondered a lot about whether the lack of satisfactory design candidates was a problem we should be solving by better educating new hires. The solution, Mike encouraged, was to give back by taking on this education, either formally with hires or informally through mentoring. I especially liked that he modeled a community attitude by explaining that when his teammates are ready to move on that he helps them find their next job. Even though it’s a loss to have someone outgrow your team, you’ve made a contribution. I’m very thankful that I had a couple good mentors and managers in particular that helped me learn in leaps and bounds.

A cabinet is a portal to the future - when you're still building it

2016-05-15T00:00:00Z

A cabinet is a portal to the future - when you’re still building it

2 weeks ago, Kevin and I started working on building a cabinet. We wanted it to fit in a small space between the kitchen door and a heater. I’m working on making the most of the space I have and reducing the things I keep in it.

The cabinet is 2 feet wide and 6 feet tall. We made it from laminated strand lumber (LSL) studs (from Canada!). This is an odd choice because this means the walls of the cabinet are 1.75 inches thick, about an inch thicker than most cabinets. Why we chose them is a story for another day. They do look cool. The LSL is a bunch of lumber shredded and glued back together so it has a crazy pattern.

We went through some of the normal steps of cabinet-making, perhaps slowly and out of order. Drew it all out, cut it to size. Bought some medium-density fibreboard (MDF) for backing and plywood for the doors. We chose knock-down hardware (think Ikea-style) because it will be big (and heavy!) enough that we’ll probably want to take it apart to move it. Sanded the exterior and coated it with polyurethane twice.

The LSL didn’t look so great on the flat board side. We just liked the grain on the edges. To improve the look of it, we milled the visible side with a triangle pattern. The pattern cuts in up to .5 inches so the grain begins to show.

It’s harder to see the pattern after we sanded it. I kinda miss the drill marks.

Here it is. Stage 1 complete. The next stage is to start putting stuff on it and thinking about what needs to go in there. Then we’ll place the rest of the shelves in optimal levels. I’ll also do the doors.

Archery bag complete

2016-05-11T00:00:00Z

Archery bag complete

Update on Trying a New Medium: Sewing.

The bag is finished! I was lagging on sewing up the bottom.

I tried a different approach to sewing the bottom. I sewed in a straight line and then folded it flat. Then I sewed across the triangle corners that are created when it is flat.

Yeah, the tension was all out of whack. I’ll probably have to re-do the bottom soon.

The bottom ends up looking like this. Like a very wide “H”. This was much easier than the first way I tried. Below is my first try. I sewed darts in 4 corners and then across the middle. The bottom comes out with a shape like “>–<”. I think it looks a little nicer so maybe I’ll use it again on another project.

FAQs

What are those spots on the side?

I’m not sure, maybe oil stains from stickers. The fabric came like this and was super discounted.

What kind of fabric is this?

It’s urethane coated ripstop nylon. The awesome folks where I got it said that this is the material Arc’teryx uses on their bags. It does look like a match for a bag Arc’teryx used to sell but is not longer on their website. They describe the material as:

Used on Arc'teryx alpine climbing packs, the NC400r-AC² nylon 6 ripstop material is ultra light, but very strong and durable. Urethane coated on both sides, the fabric is waterproof and air-impermeable, and has a white coated interior for increased visibility inside the bag.

I can tell you it’s great because it has a grid in it. This made cutting straight lines easy. It’s super difficult for actually sewing because its coated surface makes it hard for the sewing machine foot to pull it through smoothly.

Update:

I’ve taken the bag to the range a few times and it’s holding up great!

Trying a new medium: Sewing

2016-04-25T00:00:00Z

Trying a new medium: Sewing

One of my goals for my time off was to try out sewing. I’d spent a lot of time investigating the perfect backpack a couple years ago and while in Japan in January, really admired a lot of the backpacks and men’s clutches that I saw. I decided to try it out. This was an easy decision because my SO was interested in the same thing and had already gotten a sewing machine set up in my apartment.

First Project

My first project was to tear apart a pencil case he’d made in an introductory case and sew it back together. It was a good way to get familiar with the sewing machine. Sewing straight lines, thinking about the order of operations, and doing the reverse stitch to end each section.

Second project: Archery bag

I’m on my second project now. An archery bag. Here are my requirements:

it stands up on a flat bottom
it has a way to hold the quiver upright
it has pockets for various items that often get tangled in my basic tote bag
I can carry it over a single shoulder like a tote bag.

It’s not a backpack or anything to be used in hunting. Just to hold my stuff on the ground while I shoot.

First attempt

I pulled a basic bag together that could hold a quiver and had a flat bottom. Making a flat bottom from a cylinder was the most difficult and most fun part of this project. I had looked at a few other bags and borrowed some ideas about how to create a flat bottom.

It wasn’t pretty, but it made a flat-bottomed bag! Then I started thinking about adding pockets and realized I was going to have a hard time trying to fit my sewing machine into a tote bag.

Second attempt

I really really love pockets. Gotta have ‘em. So I deconstructed my bag and cut fabric for pockets and started all over again. This is great because it means I can do a better job the second time around. More practice!

After 3 hours, I got the pockets in, handles, and made the bag’s cylinder shape.

Next time, I’ll work on the bottom again. I’m having a great time. So far I enjoy this a lot more than many of the other projects I’ve tried to do. I love the spatial problems of taking flat cloth and making 3D shapes. I also might enjoy it because I’m not worry about the details, or making sure this looks good. I’m happy to be prototyping.

Leaving Citizen

2016-03-28T00:00:00Z

Leaving Citizen

I left Citizen, Inc. a week ago. It was incredibly touching. I’ll miss everyone there. I decided that it was time for me to get out of my comfort zone. I want to learn how other people design digital products. And I want to know if I can find a work schedule where I have time for side projects, daily flexibility to stay healthy, and can travel frequently. It might not be possible. I’m not sure what form my ideal job would take. But I know I need to try to find out and the exploration makes me happy.

I’m going to take on some contract work. I’m taking interviews for full-time work and learning how to evaluate what a company has to offer. I might schedule a few weeks for strictly personal projects. TBD.

Heck Yes: XOXO 2015

2015-10-01T00:00:00Z

Heck Yes: XOXO 2015

Background

XOXO is a Portland festival & conference that has been held four times already. The event organizers (two Andys) curate a selection of talks, films, storytelling events, music, and game demos that represent the best content the web has to offer made by people who’s efforts make the world a better place. It is also a well-designed experience that ensures everyone is happy, intellectually alive, and excited to meet strangers. It is a microcosm of an ideal culture; a culture that it is positive and self-aware, and always working to improve.

Heck Yes

I go to XOXO because I can see real life examples of the kind of success I seek. I love that the people I see there are thoughtful and strong. Their projects offer more diverse content and help our culture become healthier.

My favorite parts are the talks and the video game arcade. I love the art and interaction in games. I design user interfaces so games represent the opportunity to design for enjoyment instead of task completion.

The talks blew me away because I identified with the many smart, articulate, and funny women who took the stage and shared their ideas of what it takes to make our lives better.

Nicki Vance: Writings

Sewing: Reversible Vest

Sewing: Reversible Vest

The Pattern

Colors

Edge Binding

Pockets

Closures

Language Note

Dutch Buddy: an iOS app for practicing my Dutch

Dutch Buddy: an iOS app for practicing my Dutch

Realtime ChatGPT

Multi-Language Issues

Turn Detection

Language Setting

Please Repeat

Smoothing Over Mistakes

Dutch Buddy

Model Exploration

Daily Speaking Feature

Did the app work?

CLI Backup Tools: Restic, Borg, Kopia

CLI Backup Tools: Restic, Borg, Kopia

My Use Cases

Testing backup tools

Restic

Borg

Kopia

Next Steps

Insect Houses as Building Decorations in Amsterdam

Insect Houses as Building Decorations in Amsterdam

2023 Summer Exhibition

2023 Summer Exhibition

What’s the Summer Exhibition?

By the Numbers

First Impressions

Architecture

Galleries

Wall Colors

How do the curators develop each gallery?

People Watching: An artist shares a moment with someone close

So Much Fun Stuff

Submit

More Links

Google Sign-In Integration

Google Sign-In Integration

The Setting

Architecture

Signup

Login

Information privacy measures

Integration

How it works

Next Time

PS: Dear Product Team

Resources

Leftovers: What's the difference between Clojure's rem(ainder) and mod(ulus) functions?

Leftovers: What’s the difference between Clojure’s rem(ainder) and mod(ulus) functions?

The first level answers

Integer division: what’s happening inside rem and mod

Use case: bucketing values

Use case: limiting a function range

Why do we divide things?

Negative remainders

Choosing a Solution

What about negative numbers?

Choosing a Solution Again

Why doesn’t this sound like what I was taught in school?

The difference between rem and mod in Clojure

A multipart mishap: adding plain text email support to Stop Slacking

A Multipart Mishap: Adding plain text email support to Stop Slacking

Step 0: Never ignore your error messages

Step 1: Recreate the error

Step 2: Diagnosing the problem

Step 3: Resolve the problem.

Playing with email clients

Product Design Footnote

Stop Slacking: integrating Slack into email

Stop Slacking: integrating Slack into email

Summary

Integer division: what’s happening inside `rem` and `mod`

The difference between `rem` and `mod` in Clojure

A Multipart Mishap:
Adding plain text email support to Stop Slacking

Stop Slacking:
integrating Slack into email

Floatin’ my boat with CSS animation:
Troubleshooting stutter caused by animating layout properties

The So Fresh 9000:
A washing machine interface built with state charts

Designing interactive tables:
keyboard navigation and selection

Moneyhawk App:
Organize Your Money Without Trusting The Cloud

Sitting Stools
Part 2

Smash Banana
Part 2