Tom's Two-up Two-down

Fancy a cuppa?

Welcome to my home. Come in and explore the rooms in my two-up two-down to see what I've been up to. You are currently in the front room on the ground floor. The kitchen is down the hall, and the bedrooms are on the first floor upstairs.

My front room is your front room. I furnish this space with my latest thoughts, largely on software engineering. Tell me your thoughts via my contact details below.

Travel Cents

I participated in a Small Business Hackathon, and my cross-functional team researched, designed, and built a React front-end prototype to help small businesses in the hospitality sector. You can read more about it in my portfolio on the first floor.

Pink Calculator

Project idea: Build a pink calculator with React.

Brief: Calculate with a pink calculator. You can change the color if you prefer another color. You will calculate better with your favorite color of calculator!

Background: Build a Pink Calculator with React using function components and hooks. Test it with Jest and React Testing Library.

Technologies: React, Javascript, HTML, CSS, Jest, React Testing Library

Eloquent Tips

I was cleaning out a notebook, and I noticed several tips I'd written down about NaN, null, and undefined while reading Eloquent Javascript.

NaN is the only value in JavaScript that is not equal to itself

> NaN == NaN // false

Accidental type conversions often return NaN, which is worth remembering when debugging.

> let five // undefined
> five + 2 // NaN
> five = 5
> five + 2 // 7
> five = "five"
> five + 2 // "five2"
> five * 2 // NaN

World's Best Person

Project Idea: Nominate someone as the World's Best Person

Brief: User can nominate someone to be named the World's Best Person. After submitting the nomination, user can send a note to the person they nominated. User can read the other nominations.

Build Command - Nil Points!

I forgot to update the Netlify build command on my latest project, monkeyCatRobot. I installed and configured Rollup to bundle my code, and everything worked fine locally. But there was an error when I deployed to Netlify's CDN. I spent a good bit of time rummaging around the interweb with no luck, and I drafted a question, which I almost posted to Stack Overflow. Then I remembered I had made the same mistake on my last project. Fool meself once... The correct build command: rollup -c && eleventy. Nil points.

Here is the question I nearly posted to Stack Overflow:

Shuffle a Deck of Cards

How do you shuffle a deck of playing cards? I created a shuffle function using the Fisher–Yates Shuffle for a game I was working on, and I've tweaked that code a bit for this example. We will swap a random card from the unshuffled portion of a deck with the last unshuffled card in the deck. We then decrement the number of unshuffled cards and repeat. Got that?

Lets take a look at the code. First, I generate a new deck, which is an array of card objects. Then I pass the deck to a shuffle function.

11ty Collections Tags Scheme

I use 11ty's collections tags to organise my blog content. In each blog post's front matter, I assign values to the tags key. All blog entries have a tags key of "post," and I break out posts into three different letterbox tags: article, note, and card.

Today Has an "a"

We can use the logical && and || operators to determine whether to invoke a function depending on an expression's truthy/falsy value. Here is a simple example:

  • The day of the week includes the letter "a", and I need to blog
  • Either I already blogged today (stop evaluating), or I need to blog

And this is how that looks in JavaScript:


Project idea: Send a monkeyCatRobot to friends.

Brief: User can make a cybernetic organism that is 1/3 monkey, 1/3 cat, and 1/3 robot. User can send the cyborg to friends via email and sundry media platforms. User can pull the handle on a one-armed bandit, and instead of random fruit, the bandit returns a monkeyCatRobot. User can swipe to switch the cyborg's different 1/3s to create a custom monkeyCatRobot. User can incorporate lobster, dog, and astroid miner body part 1/3s to build a mutant monkeyCatRobot.

A Markdown Guide

This guide is based on the CommonMark help page and spec along with Markdown flotsam found on the web, such as these tips.


# This is an `<h1>`
## This is an `<h2>`
### This is an `<h3>`
#### This is an `<h4>`
##### This is an `<h5>`
###### This is an `<h6>`

This is an <h1>

This is an <h2>

This is an <h3>

This is an <h4>

This is an <h5>
This is an <h6>