joeytwiddle

/*
 * A tagged template happens when we call a function with a template string, but without parentheses.
 *
 *     exampleFunc`template ${foo} string`
 *
 * What this does is to break the template down into the pure string parts, and the expressions.
 *
 * The function will be given an array as its first argument, containing all the strings.
 * And the remaining arguments will be the evaluated expressions.
 *

joeytwiddle

async function getFoo (bar) {
  const baz = 2 * bar;
  
  const root = await asyncSqrt(baz);
  
  return 2 * root;
}

// Is the same as

joeytwiddle

I recommend using throw over return Promise.reject() when possible, because:

1. If you are inside "promise-land" then your throw will be automatically converted into a rejected promise.
2. But it is shorter, which makes it easier to read.
3. And it retains some parity between synchronous and asynchronous code. (It will continue to work as expected if those lines were extracted into a synchronous function.)
4. Also, throw can be used to break out of a stack of deeply nested synchronous function calls. (Returning a rejection will only pass it up one level. Of course, we shouldn't be returning rejections from sycnhronous functions anyway.)

Although throwing an error is not safe inside callback functions (which are often called from the engine, without a surrounding try-catch wrapper), it is entirely safe to throw from inside an async function (or from within a .then() handler function), because in those cases the throw will be automatically converted into a rejected promise.

Situations where

joeytwiddle

When you have a variable of one type but you want to convert it to another type, there are a few options available to you.

Here are some of the most popular methods:

+=================+===================+=========================+
|                 |                   |                         |
|    Goal         |    Short form *   |    Long form            |
|                 |                   |                         |

joeytwiddle

Do not use forEach with async-await

TLDR: Use for...of instead of forEach() in asynchronous code.

For legacy browsers, use for(...;...;...) or [].reduce()

To execute the promises in parallel, use Promise.all([].map(...))

The problem

joeytwiddle

// The functional way
const objUtils = {
  mapProps(obj, mapFn) {
    return Object.entries(obj).reduce((a, [key, value]) => (
      { ...a, [key]: mapFn(value) }
    ), {});
  },

  filterProps(obj, filterFn) {
    return Object.entries(obj).reduce((a, [key, value]) => (

joeytwiddle

Be Overly Liberal with Thresholds, not Slightly Conservative

This article has now moved to Medium.

---

A mistake I often see in software development is the way people choose thresholds. The developer is told they need to limit certain types of activity, for logical reasons, but they set the limits too strictly.

joeytwiddle

Basic React Gotchas

Some things we learned in the first few months of using React (2017).

Note: This document might not be easy for complete beginners. It was originally written for someone who already knew React fairly well, and wanted some suggested talking points for a presentation they were planning to give to beginners. I have added some examples over time, but there may be room for more.

Also note: This document was written before React hooks, when we were using ES6 classes for components. Some of the advice (especially the earlier sections, and some of the error messages) does not really apply when using hooks.

Hooks have a number of new and different gotchas, deserving of their own document!

joeytwiddle

// A common situation in Javascript:
//
// We have a variable `obj`, and we want to get `obj.foo.bar`
//
// But `obj` might be null or undefined, or `obj.foo` might be null or undefined
//
// So how can we try to get `obj.foo.bar` without risking an error?

// Here are a few different ways to do that.  Which one is clearest?

joeytwiddle

#!/bin/bash
set -e
set -x

# You could put the fs file and the mountpoint inside your home folder
#new_fs_file="$HOME/dropbox_partition.ext4fs"
#mountpoint="$HOME/Dropbox.mnt"
# But that may not work if you are using a fuse-mounted homefolder (e.g. encrypted with encfs)
new_fs_file="/home/dropbox_for_$USER.ext4fs"
mountpoint="/mnt/dropbox.$USER"