Forem: Yoni Weisbrod

How to use Type Guards in Typescript

Yoni Weisbrod — Tue, 21 Dec 2021 19:32:59 +0000

One case where people are often surprised by TypeScript is where there's a union type (a type comprised of multiple other types). It can be confusing when you've clearly differentiated between the two types in the code - but the compiler can't tell the difference.

For example, say we have an Animal that can be either Human or Dog, and we want to implement a speak function:

type Human = { talk: () => void }
type Dog = { bark: () => void }

type Animal = Human | Dog;

function speak(animal: Animal) {
    // if human -> talk
    // if dog -> bark
}

How do we differentiate between Dog and Human here? TS types aren't available at runtime, so we can't check the types. But what we can do is use certain properties as indicators of the type:

function speak(animal: Animal) {
    if (animal.talk) {
        animal.talk()
    } else {
        animal.bark()
    }
}

The problem is that this won't work for the TS compiler. As far as it's concerned, animal.talk is an invalid access of a property since Animal may be Dog or Person, and a Dog cannot talk.

So TS lets you tell it which of the subtypes it is by using a function that returns a type predicate indicating whether or not the argument is a certain type. A type predicate always uses the is syntax:

function isHuman(animal: Animal): animal is Human {
    return !!animal.talk
}

The function itself is called a type guard. If it returns true, the type predicate will be true and TS will understand that animal is a Human subtype of Animal.

Let's swap it in:

function speak(animal: Animal) {
    if (isHuman(animal)) {
        animal.talk()
    } else {
        animal.bark()
    }
}

However, we still suffer from the same problem as above: animal.talk can be either Dog or Human within the type guard. And so to solve it we can cast animal as Human within the type guard:

function isHuman(animal: Animal): animal is Human {
    return !!(animal as Human).talk
}

or remove the dot access entirely using the Javascript in operator:¹

function isHuman(animal: Animal): animal is Human {
    return 'talk' in animal;
}

And finally:

type Human = { name: string; talk: () => void }
type Dog = { name: string; bark: () => void }

type Animal = Human | Dog;

function isHuman(animal: Animal): animal is Human {
    return 'talk' in animal;
}

function speak(animal: Animal) {
    if (isHuman(animal)) {
        animal.talk()
    } else {
        animal.bark()
    }
}

I hope you found this useful!

Thanks to @jazlalli1 for this suggestion! ↩

Navigate local git branches with ease

Yoni Weisbrod — Tue, 27 Oct 2020 15:35:38 +0000

Do you find yourself navigating frequently between local git branches? I put together this bash function that allows you to checkout to a branch using a simple wildcard search.

Syntax: br {any_word} where any_word is a part of a branch name. So if I have a branch called "honey nut cheerios", I could type br cheerios and then my terminal would checkout to that branch.

If there are multiple matches, it just shows all matches onscreen. Then you can switch manually.

Hope you find it useful!

function br {
    OUTPUT=$(git branch --list *$1*;)
    if (( $(grep -c . <<<"$OUTPUT") > 1 )); then
      echo Multiple branches found:
      echo "${OUTPUT}"
    else
      TRIMMED_OUTPUT=$(echo "${OUTPUT}" | xargs)
      echo "Switching to:${TRIMMED_OUTPUT}"
      git checkout "${TRIMMED_OUTPUT}"
    fi
}

When to use Writeable Selectors in RecoilJS

Yoni Weisbrod — Wed, 19 Aug 2020 14:29:54 +0000

A while back, I was leafing through the RecoilJS documentation trying to get a feel for the library, and I came upon a section titled:

Writeable Selectors

"Weird," I thought. Aren't selectors there to read data that can be computed from state?

Why would I ever want to use a selector to update state?

Turns out the selector is a pretty great tool for mutating state! This is for two main reasons: It lives outside your view component, which gives us the benefit of seprating our model and view domains, and it can do everything else that a selector can - i.e., it can directly access whatever state objects you need for the desired mutation.

Back to Basics - Managing State with RecoilJS

Let's take a step back and look at the basics of how state is managed with RecoilJS.

To get started, I recommend creating a sample app, installing RecoilJS, and then wrapping your app in RecoilRoot - all of this is covered in the RecoilJS Getting Started guide.

Less familiar with Recoil selectors? Check out my quick refresher on Egghead

First, we have atoms - these are our basic state objects.

If I were to write a simple restaurant point of sale application, I might express one table's order using an order atom:

const order = atom({
  key: 'order',
  default: ['garlic bread'],   // on the house!
});

Then, in my React component, I would consume the atom using the appropriate RecoilJS action hook™️ for consuming data:

import { useRecoilValue } from 'recoil';

export default function OrderDisplay() {
    const myOrder = useRecoilValue(order);

    return (
        <div>
            <h3>Current Order:</h3>
            {myOrder.map((food, i) => {
                return <div key={i}>{food}</div>
            })}
        </div>
    )
}

Notice that I can't consume atoms directly - I need to use one of the RecoilJS hooks, such as useRecoilValue. Choosing the correct hook gives me finer-grained control over how I subscribe to the state object, in terms of its effect on re-rendering.

In this case, because I'm only listening to data and not writing it, I'm better off using useRecoilValue than either useSetRecoilState or the generic useRecoilState .

Now, say the customer wants to order a hamburger - I'll need to push additional data to the state object.

Updating State - useState Style

In plain old React, updating state is as simple as calling the setter exported by useState.

const [order, setOrder] = useState([]);

const addMenuItem = (food) => setOrder([...order, food])

And I can use the same approach with Recoil's analogous hook, useRecoilState:

const [order, setOrder] = useRecoilState(order);

const addMenuItem = (food) => setOrder([...order, food])

But what if my state mutation gets a little more complicated?

That's where reducers come in.

Updating State - useState + Reducer

Suppose the customer changed her mind and decided to cancel the hamburger?

To handle this slightly more complicated state update, I can create an immutable reducer function that takes the previous state, the change that I want to implement, and returns a new state object. Then, as before, I'll call the setter to update the state.

import { useRecoilValue } from 'recoil';

export default function OrderDisplay() {
    const [myOrder, setMyOrder] = useRecoilState(order);

    // reducer function
    const removeFoodItem = (currentOrder, foodToRemove) => {
        const foodToRemoveIndex = currentOrder.findIndex((val => val === foodToRemove));

        return [...currentOrder.slice(0, foodToRemoveIndex), ...currentOrder.slice(foodToRemoveIndex + 1)];
    }

    const onRemoveFood = (food) => () => {
        const newOrder = removeFoodItem(myOrder, food);
        setMyOrder(newOrder);
    }

    return (
        <div>
            <h3>Current Order:</h3>
            {myOrder.map((food, i) => {
                return (
                    <div key={i}>{food}
                        <span onClick={removeFoodItem(food)}>[x]</span>
                    </div>)
            })}
        </div>
    )
}

The thing is, now that I've defined a separate function to handle the update logic, it becomes clear that the function doesn't really belong in this view component. It's just kind of noise.

So let's extract it out:

const removeFoodItem = (currentOrder, foodToRemove) => {
    const foodToRemoveIndex = currentOrder.findIndex((val => val === foodToRemove));

    return [...currentOrder.slice(0, foodToRemoveIndex), ...currentOrder.slice(foodToRemoveIndex + 1)];
}

import { useRecoilValue } from 'recoil';

export default function OrderDisplay() {
    const [myOrder, setMyOrder] = useRecoilState(order);

    const onRemoveFood = (food) => () => {
        const newOrder = removeFoodItem(myOrder, food);
        setMyOrder(newOrder);
    }

    return (
        <div>
            <h3>Current Order:</h3>
            {myOrder.map((food, i) => {
                return (
                    <div key={i}>{food}
                        <span onClick={removeFoodItem(food)}>[x]</span>
                    </div>)
            })}
        </div>
    )
}

Much cleaner :)

Except that we need to explicitly feed this method the currentOrder from our React component, because a reducer is simply an immutable function. Let's see if we can make this even cleaner.

Using Selectors to Update Data

Let's start by looking at the regular selector. I'll define a selector that will return the total price for any order by cross-checking the food menu with a price list:

const priceList = [
    { name: 'cappucino', price: 5 },
    { name: 'latte', price: 7 },
    { name: 'espresso', price: 1.5 },
    { name: 'coffee', price: 4 },
    { name: 'cheesecake', price: 4 },
]

const order = atom({
    key: 'order',
    default: [],
});

const orderInfo = selector({
    key: 'orderTotalPrice',
    get: ({ get }) => {
        return get(order)
            .map(food => {
                const foodFromList = priceList.find(i => i.name === food)
                return foodFromList ? foodFromList.price : 0;
            })
            .reduce((sum, current) => sum + current, 0
      }
});

The selector defines a getter method that itself takes a get object as an argument and uses it to extract the order state object in order to cross-check it with our price-list, and then sum up the prices. It can be consumed just like we consume an atom - with the appropriate RecoilJS action hook™️ .

Updating State - Writeable Selectors

Now how about writeable selectors? A writeable selector is a selector that exposes a setter method in addition to a getter (yes, a selector can expose both).

We'll use a writeable selector to add food items to our menu (like what we did before using useState):

const addFood = selector({
    key: 'addFood',
    set: ({ set, get }, newFood) => {
        set(order, [...get(order), newFood])
    },
});

And now we would use the useSetRecoilState hook to consume this selector, and just call it with our new food of choice, à la:

const setAddFood = useSetRecoilState(addFood);

...
<div onClick={() => setAddFood(food)}>{food}</div>

Rather than putting our state modification logic in the view component, or using an immutable reducer method, we've declared a single method that can do two things:

Access the data from our store, and
Update the data exactly how we want

The elegance of this really shines when we apply it to the slightly-more-complicated removal of food items:

const removeFoodSelector = selector({
    key: 'removeFoodSelector',
    set: ({ set, get }, foodToRemove) => {
        const currentOrder = get(order);
        const foodToRemoveIndex = currentOrder.findIndex((val => val === foodToRemove));
        set([...currentOrder.slice(0, foodToRemoveIndex), ...currentOrder.slice(foodToRemoveIndex + 1)]);
    },
});

Look familiar? Yep, we've just combined the reducer logic with the ability to directly access our state object.

And now, finally, we can really clean up our view component:

import { useRecoilValue } from 'recoil';

export default function OrderDisplay() {
    const removeFoodItem = useSetRecoilState(removeFoodSelector);

    return (
        <div>
            <h3>Current Order:</h3>
            {myOrder.map((food, i) => {
                return (
                    <div key={i}>{food}
                        <span onClick={() => removeFoodItem(food)}>[x]</span>
                    </div>)
            })}
        </div>
    )
}

Notice how the final product abstracts away all state updating logic to where it belongs, i.e. where the model is defined and where it can access any other data that it requires without it having to accept it as a parameter from the view layer.

I'm not saying that writeable selectors are necessarily the best way to define state updating logic. How you architect your state management depends very much on system requirements and personal preference. But it is a compelling a choice.

Hacking Google Sheets with JavaScript

Yoni Weisbrod — Fri, 14 Aug 2020 15:05:02 +0000

I knew Google Sheets were extensible.. but I didn't know that you can actually hack the menus, add custom functions, and gain programmatic access to loads of Google functionality. And all with a little JavaScript!

In this post we'll learn how to create custom Google Sheet functions, which are the basis for a lot of this functionality.

Prefer watching a video? Check out my Egghead lesson on this topic!

Built-in Google Sheet Functions

For those newer to spreadsheets, the concept of functions already exists in the form of built-in functions that you can call.

There are mathematical functions like SUM and COUNTUNIQUE, date functions like TODAY (to get today's date) and DAYS (to get the number of days between two dates). And there are functions that allow you to access Google APIs, like GOOGLEFINANCE, which allows you to include auto-refreshing stock prices in your spreadsheets.

And Google Sheets doesn't really care whether a function is built-in or custom - they're called in the same manner. To call a function, just type = and then the function name. For instance:

Our First Custom Function: `rateMyDay()`

Now let's create our first custom function, which takes a numeric rating of our day and returns a one-word description of it (e.g. - 4/10 could return meh.)

We'll start by going to the Tools menu and clicking Script Editor, where we'll create a new project for our scripts.

New projects begin with this sample function:

function myFunction() {

}

So let's add our function, which takes a decimal value and returns some text:

function rateMyDay(decimal) {
    return decimal > 0.5 ? 'Pretty pretty good' : 'Eh.';
}

And now to call our function, well go back to our Google Sheet, and call it with a value from our day:

Input values

Notice that we've supplied a cell reference here, rather than an actual value.

Google functions accept two types of arguments:

A value (like 1 or 2 or purple).
A cell reference, or a range of cells (e.g. A2:B3, which refers to all cells between those two coordinates).

How does this look in real life?

In all cases, Google Sheets will supply an actual value to the function. So how does that look when we're referring to a range of cells?

2-dimensional array syntax

An important thing to know when writing Google Sheets functions is that ranges are converted into a two-dimensional array syntax that refers to individual rows of cells:

[[1,2,3], [a,b,c]]    // 2 rows, where the first has numbers and the second has letters

This applies to both function arguments and return values. That means that if we accept a range as an argument, Google Sheets will convert that range to the two-dimensional array, and we'll need to iterate over it in order to do whatever we want to do with the values.

And if we want to return a range of cells - meaning we want Google Sheets to place our results in a range of cells, not just one - we signify this range using the same two-dimensional syntax.

Note that Google Sheets will override whichever cells currently occupy the ones that you want to fill. So if you return a range of values, multiple cells will be overridden.

Returning a range of cells

So let's say we wanted to print some dummy data for 5 days. We can have our function create a five-member array (i.e. five rows), and put our decimal rating and the ratingInWords on each row:

function rateMyDay(decimal) {
  const ratingInWords = decimal > 0.5 ? 'Pretty pretty good' : 'Eh.';

  return Array(5).fill([decimal, ratingInWords]);    // [[0.5, 'Eh'], ...]
}

Conclusion

This is just a fraction of what custom functions can do, but it's enough to do quite a lot of damage.

You can also trigger functions from buttons and drawings, add custom menus, and access a range of functionality from the entire Google suite. As a caveat, note that built-in spreadsheet functions are not directly accessible from custom functions. So you can't, for instance, access the GOOGLEFINANCE function from within your custom function without some sneaky workarounds.

The Wizardry of CSS Animations (And Why It's Easier Than You Think)

Yoni Weisbrod — Sun, 29 Mar 2020 17:57:25 +0000

For many developers (even front-end devs), animations are a bit of a mystery.

But you don't need to be a CSS ninja or professional CodePen artist to create an impressive visual effect. Most animations and effects that you see in the wild really only take a small set of skills to create.

In fact, you can learn these skills in the 6 minutes that it takes to read this article! (OK plus a few more to do the exercises.)

By the end, you'll have no problem telling a transform from a transition, or figuring out what the heck keyframes are. You'll be able to confidently put together your own animations and effects.

Like this sort-of-Mario coin animation: (give it a click)

Animation Basics

In CSS, any property that has values that fall along a spectrum can be animated.

Font sizes, colours (since they fall along a colour spectrum), onscreen position, even border radius - all these have values that can be expressed in a range. This is in contrast to properties like display, which has a closed list of potential values.

What's midway between display: block and display: none? Now there's a noggin scratcher!

So we can animate any property with a spectrum of values - and that includes the transform property.

What are CSS Transforms?

Transforms are not just for animations - they're a CSS property used to manipulate how things are rendered onscreen in general.

You can use them to execute visual manipulations, such as increasing the size of an object, rotating it, skewing it, or moving it (or scale, rotate, skew, translate). You can also specify that you want the transform to only apply on a particular axis.

Take two examples: transform: scale(0.5, 2) is a shorthand for reducing the width (X axis) of an object by half, and doubling its height (Y axis). The same syntax can be used for translating the position an object: transform: translate(5px, 50px) would move it 5px to the right, and 50px down.

Now, say this drawing is me working to get the handstand for a good year with little-to-no success. With CSS, I could get it right away if you would be kind enough to rotate me Xdeg or Xturn:

Solution:
transform: rotate(90deg) or rotate(0.5turn)

What if you wanted to deliver my handstand while making me a little taller? You can combine multiple transforms by adding them to the same line. E.g. transform: rotate(0.5turn) scaleY(2).

3D Transforms

Transforms can also operate in 3D. To create the Mario-style coin animation, you'll need to rotate the coin on its Y axis. 2D rotations don't help much for a circle in this case (think turning a coin around as it lies flat), so you'll need to use rotate3d and tell the browser which axis you want it to move along:

Syntax: transform: rotate3d(x, y, z, degrees) where (x,y,z) are each a number between 0 and 1 denoting the axis. To rotate an item exactly along the X axis by 90 degrees, you would use: rotate3d(1, 0, 0, 90).

What happens when you try to rotate this coin by 45 degrees along the Y axis? What if you do a regular 2D rotation? What about a 90 degree 3D rotation?

Solution:transform: rotate3d(0, 1, 0, 45deg) Interestingly, the coin disappears when we rotate it 90 degrees. This makes sense in real life - imagine rotating a real coin 90 degrees. If it has no depth, it would disappear from view. In CSS, items can never have depth (or "extrusion"). We could create 3d space by using the perspective property on a parent box and then translate the Z position toward or away from the viewer (transform: translateZ(Xpx)), but this wouldn't create depth - it would just move the object closer or further away.

Transitions: Getting from Property A to B

Now, what if you wanted to animate the movement of an item from point A to B? Or a color change, or a rotatational transition, or a scale transition, or one of the many other CSS properties that are animatable? (See the full list here). This is where we arrive at transitions.

To define a basic (non-keyframe) transition, you need to tell the browser the styling at a starting moment in time, the styling once the transition is complete, and any other information about the transition itself. For example:

Example 1 - A hover effect

Let's create a simple sunshine effect when the mouse hovers over the sunshine.

Syntax: To create a transition, you can either use the shorthand to define all properties in one line:

transition: border-radius 2s ease-in 5s;

Or you can define each property individually, e.g.:

transition-property: border-radius;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 5s;

This is our starting sunshine - hover over it, and you'll see the halo. But sunshine doesn't look like that!

Let's create a nice gradual sunshine effect by adding a transition for the box-shadow property on the sunshine.

Solution: transform: box-shadow 2s; and clever observers will note that I used the same actor as I did for the coin above ;)

Example 2 - The coin spin

Let's go back to our previous coin, but now I want you to add a spin rotation. The user clicks this coin, and then it spins on its Y axis 180 degrees. To do this, you'll need to declare a rotational transform on the active state and a transition on the base state. You can practice on the initial coin here.

And check your work or look at the desired effect here: (click and hold)

Notice that the animation goes backwards when the active state is removed. That's because the transform changes to an implied rotation of 0 once the object is no longer active. The same transition is re-applied, but back towards the starting value.

Example 3- Doubling up

Let's combine two transitions! To animate this Mario-style coin effect, you can combine two transitions on a single line, e.g.:

transition: transform 2s, padding 100s

To make the coin value magically appear while rising upwards, define a transition on the opacity and top values. (click and hold the coin to see the starting effect)

Solution:transition: opacity 2s, top 2s; Now what if you wanted the money value to slowly rise up, appear, and then quickly re-dis-appear upwards into the sky, like smoke?

You'd need finer control over the animation, which you'd get with..

Animation + keyframes

The css animation property replaces transitions when we want finer-grained control over our animations - either by describing component parts of the effect with keyframes, or by setting other values of the animation. In contrast with regular transitions where the start and finish CSS are defined on the object, with animations, only the starting CSS is defined on it. After that, the animation property takes over until the end.

Animation shares many attributes with transition, and - like transitions - you can define its values in shorthand or as individual properties.

One thing you must supply, however, is the corresponding keyframe:

.myObject {
    animation: fancy-keyframes 5s linear;
}

You can define the keyframe by declaring a keyframes @at-rule, and then using from, to, percentages of the entire sequence, or any variation of the above. For instance:

@keyframes fancy-keyframes {
  from {
    top: 0;
    opacity: 0;
  }
  10% {
    top: 10px;
    opacity: 1;
  }
  75% {
    top: 0px;
    margin-top:
  }
  to {
    top: 200px;
    opacity: 0;
  }
}

At this point you should have all the skills necessary to build the final rising-smoke animation! Challenge yourself to build this by going back to the previous CodePen and implementing it with keyframes!

This is the effect that we're going for. No peeking at the CSS just yet! (click and hold to see the effect)

Industry secret: One tricky thing here is to pause an animation at a single point. To do that, you can just duplicate a keyframe at a later percentage :)

But of course, this isn't actually how coin grabbing works! We shouldn't have to hold our mouse down to get the animation to play until the end. There are some (really) hacky CSS ways to accomplish this, but honestly - this is the point where I would hang up my CSS hat and put on my Javascript hat. Right tools for the right job.

We can accomplish this with React, Vue, or any framework, but all we need to do is add a class onClick, so we might as well just use vanilla JS (remember that?).

We'll create a Javascript function that adds a class (element.classList.add(myClassName)), and then add it to the onClick of our coin element. Aaand while we're at it, we'll add some more animations to our animations!

And now, without further ado... click the coin:

Happy animating!

If you enjoyed this post, have a look at a few lessons that I've created at egghead.io.

Credits

Many thanks to Nitzan and Deb for taking the time to go through this post and give me terrific feedback! And to Ofer and Diana for inspiring me to write this post after coming up with some impressive visual effects at Lemonade Insurance.