Personal Webpage of Blake Watson The personal webpage of Blake Watson Fri, 10 Jun 2022 03:30:48 +0000 en-US hourly 1 167038248 Homemade app project Fri, 10 Jun 2022 03:30:48 +0000 I’m working on a side project where I am trying out some new guiding principles:

  • It’s just for me. Don’t worry about making it scale or work for anyone else.
  • Use the most low-tech approach that is practical.
  • No build step.
  • Use only CSS named colors.
]]> 0 721
Character test Tue, 24 May 2022 19:19:00 +0000 In my experience, a good test to gauge someone’s character is whether they’re the kind of person who would “make a scene” in a restaurant. Legitimate complaints? Fine, but those should be rare—and discreet. If it’s a drama for the other patrons to watch… nope.

Just sayin’.

]]> 0 720
Thinking in rich text Wed, 09 Mar 2022 18:15:49 +0000 I’ve been using plain text notetaking applications for over a decade now. Before that I used Evernote, and before that I didn’t really keep any digital notes. 1 I have written previously about notetaking, but that writing doesn’t remain relevant today. Some part of me always felt a little hypocritical for having such sharp opinions about notetaking applications whilst most of the notes I do keep are stupid and unhelpful.

My real problem wasn’t a lack of a good application. My problem was not knowing how to make good use of notes. This is still my problem—I haven’t figured it out. But ever since I started using Craft last year I have made a discovery.

I think much better in rich text.

My rich text notes have been much more helpful to me in actually being productive. I was surprised by this finding. But now that I have been doing it for a little while, I’m starting to understand why.

First let me say that I’m a huge nerd and I love everything about plain text. I’m pretty much right there with all the hype—portable, future proof, elegant, interoperable—all of that good stuff.

But, plain text nerds, hear me out. Rich text is actually kind of… neat. You can organize your documents with nice headings, you can drop in media, you can make nice clickable hyperlinks (and they even hide away the ugly URLs!), you can highlight things and make block quotes and other types of visual callouts, you can add lists and even clickable checkboxes.

I’m finding out what every non-nerd computer user already knows—computers are powerful document creation tools. They offer a ton of formatting and design options and these features have been around for decades. If I push back my bias toward plain text for just a second, I can see that there is a lot of flexibility and power that I am missing out on by limiting myself to plain text.

Now I hear what you’re saying… “You can do all of this with plain text! It’s called Markdown! It’s amazing! And future proof, and portable, and interoperable, and—“ I hear you. I really do. I love Markdown. But it is not, and was never meant to be, a rich, what-you-see-is-what-you-get editing experience.

I’m defining rich text as any kind of what-you-see-is-what-you-get (WYSIWYG) editing experience and not strictly .rtf format. Craft fits squarely in that category, as does Evernote.

Lately I’ve been using notes in Craft to outline my thinking before starting a coding problem and to describe solutions, outline tasks, and collect relevant links to documentation. I know that you can do all this with Markdown, but WYSIWYG is so much nicer. Lets look at a few things that are nice about WYSIWYGs but kind of annoying with plain text and/or Markdown.

Reading and writing simultaneously

One of the benefits of a what-you-see-is-what-you-get editing experience is, well, just that. I can write my thoughts and mark them up visually as needed. And I can immediately read them as they are intended to appear. There’s no context switching involved. With many Markdown editors, the only way to write and immediately see it in a more reading-friendly format is to open up a preview pane.

These kind of previews make sense from a technical perspective. You are basically writing source code and live-previewing the compiled version of it. 2

But I’m not writing code. I’m writing my thoughts, plans, reference material. I don’t want to see the same document twice. I don’t have room on my monitor for that. I have come to enjoy the quick feedback loop of creating and consuming my notes simultaneously. Many apps try to make Markdown feel like rich text by doing some fancy parsing of your source code and doing some inline formatting. But that can be clunky and never feels quite right to me.

Speaking of source code, there are too many flavors of Markdown

There are quite a few implementations of Markdown floating around out there. I’m tired of never knowing exactly which version of Markdown I’m using. Every app seems to use a different one. Quick, how do you do italics in Markdown?

Visual elements are nice

It is easy to think you don’t really need any of these superfluous features. That’s certainly what I thought. Who needs highlighting? But I have found visual elements to be useful. Highlighting bits of information is something I did back when I still had the ability to handwrite. Same for calling out bits of text or sketching little images. WYSIWYG editors like Craft make adding these elements a primary feature. It’s easy, it’s smooth, and it looks nice.

Some Markdown apps to a pretty good job of adding inline visuals, I concede. But even then they are limited to the small subset of formatting options that Markdown (or more accurately, some Markdown variant) supports.

Giving rich text a try

As much as I love the philosophy and utility of plain text notes, it hasn’t really worked out for me in practice. I’m starting to think that my anxiety about using WYSIWYGs with proprietary formats is perhaps not totally justified.

For example, even though Craft uses its own format, the company has some pretty strong pro-privacy and pro-data-ownership positions. They have impressive export capability, which helps to prevent lock-in and future proof-ness. Knowing my track record, it’s possible (probable even) that I will switch notetaking apps on a whim in the future. But my point stands. Rich text is nice to work in.

  1. Before I started using digital notes in the mid to late 2000s, I wrote and doodled a lot in physical notebooks. When I was younger I had a bit of a problem collecting pens. If it wasn’t for the fact that I have spinal muscular atrophy, and that SMA is a progressive condition which has since deprived me of the ability to handwrite, I would still be keeping a physical notebook to this day. 
  2. I’m going to keep calling Markdown source code because that is what it is. It is meant to be ”compiled” into HTML. Some apps will attempt some formatting inline, but the only way to see what a document written in Markdown actually looks like is to render it in HTML and CSS. 
]]> 0 706
The powerful accessibility of the customizable web Wed, 29 Dec 2021 02:09:05 +0000 Scrolling is hard. I can’t quite use the scroll wheel on my mouse1 so my options for scrolling are either the keyboard (arrow keys or page up/down) or clicking and dragging the scroll bar.2 Dragging the scroll bar is a tedious way to scroll (but I’m glad it’s an option—app developers, please stop killing scroll bars in your apps). Try it for the next few minutes if you dare and you will see what I mean. This method of scrolling gets unwieldy if the page or app is using infinite scroll.3

But a few months ago my brother introduced me to a cool browser extension, ScrollAnywhere. This extension has a lot of options but I like to configure it where clicking and dragging a webpage scrolls similar to how mobile devices work—with inertia and everything. You can disable this behavior when clicking and dragging over text, which means you can still select text normally. Scrolling this way feels natural and is far less tedious than grabbing the scrollbar.

I wanted the same ability in my own browser extension, A Fine Start, which is an addon that replaces your browser’s new-tab page. But the way browser extensions are isolated from each other means that ScrollAnywhere can’t interact with A Fine Start’s new-tab page. So I ended up implementing my own, somewhat hacky, drag scroll functionality and added it as a secret setting.4

But this whole thing got me to thinking about how cool it is that users can so easily customize webpages and web apps. It’s something you can’t really do with native desktop and mobile apps. Native apps are only as customizable as the app developer allows. But webpages are rendered based on the wants of the developer and the user. Indeed part of the challenge of web design is designing with flexibility, knowing that you can’t guarantee the page will appear how you envision it. There are variables that change depending on the user and their device—screen size, text size, contrast, color, and more.

Imagine if your whole computer was as customizable as a webpage. Linux users have been shouting this for years. But still, you have to be fairly technologically proficient to customize your OS. And customizing individual apps is even more difficult—unless an app has a plugin architecture of some sort you would need to modify the source code and build your own executable. Customizing web pages via browser extensions is something the average person can do easily.

Web apps sometimes face (valid) criticism for being slower or clunkier than their native app counterparts, but a web app’s super power is the ability to customize it without needing any support from the app developer. That gives web app users some control that native app users don’t have. Let me give you an example.

I’ve trying to get back into RSS for the first time since Google killed its Reader app. I downloaded the venerable NetNewsWire, the native RSS reader for Mac. NetNewsWire is able to connect to Feedbin, which is a web app that you can use to store all your RSS subs in a central location (I have two Macs so this is helpful to me). But for the same reasons I mentioned previously, scrolling is a little cumbersome for me and that combined with some compatibility issues between NetNewsWire and the macOS Accessibility Keyboard meant that scrolling articles in NetNewsWire was tedious.

But Feedbin is an RSS reader in its own right—it doesn’t require a native client to access it. And because Feedbin is a web app, it’s customizable by browser extensions. That means I can use ScrollAnywhere just like on any other webpage.

My browser extension, A Fine Start, began as an accessibility tool of sorts that I created for myself to reduce the amount of typing needed to surf the web.5 As apps go, web browsers are among the most customizable I can think of.

Here are a few extensions I use that make the web more usable for me:

  • ScrollAnywhere, as I mentioned.
  • Stylus, an extension for adding users styles. I use this for my own custom CSS but it’s possible to browse/add public styles from others so knowing how to write CSS isn’t required. And if you’re really just wanting dark mode everywhere you could try something like the popular Dark Reader.
  • 1Password, a password manager that autofills login forms. You can substitute your favorite password manager here but the point is this saves me a ton of typing by logging me into websites.
  • Ad blockers. You know what, I’m calling these accessibility tools as well. It’s perhaps a stretch but on some sites with visually loud, distracting ads an ad blocker is almost necessary to read the content of the page. I use and recommend both uBlock Origin and DuckDuckGo Privacy Essentials.

I have a habit of conflating accessibility tools with productivity tools—⁠look no further than my assistive tech gear page—⁠but when you are as disabled as I am they are one and the same.

Accessibility is going to mean different things to different people. I’m not saying web apps are universally more accessible than native ones. Depending on the situation, native apps can be a lot more accessible. That said, the user-customizability of web apps (and websites) is a powerful boon to accessibility and can mean the difference between being able to use an app or not.

  1. I kind of can but it’s difficult so I only do it as a last resort. 
  2. Scrollbars usually have a behavior that allows you to click inside the scroll track to move up or down one viewport—essentially the same behavior as Page Up/Down. Something that annoys me about both of those is that they move exactly one whole viewport. That makes reading jarring because it’s easy to lose your place. I wish this was configurable at the OS level such that paging up or down would move half or 75% of a viewport instead of a whole one. Linux peeps can let me know if this is something I am missing out on by sticking with macOS. 🙂 
  3. In my opinion, infinite scroll is a dark pattern. One of its most popular uses is keeping users hooked in the dopamine slot machine of the social media news feed. Not to mention it makes getting at footer links nearly impossible. 
  4. The drag scroll feature is hidden because it was intended for only me and my brother. As such it’s experimental and doesn’t meet my standard of quality for being widely available (it’s also kind of random). But if you want to use it—at your own risk—you may find the secret settings by clicking the Settings button and then holding the mouse button down on the heading, Settings, for five seconds, after which the secret settings will appear. 
  5. Do people still use the phrase, surf the web
]]> 0 677
Introducing, a nostalgic musical odyssey Mon, 13 Dec 2021 04:39:11 +0000 I stumbled upon the synthwave genre1 when a friend of mine sent me a link to The Midnight’s America Online track on YouTube. I became a little obsessed with the synth-y nostalgia of it all and ended up diving into several artists’ discographies and bookmarking compilations I would find on YouTube.

In particular I enjoyed working to the sound of (mostly) instrumental synthwave mixes. I was making my own playlist of mixes at first but what I really wanted was “YouTube but it’s just synthwave mixes.” I started looking into it and it turns out YouTube’s Data API could support what I wanted.

The idea was to grab all the videos I had been finding and add them to a website that was more appropriate for music playback. That meant more advanced playback controls and behavior—ability to navigate track lists, now-playing notifications, and other features. I’m not gonna lie it was also fun to put a synthwave-y aesthetic on the whole thing—add some sweet fonts, throw in some pinks and purples.

I started searching for domain names—the obligatory first step of any new project—and settled on (I also nabbed and while I was there). Never mind I wasn’t planning on posting live music. Just notice how pristine the domains are!

I designed a quick logo and paid an illustrator on Fiverr to make a favicon. It was off to the races.

Oh yeah, that was in May 2020. Turns out I built it and quietly ran it for over a year before deciding to write about it. What can I say, I’m lazy and also I wanted to make sure I could keep it updated. Well, I did. So now I’m officially introducing

Screenshot of homepage showing a listing of video thumbnails in a grid.
The homepage


I had a few reservations about the project but nothing that ultimately deterred me from building it.

  • I didn’t love being totally reliant on the YouTube API but displaying YouTube videos was the whole point so it is what it is.
  • I feel a little guilty making something that’s just a conglomeration of stuff other people made. Technically these mixes are already curated collections of other folks’ work. Now I’m curating the curations. In an attempt to counteract this feeling, I have taken steps to link back to channels and their videos. I also show full video descriptions that aren’t collapsed, so it’s easy to see all the credits or click through to merch shops, Bandcamp pages, etc.

    And just to be clear, these videos are ordinary YouTube embeds. I’m not ripping videos and rehosting them or any such funny business.

Overview of features

Listing view

The homepage is a listing of all videos on the site sorted by date. You can also sort the list by views on YouTube. This keeps the homepage fresh.

Single video view/player

This is the bread and butter of the site and one of the main reasons for the project existing. It’s laid out similar to a single video page on YouTube with some key differences.

Screenshot of single view. Shows an embedded YouTube video with some metadata below.
Single view
  • Track parsing. If a track list is present in the video description, it gets parsed and enables some interesting features—the ability to skip tracks, ability to immediately play any track, OS notification of current track, and ability to link to the currently playing track, to name a handful.2
  • Mini player. This is a fixed section at the bottom of the page that has playback controls and information about the currently playing track (thanks to track parsing) including a progress bar.
  • Popout player. It’s similar to the mini player but opens in a small, separate window. Good for positioning on your desktop for quick access.
  • Autoplay. If this setting is enabled, a random mix will automatically start playing after the current one finishes. Optionally, it’ll autoplay only from your favorites. More on that in a moment.
  • Metadata. Title, full description, publish date, and links back to YouTube are all provided on this view.

User accounts and favorites

I wanted to bookmark my favorite mixes for easy reference later so I added user accounts. Once signed in, an Add to Favorites button appears on the player page. Clicking Favorites in the menu bar will take you to a listing view of all your favorite videos.

The only purpose of user accounts at the moment is for keeping track of Favorites. I don’t have any other immediate plans for accounts.


A basic search view exists that lets you perform searches against the full titles and descriptions of videos or titles only. The search is pretty basic but serviceable. It’s all frontend-powered so it first has to download an index file which is a bit large.3

Developer notes

Here I’ll cover some of the technical details of how the site works. The birds-eye view is this:

  • A script gets video data from YouTube.
  • That data is used to generate a static website.
  • The built site is deployed to the server.

YouTube Data API

As I mentioned previously, is made possible because of YouTube’s Data API. I’m keeping a manually curated list of channel IDs and playlist IDs. If the whole channel is nothing but synthwave mixes I grab all the videos from the channel. Otherwise I grab playlists that fit the theme of the site. I prefer using the whole channel if possible because people sometimes forget to update their playlists.

Using those IDs I run a NodeJS script that makes a series of requests to the API and the result is a big JSON file of video information. I do a bit of filtering after the fact. For example, I don’t want single-track videos on the site so I enforce a minimum duration of ten minutes.

Static site generation with Eleventy

This was my first project on which I used Eleventy and it’s definitely a tool I’d use again. Its most appealing feature in this case is its ability to use various data sources as input. My particular setup is a little complicated but, in short, I take the big JSON data dump and use it to generate all the different pages needed—paginated listing views, single views, and one-off pages like the one that lists every YouTube channel used on the site. I’m even using Eleventy to generate a small JSON file for each video (I call it a fragment) that I can request when I need information about a particular video.

All the pages get built by Eleventy and those, along with styles and scripts, get deployed to the server.

Vue for interactivity and Userbase for persistent user data

For frontend interaction I’m using Vue 2. I take advantage of Vue’s reactivity system to sync up various parts of the UI, primarily the moving parts on the single view like the mini player, but also on the search page and user authentication pages.

Since the app is all frontend I’m using a service called Userbase to handle authenticating users and storing and retrieving their favorites. It’s a neat service that was fairly straightforward to integrate and kept me from needing to implement a backend. It costs $89/year for the standard plan which is a great value for what you get.

I’m sure I could do a better job with the asynchronous nature of the whole thing but it works well enough for how I’m using it.

Track list parsing

Before making the site, I was listening to mixes directly on YouTube using an extension called YouTube Tracklist Control. I thought it was really cool how it parsed tracks using the description text (if the publisher provided timestamps). As the code for that extension is public domain, I was able to use the parsing code with a little modification to support all the track-based features on the site. There are times when either track lists aren’t provided or they’re provided in such a way that the parser doesn’t recognize. In those cases, the video still plays but playback information and controls are limited.

Screenshot of single view scrolled down past the video. Showing video title, published date, links back to YouTube, full text description, sidebar with interactive tracklist.
Single view details

Popout Player

I had never tried interacting with a new browser window before so it was a learning experience. I ended up using an event system to communicate state between the windows as needed. I wish it was possible to set a window to be a floating window (always on top of other windows) but I can see where that would be terrible for security.

Screenshot of the popout player. It’s a small window showing playback controls, the track title, the video title, the channel name, and a playback progress bar.
Popout player


That’s a silly term to use in this case but here’s my setup.

  • A locally run script talks to YouTube and dumps some JSON video data in the project.
  • I commit and push to a (private for now) repo on GitHub.
  • When I push, it triggers a deployment on DeployHQ.
  • DeployHQ builds the site and deploys the built files to my static server on NFSN.

I’m aware GitHub can deploy this for me now but I already have it set up this way. If you’re thinking it would be better to deploy to Netlify or some other fancy service I say to you… yeah you’re probably right. I’m a curmudgeon stuck in my ways. Get off my lawn.

Roadmap and closing thoughts

I’m mostly letting it hum along as-is, just running the update script every week to grab new videos and occasionally adding new content sources. That said, there are some features on my radar.

  • Actual livestreams. It’s kind of silly that a site with the .live TLD doesn’t have any livestreams. Would be cool to have a page featuring some. For example, ChillSynth FM.
  • Open-sourcing some or all of the code. One reason I put off writing this is because I had planned to publish the source code at some point. But I never got around to cleaning it up. It’s kind of messy and I haven’t felt like making it presentable. I may do it in the future, especially if there’s any expressed interest. It would be pretty cool for this same type of site to be made for other genres of music like lofi.
  • Other data sources. I don’t love being fully dependent on YouTube for content. Might be cool to look into SoundCloud or some other source. I must admit this is a very low priority given the amount of work it would require.
  • Tasteful advertising. This site was not created to make money. I mostly made it for myself to use and it doesn’t get a lot of traffic currently. That said, I could see selling a featured video spot on the homepage that I rotate out every week. Or something like that. I don’t know. I’ll reexamine this idea if and when the site has enough traffic to warrant it. But automated or tracker-infested ads will ever be on the site.

It was a fun project to build. I think it took me about three or four weekends for the initial build and then a little work here and there to fix things. The weekly maintenance is very easy. I run one script that gets the data from YouTube and builds a preview of the site for me to inspect. If I like what I see I can run another script to automatically commit and push it, which triggers the deployment.

I use the site as my own personal audio player almost every day, especially during working hours. If you like synthwave or just like to listen to instrumental background music, give it a try and let me know what you think.

Go to →

  1. When I say synthwave, I usually also mean chillwave, retrowave, outrun, darksynth, and other sub-genres. 
  2. I realize technically YouTube can do most (all?) of this but it isn’t as straightforward. On I’m leaning heavily on track list parsing so that it feels like you’re viewing a real list of individual tracks, not a video with timestamp links. 
]]> 0 608
12/03/2021 Fri, 03 Dec 2021 20:25:27 +0000 I try not to complain about apps too much because software is hard, etc, but Apple Music, the app, is so bad.

  • It’s clunker than Spotify, which is saying something because Spotify is an Electron app.
  • For years iTunes and then Music has been plagued with the whole randomly-skips-songs bug.
  • The UI is inconsistent to the point where it’s not always clear whether you’re searching your library or the AM catalog.
  • Various UI is horrible—just now the app took focus away from the search input three times whilst I was typing in it (wtf)

Guess it’s back to Spotify for me. It’s a damn shame because iTunes on Windows XP was my favorite app and the reason I eventually became a Mac user in 2006.

]]> 0 606
Publishing personal notes Mon, 20 Sep 2021 02:14:39 +0000 This might not be useful to anyone else but my SSH key on my web host, NearlyFreeSpeech.NET, recently quit working. I first noticed it when my deployments on DeployHQ were failing. Long story short, it seems that OpenSSH recently invalidated certain (weaker) RSA keys. I made a personal note about how to create a custom keypair and upload it to DeployHQ.

I wanted to share the note with someone so I published it. I haven’t shared this yet but I recently created a system for publishing my plain text notes to an 11ty site. I wrote the code in a very this-is-just-for-me manner (home-cooked you might say). Maybe eventually I will cleanup the code and release it. Plenty of apps have this note-publishing functionality but I like the idea of my notes being on my own website that I control.


]]> 0 599
07/08/2021 Thu, 08 Jul 2021 05:52:19 +0000 I’m thinking of doing GitHub Game Off again this year. Web game idea—an idle game where you control a money printer and the goal is to print more money in order to buy upgrades for your money printer.

Come to think of it, this game probably already exists (I mean other than the IRL “game”).

]]> 0 596
Bloomberg’s UI dumpster fire Sat, 26 Jun 2021 00:00:21 +0000 This UI is a hot mess:

Got hit with an annoying yellow alert screaming at me as well as an obnoxious subscription modal that has a lot of weird shit happening within.

For starters it’s extremely disruptive. The design is chaotic (evil). And what kind of pricing choice is this? I can choose $1.99 a month or, inexplicably, $290 a year. You have to click around and read the gray print to realize it’s a 3-month offer.

No way I’m paying for Bloomberg though because, among other reasons, The Big Hack.

]]> 0 592
06/14/2021 Mon, 14 Jun 2021 03:38:59 +0000 I started using Craft toward the end of last week when a coworker shared it with me. After playing with it over the weekend I am very quickly becoming a superfan.

  • As a designer I’m impressed with the beautiful, snappy UI.
  • As a developer I’m impressed with the control over data and ability to export to many formats.
  • As a user with a pretty severe mobility impairment, I appreciate the first-class support for working in a mouse-oriented manner or keyboard-oriented manner, depending on which is easier in the moment (referring to the Mac version).
]]> 0 588