Developer Journal, Three Days into Spring

This week, apart from hiding from coronavirus shenanigans and doing some work on a non-public project, I managed to get a few things in motion.

Open Oubliette

To make it easier for people to mess with the board game I released yesterday, Open Oubliette—especially with so many people still cooped up from social distancing—I’m looking into implementing the game for the web. So far, Boardgame.io seems like it might be the right technology to use, so I’m digging through tutorials and examples.

Expect to hear more about that, next week, unless something goes horribly wrong. And if you have any thoughts on better systems to do this, I’d certainly be interested in hearing them.

Miniboost

Progress on Miniboost continues and may be close to where I want it.

To recap what I discussed last week, I have been happily using Boost Note for my note-taking since at least 2017, but my aging laptop has been having increasing difficulty with Electron-based applications running for extended periods. If you’re not familiar, Electron is basically most of a Chromium web browser, minus the parts that make it a browser, leaving a shell that can run programs built like web pages. It’s a nice system, but carries a lot of overhead.

Since I obviously want my notes available at all times (otherwise I’ll forget what I wanted to jot down), I need a stopgap solution. So instead of Electron, Miniboost uses Proton Native, which lets me write a JavaScript program with a React-like approach that runs using the controls already used by the desktop. So, it’s much lighter weight.

I have had some experience with Proton Native in the past (Color Schemer) and ran into a few small problems, but this is a new and improved version of the library that…works as advertised.

Boostnote stores its “folders” as names in a JSON configuration file, with each note stored as a CSON file that refers to its folder (among other things) and stores the note text as Markdown.

Knowing that (and that transparency is a reason that I picked Boost Note in the first place), using the in-built React-style components, I’m able to create a drop-down menu of the categories, then use that information to fill another drop-down menu with the notes in that category on selection. Then, selecting a note, I can populate a text-editing field. Add some more wiring to update the notes, and I have a functioning program that I can use 99% of the time.

Where does the extra one percent of my time go?

• Boost Note displays the notes as both raw Markdown and as formatted text for easier reading. Miniboost exclusively shows the Markdown.
• It’s easy to search for notes and search for text within notes in Boost Note, whereas I’m on my own with Miniboost.
• Boost Note has different note types and can both store and show embedded images, which I’m not even going to consider implementing.

In other words, Boost Note is, by far, the better application and I’ll continue to use it for more sophisticated work. As something that lets me look through project notes and add quick updates, however, it’s more than sufficient for the moment, and I expect to get a lot of use out of less than five hundred lines of code. About the only thing I think is important that I haven’t figured out (and will ultimately need to file an issue) is word wrap in the text editor.

In case you decide to follow suit and write something with Proton Native—recommended, though not necessarily highly recommended, just yet, and maybe I’ll give it a full post, some day—it’s worth pointing out what I needed to learn the hard way to get data to propagate between components:

• Use callback functions to push information from child to parent.
• Use this.state to get the current component to re-render its children when the values change.
• Use this.props in the child components, so that they display with the current versions of values.

Generally speaking, in normal React programming, you can get away with never using this.props outside of populating the state. Or maybe I’m thinking of the state management libraries like Redux and Reflux.

Next

Hopefully, work will progress on implementing Open Oubliette. Beyond that, I’ll see where the week takes me…

---

Credits: The header image is Orchard in Spring (1881) by Alfred Sisley.