Articles

Snowpack + Eleventy + Sass + PostCSS

Published on: Jun 10, 2020

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: Jun 3, 2020

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.

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

Published on: May 27, 2020

I talked about the key bindings I used to switch between tabs and panels last week. This week, I want to share some wicked shortcuts I use for the Integrated Terminal.

They're really sweet. 😘.

How to think like a programmer

Published on: May 27, 2020

"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: May 20, 2020

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: May 13, 2020

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:

Syncing preferences across Mac and Windows
Syncing extensions across Mac and Windows
Syncing key bindings across Mac and Windows

Bash vs Zsh vs Fish

Published on: May 6, 2020

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: Apr 29, 2020

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: Apr 22, 2020

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: Apr 21, 2020

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.

Free Workshop on Branding and Marketing yourself as a developer

Published on: Apr 13, 2020

Here's a funny piece of data from the survey I sent out last week:

91% of developers feel that marketing is important
But only 13% bought a book to learn marketing

Building a Simple CRUD app with Node, Express, and MongoDB

Published on: Apr 9, 2020

I finally understood how to work with Node, Express, and MongoDB. I want to write a comprehensive tutorial so you won't have to go through the same headache I went through.

Setting up Windows for web development

Published on: Apr 8, 2020

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:

Mac is expensive!
My old Mac is a goner
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.

A Simple CLI for Convertkit

Published on: Apr 1, 2020

When I need to check a person's details on Convertkit, I need to log in to Convertkit and search for the person's email address. This process takes time, energy, and clicks.

I'm not in the state to check a website when I'm doing work. I want to find the person's information quickly and get stuff done.

So I created a command line interface for [Convertkit][1].

Element.focus vs aria-activedescendant

Published on: Mar 18, 2020

When you build JavaScript components, you need to manage focus for both keyboard users and screen readers. The WAI-ARIA specs say there are two ways to manage focus:

Using element.focus and tabindex
Using aria-activedescendant

Which should you use and why?

I did in-depth research on these two methods and I'd like to share my findings in this article. Take a seat and grab some popcorn because it's going to be a long article.

Overcoming my panic towards accessibility

Published on: Mar 11, 2020

Accessibility is a big part of JavaScript. If you build anything with JavaScript, you need to make them accessible.

I've been afraid of touching accessibility for a few years now. This fear magnified when I began writing the accessibility lessons for [Learn JavaScript][1].

Today, I want to share with you why I became afraid of accessibility, and how I overcame this fear.

Here's an updated version on how to install MongoDB on a Mac.

Designing Learn JavaScript's course portal

Published on: Feb 12, 2020

Learn JavaScript is my flagship JavaScript course. It helps people go from knowing nothing about JavaScript to becoming a professional JavaScript developer.

Today, I want to share with you how I designed Learn JavaScript's course portal.