Tiger Oakes

2024

How to fix Storybook screenshot testing

Reduce flakiness in Playwright screenshots

2024 JS Rap Up

JavaScript highlights from 2024...as a rap!

ResizeObserver is a safe place to read scrollWidth/clientWidth

Avoid forced synchronous layout and safely read an element's size.

A Whodunnit Party Meets Tech Innovation

How we put together a murder mystery with the Internet of Things.

Tricks for writing CSS in Fluent UI React v9

Advanced features for clean & performant CSS.

2023

Takeaways from React Day Berlin & TestJS Summit 2023

What I learned from a conference double feature.

The easiest way to set focus on mount in React

Using callback refs to avoid useEffect issues.

mutableStateOf(list) vs mutableStateListOf()

The best way to work with lists and state in Jetpack Compose.

Code showing `/* eslint-disable some-rule -- TODO: use this format */`

The right way to add TODO to eslint-disable comments

How to use the comment description feature in ESLint.

Math formula `f(w) = w0w`

Display math formulas without any CSS or JS

MathML lets you insert math formulas with just HTML.

Alternatives to the resize event with better performance

Exploring other APIs that integrate closely with the browser's styling engine.

Tricks for easier right-to-left CSS styling

Using CSS custom properties for elements without logical properties.

2022

Construction cranes

When is it safe to use import statements in Jest tests?

Slightly confusing conditions around Jest module mocks.

You should use ReadonlyArray in your React state

Preventing a common React bug.

How to use Segoe UI Variable in a website

Loading this font locally is a bit tricky.

Finite State Machine diagram with circular paths and states for Open, Closing, Closed, Opening. In the background a sidebar and content layout is visible.

Make advanced React animation easy using finite state machines

Sync state changes with animations while keeping code readable.

2021

How unpaid internships affect you and the tech industry

Is an unpaid offer worth it? Are unpaid interns the only viable workforce for startups?

How to replace onCommit, onActive, and onDispose in Jetpack Compose

These functions were deprecated in alpha and have been replaced.

FLIK FAQ screenshot, showing questions "Do I have to pay the apprentice?", "What are the tax implications? Is this legal?", and "Would FLIK apprenticeships be similar to unpaid internships?"

Are unpaid internships empowering women in tech?

I don't think so, but it feels like FLIK's business does.

Turning junk phones into an art display

Build your own interactive creation from your pile of old phones.

2020

Deploy a site to GitHub Pages from multiple branches using GitHub Actions

CI/CD combining different branches.

LinearLayout to Flexbox. Shows logos for Android below LinearLayout, and CSS3 above Flexbox.

Going from Android LinearLayout to CSS flexbox

Learning how to create a linear layout in CSS using Android experience.

Lobster trap

The secret trap when using ANY in TypeScript

How one little type wreaks havoc on certain overloaded functions.

How to easily cache Kotlin Android synthetics

Simply changing import statements can improve performance.

React to Jetpack Compose Dictionary

Two libraries with similar concepts. What's the equivalent Jetpack Compose terms for React terms?

/c/Code/mozilla/gecko> git checkout main

How to use git branch aliases with Mozilla Central

Even if a default branch has an odd name, its easy to `git checkout main`.

Maskable Icon template for Affinity Designer

Like Maskable.app for design tools

How to make Android Studio show documentation on hover

My favorite Visual Studio Code feature is hidden behind a setting in Android Studio.

Experimenting with using Eleventy for web apps

Playing around with using Eleventy to pre-render Big Island Buses

Scraping a 15-year-old Drupal site into Markdown files

Moving from Drupal to Jamstack...without any server passwords

2019

Adaptive icon support in PWAs with maskable icons

A new icon format to use adaptive icons on supporting platforms.

Participating in Hacktoberfest 2020 with Firefox Daylight

A guide to being part of Hacktoberfest with Firefox.

Maskable Icons: Android Adaptive Icons for the Web

How to reduce both the amount of code written and the number of listeners needed for JavaScript event handlers.

Animating a strike through on Android

Putting together Android drawable XML files to create animations for Firefox Preview.

The Thinking Behind Simplifying Event Handlers

How to reduce both the amount of code written and the number of listeners needed for JavaScript event handlers.

2018

Automatic resume editor

How I built my resume with web technologies then automated the formatting.

Unifying code to read local and network files

Fetch can read files too.