Articles

Frontend vs Backend

I used to think it would be easy to write backend if I knew JavaScript. I thought it would be easy because Node is JavaScript. I didn't have to learn a new language.

But I was wrong.

But backend was hard to learn. I took ages to learn it. (And I'm still trying to master it).

I realized I had problems learning backend because I thought Frontend and Backend were the same—they were just code.

That's a big mistake.

Frontend and Backend are different beasts altogether. I had to respect their differences before I could learn Backend properly.

If I were to explain the difference between Frontend and Backend (in terms of implementation), I would say:

• Frontend is about perception
• Backend is about communication

How to add Flexbox fallback to CSS Grid

I shared how to build a calendar with CSS Grid in the [previous article][1]. Today, I want to share how to build a Flexbox fallback for the same calendar.

How to build a calendar with CSS Grid

Building a calendar with CSS Grid is actually quite easy. I want to show you how to do it.

Here's what you'll create by the end of this article:

<Image src="/assets/2019/calendar-css-grid/calendar-fixed.png" alt="A calendar built with CSS Grid" />

Stages of learning

Over time, I realized there are five stages of learning.

1. Awareness
2. Panic
3. Avoidance
4. Acceptance
5. Learning

Shutting down Fridays with Zell

If you stuck around for a while, you might have noticed I used to post a video (and an audio) every Friday for most of 2018. I call them "Fridays with Zell".

In 2019, I decided to stop making videos. I want to share why I decided to stop making videos.

Everything You Need to Know About Date in JavaScript

Date is weird in JavaScript. It gets on our nerves so much that we reach for libraries (like Date-fns and Moment) the moment (ha!) we need to work with date and time.

But we don't always need to use libraries. Date can actually be quite simple if you know what to watch out for. In this article, I'll walk you through everything you need to know about the Date object.

Using Standard with VSCode

I use [Visual Studio Code][1] as my text editor. When I write JavaScript, I follow [JavaScript Standard Style][2].

There's an easy way to integrate Standard in VS Code—with the [vscode-standardjs][3] plugin. I made a [video][4] for this some time ago if you're interested in setting it up.

But, if you follow the instructions in the video (or on vscode-standardjs's readme file), you'll come to notice there's one small detail that needs to be ironed out.

Try writing a function the old way, and save it repeatedly. VS code will toggle between having and not having a space before the left-parenthesis of the function.

<Image src="/assets/2019/vscode-standard/functions.gif" alt="VS code toggles between having and not having a space before '('."/>

You get the same problem when you write methods with the ES6 method shorthands:

<Image src="/assets/2019/vscode-standard/methods.gif" alt="Same problem happens when you create methods with ES6 method shorthands."/>

How to go through the job application process—an interview with Chris Lienert

"Do you have any advice on finding a job as a developer?"

Many people have asked me that question, but I can’t give a proper answer because I have never been hired as a developer before. What I did was:

1. Wriggled my way into a Wordpress dev role in an admin-based internship
2. Freelanced
3. Run my own company

So I'm horribly inadequate at answering a question about finding a job.

But Chris Lienert is an expert at it. Chris has experience hiring and building teams of excellent developers. (A fun aside: He used to co-run CSS Singapore, which is a monthly CSS Meetup in Singapore).

I managed to grab Chris (before he left Singapore for good) and asked him to talk about the job application process. You'll hear golden advice in this interview from Chris, like:

1. Chris' opinions about the hiring process.
2. How to improve your chances of getting an interview
3. What to do if you don't get a job
4. How you should write your CV
5. What to do during the actual interview
6. What questions to ask during the interview
7. How to answer any tricky questions you get

Note: We jumped around a lot in this 1.5 chat because Chris has so much to say about this topic. I highly recommend you listen to the audio version if you can.

To make it easier for you to digest, I also summarized what we talked about into three stages:

1. Preparing your CV/Resume
2. Before you apply for a job
3. The interview process

On Advocacy

We're fierce and protective when we talk about stuff we care about. And as developers, we care a lot about these topics:

1. Accessibility
2. Web Performance
3. CSS
4. JavaScript
5. Frameworks
6. Inclusivity and Equality

There are no problems with voicing your opinion. We all have our opinions and we want them heard. I understand and respect that.

But we should be mindful of the way we say things. If we voice our opinions as complaints, name-calling, and shaming, our opinions don't get heard. No change would happen. They simply create a vicious cycle of worry, hate, and anxiety.

If we change how we project our voice, we can make real change happen. And our culture will change for the better.

Maybe we should step away from the online-world for a bit

We developers have become quite a toxic bunch of people to be with. We create fierce "debates" on every media we're in. Twitter, Facebook, wherever we're at.

We talk about how CSS suck (and how they don't).

We talk about Accessibility and Performance (and bitch companies that don't do them well).

We talk about frameworks vs no-frameworks. React vs Vue vs Vanilla JavaScript. And why you SHOULD learn frameworks vs why you SHOULDN'T learn frameworks.

We also talk about how some technologies are "dead" (even though they still continue living for quite some time).

Everyone has opinions. Most of these opinions are complains. We spread anger, fear, and worry in our communications. Daily

This should stop (but it won't, because you can't control what people say or do). What you can do is take a break and ignore what everyone else has to say.

Dealing with nested callbacks

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.

JavaScript async and await in loops

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.

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.