Hello World

2017 Dec 1

It starts when we received our first personal computer around the age of seven. It was a 386 DX 33MHz machine, and one of my dad’s friends at the school board was a well-known electrical engineer who loved to tinker, which led to him overlocking our machine to 50MHz when you hit the turbo button.

The first thing I remember asking him was, “How do I make games?”

A few milestones stick out in my mind as I progressed through elementary and high school:

  • learning programming languages like QBasic and Pascal from library books,
  • Dungeons and Dragons with my friends,
  • dial-up bulletin board systems,
  • Legend of the Red Dragon (LORD) doorgame,
  • dial-up internet,
  • website development and the world of HTML,
  • Multi-User Dungeons (MUDs),
  • DSL and cable internet,
  • way too much Counter-Strike,
  • Ragnarok Online MMORPG,

A few years passed, creating many applications for many clients and working for a local website development company, and I figured to myself, “hey, I could run a company myself,” and tried it out, Exodus Media Inc, out of the Kamloops Innovation Centre.

It turns out that running a business is a lot harder than I’d imagined, and finding clients is a difficult game in itself! I was nearly bankrupt by this point, ignoring all of the red flags that started appearing. And it was then that I realized, “I need to change this before I drown,” which landed me with my current employer, who happened to be in the same shared offices.

Now, I’m working at an amazing company, Open Gaming Solutions Inc, and I’m learning a whole bunch of new technologies and processes.. and I’m trying to evolve into more than just a programmer, which is very exciting.

Much like the games that I used to play, sometimes it’s a little scary, you need to get into the groove of things with your adventuring party, and grind your way through the dungeon before you can succeed.

So let’s go adventure!

Typescript Timer Number

2017 Aug 23

It appears that in a recent updates to either type definitions in my project, or some library, that a few of my timeouts and intervals might be causing issues:

ERROR in [at-loader] ./src/pages/ExamplePage.tsx:41:23
    TS2345: Argument of type '{ intervalId: Timer; }' is not assignable to parameter of type 'Pick<IState, "intervalId">'.
  Types of property 'intervalId' are incompatible.
    Type 'Timer' is not assignable to type 'number'.

After a little digging, I was able to find that using window.setTimout or window.setInterval should return the correct type of number – it looks like NodeJS uses Timer.

Hope this helps!

SublimeText Multiple Cursors or Carets

2017 Aug 12

I’ve been using MacVim forever, and finally switched to using SublimeText with the vintage mode enabled. It’s scratching many of the itches I’ve had, but one of the main things I liked to do in vim was stuff like prepending content to multiple lines by selecting multiple lines and then typing:

:norm!Iprefix content

After a little digging, I found that you can add the following keybindings:

[
    { "keys": ["super+up"], "command": "select_lines", "args": {"forward": false} },
    { "keys": ["super+down"], "command": "select_lines", "args": {"forward": true} }
]

Now you can hit your command key and an up/down arrow to get multiple cursors, and then perform the insert to all the lines.

React State-Transform Pattern

2017 Aug 11

The Problem

When working with React, one issue I’ve run into is the reusability of certain functionalities in my React Components, but I’ve found that something feels a little weird to be:

class StateMicroChangeComponent extends React.Component {
    ...
    handleSelectCategory(selectedCategory) {
        let allResults = this.state.allResults;

        let filteredResults = this.filterResults(allResults, selectedCategory);
        filteredResults = this.sortResults(filteredResults);

        this.setState({
            filteredResults,
            selectedCategory,
        });
    }
    ...
}

In the above example, I’m happy if there’s only one instance where we perform the filtering/sorting, but if our Component performs these tasks multiple times, it might be difficult to maintain. If the implementation of the filter and sort change, we would need to update all the instances.

What I’ve Started Doing

With the amount of Redux I’ve been using recently, I’ve gotten used to the idea of transforming state as a whole, and applying reducers to it, resulting in more of a state-as-a-whole approach:

class StateTransformComponent extends React.Component {
    ...
    handleSelectCategory(selectedCategory) {
        let state = { ...this.state, selectedCategory };

        state = this.applyResultFilter(state);
        state = this.applyResultSort(state);

        this.setState(state);
    }
    ...
}

Now, if filtering or sorting need a tweak, the applyResultFilter and applyResultSort can contain the specifics, while the components interfaces with the transform function.

This has helped me a few times to simplify my code’s logic, even to the point of defining further functions that I would reuse like applyResultFilterAndSort which does both, for added reusability.