Articles

How to use Reduce in JavaScript

reduce is an array method that helps you convert an array into a single value. It looks like this:

const callback = (accumulator, currentValue, index) => {
  // return something here
}
const result = array.reduce(callback, initialValue)

• initialValue is the value you want to start with.
• accumulator is the value returned from the previous iteration. It will be initialValue for the first iteration.
• currentValue is array item in the current iteration.

Let's go through some examples.

Choosing between Netlify, Vercel and Digital Ocean

A while back, I jumped onto the hype train and tried to host Learn JavaScript's marketing page on Netlify — I wanted to join the cool kids. After getting charged for it, I switched to Vercel and I got charged for it (again). I finally went back to good old Digital Ocean.

In this article I want to detail the differences between hosting on Netlify, Vercel, and Digital Ocean, along with what I experienced in the process.

How to write super simple and useful regular expressions for the real world

Regular expressions are HARD! They look so complicated, they're turn me off completely most of the time. Sometimes I wished I was smarter so I can use them more effectively.

While working on Learn JavaScript, I noticed that using regular expressions effectively doesn't mean you need to write complicated regex. You can write super simple regex that solves a ton of problems.

I'm going to show you a real example.

Year End Review — 2020

Hello! I want to begin the year with a year-end review again. I like doing these because it gives me a solid sense of where I am today versus where I was last year.

Case Conversion in JavaScript

I got fed-up searching Google for case conversion utilities. The useful ones I found (Voca and change-case) both require an environment that allows me to use npm.

But I was using Vanilla JavaScript. I did not want to include any toolchains in this project, and I'm reluctant to send an asynchronous request to download a module just for case-conversion.

So I decided to write a set of conversion utilities myself.

It's simpler than I thought.

How I set up my Moonlander

I bought the Moonlander ergonomic keyboard and I've been playing with it for a month. I want to share what I think of this keyboard in case you were thinking of getting an ergonomic keyboard as well.

<Image src="/assets/2020/moonlander/split.jpg" alt="Moonlander is a split keyboard." />

Why we should use Ergonomic keyboards

Normal keyboards create tension in the wrists, which eventually lead to backaches. In this article, I explain how that connection happens and why we should use ergonomic keyboards.

What's the difference between an Interface and an API?

I used to think JavaScript doesn't have Interfaces because it doesn't have the Interface keyword, unlike Java.

<Image src="/assets/2020/interface-vs-api/java-interface.png" caption="Interface keyword in Java" />

But JavaScript DOES have interfaces. I found out about this when I tried Googling for the location API, which turned out to the location Interface 🤦‍♂️.

<Image src="/assets/2020/interface-vs-api/location.png" alt="Location interface." />

I was confused. What the hell is the difference between an interface and an API? I sat down and figured it out (as usual). I want to share my newfound understanding with you in this article.

Let's begin with interfaces.

Understanding JavaScript Prototype

JavaScript is said to be a Prototype-based language, so "prototypes" must be an important concept. Right?

Today I'm going to explain what Prototypes are, what you need to know, and how to use Prototypes effectively.

Testing JavaScript Performance

I was curious about testing JavaScript performance and did some research on it.

When I talk about JavaScript performance here, I'm not talking about things like time-to-first-byte, time-to-interaction, etc.. I'm talking about raw computing speed – how long does function X run compared to function Y.

I discovered we can use two methods to test performance – performance.now and Date.now. I was curious about the difference between them, so I made some experiments to document my findings.

Leading Trim is in the works!

I saw an article about Leading Trim and I AM THRILLED. I hope Leading Trim gets into production soon!

A JavaScript Utility Library?

I complied a list of useful JavaScript stuff into a Github repository.

This repository includes code for functions like:

• Mix (Deep assign library that works with accessors).
• Getting translate values
• Getting keyboard focusable elements
• Normalizing button inconsistencies

And many others.

How to improve without receiving feedback

I often get requests from people who want me to look through their work and provide them with feedback. While asking for feedback is a praise-worthy thing – because you want to improve – I don't have the time and resources to give feedback to everyone.

I suspect that's the case for others too. We're all busy.

When I ask others for feedback, sometimes I don't get responses. Sometimes I get subpar responses. I found it hard to get specific, detailed, and actionable advice from people unless they have a skin in the game for helping me out.

For example: You're paying for their services, so they have an incentive to help you. Another example: You're in a project together with them; if you succeed they succeed.

If you get specific and helpful feedback, great! Use that feedback and improve. But the question remains: How can you improve if you don't get feedback?

How to create sites with winding SVG paths

I saw an [article][1] by [Sarah Drasner][2] about how she created [Netlify's million-developers][3] site on CSS Tricks. I was intrigued by how the site was created. (Not the Vue parts, but she coded up the paths on the site).

What paths?

Here's the Mobile and Desktop view, side by side. I'm talking about the winding paths that lead from one set of content to another set of content.

<Image src="/assets/2020/million-devs/million.png" alt="Million Devs site: mobile and desktop versions compared. " />

I always wanted to create a site with curved elements, similar to this. So I took the chance to inspect the code. What I realised blew my mind 🤯.

Giving away 99 copies of The Coding Career Handbook by Shawn Wang

I am SO EXCITED to share this news with you today. I'm going to give away 99 copies of [The Coding Career Handbook][1] by [Shawn Wang][2].

<Image src="/assets/2020/ctcc/ctcc.png" alt="Cracking the Coding Carrer frontpage." />

These copies are at the second-tier package that's priced at $99.

<Image src="/assets/2020/ctcc/package.png" alt="Cracking the Coding Carrer packages." />

TCC: The course that gave me the strength to pursue my dreams

I was living a comfortable life back in 2014. I was living my dreams. I freelanced and I earned an equal amount to my friends who held full-time jobs. I was free.

Or so I thought.

The first three years of freelancing were exciting. I simply loved hopping around different agencies, creating websites for a living, making friends, and knowing more people. I felt I could do this forever. But I was wrong.

Why use Getters and Setters functions

Getter and Setter functions are collectively known as accessor functions. In my previous two articles, I talked about how I created [mix][1] because I wanted to use Getter and Setter functions.

But why do we even use Getters and Setters in the first place?

<Image src="/assets/2020/accessors/why-use-accessors.png" alt="Why use getters and setters?" />

I have two reasons.

1. Syntax reasons
2. Encapsulation

Creating a deep-assign library

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)

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

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." />