Mastodon’tcare

Imagine the scene. It’s late 2022 / early 2023 at a small web technology meetup, or perhaps a larger conference. Either way, the core of the event is people giving presentations about technology.

Roughly a third to half of the presentations involve some variation of the same phrase.

  • “I can be found on Twitter at <username> and Mastodon at <other username>.”
  • “I’m still on Twitter, but I think we’re all moving to Mastodon now, right?”
  • “My Mastodon handle is <blah>, and I still have an account on The Bird Site — assuming it’s still working.”

Questions abound among the discussions during breaks between talks. Who’s moved over to Mastodon? To which server? How are you finding it? Which client app should I use?

The scene has played out for me several times over the last few months. This blog post is my extended answer to the questions. My short answer, though, is something along the lines of “<deflated sigh>… I just can’t be bothered, really.”

Continue reading

Origami: Zoomisaurs

27 small, colourful origami dinosaur models arranged in a grid, seen from above

Zoom and gloom

During 2022, I unsurprisingly spent a lot of time working from home. Which, like most other people, meant a lot of time staring at Zoom video calls.

While I don’t (yet) need glasses, I’ve long struggled with glare-related headaches if I spend too long staring at a screen. This is fine when writing or coding, because I can continually take mini-breaks every few minutes and look around the room. This works especially well when writing text prose, because I can stare into the middle distance while touch-typing, without needing to look at the screen at all.

But video calls are a different matter. Even when I tried not to, I found I would keep looking at the screen as much as possible. Sometimes it would be to maintain the rough illusion of eye contact, sometimes just to focus on a someone else’s screen sharing. Either way, I was starting to get eye strain on days with many online meetings.

Eye contact (or the webcam facsimile of it) isn’t quite as important in team meetings when someone is sharing their screen. So I needed to find a way to force myself to take eye breaks during these regular meetings.

Part health, part challenge, part art project

One day I found the answer thanks to two items I already had lying around the house. One was a pack of 400 post-it sized (7.5cm-sided square) origami papers in various colours (thank you, Daiso). The other was John Montroll’s book Dinosaur Origami, which I’ve owned for many years. I had made some of the models in the book, but not all. Many of them were simple enough to be folded from small paper. But while the models start off easy, they do get progressively harder.

So a challenge was born. I would attempt to fold all 27 dinosaur origami models in the book using identically-sized small papers. But I would only fold them during Zoom calls. This wasn’t going to be a quick challenge — just a bit here, a bit there. Sometimes my full attention is needed in the calls. But at other times all I need to do is listen, which is the perfect time to fold. That way I let my eyes focus on other things, while still being present in conversations.

With a variety of colours to choose from, I realised I could also do them in a neat rainbow order. Therefore my health-prompted folding challenge also turned into a bit of an art project.

This doesn’t need to be a big long ramble, so here they are: The Zoomisaurs.

27 small, colourful origami dinosaur models arranged in a grid. In front of them are a small piece of paper and a pencil to indicate scale. The smallest model is a quarter of the pencil's length, and the largest is half the pencil's length.
Shown with a square of paper and a mechanical pencil, for size/scale reference
27 small, colourful origami dinosaur models arranged in a grid. In front of them are a small piece of paper and a pencil to indicate scale. The smallest model is a quarter of the pencil's length, and the largest is half the pencil's length.
A difference angle with scale reference
27 small, colourful origami dinosaur models arranged in two diagonal lines. Each line is arranged in order of the colours of the rainbow.
Rainbows!

27 dinosaur models, almost entirely folded during Zoom calls in 2022, from 7.5cm square paper. The final stegosaurus model required just a bit too much concentration and accuracy (and tweezers), so it had to be completed once I’d finished working for the day.

Close-up view of 8 small origami dinosaur models, with some others out of focus in the background
Close-up view of 6 small origami dinosaur models, with some others out of focus in the background
Close-up view of 10 small origami dinosaur models
Close-up view of 10 small origami dinosaur models
A small blue origami brachiosaurus model stands on top of the head of an orange cat. The cat is resting by a window and looks unamused.
Conquering new frontiers
A small dark blue origami stegosaurus model stands on top of the head of an orange cat. The cat's ears are taller than the model, which looks like it's grazing among the fur.
Traditional stegosaurus grazing location, nestled between a cat’s ears

Origami: JS Logo

A few years ago I wanted to try to design an origami version of the JS logo. This is the widely-used community logo for the JavaScript programming language. (There’s no “official” logo for the language, but that’s a whole other story that’s not relevant for this post.)

Original community JS logo

I did this not because it was particularly wanted by anyone, but simply as an interesting challenge—possibly one not attempted before. As documented elsewhere, I wasn’t experienced at designing origami models at that point. I broke it down into chunks, trying separate “J” and “S” designs. To keep things simple, I started with pixel-like shapes for the letters (90° angles only), then chucked in some 45° angles if I could get away with it.

After a fair bit of trying different techniques and refining folds, I ended up with the most efficient models I could think of. (“Efficient” in this case means using the smallest possible starting size of paper. Every bit of paper tucked away out of sight is effectively wasted; efficiency is minimising how much paper is wasted.)

But trying to combine the models together into a single “JS” design was beyond me. The differences in fold placements combined with the off-centre placement of the letters was too much. I knew I had to be missing some fundamental design technique that would unlock what I wanted to do. In the end I put it aside for a while… which became several years.

Continue reading

Origami: Platypus

In my previous post, I said:

Over a few years I’ve been building up a list of subjects I could attempt to design. This most recent lockdown is when I finally decided to bite the bullet and make a proper go of it.

Well, this is the first attempt at doing that. After deciding I wanted to primarily design Australian animals, the question was which one to start with. The title of this post not withstanding, the answer was… a box jellyfish.

I was intrigued by the combination of a small, cube-like body and incredibly long tendrils. (The tendrils of an Irukanji box jellyfish can be over 100 times longer than its bell.) I had an idea in my head of how to do it. But once I started trying it out, the limitations of paper thickness started to interfere with the shape I wanted to achieve.

In the end I got… some kind of jelly-like creature, but it wasn’t entirely what I was aiming for.

A poorly-folded origami model of a jellyfish

Realistically I knew that that approach was a bit of a dead-end, so I moved on to animal target number 2.

Actually a platypus this time

I love platypuses (or platypodes, but never platypi) as a distinctly Aussie creature. But I hadn’t seen any great representations of them in origami. This became my main focus. To avoid burying the lede any further, I ended up with something I’m really proud of.

A folded origami platypus model, viewed from the front
Paper: Shadow-fold copper/black from origami-shop.com
Continue reading

A little story about origami

Opens​ blog, blows off the dust, sweeps away the cobwebs.

Apparently I haven’t published a blog post in 2 years (something something pandemic). Time to see if these old writing muscles still work.

During 2020–21 I withdrew a lot from doing tech stuff. Online-only meetups were unenjoyable, and I stopped watching video recordings from conferences, stopped working on my own open source stuff, stopped writing blog posts. What little coding I did do was limited to simple scripts, or very occasional contributions to the MDN compat data project. (In fact, that was a topic of a different blog post that I never got around to finishing.)

With enforced working from home and spending all day staring at a screen of code in my room, I really didn’t want to spend more time doing the exact same thing at night.

What I did instead was throw myself back into the world of origami.

Continue reading

Mashed browsers and the IE-lephant — A Web Directions adventure

A few weeks ago I gave a talk at Web Directions Summit 2019 in Sydney. The talk was about the ECMA-402 Internationalisation APIs built in to browsers, because I don’t think enough people know about them. A fully written version of the talk is available on this site in the unsurprisingly-named Talks section: Intl we meet again.

There was a helluva lot of stress and preparation involved in trying to make a rather dry topic sound interesting for 20 minutes. In the end, the results were worth it, but I was reminded why it had been several years since I’d previously given a conference talk. It will likely be several years before I do another one entirely from scratch.

I got some good feedback about the talk, but there were two parts I was particularly pleased with. Even if the presentation had tanked, I’d still have been satisfied with the completion of two slides. Mainly because they gave me the excuse to muck around in design tools and pretend I’m a real designer.

These items were the mashed-up browser logos, and the “IE-lephant in the room”. I had enough people talk to me about the images after the talk that I’ve decided to pop them online for all to see. Both images are linked from this post in SVG form, under a Creative Commons Attribution 4.0 International license. That means you’re free to copy them, modify them, do whatever… but with an attribution credit too.

Some-in-one browser logo

Mashed up and combined logos of Chrome, Edge, Firefox, and Safari.

The idea of smooshing many web browser vendor logos into a single image was one I had years ago. This talk was finally the excuse I’d been looking for to actually do something about it. I’m perhaps far more pleased with the result than I should be.

I’ll refrain from calling it an all-in-one logo, as there are many more browsers available than just Chrome, Edge, Firefox and Safari. Important note: This isn’t intended to favour any one browser over the others. My intent was for this image to equally (but light-heartedly) offend the designers of each of the featured logos. 😉

It would also be hypocritical of me to request attribution without also giving some in return. So for completeness, here are the links to the original vector images that went into this (before a lot of cleaning, nudging, and mangling of the files in Illustrator):

Of course, as soon as I’d finished the mashup image and put it my presentation, 2 of the 4 logos became outdated. Firefox has just got an updated and simplified logo, while Edge’s logo has had a complete revamp for its move to a Chromium base. Oh well, I guess I’ll have to make a Version 2 at some point.

IE-lephant

Internet Explorer logo merged onto the body of an elephant.

In contrast to the well-planned logo mashup, this image was pretty much a spur-of-the-moment joke. Its only purpose was to be a punchline — “I’ve only talked about support for modern browsers; but what about the elephant in the room?”

I’m not really sure it has any reusable purpose beyond that joke, but I’m still rather pleased with the result, so I’m sharing it anyway.

The two source images that went into this are:

Enjoy!

Reduce your spread

A quick prelude: I wrote the first draft of this post a couple of months ago, but it still needed editing and polishing. Then Rich Snapp published The reduce ({…spread}) anti-pattern and made all the main points I was going to make.

Feeling rather deflated, I initially abandoned the draft. However, to force myself to complete things, I’m publishing it anyway. Although our primary argument is the same, we approach the topic from slightly different angles. I recommend reading Rich’s post too as it’s well-written, and he explains some things better than I do. But mine has a bonus grumpy rant at the end. Contrast and compare.


Object spread — a primer

The object spread syntax has become one of the more readily-adopted[citation needed] pieces of the ever-evolving ECMAScript specification. Over the past few years I’ve worked on several application codebases that have made use of it, and seen many more open source libraries using it.

First I should define what I mean by the object spread syntax. It’s best to explicitly set the terms of reference here, because different people might have different interpretations of it. Other people might have used the syntax but not known what it was called.

Object spread, at its simplest, is used for copying the keys and values of one object into a new object. It’s important to note that it does a shallow copy rather than a deep copy, but in many cases that’s all that’s required anyway. (For more details on shallow vs deep copies, see this Stack Overflow post.)

let sourceObject = { element: 'input', type: 'radio' };

let sourceCloned = { ...sourceObject };
// A new copy of the original: { element: 'input', type: 'radio' }

let extendedObject = { ...sourceObject, name: 'newthing', type: 'checkbox' };
// A modified copy: { element: 'input', name: 'newthing', type: 'checkbox' }

The problem

Object spread syntax is not a problem in and of itself. Quickly and easily copying an object’s data to another object is a very common use case. Indeed, the plethora of solutions that were created in the years beforehand show how much it was needed. Long gone are the days where some projects would include the entirety of jQuery just so they could use $.extend().

The problem arises when it becomes the only way to assign properties to an object in a codebase. Over the past few years I’ve noticed a trend of using object spread wherever possible, even if it isn’t the best tool for the job.

In the worst cases, it has caused exponential performance bottlenecks. Helping someone fix a slow-running script is what prompted me to write this post. Object spread syntax should be used with caution.
Continue reading

SydCSS Wheel of Talks

Last December the SydCSS meetup had its first game show-themed “Wheel of Talks” evening. Three presenters each had to deliver a talk of 5-10 minutes on a topic related to CSS. The catch was that they didn’t know what their topics were until the start of the evening, at which point they had 20-ish minutes to prepare. The talks were randomly selected from the eponymous on-screen Wheel of Talks, built in CSS and JS.

This is the story of how the event was planned, and how I built the wheel.

I can’t hide from my mind

The best ideas arrive when you’re meant to be thinking about something else. The late, great Terry Pratchett imagined them as “inspiration particles” that, like muons and neutrinos, sleet through space until they strike the brain of an unsuspecting creature. I just call them brain farts.

This particular idea struck one morning as I was getting ready for work. I imagined a 3D, poker machine-esque, CSS-powered spinning wheel. Specifically, I imagined two of them — one to randomly choose a presenter, one to randomly choose their topic. I knew SydCSS was looking for new ideas to mix up their evenings, and this would be the perfect fit. I called it “presentation roulette”.

I whipped up a basic prototype on the train ride in to work that morning to make sure the concept worked. I showed it to David (one of the SydCSS organisers) and explained the idea. The next day I got a message from Fiona (the other organiser) saying that she loved the plan. A day later she said that someone else was already on board to do one of the impromptu talks, and that I should do one too.

And thus, a monster was born.

Continue reading

My future in tech

The future’s not set. There is no fate but what we make for ourselves.

— Yes, I just opened a blog post with a quote from Terminator 2. I can’t quite believe it either.

I’ve been doing a lot of reflecting over the last few years about what I want to do for a living. Perhaps a bit too much. I’ve had all of these thoughts rattling around my head over the years, and I’ve babbled parts of them at various friends. Someone suggested that if I finally wrote everything down, it might help clarify what I want.

Frankly, I’m still none the wiser, but at least I now have something to link to if when I start to rant about it to someone else.

Written pieces such as this post are generally read in a linear fashion, with a narrative structure. But I can’t get this story to work like that — all the pieces are intertwined in a sort of feedback loop. Instead I’ll present separate threads of the tale, then try to weave them together.

Continue reading

New project: A Visual Studio Code extension for time zone data files

(A boring title, I know, but it’s stuffed full of juicy SEO keywords. Mmmmm.)

As mentioned in my previous project-related post

From now on, I’m going to attempt to write a proper explanation here for each side project I complete. Even if no-one else reads it, at least I’ve created some historical documentation for my future self.

As many people know by now, I’m a time zone nerd. I’ve given talks at conferences and meetups about problems and solutions when dealing with time zones. I sit on the time zone database mailing list and read about last-minute changes to a country’s time zone with a mixture of fascination, horror, and (mostly) amusement.

The IANA time zone database (also known as the “Olson database”) source files are incredibly rich with information. About two thirds of the lines in each file are comments about the data and its history. The project is part database, part history lesson, part social commentary.

A couple of years ago I wrote a Sublime Text package that added syntax highlighting specifically for the formatting of the time zone database files (available via Package Control). While it’s great to read the comments surrounding the data, sometimes you want the comments to be styled like comments and fade away a little, to let the lines of data stand out.
It seems to have been well-received, and Matt Johnson of Microsoft (a frequent contributor to the mailing list) suggested an improvement to the text formatting.

A few months ago, Matt contacted me asking if I was interested in porting the package over to an extension for Visual Studio Code (hereafter referred to as “VS Code”, because I’m lazy and it’s easier to type). I regularly use VS Code for coding, so I figured it was a good way for me to explore the extension ecosystem. I’ll describe how I converted it, and some of the mistakes and improvements I made along the way, in case it’s helpful for someone else.

If you want to cut to the chase and use the finished extension, it’s available as zoneinfo in the VS Code marketplace.

Continue reading