Alvin Bryan

The Public Domain

Thu, 30 Jan 2025 00:00:00 GMT

import Grid from '../../../../components/Grid.astro'; import { Image } from 'astro:assets'; import eveningCool from './evening-cool.jpeg'; import snowyPath from './snowy-mountain-path.jpeg'; import hakone from './hakone-takahashi.jpeg'; import foxfires from './foxfires.jpg';

I envy the Japanese the extreme clarity that everything in their work has. It's never dull, and never appears to be done too hastily.
Vincent van Gogh, Letter to Theo, September 1888

What do Winnie the Pooh, Dr Jekyll, and Peter Pan have in common?

They're public, meaning there's no copyright with their characters. You can print and sell a Sherlock Holmes book. You can make a video game with Winnie The Pooh.

What's the public domain?

Some time after an artist passes away, all of their work becomes "public." That means losing the copyright. Their work becomes free for everyone to enjoy, reproduce, modify, or do anything with.

The terms "artist" and "work of art" apply in the broadest sense here. Anything that can be copyrighted like books, photographs, music, paintings, sculpture, etc will fall into the public domain, except trademarks. I tried to include various sources throughout the article to give you an idea.

This varies by countries, with the US and Canada having some of the longest copyright period.

Why should I care?

There's no reason a 1750 book should be the same price as a 2025 book, but that's happening. Publishers get away with it by creating new editions with "a new foreword by [insert trendy author]". But the original text is often the same. Often, even the illustrations are the same.

Let's take Alice in Wonderland, illustrated

If you wanted to read Alice in Wonderland, the illustrated version, and didn't know about the public domain, you might have gone to Amazon or a bookshop and bought it. It turns out you can get the same ebook for free online, with the same illustrations, completely legally.

But reading online is terrible?

More examples:

Do you have 3 Shakespeare books to buy? Get a used e-reader instead. For less than $30 you'll be able to read all the classics for free. Forever.
Want a Van Gogh poster in your house? Don't go to Amazon or Ikea, go to a local printer, download and print a high-resolution image. It will be cheaper and you'll support a local business.
Do you want to gift The Great Gatsby to someone you know has an e-reader? Buy another (copyrighted) book and write a link to the free ebook on a piece of paper. Now you're giving them two books.

And so on, you know where I'm going with this.

{/* Lettre à Mr d'assier Champollion? */}

{/* A thousand miles up the nile, Amelia */}

A whole new world

I can't overstate how gigantic the public domain is. There's art from every corner of the world, books from every era, from Shakespeare to Japanese art via Grimm's fairy tales.

What about music?

Music is a bit trickier. With digital music, there are always two parts: The composition, and the performance. Someone has to record the song for you to hear it. And that recording is often more recent, and copyrighted.

How do I know if something is public domain?

Disclaimer: I'm not a lawyer and this is not legal advice.

Generally, anything published before this year minus 96 is free. In 2025, that's 1929. As a rule of thumb, you should be safe with anything created before 1900. This varies by country so be careful.

Except trademarks, Coca-Cola was created in 1886 but their logo isn't public domain. Academic papers also seem to be in a legal grey area.

Every year, on January 1st (known as Public Domain Day!) Duke University's School of Law publishes a list of creations entering the public domain.

Dangers

Corporations want to maximise their profits out of artists, even long after their death. Copyright lasted 56 years until 1976, when it was extended to 75 years. In 1998, lobbies got an extension to 95 years. All works of art from the 1920s were basically frozen for 20 years.

Canada voted (in July 2022) to extend copyright, and that law should never have passed. Even Elon Musk agrees with this.

Current copyright law in general goes absurdly far beyond protecting the original creator Overzealous DMCA is a plague on humanity — Elon Musk

I think copyright should be based on revenue per derivative work. Meaning, if you've made $50 million from a book, that's it for the book. But just the book, you still own the rights to other derivatives.

Where to find Public Domain art

Ebooks, beautifully typeset on Standard Ebooks
Ebooks, lots of them on Project Gutenberg
News, ebooks and illustrations from the Public Domain Review
Sheet music from the International Music Score Library Project
All the national libraries and museum websites that you can think of
The Public Domain Image Archive

Thanks for reading, I hope you learned something new.

2024 in Review

Tue, 31 Dec 2024 00:00:00 GMT

I almost didn't write this. This was not a good year.

The vast majority of the things I tried failed miserably. I was the sickest I've ever been in June which lead me to cancel a major event. Plus many, many other similar things.

The Contentful layoff started a horrible series of dominoes that I'm still dealing with right now. Whoever makes hiring and layoff decisions will never know the real consequences of events like this.

As I said, even if the majority of the year didn't work out, (thankfully!) there were some positives:

I now have some wonderful new friends (🇮🇳 🇭🇺) that I hope will stay in my life for many years to come.
I'm extremely lucky to have found Unleash.
CityJS London was fun.
I had 5 days of absolute bliss in Oslo.
Something new and exciting is planned for January 2025, and I want to believe it's a sign of the tide turning.

To my old friends who have supported me, and keep supporting me, you know who you are. Thank you, I'm forever grateful.

If you want more details and/or want to help, DM me/email me.

White Hippo Cartoons

Sun, 13 Oct 2024 00:00:00 GMT

I love discovering things that I never heard about and turn out to be huge.

Have you ever seen these characters?

These are the Moomin. Behind these cute cartoons is a gigantic Scandi phenomenon.

What is it?

The Moomin are (originally) a series of illustrated children novels. They started out as individual comic strips in 1945.

The characters have silly names like Snorkmaiden, Moomintroll, Snufkin, Moominpapa, and such. Not gonna lie, I find those names weird.

It turns out that the moomin are a gigantic, worldwide success story.

How big is it?

It’s a huge franchise.

The characters were in a theatre play, and an opera. There's a store in London, there's even a freaking theme park in Finland, and another one in Japan. There's a dedicated museum in Tampere.

On top of all of that:

The books were translated into 55+ languages
The annual retail value of Moomin: 720+ million EUR
35+ Moomin shops and Moomin cafés exist globally, and expanding
The TV series (Moominvalley) was sold to over 60 countries

Source

How to read the books

The children novels are the most popular, but there are comic strips and young children’s picture books. I was primarily interested in the comics.

Comic strips

There are 2 ways to read the comic strips:

1. Large, black and white format.

The biggest comics are A4-sized books containing multiple stories.

Each story is roughly 20 to 25 pages. A single album is about the same length as a Franco-Belgian comic like Tintin/Gaston.

2. Individual, color comic strips

The strips are small and sold individually in full-color books.

The Moomin books

The books are not comic books, they’re regular children novels with illustrations. The Moomin books don’t have volume numbers so if you want to read the books in chronological order, here’s the list.

Ordered by original publication date:

The Moomins and the Great Flood (1945).
Comet in Moominland (1946).
Finn Family Moomintroll (1948).
Exploits of Moominpappa (1950).
Moominsummer Madness (1954).
Moominland Midwinter (1957).
Tales from Moominvalley (1962).
Moominpappa at Sea (1965).
Moominvalley in November (1971).

The Moomin Canon

When I first researched this, I saw “The Moomin Canon” mentioned in a few places on the Internet. The Moomin canon are the books that came out roughly between 1950 and 1970, in English.

The canon starts at book 2, Comet in Moominland and finishes at book 9, Mooninvalley in November. The first book is missing because it was only translated into English much later.

Tove Janssen

Moreso than the Moomins universe, I found found the life of the author fascinating.

☝️ Athenum Art Museum

Tove Janssen (/ˈtuːve ˈjɑːnson/) is Finnish but grew up speaking Swedish. Her father fought in the Finnish war of independence which ended in 1919. She started working as a cartoonist in 1930. She has been in a same-sex relationship since 1956, which was technically illegal until 1971.

She wrote the first Moomin book in 1945, during WW2.

I much prefer her art compared to the stories, so here’s a sample of her work:

She illustrated the Swedish versions of The Hobbit, and Alice in Wonderland.

There you go, maybe you learned something new today.

Cheers,
Alvin

What made you want to stop coding?

Tue, 02 Jul 2024 00:00:00 GMT

Oh, you're a developer advocate, what made you want to stop coding?

Someone first asked me this question at CascadiaJS 2022. I put an answer in my first 6 months recap, then it came up a few more times over the years. Now I think it shouldn't be buried in that article.

This is part of a perennial set of questions in the industry: How much do developers advocate code? How much coding you should know before becoming a Developer Advocate?

Anyway, this is my answer.

I definitely didn’t stop coding. I feel like I code more as a developer advocate than I did as a front-end/software engineer.

It’s not true in the absolute, because going to events and writing articles lowers my total output. But, I spend more time thinking about code.

One of my responsibilities is to create tutorials and code samples that help developers use a product. Because of that, I have to be aware of how people code. That means keeping up with the latest developments in frameworks, runtimes and new features coming to programming languages. (Sveltekit had a major breaking change while I was building a starter, for example.)

Maintaining code samples and starter kits is also my responsibility. It's a crucial part of a company's developer experience and it requires you to keep yourself up-to-date.

Gatsby to Astro

Sat, 24 Feb 2024 00:00:00 GMT

Hello,

This is a nerdy post, it’s about how my website works under the hood. Last year, I moved this website from Gatsby to everyone’s favourite HTML framework: Astro.

Why Astro

I get a SSG like gatsby, with no JS by default, and none of the React issues.

Leave the React ecosystem

I wanted to leave the React ecosystem. When I first wrote my Gatsby blog, React was unstoppable. It was a good decision at the time, because that knowledge of Gatsby and Next.js helped to get jobs.

As someone who likes making demos, I prefer to be as close to writing vanilla JS as possible. There are whole books dedicated to getting React to work with D3 or WebGL. I don’t have time for this on my website.

Import all the things

With Astro, I can keep all of my existing React components. I have a full-time job and I didn't want my rewrite to take 6 months.

With Astro, you can import everything. I've called it "the frameworks of all frameworks” for this reason. Right now, my interactive pages are built with Svelte, running alongside the exact same React components that I wrote for Gatsby 4 years ago.

Move to Remark

Gatsby and Astro both rely on a processor called Remark for markdown, I even made a custom plugin for it. But Gatsby relies on another gatsby-remark abstraction for its plugins. And a lot of these Gatsby-only plugins have gone stale.

I could have moved my Gatsby site to MDX, but which fixes this problem, I couldn’t get it to work. And the people behind MDX refuse to support HTML comments which means that I would have to migrate many of my existing articles. Again, I don’t have time for this.

Telemetry

More than 3 years ago, I called out Gatsby for sending telemetry data from your computer. I talked to the Astro team about this, and they listened. Astro shows it clearly and makes opting out very easy.

How I did it: Gatsby stuff

This a recap of everything, starting with things that are specific to Gatsby

Organise content with Markdown GraphQL request

My blog posts, book reviews and regular “markdown” pages were all organised via GraphQL requests, now I use astro.glob.

Replace `gatsby-remark` plugins

I used a Gatsby plugin called gatsby-remark-autolink-headers, which lets you automatically create clickable links to an html anchor on your headings, just like GitHub does on Markdown files.

{
  resolve: `gatsby-remark-autolink-headers`,
  options: {
    icon: `<svg aria-hidden="true" data-icon="anchor" width="24" height="27" viewBox="0 0 576 512"><path fill="currentColor" d="M12.971 352h32.394C67.172 454.735 181.944 512 288 512c106.229 0 220.853-57.38 242.635-160h32.394c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0l-67.029 67.029c-7.56 7.56-2.206 20.485 8.485 20.485h35.146c-20.29 54.317-84.963 86.588-144.117 94.015V256h52c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-52v-5.47c37.281-13.178 63.995-48.725 64-90.518C384.005 43.772 341.605.738 289.37.01 235.723-.739 192 42.525 192 96c0 41.798 26.716 77.35 64 90.53V192h-52c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h52v190.015c-58.936-7.399-123.82-39.679-144.117-94.015h35.146c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0L4.485 331.515C-3.074 339.074 2.28 352 12.971 352zM288 64c17.645 0 32 14.355 32 32s-14.355 32-32 32-32-14.355-32-32 14.355-32 32-32z"/></svg>`,
    className: `heading-anchor`,
  },
},

I solved it with:

rehype-slug (to automatically add id attributes to your headings)
rehype-autolink-headings (to create the links)
hast-util-from-html (to insert my custom icon).

rehypePlugins: [
  rehypeSlug,
  [
    rehypeAutolinkHeadings,
    {
      behavior: 'prepend',
      content: fromHtml(
        '<svg width="24" height="27" viewBox="0 0 576 512"><path fill="currentColor" d="M12.971 352h32.394C67.172 454.735 181.944 512 288 512c106.229 0 220.853-57.38 242.635-160h32.394c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0l-67.029 67.029c-7.56 7.56-2.206 20.485 8.485 20.485h35.146c-20.29 54.317-84.963 86.588-144.117 94.015V256h52c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-52v-5.47c37.281-13.178 63.995-48.725 64-90.518C384.005 43.772 341.605.738 289.37.01 235.723-.739 192 42.525 192 96c0 41.798 26.716 77.35 64 90.53V192h-52c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h52v190.015c-58.936-7.399-123.82-39.679-144.117-94.015h35.146c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0L4.485 331.515C-3.074 339.074 2.28 352 12.971 352zM288 64c17.645 0 32 14.355 32 32s-14.355 32-32 32-32-14.355-32-32 14.355-32 32-32z"/></svg>',
      ),
      properties: { ariaHidden: true, tabIndex: -1, className: 'heading-anchor' },
    },
  ],
],

Captions

The built-in gatsby-remark-images plugin let you add caption to your images using the title attribute in markdown, via the showCaptions: 'title' option.

Here's what an image with a caption would look like, in markdown:

![Alt text](./image-file.png 'this is the title attribute, which will be used as a caption')

Solution:
I solved this with the rehype-figure-title plugin.

Static directory

In Astro, the folder that is copied to the root of your live site for static files is the ./public/ folder. There are 2 problems with this:

In Gatsby it’s the ./static/ folder.
The public/ folder is actually where gatsby builds the files. So public was part of in my .gitignore .

Solution:
Astro lets you change its “public” directory with the publicDir option in astro.config.mjs

// in astro.config.mjs
{
  publicDir: './static',
  // rest of your config
}

How I did it: general React stuff

Astro wants React code inside .jsx and not .js files

This was the first thing I had to do. I actually recommend doing this before creating another branch for your refactor. I will try to do this in all my React projects moving because it’s more explicit.

I renamed all my .js react files to .jsx using the find command and the rename CLI.

find ./src/components/ -name "_.js" -type f -exec rename 's/.js$/.jsx/' -- {} \;
find ./src/templates/ -name "_.js" -type f -exec rename 's/.js$/.jsx/'  -- {} \;
find ./src/pages/ -name "*.js" -type f -exec rename 's/.js$/.jsx/' -- {} \;

Inline SVGs

I used inline svgs for my icons, which was powered by 'gatsby-plugin-react-svg’.

For my React components, I went from

const Icon = ({ url, title, icon }) => {
  const svg = React.cloneElement(icon, {
    role: 'img',
    'aria-hidden': 'true',
    width: '24',
    height: '24',
  });

   return (
     <a href={url} className="no-icon" title={title} rel={rel}>
      {icon}
     </a>
   );

// loading the icons as
import Feed from '../assets/icons/rss.inline.svg?raw'; // note the ?raw

const Icon = ({ url, title, icon }) => {
  const rel = url.includes('rss') ? 'me' : 'me nofollow';

  return (
    <a
      href={url}
      className="no-icon"
      title={title}
      rel={rel}
      dangerouslySetInnerHTML={{ __html: icon }}
    ></a>
  );
};

In Astro, all I had to do was this:

---
import mySvg from "../image.svg?raw";
---

<Fragment set:html={mySvg} />

React Helmet and programmatically updating `<head>` tags

This goes for Gatsby, Next.js, and everywhere else in the React ecosystem.

I solved it using named slots

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />

		<!-- 👇 -->
    <slot name="seo" />
  </head>
  <body>
    <div class={css.layout}>
      <Header />
      <main>
        <slot />
      </main>
      <Footer />
    </div>
  </body>
</html>

And in children component

<Layout>
  // 👇
  <Seo slot="seo" title="Welcome!" />
  <canvas id="regl-canvas"></canvas>
</Layout>

CSS modules

In Gatsby, CSS modules were turned into camel case, in Astro they are imported differently.

- <figure className={css.bookHeader}>
+ <figure class={css['book-header']}>

Dynamic HTML classes and loops

I went from

// SplitText.jsx

const SplitText = ({ text, className }) => {
  useEffect(() => {
    const elements = document.querySelectorAll(`.${className} span`);
  });

  const spans = text.split('').map((letter, i) => (
    <span aria-hidden="true" key={i}>
      {letter}
    </span>
  ));

  return (
    <h1 className={className} aria-label={text}>
      {spans}
    </h1>
  );
};

---
// SplitText.astro
const { text, className } = Astro.props;
---

<h1 class:list={[className, 'split']} aria-label={text}>
  {
    text.split('').map((letter, i) => {
      return <span aria-hidden="true">{letter}</span>;
    })
  }
</h1>

Link components

Both Gastby and Next.js use a <Link> component rather than the usual <a> tag. Astro and Svelte don’t.

- <Link to="/blog">Blog</Link>

* <a href="/blog">Blog</a>

How I did it: Other random stuff

Glslify

I use Glslify for all my 3D sketches. In the Gatsby site I used a babel plugin. I couldn’t find a Vite plugin but I found one for Rollup that works just as well.

import glslify from 'rollup-plugin-glslify';

Dates in frontmatter

Gatsby was lenient with my frontmatter data. Sometimes my dates were in quotes, sometimes not. Because of the type checks that Astro performs on Content Collections, my front matter data had to be consistent.

I ran a find-and-replace in VSCode, searching for this (with regular expressions enabled)

date: '(.*')

And replacing with

date: $1;

The not so glorious parts

Dark Mode Flash

I remembered having to fix this exact problem when I added it to my Gatsby site. I used the same logic in the Astro site and for some reason I was still getting flashes.

Luckily I found a blog post by Axel Larsson with a one-line fix for this specific problem. I then opened a PR to the Astro docs to fix it there too. (Sorry Axel, all that SEO traffic is gone now 😅)

RSS feed

I used the official @astrojs/rss package to replace the official RSS plugin in Gatsby.

What I liked: lets you specify what goes into your RSS feed, much more explicitly than Gatsby.

Disliked: It’s up to you to a find a way to create the HTML that goes into the RSS feed. They’re essentially asking for a full markdown → HTML pipeline, and it doesn’t let you use the existing Astro config. It’s a pain but in a way it forces your code to be DRY.

Conclusion

As usual with these things, it’s been more work than I thought it would be, and I couldn’t have done it without Erika helping me. But I’m happy that I’m now free from the React ecosystem, and I can update my components bit by bit.

Thanks for reading, I hope that was useful.

2023 in Review

Sun, 31 Dec 2023 00:00:00 GMT

Hello!

What a crazy year it's been. No matter how much happens, I always end the year with a bit of regret, a feeling that I could have done more. Not this year. I did a ton.

Lots of travelling

I did "revenge travel" just like everyone else. I was lucky that I could combine personal travel with work travel around conferences and other events. I visited places that I knew and loved, and discovered others that I want to return to again. The world is a wonderful place.

To put it concretely, I did the math for you (and me). So, in 2023, I did

✈️ 19 flights
😐 17 airports
🏙️ 11 cities
🌐 8 countries

I definitely don't plan to do as much in 2024, but I still have a list of destinations that I would love to cross. I can't make any plans right now, unfortunately, but this will be a special year to look back on.

Best of

I like doing these compilations. It's a genuinely useful practice to think about the content you consume in general, and it forces me to do it over an entire year.

🎥 TV/Cinema

The Mandalorian, Season 3. What an amazing show. I picked the second season for my best of the year in 2022, and the third is nearly flawless (apart from one weird episode that made no sense). The show keeps delivering, The Mandalorian has given us more Star Wars than Obi-Wan and Andor, combined. The last episodes always has me feeling something special, despite watching it multiple times.

🎙️ Songs

The Devil & I Got Up to Dance a Slow Dance — Charlie Wilson. This is from the soundtrack of the Billie Holiday movie, which I picked last year. I heard it again this year but I can't figure out where. Anyway, it's grandiose.

The Tango Never Lies — Frances Madden. I discovered this fantastic Australian artist in London. I walked by a venue where she was going to perform, unfortunately I wasn't there on the day, She's one of my best music discoveries this year.

Albums

Come From Away (Original Broadway Cast Recording). One of the AirBnbs I stayed at had an Apple TV and I discovered this musical. It's so good!

Lover (Live from Paris) by Taylor Swift. It's 2023 so we can't not talk abut Taylor Swift, right? This is a live album from 2020, I don't know what happened in Paris that night, but the performance is stunning.

Podcasts

Psychology in Seattle: How not get tricked by the Internet. This episode gives a great framework to detect bad stuff on the Internet, but it's a masterclass on critical thinking too. This will become more and more relevant as AI plays a bigger role in the fabric of the Internet. A must-listen.

Best Purchase

Laundry Sheets

18 months in DevRel

Tue, 14 Nov 2023 00:00:00 GMT

It’s now been 18 months since I started at Contentful. I enjoy writing these recaps, if anything it makes my performance reviews a lot easier. Before I started, I remember wondering what the day-to-day of developer advocates looked like, so hopefully this helps others in that situation.

Hit the stage again

On 🎃 Halloween day this year, I went up on stage for the first time since 2020. I spoke about creating your own maps, and had lots of fun. I did some live audience participation with Partykit, used d3.js to generate a video, and talked about projections. In other words, it was a very “me” talk.

I gave the talk at the Manchester Tech Festival, inside the beautiful building of the People’s Museum.

Community writing program

We wanted to increase the cadence of technical articles for the Contentful blog, so we started a community writing program.

I was in charge of the beta version of the program. We had a lot of things to iron out from a legal, financial and logistical perspective, namely:

Content ownership and rights waivers
How to pay people in a way that worked for us and was expedient
Create an submission process

I’m glad I did it, if anything I’m now an expert at spotting GPT-written content.

The network that I built over this year proved to be invaluable for this. I met Atila Fassina in React Norway, then reached out to him for the program, then he wrote an article about React server components that was a massive success.

Fun demos

For React Advanced London, I channelled my inner Matt Deslauriers and created a controlled generative art demo that the attendees built throughout the day when visiting our booth.

It was fun, and totally out of left field for a CMS company. We used this demo again for our booth at CityJS Berlin and people loved it.

Events

This year’s conference season started fading away in mid-June, and then restarted in earnest in September and October (I was at a 3 conferences in 4 days at one point).

EY + Netlify Hackathon
I attended a hackathon at EY’s offices in London, in partnership with Netlify and Contentful. We used Edge Functions to do A/B testing and made everything configurable in Contentful. It was great to meet my fellow internet citizens Matt and Phil.
Contentful Storylines
Harshil and I had a booth at the event in London, and I organised a meetup the day before. The meetup was small, but the talks were of highest quality, with speakers that normally come with a high fee. Special thanks to Akash, Taz, and Josh for coming along.
Uncodebar
As I mentioned before, starting the partnership with codebar was one of the best things I did this year. We continued to work together, and I participated in 2 of their 3 unconferences, in London and Barcelona.
React Advanced London
I ran a booth with Shane and Bhekani, we even had a brief appearance on stage to announce the winner of the giveaway.
Civo Navigate
I know nothing about DevOps, so Civo Navigate was particularly fascinating to me.
DevRelCon London
We took advantage of DevRelCon in London to bring myself, Harshil and Brittany together.

Our DevRel team worked with an agency on some new swag designed for developers. It was a success. We hardly ever had leftovers, and one of the attendees at React London told us "you guys have the best merch."

All in all, busy time, but very fun and varied. I spent way more time coding away, thinking, experimenting, while still doing plenty of event work.

A year as a Developer Advocate

Tue, 13 Jun 2023 00:00:00 GMT

In 525,600 minutes
how do you measure a year in the life?
— Jonathan Larson, Rent

As of May 2023, I have been a developer advocate for an entire year! 🥳🎉

I feel so lucky that I get to do this job. Some days I wish I'd done it earlier, but then I don't because I wouldn't have it any other way. I love working in this team so much.

Compared to my first 6 months, this period was more dominated by events. I enjoy the variety so far.

Events and sponsorship

Last year, the DevRel budget was part of the company's overall marketing budget. In 2023, the DevRel team had a dedicated budget solely under our control.

I ended up helping with planning, selection and curation of our dev events for 2023. I spent more time doing this than I anticipated, and it was fun to see another side of the business and talk to organisers.

Between the last update and my one year anniversary, these are the events that I took part in (more to come):

Codebar
- Contentful was the Gold Sponsor at this year’s codebar Festival in London. The keynote was included in the sponsorship but we decided to give it away.
- We helped codebar Paris find a recurring venue and covered food for their workshops with our friends from Algolia.
- Helping a non-profit and people getting into the industry is one of the most rewarding part of my job. I know it sounds cliché, but it's true.
WASM I/O
- I've always been more of a “generalist / hybrid” developer, so I wanted us to get into atypical communities for a headless CMS. Or, as Harshil puts it, "go where people don't know us."
- The sponsorship was last-minute (my fault) but it turned out really well. I definitely want to partner with this conference again.
CityJS
- Harshil, myself and a few other Contentful folks had a booth at CityJS London. We gave away a giant lego set, met loads of people, including some that I'm still in touch with to this day.
- You'll be seeing us at more CityJS Conferences. We'll be in Athens and Berlin. Come to see us!
Contentful Meetups
- As of my one-year anniversary, organisation is in full swing for our first Contentful meetup of the year. The event will be in Stockholm at Valtech’s beautiful courtyard.
- We’re planning another event in London which will coincide with the Contentful Storylines Tour. Come around!

I also attended a bunch of great developer events in the US and Canada.

Content

I produced a fair amount of content too, and I'm definitely finding my stride.

Podcasts
- I was a guest on 2 more podcasts, and one of the episodes I recorded back in December went live.
- I’m about to record 2 more episodes with my largest podcasts to date (Smashing Magazine!).
Blog Posts
- I helped review a bunch of articles for the Contentful blog.
- I'm currently writing a big article about Astro.

Outside of work, my first article for Smashing Magazine was published in December. It's an intro to command-line data manipulation and I'm super happy about it. It's niche and broad at the same time, and most importantly, evergreen.

12 days of Contentful

This was my personal initiative and I'm so happy I got the support to launch it. It was a fun experiment and pretty much looks like an MVP.

It gives us a good foundation for what to expect for Christmas 2023, if I'm allowed near the website again.

Less coding

At conferences, people often ask me why I decided to "stop coding" by doing DevRel. I was always surprised at that because I still write code, even if it's obviously less than regular developers.

That said, apart from releasing a new code project nearly every day in December, it's true that I didn't do a lot of coding during the last 6 months.

What I learned

I learned a lot more than I can think of right now, especially around DevRel as a discipline.

Great design makes great content

It feels obvious but I think great design really makes developer content shine. All the design details that go in everything that Vercel launches or the Astro CLI make a massive difference.

Booths are a skill

I had to do conference booths both as an sponsor and as an attendee, and it's definitely a specific skill.

Friendly conference questions

Wed, 05 Apr 2023 00:00:00 GMT

Nearly every time I attended a tech conference, either as a speaker or an attendee, questions felt a bit awkward. I once saw a solution that improves the experience for everyone. It would be great to see this replicated everywhere.

For the speaker

As a speaker, conference questions meant both fear and excitement.

On one hand, I’m always excited about questions. Questions mean the audience is interested, and help me see what I didn’t articulate clearly, what people understood.

On the other hand, there’s always a bit of stress. The feeling that there might be a guy in the audience who wants to use the Q&A to show off. What happens is, that person will ask a trick question only to demonstrate their superior knowledge to the crowd.

Now, not knowing all the answers is perfectly fine. Being a speaker only means your talk proposal was accepted, it doesn’t make you an expert. Still, it's not fun to get grilled in front of an entire amphitheatre.

For the audience

For attendees, questions often occurs in one of two ways. It can be either a staff member running around with a microphone to give to whoever was selected to ask a question. Or, in a more organised fashion, there’s a microphone on a stand and people queue to ask their questions.

This can be problematic for attendees too. Most people aren’t used to hearing their voice in a microphone, and the feeling of 200 eyes looking at you is intimidating. Consequently, some audience members don’t speak.

The solution: Breakout discussions + online async

The solution that I saw at a few conferences: breakout discussions.

Here’s how breakout discussions work (also called “discussion slots” or “discussion rooms”): After the talks, each speaker gets a corner of the room where people can ask their questions directly.

This space for discussion happens during the break, so no one misses out on the next talk.
For attendees, the questions are less intimidating without the pressure of 200 people hearing them. Subsequent conversations flowed more naturally, and so did follow-ups.
For speakers, the experience is like a one-to-one conversation rather than one-to-many. Less stress about getting things wrong, mishearing or misunderstanding the question.

These informal breakout discussions create a casual, down-to-earth atmosphere where everyone is relaxed. If you’re an organiser, I’d encourage you to try this.

For everyone else, have you seen other formats that make conference questions more friendly? If so, I’d be curious to hear it.

Thank you to Harshil and Brittany for reading drafts of this.

Privacy and security, quickly

Mon, 27 Feb 2023 00:00:00 GMT

A simple list of best practices for online privacy and security. Each item comes with an explanation and an immediate step you can take.

1 Password manager

The first, and most important: Use a password manager. Don’t use LastPass. A password manager creates a unique password for your online accounts and helps manage your logins. For each website that you reuse a password on, the possibility of that password getting leaked and stolen increases. Password managers also monitor leaks and will try to tell you if one of your password is compromised.

But why would someone hack me? What happens is people don’t hack you. What happens is some database with unprotected passwords gets leaked, then hackers get the accounts, then they try the details on every service to see if it works. That’s why reusing passwords is a bad idea.

How: Use BitWarden, it’s free. Pay for it if you can, or use 1Password (not version 8 though, it’s terrible).

2 Virtual debit cards

Virtual cards are temporary debit cards that you can use to pay online. You can have more than one associated with the same account. A virtual card has 2 main purposes:

Security: Just like unique passwords, a virtual card protect the actual credit card details from being stolen. And the card can be deactivated more easily than a physical card.
Subscriptions: Each virtual cards can have custom expiration dates. So if you want to watch a show on Apple TV and use the 7-day trial, you can create a virtual card that expires before the end of the trial. Then you won’t get charged accidentally if you forget to cancel.

How: Your bank might offer virtual cards, I know that Monzo and Wise do it in the UK, as does N26 in the EU and privacy.com in the US.

3 Encrypt your hard drive

The quickest of the bunch. Encrypting your hard drive only takes a few minutes, but it ensures that someone can’t get access to the data on your computer if you lose it. On macOS, it’s under Security & Privacy → FileVault.

4 Get a VPN

A VPN is a software that routes all your Internet traffic through servers. A VPN encrypts your connection, masks your IP and protects your DNS. This is essential for digital nomads and others who need to rely on public Wifi in coffee shops, hotels, airports, etc.

How: ⚠️ There’s a lot of scam in the VPN industry, be careful. I would only recommend ProtonVPN, Mullvad, IVPN, and Mozilla VPN.

5 Make backups

It’s annoying, I know. The cheapest way to make backups is to buy a physical hard drive and put 10 mins in your calendar every month to do it.

Otherwise, you can use an encrypted cloud storage service like sync.com, Tresorit, or Proton Drive.

In general, if you spend a day or more working on an offline document (like a keynote presentation), it’s a good practice to back it up at the end of the day.

6 Use Signal

When you use Facebook messenger, or Instagram/snap DMs, your messages are stored in plain text (at least by default). Just like with passwords, sometimes a database is breached, and everyone’s data gets leaked. The solution is encrypted messaging.

How: Encrypted messaging apps like Signal, Session, and WhatsApp encrypt your messages, meaning they can’t read them.

These services don’t keep the messages either, so even if they got hacked no one could read them either. (Although WhatsApp does share metadata which is why I recommend Signal.)

L&D budgets for web people

Thu, 26 Jan 2023 00:00:00 GMT

Some of us are lucky enough to work for companies that offer an “education stipend” as a benefit. Every employee gets a budget every year to spend on improving themselves, also called an L&D (Learning and Development) budget.

What usually happens is that all you do is “Eh, I'll get Pluralsight” but you just watch 3 videos in the year. Then, December arrives and you panic because you realise your budget is about to expire.

I’ve been pretty good at getting value out of my budget last year so I’ll try to give you some tips to make the most of yours. This list will be updated.

1. Categories

Here are some common categories of products that you can use your education budget on

Yearly subscriptions

It’s easier for the accountants and for your manager to receive as few invoices as possible.

MDN Plus.
Smashing Magazine (I wrote one article for the magazine but I'm not affiliated).
Kobo Plus if you can get it.
Audiobooks. I’d use Libro.fm (🇺🇸/🇨🇦) or XigXag (🇬🇧, 🇪🇺) if possible.
A language learning app like Babbel, DuoLingo, etc

Individual Books

There's a whole section with the books I read on this website, but here are a few books relevant to our industry.

The Little Black Book of Data by Kyle Taylor.
Understanding Privacy by Smashing Magazine.
The History of the Computer by Rachel Ignotofsky.
Anything from A Book Apart.
Anything from O'Reilly.

2. Example scenarios

If your budget is $500/500€

Obviously, you do what you want! These are just ideas 😄

Either
A national conference ($250-300) + travel ($100-150) + a subscription (~$100)

or
A local conference ($250-300) + a workshop/one-day course ($100-150) + a subscription (~$100)

or
A virtual conference ($100) + a workshop/one-day course ($100-150) + a subscription (~$100) + books ($100)

If your budget is $1000/1000€

Either
An international conference ($500-600) + travel ($300-400) + a subscription (~$100)

or
A national conference ($250-300) + travel ($100-150) + a workshop ($100-150) + one-day course ($100-150) + 2 subscriptions (~$200) + whatever’s left on books.

or
A virtual conference ($100) + a workshop/one-day course ($100-150) + 2 subscriptions + books ($100)

You get the idea! I could go on but it’s your budget at the end of the day, so it’s up to you.

2022 in Review

Sat, 31 Dec 2022 00:00:00 GMT

What a year!

The previous year was exhausting. We moved house 4 times, while expectations about the future kept changing. Everything looked promising, then it didn't. 2022 was different. Tiring too, but different.

A year of highs and lows

2022 was a year with lots of fun. I'm still part of the Covid cautious crew, but it was a year of travel, seeing old friends, meeting new faces, and discovery. This year was also the first time I had a health scare. Like the previous 2 years weren't enough, I learned again that health truly is paramount. I'm lucky that I can still count on the EU healthcare system, because good luck with that in the UK. Healthcare there has been defunded and run to the ground.

I left a fantastic job at Dow Jones/The Wall Street Journal in the spring because I needed time off from the previous 2 years. I took time off, and went on a road trip. At the same time, my job search came to fruition.

Overall, apart from the health problems, this was a memorable year. My goal for next year to have as much fun as this year.

Best of

Continuing the tradtion, here we go.

🎥 TV/Cinema

Jesus Christ Superstar (Musical). With Jon Legend and Sara Bareilles. What a show! The intro is one of the most rock'n'roll things I had seen in a while.

Billions, season 6. I loved season 6. It wasn't as strong as season 2-4, but what can I say, it's my favourite TV show. I feel like you could tell that the original writers were working on another show at the same time.

The United States vs. Billie Holiday A brilliant movie from Johann Hari and Spike Lee. It's not a fun watch, but it talks about important subjects.

Taylor Swift: Miss Americana (Netflix) This documentary has changed my perspective on Taylor Swift. I was stuck on the stereotype that the media had decided for me and it was so wrong. She's been at the top for this long, for a reason.

Albums

Hadestown (Original Broadway Cast Recording): One of my favourite musical albums of all time.

The Great Irish Songbook by Dervish: A great album of irish folk songs with a different artist for every song.

🎙️ Songs

Move on by Jake Gyllenhaal (from Sunday in the Park). Superb performance, Jake Gyllenhaal really can sing, but AnnaLeigh Ashford smashes it.

Better days by Dermot Kennedy. Dermot Kennedy is a world-class singer, and this is my favourite song. Check out the acoustic version.

Single City by Michael Mott (feat Lauren Allred). I've been impressed by Lauren Allred since hearing her on The Greatest Showman. This is a beautiful piano ballad about NYC that anyone who lived in a major city can relate to.

Podcast

Plain English — Why Are Teenagers So Sad and Anxious?: Explores the consequences of social media, and other recent changes we experienced in the modern world. Listen here

Strong songs: Wedding Song (Hadestown): The episode that kickstarted my deep dive into musicals this year. Listen here

Basic Folk: Anais Mitchell: Discovered another fun music podcast, the host is fantastic. The episode is with the writer of Hadestown. Listen here

Joe Rogan and The Ethics of Apology — Making Sense: An interesting question about the ethics of the Internet.

Best Purchase

A CASIO CDP-S100 digital piano. I'm still playing 4-chord songs, but I had so much fun with it. It allowed me to learn so much about music in general.

Resolutions

Experience more of life, it's pretty good.
Replace "but" with "and"

My first 6 months as a Developer Advocate

Wed, 07 Dec 2022 00:00:00 GMT

I’ve been a developer advocate full-time at Contentful for 6 months. I feel extremely fortunate. I love this job so much. There’s an unsaid tradition to write a blog post when you cross the 6-month milestone, so here we go.

from-heading: 1
to-heading: 2

What’s a developer advocate?

As a Developer Advocate your job is to raise awareness and create a positive image of a brand/product with developers. Concretely, you do that by:

Creating educational content that helps developers (tutorials, demo apps, podcasts, open source projects, etc) often featuring said product/brand/API, but not always.
Taking part in developer community events in the largest sense, where you can meet your customers and understand their problems.

What's the difference between a developer advocate and …

A Developer Experience Engineer? A Developer Relations engineer? (ahem) A Developer Evangelist?

It’s all the same job. Or not, it depends on the company. There are real semantic differences, Developer Experience is often focused on tooling, but in practice I saw offers with many titles for the exact same job.

Now onto the fun bit, here's what I've been up to for my first 6 months.

#CascadiaJS group shot!

— Tiger Oakes (@Not_Woods) September 1, 2022

What I did

Blog posts
- Wrote 2 articles for the Contentful blog. An intro post and another one about Mastodon
- Edited/provided tech review on various articles
Created 2 turnkey technology starter repos for:
- React + Contentful
- Sveltekit + Contentful
Met my colleague Harshil in London and my manager Jen in Seattle. Our whole team met in London for the first time in October
I was a guest on 2 podcasts
Attended developer events in London and CascadiaJS in Oregon
Organised the first IRL Contentful Developer Meetup since 2019 in London
- Found a venue and arranged the logistics around it
- Reached out to speakers for talks
- Tried my best to make sure my US colleagues had a nice time
Made an interactive version of a diary from 1887 with Sveltekit, MapLibre, and Contentful: https://rtw.voyage/

The company

After 6 months, I feel like I identify with both Contentful and its audience.

The company was founded by 2 devs. And they both want Contentful employees to have a good time. Sasha (co-founder, COO) remembers dragging his feet to an office, and doesn’t want that for us.
Contentful is a remote-first startup with more than 750 people from 70+ nations distributed around the world. As an expat, I’m among friends.
The audience is mainly front-end engineers like me.
I love working as part of the Developer Relations team. We’re all aligned on our mission to help developers. We all understand and appreciate everyone’s ways of working. And we’re all fans of musical theatre 💃. Stefan did a fantastic job hiring us.

Happy Halloween y'all 🎃

From the @contentful #DevRel team @Gamergrrl99 @musicalwebdev @hola_alvin @harshil1712 and me!

— Jen Sable Lopez (@jennita) October 31, 2022

What I learned and what surprised me

The importance of the right product

I got lucky with Contentful. When I was researching developer advocacy, one advice I found online was to find the right product. This is so true.

As a DevRel, you’ll be immersed in your product. You’ll be using it and talking about it all the time. That’s what developer advocacy is. Critically, you’ll be thinking about problems in the adjacent domain of your product.

The good thing is, all sorts of companies need developer advocates. It’s still staggering to me how many software developers and companies there are. The bad thing is, companies vary greatly in terms of size and target audience. For example, a DevRel at Unity (game engine) and Cisco (networking) will have the same job title, but completely different audience demographics.

Lots of trust and autonomy

As Developer Advocates at Contentful, we have a lot more trust than I anticipated. If I had the same level of autonomy with a product and a target audience that I didn’t understand as much, it would have been harder. Maybe a bit demotivating? Again, this highlights the importance of finding the right product for a first developer advocate role.

Events

Since spring 2022, conferences have been back in person. There were a lot of them. Public speaking is what DevRel is known for, and what attracts many to the job. I love travelling like everyone else, but doing talks was never the main motivation for me.

Events and the C word (Covid)

I'm not hiding that I'm one of those “Covid cautious” people. I still wear a mask when indoors and surrounded by strangers.

It’s so true, so many people are coming back with Covid from conferences. It's really unfortunate. — Svelte Radio, Episode 47, about 21:52

Seeing that a few people caught Covid in conferences in 2021, I mentioned early on in the application process that in-person events were probably a “no.” I wanted to be upfront about this. Most companies I talked to said that wasn't a problem. Still, I realise that I’m extremely lucky to be part of a team that accepts this.

Despite that, I still went to events. It was incredible.

I met with a lot of people in-person (outdoors) during the conference season. I got the chance to hang out with those that I admire (Anjana, Tejas, Swyx, and Charlie) and meet many more (like my favourite Canadians).

Plus photos

— Tiger Oakes (@Not_Woods) September 1, 2022

I’m so excited for the initiatives we have in store for 2023. We have one last project for 2022 to go out with a bang.

Onwards for another 6 months!

How I became a developer advocate

Tue, 15 Nov 2022 00:00:00 GMT

When I meet developers, “How did you become a developer advocate?” is the question that I get asked the most. The short answer is “well, I applied 😄,” and the long answer is this article.

Before I go on, because this is the Internet, this just a recap of how it worked out for me.

From this point on, I’ll use the terms “DevRel” and “developer advocate” interchangeably.

from-heading: 1
to-heading: 2

1. Leaving a great job

Before I started applying, my day job was at Dow Jones, the company that owns The Wall Street Journal, MarketWatch and originally created the stock market index (DJI). I was a Lead Engineer on one of the internal editorial tools. For anyone interested in DataViz, working there is huge.

On top of the prestige associated with the organisation, my team (the Editorial Tools team) was incredible. They took a chance on me as a lead. They allowed me to step up and be in charge of a product, and I was the only team member based in Europe. I am so thankful to my manager, and every one of my colleagues.

I wholeheartedly recommend Dow Jones as a place to work. As a company that was office-only before the pandemic, they adapted to remote work very well.

How do you leave a job like this? By spring 2022, I really started feeling the toll of the previous 2 years. I knew I had it easy as a remote worker but this didn't make the news cycle irrelevant either.

I started feeling the first symptoms of burnout, and my team and manager supported me fully.

2. The decision to get into DevRel

I wanted to rest after an intense period, so I only looked for part-time jobs. Developer Relations wasn't a priority, even if the career path had been brewing in my mind for a while. Then I saw a job ad from a company that I loved.

This company was hiring a Developer Advocate to work remotely from anywhere in the world, and part-time.

I poured my heart and soul into a cover letter. One of my best friends even said something like “I never cared about a job enough to write a letter like this.”

I applied, it didn’t work out, but decided to continue.

3. Finding suitable companies

Back in the glorious days of 2021, a lot of developer startups had raised a lot of money.

Many companies were thinking “Right, we got $5 million in a seed round, let's go!” And want to hire a DevRel. There were a lot of developer advocate jobs, so finding ads wasn’t difficult. As someone new to developer advocacy, I had to think hard about the right company for me.

I realised that I didn’t want to be the first Developer Advocate at a company.

I didn’t want that for the following reasons:

You have to set up everything. All the metrics, how you measure things, what success looks like to leadership, etc. I had experience on the execution side, not the management side.
Work-life balance. In DevRel, we talk about the 3 Cs: Code, Content, and Community. If you're the first developer advocate, these 3 things are your job, and they can easily turn into 3 full-time jobs.
Focus. I don't like juggling tons of things at the same time.

So, I was looking for a company with an established DevRel function.

4. The application process

My job search happened during the fully-remote, post-2020 tech market. The future of work looked bright. The market was hot, nothing like the economic recession we’re in now. With the criteria from step 3 in mind, I applied to a few places.

I did 17 interviews in total with various companies until I accepted the offer from Contentful. The variety of people that I got to meet during these interviews was incredible. My interviewers tuned it from Ireland, Germany, Kenya, France, Canada, the US (including Hawaii) and the UK.

Contentful started off with a great first impression.

I saw the job on a Saturday morning, didn’t want to apply during the weekend so I applied on Monday. The next morning, Andreea sent me a calendar link to schedule a screening call, less than 24 hours after I applied.

To this day, this is still the fastest HR response I ever received. The rest of the hiring process was smooth sailing. I was hired straight after my panel interview, which had never happened to me before either. Andreea was also the first person from Contentful that I ever met in person.

I did 5 interviews on average per application.

Advice to companies looking for developer advocates

Stop saying “remote” when you mean “US, remote”
There’s a whole world out there.

Don’t ask people to work for free
For one of my applications, I was asked to analyse the current DevRel strategy and propose initiatives/solutions. It felt like working for free and it wasn't nice.

Ask people to show off
"Show us something you've built that you like" is the best way to conduct a panel interview. A few companies did this, and it was great for both parties.

Tips to remember latitude and longitude

Sun, 16 Oct 2022 00:00:00 GMT

We're just two lost souls
swimming in a fishbowl
— Pink Floyd, Wish You Were Here

I like coding maps, but I would always mix up latitude and longitude. I tried the mnemonics (like, latitudes = ladder) but none of them ever worked.

Here are a couple of tips to remember latitude and longitude.

1. X/Y coordinates

Tip #1: The simplest, but not the easiest, is to memorise this:

Latitude is y and longitude is x.

That’s it, Latitude is the y axis and longitude is the x axis.

I tried that but would still mix them up at times. So I came up with the next tip.

2. The long side of a world map

Tip #2: If you think of a world map, usually it’s a rectangle.

The long side (the largest side) is the longitude.

Orientation

The point at 0,0 is the intersection of the Equator and the Meridian of Greenwich. The greater the distance to them, the greater the latitude/longitude. East of the meridian gives you a positive longitude value, and west gives you a negative one. Same for north/south of the Equator.

For example:
Prague has a larger longitude (14.43) than Paris (2.35) because it's further east. The same goes for negative values going west. San Francisco has a larger longitude (-122) than Washington, D.C. (-77) because it's further west.

The word "parallels" is also used to describe the lines of latitude. In Canada, the expression "north of 60th" refers to the northern territories.

Here are the rounded coordinates (in the order latitude, longitude) of some popular cities to help you.

London: 51.501, -0.118 (Greenwich is in London, hence the zero longitude)
Sydney: -33.865, 151.210
Tokyo: 35.653, 139.839
Singapore: 1.290, 103.852
Los Angeles: 34.052, -118.244
Oslo: 59.911, 10.758

🇬🇧 A fun fact for people in the UK, Edinburgh's main train station is further west (55.95, -3.18) than Liverpool's (53.40, -2.97).

I hope it helps, good luck!

Layoffs

Fri, 30 Sep 2022 00:00:00 GMT

It's summer 2022, there are huge rounds of layoffs all across the tech industry. I know the feeling, I've been laid off too. Here’s how it happened to me a few years ago, and what I wish I knew.

My past layoff

My layoff happened a few years ago. I'm deliberately keeping the details vague.

On a Friday afternoon, my manager sent me a meeting invitation for Monday, at 10am. I thought “Oh that’s weird” but didn’t think of it afterwards.

On Monday, I turned up and… someone from HR was in the meeting. I instantly knew.

I remember saying “Oh... Is this bad news?”

“Yes, I’m afraid so…” My manager said.
“Is it just me?”
“No…”

I was told that I was let go, along with other people in my department. My manager was explicit that I did nothing wrong. He received an email out of the blue from his manager saying “these people will lose their jobs.” So my conscience was clear. (Sometimes, managers have to choose who will be laid off, horrible stuff.)

After that, I received messages from others who were affected. One of us even saw it coming. Later, the wider team met, and we shared the news.

It sent a shock to my system that still reverberates to this day.

I wasn’t prepared for this layoff. When it happened, for the first time in my career, the thought of changing jobs felt distant.

Taboos and Shame

I’ve heard some people feel a strong sense of shame when they get laid off. Probably a side effect of attaching too much of your self-worth to your profession. I’m lucky that I never felt ashamed. It's largely due to how my layoff worked out. It wasn't only me who got let go, otherwise I would have felt differently.

There's this massive taboo about looking at other jobs while having one. It kinda feels like installing Tinder while you're with someone. “I love my job, why would I even think about applying elsewhere?” was my line of thinking. So here’s the painful lesson that I had to learn:

Always have an exit strategy.

Exit strategy

From this point on, I’ve always had an exit strategy. Here are a few questions to help you with yours. It’s what I wish someone had told me before I got laid off.

1. Can you send an updated CV to someone tomorrow?

This is a better recommendation than “always have an up to date CV.” Realistically if you’re happy in a job, you won’t always think of that. However, you should be able to send your CV to someone today or tomorrow. That means:

You know where your CV is
It’s in a file format that you can open
It will take you less than an hour to update

None of these were true for me when I got the call.

2. Online presence

Make sure your online presence is or can be updated. In other words create the accounts, or buy the domains, right now.

For devs and designers: How’s your website? Does it have 4 blog articles from 2017 on it?

For everyone else, how’s your LinkedIn? If you don’t have one, it’s not too late.

3. Have a list of companies

Every time you see a company that looks cool to you, add them in a note somewhere. In the frenzy of the layoff, you probably won’t think of every place you could apply to.

The more specialised you are, the more important this is.

Next steps

So, now what?

If there are many of you, organise

Losing contact with a social group that you spend 8 hours with can be isolating. If several people are also let go, keep in touch and organise.

There are successful precedents. In 2016, the SEO company Moz laid off 60 employees. The workers made a website and took to twitter with #HireMoz, and some companies responded. In 2022, when Shopify laid off more than 1000 people, the former employees also made a website with a directory and (soon) a job board.

Take control

A layoff is a business decision that was inflicted upon you. Make sure this is clear in your mind, and take control of the narrative. Announce your layoff on social media, get ready to talk about it.

For example: “Yeah so I guess, you know, I'm no longer working from [startup x] where I used to work for 2 years. Yeah, it was a layoff.”

vs ”Myself, along with 100 other people were laid off because of bad cash flow. I’m now looking for an opportunity in [job type]”

The 2nd one will land way better in an interview. And it will help you mentally.

Take it easy

A job change is significant. Your job represents many hours of your day, and a big proportion of your social interactions. Your friends know it, your family knows it. Then, it all disappears.

Take it easy:

Set fixed hours to apply. This depends on what works best for you. If applying on Sunday nights make you less fearful of the week ahead, then go for it.
Talk to friends. The upside is you now have more time on your hands. Call that friend that you always meant to call. Don’t talk about the layoff, talk about your life, their life, movies, whatever.
Understand that it might take a while.

That’s it! I will remember my first layoff for the rest of my life. It won’t be easy but there’s light at the end of the tunnel. Good luck!

Learning to code in time of crisis

Sat, 13 Aug 2022 00:00:00 GMT

I wrote the first draft of this article in March 2020. Today, 2 years later we’re in another "unprecedented" economic crisis, again.

Whether you’ve been laid off, struggling to make ends meet with the crazy inflation or dissatisfied with your current situation, you may have wondered: Could I work in tech?

The good news is: You can, and it’s free or low cost. I can't say that of many career paths.
The bad news is: It might take a while because the economy is upside town.

But it's possible, and you're not alone! As much as you think your case is unusual, plenty of people went from very random jobs to coding, like glassblowing, chicken frying or Broadway acting. In this article, I'll answer common questions that people asked me on this topic.

Is it easy to find a job?

There's good and bad, like everything else.

👍 A world of (remote) opportunities

Remote work is the default for developers now. You don't need to move to a big city to get started. Most companies will allow you to work remotely if you ask. If not, it's probably not worth applying.

Some of the “big tech” behemoths (google, apple) want their employees to work from shiny offices, mostly against their will. Mayors encourage them because their property taxes are tied to the value of offices. This is irrelevant for you, you're unlikely to get your first job in "big tech."

The recession(s) will affect us all. But if you can do your job from anywhere, for a company anywhere in your timezone or further, that's an advantage on other jobs.

👍 A culture of skills, not credentials

Caveat: This varies by country.

If you want to make movies for a living, you can go to film school, learn and get a degree. Chances are you will come out with a student project. The other option is to learn on the Internet, and create your own film projects.

The tech industry works similarly. If you can prove that you can do the work, no one will ask you for a degree or certificate.

We can create our own experience, which is rare, and we’re lucky.

👎 The competition

Now onto the bad news. I wrote this in the summer of 2022, and the combo of a crazy tech market in 2021, irresponsible startups and a sudden economic downturn lead to a ton of layoffs.

Many experienced coders are out of a job, so the market will be difficult for everyone, for a while.

Even in “normal times,” coding is a competitive industry. There are lots of young people with lots of time who are happy to code 24/7. You might think “How could I possibly stand a chance against that?” Your advantage is you're more than a coding machine. You bring life experiences that alongside your coding skills make you interesting.

How soon can I find a job?

YouTube and Twitter are full of people telling stories of “Zero to engineer in 3 months — and so can you! Buy my course”
This is just like any Internet advice, e.g., “I lost 10 kgs in 2 months — and so can you! Buy my course.”

Whether or not you find a coding job (and when) is influenced by market conditions, which you cannot control. Unfortunately, I can’t give you a clear answer. I would focus on learning the basics, and creating a body of work. I know it’s boring but I don’t want to give you a false hope.

What is code?

Here's an analogy that stuck with me:

Coding is like playing with Lego bricks in your mind.

With Lego, you can only use a restricted set of primitives (bricks) to build something (a boat). With code, that restricted set of primitives is called a programming language, and what you create is called programs, or software.

It looks like this:

let width = 400;
let height = 400;

function setup() {
  createCanvas(width, height, WEBGL);
}

function draw() {
  background(250);

  rotateZ(frameCount * 0.01);
  rotateX(0.6);
  rotateY(0.4);
  box(70);
}

Is Coding the same as IT?

No, IT and coding still get conflated, but they are different jobs. Here's my explanation of the difference between IT and coding. 👇

IT uses software to help people create with their computers.
Coders use computers to create programs/software.

Let me say it again: Coders/Designers work with computers to create things like Netflix, WhatsApp and other apps, games, etc.

Do you need to be good at math to code?

Absolutely not! I had to learn 95% of math as an adult. I hated math as a teenager so the most basic stuff like sine and cosine never entered my brain. All you need is to be able to use numbers (e.g., calculate a 20% discount).

I know many people who do computer graphics professionally and couldn't solve a quadratic equation to save their lives. And graphics is as math-heavy as coding gets, apart from Artificial Intelligence/Machine Learning.

Ideally, each of us would be fluent in working with the mathematical techniques of asymptotic analysis. And ideally, each of us would be rich and good looking as well.
— The Algorithm Design Manual, 2nd Ed.

Where to start?

For me, the best place to write your first lines of code is Khan Academy’s course. That should give you a good idea of what coding is like.

Some tips

You'll have unlearn a lot, that's OK! The industry moves fast.
Don't worry about what you want to do exactly yet. You'll carve your own path after landing a job.
If someone mentions "Learn React" to you as a beginner, run away. React is confusing, even to experienced engineers.

Good luck! The world is weird again and it’s disheartening, but I will be happy to have you as a colleague if you decide to embark on this journey.

Cheers

PS: If you think you might be too old, here’s a video of Masako Wakamiya. At 81, she couldn't find a good mobile game for people her age. So she learned to code and made one.

Thank you so much to Josh for reading drafts of this.

How ethical alternatives succeed: a Signal case study

Sat, 08 Jan 2022 00:00:00 GMT

Here's a story about the tick that beat the giant with a trick
— Smith and Thell, Goliath

In January 2021, Signal was only known by journalists and privacy geeks. In a matter of days, it topped the charts and was on everyone's phones.

How did that happen?

TL;DR

Signal was an overnight success that was years in the making. The app had all the components that any ethical¹, alternative product needs to succeed:

Zero or low switching cost, which means:
1. A seamless transition process
2. Feature parity, almost
3. Intuitive design
Issues with the status quo, i.e., a villain. The reason to switch has to be well-known and relatable.
Street credentials. If shouldn't be just you recommending the alternative.

What's the deal with WhatsApp and Signal?

WhatsApp, owned by Facebook/Meta is one of the main secure messaging apps. Signal is a similar app run by a non-profit with a small team. Interestingly, it was the Signal team that implemented WhatsApp's encryption.

These apps coeixsted for a while. WhatsApp was the mainstream app that almost everyone used, and Signal was the unknown that only journalists and privacy geeks used. Until everything changed.

One day, on January 2021 WhatsApp sent a notification to its users regarding a new privacy policy. The notification said that from 8th February, WhatsApp would start sharing data with its parent company (Facebook). The Internet started writing about the changes, and people started switching to Signal. A snowball effect ensued.

The overnight success

Signal became the most downloaded app in the App Store in India, Germany, France, Austria, Finland, Hong Kong, and Switzerland. The downloads went from 246,000 the week before the WhatsApp change to 8.8 million the week after. Facebook even bought ads for the word "signal" to prevent people from downloading it. 3 months after the initial incident, Facebook closed Signal's Instagram account.

This overnight success is attributed to Elon Musk advising people to "use Signal" on Twitter. While it made a gigantic difference, I don't think that's why it worked.

If Elon tweets "use Linux" tomorrow, no one will care. Why did "use Signal" work so well?

I. Zero or low switching cost

Convenience is everything.

1) A seamless transition process.

There are 4 steps to get on WhatsApp: Download the app, give it a phone number, wait for the text, and give it access to your contacts. That's it. For Signal, it's the exact same process. If Signal asked you to create an account, wait for a confirmation email, type a bio, enter a location, refer a friend, use a two-factor code, plus the other 4 steps, I wouldn't be writing this.

It should be as easy as possible to transition to the alternative. Otherwise people won't bother.

2) Feature parity, almost.

Open-source developers tend to pay too much attention to the specifics. In our case, Signal didn't have exactly the same features as WhatsApp. You couldn't search Emojis by their name, it didn't support group calls with more than 5 people, and the group admin features were limited. But it had most of the features that most people wanted.

It offered, all in all, a user experience that was similar enough.

Today, not only did Signal add all these missing features, it did so without sacrificing security and privacy. Continuing on my example with group calls, Signal now support group calls with up to 40 participants. That required a lot of engineering.

3) Intuitive design

The design of the the product must be pleasant, and easy to use. You should never have to learn a new app. Signal had a simple design without bells and whistles.

II. Issues with "the status quo"

Why would you switch when the current product works?

Claims like "It's Photoshop but open source" are terrible. They're appealing for developers but not the average person. "Photoshop without Adobe's pesky installer" is much better.

In Signal's case, Edward Snowden had recommended Signal for years. But humans are narrative creatures. We need a story to justify our behaviour. Issues have to be clear and resonate with people. It's not only chanting the merits of your alternative, it's about showing how ugly the status quo is.

WhatsApp was associated with security and privacy, but Facebook wasn't. That's what made people quit. The villain of the story became obvious.

III. Street credentials

The most discouraging problem with new social apps is "nobody I know uses that." This creates a self-defeating downward spiral that keeps the user base low.

Signal had just enough notoriety that it wasn't completely unknown. After Elon Musk's tweet, other celebrities joined the fun. Signal's founder and CEO was invited on The Joe Rogan Experiment, one of the biggest podcasts in the world.

As a result of that, Signal became a known quantity. When people asked their friends and families about this "signal thing," someone had heard of it somewhere.

What now?

There were multiple factors that contributed towards Signal's success. But the main takeaway is this: Make a great alternative product, and don't compromise.

If you're an early user of giving feedback about a new app, demand no less than a great UX. Don't worry about the small stuff. Don't nitpick about a feature if most people don't need it.

If you're a creator/developer, nail the core product, then reach out. I'm as jaded of the marketing logo wall as everyone else, but the beginnings are always tough. I get it, it's easy to forget UX glitches when you're too close to the product. And it's much more fun to work on a coding problem than crafting a compelling marketing message.

My hope is to see this success is replicated. More competition is better for consumers, well, most of the time. Remember when there was only one TV subscription service?

Thank you to Jeremiah Lee and Kev Quirk for reviewing drafts of this article.

I use "ethical" in a broad sense. In a market where the status quo has nefarious side effects, an ethical alternative is a similar product that improves on that. For example, a biodegradable cup is an ethical alternative to a plastic cup. ↩

2021 in Review

Sat, 01 Jan 2022 00:00:00 GMT

What a year, right?

It was an exhausting year for me. A lot of uncertainty still remains.

On the physical front, I moved houses 4 times (during a pandemic), which was no fun at all. I hope that I'm done with boxes and suitcases. On the plus side, time flows by when you're busy.

On the mental side of things, I'm as tired of the pandemic as everyone else. But I'm extremely thankful to be in one piece. I'm in good health, I've not been ill, and I'm aware how great that is.

Vaccination has changed the game. I'm very lucky to have gone from zero to triple vaccination in one year. That said, the risk of Long Covid still feels real. Real enough that I've still not been indoors and unmasked with strangers.
Update 2022: This Thread by Dr. Nicole Bedera is a great explanation of my current feelings on the topic.

I have been indoors and unmasked with friends though, fortunately. It turns out that you can eat outside for most of the year, even in rainy European countries.

To continue the tradition, here's my best of the year again. I can't believe it's my 4th "Year in Review" article. I've explored more subjects than ever this year, the Internet is amazing.

Best of 2021

🎥 Cinema

The Dig: I would never expect to be so enthralled by a 2-hour movie about an archeological dig during WW2. This film deserves oscars. For Carey Mulligan, the lead actress; for Archie Barnes, the child actor; for the photography; for the music. Best Picture and best Sound at the very least. It also manages to captures the ambient tension of the war. It's beautiful, it's somber, it's philosophical at times, I loved it. 10/10.

Shang-Chi and the Legend of the 10 Rings: I wasn't excited about this one at first. I saw the trailer, and the hip-hop and fast editing didn't appeal to me. But I loved it when came out for free on Disney+. I watched it twice in like 7 days. The story is great, the characters are great, and the fight scenes are spectacular.

Squid Game anyone? 🐙

Albums

Hotel TV by Lawrence: I discovered the Lawrence siblings this year from Jon Bellion. Jon is one of my favourite artists (featured in last year’s review) and he was a producer on their latest album called Hotel TV. It's funky, and Gracie's vocals are outstanding.

That's life by Willie Nelson: So, Willie Nelson made a jazz album. That's life is a tribute to Frank Sinatra, and it's very good. It’s Willie’s 71st album. Let that sink in for a bit. Enjoy!

🎙️ Podcast

Miracle in Galway Bay — RTÉ Radio 1: This is one of the best audio documentaries I heard in a long time. It's about a rescue mission in Galway bay. Sara and Ellen head out on paddleboards, and then don't come back (happy ending, don't worry 🙌). It's riveting, I just couldn't stop listening. Listen Here.

Where the Streets Have No Name — Behind the Song: Behind the Song is a fantastic new podcast that I discovered this year. It goes into the origins of songs and their performers, in less than 15 minutes. Some episodes don't have enough music, unfortunately. My favourite episode was on Where the Streets Have No Name. Listen Here

The story of “The Central Park Karen” — Honestly: What a shock. This is a very important episode that investigates the damages of cancel culture on people's lives, beyond the headlines. Listen here

Best Purchase

A skipping rope, it paid itself off 10 times over already.

Resolutions

New year's resolution:

✅ Don't set unrealistic expectations for yourself when we're still in a global pandemic and everything is very uncertain.

— Mind (@MindCharity), Jan 1, 2022

Onwards to another strange year!

Arranging objects in 2D and 3D

Fri, 01 Oct 2021 00:00:00 GMT

No matter how many (thousand) times you wrote a particular piece of code, you always have to it look up. I've been there so many times.

My brain forgets most snippets that involve lots of Math.sin and others. Anything like ((2 * i) / numItems) * PI. Unfortunately, that's what a lot of "creative coding" is about. Fortunately, my brain can do association, like "I know I wrote this code in that project."

I now have too many creative code algorithms across too many projects. So I've collected them in this article.

All snippets are language-agnostic, framework-agnostic and valid JavaScript.

2D

Arrange in a 2D grid

// arrange items in a horizontal grid from left to right
let gridSize = 5;
let itemSize = 60;
let numItems = 17;

for (let i = 0; i < numItems; i++) {
  // from left to right
  let gx = i % gridSize;
  let gy = Math.floor(i / gridSize);
  // swap gx and gy to arrange in a vertical grid from top to bottom
  // gx = Math.floor(i / gridSize);
  // gy = i % gridSize
  let x = gx * itemSize;
  let y = gy * itemSize;
  // 4px spacing
  rect(x, y, itemSize - 4, itemSize - 4);
}

Arrange in a circle

let numItems = 8;
let radius = 100;
for (let i = 0; i <= numItems; i++) {
  // I love this line
  let angle = ((2 * i) / numItems) * Math.PI;
  let x = Math.cos(angle) * radius;
  let y = Math.sin(angle) * radius;
  ellipse(x, y, 20, 20);
}

Arrange on a half circle

let numItems = 7;
let radius = 100;
// use this value to offset the angle and rotate your semicircle
let angleOffset = 0;
for (let i = 0; i < numItems; i++) {
  let t = i / Math.max(1, numItems - 1);
  let angle = Math.PI * t + angleOffset;
  let x = Math.cos(angle) * radius;
  let y = Math.sin(angle) * radius;
  ellipse(x, y, 20, 20);
}

Make a spiral

let turns = 3; // How many revolutions
let radius = 100;
// How close we want the points to be, as an angle in radians, smaller is closer
let tightness = 0.2;
let full = Math.PI * 2 * turns;

for (let angle = 0; angle < full; angle += tightness) {
  let r = radius * (angle / full);
  let x = Math.cos(angle) * r;
  let y = Math.sin(angle) * r;
  ellipse(x, y, 4, 4);
}

3D

Random points on the surface of a sphere

let radius = 100;

for (let i = 0; i < 1000; i++) {
  // random θ and φ — spherical coordinate stuff 🤷‍♂️
  let theta = random(0, Math.PI * 2);
  let phi = random(-Math.PI / 2, Math.PI / 2);

  let x = radius * Math.sin(theta) * Math.cos(phi);
  let y = radius * Math.sin(theta) * Math.sin(phi);
  let z = radius * Math.cos(theta);
  point(x, y, z);
}

Random points in a sphere

for (let i = 0; i < 1000; i++) {
  let phi = Math.random() * (2 * Math.PI);
  let costheta = Math.random() * 2 - 1;
  let u = Math.random();

  let theta = Math.acos(costheta);
  // Math.cbrt is part of ES2015
  let r = radius * Math.cbrt(u);

  let x = r * Math.sin(theta) * Math.cos(phi);
  let y = r * Math.sin(theta) * Math.sin(phi);
  let z = r * Math.cos(theta);
  point(x, y, z);
}

Create a cube of cubes!

let xCount = 4;
let yCount = 4;
let zCount = 4;
let boxSize = 20;

for (let k = 0; k < zCount; k++) {
  for (let j = 0; j < yCount; j++) {
    for (let i = 0; i < xCount; i++) {
      let size = boxSize + 7; // add a bit of spacing around each cube
      let halfWayX = (size * xCount) / 2;
      let halfWayY = (size * yCount) / 2;
      let halfWayZ = (size * zCount) / 2;

      if (xCount % 2 != 0) halfWayX -= size / 2;
      if (yCount % 2 != 0) halfWayY -= size / 2;
      if (zCount % 2 != 0) halfWayZ -= size / 2;

      let x = size * i - halfWayX;
      let y = size * j - halfWayY;
      let z = size * k - halfWayZ;
      box(x, y, z, boxSize, boxSize, boxSize);
    }
  }
}

If you're curious how these images were generated, the code is available in this repository.

Suggestions welcome! I want to keep updating this post with cool visuals, and I would love your help. Please keep suggestions to spatial stuff though. We collectively wrote enough bubble sorts.

Things I don’t know

Mon, 16 Aug 2021 00:00:00 GMT

It's the 2018 Christmas break. Dan Abramov, a respected engineer in the web community, wrote a blog post that I loved. The title was Things I Don’t Know as of 2018.

The idea was "we can admit our knowledge gaps without devaluing our expertise". Since then, many coders wrote their own versions of the blog post, sharing their own gaps. It was a collective effort to help junior developers feel more comfortable.

I didn't have a website then. With the role of front-end engineers getting more ambiguous by the day, it's time for me to do my part. Here are the (coding-related) things I don't know, as of 2021.

Terraform and other Infrastructure as code (IaC) tools
My experience with configuring servers is something like "How powerful is it? Does it Scale? How does it scale?" I reach for an SRE otherwise.

Kubernetes
I can make my app run in a Docker container on my computer. I can expect it to behave (roughly) the same way in other computers. When it comes to getting that container to talk to other containers in a coordinated manor, I can't help you.

Eigenvalues and Eigenvectors
That's the limit of my linear algebra. I have a rough idea of how eigenvalues and vectors relate to a transformation. I've not yet understood how to use them in practice.

Functional languages
I never touched Haskell or F# and don't get the hype around Clojure. And don't get me started about other ML-style "compile-to-js" languages. Monads and functors look like spelling mistakes to me.

Signal processing
That's a field in and of itself, but managing audio is an important part of Game Development (my first love). Maybe I used Discrete Cosine Transforms for textures once? Oscilloscopes, oscillators and waveforms are mostly painful memories of boring physics classes.

98% of AWS
AWS offers more than 100 services. I've used Lambdas (serverless functions), S3 (file storage), EC2 (servers), and Cloudfront (caching). I can tell you that there are a few "AI-oriented" services that will do stuff like text-to-speech, or handwriting recognition. I probably couldn't name 20 of those services.

C++
To me, clang is an onomatopoeia for metal hitting the ground. For C++ people, that's a compiler. I can probably use the modern version of C++ in a tool like OpenFrameworks. I don't know anything that relates to binaries or make code run across compilers.

Go and Rust
Which programming language I'll learn next changes every week. I'm excited about both. I like that Go has strong conventions and a comprehensive standard library. I love that the Rust Game Development community is very active. Lots of wonderful command-line tools and engines are coming out in Rust.

grep and sed.
I know my way around xargs and wrote a series of articles about my favourite command line tools. Yet the syntax of these two commands is undecipherable to me. I tried but grep "e$" logs.txt | sed 's\*(.*\)/\2, \1/' just doesn't work. Also, what does a "streaming text editor" even mean?

There are more, no doubt. But these have come up at various points in my career/learning journey.

If you're a developer/designer/doctor and think Imposter Syndrome is a problem in your industry, share your list too. Humility is underrated.

What’s the problem with metadata?

Mon, 05 Jul 2021 00:00:00 GMT

A friend asked me over the weekend: "What's wrong with WhatsApp?" If messages are encrypted, what's the big deal? That's a fair question. The answer reveals a larger problem. The problem with companies (in this case, Facebook) collecting metadata around your data.

Let's see why this is dangerous.

What's a metadata anyway?

Data-hungry companies often defend themselves with this misleading statement: "It's OK, it's just metadata."

Well, what's a metadata? It's data that's about other data. For example: In a chat app, if the message is the primary data, then the metadata could be:

The time of the message
Who you're talking to.

Something like "Ben sends 1 message to Jack today at 18.33"

It's not OK at all.

Why are metadata dangerous?

Metadata collection is harmful to privacy. A single piece of metadata may be harmless, but the more metadata you have, the more complex and precise a picture of you emerges. Additionally, metadata come from a variety of sources.

Let's go back to our example

"Ben sends 1 message to Mark today at 18.33"

That's pretty innocuous, right ?

But when Ben sent the message, WhatsApp (and by extension, Facebook) collected its location. If Ben sends 5 messages over 10 minutes without changing location, Facebook knows Ben isn't moving too much.

It turns out, Ben is sitting in a waiting room. Waiting to see a discernment counsellor. That's a therapist for people thinking about divorce. Ben wants to work on himself to save his marriage.

Facebook knows who Ben is married to already. They know it from an Instagram story of the wedding posted by one of Ben's contacts (even if Ben himself isn't on Instagram).

Now, from this metadata (his location), Facebook can guess that Ben's marriage isn't doing well.

Before Ben even left the waiting room, his wife Sarah received an ad¹ for a divorce lawyer. 15 minutes later, Sarah sees another ad for a dating app.

You see, even a series "simple metadata" can reveal a lot about you.

This is not limited to Facebook. Anyone with metadata about you can run very complex algorithms and profit from it.

If your bank starts speaking about "sharing data with trusted partners," please opt-out, immediately. Now you know how they can make money from your location and card purchases.

Facebook sells information to advertisers everywhere on the Internet, not just on its platform. So Ben's wife can see the ad anywhere on the Internet, even if she's not on Facebook. ↩

Software engineering and barriers to entry

Mon, 24 May 2021 00:00:00 GMT

In the past decade, job titles for people who code have shifted from "developer" to "engineer." This could do more harm than good if we're not careful.

from-heading: 1
to-heading: 2

I. According to the company, place and time, titles change.

Let's start with an example outside the tech industry: In Canada, the government official dealing with finance is the Minister of Finance. In the UK, that's called the Chancellor. Same job, different job title.

Back to the tech industry now. In a 2010 job ad for Wikipedia, the job title was "software developer." Today, the same job ad for the same website says "software engineer."

The job hasn't changed much, but the job title did.

I already hear the crowds: "But code is complex now! There's state, design systems, caching, container orchestration, complicated stuff! Code today is real engineering!"

Enter: ✨ The Games Industry ✨

The gaming industry is the perfect example why these titles make no sense. At Ubisoft, people working on 3D rendering are "graphics programmers." While people doing DevOps within the same company are "DevOps Engineers."¹

The graphics programmer's job description includes "3D mathematics, rendering algorithms, and data structures." This is as much engineering as a complex back-end.

Secondly, solo game developers aren't calling themselves engineers despite the fact they very much have to think long term about finances, marketing, managing contractors, etc.

Don't get me wrong, some applications like Figma are feats of engineering. No doubt about that.

But not all code is a large-scale, multi-million-user app.

II. Gatekeeping and dumb requirements

Anything that creates imaginary divisions like "you're not a real coder/engineer unless you can do [x]" is wrong. If you make money writing code, you're a professional coder/developer/engineer. That's it. End of the story.

These stupid assumptions gave us whiteboard interviews. Today, everyone agrees that writing a bubble sort on a whiteboard with a pen is useless for people who code with keyboards, screens and Google.

70% of developers are either front-end or back-end developers. Most (if not all) of the complex parts can be learned on the job and don't require a background in computer science. Unlike medicine and traditional engineering, you can start a career without that knowledge.

As a colleague jested: "Y'all aren’t real coders until you edit a etc/hosts file from your terminal with a blindfold."

Cultural and legal matters

Software Engineers ... drive trains. — Wes Bos, Syntax.fm Episode 194

In a lot of countries (Canada, France, Brazil, etc.), an Engineer is what's called a protected title.

That means, you need a specific degree accredited by a governing board to use the title of engineer. You need the degree and with a license, just like doctors. Some places even even have a full-on ritual.

But luckily for us in tech, if you:

Go to an online school
Read, practice and take a few months off to study

It's possible to become a "junior software engineer." Granted, you need the money to study, but it's much more accessible than a law degree.

I'm not done. On top of being a protected title, "engineer" is also a masculine noun in many languages.

There's some contested research² that found that 72% of participants showed stronger associations of science with male and humanities with female. Even if the research is biased, that's still a lot.

"Software"

What happens if you ask people on the street something like: "Give me 2 software names?"

I bet the answers will be something like

Microsoft word
Skype
Some operating system (Android, etc)

Despite zero research to back this, I reckon most people don't think of Snapchat, Tiktok, or Fortnite as their first example of "Software."

There's a lot more fun and playfulness to coding than the boring 90s software stereotypes. Modern coders can work on so many cool projects: Mobile apps, IOT devices, games, even (lord forbid) cryptocurrencies.

Conclusion

Why write all this? My point is that the tech industry already struggles with diversity. Any layer of elitism will make the problem worse.

We need to reduce the barriers to entry for everyone with the capacity to work as engineers.

I'll leave you with a personal note. Throughout my career, I've been lucky to meet a few renowned coders (in person, RIP meetups). They had a large following, peer recognition, and/or open-source projects used by millions.

Not a single one introduced themselves as engineer.

FAQ

This is bound to be misinterpreted, so here's a pre-emptive Q&A.

Should I talk to HR and change my job title?

Keep your job title, you're already in the industry.

Should I start calling myself a programmer?

It's complicated and I don't have all the answers. "I make a web app at [company]" is much better intro than "I'm a lead engineer."

We're hiring juniors, should we change the job ad?

The job description is the most important.
In the description try to talk less about your team's "12-factor apps" but more about how you help each other write solid code. If it's easy to change the job description from something like "junior React Engineer" to "entry-level developer" or similar, then great. It's not a big deal if not.

Who are you to write this?

Nobody. As prescriptive as it may sound, I'm just trying to make this industry more welcoming.

Nothing against Ubisoft, it happens everywhere. ↩
Look for "Gender – science/humanities stereotypes" in the paper. ↩

Manage your personal knowledge with a second brain

Fri, 16 Apr 2021 00:00:00 GMT

Let's say you just booked tickets to Iceland.

You remember an amazing documentary about it from 2 years ago. It would be perfect to help you plan your journey. There was a section on a small town you wanted to visit. What was the name of that town? What was the name of that documentary? Was it on Netflix? You wish you had a reference somewhere. Why is this so hard to find?

This article is about a system to make your daily discoveries useful for your future self. A way to manage your personal knowledge. A "second brain" of sorts. I will also detail my own workflow.

from-heading: 1
to-heading: 2

What's a "second brain"?

A second brain is a way to store the relevant information you consume today so that it's accessible in the future. Your personal, concise, messy Wikipedia. Nothing to do with the enteric nervous system.

This is the concept of personal knowledge management. It's mainstream now because of apps like 𐃏Roam , Notion and Obsidian, but it's not new. The fundamental papers were all written before 2010.

The term comes from Building a Second Brain, an expensive course by Tiago Forte aimed at "creators/artists" that was turned into a book. Not everyone creates content, but everyone consumes information, including you. That's why I wrote this. A few things:

As much as I find the name "second brain" bizarre (I'd prefer "second memory", or something else less organic) it's easier than personal knowledge management system. 🥱
You don't need a fancy app. The original Second Brain course used Evernote and neither Roam, Logseq, Obsidian, nor Notion existed back then. Any note-taking app is good enough to create the second brain that you want.
There is a lot of Internet crap about this subject. People are selling courses, templates, e-books. You don't need any of that.

Why have a system of notes?

You spend a lot of time consuming information. Whether it's news articles, TV or documentaries. As much as 34GB per day according to estimates pre-smartphones. It's definitely a lot more now.

Not everything that you read and watch will be worth remembering. And even if you went to bed intensely thinking about one thing, you'll forget it. Our brains are deceptive.

This system helps us in three areas:

To remember. Store all your fleeting, disjointed bits of interesting information for future use. Create a knowledge base that's tailored to you.

To connect what's currently on your mind with what you consumed previously.

To create value. This one is easy to misinterpret. You create value for yourself by saving time and organising information in a way that makes sense to you. It's also great for recommendations.

Guidelines

Now that you want a second Brain/personal knowledge management system, how do you make it?

These are my own guidelines based on the original operating principles.

Low friction. Make it easy to capture interesting tidbits as they enter your mind.
Quick and messy. Don't worry about the quality of the notes, get into a habit of making them.
Not set in stone. Taxonomy is hard. Categories become abstract and irrelevant. Try to see where the information would fit with your goals. And re-organise everything as soon as it stops making sense.

Next steps

Now, where do we go from here? To recap.

Get a fast app on your phone and computer.
Start taking notes.
Keep in mind the guidelines above.
Don't stop.

Or, read on for my complete second-brain/personal knowledge workflow and my method to centralise information from a variety of sources.

👇

My workflow

I'll repeat that again, it's not about the app. My workflow does a lot and it's specific to my needs but I hope you'll enjoy this.

Desktop: Obsidian

Many supercharged notes apps hit the market recently. The main contenders are Roam (and Logseq), Notion and Obsidian. I chose Obsidian because it's free and not cloud-based.

Obsidian works with files on your computer. It sounds like Paleolithic times before Google Docs when we used Word files, but it doesn't compare. It's polished and seamless. This approach gives us 3 advantages:

Speed. Your notes don't come from servers that can go down or become slow. It's always fast.
Longevity. Startups come and go, but text files will always be around.
Price. Maintaining servers that serve millions of people is hard and costly. Obsidian doesn't need to. It will always be cheaper than cloud-based alternatives.

How it works

Roam and Obsidian are built on the idea of connecting your notes. You add [[backlinks]] to your text and create relationships between your notes.

👉 My keyboard shortcuts, and syntax guide for Obsidian. 💎 Great public digital garden

When to use tags and backlinks

One of the first questions that came up was "#tags vs. [[backlinks]]." You can make both appear in your connection graph, so they're functionally the same.

I struggled with this, but now here's how I decide: You can remove tags and the note still makes sense, not backlinks. Example:

"In this podcast episode, [[Sam Harris]] said 'I feel you, the UK's weather is perpetual October.' #uk"

With the tag removed and the backlink turned into normal text, you get:

"In this podcast episode, Sam Harris said 'I feel you, the UK's weather is perpetual October.' "

(He never said that.)

Tags can also be "nested", meaning you can have "sub-tags." For example, you can have a generic #restaurants tag and your favourite restaurants tagged under #restaurants/favourite.

How I put highlights from books and articles into Obsidian

For Books:

I have a Kobo. I sync my book highlights with Obsidian every time I publish a new book note.

For online articles:

I use Instapaper, and export my highlights to Markdown files for Obsidian periodically using the API. It's the only paid product in my entire workflow.

I try to adopt a "one in, two out" habit with my Instapaper reading list. Otherwise, it grows too quickly. And content at the bottom of the list gets drowned out by newer, shinier articles.

Second brains on mobile

In my experience, epiphanies happen after a shower or during a meal or when you're walking around. Not when you're on your computer. That's why it's important that you can store the epiphanies in your second brain when they occur.

Easiest way (but paid)

Get the Obsidian app for Android and iOS. Pay $10/month for Obsidian Sync. Your notes sync between your mobile and your desktop.

Harder way (but free)

Host your notes in a Github repository and use Git Journal.

It's a bit convoluted to set up, but that's inherent to how Git works. The tutorial is very good. I set it up so that it only has access to just one repo. It works great for me.

Note that you can store your notes in a git repository as an additional backup strategy on top of Obsidian sync.

End

There you go! You learned all about second brains/personal knowledge management. Now go, make your own system, and don't get derailed by the specifics. It's all about what works for you.

Cheers,
Alvin

Thank you to Emma goto, Iain Smith, Halldór Stefánsson, Rishabh Rawat and Herbert Lui for reviewing drafts of this article.

Why I love Audio Drama

Wed, 03 Mar 2021 00:00:00 GMT

Audio dramas are one of my best discoveries from 2019. They're like audiobooks acted out with sound effects. An audio drama is like a movie in your ears. Except longer, more immersive, and even good for your eyes.

They've existed for a while and I frequently listen to adaptations from the 1980s, more on that later.

I absolutely love them.

What's an audio drama?

An audio drama is a gem from the golden age of radio. Before books were adapted for TV and we got series, theatre plays and books were adapted for radio. That's how we got radio dramas.

Back in the day, everyone was in on it. The Hitchhiker's Guide to the Galaxy was first created as a drama for BBC in 1978. The Adventures of Tintin had radio episodes 3 times a week between 1959 et 1963. In Norway, radio theatre started in 1927 at NRK and hasn't stopped since.

Notice I've been using the term radio drama. For the rest of this article, I'll consider Radio Drama, Radio Theatre, Audio Fiction, and Audio Theatre under "Audio Drama." The semantics feel pointless now that everything is distributed digitally.

Audio Drama vs. full-cast Audiobooks

Let's just get the technical bits out of the way. There are 2 differences between audio drama and full-cast audiobooks:

Audio dramas are adapted and abridged (historically for radio).
They have much richer music and sound.

It gets unclear nowadays because audiobooks productions keep getting bigger and more polished. But for me that's still a good way to make the distinction.

Funny legacy

Ian Holm, who played Bilbo in The Lord of the Rings trilogy, first played Frodo in the BBC adaptation in 1981. Show The hobbit song vs Minds Eye in 1973. "It's a bird, it's a plane" comes from The Adventures of Superman, a drama by WOR New York in 1940.

Short and sweet

The first major benefit for me is how much shorter the adaptation is. For example with Emma by Jane Austen:

17 hours for the Librivox full-cast (free and public domain) of the original text.
8 hours for the Audible Original dramatisation.
5 hours for the BBC Radio 4 dramatisation.
9 hours and 24 minutes reading the book at 250 words per minute.

So, that's between 3 and 7 hours of my time back. Just on one book.

Even more examples:

Moby Dick. The book is 213,546 words, a 13-hour read. The dramatised version is 2 hours.
The Divine Comedy. The book is 101,065 words, a 6-hour read. The drama is 2 hrs 50 mins.

Bonus: I can enjoy classic literature

I'm a remote programmer, all I do is process text on screens. After a day's work, there's only so much that I can read. Therefore most of the classic literature was always a no-go for me.

When my brain's fried, I don't have the capacity to go through a hefty book with lots of descriptions like Moby Dick. With the dramatised version, I can experience its magic in a new, immersive way. And I can rest my eyes while doing that. It's a double win.

Forever Young

I watched Whiplash with J. K. Simmons the other day. It was in the backlog for a while because people kept recommending it. Still, I had no clue when the film was made. And I went through most of it not knowing.

Until this one scene came up. It's only a couple of seconds long, a clear shot of Miles Teller's phone on a bus. But that was it, I knew how old the film was. The phone was enough.

Here's my point: Visual effects, fashion, and accessories in Film show their age quickly. Sound effects, much less. Unless the sound quality is noticeably bad, the noises of the world don't change that much.

Production quality

An opportunity for a new world which exists in the mind of the listener.
— Richard Armitage

Two words: Casting and music. The performers in some productions are stellar. I've listened to dramas starring the best actors of our generation. My favourites feature Christopher Lee, Benedict Cumberbatch, Judi Dench, James McAvoy and lots of other names like this. One of John Hurt's last performance was an audio drama.

The cast of The Sandman is a multi-million dollar production.

Second, it's frequent to hear audio dramas with music that's 100% original and performed by a full orchestra.

Imagination and Immersion

There's an immediacy to Audio Drama, it can go straight into your head in a way that no other media can.
— Neil Gaiman

Radio dramas are the only medium (apart from books) that made me look around wondering where I was during reading/listening.

There's also the role that your imagination plays.

When you watch TV, you don't use your imagination at all. When you read a book, it's the opposite, you have to imagine everything. How people speak and look, the sound of rustling leaves, landscapes, you know, everything.

Audio dramas sit in this happy middle in terms of imagination. They give you fragments as voice and sounds to help your mind do the rest of the work and create.

Now where do I start?

Here are some of my favourite audio dramas that I would recommend you.

Neverwhere, by Neil Gaiman – BBC Radio 4

Wolverine, the long night – Marvel and Stitcher studios¹.

Stardust, by Neil Gaiman – BBC Radio 4

The Invisible man – Big Finish

Now open your ears to the worlds of old and new.

Happy Listening,
Alvin

I know, I know, they call it a podcast. It's distributed like one, but it's a really large audio drama production. ↩

Note-taking apps for the data conscious

Mon, 08 Feb 2021 00:00:00 GMT

When I reconsidered my current note-taking process, I came up with a list of requirements for a notes app. Here a few apps that meet them.

Spoiler Alert: Roam doesn't fit the bill.

from-heading: 1
to-heading: 2

Requirements

Features

I won't consider an app for note writing without these features. The apps listed here all have:

Cloud sync between devices. Because it's not 1999 anymore.
A mobile app. Because the most insightful notes are written with wet or greasy hands. Usually after a shower or during a meal.
Dark mode. Because if my little website can have it, they can too.

Data

Notes app contain a massive amount of personal data. Let's make sure it's protected and transferrable.

Your data is protected from third-parties. It is not collected or analysed for marketing and the privacy policy is explicit.
You can export your data.
Your data is portable. You can switch to another provider easily (i.e., exports to Markdown or plain text).

Note-taking apps

Bear

Price: $1.49 / month or $14.99 / year

💚 Yay: It looks sleek and beautiful, it's Markdown-first and the export is great. Made by a small company that takes privacy seriously.

❌ Nay: Apple only (macOS/iOS). I would be OK with just a macOS app for the desktop, but I need my Android app.

🔗 Download link

Evernote

Price: Free on 2 devices only. £4.99 / Month

💚 Yay: Beautiful. Lots of integrations with Zapier and IFTTT help you build workflows with it. Folders and subfolders.

❌ Nay: No Markdown support. They use their own weird-ass HTML specification but it's easy enough to convert the export. Few things annoys me more than repeated marketing banners shouting "TRY IT FREE."

🔗 Download link

Notion

Price: Free for individual use

💚 Yay: Beautiful, Powerful, and has folders (kinda). It's definitely the easiest way to organise things and make them look pretty. And it's free.

❌ Nay: The mobile app is so slow it's unreal. The desktop app is also too heavy. Copy-paste is a bit flaky. Their Markdown export is nonsensical but it's better than no export.

🔗 Download link

StandardNotes

Price: $13.50 / month or $81 / year

This is somewhat of an exception since the free version doesn't give you anything.

💚 Yay: The only app in this list with End-to-end encryption. There's a variety of writing modes. Very ethical company, take a look at their jobs page if you want to be inspired. You can publish your notes online directly for free using their blogging platform called Listed.

❌ Nay: Dark mode only for paid version. It only exports to plain text files and not Markdown. By trying to do too much, none of the "editors" was good enough. I wanted to like this but I found the paid experience very clunky. They honoured their 30-day money back guarantee and gave me a refund.

🔗 Download link

Simplenote

Price: Free

💚 Yay: Beautiful, simple, and easy to use. The sync feature is super fast and reliable. The native apps on all platforms are light and fast too. It's made by Automattic (the creators of Wordpress) so you know your data is in good hands. And it's free.

❌ Nay: Your notes are stored in their database in plain text. Your data is only encrypted in transit. It's hard to organise lots of notes (please add folders!). Desktop writing experience could be improved.

🔗 Download link

Current setup

My current setup is a bit chaotic.

Simplenote for "quick notes" like music to check out, groceries, etc.
Notion for longer and more complex writing (like this article), other drafts and all my work stuff.
Obsidian as a "second brain".

For all the apps that I use for everything else, head over to my /uses page.

Why don't you include [app name] ?

Please see the requirements above :)

If you think there's an app that I should include, please send me an email or a tweet. Similarly, if an app shouldn't be here because I missed something, let me know too.

Good luck!

What’s a digital garden?

Fri, 29 Jan 2021 00:00:00 GMT

Before we get too old
Show me a garden that's bursting into life
— Snow Patrol, Chasing cars

There's a recent concept called a "Digital Garden" gaining popularity. In this article, I'll explain what digital gardens are and what I've learned from them.

So, what's a digital garden?

Unfortunately (or not), it's not an allotment on Fortnite. You know, with carrots and stuff.

A Digital garden is like a blog but ideologically different. Blog articles have a published date, tags, and some kind of editing process. Digital gardens don't, intentionally. If a blog is a magazine, then a digital garden is a public notebook.

Posts in a digital garden range from in-the-moment notes to finished articles. The idea is to update your notes and "grow" them over time, hence the garden analogy. No publication date or nitpicking over writing.

Another component of digital gardens is an emphasis on connecting your notes. Not all gardens implement that but it's not rare to see. Let’s also mention that it’s not an either-or scenario. Some people have both a garden and a blog. Maybe one day you and I will, too.

Why they're great

More fun, less friction. There are less expectations, so they're great if you struggle to put yourself out there. Or if being a perfectionist prevents you from ever publishing. Digital gardens are less serious, messier, and more intimate.

They forego chronological sorting. The only value of chronological sorting is showing the latest article without effort. But people don't visit blogs every day anymore. Chronological sorting just makes it harder to find older articles, and this creates all sorts of problems.

The Lindy effect and publication dates.

Here's a problem: We consider older things on the Internet as "probably outdated."

There are valid reasons for this, because technology changes at break-neck speed. Software tutorials become useless faster than ever¹. "HD" 720p videos look terrible on today's 4K phones.

The ultimate counter argument is a theory called "the Lindy Effect."

The Lindy effect states that the longer something non-perishable (like a book, a movie) has existed, the longer it should exist. If a book has been in print for 40 years, it should remain in print for another 40 years. For obvious reasons, that doesn't apply if the surrounding context changes. For example, anything ever written about the DVD economy circa 2010.

Here's what I'm getting at here: Technologies fade but good ideas don't. Applying "old equals irrelevant" to all online articles can take you away from some wonderful writing.

Digital gardens bypass the problem by removing publication dates altogether.

A whole new world

Reading about Digital Gardens had an unexpected side-effect for me.

Gardens sits at this very interesting space between the worlds of Productivity, Blogging and Web/Software. Notes that you edit, evolve, and connect fit with the concept of "networked thought." There are new apps exploiting this like Roam Research, its open-source clone Logseq, Obsidian and Notion (kinda) that keep popping up everywhere.

I found that people with gardens often think about problems at the intersection of these fields. And it's a refreshing change from sterile CSS discussions or "tabs vs. spaces."

Takeaways

Around 2010, it became trendy to use trade-related terms in web design. It was all about "handcrafted" websites, "software craftsmanship" and "carved" PSD files² done by so-called digital artisans.

I now have a mild allergic reaction to verbs like "tending", "tilling", "weeding" or "crafting" in digital. Maybe that's why I have a /writing and not /garden? I'd like to think it's for the following reasons.

A published date forces me to draw a line and stop re-writing. With the freedom to publish "seedling" articles I would endlessly update the same ones.
There's something about knowing what you thought x years ago.
I actually like obsessing over words.

Lessons

Finally, these are lessons I took from digital gardens:

Published doesn't and shouldn't mean perfect. I know from coding that your current best work will look odd a year later. "Published" means "I'm done thinking about this for a while."
Re-visiting and updating things is fine.
Create a curated, organised writing page (when I have more articles). Reverse chronological sorting is bad.
Add a prominent search. (As above, I don't have enough articles yet.) Give your readers and yourself more freedom to explore.

As with most recommendations on the Internet, this works for me, right now. Your story is a different story.

I want a digital garden!

Great, remove your published dates and organise your articles. And publish more. That's all you need!

If you want to go deeper into the rabbit hole I recommend checking out these NPM packages.

I hope this motivates you to experiment with your own website or take the plunge into the world of digital gardening.

There are exceptions, this article about game physics is still referenced 17 years later. ↩
Yes we used Photoshop back then 😅. It was just a bit before the "code ninja" stuff started. Dark days. ↩

2020 in Review

Thu, 31 Dec 2020 00:00:00 GMT

There must be some kind of way outta here
Said the joker to the thief
— Bob Dylan, All Along the Watchtower

2020, you know, what the hell.

Like you, I could never imagine what this year would be. I remember going into it with a lot of anticipation. It started out so well. It was a point in time when many things would finally click into place. For obvious reasons, they didn't, the puzzle exploded instead. Now I don't have the right words.

All I'll say is that it's been a tragedy, for too many. I know people who have lost a parent, a grandparent or both. It feels weird and inadequate to write about my year from a home office with all the horrors happening all around.

from-heading: 1
to-heading: 2

Achievements

As far as professional and personal achievements go this year, Ueno's CEO has the best framework. My top 3 wins are:

I’m
Still
Alive

I'm also in good health, and I am so glad and feeling incredibly lucky. I hope you are too.

If you like reading people's "year in review" posts like I do, here's my tip for you: Don't. Or rather, do it only if you can turn off social comparison¹ first. Then, ask yourself "Is this going to make me feel bad?" Like going into a lake that your friend said wasn't cold.

Best of 2020

What I can write is a "best of the year" to continue my tradition. I'll try to help you escape with amazing entertainment that helped me escape too.

🎥 Cinema

Disney Nature: Elephant. The Disney Nature series is beautiful. The narrators are always unique and the images incredible. This is probably my favourite one. Elephant surprised me on so many levels. What a remarkable animal.

Call of the Wild. I love Jack London's novels. White Fang is one of the earliest adventure books I read. This was the last film I saw in a cinema. It looks like I won't be going again for a couple of years.

Klaus: What a surprise. I'm not big on Christmas movies, but Klaus is something else. The art style alone makes it worth watching.

Series

Last Kingdom. Even Elon Musk says it's great. It's what I wanted Vikings to be.

The Mandalorian. I only started watching it this year. When it came out, I saw it only as a carrot on a stick to get people on Disney+. I was wrong, it's perfect. It's so much better than the new Star Wars trilogy (Episode VII->IX). The photography and art direction are flawless. The pacing is impeccable, the series is not too violent, and season 2 is a masterclass in diversity. I can't recommend it enough.

🎻 Audio drama

The mill on the floss by BBC Sounds. Amazing at transporting you to another time and place. The producers have a brilliant ability to paint landscapes with words and sounds. The narration by Anna Maxwell-Martin is one of the best I've heard. Listen here.

Marvels by Marvel and Stitcher Studios. I'm not sure you would enjoy it if you haven't read the graphic novel. The first episodes are vague and confusing. Even knowing the subject matter, I struggled to understand what was happening. Still, it's an immersive, spellbinding experience that I've come to expect from Marvel and Stitcher. Listen here.

The invisible man by Big Finish. Earned its place in my top. One of John Hurt's last performances. Get it here.

🎙️ Songs

Conversation with my wife — Jon Bellion²

Everyone (including me!) is doubling down on "content creation" and that comes with its own set of challenges. Conversations with my Wife reminds us to think about what we want in our search of followers. And yes, there's a drop³. Watch it here.

Higher Love (Steve Winwood Cover) — Keith Urban

Keith Urban's performance during the Global Citizen concert in support of Healthcare workers. His performance is on fire 🔥 🕺 🎶 . It has all the components of a good cover: Different, but recognisable, and he gives the song his own spin. Watch it here.

🎙️ Podcast

The Knowledge Project #88 — Derek Sivers. Derek is my new favourite writer/person and this is one of this best interviews. Listen here.

The Crazy One #100 — Rejecting life’s invisible scripts. A great way to frame society's stupid expectations. Listen here

Lex Fridman — Grant Sanderson. They talk about what you should work on, Richard Feynman, education, and teaching. Listen here

Soundtracking with Edith Bowman #212 — Ewan McGregor. Totally unexpected. If you like music, you'll love Soundtracking. Listen here.

Best Purchase

Ring Fit Adventure for Nintendo Switch, no doubt.

Resolutions

Nope.

Hang on here people! There's still a long way to go but the aftermath is a lot to be hopeful for. If you liked any of my articles this year, there are more coming soon, and they'll be a little different.

Onwards to 2021,
Alvin

Social Comparison Theory, in psychology, states that we use other people to evaluate ourselves. This comparison influences our sense of self-worth. Bad idea. ↩
I was obsessed with Jon Bellion in 2017. The one-take acoustic version of Human is unreal (including the moment he pauses to scratch his nose). ↩
"A drop" (beat drop) is a point in a song where the rhythm, pace and energy shift. It works really well in a live acoustic. Only learned the name recently. ↩

Nifty command lines: tldr

Wed, 25 Nov 2020 12:50:00 GMT

This post is part of the Nifty Command Lines series.

There are a few reasons that computer terminals scare people (myself included):

Movie stereotypes of green terminals used by hoodie-wearing hackers in basements.
How terminals try to "help" you.

If you ask me, the default help pages for commands (called man pages for manual, go figure) aren't designed for humans. They make no sense and are impossible to browse.

tldr pages try to fix that. The tldr utility gives you a people-friendly list of examples to help you with a command.

Example with the rename command that we discussed in a previous article:

Compare that with the man page, as follows:

RENAME(1)                        User Contributed Perl Documentation

NAME
       rename - renames multiple files

VERSION
       version 1.600

SYNOPSIS
       rename [switches|transforms] [files]

       Switches:

       -0/--null (when reading from STDIN)
       -f/--force or -i/--interactive (proceed or prompt when overwriting)
       -g/--glob (expand "*" etc. in filenames, useful in WindowsX CMD.EXE)
       -k/--backwards/--reverse-order
       -l/--symlink or -L/--hardlink
       -M/--use=Module
       -n/--just-print/--dry-run
       -N/--counter-format
       -p/--mkpath/--make-dirs
       --stdin/--no-stdin

See how neat this is with ffmpeg, a tool that's notoriously unfriendly.

Also, as opposed to man pages, which require you to install a vim-like interface, tldr pages are easier to contribute to. Everything is in a GitHub repository.

Finally, tldr isn't limited to the command line. There's also a VSCode Extension, an Alfred Workflow and even an iOS app.

If you're convinced, install it with brew install tldr on macOS and Linux.

That's the end of the series! It introduced you to a few, well, nifty tools that I use quite often, and I hope that it will help you reach out to the terminal to save time.

Thanks!

Nifty command lines: host

Mon, 02 Nov 2020 10:28:00 GMT

This post is part of the Nifty Command Lines series.

I've been hosting my websites and my domains with different providers for a long time. Ergo for emails. In order to connect your domain to your provider or to your email address, you need do 🚨Domain Verification🚨. And that means doing a few obscure DNS operations like changing name servers and whatnot.

You set this up on your domain registrar's website. It's usually hidden behind various clunky UIs. Frustrating is an understatement.

Do you know what the worst part is? After you find the hidden thing, paste the random blob, and sear never to do it again, you can't tell for sure that it worked.

That's where the host command comes in. It lets you inspect the DNS records on your domain from your terminal. It probably does other stuff but that's all I ever needed. With this command, you can finally see what your wrangling with the UI did.

Here are a few examples:

Show TXT records

host -t txt alvin.codes

Show A records

host -t a alvin.codes

Show CNAME

host -t cname alvin.codes

Show Name Servers

host -t ns alvin.codes

The host command is similar to the dig command, but it's a lot simpler and easier to remember. I know which one I prefer between typing dig alvin.codes +noall +answer and host -t a alvin.codes.

Bonus: Gitlab & GitHub

Speaking of hidden settings... Here's a bonus for you. Here's what you need to do to connect Gitlab or Github pages to a custom domain.

For Gitlab, 2 things need to be set:

A record set to 35.185.44.232. (Until their IP changes 🤷‍♂️.)
A TXT record set to gitlab-pages-verification-code=[Your Verification Code]

For GitHub you need to create a CNAME file at the root of your repository. You can use with the GUI to set it up with the correct values for your domain.

Then, you need to set the following A records:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Feel free to reach for this article next time you have a domain to set up, I sure will.

Good luck, Alvin

Nifty command lines: rename

Tue, 27 Oct 2020 11:20:00 GMT

This post is part of the Nifty Command Lines series.

The rename command allows you rename multiple files at once. It makes complex operations like lowercasing accessible with a single line. For simpler operations, like changing extensions from .PNG to .png, I usually reach for the action in macOS Finder.

How does `rename` work?

It lets you use regular expressions to batch-rename files. It looks like this:

rename -f '[regex]' [files]

Dry run

You want to remember the -n or --dry-run option. It shows you what the resulting files will be without affecting them.

Example: Replace double dashes with single ones.

~/Export ❯❯❯ rename -f 's/--/-/' * -n
'Example--1.png' would be renamed to 'Example-1.png'
'Example--2.png' would be renamed to 'Example-2.png'
'Example--3.png' would be renamed to 'Example-3.png'
'Example--4.png' would be renamed to 'Example-4.png'

The * in the command above means "all files in the current folder." You can use glob patterns to target specific files.

To rename only .txt files, you'd write rename -f '[regex]' *.txt

Regular expressions

You write your regexes like this s/[old]/[new]/ or y/[old]/[new]/ without the square brackets.

s/ regexes are used for 1-to-1 character replacement, while y/ regexes are for complex replacements involving ranges¹. Here are some general examples.

Replacing dashes with underscores: rename -f 's/-/_/' *

It gets really powerful when you can work on character ranges:

rename -f 'y/a-z/A-Z/' * turns all lowercase into uppercase.
rename -f 'y/A-Z/a-z/' * turns all uppercase into lowercase.

Real-world examples

Turn filenames into URL-friendly "slugs" 🐌:

rename -f 'y/A-Z /a-z-/' *

Remove the last 𝒙 characters in a filename and replace them:

rename 's/.{𝒙}$/replacement/' *

Remove the 34 random characters that Notion's exporter adds to Markdown files:

rename 's/.{36}$/.md/' *.md

Installation

Install it with Homebrew or apt-get: brew install rename or apt-get install rename.

If you want to dig into these (I never did), know that they're Perl regexes. ↩

Nifty command lines: tree

Fri, 23 Oct 2020 10:15:00 GMT

This post is part of the Nifty Command Lines series.

The tree command is an easy way to print files and folder structures. Like you see in a lot of tutorials. Running it without arguments will print your files and folders.

~/code-like-the-90s ❯❯❯ tree
.
├── css
│   └── main.css
├── img
│   └── bkg.png
├── index.html
└── script.js

2 directories, 4 files

Ignoring

You can tell it to ignore directories with tree -I [DirectoryName]. In most web scenarios, you'll want to ignore your npm packages, so tree -I node_modules.

You can exclude more than one folder by separating them with a pipe character.

tree -I 'node_modules|.cache|test_*|public'

This is a must to ignore cache folders, build directories, etc.

Restricting output

The -d flag restricts it to only show your folders and hide files.

~/c/nextjs-app ❯❯❯ tree -d
.
├── pages
│   └── api
├── public
└── styles

4 directories

The -P flag allows you to only show a certain type of files. For example, if you want to list your JavaScript files while ignoring npm packages.

~/my-app ❯❯❯ tree -P '*.js' -I 'node_modules'
.
├── public
└── src
    ├── App.js
    ├── App.test.js
    ├── index.js
    ├── serviceWorker.js
    └── setupTests.js

2 directories, 5 files

Finally, you can restrict how deep in the folder structure you want to crawl using the -L flag. tree -L 2 will only go 2 levels deep.

As usual, install it with Homebrew or apt-get: brew install tree or apt-get install tree

There you go! I've used this command quite a lot to create documentation or get a sense of a new codebase. I hope it will be useful for you too.

Cheers

Nifty command lines

Thu, 22 Oct 2020 22:15:00 GMT

I remember when scary terminals became required for web programmers. You had to, gasp, run commands to do your work¹.

Later, I discovered that I relied on random websites for stuff that command line interfaces (CLIs) do better. Like, convert a font, compress a video, etc.
If websites can break or start showing NSFW ads, CLIs have been around for years, if not decades. It's also easier to remember a command than a bookmark.

Series:

Housekeeping

I recommend using Homebrew to install your command line tools. It works on macOS, Linux, and Windows using WSL2.

No more double-clicking index.html. Who said they miss FTP? Not me... ↩

Under the hood: WebGL sketch

Sat, 03 Oct 2020 00:00:00 GMT

This is the daily log that I wrote back in, erm, some years ago, when I tried doing Codevember. It's how the 3D WebGL graphics currently on the homepage came to be. I'm using Regl 👑, as mentioned in my Tech Stack article.

The original sketch is still available on this link.

Requirements

I've always felt weird about projects that encourage people to create and share works everyday. Projects like Codevember, Inktober or the all-so-toxic #100DaysOfCode. Any kind of peer pressure on carving time out of the weekend always felt uninclusive and unfair. That's why I never participate on weekends even when I can.

Y U NO THREE.js ?

I gave Codevember a try in 2016. I had an absolutely horrible experience when trying to create quick sketches with Three.js. I was not alone in those frustrations. Here they are:

The Examples folder. A lot of major features are actually a few rogue files buried in the /examples folder.
"The three.js way of thigs." Every time I wanted to play with a new concept (e.g: instancing), I had to:
- Understand the concept
- Rummage through the depths of the Internet to look at how to implement that undocumented feature in Three
- Make the example code that I found online work in an ES2015/modern environment that doesn't expect a stupid THREE global variable.
- Actually implement it

In Regl, these are the steps:

Understand the concept
cmd/ctrl+f in the docs
Implement

Daily log

Day 1: Setup and simple torus 🛠️

Started out by setting up all the workflow. I'm not too fond of the default camera, so I leveraged orbit-controls and perspective-camera instead. The Regl tutorials and examples have been very useful too.

The workflow is now only Browserify and Glslify. I think I found a good trade-off between convenience (no Webpack involved!) and speed of iteration.

Day 2: Multiple tori and Glslify 🙈

Figured out how to write reusable GLSL snippets. It usually works fine using a Babel plugin, but for some reason I couldn't get it to function today. But given that I'm in a Browserify environment, I can directly use Glslify.

Created several tori (that's the plural form of "torus") with different arc lengths.

Day 3: Rotated tori 📐

Today I tried to rotate each torus in an intuitive way. Rotations in x, y, and z are a lot easier for me to wrap my head around/visualise compared to the traditional yaw, pitch, roll. This is no airplane.

After trying out a few matrix-based solutions I've come up with an approach in the vertex shader which doesn't look as boilerplate-y as the other ones.

Day 4: Post-processing 🖼️

Implemented post-processing effects. It is done by drawing the scene to a frame buffer and manipulating it.

I've done a fair bit of fighting with one of the FBO examples. The version on the website and on GitHub look different, the code didn't run, but it all worked out in the end.

Day 5: Polish 💅

Played around with Matt Deslaurier's GLSL hash blur module, and wanted to add toon shading with a slightly grainy vignette around it. Then, one of those "generative art happy accident" occurred and resulted it what you're currently seeing, so I'm going to leave it as it is!

Day 6: Toon shading 😈

So, I got toon shading to work based on a combination of things seen here and there, but mainly from Nathan Gordon's Zelda series.

Day 7: Clean-up! 🧹

My next step was going to be about adding an outline shader to the tori, but everything in the code started to a bit too tightly coupled and I'd rather spend half an hour and waste "a day" now, than waste three days later down the line, it's boring but useful!

Back to the present

I'm happy with how this turned out. Migrating the original codebase to this website was a smooth lift-and-shift process. This shows the strength of 👑 Regl and the stack.gl ecosystem, it's not always easy to reuse code that dates back many years.

Acknowledgements

This wouldn't have been possible without the open-source contributions of the following people:

Mikola Lysenko, Eric Arnebäck and Jeremy Freeman, for creating 👑 Regl.
Matt Deslauriers and Hugh Kennedy for creating stack.gl, many helpful modules and for each module creating a standalone demo that still works.

As always, feel free to let me know if you have any questions.

Under the hood: Tech Stack

Wed, 30 Sep 2020 11:25:00 GMT

"What did I get myself into?"

I wondered that many times during the development process...

Why on earth did I choose Gatsby, and bother with React, Remark, CSS Modules, and GraphQL? When I could just use the old Jekyll. In this article we'll have a look at my technical choices.

⚠️ This is now outdated, my website now runs on another framework named Astro.
Read this article to learn more.

from-heading: 1
to-heading: 2

Disclaimer: For brevity's sake I'm assuming a fair amount of prior knowledge. If you would like me to expand, let me know on Twitter.

Requirements

Minimal tech lock-in
High lighthouse score (95, at least)
Try to reduce bundle size as much as possible
The reading experience works without JavaScript

Checkout this page for the full list of sources, attributions, and colophon.

Minimal tech lock-in

I don't want my site to rely on a specific technology too much. I don't use CSS-in-JS, I hardly use React hooks or component methods, and favour implicit declarations over "Gatsby magic." Everything should be easy to reproduce with another generator.

I feel like I made the right choice with Gatsby, and it boils down to two time-saving elements: plugins and built-ins.

Do you want a dark mode? Here's gatsby-plugin-dark-mode. Crazy WebGL graphics with glslify? You've got gatsby-plugin-glslify. An RSS feed? Yep. Gatsby even optimises my images, and adds aria-current to active links.

On the Markdown side of the house, I dearly missed Jekyll's fantastic defaults, but again: Plugins! Remark (the markdown processor) has itself a thriving ecosystem.
See for yourself:

I got footnotes¹.

And the table of contents was auto-generated.

I'm also pleased that I didn't have to fiddle with Gatsby internals too much.

High Lighthouse score

If you don't believe me:
Cmd + alt + I
Cmd + shift + P
Type "lighthouse"
Click "Generate Report"

Hand-drawn images

I wanted to avoid the situation where you read in dark mode and BOOM 💥 you get a chart on a white background. To remedy this, the drawings change their line and background colours depending on the theme.

The graphics are exported from Excalidraw and automatically inserted as inline SVGs and optimised with SVGO.

It turns out, it's even more efficient than using normal JPEGs!

The JPEG of a single drawing is about 100KB. An SVG is less than 10KB. But that's without the font. The font alone is 117 KB, which I stripped down to 38KB with a bit of subsetting magic.

So 2 JPEGs = ~200Kb vs. 2 SVGs + 1 font = 58KB

The more there are, the more worthwhile the savings.

Performance and Bundle size

Throughout the development process of this site I was ruthless when it comes to dependency sizes:

I run every dependency through package-size to make sure there isn't a smaller alternative, and that it's worth its cost.
The fonts are compressed as Woff2 files, self-hosted and stripped of their unused glyphs.
Preact is used to make the Gatsby/React runtime at least 30% smaller.
Images use WebP compression with the <picture> element where possible.

WebGL sites tend to have needlessly large bundle sizes, here's my answer to that.

WebGL

This site was another excuse to experiment with 3D graphics, shaders and WebGL. Three.js was ruled out from the start because of its ~~ridiculously~~ big JavaScript footprint. I tried to strip most features out of Babylon.Js but still, the bundle was enormous. I ended up using Regl 👑 which is way more lightweight but more low-level, (you have to write GLSL). It's battle-tested, has been stable for years², and isn't changing any time soon.

I'm keeping an eye on OGL which is an even smaller WebGL library and even gives us a scene graph out-of-the-box, but the API isn't final yet.

Here's how they compare (minified size):

632.33 KB – Three.js v0.120.1
110.85 KB – Regl v1.6.1
98.39 KB – OGL v0.0.60

Picking Regl over Three.js saves us 500kb, more than a five-fold decrease in bundle size. Performance was also paramount. My goal was a smooth 60fps experience on my old budget Android.

Thanks to Gatsby's code-splitting, the WebGL library is only included in the homepage.

Homepage sketch

First, I wanted to create a fractal. They have always fascinated me, whether in code or in nature. There are a lot of fractals to choose from in 2D, but in 3D they're kind of hard. The only one that I could wrap my head around quickly was the Menger sponge.

After adding a bit of instancing magic, there it was. 60fps and all, except boring to look at. I tucked that code away and turned my attention to another piece of Math & Magic that I had wanted to play with: attractors.

Despite running at 60fps it "felt" sluggish and became boring to look at.

The final attempt at ~~shoehorning~~ adding 3D graphics to this is what you can see on the homepage now.

Gatsby wish list

As with most things in development, there were a few surprises along the way, so here's my wish list for the Gatsby team:

Become evergreen by default

I wish Gatsby's relationship with older browsers was an "opt-in" one as opposed to "opt-out." I prefer a lean website out of the box, with features like WebP enabled and Polyfills removed by default. I would rather add backwards compatibility if necessary. (Right now you have to disable polyfills.)

Disparity in plugin quality

Gatsby makes it easy to find plugins, and to know which ones are maintained by the core team. Despite this, there is a huge variance in the quality of the non-official plugins. I wish more things were parsed out of the plugin repository (like the number of open issues without a response) as some are still referenced despite deal-breaker issues.³

Telemetry

That should absolutely be disabled by default from the stable release.

I understand the idea, but knowing that a seemingly innocuous CLI might transmit data when I'm not explicitly asking it to is scary, and sets a dangerous precedent. The logs may be "anonymised" but doing this is extremely hard and a waste of time.

If it's not disabled by default, then "How to opt-out of telemetry" should at the very least be part of the kick-start tutorial (like VSCode does) and not buried in the documentation. I would even argue that the CLI should ask for again permission every once in a while.

Drop React altogether in favour of Preact.

I can only hope. I understand why Gatsby wants to to be compatible with all the existing React packages. But in my opinion you don't need that in a static-site generator. People won't use react-emoji-picker in a Gatsby site. They need their website to be fast and lightweight.

For now, I'm thankful that the Preact plugin exists and is supported by the core team.

Final words

On top of everything mentioned above, I wrote scripts, GraphQL queries, learned about CSS grids, Exif data, and more. I feel like I've come out of it as a better coder.

Here's a rocket 🚀. ↩
Mikola, the creator of Regl, even moved off-grid to a lava field at one point and no problem happened. ↩
Let me say it loud and clear: People are not obligated to maintain everything they create. I'm just asking Gatsby to help me identify which plugins are in fact, maintained. ↩

New Website!

Fri, 25 Sep 2020 10:30:00 GMT

Let me start with this: Welcome! This site has been in the works for a while. It was hard. Knowing what you want to be seen as, what you represent took a fair bit of self-reflection. I had a lot of fun and learnt a ton along the way.

Personal websites are on the rise this year, and that's a blessing and a curse. More inspiration means more creative energy, but also more points of comparison and higher standards.

So, here are the motivations behind this website.

from-heading: 1
to-heading: 2

Balancing the fun and the functional

I love computer graphics and WebGL, and have been playing with them for a while, but there was a problem: Written content. So far, I've not seen a graphics-rich site that also offers a pleasant reading experience and good progressive enhancement. (If you have, send me links on Twitter)

This was my loose list of requirements:

It works without JavaScript (including the hamburger menu!)
I can play around with 3D graphics
There's a dark mode
It respects your motion preferences
Recognisable and colourful branding
Fun!

So far I think these have been met, but feel free to let me know if you think otherwise.

Owning your platform

Content ownership is the crux of the argument for personal websites. I'd like to think that's why people are moving away from Medium, they want to own their community and their platform. Or it could just be the terrible mobile experience, there's that too.

I plan to use this shiny new site to write about this more, but in short:

(•_•)
<)   )╯ Always
/    \

\(•_•)
(    (>  Own
/    \

(•_•)
<)   )>  Your Platform
/    \

Hat tip to Sean Blanda for this.

Spreading the word

I'm a talker. I never miss a good discussion and ~~pre-2020~~ would stay past late at a pub when in the middle of a great conversation. You already see the problem there. Late in a crowded, dark place with David Hasselhoff blaring on speakers isn't ideal for good thinking.

As a personal website, I want to use this to pause, refine, and structure thoughts and opinions. Try to, you know, help move the needle. Does "Inspire change" sound cliché? Yes, moving along...

There's also a practical benefit. It's much better to send a link to an article as opposed to re-writing the same answers when they come up randomly in Slack channels. I have 7 channels open right now, thanks for asking. That's too many.

Relevant & long-term content

Our industry moves at a crazy pace. It's one of the reasons that prevented me from writing more in the past. There was a seemingly-endless number of articles that I could write, wanted to write, but knew would be irrelevant in a year.

Now I want to focus on evergreen posts that should remain relevant for at least 3 years after publication. Think of All the Domains as opposed to "How to do x in Angular v2." I give you permission to hold me accountable to this longevity statement. Please don't create automatic reminders for that though.

Closing remarks

Thank you for taking the time to read this. If you feel like it, I would love any kind of feedback that could help improve this.

Stay tuned for more.

Alvin

2019 in Review

Tue, 31 Dec 2019 00:00:00 GMT

Another year in review. It's been a unique year in many respects. There were many changes, new adventures, and unexpected discoveries.

from-heading: 1
to-heading: 2

Brexit

It's been a roller-coaster for me and others whose lives have been uprooted or greatly influenced by Brexit. It was all very different when I left for Canada. Back then, a potentially no-deal-inducing deadline was coming: March 31. Then it didn't work, we got 15 extra days to 14 April, then, finally another year of respite.

Today, sadly, Boris Johnson is the Prime Minister, the withdrawal argument was signed. The UK is entering the transition period to exit in January 2021.

The only certainty is that a Norway-style Brexit won't happen. Otherwise, it's as up-in-the-air as it's ever been. We'll keep waiting, with our futures in the balance.

Lived in Canada

There is a lot to this. It's still too early to paint a good picture of it. I'm still crystallising my thoughts on this subject.

Discovered Radio Drama

Dedicated blog post coming one day. They're amazing.

Goal tracking

Thanks to a wonderful episode of Syntax.fm I started tracking goals and setting monthly targets for myself. My partner also adopted it.

This gradually evolved into a solidified set of principles that I apply to a lot of things. It really helped me with various aspects of my life.

Best of 2019

🎥 Cinema

Avengers: Endgame: We saw it on release day and got a giant pizza. I've never seen a multiplex cinema so packed. During the film everyone cheered, clapped, celebrated, cried, all of it. Best audience experience in my entire life.

Blinded by the light: As timely as it could be, and very well done. Some poignant and powerful cinematic shots that will stay with me for a long time.

Song of the sea: Just stunning. As a bonus you'll know how to pronounce Saoirse after watching it.

How to Train Your Dragon 3: Interestingly, I thought this movie came out in 2018, it feels like a long time ago now. Let me say that the How to Train your Dragon franchise is one of my favourites. These were the animated films that made me feel the strongest emotions in the past few years. I would take a Dragon's film over a Pixar if given the choice.

Loving Vincent: It’s incredible, every frame is hand-painted! Watching it doesn’t feel as weird as the trailer because a lot of scenes are black-and-white, which is easier on your eyes.

Artists

Smith & Thell — A mix of The Civil War, Of Monsters Men and The Lumineers.

🎙️ Podcast

Sam Harris #147 — Stephen Fry: Listen here.

Sam Harris #163 — Ricky Gervais: Listen here.

Syntax.fm #67 — Goal Setting: Listen here.

Podcraft — The 10 Commandments of Podcasting: Listen here.

Resolutions

Update 2020: It now pains me to read these, so I've removed them.

2018 in Review

Sun, 10 Mar 2019 00:00:00 GMT

One night, while sipping a drink on the couch with friends, discussing the plays and musicals of the West End that I had enjoyed most, it struck me. Just how much I relied on memory for life events and experiences.

So here I am, writing my first year in review.

We're well into 2019 already, but who cares? This is mainly for myself, but I enjoy reading these and you probably do too.

from-heading: 1
to-heading: 2

A fair bit of travelling

We visited 2 new countries:

Romania
Switzerland

And a few new cities:

New York
Boston
Glasgow
Amsterdam

This was particularly intense between May and September, when we were on a plane about once a month, a first time for us.

🗽 New York City

My first time in New York was definitely something to remember, so much that it warrants its own section here. The epic moments were as epic as predicted, but I was not prepared to see the current state of America's infrastructure.

After hearing about it as a paradise unlike any other place, I did not expect to see so many trash bags on sidewalks, decrepit buildings, and ancient public transports.

I would never have thought that visiting NYC would make me appreciate London more. A lot more, in fact.

A colleague once told me that "America is like a third-world country for public transport". I assumed it was an exaggeration, but I can tell you that it was definitely less than a third of what I expected.

Now, don't get me wrong, except for some parts that really didn't hold up to the standards I was expecting, it is unlike any other place. Despite all that, there's a buzz, a vibrancy, something exceptional there. I am looking forward to visiting again.

A lot of conference talks

I was on a plane or a train for a presentation at least once every other month between September 2017 and July 2018 😵. This was the year with the highest number of conference talks for me, I gave 5 talks between March and July, and there were all new, very different presentations touching on several subjects. No slide decks were reused.

It was exciting, stressful, tiring, nerve-wracking, and surreal.

Speaking in front of a large audience at respected tech conferences was also an important milestone for me and I am glad it worked out the way it did. These events were responsible for very happy moments that will stay with me for a long time.

Moved to Canada 🇨🇦

Oh, boy, what an emotional roller-coaster that was.

From the moment our visas started progressing to the moment we touched the ground, there was always something in the back of our minds that was causing us stress.

We're glad it's over, and will wait to see the four seasons before forming an opinion.

The winter is, different, but there's something to be said about the sun not setting at 3.30pm.

Started listening to podcasts

There's always a bit of a balance when choosing what to include in these kind of posts. Podcasts have had a very positive and far-reaching impact on my daily life, and filled a void that existed but couldn't really be comprehended.

The very first podcasts that I actually listened to somewhat regularly (probably once a week) were Unfinished Business, Shop Talk Show and Happy Monday, back in 2014, before that industry was as big as it is today. Does that make me a podcast hipster? Maybe.

But then I stopped pretty quickly, because I made the stupid mistake to try to listen to them at work, and couldn't (still can't) listen to something that requires my attention while doing anything work-related.

So, why now ?

I get bored very quickly, which is the reason why I never enjoyed running, after 20 minutes or so, my attention falters, even if my body can keep up, I just want to do something else.

It's only this year that I realised that mindless tasks were perfectly suited for this, and podcasts are now my companion for many, many activities, ranging from shopping to household chores.

This also obviously made walking more than 20 minutes for something mundane (like going to the post office) annoying, but not anymore. I am now looking forward to walking places, excited about what the next podcast would teach me.

Thanks to podcasts, I feel smarter, more informed, more connected with the world, and less alone in a busy street or shop.

I will also be forever grateful to JO for introducing me to the "intellectual dark web."

Best of 2018

🎥 Cinema

Oh, there were a lot of great films this year, but two definitely stood out.

Avengers, Infinity war: Immensely anticipated, it's start of the conclusion of years of great Marvel movies, the action and the pace was great, and the visuals too, and the shock that everyone was left with at the end.

The cinema room was silent during the first credits.

The Greatest Showman: Weirdly, I wasn't super excited about this one initially, until someone from my family wholeheartedly recommended it.

I started looking into it a bit more, and realised that none other than Pasek & Paul were behind the music. Needless to say, I watched it not long after. It's definitely the film that made me feel the strongest emotions this year.

🎙️ Songs

2018 was a very interesting year for me musically, I definitely took the time to explore more genres.

Without a doubt, the best song that I discovered in 2018 was:

Waving Through the Window — Pasek & Paul for Dear Evan Hansen

This song has grace, power, and and incredible amount of depth as it depicts the world of someone with social anxiety.

I cannot wait to see the musical, it's definitely at the top of my list.

These Days — Rudimental with Jess Glynne, Macklemore & Dan Caplen

A story of transition into adulthood, broken dreams and the one that got away, told using a very unusual mix of styles.

I describe this song as "The Closer of 2018." As Billboard said in 2016, it manages to "capture the millennial zeitgeist in brilliantly infectious fashion."

Artists

Sara Bareilles — I learned how to play the main turnaround of Love Song a long time ago, but my knowledge of her repertoire was limited to this song and King of Anything, which are great catchy songs.

It's only during this year that I discovered the full extent of her work, from the score of Waitress to an autobiographical book. (Which is best enjoyed as an audiobook narrated and sung by Sara, obviously).

I find myself always coming back to the "soothing end" of her work, with Manhattan, She Used to be mine and Gravity becoming regular companions of nightly walks.

Foy Vance — I had heard his name because he was collaborating with Ed Sheeran a while back. The fact that there is a Foy Vance and a Vance Joy in my playlists was certainly noteworthy (yes, that's a one-letter difference).

Some of this solo guitar work did not inspire me as much, but his piano songs are astonishing. Bangor Town is a beautiful display of raw talent.

Resolutions

It's a bit unfair to talk about new years resolutions now that we're 20% into 2019, but during the mandatory conversation on New Year's Eve, this is what I recall mentioning.

Fitness: I'm still a long way from being satisfied on that front, and Canada made it unbelievably harder.
Communication: Whether it's written or spoken, it's been clear that I need to work on it, let's make it a priority this year.

What an incredible period of time this has been, now this is March 2019 already, so I'll see you all next time 👋

Weak References in JavaScript

Wed, 11 May 2016 00:00:00 GMT

ES6 introduced WeakMaps and WeakSets, which brings weak and strong references to JavaScript, a concept front-enders are not particularly used to. If you're working on games, you have to pay very close attention to how memory and performance is managed.

I'm using WeakMap here as an example, but it's the same for WeakSet too. The main difference between Map and Set is that the latter only keeps unique values.

According to Wikipedia:

In computer programming, a weak reference is a reference that does not protect the referenced object from collection by a garbage collector, unlike a strong reference.

That actually, surprisingly, makes a lot of sense! Wikipedia got me used to definitions like Coroutines are computer program components that generalize subroutines for non-preemptive multitasking by allowing execution to be suspended and resumed.

Alright, what a WeakMap does, compared to a good old Map or {} is each individual key element in the set can be garbage-collected when they are not referenced somewhere else:

If this is the content of a regular Map / {}:

const bigObject = {
  id: 'spritesheet-1',
  data: [
    /* gigantic array with a lot of stuff */
  ],
  description: 'hello bla bla',
};

And you're only using it in the code like this

const spritesheetID = bigObject.id;
// the gigantic array in myMap.data is in memory

The whole object and the gigantic array will remain in memory and will not be CGed until it or its references are destroyed.

Whereas if you use a weak map anything that isn't being used in your program will be garbage-collected.

// create a WeakMap from the big object
const weakMap = new WeakMap(Object.entries(bigObject));

// gigantic array is garbage-collected
const spritesheetID = weakMap.get('id');

Now you could manually delete the keys of the object that you don't use, but this trick saves you having to keep track of your usage because this isn't C++.

People have also found other ways to use this with promises and more in this Stackoverflow thread.

That's all for this post, it's a simple concept but needed clarification for me so I thought I might as well share it.

Alvin Bryan

The Public Domain

What's the public domain?

Why should I care?

But reading online is terrible?

A whole new world

What about music?

How do I know if something is public domain?

Dangers

Where to find Public Domain art

2024 in Review

White Hippo Cartoons

What is it?

How big is it?

How to read the books

Comic strips

1. Large, black and white format.

2. Individual, color comic strips

The Moomin books

The Moomin Canon

Tove Janssen

What made you want to stop coding?

Gatsby to Astro

Why Astro

Leave the React ecosystem

Import all the things

Move to Remark

Telemetry

How I did it: Gatsby stuff

Organise content with Markdown GraphQL request

Replace gatsby-remark plugins

Captions

Static directory

How I did it: general React stuff

Astro wants React code inside .jsx and not .js files

Inline SVGs

React Helmet and programmatically updating <head> tags

CSS modules

Dynamic HTML classes and loops

Link components

How I did it: Other random stuff

Glslify

Dates in frontmatter

The not so glorious parts

Dark Mode Flash

RSS feed

Conclusion

2023 in Review

Lots of travelling

Best of

🎥 TV/Cinema

🎙️ Songs

Albums

Podcasts

Best Purchase

18 months in DevRel

Hit the stage again

Community writing program

Fun demos

Events

A year as a Developer Advocate

Events and sponsorship

Content

12 days of Contentful

Less coding

What I learned

Great design makes great content

Booths are a skill

Friendly conference questions

For the speaker

For the audience

The solution: Breakout discussions + online async

Privacy and security, quickly

1 Password manager

2 Virtual debit cards

3 Encrypt your hard drive

4 Get a VPN

5 Make backups

6 Use Signal

L&D budgets for web people

Replace `gatsby-remark` plugins

React Helmet and programmatically updating `<head>` tags