May 14, 2020
Since the start of the COVID-19 lockdown in Australia, my GitHub contributions have gone from 6 months of grey nothingness to a forest of green, perhaps I’m using it as a coping mechanism? Here’s what I’ve been working on:
Since my gym closed down, I decided to start making a clone of the app it had been using for posting Workouts of the Day and logging results, to keep learning more Flutter and to try Cloud Firestore for the first time – I developed it entirely on Android but this is me trying it on the iPhone Emulator for the first time:
I’ve learnt so much from doing this, including implementing a signup/login flow with Firebase Auth, using Firebase Cloud Storage to store images from users, how to get fancy with custom screen transitions in Flutter, and how to implement, uh… that thing where a sticky UI element slides in/out as an overlay when you scroll down and up again – does that have a specific name?
Merging an epic Pull Request from a user of the Flutter VLC Remote app I started making for myself a while back also got me back into developing it, and I’ve since been adding as many features and as much polish as I can for the sake of learning. Here’s a demo of a recent version in action:
I’m currently in the middle of redesigning its controls, having just figured out how to implement a nice full-width slider which acts as a floating divider between the playlist and controls.
I’ve also started breaking out some of the individual Flutter UI things I’ve learnt into a Flutter UI Bits and Pieces Codepen collection, using title names containing phrases I failed to find help with when searching for these things myself.
It now has support for using the new automatic runtime in Babel’s React transform with the experimental build of Reactit depends on, and the latest, offical React hot reloading implementation, which has come on leaps and bounds since I was away.
Here’s a recent demo of one of the main features I keep it around for:
I accidentally took a head-first dive into TypeScript type definitions and back into writing Babel AST transforms – a particular phrase (“host elements”) in a tweet about not being able to use HTML attributes in React gave me an idea for a new major version of babel-plugin-react-html-attrs, a Babel plugin I had written to do basic
htmlFor transforms on JSX attribute names.
It now lets you use all HTML attributes on host elements in JSX, and I ended up spending too much of a weekend forking the React type definitions off the back of it, to add support for using all numeric and boolean HTML attributes and transforming them to the form React expects.
At the start of April, Twitter broke Tweak New Twitter – my extension for making it halfway tolerable, so I went back to maintaining that, making it capable of stripping even more crap out of your timeline and making the separated Retweets timeline it adds to Twitter more robust.
I also dove much deeper into Gatsby than my previous experience with it getting this blog set up by tweaking a template, as my wife needed to set up a marketing website quickly for a new business being spun out at her work.
I’ve ended up with a setup which is easily reusable for the next site, easy to edit for non-technical users, and is zero cost for a really decent amount of functionality (mostly thanks to Netlify).
The setup for hooking Netlify CMS up with Gatsby is a bit mind-bending at first, but using frontmatter in Markdown for content for as many sections as you want to be editable in the CMS, then pulling them out with GraphQL and feeding them into a page template (a template which you also hook into the CMS for live previews!) is a really neat solution.
While I was in Gatsby-land, I noticed the plugin I created to help implement dark mode was suffering from the classic incorrect initial render issue everyone who tries to implement it eventually bumps into, so I fixed that too and had some fun deciding what the new toggle on my own site would look like.
I even went back and resurrected my (OG) React Hacker News API client as there was a new feature I wanted to add to it: a new story list containing every item you’ve viewed the comment thread for, displayed in reverse-chronological order for ease of reading new comments on them.
* apologies to Stephen Colbert
A blog about programming, web dev and whatnot by Jonny Buchanan.