My latest notes

Introduction to State Machines Using XState
in: Article Notes, date: 2020-04-12

Introduction to State Machines Using XState

Note: This is a really excellent course by Kyle Shevlin. From an introduction to why state machines are useful in your work, to asynchronous management of a state machine, this course covers it at. Please watch it in Egghead first, then come back for the notes.

00:31 - Course Intro and Overview

Three parts, why state machines, second xstate lib, third advanced, like async, promsises, other state machines.

00:07 - Eliminate Boolean Explosion by Enumerating States

The lightbulb example.

An object that has several methods, and a state. It can have both "lit" and "broken" state (wrong). You can guard against this by adding an if guard.

Instead, you can create a state variable to show the possible states of the lightbulb.

Using import maps in Google Chrome
in: Work Notes, date: 2020-03-18

it's under chrome://flags/#enable-experimental-productivity-features (enable it).

The Google implementation document

GitHub repo discussing the import maps implementation

NPM notes
in: Work Notes, date: 2020-03-13

The caret (^) meaning on below 0 version:

^0.2.3 := >=0.2.3 <0.3.0

If you already have a package-lock.json file, then just running npm install won't update the package if a new one is available.

To check the actual version installed run

npm list --depth=0

Functional Architecture Patterns
in: Work Notes, date: 2020-02-08

Functional Architecture Patterns

By Brian Lonsdorf on FrontendMasters @drboolean

The paradox is that architecture starts to break down when the app grows big enough, but in a one day course, it's hard to go that far.

Architecture is subjectiver, can have different goals:, modular, extendable, performance, maintenance, readabality etc. You must chose your north star.

Concept of grouping and naming procedures and grouping them into clases or modules. Same for data. This leads to lot of names.

Domain Driven Design by Eric Evans. A great book.

It's very hard to come up with good names, this book gives good strategy for it.

You need to know the domain when you start coding. And a lot of times you come with names like converter or processors.

TypeScript Patterns
in: Work Notes, date: 2020-02-06

Destructuring with Typescript

My notes from the Udemy course by Stephen Grider. Please watch the course first, then come back for the notes.

You can do destructuring in Typescript, but the type annotation comes after the destructuring.

const logWeather = ({ date, weather }: { date: Date, weather: sting}) : void {

For nested objects:

TypeScript and Redux
in: Work Notes, date: 2020-02-06
  interface AppProps {
  color: string;

class App extends React.Component<AppProps> {
  render() {
    return <div>{this.prpos.color}</div>

ReactDOM.render(<App color="red" />, document.getElementById('app'));

Annotating the state of a class component

There are actually two ways to initialise the state of a class. The "classic" way is via the constructor and super call. With this syntax, you are actually extending the component's state property:

TypeScript 3 fundamentals
in: Work Notes, date: 2019-10-02

These are my notes taken on the online workshop by FrontendMasters.

Workshop instructor Mike North, who runs the developer training program and tech lead for TypeScript adoption at LinkedIn.

TypeScript intro

An open-sourced, typed, superset of JavaScript. It compiles (and runs as) standard JavaScript. This means that the type checking does not happen when the code runs in the browser, only at code authoring and compilation time.

There are three parts to the "ecosystem", the Language, the Language Server (giving information to a code editor) and the Compiler.

Note, that while Babel 7 can also compile TypeScript, it does not do type checking.

Why add type checking?

The idea is to that you make the constraints and assumptions about your application visible in your code. This helps reduce cognitive load, by serving as an extra documentation on the program (visible in a compatible code editor). It also helps catch code errors at compile time instead of at runtime.

State Management with Redux
in: Work Notes, date: 2019-09-18

A one day FrontEndMasters workshop, held by Steve Kinney

The original course


Steve argues that state management is the trickiest part of creating web apps. This is what can break or make your app. If you invest time in thinking about how to structure your app, you will have to write much less code, will be easier to add new features and the UI will be performant (less re-rendering).

He also argues that while there has been some great progression in web dev community, state management is still not a solved problem.

Hard parts of Object Oriented programming in JavaScript
in: Work Notes, date: 2020-02-06

A 1 day workshop held by Will Sentance for FrontEndMasters.

Please watch the course first on FrontendMasters then come back for the notes!

Will Sentance is a founder/instructor at Codesmith a developer bootcamp aimed for mid and senior-level engineers.

Will Sentance

Main concepts of OOP

OOP is still perhaps to most widely used programming paradigm in the professional/entreprise world.

It's a way to "bundle together" data and their relevant functions that may act on this data (encapsulation). So in most cases, you have some data, e.g. a user with its properties (name, score) and some functions that can change this data (increasescore).

Why OOP?

It's easy to add new features. You just "augment" your object with new members (properties) or new functions.

It's easy to reason about. Both data and functions are bundled together, so it's very easy from looking at the code (or the specs) and see what are the related parts of the application.

Efficient for memory. Newly created objects delegate to the same function that only exist in one place in the memory.

Will mentions that the React codebase is still mostly based on OOP.

FFMPEG for web video
in: Work Notes, date: 2019-08-19

I wanted to convert a few videos to web compatible formats (webm and mp4). I run the recipe ffmpeg -i input.mp4 -c vp9 -b:v 0 -crf 41 output.webm, but kept getting the error Invalid encoder type 'vp9' even after manually building ffmpeg on my machine.

Running ffmpeg -codecs | grep vp9 revealed that I did have the right codecs installed:

DEV.L. vp9                  Google VP9 (decoders: vp9 libvpx-vp9 ) (encoders: libvpx-vp9 )

Finally, I've found that there's a more robust way to specify codec: -codec:v libvpx-vp9.

So the correct recipe would be like this:

  ffmpeg -i input.mp4 -codec:v vp9 -b:v 0 -crf 41 output.webm