Creating a deep-assign library

Published on:

I created a [library][1] to merge objects last week. It's called mix. mix lets you perform a deep merge between two objects.

The difference between mix and other deep merging libraries is: mix lets you copy accessors while others don't.

[You can find out more about mix in last week's article.][2]

I thought it'll be fun to share the process (and pains) while building the library. So here it is.

Copying properties from one object to another (including Getters and Setters)

Published on:

Object.assign is the standard way to copy properties from one object to another. It is often used for copying properties that are one-layer deep. (One-layer deep means there are no nested objects).

It can be used to extend settings from a default object. Here's an example:

const one = { one: 'one' }
const two = { two: 'two' }
const merged = Object.assign({}, one, two)

console.log(merged) // { one: 'one', two: 'two' }

Unfortunately, Object.assign doesn't copy accessors. (Accessor is a term for Getter and Setter functions). Object.assign reads the value of a Getter function and copies that value instead.

let count = 0
const one = {}
const two = {
  get count() {
    return count
  set count(value) {
    count = value
const three = Object.assign({}, one, two)

console.log('two:', two)
console.log('three:', three)

Try logging two and three in a Node environment. Accessors will be logged clearly. You'll immediately see that three.count is NOT an accessor.

<Image src='/assets/2020/copy-accessors/accessors-not-copied.png' alt='Accessors are not copied into three.' />

Getting the horizontal and vertical centers of an element

Published on:

I often find myself needing to calculate the horizontal center and vertical center of an element.

One example is a popover.

<Video gifReplacement src="/assets/2020/bounding-box-helper/popover.mp4" />

To position the popover perfectly, I need to know the horizontal and vertical centers of the button that triggers the popover. Here's one example of a calculation I had to make.

<Image src="/assets/2020/bounding-box-helper/popover-calc.jpg" alt="One of the popover calculations." />

Polymorphism in JavaScript

Published on:

For the longest time, I thought that "Polymorphing" was about converting something into sheep (thanks to Warcraft). The sheep image stuck with me and made it hard to understand exactly what Polymorphism is.

Today I want to explore what Polymorphism actually is. (Fun fact: Most articles about Polymorphism in JavaScript covers less than 1/3 of what it actually is).

Arrow Function Best Practices

Published on:

When this is used in an arrow function, this will be the this value in the surrounding lexical scope.

Arrow functions change MANY things, so there are two best practices you need to know.

  1. Don't create methods with arrow functions
  2. Create functions INISDE methods with arrow functions

How I work with arrays

Published on:

There are many flavours to arrays in JavaScript. The possible methods you to create or change arrays are: unshift, shift, push, pop, splice, concat, slice, destructuring, rest operators, and spread operators.

There are also looping methods like for, forEach, map, filter, reduce, find, findIndex.

17 different flavours! 😱.

I want to document how I choose the array methods I use. This should help you understand how to pick methods.

Snowpack + Eleventy + Sass + PostCSS

Published on:

I was able to create an Eleventy + Snowpack + Sass + PostCSS setup that works pretty well. I want to share this setup with you in this article.

First look at Snowpack

Published on:

I was tinkering around with Dynamic Imports this week when I saw Snowpack in the [JavaScript Weekly][1] newsletter. It caught my eye and I gave it a whirl.

I managed to get a decent Eleventy + Snowpack + Sass setup in a couple of hours. I'll share this setup next week. But first, I want to share some things I noticed about Snowpack.

How to think like a programmer

Published on:

"I don't get JavaScript. I can't make components from scratch. My mind goes blank when I stare at a blank JavaScript file. I guess I can't do it because I don't know how to think like a programmer".

Sounds familiar? You're not alone, my friend. Many people faced the same problem when they try to write JavaScript.

No more.

Let today be the day where you learn to think like a programmer.

Customised (and effective) Visual Studio Code keyboard shortcuts for Mac and Windows

Published on:

Since I code on both Windows and Mac, I want my Visual Studio Code shortcuts to be interchangeable on both systems.

So I dug deep into Visual Studio Code's keyboard shortcuts for both systems and made my personal customisations.

I want to share these customisations with you so you can use them to rock at Visual Studio Code too 😃.

Syncing Visual Studio Code settings between Mac and Windows

Published on:

When I got my Windows computer, the first thing I did was to set up Windows so it [mirrors the writing system I had on Mac][1]. I also [mirrored Mac's modifiers as much as possible][2].

Then, I set up my [Windows development environment][3] (with Windows Subsystem for Linux) on my new Windows computer.

Next, I had to do was to make Visual Studio Code on both Mac and Windows play nice.

By "play nice", I meant:

  1. Syncing preferences across Mac and Windows
  2. Syncing extensions across Mac and Windows
  3. Syncing key bindings across Mac and Windows

Bash vs Zsh vs Fish

Published on:

When I set up my computer, I had the chance to take another look at the shell I'm using. The three main ones out there are Bash, Zsh, and Fish.

I knew of Bash. I used Zsh previously. But how would Fish fare? I've heard great things about it, so I tried it out.

I want to share which one I chose and how I went about setting it up.

Preventing a Windows PC from adjusting the screen's brightness automatically

Published on:

Mac changes the brightness of your screen automatically. It brightens up when you're in a bright place. It dims when you're in a dark place. They do it elegantly and slowly. Most of the time, their brightness adjustment is great.

The same cannot be said for Windows. I noticed huge changes in the screen's brightness (which causes me to get distracted). I hated it, so I removed it.

Turns out, it's not as easy as you think it should be.

Emulating Mac's Dvorak-Qwerty-⌘ on Windows

Published on:

I write A LOT. When I got my Windows PC, the first thing I did was to change the keyboard so it's the same as my Mac's keyboard.

I want to show you how to do this. It'll help if you're transitioning from Mac to Windows! (Or if you want to use both at the same time, like me).

Build Your Developer Brand post-mortem

Published on:

I did a post-mortem for Build Your Developer Brand (which I gave last Friday). I wanted to share this review openly in case anyone is interested in my thoughts.

Setting up Windows for web development

Published on:

After a [horrible experience][1] with my 2018 Macbook, I decided it was time to buy a Windows device as my backup machine. I chose to use Windows as a backup because:

  1. Mac is expensive!
  2. My old Mac is a goner
  3. I need a Windows computer for accessibility testing (NVDA + Firefox combination anyone?)

I ended up buying a Surface Laptop 3.

Setting up Windows was harder than I imagined. It was especially hard because I wanted this Windows machine to mirror everything I do on Mac.

In this series of articles, I'll explain everything I did to configure my new Windows machine. This should help you out if you're switching from Mac to Windows.