Getting the horizontal and vertical centers of an element

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

One example is a popover.

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.

One of the popover calculations.

Polymorphism in JavaScript

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

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

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

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

I was tinkering around with Dynamic Imports this week when I saw Snowpack in the JavaScript Weekly 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

“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

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 😃.

Hold on while i sign you up…

Woohoo! You’re in!
Now, hold on while I redirect you.