Impulse

Every year, my family hosts an Oscar party. We print out ballots of all the nominees, and each of us makes our selections. During the broadcast, we follow along and see who guessed right. But there was always a couple points of friction in this. First, nobody remembers everybody's guesses. And second, it's hard to keep track of everyone's current score. This made for a lot of yelling, "who got that?!" and "who's in the lead now?!". So, I made an app that would answer all these questions and more.

Notable Features

▸ Sign-up for new players

▸ Easy sign-in using numeric PIN

▸ View other players' selections

▸ Highlights correct selections

▸ Make selections, when signed in

▸ Highlights winning nominees (once known)

▸ Calculates and highlights winning player

▸ Sorts players by score

Highlight

I wanted signing in to be simple. But since this app would be sitting on the public web, I also needed it to be secure. My solution was to combine two levels of security. First, the entire app is locked with a public/private key. A user needs a magic link, which stores the public key in a cookie, to gain write access. Second, user accounts are locked with a 4-digit PIN. This is enough security to keep out other family members but is simple enough to make signing in a breeze.

Impulse

I'm always driven by the desire to spread knowledge through explaining complex ideas in simple terms. Even better is to build software to do it. Even better is to make that visual and beautiful and delightful. So I set about implementing a geometric visualization of Bayes's theorem from YouTube. The important outcome for me was to transform the passive consumption of the video's ideas into an active, interactive experience.

Notable Features

▸ Built with Web Components

▸ Fluid Responsiveness

▸ Light and Dark Mode

▸ Keyboard Usable

▸ Efficient, Elegant, Vanilla Stack

Highlight

I'm really happy with the dead simple UX. Clicking on boxes displays percentages and the relevant labels in corresponding colour. Hovering over bottom buttons on desktop (tapping on mobile) lights up the corresponding boxes. Explanation by experimentation and play.

Impulse

While building a weather app using Environment Canada's RSS feed, I needed a way to extract weather data from the XML. A JSON API was not available, and I found the XML API unwieldy. So, I developed a human-centric, JavaScript-friendly API: a simple JavaScript object with intuitive, straight-forward properties for accessing the weather data.

Notable Features

▸ Get current conditions

▸ Get forecast for a specific date

▸ Get weekly forecast

▸ Get hourly forecast

▸ Narrow weekly and hourly forecasts to just temperatures or precipitation or winds

▸ JSDoc documentation

▸ Jest tested

Highlight

One intuitive feature I wanted was the ability to narrow weekly and hourly forecasts to just temperatures or precipitation or winds. And I wanted to do this by chaining.

weather.weekly yields an array of detailed objects for every day of the week, but weather.weekly.temperatures should yield an array of simplified objects with just the day of the week and the temperature for that day. Similarly, for weather.weekly.precipitation and weather.weekly.winds.

To accomplish this, I extended the Array class with getters that could yield the appropriately narrowed arrays. This way, weather.weekly yields a detailed array that can be handled like a regular array. But this array also possesses getters that can yield further arrays.