Image for post
Image for post
Photo by Jefferson Santos on Unsplash

JavaScript is a strange language. Once in a while, you have to deal with a callback that’s in another callback that’s in yet another callback.

People affectionately call this pattern the callback hell.

It kinda looks like this:

firstFunction(args, function() {
secondFunction(args, function() {
thirdFunction(args, function() {
// And so on…
});
});
});

This is JavaScript for you. It’s mind-boggling to see nested callbacks, but I don’t think it’s a “hell”. The “hell” can be manageable if you know what to do with it.

On callbacks

I assume you know what callbacks are if you’re reading this article. If you don’t, please read this article for an introduction to callbacks before continuing. …


Basic async and await is simple. Things get a bit more complicated when you try to use await in loops.

In this article, I want to share some gotchas to watch out for if you intend to use await in loops.

Before you begin

I'm going to assume you know how to use async and await. If you don't, read the previous article to familiarize yourself before continuing.

Preparing an example

For this article, let's say you want to get the number of fruits from a fruit basket.

const fruitBasket = {
apple: 27,
grape: 0,
pear: 14
};

You want to get the number of each fruit from the fruitBasket. To get the number of a fruit, you can use a getNumFruit function. …


When I want to hide content accessibly, I always turn to Jonathan Snook’s snippet.

.element-invisible {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}

But yesterday, I happened to chance upon Scott O’Hara’s article on hiding content. Scott says we only want to hide content in three different contexts:

1. Hide it completely

2. Hide it visually

3. Hide it from screen readers

When we say hide content accessibly, we effectively mean option #2 (hiding content visually, but not from screen readers and keyboard users). …


Image for post
Image for post
Photo by Émile Perron on Unsplash

Asynchronous JavaScript has never been easy. For a while, we used callbacks. Then, we used promises. And now, we have asynchronous functions.

Asynchronous functions make it easier to write asynchronous JavaScript, but it comes with its own set of gotchas that makes life hard for beginners.

In this 2-part series, I want to share everything you need to know about asynchronous functions.

Asynchronous functions

Asynchronous functions contain the async keyword. You can use it in a normal function declaration:

async function functionName (arguments) {
// Do something asynchronous
}

You can also use it in an arrow-function.

const functionName = async (arguments) => {
// Do something asynchronous…

Image for post
Image for post
Photo by Sergey Zolkin on Unsplash

When you create a package for others to use, you have to consider where your user will use your package. Will they use it in a browser-based environment (or frontend JavaScript)? Will they use it in Node (or backend JavaScript)? Or both?

If you want to create a package that’s usable in both browsers and Node, this article is here to help.

You’ll learn:

1. How to write packages for use in browsers

2. How to write packages for use in Node

3. How to publish your packages for use in both browsers and Node

Writing a package for use in browsers

If you want to include a library in frontend JavaScript, you have to link the library first with a script tag. You can use the library anytime after you link it. …


Image for post
Image for post
Photo by Maarten van den Heuvel on Unsplash

You can decide what files people get when they download your npm package in three ways:

  1. With the .gitignore file
  2. With the .npmignore file
  3. With the files property

We’ll look at each method and discuss which methods you should (or shouldn’t) be using.

Excluding files with gitignore

First, npm will check your repository for a .gitignore file. If there is a .gitignore file, npm will ignore files according to what’s listed in the .gitignore file.

This is the most common way package authors prevent people from downloading extra files.

Let’s go through a simple example. Say you have the following directory structure.

- project-name/ 
|- index.js
|- package.json
|…

Image for post
Image for post
Photo by Mohit Sharma on Unsplash

It’s simple to publish a package onto npm. There are two steps:

  1. Create your package.
  2. Publish the package.

But publishing packages the way the industry does it? Not so simple. There are more steps. We’ll go through what steps are required, and I’ll show you an easy way to publish and update your package.

Creating your first package

This section is for you if you haven’t published a package to npm before. Feel free to skip to the next section if you published one before.

To publish your first package to npm, you need to go through these steps:

First, you need to have an npm account. Create one here if you don’t have one yet. …


When should you npm init?

Most developers run npm init right after creating and navigating into a new project.

It makes sense to npm init at the start of the project because we use npm to download dependencies. Once we npm init, we can begin downloading (and saving) our dependencies.

For most projects, this workflow works.

But if you’re creating an open source project, the best time to npm init is slightly later. If you npm init right after creating and navigating into the project, you’ll miss out a few things.

The best time to npm init

The best time to npm init (for an open source project) is after you added a Git remote to your project. In other words, you should only npm init after you have completed the following…


Easily download JavaScript libraries from npm and GitHub

Image for post
Image for post
Photo by sydney Rae on Unsplash

The most newbie-friendly way to add a library to a project is to:

  1. Search for the library
  2. Look for the source file
  3. Copy the source file
  4. Paste what you copied into the project.

This works, but it’s a painful process. It’s easier if you use CDNs like JSDelivr.

What is a CDN?

CDN stands for content delivery network. Its main purpose is to let users download files faster. Read this article by Fastly if you’re wondering whether you should use a CDN.

CDNS let users download files faster by placing datacenters all over the world. When the browser sees a CDN link, they’ll serve up the library from the datacenter closest to the user. …


My first task in 2019 is to get a new computer. I didn’t want to change computers, but my old one gave way and I had no choice 😭.

Since I’m already switching computers, I thought it’ll be interesting to share the apps I use on a daily basis.

I hope you find some of them interesting!

Apps for writing

I do a lot of writing work (for the blog, and for the courses I make). Here are the apps I use:

  1. Ulysses. This is where I do my idea curation, outlining, drafting, writing, and editing work.
  2. Rocket: Rocket helps me write emojis as if I’m writing them on Slack. For example, to get 😀, I type :grinning. It has autocomplete features so typing emojis become a breeze 😁. …

About

Zell Liew

Frontend consultant; teaching frontend to self-taught devs at zellwk.com. Currently attempting to demystify Javascript at https://learnjavascript.today

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store