The HTML5 canvas fillText method is very barebones. If you’re looking to write multi-colored or mixed font style text (even just bold or italicize a word), you’ll quickly realize that you need to make independent calls to fillText for each change in the text style.

Fortunately, this can be pulled off by taking advantage of the ctx.measureText(text) method, which you can use to track where the last part of text finished off.

I wrote a simple convenience function fillMixedText to showcase how to do this and posted it in this gist:

I’ve been working on a react/redux application, and this has led me to use JavaScript switch-statements much more frequency than normal.

I noticed, while looking at someone else’s code, that they were putting curly braces around the statements after every case clause. I have since adopted this as a convention in my own code. While it seems not much different and you do still need to break or return at the end of the statements to prevent fall-through, there are two nice benefits:

  1. Visually the statements appear much more cohesive and more similar to other control structures (for-loop, if-statement, etc.)

  2. The braces create a block scope, this means that you can define unique, scoped variables via let without bumping into the statements in other cases.

To illustrate the second point, here’s some code that could conceivably appear within a redux reducer.

bad.js:

function reducer(state = {}, action) {
  switch (action.type) {
    case "SET_PROPERTY":
      let { key, value } = action.payload;
      return Object.assign({}, state, { [key]: value });
    case "REMOVE_PROPERTY":
      let { key } = action.payload;
      state = Object.assign({}, state);
      delete state[key];
      return start;
  }
}

It’s not immediately obvious that anything is weird here, however the block scope for each case is the entire switch block. As a result, key is being declared with let twice in the same block! If I try to compile this with a JavaScript compilation tool, like Parcel, then I get the following error:

> parcel build bad.js
🚨 bad.js:7:12: bad.js: Duplicate declaration "key"

If we add the curly braces, then the error goes away!

good.js:

function reducer(state = {}, action) {
  switch (action.type) {
    case "SET_PROPERTY": {
      let { key, value } = action.payload;
      return Object.assign({}, state, { [key]: value });
    }
    case "REMOVE_PROPERTY": {
      let { key } = action.payload;
      state = Object.assign({}, state);
      delete state[key];
      return start;
    }
  }
}

Even if you’ve heard it before, reading other people’s code can be a great way to pick up new coding techniques and ideas!

A quick technical guide to fixing hanging or freezing issues with Parcel when bundling a project that uses Sass with import calls. read full post…
A brief how-to for running a local testing server to view local files (file:///) as if they were on a web page. This helps get around browser issues that only show up for local files. read full post…

21 March 2018

Space Creatures

A project that I built for my application to Recurse Center called “Space Creatures”. read full post…

Peter Coles

Peter Coles

is a software engineer who lives in NYC, works at Ringly, and blogs here.
More about Peter »

github · soundcloud · @lethys · rss

It’s time to get big money out of politics. Join the kick-started campaign to put government back in the hands of the people. Pledge mayday.us now