#tech
View Transitions Tech Demo
Really impressive demo. First, this is for single-page applications. Second, there is an API for multi-page applications. Check it out in Chrome Canary and look at the code. I discussed this with my team yesterday. The demo is built on Astro. All that is shipped to the browser is 301kB. Of that 291kB is images. Less than 5.5kB for the document, CSS, and JS. CSS is powering the transitions and only a bit of JS intercepts the navigation event, loads the fragment of HTML, injects it into the DOM, and adds the necessary classes to trigger the animations.
This is a truly impressive demonstration. With very minimal effort, one can use an SSG like Astro— which can run as an SSR too— and deliver a fully working application that requires no JavaScript but progressively enhances to dynamic page transitions with easy— something that is extremely difficult even for SPA libraries— and asynchronous page loading. Only 150 lines of JS are in this project— 150 lines that ship to the browser.
For an old curmudgeonly standards guy like myself, this gives me some hope that we can get back to the days of the largest assets we send to the browser are images instead of hundreds of kilobytes of JavaScript.
Source: Bramus
Social Media Makes You Hate Everyone
“I just posted something benign on social media and now have a ton of people saying I’m a genocidal monster!
If you’ve been accused of genocide for saying putting anchovies on pizza should be a crime or that boys cannot become girls, this video is for you. Laugh at the stupidity of it and recognize that everyone is collectively going through this stupidity, not just you.
On Poetry and the Rise of AI
There were eras in which the work of Christian poets was respected and even lauded. But that was then and this is now. While we still value poetry in the form of songs, most of us pay scant attention to reading or writing poetry. There could be any number of explanations for this, though I am inclined to blame the decline of formal verse (i.e. defined forms of poetry) and the rise of free verse (i.e. neglecting rhyme and meter), much of which is enough to cause the best of us to give up on poetry altogether.
Tim Challies, Poetry of Redemption
I have been trying to will myself back into poetry. I used to consume a lot of poetry. Pretty sure I lost it in my tumultuous twenties. The quote above started my Sunday with lament and awareness that it wasn’t just me seeing poetry’s decline.
And then I read this morning that the rising AIs cannot write poetry. Or do basic arithmatic, which is unsurprisingly interlinked with poetry.
So I decided to try a nonce form and asked ChatGPT to produce a poem with a particular number of stanzas and a set number of stanzas per line. Over and over, it would write a few stanzas with the correct number of lines and then veer off towards the end and produce a much longer stanza. Like it lost count.
The danged robot couldn’t count.
AK Krajewska, Robot without rhyme or rhythm
Some very interesting points follow in the article— which you really should read.
Ted Chiang explained that when large language models (LLMs) are trained, they don’t actually assimilate the underlying principles. Instead, they produce the statistically likely next thing.
These LLMs does actually understand, as they cannot. Well, they can understand, but not truly. Because English doesn’t give us multiple words for understand. In Christian circles, we oft separate head and heart knowledge. These AIs have head knowledge but no heart.
More than that, formal verse is an exercise in applying principles you’ve understood. ChatGPT could produce a statistically likely definition of a sestina based on all the examples of sestina definitions it had come across in its training. To produce a sestina, it would have to have assimilated the principles.
[…]
There’s one more reason why LLMs can’t write formal verse, and this one is a little more obvious, though still, I think, worth mentioning. LLMs are trained exclusively on written text. They do not have the sound of words in their training, as far as I know.
[…]
Formal verse with meter and rhyme relies on the sound of the words. While you can guess what words are statistically likely to rhyme based on their spelling, it’s only saying them out loud that lets you know if you’ve succeeded.
Our language is far more complex than letters combined. Pronunciation is key to writing poetry. Manipulation of pronunciation too.
I wonder what other effects LLMs will have on literature. Might formal verse in English, which has fallen out of favor since the early 20th century, make a comeback as a prestige form, edging out free verse?
And there was the full circle to Tim Challies. Tim noted that the last hundred years have seen a dearth of poetry. But now it may be what separates us from the AI.
Finally, I wonder if, given that LLMs can produce polished but contentless prose corporate speak, will poetry make a comeback as the form for signaling sincerity? Could you imagine getting a notice of layoffs from your very humane VP in the form of sonnet? I’m not sure it would be a better world but it would be interesting.
Meta Enhancements
Working on SEO, Twitter Cards, and Open Graph enhancements for “Finley, I am.” this morning. Minor behind the scenes things that will make sharing better. Last night I added a similar articles section to article pages to help surface things you may also like.
While I’m getting back into blogging after a couple year dry spell, there are posts on here going back 7+ years.
I love how easy it was to implement this in Astro while not worrying about the impact on the UX, since it is all generated at build time.
Fewer Words
Fewer words and more intentional questions go a long way in conversations and debates.
In both, conversations and debates, your intent should be to understand one another.
In a conversation, you want to understand one another so that you are not in disagreement and you get closer.
In a debate, you want to understand one another so that you can find what you disagree on and lay a persuasive argument.
All too often I see online debates and conversations starting with assumptions and arguing from there. Often wordy, long-winded, hard-to-follow exaltations. Sometimes the assumptions are right, but usually, they are simply strawmen. An assumed position for your opponent.
The foundation of debate is the definition of terms. Without an agreed-on definition, one can— and often does— disagree semantically and think they are disagreeing on the topic.
So my recommendation: Use fewer words and ask more intentional questions. Understand one another first. You cannot disagree with what you don’t understand.
Selah Chords, Ads, and Europe
I removed the ads from Selah Chords. As I developed Selah Chords, I knew I needed to try something new with the purchase strategy. Where Web Tools is a pro app for iPad, Selah Chords is targeted at a crowd with many free— albeit not great— options. So I baked in ads and a “Remove Ads” in-app purchase.
And it bombed. In a month and a half of availability, I have made 75 cents on ads and had just 2% of users pay to remove ads.
Here’s the thing. You must annoy the shit out of your users to get them to see the value of removing ads. Think of any game you have played recently. You are mid-game and POPPPPP! A full-screen, full-volume, full-video ad. For 30 seconds you must wait to play again. And after the umpteenth time, you buy the in-app purchase to stop that shit.
That’s called a “dark pattern” in the UX world. And I hate it. So I just had a simple ad at the bottom of the app. And it didn’t annoy anyone. So why pay to remove it.
So I have removed the ads from Selah Chords.
GDPR
Don’t get me started on the small-government train here, but GDPR prevented me from launching in Europe. Why? Because the laws are unclear and very threatening for an indie shop. If I screw up even a little, I could be fined for potentially millions. So instead of trying and failing to follow a new law in Europe, I blocked Europe.
Europe
Selah Chords is now available for Europe! Because I removed ads. So now— as I have no server-side API use, no tracking, no privacy-invading anything— I don’t have to worry about GDPR.
Free, but an IAP
Selah Chords is still free to download and use, but beyond the launch features— the best, most easy to use chord finder, with guitar, ukulele, mandolin, banjo, and dulcimer support— you will need to pay to unlock the full app. Right now, that means Custom Tunings. Next up is additional chords. And other features are in the pipeline.
If you wish to support further development, please buy the IAP for $5. That’s a coffee.
Designing a Hand-Crafted App in 2018
Early this year I started playing with an app idea that became Selah Chords. I had a working prototype of the engine that would power it. I knew it could work. But what would differentiate it would be care for UI. Make it easy to do the things that needed to be easy. Instead of focusing on all the other tools that could be added— literally, the competition nearly includes the kitchen sink in their apps— I would focus on doing one thing really well.
A recently (at the time) published article from Michael Flarup had me encouraged to explore skeuomorphic design again, something I had been itching to do for years. To be honest, app design today is too bland. Most of us know that. It used to be full of texture and UI work, parts of the process that would take months. Each app had personality. Then iOS 7 happened. And all that work got thrown aside. Read that article.
I explored a number of paper, notebook, and other interface metaphors for Selah, trying to find a voice that could work. And in the end, I could not find a voice there. And the reason was because I wanted to rely on the screen, not the physical world’s physics.
I had one major interaction that needed to be nailed, in my opinion. Finding a chord. Seems easy, I know. But everyone makes the easy hard, for some reason.
Guitar Gravitas
This is a great app. I honestly use it quite a bit, as it supports chords that Selah Chords does not support. But finding a chord in Guitar Gravitas sucks. First, the root note selector is a slider. Second, the selected state is a dotted, 1px tall underline. This thing is horrible.
Then there is the scroll direction change in finding a chord. This app uses multiple panels that all scroll independently. This is not an iOS convention and instantly feels off. Mind you, on iPad, this is better because of the screen size.
The biggest reason that I use this app regularly, as opposed to others, is because of the chord charts. It shows me tons of voicings without the trouble that other apps make of that.
Guitar Tuna
One of the most popular guitar apps, as it is a tuner— a pretty good one— that also provides other tools. Personally, if you want a good tuner, get Fine Tuner, but that is a different topic. The chord library tool is what we are focusing on here. Once again, sliding lists for root and chord, but made worse by the scroll for voicing. Guitar Tuna only provides a handful of voicings— standard movable shapes, essentially. But to see them, you have to flick one-by-one through them.
I do not use this app much. Mostly because the interface is less than ideal.
Guitar Master
Another popular guitar app. Tuner? Check. Metronome? Check. Scales? Yup. And chords. That root note selector is better. All on one screen. No scrolling. But now to select a chord, you have to find it in a scrolling collection view— rows and columns— and expand it.
Wait, don’t tap— damn. It just played the chord. You wanted to see more voicings, didn’t you. Yeah, tap that small expand icon. And now, when the collection would have made since, you get this scrolling list of voicings and a guitar neck that takes up two-thirds of the screen.
Finding my Voice
As I looked to solve this one interaction, Jared Sinclair shipped ’Sodes. And boy. While not skeuomorphic, while super minimalist, it wasn’t boring. It wasn’t bland. Subtle gradients, sparse, well-thought our content layout design. The content was king, not the interface. But even without the interface being king, it didn’t get so far outta the way that you were confused. Buttons had borders. They looked like buttons.
So instead of making beautiful, meticulous textures, I started storyboarding animations. The first test of what I deemed gooey animation was built.
Instead of sharps getting their note name repeated, the sharp extended the preceding note button. The construction under the hood is fun, taking accessibility into consideration with an accessibilityLabel of the full name (“C#”).
And then the sliding selection. Clear selection state was important. At this point I was using Guitar Gravitas and that was my biggest grievance. Animating this allows for a fun, hand-crafted interaction, while not getting in your way. This is done by making the animation quick and informative.
The chord selector is brief. I didn’t need to support a hundred chords. Why? Because the most common chords can be summed down to a handful. I’m not looking to build the only chord finder you use, just your favorite.
Is Skeuomorphic Dead, Then?
I hope not. What I know is that it wasn’t right for Selah Chords. Which surprised me at first. I wanted it to be right. It might be for your app.
What’s Next?
Banjo support is coming. Selah Chords started with guitar, ukulele, mandolin, and dulcimer. I am adding banjo. Also copying or dragging voicings out of Selah Chords is coming. And favorite voicings. And who knows what else.
Get Selah Chords today. It’s free and will become an essential part of your musical toolkit.
Selah Chords, a beautiful new chord finder for iOS
Over the last year I have been learning both ukulele and mandolin, after 20 years of playing guitar. As I tweeted over the weekend, I bought a ukulele and looked for a chord app. I had a couple for guitar, but none of them supported ukulele. I found out pretty quickly that most of the apps suffered from similar issues. They were hard to use— bad UX/UI—, lacked iOS esthetic, and didn’t have the features I needed most where they needed to be.
Now so much of that is subjective. Yes. True. When I am looking for a chord voicing, I am looking for where I can play it. The most popular apps show a single voicing at a time.
Take this app from The Ukulele Teacher. Are there other voicings? I will guess that the 1/32 up top indicates that there are. But how do I get to them. Swipe right to left? Nope. Maybe that next arrow in the bottom right? Crap! Now it’s playing an audio clip of the voicing. Swipe up? There it is! But no scroll indicators, just a change of the fretted notes and the “1/32” changed to “2/32”.
Now I want to switch to a D minor. How do I do it? Tap the C major “title” up top? No. The music note at the bottom?
Not the easiest thing to use. And to be hidden away behind an ambiguous button when it is an action I am going to use the most? Not good.
Pulling Back
I have been playing guitar for 20 years and never learned basic music theory. I didn’t know how chords were formed, just where they were. Sure, I knew that they were multiple notes being played, but I never cared or concerned myself with which notes aside from my root was being played.
So I started there. How is a C major chord formed? Well, it’s based on the C major scale. I didn’t know my scales. Or how they were formed. Guess I would start there.
A scale starts with the root note and then takes a certain number of whole and half steps between notes back around. A major scale, for instance goes 1, 1, 0.5, 1, 1, 1, 0.5. That C major scale? C, D, E, F, G, A, B, C.
So back to that C major chord. How is that chord formed? A chord is formed on intervals of a scale. The major chord is using the I, III, and V intervals of major scale. Roman numerals for some reason. There is likely a wiki page for that explanation, if you are interested. So we start at I, which is our C, go to III, our E, and end on V, our G.
To the programmer reading this, you might have noticed that this is math. I certainly did. And math I can do. I love math.
So I Built an App
Looking through the App Store for an app that scratched my itch made me sad. As a UX/UI engineer, I decided that if this was just math, I could design a better looking/working app and build a chord finder that didn’t suck. But first I needed an engine. Take that math and turn it into an algorithm. An algorithm that I could hand a set of strings and tell it to find the C major voicings— different ways to play it across the neck of my ukulele.
This was, surprisingly, done on an iPad. I opened Swift Playgrounds and built the first prototype of the algo there. Even had it doing basic drawing of the chord chart.
The algo was straight-forward. Use the above math to find the notes of the requested chord, find all the notes on the set of strings given, then find all possible combinations of those notes on those strings. From there start narrowing it down to actual, playable chords.
It worked, so I started the design process.
Defining the App
What’s in and what’s out. So I had a powerful algorithm. I could give it 4 strings, and it’d find the voicings of a specific chord. I could give it 5 strings. Six strings. Seven. Ooo. I decided I wanted to support multiple instruments, obviously guitar and ukulele being the top of that list. But as I built the first working prototype app and had it running on my phone, I switched to mandolin strings and went to Guitar Center to play around. See how well it worked and if I could pick up another new instrument. And it was a success. One that went onto me buying a mandolin too.
The app was to stay simple. Prize simplicity, be willing to hold back functionality that other apps may have. No scales, no arpeggios, lots of noes.
So what was required?
A beautiful, clean interface. Easily scroll through a list of chord voicings. Big enough that you could read them comfortably, but small enough that you could see many at once.
A simple mechanic to switching between chords. That above ukulele app made it very difficult to switch chords. Others do as well. I wanted none of that. So my app would have two bars. Segmented controls. Easily switch between root notes and chords.
Multiple instruments/tunings and easy switching between them. This would be in a drop down. I wanted this to be quick to access, but you wouldn’t be switching instruments as often as you switched chords, so a drop down was logical.
Removing Features and Narrowing in on Version One
I wanted banjo support in version one. And the ability to mark a voicing as a favorite. And support for adding custom tunings. But shipping is more important. I shifted from feature building to spit-shine mode in October, realizing that I had a perfectly usable app.
I always remind myself of 37signals’s Rework book. Do I want a half-assed whole product or a kick-ass half product? I can ship a dozen features with bugs and no polish or ship a half-dozen features with delight and polish galore.
So I Spent My Year on an App
Like most programmers that decide to pick up a new hobby, instead of learning and mastering ukulele this year, I learned basic music theory, built, and launched an app.
Yeah.
Selah Chords has shipped. And the initial reviews are that it is beautiful, intuitive, easy-to-use, and extremely useful.
And coming soon, banjo and favorite voicings. And after that, custom tunings.
What’s a Computer?
Perfect. I spent most of my summer using my iPad Pro as my primary computer. I love the bewildered look on “professionals” when they see what I can do on it.