Introducing A Fine Start version 3
In my last post I mentioned that I was working on a rewrite of my *checks notes…* eight-year-old (!) browser extension. In fact, I called it the final rewrite.
Well, that rewrite is finished and A Fine Start is out on the Chrome, Firefox, and Edge stores (and at https://afinestart.me/bookmarks for everyone else).
I started this rewrite in December and worked my long Christmas holiday on it. Progress slowed down when I went back to work in January, but I finally got it out the door last week.
New features
A Fine Start’s biggest new feature is that it can now support anywhere from one to seven columns of text links. Previously, and ever since its inception, A Fine Start was one to three columns of text links. I finally got enough power users and people asking to make it worth expanding that number and making it flexible.
Another new feature is the introduction of themes. I’ve wanted to do this for a long time but never got around to it. The first version of A Fine Start had only a light theme, and then during the version 2 rewrite, I introduced a dark theme. It’s been that way for several years now. The handful of themes I’ve added are a start (a fine start?). But I wouldn’t mind creating a few more based on popular color schemes and maybe even open up the variables to the user to define their own theme.
I introduced a few smaller features as well. Groups are now directly editable, and in addition to renaming a group you can perform a one-off alphabetical sort. There’s a new setting that will let you open an entire group of bookmarks at once.
Fixes and improvements
I made the settings page nicer and made it its own page rather than bundling it along with the bookmarks view as a single page application. This makes it easier to link directly to the Settings page and its corresponding pages.
A big part of A Fine Start is being able to drag and drop bookmarks and entire groups to reconfigure the layout of your page. I wanted to make the drag and drop experience nicer, and I think I achieved that. It uses the same library (SortableJS) but I tweaked the settings and styles to make things look and feel smoother.
Premium for syncing
All the features that I’ve mentioned are part of the free extension. The premium subscription exists for people who would like to sync their bookmarks between different browsers and devices. That’s it. That’s all Premium does and probably all it ever will do. I’ve accepted that this project is never going to be a quit-your-job money maker, but I’m proud of it, and I use it every day as I have for the past eight years.
Premium is five dollars a month, and there’s an annual sub which has been pretty popular over the last year or two that I’ve had it. You get a whole third off when you pay annually. The syncing service is fast and it doesn’t require an extra password—just your email address.
Development notes
This is the part where I talk a little bit about the development of A Fine Start. I wanted to get rid of frontend dev complexity by eliminating build steps and using only the dependencies I needed, doing everything else with vanilla JavaScript, HTML, and CSS.
I don’t think I achieved less complexity. But I am happy to be off the aging build setup I was using. I wasn’t in a hurry to get sucked into another one, and I wanted to maintain the extension in the future with little hassle, no matter what was in vogue in JavaScript Land.
Funnily enough, A Fine Start began as a vanilla JavaScript app. Then, in version 2, I migrated it to Vue, and now I’ve migrated it back to vanilla again.
I do have one regret, which is that I moved the data storage functionality from local storage to IndexedDB. I was using Indexed DB in v2 for the restores feature, and I decided to move everything to IndexedDB because I thought it was a more robust data storage option with less likelihood to be removed by the browser automatically. I also wanted one API for storing data locally. This is why I created the DataStore package.
It was only after launching the update that I discovered that private browsing in Firefox prevents the extension from using IndexedDB. That kind of sucks but I do have one idea for a workaround but still wish I would have known that going in. My fault.
Otherwise, I’m pretty happy with the codebase. I was able to move away from Webpack, and though I’m not using any frontend build per se, I am using Eleventy (which I was already using to generate the website) to generate the code for every platform. That mostly involves copying certain files together into a target location. There are also a few tweaks to environmental variables depending on whether the target is a particular extension, any extension, or the web version.
So the build step still exists, but I’m much happier with this one because I believe the stewards of Eleventy care more about ensuring compatibility than many other npm packages. And even if they don’t, the work is mostly copying files and creating slight variations—I can come up with another option if I have to.
Roadmap
Don’t let the term “final rewrite” fool you. Part of the goal of it was to make it easier for me to add features later on. A Fine Start is as alive as ever.
As I mentioned one goal is to expand themes and give users the ability to create their own.
I’ve made more progress on accessibility in this version, and I want to improve it—partially by doing things under the hood to support keyboard and screen readers better, and with explicit accessibility settings that users can try to make A Fine Start work better for them.
In fact, I built a couple of accessibility settings into version 2 for my brother and me, but I didn’t make them publicly available because they were (in my opinion) too niche.[1] I’m happy to report those accessibility settings are now available to everyone,[2] and I have ideas for more to come.
For the syncing service—and this is more of a under-the-hood thing—I would like to migrate the database over to SQLite and simplify my backup process. There are no front-facing features to that, but I’d like to think removing backend complexity will extend the life of the syncing service and make it even less likely for anything to go wrong.
My brother and I have difficulty using scroll wheels and similar mechanisms, so we rely on a very old-school way of scrolling— clicking and dragging the scrollbar. That can get pretty annoying, though, because scrollbars are increasingly small targets. So, in A Fine Start, I built in a feature that lets you scroll the page by clicking and dragging the entire page, similar to how you would scroll on a touch device with your finger. My version of this is a poor facsimile of what the excellent browser extension ScrollAnywhere can do for every web page. ↩︎
I’m just now realizing that I held back a feature that other people could have potentially used because I thought no one would want it—even though I know two people who needed it, and I’m a person with a disability who understands that people have different needs. If that kind of blind spot can happen to me as a disabled developer, it can happen to anyone. ↩︎