How to setup ESLint for your next project

how to setup ESLint for your next project nickang blog banner
Photo by Norbert Levajsics on Unsplash

For over a year, I used ESLint at work without knowing. I didn’t have to understand what package exactly was doing the work of linting – it just worked, quietly doing its duty of enforcing no unused variables and imports, keeping consistent code styles, and all that nice stuff.

But I recently had to learn how to set it up for a project I’m working on on the side – a little concept game unpretentiously called the Object Oriented Ice Cream Shop Game. The name is fortunately temporary until I find a more original name. Among other things, one of the reasons I wanted to do a side project was to learn from linter rules of my own choosing. Quick detour about that, then we’ll cover how to setup ESLint for your project.

Learning from linter rules

I’ll write a full post dedicated to this idea, but in short: I believe it’s possible to learn a ton about programming from the linter warnings that frantically wave at you as you code. And I’m not just talking about language-specific learning points – I’m talking programming in general.

For example, I learned that having trailing commas when writing object or array literals is a good idea because it provides cleaner git diffs. That’s not something I can confidently say I’d have considered until it was made clear to me when my linter underlined it in red and I clicked through on its associated comma-dangle rule on ESLint:

comma dangle eslint linter warning

Nuff’ said. Let’s move on to how to setup ESLint for your next project.

How to setup ESLint

Setting up ESLint for a project is actually relatively pain-free.

First, let’s state one of the most important and often overlooked pieces of information you’ll need to setup ESLint:

There’s ESLint the npm package, and then there’s the ESLint code editor package for Atom/Sublime/etc.

You will need to install both to get ESLint to work as you code. If you install only the ESLint npm package, you will need to run this command every time you want to check your code:

That’s obviously not as powerful as having an omni-present code police.

Here are the steps to setup ESLint for your project:

  1. Run npm install --save-dev eslint to save package to your project’s node_modules folder and have it listed in package.json under devDependencies
  2. Create a .eslintrc.js file in your project root directory for configuring project-specific linter rules (alternatively, run node_modules/.bin/eslint --init to use ESLint’s interactive configuration file generator)
  3. Install the ESLint package for your code editor (Atom | Sublime)
  4. Configure ESLint to your needs, installing additional ESLint plugins for specific rules and style guides (eg. eslint-config-airbnb-base for Airbnb’s), and for libraries (eg. eslint-plugin-jest for Jest testing library)

Configuring .eslintrc

Here is an example of my .eslintrc.js file. Note that I chose to use the .js file format, but you can choose .yml and .json and use slightly different syntax.

With that, you’ll have setup ESLint for your project!

One last point before you go.

ESLint is for ES

One of the reasons I got confused was the fact that there are other linters out there.

Taking a quick look at the code editor packages I have installed shows me 5 different packages:

  • linter
  • linter-ui-default
  • linter-js-standard (for JavaScript)
  • linter-rubocop (for Ruby)
  • linter-sass-lint (for Sass)

If I’m not wrong, the first two are mandatory for setting up a linter mechanism in my code editor (currently using Atom). The last two are for different programming languages.

But the third, linter-js-standard, is for JavaScript! Wouldn’t this conflict with ESLint?

I’m glad you asked because it means you noticed that ESLint is for ES – as in, ECMAScript, or more popularly, JavaScript. ESLint is a specific linter software that comes bundled with a default set of rules for JavaScript.

This is my 6th linter package:

  • linter-eslint (to use ESLint to lint JavaScript)

ESLint is project-specific and I believe has become the de-facto standard tool for linting JavaScript. So when your project has ESLint set up, its code will be linted with ESLint and not the other JavaScript linters.

In fact, the linter-js-standard package has a settings option specifically for making this explicit:

linter js standard setup ESLint

Ok, I think that’s all the linter know-how any of us needs to get up and running.

Now just write code and trust that your linter’s got your back. You should, of course, verify that it’s actually working by deliberately making an obvious mistake… but you already knew that.

Happy days ahead!

Like posts like these? Subscribe to my newsletter to get more useful posts delivered once a month to your email.

What is an API?

what is an api blog post banner nickang
unsplash-logoIgor Ovsyannykov

I first came across the term “API” before I knew how to code. It was thrown around by the developers during a hackathon I attended in 2016, and I sort of understood what they were talking about by inference. Back then, my understanding of an API was that it’s a conduit that lets programmers gain access to some data.

Then, as I attend web development bootcamp, I learned that API was an acronym for “Application Programming Interface” and that it was a conduit to not just gaining data from some server, it was also used to send, update, and delete data.

Not long after I started programming professionally, I uncovered a new dimension to APIs. It turns out that “API” is really a catch-all term for a number of things. So… what is an API?

API endpoint

When API is used with the word “endpoint”, what is being referred to as the API is normally a set of dedicated URLs that a server will listen to, waiting for HTTP requests to come through and hit them. This is the first group of things that API refers to:

Openings on a server (in the form of URLs) that will do something on the server when hit by an HTTP request.

“Something” here is typically 1 of 4 actions:

  • Create
  • Read
  • Update
  • Delete

“Read” is the most common action that APIs are designed to carry out. For example, The New York Times has an API that provides other applications titles and excerpts of some of their articles.

Their API endpoint is the URL and when an HTTP request is sent to that endpoint, which exists on a server operated by The New York Times, that server retrieves data from their database according to the specified request and sends it back to the requestor.

This is the first, more intuitive kind of API that non-technical folks can easily relate to.

As you can already guess, there’s another set of things that are referred to as APIs and they are not exactly used for creating, reading, updating, or deleting data per se. So what’s the deal there?

Drag and Drop API

Let’s take a look at a concrete example – the Drag and Drop API of browsers.

This API is one of a big group of browser-related APIs called “Web APIs”. Think I’m making this up? I don’t blame you, but you can verify it for yourself by going to the source of truth for all things web related – MDN. Some other examples of Web APIs are the Event API, Storage API, and Window API.

The term API when used in this context obviously mismatches the meaning of API as in “API endpoint”, so what gives?

Let’s revisit the definition that I inferred earlier on:

“A conduit that lets programmers gain access to some data.”

I was only half correct when I made up that definition for my mind to imbue meaning to what was being thrown around during that hackathon.

Specifically, while an API is certainly a conduit to something, as implied by the last letter “I” that stands for “interface”, it is not just used for working with data.

A better definition of API

Here is a better definition from Wikipedia:

“[A] set of functions and procedures that allow the creation of applications which access the features or data of an operating system, application, or other services.”

In other words, an API is really just a way for a piece of software to access another piece of software.

As Petr Gazarov succinctly explains:

“Let’s say you’re using a third-party library in your code. Once incorporated into your code, a library becomes part of your overall app. Being a distinct piece of software, the library would likely have an API which allows it to interact with the rest of your code.”

That’s so much clearer. Thanks, Petr!

Now, armed with this new understanding, let’s take a closer look at the browser’s Drag and Drop API.

The browser renders things like text and images on the browser window (ie. “web page”), in the process of which it generates an internal representation of that page in what’s known as the Document Object Model or DOM for short. The DOM is a bunch of nodes, each node being an HTML element that usually shows up on the web page.

I’m bringing up this technicality of the DOM because the DOM is a “distinct piece of software” in the browser (which is the overarching software, though it’s an irrelevant detail here). And when we write JavaScript code for the browser, our code becomes a new distinct piece of software that is loaded into the browser.

  • Distinct piece of software A: the DOM and its nodes
  • Distinct piece of software B: our JavaScript code

Here comes the revelation. In order for our JavaScript code to be able to modify the behaviour of certain elements on the web page and control what happens when, say, a user tries to drag an image on the page, the browser must provide developers with an API.

Without such an API, a developer wouldn’t be able to write code to modify the dragging and dropping behaviour of any element because there would be no handles, so to speak, to hold on to and twist and turn.

Sum up

So here’s the summary:

  • API is used by developers to refer to 2 main distinct groups of things.
  • The first and more common use case of the term is between a client (ie. browser) and a server. In this situation, we typically talk about “API endpoints” that HTTP requests can hit and trigger some action on the server.
  • Example of an API endpoint is The New York Times’ Article Search API, which provides third-party applications with access to the titles and excerpts of their articles.
  • The second, less intuitive use case is between two distinct pieces of software. Here, API is used to refer to the interface from which a piece of software accesses another piece of software.
  • Example of the latter kind of API is the Drag and Drop API. It allows a developer’s JavaScript code (which is a piece of software) to gain access to the Drag and Drop functionality (another piece of software) of browsers.
  • Drag and Drop API is one of more than a hundred Web APIs created by various browser makers (like Firefox and Chrome), all of which provide developers with the tools to create rich web application experiences!

How to properly suit up

Legend has it that there’s a right way to put on your manly clothes in prep for a ball (or in my case, a friend’s wedding lunch).

Wearing clothes has always been a thing that kind of just happens, you know, like on autopilot? Perhaps I had to learn it (I’m sure I did, as a noob with my parents’ help) but I’ve forgotten what it was like not knowing how to wear clothes.

So like most people, I imagine, I just put on clothes. But just for fun, not this time. I’m going proper.

Socks first

First, address the rookie mistake – don’t put on your pants before socks!

orange socks on one of my foot

If you’re anything like me, chances are, the pants you’re wearing has somehow magically grown a bit tight.

It’s one of those mysteries deserving full-length treatment in a separate post, but suffice to say, crossing your leg to slip on that sock can potentially be disastrous (to your pants and to your plans).

T-shirt off

Next, with your socks pulled up, if you’re wearing one, take off your t-shirt.

“Why?”, you wonder. Well, because t-shirts are like dredges on the seabed – the seabed being your styled hair.

So, take that raggedy t-shirt you’ve worn for the thousandth time off before proceeding.

Give the hair some style while topless (if applicable)

Every gentleman should style their hair, says every gentleman. Thus, if you so choose to be gentlemanly, style your hair now.

selfie with hair
Most wouldn’t call this a hairstyle, but I just tend to

Yes, you’re half-naked (or fully – doesn’t matter), but this is behind the scenes and it’s OK.

Pee or poop now (if applicable)

You probably put on a bit of fat since the last time you got in that pants. No? Oh yeah, me neither…

Clearing your bowels at this point before putting on your pants has the added benefit of reducing your waist size by just a wee bit. Don’t underestimate it – it might mean the difference between wearable and suffocating!

Shirt on, then pants on

Now it’s time to suit up. Shirt first, then pants, because you tuck the excess of the shirt into the pants and not the other way around.

Embellishments on

We’re close to the end, so it’s time to embellish yourself like a true sculpture to be adored.

Watches and rings and earrings and what-have-yous go on now.

Shoes on

leather shoes and blue pants
My trusty 4 year-old Ecco leather… dress boots? Something like that. It feels and looks great

Bend down to your feet and slip those shoes on. Be mindful of the struggle around the belly area – you’ll want to feel for and gauge the maximum tension your pants can take. Everything has a limit…

Coat/blazer on

Lastly, don’t forget the piece that will make you look just like every other (gentle)man in the room. At least you’ll look and feel sharp.

Finally, time to move on

nick ang suited up
That’s me looking kinda dorky even after suiting up

Ok off with the charades, I’m just kidding about this whole “proper” shenanigans. Satire is hard!

Get on with life, my friend. You look great because hey, you are you – not because you’re properly fancy.

What to do when your bike runs out of fuel

bike motorcycle
Photo by Les Anderson

Hello, friend. If you’re here for an actual guide on what to do when your bike runs out of fuel, skip ahead to the “What to do when your bike runs out of fuel” section below. I’ll be recounting my own experience today first in the proceeding section.

Today after knocking off from work, I hopped on my Honda Shadow 400 and rode away from the office. I was ready to go home to my wife and dog after a long day at work.

Three minutes into the 30 minutes journey though, I noticed my engine getting softer… and I immediately knew that it was running out of fuel. My eyebrows grew heavy.

Continue reading “What to do when your bike runs out of fuel”

Binary Search explained

binary search blog banner nickang
Photo by Pablo Garcia Saldaña on Unsplash

If you’re a software engineer, you’ve probably heard about binary search before. And if you don’t know what it is, how it’s implemented, and its strengths and weaknesses, this post is for you.

Binary search is, as its name suggests, a search algorithm. In fact, it’s one of the most efficient and commonly used search algorithms.

Continue reading “Binary Search explained”

How to implement a Linked List in JavaScript

implement linked list in javascript banner nickang
Photo by LinkedIn Sales Navigator on Unsplash

In this post, you’ll learn how to implement a linked list in JavaScript. This is the second part of a 2-parter post on linked lists (read part 1).

Let’s jump right in!

Continue reading “How to implement a Linked List in JavaScript”

Macbook slow after upgrading to macOS Sierra

mac os sierra banner

Find your Macbook slow after upgrading to macOS Sierra? I recently did too. As a developer, it was painfully obvious that something needed to be done – there is no way I can develop with my Macbook Air (mid-2013) going on overdrive when only Chrome was open. In the end, I solved the problem by finding the process that took up a lot of RAM (syncing of Internet Accounts) and removed it.

I hope this short post will help you resolve your slow and overheating Macbook woes.

Continue reading “Macbook slow after upgrading to macOS Sierra”