Articles

A new (and easy) way to hide content accessibly

When I want to hide content accessibly, I always turn to [Jonathan Snook's snippet][1].

.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][2]. 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

JavaScript async and await

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.

Publishing packages that can be used in browsers and Node

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

How to ignore files from your npm package

You can decide what files people get when they download your 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.

The best time to npm init

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.

How to publish packages to npm (the way the industry does things)

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.

How to use JSDelivr

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 easier if you use CDNs like JSDelivr.

My CSS reset

Many frontend developers begin styling their websites with Normalize. Some developers have personal preferences they add on to Normalize.css. I have my preferences too.

In this article, I want to share these preferences with you. personal CSS reset (that I use in addition to Normalize.css) with you.

Migrating to a new Mac

Setting up a new Mac is painful. Here are some of the things I have to do:

1. Install all 47 applications I use every day.
2. Provide the right credentials for each application.
3. Change macOS default settings to the ones I like.
4. Set up coding configurations.
5. Move files from the old Mac to the new one.

I estimate at least a three day's worth of work (downloading things and waiting for them to download 😴) if I have to install everything manually.

But I was able to set my computer up in hours (automatically) thanks to dotfiles.

Setting up my new Mac (Part 1—the apps I use)

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!

RSS and Tags are here!

Many people wanted two things at Zellwk.com:

1. An RSS feed (to get updates without going through emails).
2. An easier way to browse the articles I created.

I finally found the chance to provide these features!

Zellwk.com is now open source!

Good news!

I decided to open source my blog. You can see the source code (for almost everything, except credentials) over at this [Github repo][1].

It's okay to write dirty code

Many developers feel they need to write clean code. They're good developers only if they write clean code. They're lousy developers if they don't.

I feel the same way too. And I try to make my code as clean as possible.

But this attempt to write clean code actually slows most of us down. We learn slower. We make fewer things. And as a result, we contribute lesser to this world.

I want to make a point that it's okay to write dirty code. I want to give permission for myself and for you to write dirty code in this article.

Sit down and figure it out

Many people try to learn code this way:

1. Watch a video
2. Follow along with the video
3. Expect they'll be able to code

But they fail. They can't build things on their own. They panic when they stare into a blank file.

Well, that's because they missed a critical step in the learning process. They didn't sit down and figure things out.

Using small pockets of idle time

Let's say you finish a task before the time is up. You have another 5 to 15 minutes more. What do you do with this time?

If you get distracted during work, you may also end up with this 5 to 15 minutes left. What do you do with it?

If you find yourself in a distracting situation, like having to take care of a baby who cries every now and then. You probably have 5 to 15 minutes pockets of time very often. How do you use this time?

I think you can use it in four possible ways:

1. Use it do errands
2. Use it to learn
3. Start the next thing
4. Use it to chill

Year end review—2018

We're already at the end of 2018. This year passed by so quickly. To be honest, 2018 is a weird year for me because it's filled with great success, but at the same time, I feel like nothing special has happened.

Checking if an input is empty with JavaScript

Last week, I shared how to [check if an input is empty with CSS][1]. Today, let's talk about the same thing, but with JavaScript.

It's much simpler.

Here's what we're building:

<Image src="/assets/2018/empty-input-validation-js/check.gif" alt="When input is filled, borders should turn green" />

Checking if an input is empty with CSS

Is it possible to know if an input is empty with only CSS?

I had that question when I tried to make an autocomplete component for Learn JavaScript. Basically, I wanted to:

1. Hide a dropdown if the input is empty
2. Show the dropdown if the input is filled

<Image src="/assets/2018/empty-input-validation-css/autocomplete.gif" alt="autocomplete demo from https://learnjavascript.today" />

I found a way to do it. It's not perfect. There are a few nuances involved, but I want to share it with you.

The Gitignore file

If you don't want to commit a file into a Git repository, it makes sense not to have the file show up in the staging area.

You can do this with a Gitignore file.

Why support older browsers?

Why you have to care about old browsers?

Who use old browsers? Probably, users with old computers?

If they use old computers, they probably don't have money to buy a new one.

If they don't have money to buy a new computer, they probably will not buy anything from you as well.

If they will not buy anything from you, why you have to care about supporting their browsers?

To a business person, that's a perfectly reasonable train of thought. But why do we developers still insist on supporting older browsers?