I am a competent engineer, but when it comes to working with open source, I have no clue what that is. I tried many times trying to learn, but failed.

In October 2022 I participated in the annual Hacktoberfest. This was my first time getting involved in open source. As of writing this article, there are just 7 days left for this year's hackathon. This article will help you participate in open source in general even after the event is over. So let's get started:

Okay, so a good way to learn something new is to just dive into the topic and get comfortable doing it.

But where do you start? I watched this video from Kent C Dodds on how to contribute to OSS. This course covers the technical parts pretty well. You should definitely check it out to get your Git setup.

Now here's the golden question: Which repository should you contribute to? Kent again has a blog post about which open-source project you should contribute to. The summary of his message is, you should contribute to the things you use on a daily basis.

So I started to make a list of all the projects I use. Mostly the NPM packages I use on a regular basis like express, axios, moment, etc. I also found this excellent repo with a list of open-source projects you can contribute to. Looking into the repo, I found a lot of familiar names. I went to many of these projects and tried to understand the repo by reading the README, the issues, and pull requests tab.

I gotta say I am not good at reading so it soon bored me. I found these two projects cdnjs and Brave browser interesting so I looked further.

Once I found a few interesting projects to work on, I started using the GitHub web interface. The contributions I want to do are many low-hanging fruits. I want to be familiar with the entire Git workflow with low-effort high-reward activities.

How Not to Spam when Contributing to Open Source​

When I say low-hanging issues, I don't certainly mean adding a space or a tagline to documentation and calling it a contribution. No, this is spam.

If you take a look at shittoberfest twitter, you will find out what are some of the spam contributions people make. When starting open source, you don't wanna send a bunch of spam towards a repository and ban you from the account.

The point is, your contribution should be thoughtful which helps the overall project.

Below, you will find a few of my low-effort contributions to get an idea of what kind of contributions you should do (click on the link to see the full commit information):

Removed sButton because it's archived

Add microdiff library to cdnjs

Update documentation for JS Beautify

Adds facebook open graph tags to 2 files

Now let me show you how you can contribute to open source using the GitHub web interface,

How to Contribute with the GitHub Web Interface​

GitHub's web interface is excellent for contributing to open source when you are just getting started. You can fork projects, make pull requests, comment, upload files, and many more. If you are just starting out like me, you should definitely give the web interface a shot. The contributing guideline from cdnjs even encourages people to contribute a package using the web interface when making a single commit.

While reading the list of cool open-source projects,

I found a project listed under the CSS section. So I went there and saw this project is not maintained anymore.

Removing this project from the list would be a great start to OSS. If I remove it, other devs won't have to spend their time exploring a project which is already archived.

So I removed the item from the readme file and created a new pull request.

Unfortunately, there was a red Invalid mark next to it.

GitHub has these actions setup by the project maintainers.

In my case, the automated script checked and saw I did not edit the correct file.

Going back to the contributing.md file, I learned that I must update the data.json file instead of the README file. The readme will be auto-generated from the json.

Lesson learned. Read the contribution guide.

I deleted this pull request and made a new one following the process.

The overall process of making a pull request looks like this,

Fork the repo you want to contribute to.

Go to your version of that project.

Make changes to the files by clicking the pencil button, or add new file.

In this case, I changed the data.json file to remove the sButton project from the list.

After making the changes, commit them by filling out the form,

• Write a compelling title for your PR.
• Add a detailed description explaining what you did and why you did it.
• Create a new branch name to identify your change like: pr/your-change.

Commit the new change by clicking the green Propose Changes button.

After you click this button, you might see a green button to create a pull request, but don't. Clicking this button will just create a pull request into your own copy and not to the project you want to commit to.

Now go back to the original project by clicking the small link under your project url:

Now over here, you will see a new button for you to Compare & Pull Request.

Click on it and you will be presented with another window to commit your changes. This time, it will be auto filled with your commit info. If you wish, you can edit your commit message and description.

For my commit, I described the change I made and submit the request.

Now I can go to the pull requests tab and see my PR.

This time, my PR was not marked as invalid and it was waiting for review from the maintainer.

Within a day or two, I received an email from GitHub that my PR was accepted and merged into the code.

And just like that, I made my first contribution to an open-source project. It was a minor edit, but I got to learn the entire GitHub work flow.

In the following days, I started exploring cdnjs and trying to contribute to some more code,

I have some more sections written for this tutorial.

For time shortage, I was only able to publish this first section. Be sure to check back later or follow me on Twitter to stay updated on the next parts. You can look at my contributions in open source on my Github profile.

To be continued...

The best part is, all the pages are statically generated and they load up instantly with a click of a button. Docusaurus is built on top of React and JavaScript, so it's yet another reason to use it.

I set up a demo site following the instructions and one by one, copied all the posts from my WordPress blog to the new docusaurus site.

I could have saved this time by automating this process. John Reilly has a guide on how to automate this process with a TypeScript script. His method is to export your blog in XML format (WordPress also does that) and then import them to Docusaurus with a script written in TypeScript.

When creating a docusaurus site, your articles will be stored in a directory like this:

I put them by year. I create a directory per blog post because I wanna have a dedicated images folder to call for images.

All the blog posts are written in a unique flavor of Markdown, MDX. With MDX it is possible to import additional React components to make an interactive blog experience.

For the blog post meta, there is this special front-matter syntax you can use. The front matter handles the title, slug, tags, and author information.

---
title: Mastering JSON in ReactJS
slug: json-reactjs
authors: tamalweb
tags: [reactjs]
image: ./images/feature.png
---

Rest of the article goes here...

Since I am the only author of this blog, I set my info into the authors.yml file. Whenever I set this author username, it will call what's in the yaml file.

tamalweb:
  name: Tamal Chowdhury
  title: Software Engineer
  url: https://tamalchowdhury.com
  image_url: /img/tamalweb.jpg

Docusaurus is open source, and so is the code of my blog. You can find the entire code in this repository.

I have hosted this blog on Netlify. Every time I make a new update to the master branch, Netlify will rebuild the site and host it on their awesome server for free.

Finally, when it comes to SEO, I haven't done anything out of the box. I make my blog articles' title SEO friendly, and the slug human friendly. Every time I write a new post, I try to tag them and link to and from other relevant posts. There are some long-form blog articles I wrote following the Project 24 SEO method.

I think that's about everything about my blog. If you have any additional questions, then send me a DM or tweet me @tamalchow and I will update this post with the answers.

Prerequisites​

To follow this tutorial, you will need the following:

• A modern laptop or desktop computer with internet access.

Step 1 – Install Node.js on Your Computer​

In this step, you will install Node.js on your computer. Node.js is a JavaScript runtime engine. All the modern JavaScript bundlers like Webpack and Gulp make use of Node.js to be able to do their bundling work. Even if you are not working as a backend developer, Node.js is required to work with frontend frameworks like React and Vue.

Go to the official Node.js website and download the latest LTS version of Node. Node has two versions, LTS, and current. LTS stands for long-term support and is recommended for development work. Read more about the reason why you should pick the Node LTS version here.

After downloading the Node LTS, open the installer and follow the installer steps to install Node into your system.

To verify your node installation, open your terminal or PowerShell in Windows and type the following command:

node -v

You will see an output like this:

v16.14.0

Now that you installed Node.js, it's time to install Git Bash.

Step 2 – Install Git Bash for Windows Computers​

In this step, you will install Git Bash to be able to run the Linux commands on your computer. If you are using Linux or Mac, then you can skip this step, because those systems already come with a built-in Bash terminal you can use.

Go to the official Git Bash website and download the installer. Open the installer and follow the installer wizard to complete the installation.

This installs both Git and Bash sell environments into your computer. You will use them for the day-to-day development workflows.

Now that you have installed both Git and Bash, in the next step, you will install VS Code editor.

Step 3 – Install VS Code Editor​

In this step, you will install and set up VS Code on your computer. Although you can develop web apps in any editor in the world, VS Code is truly the de-facto standard for web development nowadays. By installing VS Code, you will get to use all the top extensions that will help you supercharge your development.

Go to the official website for VS Code and download the installer for your operating system.

Open the installer and follow the installation process to finish setting it up.

Open VS Code,

Next up, you will install some handy extensions.

Step 4 – Install Recommended VS Code extensions​

In this step, you will install some additional extensions for VS Code. The editor already comes with many tools built in, and these extra extensions will speed up your development.

Open the extensions marketplace by clicking on the extension's icon. Search for the extension, click on it and install by clicking on the Install button.

Install these extensions for VS Code:

• Prettier: is a code formatter. It will automatically format your code by adding and removing spaces. Check out my video on YouTube on how to configure prettier with VS Code.
• Live Server: will create a live server for when you are working on a classical web development project. Please check out my video on how to use the live-server extension to preview your projects.
• Auto Rename Tag: will auto rename HTML tags for you.

Conclusion​

You have set up your local web development environment. Your next step would be to create a sample website and host it on the internet.

Then I realized I can use a VM from a VPS provider such as Digital Ocean and use it for external pentesting. By doing so, I can use a faster CPU, RAM, and of course, fast internet speeds. Working with a commercial VM will help you speed up your processes when connecting to public servers like HackTheBox or PentesterLab.

In this article, I will walk you through setting up a pen-testing attacker machine with Digital Ocean.

Setting up a Digital Ocean Droplet (VM)​

To use the droplets, you have to sign up for a Digital Ocean (DO) account. DO offers free credits from $100-200 that you can use for the first two months (this is my referral link). I say this is a great way to try out the product without paying the full price.

After signing up, create a new project.

I am naming my project pentesting-1

After creating the project it's time to create a droplet. In Digital Ocean, a VM is called a droplet.

On the droplet creation page, you can choose from a range of Linux distributions. If you are experienced, you can install a custom image like Kali, or use the barebones Debian. For this article, I will stick to the basics with Ubuntu. I am choosing Ubuntu because it's a well-known Linux distro with lots of tutorials on the internet.

With Ubuntu, we have to manually install all the pen-testing tools as we go. This is a great exercise in working with packages in Linux.

Pick a plan for your droplet. The $5/mo basic droplet is enough for beginners. When you gain more experience and need more horsepower, you can create bigger droplets.

Choose the closest data center location for your droplet. Since I live in Bangladesh, I am picking the Bangalore data center. By picking a close server, my data will take less time to travel. This will result in a faster user experience.

For authentication, it is recommended to set up an SSH key. But to keep this post simple, I will just use a password to login into the VM. Make sure to store this password somewhere safe. I saved it in my LastPass account.

I don't need to pick any additional options.

I finalized creating the droplet by clicking on the big green button.

Now there is a droplet in the dashboard. This will also display the public IP address which I will need to log in in the next section.

Next, I need to log in to the droplet.

Logging into Digital Ocean using SSH​

To log in to the droplet I created, I will open up my terminal. I am using VS Code, so I am going to use the Bash terminal. If you want to know how to set up Git Bash in your Windows environment, check out my YouTube video.

Enter the ssh login command,

ssh root@<IP ADDRESS>

Since I am not using an SSH key, it will warn me if I trust this remote machine.

I will type in yes and press enter to confirm I understand and trust this host.

Next, it will ask me for the password. This is the password I set in the droplet creation section (not my Digital Ocean account password).

After entering the password, I will be greeted with the Ubuntu welcome message.

Now I can use this virtual machine as if it is installed on my own computer.

The first thing I would wanna do when starting a brand new VM, is to upgrade the packages.

Enter apt upgrade and apt update one after another to update all the packages.

apt upgrade
apt update

I can also log in to the droplet using the web-based interface.

Press the three dots next to the droplet.  Click Access Console.

Click the Launch Droplet Console button.

A new window will open up with a terminal emulator. It will be already logged into my VM.

This let's me use the Linux distro the same way I work within the terminal.

One downside of this web-based terminal is, it's painfully slow. However, this could be my computer. If you experience the same input lag as me, you should stick with the Bash terminal instead.

Installing Basic Pentesting Tools​

Now that the pentesting VM is all set, I can go do some practice.

Since Ubuntu does not come with nmap, I can install using this command:

apt install nmap

Then run a basic test by doing

nmap scanme.nmap.org

I won't go any deep into hacking since it's out of scope for this article.

Destroy the Droplet to Stop Billing​

One thing I want to mention is when you are not using your droplet for long period of time, it would be a nice idea to just destroy it to avoid racking up bills. You can also pause your droplet but it will still cost you money.

If you are not actively using your VM, go ahead and destroy it. Destroying your droplet is irreversible, so think before your delete.

I am going to destroy this droplet since I created it for this tutorial.

Press the three dots:

Type in the droplet name and hit Destroy.

Is it Allowed to Use Digital Ocean for Pentesting?​

Hacking a company website without their explicit written permission is illegal. You should not attempt to use any VM, whether it's local or commercial to hack into sites.

If we read the Digital Ocean's acceptable use policy,

Unauthorized Access.

Accessing or using any System without permission, including attempting to probe, scan, or test the vulnerability of a System or to breach any security or authentication measures used by a System.

Interception.

Monitoring of data or traffic on a System without permission.

This all means that (black hat) hacking is not allowed.

However, if you are a white hat hacker you should be okay. Because ethical hacking by definition is taking written permission from a company to test their network in a controlled environment. Same goes with pentesting for educational purposes.

Use Digital Ocean VMs to only connect to your pentesting lab environments. If you do black hat hacking with DO and get caught, you will be liable, not them.

I hope you found this article helpful. Do let me know your thoughts on Twitter.

My article is all about mastering JSON with ReactJS so strap in!

What is JSON in ReactJS?​

JavaScript Object Notation is part of the core JavaScript language, not ReactJS. Since React is a JS library, it can access everything that the language supports. This data format is universal and can be used in any programming language or platform for data exchange from Python, PHP, Kotlin to Ruby, you name it.

In JavaScript, there is a global object called JSON which gives you only two methods to work with its data format:

1. JSON.parse()
2. JSON.stringify()

JSON is just a simple JavaScript object where the properties and values are wrapped around double-quotes.

{
  "Title": "Friday the 13th",
  "Year": "2009",
  "Rated": "R",
  "Released": "13 Feb 2009",
  "Runtime": "97 min",
  "Genre": "Horror, Mystery, Thriller",
  "Director": "Marcus Nispel"
}

This way we can easily send the object as a long string of text. And as you know, in computers, text take so little disk space.

{"Title":"Friday the 13th","Year":"2009","Rated":"R","Released":"13 Feb 2009","Runtime":"97 min","Genre":"Horror, Mystery, Thriller","Director":"Marcus Nispel"}

You might notice, JSON looks just like JS objects.

A JavaScript object is a combination of other primitive data types like String, Number, and Boolean.

const jason = {
  name: 'Jason Voorhees',
  age: 74,
  hasKilled: true,
  birthday: 'June 13, 1946',
}

Objects can also contain other objects and arrays, making them complex objects.

When you transform a JS object into JSON, all of it's properties and values will be wrapped in double quotes " " (except numbers and boolean).

Original JS object:

const person = {
  name: 'Jason Voorhees',
  age: 74,
  hasKilled: true,
  birthday: 'June 13, 1946',
}

Converted JSON:

{
  "name": "Jason Voorhees",
  "age": 74,
  "hasKilled": true,
  "birthday": "June 13, 1946"
}

Let's talk about what are some basic operations with this format in Reactjs,

How to Read JSON Data in React?​

To read data from JSON, you have to convert it into an object using the JSON.parse() method. When you receive some JSON from an API or from a file, it's like a long piece of text (String data).

Most JSON data will be wrapped around a pair of curly braces { }, JSON.parse() will always return an object with properties you have to access.

I got this JSON from the JSON Placeholder API

As you can see, in this example the entire JSON response is wrapped with square brackets [].

This means the entire JSON is an array for us to map over.

We will parse it using JSON.parse().

Step 1: Parse it,

const data = JSON.parse(jsonString)

This will create a new array object and save it into the data constant.

Step 2: access it's properties,

Since it's an array, I am accessing the first item's title property.

console.log(data[0].title)
// >> "sunt aut facere repellat provident..."

But normally, when you get a response back from the server, the response data also contains a few header info.

It depends on how the API designer has created the JSON response. There will be a data property with the actual data you are looking for.

Let's take a look at the weather API here,

In this example the entire JSON is an object and the actual data we need is under the properties field. Sometimes the actual data is deeply nested in the json which you have to find out.

Here, I am calling this example API, getting the JSON response back, and converting it to an object by parsing it.

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((res) => res.json())
  .then((resJson) => {
    const data = JSON.parse(resJson)
  })

Now that I have the data saved in a variable, the next task would be to save this data in a state for my React app to display.

How do I Show JSON in Reactjs?​

To show JSON data in Reactjs you can use hooks. You have to store the parsed data in your local state and let the app handle the display of the data.

Often times when we get some data back from the API, the data is an array of objects. We can cycle through each of the objects using the Array.map() method and display them with our own react component.

function MyComponent() {
  return  ({
    items.map((item) => <SubComponent title={item.title} />)
  })
}

This is a common pattern you will see in React:

1. Get the data in JSON
2. Convert and save it in the local state
3. Map over the data from state
4. React will render the components automatically.

Here's the full example with a working component:

import { useState, useEffect } from 'React'

function MyComponent() {
  const [items, setItems] = useState([])

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((resJson) => {
        const data = JSON.parse(resJson)
        setItems(data)
    })
  }, [])

  return  ({
    items.map((item) => <SubComponent key={item.id} title={item.title} />)
  })
}

How do I show JSON in Reactjs? (Literally)​

When you want to show the JSON data as is in your React app, you can simply wrap this data inside a code block like this:

<code>{data}</code>

Giving you a nice code output.

But let's not get sidetracked, and talk about how can you create JSON and send it to the backend,

How to Convert JSON Object to String in React JS?​

To convert a JSON object to a string, you need to run it with JSON.stringify() method. The stringify method takes an object and returns a JSON string version ready to send to the server or store in localStorage.

Have your object ready, stringify it:

let jsonString = JSON.stringify(data)

Sending JSON with fetch() API:​

let jsonString = JSON.stringify(data)

fetch('THE_URL', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: jsonString,
})
  .then()
  .catch(err)

Storing JSON to browser using localStorage API:​

let jsonString = JSON.stringify(data)

localStorage.setItem(nameOfData, jsonString)

How do I load a JSON file into React JS?​

To load JSON from file, you have to have the raw .json file saved in your /src directory. In Create React App, you can directly import the JSON file and it will work as if it were a JS object, no need to parse it again.

To load JSON from file, import it into your component.

Now access the properties as you do with regular objects.

import data from './data.json'

console.log(data.title)

// >> "some data"

When and Why should you load JSON from a file?​

During Development​

When you are building and testing your app, you don't want to exhaust the API server by calling the API every few seconds. And it's a slow process to keep calling it and waiting for a response.

Just make one API call, grab the JSON and save it into a local file for the testing and design time.

Then when you are ready for production, swap out the local loading to API loading.

To Save Loading Times​

Sometimes the data is not dynamic, and you can just ship that into your application.

Like when I created The Periodic Table website, I had to bring the 118 Atoms info in a JSON. Now they are not going to change that frequently. Instead of making a call every time the app loads, I can just have it loaded from a local file.

To Save Disk Space​

JSON files can be huge too! In some cases, you want to ship a small sub-set of the data to get the app loading quickly with info.

Let's say you are building a bible verses app.

Having the entire bible in a JSON would take a lot of disk storage and can hamper the loading times.

You can have a small section already loaded into your app from file and whenever the user requests more verses, you can call them on demand from the API.

Conclusion:​

To recap what we learned in this post,

• Convert JSON string to object using JSON.parse()
• Convert a data object into JSON string with JSON.stringify()
• Create React App can automatically convert a json to object when you import a .json file

Read Next: Best Practices on How to Compress Images For Reactjs

As you can see on the cover image, the original file was 65 kB, and after compression, I got it down to 5 KB, that’s over 80% saving for just one image file.

This file is from one of my side projects ReactionPoll, where I make use of a bunch of Facebook and Linkedin reaction icons. My original reaction set for Facebook was 155 kB and after optimizing them, I got it to just 35 kB!

Let’s begin with the obvious,

Import images into your React source code​

The first quick win is to always import your images in your source code.

Add the images into the src directory. For me, I created a folder called img inside the src folder and put all the image assets inside.

Now from your component files, just type in

import like from '../img/src/like.png'

You can insert this image in the src attribute in the img tag like this:

<img src={like} alt="like icon" />

When you import images this way, create-react-app (or webpack) will bundle all your images and try to best compress them.

If your images are less than 10 kB (10,000 bytes) these images will be converted into inline base 64 strings. So they will load instantly (Llobera, 2020).

See this love icon is 4.5 kB (less than 10 kB) and converted as a data URL:

But when your images are over 10 KB, for example, this care reaction icon is 14 kB, react will link to the asset file.

Did you know about the inline image thing? I didn’t. Tweet this to your followers,

To further compress these source images, we have to optimize them ourselves,

Compress Your Source Images Using TinyPNG​

TinyPNG is an online tool I use to compress images. Usually optimized PNG and JPGs have a small file size already, but when I run these images against this free tool, I get surprised that it squeezes up even more.

I saw a 68% savings when compressing my reaction icon pngs using TinyPNG.

Compressed JPG and PNGs can only take you so far. If you want to really up your compression game, you need to find an even better image format: webp and avif.

Use Webp/Avif Images for Even Better Compression​

Webp (weppy) is a new fast image format developed by Google. If weppy is fast, then AVIF is faster. In my ReactionPoll tool, I used weppy images to further compress my images.

What I did was to replace all images with their webp counterparts.

There is a weppy converter tool called cwebp that I downloaded and installed into my computer, but I was too lazy to compress them in CLI. So I used an online converter to convert my existing PNG files to webp.

The weppy versions helped cut down around 20% more file sizes from my already compressed PNG files.

You should keep in mind that, weppy and avif are newer file formats and not available in older browsers. It’s a good idea to serve webp but also fall back to the jpg/pngs.

Use Webp and PNG together with Fallbacks​

Using the <picture> tag we can add both webp and png files. The browser will pick the image that it supports.

The tag looks like this:

import likePng from '../img/src/like.png'
import likeWebp from '../img/src/like.webp'
;<picture>
  <source srcSet={likeWebp} type="image/webp" />
  <img src={likePng} alt="like button" />
</picture>

I learned how to use this trick + how to use a reusable react component to automate the process using Josh’s blog post.

Basically what he did was create a component called ImgWithFallback

const ImgWithFallback = ({
  src,
  fallback,
  type = 'image/webp',
  ...delegated
}) => {
  return (
    <picture>
      <source srcSet={src} type={type} />
      <img src={fallback} {...delegated} />
    </picture>
  )
}

This component will take the webp image as the src and the png as the fallback image.

Use webp/avif images for faster loading but also have a fallback to png/jpeg files using a <picture> tag.

After adding the WEBPs, I can say my images are loading much quicker than PNGs.

My Results​

I started with original reaction icons that I downloaded from the internet. After resizing all the icons into 250×250 png images, the total file size for the seven icons was 155 kB.

After compressing the PNGs with TinyPNG service, I ended up with 50 kB file size for all of them.

Finally, when I converted them to webp file format, I ended up with 35 kB file size, that leaves 5 kB per image icon.

Now you must be looking at the picture above and thinking, why the weppy images look pixelated? I don’t know why it is displaying like this on my computer, but when I open both icons side by side, I can say they look fine,

By the way, all these icons you see are part of my Linkedin and Facebook reaction poll generator. If you want to check out my project in action and how the images perform, visit ReactionPoll.com/facebook

Final Thoughts​

Image compression and performance optimization is ongoing thing. As time goes, we will surely find out more ways to shave off those extra kilobytes without compromising the quality. When that happens, I will update this article with newer tricks as I learn them.

Till then start optimizing your react website and send me a tweet if you found this post useful.

To recap what we learned so far:

• Always import your images in reactjs
• Compress your assets using a tool like TinyPNG (it also works with jpegs)
• Use webp and avif image formats for fast loading but also have fallbacks for the browsers that don’t support them

Check out adding Google Analytics 4 in ReactJS

References​

1. Hadar, A. (2021) Using the Public Folder, Retrieved December 4, 2021, from https://create-react-app.dev/docs/using-the-public-folder
2. Llobera, L. (2020) Adding Images, Fonts, and Files, Retrieved Decmber 4, 2021, from https://create-react-app.dev/docs/adding-images-fonts-and-files

Comments:​

Cindy Lam: Hi Tamal, This is such a great and well-written article. I can tell you put a lot of effort and thoughts into writing this blog post. I really like the flow of the entire post. The use of screenshots and images are really helping you to tell your story. To me, as a reader, I do not feel exhausted reading through it and I even get some surprises like the “tweet” option for me to easily tweet what I have learned from your blog post to others. Fast and convenient! More importantly, I really like the “table of contents” and the recaps at the end of the blog post.

Here are some of my opinions and suggestions that hopefully can help you out to improve the current blog post (I am just writing down what I hope to see as a reader when reading through the blog post):

(1) The “Care Reaction” icon compression results in using TinyPNG and Webp methods – I know you have displayed screenshots regarding the file size of the care reaction before compression. I think it would be helpful to see this throughout all the other sections to see the progression of the compression. It gives readers more excitement when they are able to see the result immediately after reading sections 2 and 3.

(2) Included the “Can I use” link for Webp and AVIF – ie, can i use so the reader can click on the link and directly see the browser compatibility of these two image types.

(3) For Josh’s blog post, I think it would be best if you could just link directly to the “Abstraction with React”. As a reader, I do not need to scroll all the way down to the source code.

The above items are just my opinions and hopefully, they can be slightly helpful to you if you are looking for optimization.

By the way, I have found a small typo in section 3 the last paragraph right after the bold text, you have Webp spelled incorrectly.

Overall, I really enjoy reading this post and learning something new regarding image compression! Great post, Tamal!

Tamal: Hey Cindy, thank you for a very thoughtful comment.

Let me write some quick responses to your points below:

1. You are right. Gonna update with some more before/after screenshots.
2. Good idea! I am gonna put them.
3. Sure, will add the direct link. Typo: I intentionally wrote Weppy -it’s like a human-friendly >name of the technical WebP.

Jose Oropeza: Excellent article Tamal. I honestly never considered image compression but will surely give this a try on a future project, specially since image quality is not compromised. Would love to see an article on best practices for optimizing gifs.

Tamal: Definitely! Google web dev recommends web video in place of gifs to save data. But I’ll def look into it.

Christiaan: So if I understand it correctly all images below 10k are in lined. So in the last step both the PNG and webp are in lined. So aren’t you shipping 35Kb more in the last example?

Tamal: Only pngs are getting inlined, so in the last step, I am keeping both webp and png because of backwards compatibility.

So how to add the new Google Analytics 4 in Reactjs app? You simply copy the Google Analytics script tag into the <head> section of your index.html file in the public directory.

Yeah, I know right, it’s that obvious. I found it by trial and error. If you stick around, I will show you a step-by-step guide and also give you a glimpse at how did I figure it out.

Step-by-Step Guide to Adding Script Tag in Reactjs App​

Create a new property in Google Analytics.

Don’t select advanced and Universal tracking. Just click next.

Enter the usual business info and move on to create.

Now after the setup, pick the “web” data stream.

Enter your website URL and continue.

Select the Global site tag (gtag.js) option and

copy the code.

Open your React project directory. For me, I created the app using create react app. Go to public > index.html.

Put the GA script tag inside the <head> tag. I am putting this as the last item of the head tag, after the site title.

Build your project and publish. For me, I have set up my project in Netlify with GitHub CI. So every time I push the changes to my Github main branch, it will be deployed automatically.

Now visit your website from your browser or mobile device and verify that Google Analytics is registering the views. If you can see the views, that means you have successfully set up your analytics with the React app.

How To Track Custom Events in Reactjs App?​

If you want to track custom events you can use this npm package ga-gtag which integrates Google Analytics 4 with your Reactjs application.

Recently I created a poll maker app and I wanted to know how many people downloaded the polls using my app.

GA custom events come in handy for this type of tracking. Learn more about custom events from GA website.

gtag('event', 'download_poll_image', {
  poll_title: 'some value',
})

Previously we added the GA script tag into the head section of our index.html file, but we can’t use gtag inside our JS file because it’s not defined. This is where this handy package comes in.

Just install the package using npm install ga-gtag and import it into your project file where you will be tracking the event.

import gtag from 'ga-gtag'

Now since I want to track the image downloads, I will add this custom method inside my image download function.

This is how the gtag event function looks like:

function trackDownloadEvent() {
  gtag('event', 'download_poll_image', {
    poll_title: 'some title',
  })
}

See I have named the event download_poll_image and inside I am tracking the poll_title parameter. This way, I will know how many times a new image has been downloaded and what were the titles of the polls that are generated.

How to See the Custom Even Parameters in GA Dashboard?​

One issue I ran into was, the custom event parameters don’t get saved in Google Analytics 4. So I can see all the download_poll_image events, but not the individual poll titles. I did some Googling and found that it will only show up on the real-time pane (not good).

So to make GA save these parameters, you have to mark that event as a conversion for it to store all the parameters you want:

Now Analytics will keep them.

If you have come to the end of this post and it helped you with setting up Google Analytics with your React app, then please let me know by tweeting about it.

It tells me that I have done a good job and will inspire me to share more cool stuff in the future.

Key Takaways:​

• Add Google Analytics tag simply by pasting into the head section of index.html page.
• The react-ga npm package still doesn’t work with the new G-XXXXX tags.
• Use gtag npm package to track custom events.
• To persist the custom event parameters, you have to instruct GA.

Since we are talking about React, check out best practices of compressing images for React.

What is null in JavaScript? null means no-value. When there is no value assigned to an object variable, it means the object doesn’t exist. If you want to delete the contents of an object from memory, you would assign that object to null.

By the way, null is not exclusive to just JavaScript, I have seen it on Java, C#, SQL and it works the same way it does in JavaScript.

An object is a combination of primitive values like string, number, and boolean types. Since objects are special types of data, we also need a special concept of assigning no-values. This is where null comes in.

In this article, I will tell all about the null type and how it works in JavaScript and programming in general. But before I can fully explain to you about the null type, let me give you an overview of the types in JavaScript.

Primitive Types and Reference Types​

A primitive type of data is a number and boolean. In JavaScript, the string data type is also considered a primitive type (spoilers: it’s actually not). This is because a string “Hello World” is actually a string of characters: ‘H’, ‘e’, ‘l’, ‘l’, ‘o’… and so on. A single character ‘T’ is a primitive type and the string is like an array of all these characters together.

This is why In Java (which is different than JavaScript), the String data type is actually an object. The same thing applies to JavaScript but JS is built in such a way that the string type is treated like primitive values.

So in short, it’s safe to say these are primitives in JavaScript: string, number, boolean.

var name = 'Tamal'
var age = 100
var isMale = true

So what are primitive types?​

A primitive type is where the variable actually holds the data.

If I open the variable age, I will find the exact value there.

age shows 100 But watch what happens when I do the same for objects.

var person = {
  name: 'Tamal',
  age: 100,
  isMale: true,
}

If I open the variable person, I will see this memory address and not the actual data.

person shows 0x000001

This is where primitive types and reference types differ.

As I mentioned earlier, an object is a custom data type made out of multiple primitive data types or even other objects.

An array is a collection of other primitive types like a list of names, or a list of numbers. So it’s an object too. When you check the type of an array, you will see object:

var list = [1, 2, 3]
typeof list
// 'object'

Since each of the object is a custom type, a variable space is not enough to hold all the items and the configuration in it.

The solution: references.

The data items will be stored somewhere in the computer memory and the variable will only store the address to that memory location.

This variable will only reference to that memory location, thus it’s called a reference type (Sierra & Berts, 2005).

But how this all relate to the null type?

Now that we know there are two types in JavaScript, we can set the initial starting values of the primitive types like this:

var name = ''
var age = 0
var isMale = false

But when it comes to objects, we can’t simply say person = {} because an empty object literal is still taking up memory somewhere and it’s not truly empty.

To fully erase the object from the memory, we will have to assign null to that object. But before you do that, let me tell you why doing this matters.

Referencing a Reference type Variable​

Since the value of a primitive type lives inside the variable, it’s very easy to copy a variable.

var hero = 'Superman'
var memberName = hero
// change the value
memberName = 'Batman'
// Check them:

// hero
// >> "Superman"
// memberName
// >> "Batman"
// But we can’t do the same thing with reference types.

If we try to do this and make changes to the second object, you will notice that the original object is also changing.

var person = {
name: "Tamal",
language: "JavaScript"
}
​
var member = person;
// Now both objects have the same contents
// And they are referencing to the same object
​
// Making changes:
member.name = "Karen";
member.language = "C#";
​
person

// {name: "Karen", language: "C#"}
// member
// {name: "Karen", language: "C#"}
// So you can see two variables are referencing the same object.

This is why it’s important to know that the variable is actually holding the reference to the object. When you copy this variable, only the reference is being copied.

I am not going to cover how to copy objects because we are interested in the null value and how it comes into play.

Garbage Collection​

All these variables take up some space in memory and there must be some way to free up the memory by doing some cleanups. When you are done with some objects, you can feel free to clean up that object so that the memory can be used for other things.

In high-level languages like in JavaScript, you don’t have to worry about this garbage collection, it happens automatically when the program stops using the variables (Sierra & Berts, 2005).

You will notice that you can create an object in JavaScript but can’t delete it.

var person = {}
// there is no delete option

But you can with the null value.

When you assign null to a variable it will unlink the reference to the memory.

person = null
// the object is deleted forever

The JavaScript (and Java) garbage collector is set up in such a way that whenever it finds an object that is not being referenced by any other variables, it will delete it.

So in a nutshell, the null value is used whenever you want to completely delete an object from the memory, and make sure no other variable is referencing that object.

Now that you know what null is and how it’s used, let me outline some interesting things about the null value in JavaScript.

Why typeof null is object?​

When you check the type of null, you will see it’s an object. But null is not an object, it’s a primitive value. This is a bug in JavaScript and can’t be fixed (Crockford, 2017). On the other hand, null is only used for objects in JavaScript, so it’s useful if you adapt your program according to it.

typeof null

// "object" // // this is a bug in JavaScript

Is null and undefined the same in JavaScript?​

null and undefined are not the same because null is a lack of value and undefined means the variable is not been assigned. In JavaScript, null is used for object types and undefined for string, number, boolean and other primitive types.

// loose equality null == undefined

// true // ​ // // strict equality // null === undefined // false

How to check for null in a block?​

// typeof person will return object and it will still return an object when set to null. To bypass this, you have to type this: person == null to check if the object exists or not.

if (person == null) {
  // do something
}

Key Takeaways​

null is a primitive value that can be assigned to an object. When you assign null to an object and no other variable is referencing to that object anymore, it will be deleted from the memory permanently. In JavaScript, null is buggy and returns an object type when checked. There are two bottom values in JavaScript, null and undefined, but they are not the same. If this article helped you then feel free to leave a comment and let me know what you think.

References:​

1. Crockford, D. 2017. The Post JavaScript Apocalypse, ConFoo Developer Conference. Retrieved from https://youtu.be/NPB34lDZj3E?t=742 (Timestamp: 12:22)
2. Sierra, K., Berts, B. 2005. Head First Java. Retrieved from https://www.amazon.com/Head-First-Java-Kathy-Sierra/dp/0596009208

What is Node JS? Node JS is a runtime environment for the JavaScript language similar to how you would use a Python interpreter to run Python code on your computer. Node JS is being used to run and execute JavaScript code in the server to build backend services.

According to the official Node JS website, “Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a browser” (Node.js org, 2020).

Right out of the bat you must have figured it out what open-source and cross-platform means.

Open-source means the source code of Node JS is open to the public (like Linux) and everyone can contribute, modify and use this software without paying any license fee. So if you make an application with Node JS, you won’t have to pay any money for the core Node JS runtime.

Cross-platform means Node JS can run in all the major operating systems like Windows, Mac OS, Linux, and others so it doesn’t matter what kind of computer you own, it will still run. You can host a Node JS application in both Linux or Windows servers for deployment.

Now that the obvious is out of the way, I am going to explain the other important parts to help you understand what the Node runtime environment is and why you should care to use it. As part of the explanation, I am also going to outline other technical aspects of the runtime like the asynchronous, event-driven and non-blocking aspect of Node JS.

What is the Node JS runtime environment?​

As mentioned before, Node JS is a runtime environment that will execute JavaScript code, but why is it so special?

Before the invention of Node JS, JavaScript language was only confined to the browser like in Google Chrome, Firefox, and Opera. Before Node, we could only run JavaScript in the browser to do little interactions and effects. It didn’t have any way to access the file system and that’s one reason why we don’t have any print command in JavaScript.

Node JS took the V8 engine (the JavaScript engine of Google Chrome) and turned that into a standalone JavaScript execution environment on the desktop.

So in a nutshell, the Node JS runtime environment allows you to run and execute JavaScript code outside of the browser environment. It allowed JS to read and write files and talk to the internet independently. This gave the opportunity to make web servers with Node JS and currently it’s a popular choice for making full-stack applications.

JavaScript language brought many new advantages to backend development with its new runtime environment. Here let me outline some of the technical features of the Node runtime environment that makes it different than others.

Asynchronous​

“In a synchronous programming model, things happen one at a time” (Eloquent JavaScript, 2020, para. 4). Compared to that, in an Asynchronous model, multiple things can happen at the same time.

Node JS has one single thread to deal with the requests and another one as the main working thread.

When a user requests something, Node JS will send that request to the thread and get back to the main worker thread. If another user does another request, it will put the next request to the same thread and get back to working again.

After some time, the request will return and Node will be notified. Node will then take the response and give it to the user.

All this process can happen in one single thread one after another and this the gist of asynchronousness in Node JS.

In other programming environments such as Python and PHP, when someone makes a request, the entire thread gets blocked. If another user needs to make a new request, the system will have to create a new thread for the operation.

Node JS works with a single thread and can get notified for fulfilled requests via events. Let me explain what it means what event-driven means in Node JS.

Event-driven​

Since Node JS is sending the request to another thread for completion, it has to know how something returns to it. Node JS will always keep listening to various events. This is similar to how operating systems work. An operating system will listen for various events like a mouse click, keyboard key press and so on. When an event comes, the system will stop what it was doing and put its attention to the event at hand and do what is required.

Similarly, in Node JS, it can do the assign tasks and still keep listening to other events. When a user clicks or something has returned from the thread, it will do what’s needed to do. This event-driven mechanism is what makes it possible for Node to work with a single thread and be super fast.

Non-blocking​

Node JS does not sleep because it can do things one after another. It’s sort of like juggling where one item is always in the air. In Node’s case, it will juggle with one hand and keep all the other things in the air (other thread.)

When you make a request to save something to the database, you know it’s going to take some time to write. Node is going to move on to the next task at hand. This is the basics of JavaScript’s non-blocking computation model.

If you write this command in python: sleep(5)

It’s going to literally sleep for five seconds and won’t be available to do anything within this time. This is an example of a blocking code. If you are making a server were 10,000s of users are making requests, this means for five seconds the server will not be able to serve these people.

One the other hand, this is an equivalent code in Node: setTimeout(doSomething, 5000);

Here Node will do that function after five seconds, but it will never go to sleep. This way it will still be able to handle all the other requests that come to it.

Node Package Manager, NPM​

Node JS works with packages similar to how Java and Python has their own packages. NPM is a public repository where all the developers can contribute packages.

NPM comes built-in with Node JS and when you are building applications, you are going to use NPM commands to install and work with packages.

With this you will have to enter Linux like commands for installing various packages like this is how you would install the express js framework:

npm install express

Next steps​

• Download Node JS and start using it
• Start building something with it
• Leave a comment in this post and let me know what you think

References:​

1. Node.js. (2020). About Node JS. Retrieved February 27, 2020, from https://nodejs.org/en/about/
2. Eloquent JavaScript. 2020. Asynchronous Programming. Retrieved February 27, 2020, from https://eloquentjavascript.net/11_async.html

Should I learn JavaScript before Node JS? If you have taken another programming course before (like Python) then you have the proper programming foundation and can go ahead and start learning Node JS without taking a JavaScript course. You can pick up the fundamentals of JS while you build servers with Node. However, if this is the first time you are programming, then I would highly recommend you take a foundation web development course in HTML, CSS, and JavaScript to get your ABCs down.

Other than general programming syntax in JavaScript, there is so much that goes into Node JS. When you are learning Node JS, you are most probably interested in learning how to build the backend services or the REST API of a website. For the rest of this article, I will discuss various programming and JavaScript concepts that go into when working with Node JS. You can check these skills and see if you already have these covered so you can make the right decision whether if you should learn JavaScript before Node or not.

Programming fundamentals to master before learning Node JS​

These are some of the barebone programming fundamentals that every programmer must learn and master before they can take on building anything with code. These concepts are not exclusive to JavaScript and you will notice that you already know these if you have taken a programming course in another language such as Python, Ruby, PHP or Java.

Basic data types​

These are your basic building blocks like strings, integers, and boolean data types. In programming, these are called primitive data types. You should be able to identify each of these data types and be able to assign them to variables. JavaScript has only a few primitive data types and they are String, Numbers (integers and floats) and boolean. In Node JS we make lots of variables and work with all sorts of data types throughout the application.

// Primitive data types in JavaScript
const name = 'Tamal' // String
const age = 100 // Number
const isAwesome = true // Boolean

Control flow​

In programming, if, else and else if are what makes the programs versatile. With the basic control flow structure, we make Node JS apps do various tasks depending on various conditions. Depending on the condition we can execute a command or do something else entirely.

// Control flow
if (isAwesome) {
  console.log('Tamal is awesome!')
} else {
  console.log('Ouch!')
}

Other than if/else, Node JS also makes extensive use of the switch statement in various cases. So as a programmer you should know your control flow structure to excel in Node.

// Switch statement
switch (color) {
  case 'RED':
    console.log('Stop')
    break
  case 'GREEN':
    console.log('GO')
    break
  case 'YELLOW':
    console.log('WAIT')
    break
  default:
    console.log('DO NOTHING')
    break
}

Loops​

Loops like the for-loop, while-loop is what helps make repeating tasks in Node JS. Often times we use loops in a helper utility function. Other times we may use it to do a server action n number of times. As a programmer, you should know your loops really well to start learning Node JS.

// For loop
for (let i = 0; i < 10; i++) {
  console.log('I love you!')
}
// We used let instead of const because
// we have to keep assigning a new number
// to the i variable

// While loop
let i = 0

while (i < 10) {
  console.log('I hate you!')
  i++
}

// Do while loop
let i = 0;
​
do {
console.log("Are we there yet?");
i++;
} while (i < 10);

Functions​

Functions (subroutines or methods) are what Node JS servers are made of. In JavaScript, functions are first-class citizens, which means in JS, functions can take another function as a parameter or can return a new function as output. You should be able to build useful modular functions that can do a set of small tasks to return a value. In Node JS, everything is made out of little functions including the routes, APIs and middlewares.

// Functions
function sumOfTwoNumbers(a, b) {
  let result = a + b
  return result
}

sumOfTwoNumbers(2, 3) // 5

Advance data types, Objects, and Arrays​

Objects are heavily used in modern JavaScript and in Node JS, objects are used everywhere. You should have a good idea of how object and array data type works. Objects are called dictionaries or maps in other programming languages. Just like objects, arrays are frequently used.

// Object literal in JavaScript

const person = {
  name: 'Tamal',
  age: 100,
  isAwesome: true,
}

person.name // "Tamal"

Arrays are called lists in other languages. You should know the difference between primitive data types and reference data types such as objects and arrays and how to manipulate them.

// Arrays

const fruits = ['apple', 'banana', 'mango']

fruits[0] // "apple"

Composing basic programs​

After learning the programming syntax you should also know how to make basic programs. Programming is building stuff and you should be confident in constructing them. After taking a programming course you should practice on your own to make a few practice projects. Being able to build things is very important because, in Node JS, we have to build out a large complex application. A large complex application is nothing more than a combination of a lot of small programs put together so don’t underestimate the power of composing.

Fixing bugs, finding a solution online​

When building the backend of a Node application, you will often run into problems. You should have an open mind to find these bugs and look for solutions online. Often times the issue can be solved with a quick Google search and finding a working piece of code in Stack Overflow. It’s completely okay to do this and professional software developers always Google and search for existing solutions and snippets of code. You should build the quality of not getting frustrated and always finding the solution to your coding problems.

JavaScript specific concepts that are heavily used in Node JS​

At this point, you should be able to decide if you need to take a JavaScript course before taking on Node or not. If you do decide to take a JS course, I want you to double down on these particular skills because these are frequently used in Node JS. It’s possible to learn each of these individual things while you are learning Node JS. For that case, I would suggest you get a rough idea by reading the list below and work accordingly.

Callbacks​

JavaScript is a functional programming language and the way the runtime works, it has the feature to have callbacks. In JS, you can supply another function as a function parameter. A callback is a function that will run at a certain point. You will often encounter functions that include another function that includes another function. If you want to work with Node JS and JavaScript in particular, you will be encountering a lot of callbacks.

// JavaScript can take a function as a parameter

function doSomething(a, b, callback) {
  let result = callback(a, b)
  return result
}

doSomething(2, 2, sumOfTwoNumbers)

Promises​

Promises are the modern version of callbacks and they do the same thing that callbacks do but their syntax is very easy to understand. Similar to callbacks, you can have one function do something and it will have another method attached to it when the first function completes the task. Under the hood, promises are doing the exact thing that callbacks do. In Node JS, you will encounter some modules that have callbacks and others have the new promises. As a Node developer, you should have a good grasp of both to make your life easier.

let and const​

These are keywords for declaring variables in JavaScript. Apart from the var keyword, let and const lets you declare variables at the block scope. const is used to create constants, a value that stays the same. let is used to create variables that can be changed. You will find lots of tutorials and courses that make use of const & let and explains to you what to use where. As long as you know what they do, you will be fine in building your server.

let city = 'London'
city = 'Berlin'

const country = 'France'
country = 'Greece' // Error, Can't do that

JavaScript object literals​

Objects are heavily used in Node JS application development. You should know the syntax and the shortcuts for working with them. In Node, objects are used for setting configurations for various NPM modules. Objects are also used for making data for your application. You should learn the modern ES6 syntax for object destructuring and prop name shortcuts.

// Object literal in JavaScript

const person = {
  name: 'Tamal',
  age: 100,
  isAwesome: true,
}

person.name // "Tamal"

Anonymous functions and arrow functions (lambda)​

Since JavaScript allows functions to be passed into various functions, you will often find anonymous functions used throughout the development. These are unnamed functions that you can use as an expression.

Another popular anonymous function format is the arrow function or lambda functions.

Arrow functions are similar to the ones found in Java and in C# and they did confuse me a lot when I was just starting out. When working with React JS or Node JS, you will find people often using arrow functions instead of regular functions, so it’s good to have an idea of how it works.

// Anonymous function

function(a, b) {
return a + b;
}

// shorthand for anonymous fn

(a, b) => {
return a + b;
}

// shorthand lambda
(name) => name;

// Used inside another function
fruits.map((item) => item);

// .map() is a built in array method
// which takes a function as a parameter

Functional programming​

You will come across a lot of functional programming concepts while working with JavaScript and Node JS. If you are unfamiliar with this programming pattern it might seem a little odd at first. In functional programming, functions are treated as if they are regular data types. You can supply functions as arguments to other functions as mentioned earlier. You can also return functions as a return type from another function. Finally, one thing that you will see most often is assigning a function to a variable. You will find that often times anonymous or arrow functions are assigned to regular variables instead of declaring them. So be prepared to encounter all these functional tricks when working with Node JS.

Array methods​

Some of the most common array methods are map, filter, reduce, and forEach. These functions allow developers to do quick array manipulations. Most JavaScript developers like to use array methods instead of the plain old for-loop. All of these methods accept a function as a parameter (arrow functions used most often) so be ready to see them in action.

Common JS modules​

In modern JavaScript development, the code is split into multiple files and you have to explicitly import and export when you want to use the functionality. In React JS, you have import and export directives, however, as of writing this article, they are not fully supported in recent versions of Node JS yet. Node JS uses common JS modules for import-export. Node uses built-in global methods require for including JS files and module.exports for exporting functionality. These are not that difficult and once you use a few times you will get the hang of it.

// import export in JavaScript

import React from 'react'

export default MyComponent

// equivalant in NodeJS context

const express = require('express')

module.exports = router

Final words​

Node JS opens the world of possibilities by using a single language JavaScript for both the front end and the back. With a solid foundation in programming concepts and JavaScript, you can be a pro in Node JS in no time. If you already have the foundation covered, I suggest you take on a Node course and learn JavaScript as you go. On the other side, if JS is your first language or you are out of touch for many years, then go and brush up the concepts mentioned in this article. Even if you do go out and spend extra time learning the ropes of JavaScript, the time will be spent well because it’s a great language to keep on your arsenal. That being said, here are some final tips I want to share with you.

• Get the programming basics down first, take a course if you have to
• Focus on the JavaScript specific concepts to have an easy time with Node
• Build something! don’t worry, you will do just fine!

Comments:​

Leo: I love your article, I already covered the basic js moving unto the intermediate and I study to be a full-stack js developer with react and node as my main target. Thanks again.

Adale: I’ve been spinning my wheels looking at all these promises and courses online but very few take the time to explain things quickly and simply. I haven’t replied to a blog post in many years. I am so appreciative of what you do here. This site is a real resource. I will be taking your Udemy course recommendation.

Which Node JS version to use? 20 LTS. You should always use even-numbered versions marked LTS that says “Recommended for Most Users” on the download page. An even number Node version is 16.x.x LTS, 18.x.x LTS, 20.x.x LTS and so on that you should use when learning or deploying your project to a production environment.

According to the Node JS blog, “If you are using Node.js in production use an LTS version. LTS release lines focus on stability, extended support and provide a reliable platform for applications of any scale. Most Node.js users and companies are on Long Term Support lines. For those that are currently using Node.js 4.x or Node.js 6.x, we recommend upgrading to Node.js 10” (Nodejs, 2018).

As I mentioned above, picking a Node version is not that of a big deal and you can always upgrade or downgrade versions when needed. If you are learning Node JS by following a tutorial, you can always check the version the instructor has used. You will be safe using a version that is higher than the version used by the instructor.

Update: Node 20 improves the test runner​

The recent update to Node.js, version 20, includes an important change to the test_runner module. The module has been marked as stable after a recent update.

Now that you know which version to pick when working with Node JS, let me tell you a bit more about the Node version lifecycle.

What is Node LTS?​

LTS stands for Long Term Support and the recommended version for most users. Nodejs org makes new versions frequently with new features, bug fixes, and performance optimizations. As a general rule, we can safely assume that the latest version is always the best version to use. A major node version increments the first number like this: 6.x.x, 7.x.x, 8.x.x, 9.x.x, where the leftmost number is the most significant one and the rest of the numbers are minor changes to the software like 14.15.0.

Major versions are current for 6 months​

You will notice that in the Node download page you will find two versions, one marked as LTS and the other marked as Current. Instinctively you would want to download and start using the current version of the software. However, this version is not intended for you (the general user) but for the library authors.

Node JS has many uses. Nowadays Node is not only used by the backend developer but it’s also hugely used by the frontend tool developers. Various tools that make it easy to compile code such as Webpack, Gulp, Browserify, and others heavily rely on Node JS. Frontend frameworks like React, Angular, Vue, Svelte are also dependent on Nodejs. Testing frameworks like Jest, Mocha, and Enzyme also make use of the latest features of Node and NPM.

With a new major release of Node, it will allow these library owners 6 month time to download and make their tools compatible with new features and updates.

So in a nutshell, the current odd number Node JS versions such as 13.x.x, 15.x.x, 17.x.x and so on are targeted to the maintainers of various tools.

After 6 months, the odd numbered versions become unsupported, so there is no point in using these versions for development.

Node LTS versions are good for 30 months (2+ years)​

After the first 6 months have passed and library vendors have enough time to test and implement new features into their tools, the even number versions (12.x.x, 14.x.x, and 16.x.x) will enter the LTS or Long Term Support phase. By the time you get access to an LTS version, you can rest assured that all of your favorite NPM tools are tested and supported by this version of Node.

This LTS version will be further supported by the Open JS foundation for the next 30 months (2 and a half years). So if you are building a production application, you will get support for it for the next two years and more. The LTS version guarantees that the software will be maintained and critical bugs will be fixed during this period of time. The Node JS website states that “Production applications should only use Active LTS or Maintenance LTS releases” (Node JS org, 2020).

This all means that if today you start learning with Node JS 20, you are good to deploy a production app with this version till April 2026.

What goes into major Node releases?​

New Node versions are all about speed, stability, feature updates and bug fixes. With each new version, Node JS is getting faster and better as the technology improves. For example, Node version 10 is 2x faster than Node version 6 (Nodejs blog, 2018), so it’s a good enough reason to always use the latest version. Since Node is built on other technologies, such as the V8 engine and the ECMA script, it has to stay current with new features and improvements.

V8 Engine​

V8 is Google Chrome’s JavaScript engine and the engine that was used to run code in the Node JS runtime. With new updates of the V8 engine, it is important to bring the same level of code execution to Node JS. For this reason, the people at Node will implement new versions of V8 into the Node JS runtime.

New JavaScript features​

As new JavaScript features come up every year, it is important to stay up to date with the current language features and implement them into the Node runtime. As you may know, you can’t use all the latest JS features in Node JS. With each new update to Node, it brings more and more new JavaScript features to the runtime environment.

Key changes in major Node versions​

It’s clear that you should use the latest and greatest LTS version of the Node JS runtime, however, you will often come across old Node versions in apps or used in old tutorials. For that, it’s good to have an idea of some of the key aspects of major Node versions.

Node 6 implemented ES6​

Perhaps the most important update for a JavaScript developer is to be able to use the modern ES6 version. Node 6 implemented the new ECMA Script 6 which is a significant improvement in JavaScript.

ES6 introduced keywords like let and const, arrow functions, destructuring, template literals and many more. In today’s web development, it sucks not to be able to code in ES6. So if you come across a Node tutorial, make sure it’s using version 6 and up.

In fact, 99% of the modern JavaScript features are now supported with Node version 6 and up (Node.green, 2020).

Node 8 implemented Async Await​

Async Await was implemented in Node 8 (Cyren, 2017). Async and Await are special keywords you can use in functions to make them wait for promises. It’s a simpler way to use the promises in your JS code.

Node 10 added promisified fs module fs is a built-in module in Node for reading and writing to the file system. In the past, we had to use callbacks for working with the file system module but in Node 10, we get the option of promisified fs (Node blog, 2018).

Node 12 implemented ES6 modules​

If you worked with both React and Node, you will notice that in Node, you use the require method to include a module, while in React you use import to do the same. This is because Node JS is still behind when it comes to implementing the latest and greatest JavaScript features. Node 12 introduced experimental use of import and export modules (Node blog, 2019) and I am sure by the time you use Node 14 and up, it will be able to use it with no issues.

Node 18 adds Browswer fetch API​

Node 18 version supports the addition of fetch API. This update further makes the syntax of browser JavaScript and Node.js uniformed. Here's how to use fetch in Node:

const res = await fetch('https://nodejs.org/api/documentation.json')
if (res.ok) {
  const data = await res.json()
  console.log(data)
}

Other than fetch it also exposes all the related Web API globals like FormData, Headers, Request, and Response (Nodejs, 2022).

If you would like to get your hands on trying out fetch, you can use NVM to install multiple versions of Node (explained later in this post).

Can I install multiple Node versions on my computer?​

Yes, you can use the NVM Node Version Manager app to install and use multiple versions of the Node JS runtime environment. NVM lets you easily switch between Node versions on the fly in your local development machine.

I was using the latest node version on my local computer then sometimes ago I was needed to use the old Node 8 version to run a particular project. I looked around and found NVM for windows.

How to install NVM for Windows computers​

Go here to find the latest NVM for Windows releases. This is a separate project that lets Windows users use Node version manager.

At the time of writing this article, this is the latest version (the version you see may be different) but you will see a similar page:

Click on the nvm-setup.zip and download the zip file. Unzip the folder and install the program.

After that, go to your terminal (I use the built-in terminal in VS code)

Type in nvm -v to verify that NVM has been installed on your computer.

Type in nvm list to list all the node versions you have installed on your computer.

At this point, it may show only one version of Node you have installed on your computer.

To install a different version of Node JS, you can type in nvm install <version_number> like: nvm install 12.16.1

You can check out this page to see all the previous Node JS versions.

Once you have installed a new version using NVM, once again list them by typing nvm list.

Now you can select a particular Node version by typing: nvm use <version> like I did nvm use 8.9.4

Now type in node -v to verify that you are indeed using a different Node JS version:

You can also see that you are using a different NPM version that comes with that particular node installation:

Now you can use a specific version that is required in your project.

Did you know about NVM? Tweet this to your followers and let them know,

Final Words​

Node JS has two different audiences, the regular developers (us) and the open-source contributors (library authors). And for this reason, Node offers two different versions on their download page. For most cases, it’s safe to just go with the latest LTS version of the Node and if you are following a tutorial, just ask your instructor which version you should be using. Now that it’s the end of this article, here are a few things I want you to do:

• Download the latest 16.x.x LTS version of Node
• Start building something
• Check out the resources page if you want to learn more about Node

References​

1. Node.js. (2020). Node Releases. Retrieved January 30, 2020, from https://nodejs.org/en/about/releases/
2. Node.green (2020). Node.js ES2015 Support. Retrieved January 30, 2020, from https://node.green/
3. Cyren, T. (2017). 5 Fantastic Features Shipping with Node.js 8 LTS. Retrieved January 30, 2020, from https://nodesource.com/blog/five-fantastic-features-shipping-with-node-js-8-lts-carbon
4. Node.js. (2018). October Brings Node.js 10.x to LTS and Node.js 11 to Current! Retrieved January 30, 2020, from https://medium.com/@nodejs/october-brings-node-js-10-x-to-lts-and-node-js-11-to-current-ae19f8f12b51
5. Node.js. (2019). Announcing core Node.js support for ECMAScript modules. Retrieved January 30, 2020, from https://medium.com/@nodejs/announcing-core-node-js-support-for-ecmascript-modules-c5d6dc29b663
6. Node.js. (2022). Node.js 18 is now available!. Retrieved April 20, 2022, from https://nodejs.org/en/blog/announcements/v18-release-announce/

Why Express JS is used in Node JS? Express JS is a minimal framework for building web applications in Node JS. It makes the process of creating a server simple with built-in methods that’s why Express JS is widely used and is the de facto framework for Node.

Express JS is one framework that rules Node JS development. Express is also a central component for the MEAN stack development (MongoDB, Express, Angular, and Node).

Before Express, it was hard and cumbersome to build out a web server with Node but now you can install Express and run a server within a few lines of codes.

What does Express JS do in Node JS development?​

We know that we can use Node JS to build a backend server. Node provides an http module that you can use to check for routes, parse the payloads and supply content. But as you start building multiple routes, this becomes repetitive and a complicated process. Express JS simplifies the process by providing effective route creation and support for middlewares. It gives you all the tools you will need for route creation, parse payloads, create HTML view pages, work with middleware functions and connect to databases.

So in a nutshell, Express JS is used to build out web applications with Node JS. Why it’s used and instead of other frameworks? Because this is the one framework that 93% of the JavaScript developers like to use (State of JavaScript, 2019).

What are middlewares in Express JS?​

The Express framework works by making use of middlewares. Every route you create with Express JS will have the option to supply a middleware. Middleware is like a simple function that can do a certain task. Let’s say I create a middleware called validateEmail to check if the given email is a valid email address or not. I can pass this middleware into the route and when it reaches that part, it will run the function for validating email addresses. With middle-wares, you can make modular code that you can reuse all over your application that makes it easy for development.

Can I build a web server with plain Node JS without a framework?​

Yes, you can build a web server using only the built-in Node modules without using any frameworks. In fact, people used to build servers using the built-in http and https modules before Express came along. After learning how to build a full-stack web application with Node, I got interested to learn how I can build a server with vanilla Node. The process is a bit complicated and I soon realized how easy Express makes to build a server. If you are interested to learn how to build a server with the built-in modules, you can check out this course from Pirple.

Does Express JS come built-in with Node JS?​

Although Express JS is a hugely popular framework for Node, it does not comes built-in with Node JS. To use this framework you will have to install express via NPM in your node project.

Why JavaScript developers love Express JS?​

As mentioned previously that over 93% of the JavaScript developers are satisfied using the Express framework and would love to keep using it. Other than developer satisfaction, there are some other concrete reasons for using this framework. One big reason for using Express is that the framework is minimal and unopinionated. By this, it means, that with Express you can structure the app any way you want. Let me share what I mean by this.

Express JS is minimal and unopinionated​

According to the official Express JS homepage, it’s a “Fast, unopinionated, minimalist web framework for Node.js” (ExpressJS, 2020). Express uses less overhead in the core framework so that makes it minimal and a good choice for building out large web applications. You don’t want to have a framework that fills your codebase with lots of bloatware that you are never gonna use. With minimal code, the framework will not slow down your entire application.

Express JS is fast because of minimal footprint, but it also helps you build a server quickly. With a few lines of code, you can create a simple web server. With some more lines, you can create routes. When I went to create a server using the core Node modules, I realized how long and how many lines of code and logic it takes just to serve a “Hello World” page. This made me realize how quick and easy it is to build a server with a simple Express JS module.

Express is unopinionated and does not dictate you on how to structure your web applications. With Express you can structure your app any way you want; connect to any type of databases like MySQL, MongoDB or PostgreSQL; pick and use the view engine that you like the most such as pug, ejs, handlebars, mustache and many more.

When you have a specific need to fulfill you can pick another framework that best suits your needs. But did you know that other popular frameworks are actually built with Express?

Other frameworks are built on Express JS​

There are dozens of frameworks out there in the JavaScript ecosystem (Node.js Frameworks, 2020) and you know what, almost all of them are built on top of the core Express JS framework. Popular frameworks such as NestJS, Sails, Feathers JS, Loopback, and Graphql-yoga are among the few that are built using Express (ExpressJS, 2020). Another alternative framework to Node is Koa JS that is created by the same people who created Express JS. This shows the dominance of one single framework in the Node ecosystem.

If you are just getting started with Node and you don’t know where to start, you can safely pick Express JS. Then when you are leveling up and know what exactly you need, you can pick up other frameworks.

Companies using Express JS​

Of the top 10,000 websites on the internet, about 942 (9.42%) of the websites use Express JS (BuiltWith, 2020). This includes sites and services like PayPal, Glassdoor, Windows, Accenture, IBM, FOX Sports, Myntra, Uber, Yandex and many more (ExpressJS, 2020). Large companies using Express in their production application is a good enough reason to choose the Express framework and one of the dominating factors why people use it.

Conclusion​

Express JS makes it super simple to build routes, connect to the database, work with middlewares and serve dynamic HTML pages to build out web servers. It’s a fantastic tool that can speed up your Node development when you are just starting out. So I suggest you go ahead and give Express a try. Here are some steps to help you along the way,

Take a look at the Express JS documentation Build a Node server using Express JS Leave a comment on this post and let me know what you are going to build

References​

1. Express Usage Statistics. BuiltWith.com (2020). Retrieved January 29, 2020, from https://trends.builtwith.com/framework/Express
2. Companies using Express in production. Expressjs.com (2020). Retrieved January 29, 2020, from https://expressjs.com/en/resources/companies-using-express.html
3. Frameworks built on Express. Expressjs.com (2020). Retrieved January 29, 2020, from https://expressjs.com/en/resources/frameworks.html
4. The State of JavaScript: Backend Frameworks. State of JS (2019). Retrieved January 29, 2020, https://2019.stateofjs.com/back-end/
5. Node.js Frameworks. (2020). Retrieved January 29, 2020, from http://nodeframework.com/

How much time does it take to learn Node JS? It takes around 3 months to fully learn Node JS and be able to build a functional full-stack application. If you already know some other programming, you can get the basics down within a few week’s time.

This is because there are so many moving parts that go into building a working app such as a social network. It took me a similar amount of time by following a video course that took me from a beginner to a pro in deploying web applications.

Of course, the actual time to learn anything solely depends on your personality, how much time you have available to commit to learning, and what kind of skills you already have that you can take advantage of.

My skill level when I started learning Node JS​

I started learning Node JS while having good web development skills in HTML and CSS. I didn’t have any prior JavaScript skills, other than taking a programming fundamental course many years ago. When I was taking the Node course, I had no experience working with JavaScript and how backend development works. So when I was learning Node, I was also learning backend development and JavaScript at the same time. It’s completely fine to learn JavaScript while you are learning Node JS.

I am going to assume you have a similar skill level that I had when I started learning Node and will write the rest of this article according to it.

This much time I spent everyday learning Node​

When I was learning Node JS backend development, I dropped everything that I was doing previously. As a freelancer, I didn’t have any job or study during that time so I put all my focus and effort into learning this new skill. I was watching videos and writing code all the time during the day. I recall that I was spending roughly 4 focus hours in front of my computer every day for my Node learning. This time includes watching the video lessons, taking notes and then redoing what my instructor was doing.

To be honest, it was frustrating at times and I don’t recommend anyone to rigorously learn something like the way I did. I wanted to learn Node JS as fast as I can so I took this painful route. As it turns out, it still took me 3 months to complete the entire paid course from Wes Bos.

The entire Node course that I took was only 10 hours in length, but it takes way more than that to fully understand and then implement each of the concepts.

Prior to learning Node JS, I was a serial quitter. I took so many programming courses and failed to complete them so many times. So this time I was determined to finish what I started. But after I went through the pain, I had great results to show to the world.

What I was able to build after learning Node JS​

The course that I took taught me how to build a product listing site. This included user registration, logging in, posting user-generated content, and build REST API for favorites. I would make a new project from scratch the build out every feature I learned so far.

This is my node practice folder. Almost half of the projects I built during my initial three-month learning period.

I made practice projects that look like these:

As you can see, most of these practice projects were more geared towards social media sites, because that’s what I wanted to build. My first real project was building a Twitter clone out of my existing Node skills.

Twitter Clone This was a fun project to do since I also learned how to deploy the project on the internet, and I quickly deployed it onto a free Heroku service to show it to the world.

After that, I kept on building other projects like the Reddit clone, APIs, and many client projects. It was great to see my hard work finally paid off and bringing fruits of my labor. I also started getting many job inquiries from many different companies for interviews (because I was sharing my work on the internet). I even got a job offer later that year (which I declined.)

Most of all, I was happy that this time I did not quit and now I have a valuable skill that allows me to build full-stack applications. If you are pumped up reading my Node journey, now let me give you some tips on how to learn Node JS efficiently.

An efficient strategy for quickly learning Node JS​

Node is a huge topic and there is a lot to cover. You can spend years and years learning about it and will still feel you haven’t learned it enough. This is why you have to be smart with your learning goals. Instead of learning everything, there is about Node JS, take a small portion, and be the best at it.

I had the goal to learn how to build a full-stack application with Node so that I can make social networks. I think you should also follow this path and learn how to quickly build a similar project. The fastest way to build a Node server is by using a framework called Express JS.

Use Express JS to build your Node server​

Express JS is the simplest and the most popular framework for building a server application with Node JS. With this framework, you can get a server up and running within a few lines of code. Basically express is a yet another custom module you will install in your application and use all the methods provided by it. When working with Node JS, you will find that you are installing custom NPM modules for doing almost everything. It is common in the JavaScript ecosystem to use other people’s code. In this case, these codes are bundled in NPM modules.

Express has many methods that allow you to create routes, controllers, set the view engines, connect to the database and many more built-in configuration that makes it easier for you to set up a server. You can even use an express-generator to start a project with boilerplate code. Building a server is simply creating routes that can handle various HTTP methods.

Master the basic HTTP methods​

When you are building a server, all you have to do is to create a few routes to handle some HTTP methods. The frontend of your application will talk to your server using these routes and the methods. Let’s say you have a home page that will list all the tweets posted by all the users. The frontend will request to GET all the tweets to the /all route in the server. The server will then load up all the tweets at that handler and send it to the frontend for displaying.

Similarly, you may have a textbox on your frontend that will send a POST request whenever someone posts a new tweet. The frontend will send that POST request to the /post handler in the server, that the server will respond to accordingly.

With backend building you are going to make routes that handle GET, POST, PUT, DELETE and other HTTP requests for making basic CRUD operations(Create, Read, Update, and Delete). If you can learn the gist of how these methods work, you will be set for 80% of the work required in Node. In fact, these are common among every other backend server programming.

Here’s a tip: You can build the entirety of your server by using just the GET and POST methods.

But above all, you should not worry about memorizing all the little things.

You don’t have to memorize everything​

Node JS backend development is all about setting up different configuration files. It took me a long time to realize that there is no point in trying to memorize different configuration options. You see with Node and Express development, you are going to use a dozen third party NPM modules. All of these modules are created differently and have different configuration options. I tried to memorize and test myself time after time only to get frustrated. The truth is, you will still do well if you just look up the documentation.

Here’s how I want you to approach this:

1. Decide what functionality you want to achieve
2. Search Google and find the best module for the job
3. Check their documentation or watch a video to configure it
4. Test that it’s working as you wanted to
5. Repeat the process

In the early days, feel free to rely on all the modules out there. Once you get to an advanced level and know how to work with the built-in modules, maybe you will write your own custom functionality. But most importantly, practice and build a lot of stuff.

Practice and build a lot of projects​

I practiced a lot when taking the node course. This is the key to learning and leveling up quickly. Don’t just sit there with your course project, build new things with what you already know. I built new projects from scratch every day that helped me practice my skills and build out a small portfolio.

Finally, don’t be afraid of putting out your work to the world. Learn how to deploy your project to the internet and show it to everyone. Sharing my work helped me learn more and get new opportunities. After finishing the Node course in 3 months, it was time for me to spend time building new projects. While building new projects, I got to learn even more stuff about Node JS.

Now that you have the tips to learn Node in record time, let me share some next steps for you to get started immediately.

Next Steps​

• Decide what you want to build with Node JS
• Check the resources page if you are looing for a node course
• Build lots of practice projects and learn from doing

Comments:​

Chuks: Hello, Tamal. Thanks a lot for your very revealing article. I stumbled upon it on Quora after going through lots and lots of articles on JavaScript/Node.js. I have to say that you sort of described my current predicament.

So, I am actually new to programming. I started with Python last year (my first programming language), but then I got frustrated midway when I couldn’t build anything with it, and so I left it. I took up JavaScript this year, and because I wanted to do backend, I also started learning node. I bought two courses on Udemy, one on JavaScript, and the other on Node.js (by Andrew Mead).

Just like you mentioned, I am learning them side by side. I know just the basics of JavaScript, but I do not want to waste any time so I began on node immediately. I’m only just about 23 videos into the course (The course has almost 350 videos). I can’t wait to actually build something just so I can see the fruits of my labor.

I would love to be in correspondence with you and also follow you on social media, just to get some tips and advice as I embark on this journey. Once again thanks for this article, and I have to say that it has motivated me. I hope I would be able to complete this course because I am now fed up of leaving things halfway.

Tamal: Hello Chuks, thank you for your insightful comment and I am so glad that my journey motivated you to stick with it. JS is good because you can quickly build stuff that you can show to other people. This is an awesome way to keep you motivated while you are learning.

Stick to your current Udemy course and try to complete most of it (if not 100%). For a large course that has 350 videos, you can take this shortcut: Instead of making it a task to view all the videos, you can review the section and learn the gist of the section. For example, if you have a section called REST API with 20 videos, you may learn the topic by viewing only 3-4 important videos from that and make it complete. You can always get back to other videos when you have finished a few practice projects.

Thank you for wanting to stay in touch with me. Unfortunately, last year I deleted all my social media accounts and stopped broadcasting what I am working on. You can bookmark this site for new articles and also send me an email to stay in touch privately.

See you on the comments!

Mohit Kumar: Hey, thanks for the tips. Just to give you a little background: I actually am a fresher who has been working in a company that uses dotnet technology. But the problem is that most of the stuff that is being used is older versions of the technologies. For instance, they have still not moved on to dotnet core and are stuck on an older version. Angular 1.7 is still being used which is quite old as compared to the latest version. Getting recruited directly from college, it wasn’t easy for us Freshers as the training the company provided was very bad for people who had no background in these technologies. Now 9 months on, I still feel I have not adjusted entirely. I had wanted to learn some new technology for the past few months now and I have recently developed an interest in learning Node js. So a couple of days ago, I started learning MEAN stack development mainly through YouTube. I am enjoying it at present, everything seems so great in Node. And I seem to be picking up the basics at least quite quickly. The only experience of JavaScript I have is with angular that we use in our current company.

Now coming to some of my questions, what do you have to say about working with dotnet technology from a career perspective? And should I learn Node js by myself for a few months and seek a job in MEAN stack technology? How much scope does Node/MEAN stack have from a career perspective and from a versatility perspective in building different types of applications?

Tamal: Hello Mohit, thank you for your comment. I understand your need to work with the latest technologies. You have to find some time out of your job and build a few side projects with the MEAN stack. As for the career perspective, I still don’t have in-depth industry knowledge so I can’t say for sure. But what I have seen so far, technology stacks change all the time.

Ruby on Rails was all the hype, now it’s Node, then it will become Golang. Just because it’s not the hype, doesn’t mean people don’t use RoR anymore. In this industry, you have to learn a lot of technologies over your lifetime so learn how to build great software and don’t focus so much into specific tech stacks.

And about dotnet, I don’t want my opinion to change your mind. It’s a good technology and I am looking forward to moving towards .NET sometimes in the future, but for now, I am going to master Node JS and build a few projects until I become fully satisfied. dotnet here is the variable, any technology that solves the business problems is valuable. Learn how to solve business problems with technology and you will have better career opportunities.

Is Node JS a programming language? Node JS is not a programming language, it uses JavaScript language as the main programming interface. Node is a desktop application (or runtime environment) that runs JavaScript files. It mainly reads and writes files on a computer/server and does networking.

Node runtime can be compared to the JVM Java Virtual Machine or the IDLE Python interpreter. Whenever you want to write a program in a language, you have to install the software on your computer first. Think Node JS as that interpreter but for JavaScript files.

I often see people making a comparison of Node with other languages which then leads to silly fights between people that “you can’t make a comparison because it’s not a language” and all that. But when people do such comparisons, what they really mean is Node as the complete thing, and not just a language or the tool. So let me tell you a bit more about this runtime environment.

What is the Node runtime environment?​

Unlike other languages like Python, Ruby and Go, JavaScript didn’t have any kind of runtime environment. JS was made exclusively for the browser and it could only do certain things within the confinement of a browser like Chrome, Firefox, and Opera. As a result, we don’t have any print command in JavaScript, nor any file read & write option because JS doesn’t have any access to the computer’s file system. JavaScript was limited for doing simple page effects only. That changed when Ryan Dahl created the Node runtime environment (JSConf Europe, 2009).

The Node runtime environment is an application created in C++ which allowed the user to manipulate files on the computer. Dahl picked JavaScript as the programming interface for the Node runtime, and thus the name Node.js came (Dahl, 2009).

The Node environment was made similar to how the browser environment was made but with more capabilities so that we can make a web server out of it. This made it possible to write the backend of an application in JavaScript.

I won’t go in much detail of how exactly the Node runtime works, but I can tell you one thing that JavaScript gave Node a huge advantage when it comes to running a server and reading and writing files. The speed of Node JS made it possible to make efficient web applications and tools.

Why JavaScript was picked for the Node runtime?​

Ryan Dahl, the creator of Node, picked JavaScript as the language because it supports all the features he needed and a large number of developers already know how to write it. To build high performant server applications we should use the non-blocking event I/O model; luckily JavaScript is built in such a way that it already supports callbacks and events (Dahl, 2009).

https://www.youtube.com/watch?v=EeYvFl7li9E

To give you a clear example, let’s say I tell Node to write the user information in the database. Node will then send the request to the database. While the data is being written to the database, Node will not wait for it, instead, it will move on to the next task on the list. When the database gets back to Node, it will resume and do the appropriate action. This single attribute makes it possible to make faster and more efficient server applications.

Among other reasons, Dahl also mentioned that he picked JavaScript because it allows callbacks and has the option to supply functions as function parameters. JavaScript is a unique language and compared to other languages such as PHP, Java, and Python, it can do read-write operations much faster using a single thread.

By the way, Java and JavaScript are two different languages.

Are Java and JavaScript the same thing?​

They are not. Java is an object-oriented general-purpose compiled programming language. JavaScript, on the other hand, is a specific-purpose interpreted scripting language. The confusion happens for having the same name because when Java was popular, JavaScript was created to bring Java developers to the web (Netscape, 1995).

For simplicity, Java is a platform for making desktop, web, and mobile (android) apps, while JavaScript is used for making web applications.

Both languages have similar looking syntax because JavaScript was created based off of Java. The one difference between their syntax is: in Java, you have to define the type of the variable, while in JavaScript you don’t have to set the type of a variable. This is why JavaScript is called a weakly typed language and Java being the strongly typed lang.

What is the difference between browser JS and Node JS? The creator of Node JS took the original JavaScript language and made a custom implementation to it. To start off, in the browser, the global object is called window, but in Node, the global object is called global. This is because there is no browser window in a Node environment.

Since Node is capable of reading and writing files, there is a global method require which can read and include files from the directory. There is another module called fs (file system) for doing all the input and output operations.

All the browser-related APIs like the fetch, localStorage, Notification is not available in Node because it’s not a browser.

Node made few custom methods but kept the same name as the browser for consistency; like the console.log, setInterval, and setTimeout could be named anything but wasn’t.

On top of that, Node has a list of built-in modules that can help the user build a server and do all the CPU and server related tasks.

What Node JS is used for?​

As you already know, Node is used for building server-side applications and this was the original plan. However, as time went on, developers found many new ways to use Node. Here are some of the prominent use cases:

Node as a Full Stack Application​

The best use of Node JS and the reason why I got into this was to be able to build full-stack web applications. Node is good for building all types of web applications. I made social networks with it such as the Twitter and Reddit clone. Other people have made SaaS applications, chat applications, and many different sites.

With Node, you can create the backend using a framework such as Express JS and build out the frontend with a view engine such as pug. Node renders HTML pages by dynamically generating them from the backend. It’s not just only limited to creating web applications, but you can also create just the backend of a server for any type of application.

Node as the backend API​

Another popular use of Node JS is making the backend of any other type of application. You can make an android or iOS app to have it as the frontend and then make the API server using Node.js. Node is good for making REST APIs that can be used on any type of front end. You can even make a desktop application with Java or C++ and have Node to handle the server endpoints.

Currently, I like to make the backend with Node and use React.js as my frontend client application. With that being said, did you know that the biggest use of Node JS is currently in the frontend?

Node JS in the frontend​

Being a server-side platform, ironically Node JS is now hugely used on the frontend.

But it’s not the way you are thinking.

Using Node in the frontend does not really mean you are running Node.js in the browser. You see Node is very good when it comes to reading and writing lots of files in a short amount of time. Developers have used this feature to build lots of frontend tools. Nowadays, most of the popular tools in frontend development are built and run by Node JS.

For example, webpack is a popular tool for minimizing JS and CSS files. Webpack does this on the fly using Node. The same goes for other tools like babel, gulp, browserify and many more.

And this is the sole reason why you have to download and install Node even when you are working in the frontend using React or Angular. Node JS is everywhere when it comes to building web applications. Even if you are not building a web application, you may still encounter tools that are built using Node.

Advantage of learning Node​

If you are ever going to build a web application, you will need to learn Node JS. The one big advantage of learning Node is that you will be able to port your skills from frontend to backend and vice versa. If you know how to use JavaScript to build server-side applications, you will find it easier to transition your way into the frontend. If you know how to work with frontend frameworks like React and Vue, you will find it easier to build backend APIs because it’s the same language. You can also reuse your existing code because both ends use JavaScript.

Since Node is the only tool out there for building the tooling and the backend services, you can make a good career being an expert in it. I am sure, over time there will be more and more uses of Node which you can benefit from.

Final Thoughts​

Node JS is not a language, it’s a runtime environment, but these days when someone compares Node with another programming language, they mean the entire Node JavaScript ecosystem. The Node ecosystem is huge and so much is happening around it so I suggest you pick one aspect of it, such as building full-stack applications and practice building lots of applications.

If you are interested to get started with Node, here are some tips for you:

• Learn JavaScript because Node IS JavaScript
• Pick one area and be awesome with it, build something
• Comment on this post and let me know what do you think of Node

References:​

1. Dahl, R. (2009). Ryan Dahl: Original Node.js presentation. Retrieve on April 9, 2020, from https://youtu.be/EeYvFl7li9E?t=796
2. JSConf Europe. (2009). Node.js by Ryan Dahl. Retrieved on April 9, 2020, from https://www.jsconf.eu/2009/video_nodejs_by_ryan_dahl.html
3. Netscape. (1995). Netscape And Sun Announce Javascript, The Open, Cross-platform Object Scripting Language For Enterprise
4. Networks And The Internet. Retrieved on April 9, 2020, from https://web.archive.org/web/20070916144913/http://wp.netscape.com/newsref/pr/newsrelease67.html

So what is a good language for building a social network? JavaScript. Out of all the languages and tools, JavaScript helped me quickly build a social networking site using Node JS. As a beginner I found Node JS to have the shortest learning curve when it comes to building a full-stack application such as Twitter and Reddit.

Now that you know you can learn JavaScript as your programming language and use Node JS as your tool to build the site, let me give you an overview of what goes into a full-stack application. I will also share with you why did I pick the JavaScript tech stack and not the other options such as PHP or Ruby on Rails. So without further ado, let’s get going.

What goes into building a social networking website?​

A social networking site is a kind of dynamic web application that was made popular by sites like MySpace and Facebook. It got even more popular with the creation of Twitter and then came mobile-centric social networking sites like Instagram, Snapchat and TikTok.

The implementation may be different for various sites, but at a very basic level, all of these sites have a few things in common. When you go out and build such an application, you are doing the full-stack development. In other words, you are gonna make every aspect of the app.

A full-stack application consists of a frontend and a backend. The backend has many parts including the database. To make it easier to explain, I will talk about databases separately and what role they play in a social media site.

Frontend​

A social networking site has a public-facing user interface which is usually a page for the non-logged in users. On Facebook when you go to www.facebook.com from a different computer (or when you are logged out) you will see a page instructing you to sign up for an account. You can see a similar theme going on Twitter and Instagram where they prompt you to sign up for a new account or download their mobile app.

You will notice that on Twitter, you can see all the tweets from an individual user because Twitter’s policy is to make all the tweets public for the entire world, even to the logged out users. Similarly, Reddit allows everyone to read and consume their site without even having to create an account; they can only post content or reply to other people when they create an account. Another aspect of a dynamic website is that it changes based on the user.

When you log in to Facebook and visit www.facebook.com on your browser, you will find that the page shows completely different content. This page will now show the home feed of the updates from your friends, the brands and celebrities you follow and the posts from the groups you have joined.

Similarly, on Twitter, the home page is a custom feed of all the tweets from the people you follow.

In Reddit, the homepage will be a personalized feed containing the subreddit you are following or frequently browse.

Not just that, if your friend logs into any of these social networking sites, they will see a completely different feed based on his/her preferences.

This is the true beauty of a dynamic web application.

There are more than a billion social media users and for each of them the content they see on the same page changes from person to person.

You may wonder, for a billion users there are a billion profile information pages, but does that mean a web developer had to painstakingly have to build a billion profile pages?

Of course not.

The frontend web developer has only created one page for the profile page using HTML, CSS, and JavaScript. The frontend is no more than an empty shell waiting to be populated with user data from the database.

Database​

If there are a billion users on Facebook, there must be a way to store and manage all that information, the names, the birthdays, the passwords, the list of their friends, the pages they like, you get the idea!

On top of that, it should be easy and quick to fetch the information of a given person in a short amount of time. To solve this a database is used to store all the dynamic information for your social network.

Simple store of data​

When I went on to build a social networking app with Node JS, I learned that a database is nothing more than a simple text file. In fact, I can make a database out of a text file if I wanted to.

Every time someone creates a new account, I will create a new entry in my text file with the username, password, and other information. When that user tries to log in again, I will just check if the username exists in my text file and if the given password is correct, I will allow the user to log in.

The problem comes when I have to take and manage more data. In my custom social network, I just can’t have a user log in and do nothing. The user may want to post something, like a Tweet or a status update. I will then have to store status messages on my text file.

Maybe having two different text files for user data is a good idea. I will use my first text file to store the user information and the other text file for all the status updates in my network posted by all the users.

But then comes the problem,

How can I know who posted which status update or which update belongs to which user?

A nice solution could be giving a unique ID to each of my users and also putting this ID next to the status update so that each of the status updates will link to a user in my user’s text file and vice versa. This type of relationship is very common in relational databases, and it’s in fact how large complex databases work.

If I am reading the user file line by line from top to bottom it will take a significant time for a computer to find particular user info. I will also have to worry about generating unique ids for each of the users, the status updates and any other fields. It turns out, other people before me have already gone through these problems and have come up with a very good solution:

Real databases​

A database is nothing but a special data structure to efficiently hold and retrieve data.

When Facebook was originally created, Mark Zuckerburg used a MySQL database for building the site. Today there are many different databases to choose from like MySQL, MS SQL, PostgreSQL, SQLite, MongoDB, Oracle DB, DynamoDB and many more. But at the core, all the databases make it efficient to store and retrieve data about your web application.

When I built my first social network I used MongoDB with Node JS. Mongo is a popular No SQL database that is similar to the JSON data format (JSON is data representation in JavaScript object notation). MongoDB goes hand in hand with Node JS because the way it organizes data and the commands to store and retrieve data are similar to JavaScript language.

When you go on building a social network, you will have to use a database to store all the dynamic content in it. A database is like the heart of a web application and you must pay extra attention to protect it. If you lose it or the data gets corrupted, your entire database will be gone in an instance. So it’s a good idea to pay a premium for a database and keep regular backups in case something goes wrong.

A database is the content of a social network, but the brain that makes everything come together is the backend of your application.

Backend​

A simple HTML, CSS website does nothing, because there is no database to store the content and no mechanism in the backend to do the logic. For every social network out there, the real magic happens in the backend of the application.

1. The frontend will greet the visitor and take an order (request). The user registers for a new account with a name, email, and password.
2. The frontend will then send the request to the backend server. In this case, the information submitted by the user on the form.
3. The backend code lives somewhere in the server and is always listening for incoming requests.
4. The backend will receive a new request for registering a new user with all the information.
5. The backend will check and verify the name, email, and password, making sure the email is not already taken.
6. If everything is okay, the backend will create a new entry for the user in the database and tell the front end (response) to log this user into the account and display the home feed.
7. The frontend will receive the new response to log the user in and display the home feed so it will do it accordingly.

This is, of course, a simple representation of the request-response cycle. In a nutshell, every time the user clicks on something on the frontend, every time they post a comment or every time they move to a different page, a new request is sent to the backend for processing; the frontend then gets a new response back with some data to display to the user.

And all of this happens in less than a second.

If you want to build a social network, you will have to follow a design pattern. The most popular design pattern for building a social network is the MVC design pattern. MVC stands for Model, View, Controller; Twitter and many other social networking apps and even SaaS apps are built using this pattern. Express JS is a Node JS framework that makes it easy to build an application with the MVC design pattern. Let me share the core concepts in detail below,

Model​

Model in MVC is the database layer where all the data is stored that will determine the makeup of the data. In Node.js development when you will be using MongoDB to build your database, you will have to provide the data structure within your server files. For a user, the data structure could be the username, first name, last name, email, password, date of birth, etc. A model is responsible for storing and retrieving the data for the entire application.

View​

A view in MVC is the user-facing interface that the user can interact with. When I went to build a social network in Node JS, I used pug to build the dynamic HTML templates. A pug file is like a template where I can include custom JavaScript variables which will render real information to the user. Depending on the kind of user, the view layer can show different information based on the logic. Other options to build a view layer in Node JS are ejs, handlebars, and mustache.

Controller​

A controller in MVC is the main logic or the brain of the application. In Node JS, this is achieved by making lots of functions and handlers for different requests. For each of the different requests, there will be different handlers and different functions.

To illustrate this, when someone posts a status update, the front end will send a POST request to the /post handler with the appropriate content. A controller will have a bunch of different handlers so it will then route this request to the handler which deals with posting new status updates.

Let’s say the handler is a function in JavaScript called postStatueUpdate. This function will then take the status update and perform other tasks like storing the update to the MongoDB database. When the update is stored, it will send a response to the frontend that it was successful. Now finally the controller will tell the front end to display the new post to the view layer. In a nutshell, the controller is the central nervous system that works constantly with the model and the view layer of the app.

Now that you have an overview of what goes into a social network, let me tell you why Node JS is a good tool for a beginner to build a full-stack application.

Why use Node JS to build a social networking app?​

Now you must be thinking, if I have all the many different options to build my backend server, why would I pick Node.js to build it? The first reason is speed.

Speed​

Node JS is fast when it comes to reading and writing data to and from the disk. A social networking website is all about user-generated content where users will create posts, comment on them, like, dislike and delete posts. This all means your application will have to do a lot of updates to the database and one thing I learned after building a bunch of applications is, that database updates take a significant amount of time.

Node JS is asynchronous and can handle all the requests one after the other without impacting the user interface. In traditional server-side languages, like in PHP, Java, and Python, the server will wait until read/write operation is complete. But in Node JS, it will send the read/write action to the queue and go on working on other requests. When the read/write action is complete, it will respond accordingly. This gives a huge advantage to a social networking site, where lots of requests are happening simultaneously. As a beginner, you would want to pick a tool that is easier to learn fast.

Ease of learning​

Node JS is JavaScript and if you already know how to build a simple website with HTML, CSS, and JavaScript, the learning curve will cut down in half.

Node application structures are built with a straight forward functional approach. When building my Twitter clone application, I used the Express framework which is just a collection of useful methods for making APIs and handlers. The process of making a Node JS application is as simple as making a bunch of functions that call each other at various stages. A typical Node project heavily relies on packages that are functions other people wrote which you can freely use. Node project also has a lot of set configurations that you can just copy-paste from boilerplate code.

One language​

Finally, Node JS lets you use a single language, JavaScript to do both the frontend and the backend of an application. In other technological stacks like in PHP, Python, Ruby, and Java, you will still have to do the frontend logic with JavaScript which means you will have to work with a minimum of two programming languages at a time.

As a beginner programmer, I had a hard time working with JavaScript in the front and PHP in the back. I was forgetting one language when I was working with the other. Node JS helped me focus only on JavaScript and I was able to build a full-stack social network with ease.

So if you are a new programmer, and would like to learn a single language to build the entire stack, then pick Node JS. Your JavaScript tech stack will look like this:

• Node JS -The runtime environment for the server
• Express JS -Framework to build your application
• MongoDB -A powerful database built on JS principles
• Pug, ejs, handlebars -for creating the view layer
• Frontend frameworks: React, Angular, Vue

(You can always learn new backend technologies once you have gained enough confidence with your first few projects.)

Next Steps​

• Download the latest LTS version of Node JS and install in your computer
• Learn how to make a simple web app using the Express JS framework
• Make a few learning projects by storing and retrieving from MongoDB database

The periodic table is a collection of elements arranged in an oddly structured way. It has already been built in the past, but the question is, can I do it myself without looking?

Making the Layout​

The first task was to arrange all the elements in the peculiar order. The first idea that came into my mind was to make an HTML <table>, and put all the items inside the table cells. But tables are old and messy, not to mention, they are very hard to maintain.

I know CSS grid, so why not use that?

At that point I was a bit skeptical, and thought maybe I will have to use flexbox to achieve the task.

So each of these elements will be a <div>, and I will arrange them with CSS.

I made the elements like this:

I put 2 classes, the element class to make the box, and element-1 to specifically control the position. I would have 118 elements altogether.

Instead of hand coding all 118 divs for my table, I used the emmet shorthand:

The table has 18 columns, so I made an 18 column layout with CSS grid.

The Tricky Part​

Okay, so now that I have the container ready, I have to put Hydrogen as the first element and Helium all the way to the right.

I did this:

And it worked!

One by one, I arranged the elements in this manner. Since I append the exact element’s number as the class for each cell, I can easily control their positions in the table.

In the periodic table, there is a large gap between elements. Let’s take a look — the original periodic table is very long, about 32 columns:

To prevent it from being this wide, there are versions of the table which carve out a separate grouping of elements. I had to do the same with my table.

So what I did was to separate the Lanthanide and Actinides from the markup and from the CSS.

After the layout was ready, it’s now time to add the React.

Filling the Table with Data​

It was all fun and games filling out the first few elements. But soon I realized there are 100s of elements that needed to be added. Do I have to type out ever single one? It would suck the fun and life out of me.

So why not do the smart thing and pragmatically fill out the info?

I searched the internet and found one JSON which has information about all the 118 items. So I added this data to my application.

In the JSON, there is an array of elements. My idea was to reference each element by their order. In an array, the first item starts at 0. That means Hydrogen is at zero, Helium is at 1, Lithium at 2 and so on. To avoid this confusion, I added a placeholder item in the 0th position. So now every element is correctly in the same position as it is in the periodic table.

Now that I have the data that I need, I can just make one React component to render all the elements and pass in the data as props.

Initially, I thought I need to pass in the name, the number, and the symbol of the element as the props to the React component.

Then I realized I can just pass in the element’s number, and that would be enough to use the JSON data to extract the entire information about that particular element within the <Element /> component.

The rest was all about making the app interactive.

Coloring the Element Groups​

In the Periodic Table, each of the elements are ordered by their category and they are colored. So instead of coloring each of them I put their categories on the CSS too using the React component.

This gave the table that cool look.

Making the Table Fit The Screen​

To start, I made the table 1000 pixels in wide following the general layout practice. But that made the elements too tiny.

So I decided to make it fit the screen and utilized viewport width exclusively. I used vw for the element dimensions, text, and headings throughout the app. This helped to maintain the shape across screen sizes and devices. The table is mainly made for desktop screens, but it still looks okay on tablets too.

Final Touches​

The table is not complete if it just sits there doing nothing. I added a panel which displays additional information about the element when selected. React was great for this job. So why don’t you see it for yourself in action here?

There are more things happening in the code, why don’t you dig inside and see it yourself? I welcome you to copy the code/fork it from Github.

I’m playing Fruit Ninja these days. After every round, it shows interesting fruit facts. I got an idea to make an API that will display random fruit facts in JSON format. This way I can put my knowledge to use while building something fun.

I built this simple API which shows interesting fruit facts in JSON format. When you type in localhost:3000/apple or any other available fruits, it will spit out this data.

The API is simple yet sophisticated. This is the first time I’m building a URL slug which acts as a variable. It’s the same as /:fruit in express.js.

I suggest you open the up the code and follow along with this post.

The idea is to take the full URL http://localhost:3000/mango and split it into parts. Then I take the path /mango and strip out any slashes to get a final clean trimmed path mango after which I can match the slug against my route handlers. I learned this way doing it from Pirple’s Node Masterclass course.

let parsedUrl = url.parse(req.url, true)
let trimmedPath = parsedUrl.pathname.replace(/^\/|\/+$/g, '')
if (!trimmedPath) trimmedPath = 'index'

I collected these fruit facts from a wiki page. I will write about how I scrapped those facts with JavaScript in another post.

I create an array of available fruits. Many fruits have more than one fact so I created an object of fruits with an array of facts for every fruit:

apple: [
    'The average person eats 65 apples per year',
    'Apple seeds are mildly poisonous, but not enough to be dangerous to humans',
    'There are over 10,000 varieties of apples grown around the world',
    "25% of an apple's volume is air, that’s why they float",
    'Over 60 million tons of apples are grown worldwide annually'
  ],

Other than the fruit facts, the API also has 3 additional pages — the homepage, a not found page, and a help page. First I check if the given URL slug is a matching fruit. If it’s a matching fruit, it will serve the fruit handler with the given fruit. If it doesn’t include a matching fruit but matches the other handlers, it will serve them accordingly:

let chosenHandler

if (fruits.includes(trimmedPath)) {
  chosenHandler = handlers.fruit
} else {
  chosenHandler =
    typeof router[trimmedPath] !== 'undefined'
      ? router[trimmedPath]
      : handlers.notFound
}

Then all is left to do is to call the chosenHandler function and pass in the callback function:

  chosenHandler(trimmedPath, function(statusCode, payload) {
    statusCode = typeof statusCode === 'number' ? statusCode : 200;
    payload = typeof payload === 'object' ? payload : {};
    let payloadString = JSON.stringify(payload);
    // Send the response
    res.setHeader('Content-Type', 'application/json');
    res.writeHead(statusCode);
    res.end(payloadString);
  });
});

We use the native http package to create a web server. The server is built using http.createServer. The createServer function takes a callback where we can handle requests and serve fruit facts or other pages from chosenHandler. We then listen to port 3000 using server.listen.

const server = http.createServer(function(req, res) {
// Callback to handle requests with chosenHandler
}
server.listen(3000, () => { console.log('Server started') })

You can tinker with the code on my Github page. I suggest you install the JSON viewer extension to see the JSON in a nice formatted way.

Learn touch typing​

Touch typing is typing with all of your 10 fingers. Many computer users don’t know how to touch type and they use one or two fingers to type out. Even I was a two-finger typer for a long time. If you learn touch typing, you can type without looking or even in the dark. You will also be able to type at the speed of your thought. Without it, you will constantly have to look for the keys and make mistakes.

As a programmer, your full attention should be on the problem at hand, not where the keys are. You can learn touch typing within a few weeks by using this free service called TypingClub.

Use a linter to auto-format your code​

There are many code linting plugins out there that can format your code upon save. Don’t waste your time trying to manually add spaces, missing semi-colons or trying to match your desired syntax format. Use a syntax formatting plugin for your code-editor and let that take care of it for you. Set your style once and don’t ever worry about it again. Clean code is not just efficient, it will also make you look professional. I use Prettier for VS Code to lint my code.

Use half the screen for coding​

If you are using a single monitor just like me, you can save trouble by making the code editor half the size of your screen. This way you can code on one side and use the rest of your screen for other things like reading the documentation or previewing changes, so you won’t have to switch windows all the time and can focus on the problem at hand.

Learn to use version control (Git) and publish to Github​

If you want to become a software engineer, then you will have to learn how to work in a team. A version control system such as git can help you and your teammates work on the same code all at once. Github is a popular online git repository where you can host your code for free. I use git to version control my files and then upload them to Github. This way I get to have a backup of my code and also show off my work. VS Code has git feature built-in which makes it easier for committing and branching code. If you are having trouble with git commands, take a look at this no bullshit guide to git.

Spend some time learning about your system​

If you want to be super productive, you must know 3 things really well:

1. Your operating system
2. Your code editor (like VS code)
3. The language you are working on

By learning about them means you should know the keyboard shortcuts, how to find things and how to troubleshoot errors. Having good knowledge won’t actually make a good programmer, but it will sure make you productive. So when the next time you are not doing anything, look into the different menu items, try different keyboard shortcuts or open up the documentation and learn something new about your system.

Play some games/watch a TV show without guilt​

Every once in a while you should play your favorite game or watch a TV show. You cannot just code 24/7, you also need to recharge your mind. When you are playing, don’t feel guilty about it. You may be spending the whole day playing a game, but that’s okay, you need it. When you are playing a game, you can think about the character or the environment, how did the developer program it? What was the variable or conditions that trigger this event? TV shows and movies are stories of people dealing with problems. You can watch a story and get some inspiration to solve your programming problems or build something new. You never know what you can get out of it to use it on your programs, so take some break!

Go away from your computer every once in a while​

Go out and meet some people, spend some time with your friends and family. Sometimes you want to go out and have some alone time. Treat yourself with a nice dinner or a movie, all by yourself. Going out of the digital world can help you recharge your mind and re-focus on things. You will get back to your work with a fresh mindset.

Conclusion​

Did you find any new tips that can help you be more productive? What is one thing you do to help you get better at code? Feel free to let me know in the comments. While you are reading and sharing this article, I feel I need to get out and apply the last tip. See you next week!

To prevent this, I am going to outline some of the best practices when it comes to sharing passwords with your designer/developer. Especially when you are hiring them on a marketplace such as Fiverr or Upwork.

Give your developer access to your site without sharing the password​

Many modern website builders such as Shopify, Wix builder, GoDaddy builder lets you give access to your site to a developer. Shopify even lets the developer build the shop in their own account and then transfer it to yours when the task is complete.

You just have to enter their username or email in your control panel and they are given developer access to your properties. This eliminates the need to give out your password.

When working with a self hosted WordPress.org website, you can simply create a new user account. Create the new account with admin privileges, and send that user credentials instead of your main one. Once they are done and handed you over the project, you can just simply delete their user account. This is a very convenient and safer option compared to sharing your password.

Use a password manager to share your passwords​

When you can’t give access without giving them the password, you can use a password manager to do this for you. You can share it using LastPass. The developer will get an email message asking them to accept the share. They must already have a free LastPass account to use it.

When they accept your password sharing request, they can log in to that appropriate account without having to look at the actual password. This gives you extra security and will bring peace of mind. In fact, one of my client shared their password with me via Lastpass.

Don’t use the same password for all of your sites​

Many internet users use the same password for all their internet accounts. If you expose one of them to a hacker, they will be able to get into all of your internet accounts.

For this reason you should use different passwords to use on different sites. A password manager such as LastPass can remember these passwords for you.

I use LastPass as my password manager tool. It has a chrome extension and it auto fills my passwords for various sites. You can generate secure passwords with it. You can also have it memorize all of your passwords.

Some extra caution​

Often times passwords are shared via instant messages, emails or via text files. These passwords stay on someone’s computer for quite a while. So it’s better to change to a different password as soon as the development project is done.

Developers don’t usually steal client information, it’s the hackers and viruses which you should be worried about.

With all these tips I am sure you will be prepared when the next time you hire a freelance website developer.

Your Tasks:​

• Update your email account, domain and website passwords
• Start using a password manager to generate and store your passwords
• Stop sharing passwords via instant messages

In JavaScript every function creates its own scope. We may not realize it just by looking at the code, it will help if we visualize it like this:

The floor is like the main function scope or the global scope.

Every time you create a new function, it will be like a bucket.

All the variables you create inside that bucket (function) will only be accessible within that bucket only.

You can create a function inside another function, or to say bucket inside another bucket.

JavaScript likes to execute each of these functions in stack order. It will stack them all on top of each other and the topmost item will be executed first. After that JS will delete the bucket and move on.

For this reason an outer function won’t have access to a variable which was inside another function. Because by the time the function gets its chance, the inner function does not exists anymore.

What happens when there is a variable in a function, which the inner function wants to use?

JavaScript sees that, and says “Hold on a sec, you don’t have that variable defined! Don’t go anywhere, let me backtrack and see if your parent function, or any of their parents has it.” It goes on looking and when it finds the variable, it will now lock the 2 (or more) buckets in its memory. This scope is called a lexical scope, or in other words: a closure in JavaScript.

After both the inner and outer function is done, and the variable is no longer needed anymore, JavaScript call stack will eliminate them all.

You don’t!

You should never store the raw password into your application.

Some badly coded websites store the raw password into their database.

They store the actual password and even send you via email:

This means your password is at risk.

(by the way, I didn’t code that website, I used a plugin called DAP in WordPress)

As an app developer, you should not store the actual password into your database.

And, as a user you should stay away from such sites and inform the webmaster.

Hash the password and store it into your database​

So instead of storing the actual password, you cryptographically hash the password and then store the hash instead of the password.

If I don’t store the password, then how people are supposed to log back in?

When someone tries to log in, they will enter their password. You will have to run the hashing function again with that given password. Then you match this new hash with the stored hash.

When you hash the same password with the same secret key, you will get the same hash string.

So it will be a match and you know the password was correct and you go ahead and login the user.

This is why when you forget the password, you don’t get to see the password, instead they send you a link to reset the password. Behind the scenes you are just creating a new hash in the system.

Hash the password with a salt​

Now normally I would hash the password with a secret key. The problem is, two users may have the same password. Let’s say two users have used 1234 as their password. When your system hashes the password, both user will have the same hash. If your database gets stolen and the hacker sees, those 2 users have the same hash, that means their passwords are the same. This makes things easier for the hacker.

To fix this, you have to generate a new string which will act as a salt. This salt will also be saved into the database for each user. Each of these salts will be unique per user.

So next, instead of hashing the password with a secret key, you use the salt to hash the password. That way now you will get a unique hash per user.

Code examples:​

Here’s how I created a salt using the crypto module in Node.js:

var crypto = require('crypto')
var createTheSalt = function () {
  return crypto.randomBytes(20).toString('hex')
}

And here I’m using the salt and the given password to hash the password:

var crypto = require('crypto');
var hashThePassword = function(password, salt) {
  password =
    password.length && typeof password === 'string' ? password : undefined;
  if (password && salt) {
    // Create the salt
    let hash = crypto
      .createHmac('sha512', salt)
      .update(password)
      .digest('hex');
    // Return a salt and hash object
    return { salt, hash };
  } else {
    return null;
  }

So the next time you come across a website which sends your actual password when you forgot the password, know that your data is in wrong hands.

I am now going in deep with JS. It’s fun.

I am following this collection of 33 Concepts in JS which is really helping me a LOT. I am tackling about one concept a day. One thing leads to another and I am spending most of my YouTube hours watching JS related videos and reading articles.

Staying focused in one language is helping me learn it quicker and soon I will become a master of it.

It’s not very easy to focus you know, every week I think about checking out another language. Languages like Go, Python, Kotlin, teases me in my YouTube feed.

There are some weird parts of JavaScript, which sometimes turn me off, but then again when I learn a new concept I get back up at it. I am glad I did not quit Node.js when I was getting bored with it.

As I mentioned before, I am not a big fan of JavaScript and predict it will be replaced in the near future. But until that time comes up (maybe in 5-10 years) why not be really good at it while it’s thriving?

Features​

A user can get a display name. This time I did not use any user registration mechanism. This also lead to some spam, which I will share in the rest of this post.

The user can post something and vote up and down. Users can vote as many times as she wants, again some lazy coding.

It was more like a prototype of how the app would look and feel like. I didn’t do much work in the backend other than connecting the database.

So I was happy to put it out there, hosting it on heroku.

Both my front end client code and backend server code is hosted on Heroku. After deploying I was getting a ‘Not Found’ error.

After some digging, I found that the ‘build’ folder in the react app gets ignored by default in the gitignore file. So I put that backup and now my app it up!

Some thoughts after publishing it online:​

Using it on localhost vs actual live deployment has day and night difference.

The app loads the posts after it publishes into the database, so this makes the app lose its react-ness. So in future work I will post the data to the state first, so when someone submits a post it gets displayed instantly and then sent to the database in the background.

The site needs a loading indicator. Currently, the page stays dumb for a few seconds until all the post gets loaded.

When I shared the site with the dev community, people started to spam the site. This is the first time I went to a headless approach. My backend gets data pushed to it via REST API’s. I did not secure my API’s this means anyone can send a request to it and manipulate the database. This + not having any validations led to a lot of post spam.

After a few days I dig into the code and added some validation mechanisms to the code.

Comments:​

Christophe: Hi Tamal, Reading your awesome blogposts. I following the same way as you. Learning the basics from a lot of (web)languages (html,css,JS,php,perl,Sass,…) and have experience with a lot of cms’systems like processwire, Drupal, Get Simple CMS, GRAV CMS, … the last 3 years Building WP websites and do small theme and plugin development work. I’m not an advanced programmer, but is difficult focus on one programming language. In the feature i will try do a different thing and will do more developing webapps. So with this in mind, trying learn NodeJS the last weeks. Searching the internet about NodeJS articles, bought a book about NodeJS and looking a lot of NodeJS video’s. At the moment i can build a (more advanced) ‘hello world’ app in NodeJS. I understand now what MEAN-stack is and other basic stuff. Explore the Express Generator and so on. But, there is a lot of work for me while developing like a pro. So i follow your blog with a lot of interest. Last but not least, sorry for my poor English ? Grtz from Belgium 😉

All the best Chris, try to stick to one language/tech. Node is very good, but it can be overwhelming. Just keep on grinding and building stuff.

Now that’s all the technical stuff, let me share what’s exactly I mean by all this..

So I know how to make simple websites with HTML and CSS. But the problem is, those sites are dumb, they don’t do anything.

If I wanted to make it more than a website, I needed to make it more dynamic. Like adding option for user registration. Give option to add content, comment on it. Do something with the input etc.

For many years, I used WordPress to build basic dynamic websites. However WordPress is very limited to what you can do with it.

To turn a WordPress site into a social website, I had to install a lot of plugins and do a lot of theme modifications. At the end of the day, it’s a hard thing to do, since WP was originally built to do one thing.

So I knew, if I wanted to build a true web application, I had to go to the custom route.

Enter React​

React is a user facing front end framework to build cool web pages/web applications. I fell in love with react because you can do something on the page and get the result without having to refresh the browser.

It can even process the data without you having to press a submit button, see:

So it turns out, with simple react I can just create a bunch of todo style apps.

I realized that, react is not enough to build a full web application. It’s just the front layout of the complete app.

Enter Node​

Node lets me make user registration option, ability to login, then submit content and all that cool stuff. I learned how to build a web app by building a simple Twitter clone app last season.

In that article I mentioned, I am not fully satisfied the way it’s turned out. It needs the reactness.

So this means I have to combine the magic of React with the power of Node.

Here Comes MERN​

It was a long lasting dream of mind to build a full stack app with Node in the backend and React on the front. I finally built a project called Reddit Clone, this time it’s a MERN app.

How long it took me? Roughly 6 months, from Node, then React and finally MERN stack.

Yeah baby, I am now a MERN stack developer.

So what’s next?

Let’s build more awesome stuff!!

Comments:​

Navdeep Singh: I can feel your excitement. Kudos to you bro. Keep it up. ~ Stay Foolish, Stay Focused.

This is actually an interesting take on learning code.

And this also happened with me when learning other languages!

If you read my other stuff, you will know that I went from one language to another to finally settle down with JavaScript.

For the other languages that I tried, Java, Python, PHP and Ruby, I didn’t got to build anything with them. I could not fully understand those tech and kinda lost interest.

Now with Node, the same thing happened in the beginning, but I said to myself, if I quit now, I will feel the same with yet another language down the road.

So I went with it anyway and got passed the hard learning curve.

Now recently I am fairly proficient with Node.js and all it takes for me is to put some work to build an application.

But the process kinda bores me.

I looked into other novelty, like another computer language.

Looking into C, C++ Tutorials​

So last evening I went online and look into some C and C++ tutorials. I went through some intro level stuff and I felt the same excitement the way I felt with intro level node stuff. The brain seeks new. There is a happiness trying to figure out something new.

Then I looked into a game developer building a game from scratch.

Then I realized..

The pain of building something with C++ is no different than building with Node.

No matter what language or tech you choose, after going past the easy stuff, you will have to keep on grinding.

Short term Excitement vs long term Fulfillment​

I know Node, but that’s just barely scratching the surface. There is so much more to learn about the Node runtime and JavaScript. If I just give it another chance, I can see what more is out there in this technology.

Yeah looking into a new language/tech can give me a small boost of excitement, but true happiness comes from building software that people really use and enjoy.

So Tamal, don’t fall into the trap of seeking novelty in yet another shiny new thing. Stick to Node + JavaScript until you fully master it.

I’m sure you won’t regret it!

Comments:​

Ali: This is so true Thanks for sharing your experience Your words resonated very well with me I myself am learning node but couldn’t get my head around JavaScript It has been a month in and I’m not comfortable at all with the syntax and concepts But I guess I should grind and go on

Tamal: Hi Ali, thanks for dropping by. If you want to work on the web, then JavaScript will help you a lot, so keep on grinding. However since you are new to code, you can try out different things until you find one that best suits you.

I deployed the app into a live server in Heroku, making it my first live Node/Express app.

I first shared the link onto the Node.js Facebook group for feedback. I also asked people not to attack it.

Here’s the app in action: https://www.youtube.com/watch?v=fMIU9cG4qmw

So after launching the site, so many things I realized for the first time. Let me start with the positive first:

The Positive​

The twitter clone app gave me confidence as a newbie web developer. This is the first time I built a full stack web application without WordPress. I got lots of positive feedback for this project.

I was taking the Node course from Wes Bos. The final chapter showed how to deploy the app on the internet. After learning it, I quickly built out this twitter clone app and put it out.

I am especially fond of the design of the app. I did this design with vanilla CSS with the pug template engine.

The Negative​

For starters, the app I built is super slow. This probably because I am using free web hosting from Heroku and a free tier database from mlab.

Also for every request, I make (creating a tweet) the app reloads the page. All this makes the user experience laggy. I would call it the very early version of the original twitter site, and not a complete twitter clone.

After a while, all the profile pictures disappear. This is probably because Heroku does not allow image hosting. My app also has some security flaws which I have to learn and implement into the next projects.

My site is not mobile responsive either. I just wanted to put it up online as quickly as possible. From next time on, I will go with mobile-first approach.

After Twitter Clone​

After finishing the Node course (and the twitter clone) I took some break from Node.js. I went on and took another course for React.js. I spent some time learning React, as my end goal is to build web apps with the MERN stack (Mongo, Express, React & Node)

I spent a few weeks with React, building a few small apps. Then lately I reunited again with Node.js. This time I am building apps with Node and React combined.

The idea is to build the backend API with Node/Express and the front-facing user interface with React.

So this means if I refactor the twitter clone in React, then I will be able to make it respond faster (like realtime).

I also need to learn more about test-driven development so I can make better apps.

Verdict​

So looks like I am not happy with my creation, that’s one reason it took me so much time to write about it. It’s actually a positive thing, this means my expectations are much higher. I just have to work on honing my skills and keep on building. Here’s the Github repo.

I chose Node.js to build the backend of my web application, just so that I can use a single language to build both the front and the back.

I am not a fanboy of this language, and neither should you.

In fact you should not be a fanboy of any given language, framework or technology.

The thing is, technology changes over time.

Being blindly in love with a technology will make you biased towards it. You won’t see its flaws. If you truly want to learn JavaScript, start using it. Know what it can do, what its limitations are.

Use it as a tool.

My passion is to build useful web applications, not to code in JavaScript.

In the past there were cool languages which got replaced by C and C++. Soon these languages are going to be replaced by modern languages like Python, Go, Kotlin. Look into the future, JavaScript WILL be replaced by better technologies, it’s inevitable.

So instead of being a fanboy, learn to become a really good software engineer. And once the time comes for the switch, you can take all your software building expertise you learned from JavaScript and apply onto the next thing.

In MongoDB mongoose, there are some handy commands for creating, editing items. Let’s say I have a blog post which I created. To edit it, I call the .findOneAndUpdate() method for editing the existing collection.

I soon figured out there must be a .removeOne() or .deleteOne() method to delete an item from the database collection.

I gave that a try.

I created a controller to delete a collection, with some trial and error I was able to figure out the command for deleting a blog post is running the .deleteOne() method on my Blog object.

In my router, I used a GET method for this delete option. Anytime I call the delete route, the post with that ID will be deleted.

This week I am building a twitter clone with Node.js. Here I have a bunch of tweets posted by bunch of users.

Now here’s the problem, anyone can delete a tweet with the delete button, even the people who are not even logged in.

You can type in the Site.com/delete/5b16d5ac27542f10343e2717 and can manually delete any tweet from the database, because it’s a GET request.

To fix this issue, I added a controller to check if the user is logged in to complete this action.

router.get(
  '/delete/:id',
  authController.isLoggedIn,
  tweetController.deleteTweet
)

Okay, now only the logged in users can delete a tweet. But the problem was still there, anyone can delete any tweet.

So I have to use a permission for deleting. Only allow the owner of that tweet to be able to delete it.

I modeled this code after Wes Bos’ LearnNode course. In video #29 he shows how to display the edit screen only to the owner of that store.

The code looks like this:

So first I load up the store from the database and check for if the user actually owns the store. If the user owns the store, only then I will render the edit store page.

However this won’t work with the delete action. You see if I call .deleteOne(), then the tweet will be already deleted.

So instead I called the tweet first and then checked if the user owned that tweet.

exports.deleteTweet = async (req, res) => {
  try {
    const tweet = await Tweet.findOne({ _id: req.params.id })
    if (!req.user.username === 'tamal') {
      confirmedOwner(tweet, req.user)
    }

    const deleteTweet = await Tweet.deleteOne(tweet)
    res.redirect('back')
  } catch (e) {
    console.log(e)
    res.redirect('/?msg=Failed to delete')
  }
}

Once he/she is a verified owner, only then run the next command which is deleting the tweet.

This made things bulletproof for now. Only the logged in users, who actually owned the tweet can delete it.

The final step was to only show the “Delete” link to the owner of that tweet.

It’s hard to keep track of my washed and dirty clothes. I have no idea how long it’s been since last wash. So I needed to track them by making a list and counting the dates.

The first idea is obviously writing them down on paper, but then I thought why not use my JavaScript skills to build an app to track it?

The initial idea:​

It’s a one page app with a To-Do list kind of functionality. I want to be able to add and remove items. In this context, my items are the clothes.

I also want to add a date into that clothe and count how many days have been passed.

Doing a quick google search revealed that there is a Date object in JavaScript which I can tap into.

So for every clothe, I attached the current date into it.

I created an array of objects. Each object being the item of clothing that has an item text and a date field.

const sampleData = [
  { text: 'Sample Item', date: '2018-05-21T14:53:18.883Z', done: false },
  { text: 'Another Sample', date: '2018-05-21T14:53:26.899Z', done: false },
]

For now I just need these two things.

Tracking how many days passed​

In my mind I thought I had to do some calculations and save the new data in a new field for how many days passed. Then I remembered, there is a cool library called Moment.js.

If I put the date into the moment function, it will show a nice little relative time like 2 days ago or 7 days from now.

So I quickly implemented momentjs into my application. This saved me a lot of work trying to calculate the relative days.

Saving the data​

So for an application like this, the data has to be stored somewhere. I can’t just open the app, add items and when I refresh the page it’s all gone.

I know how to add data into database, but for that I will need to make it into a Node.js app with MongoDB and specialized web hosting. It’s just a side project, I don’t want to go in all the trouble for this.

I searched online and found there is an api called localStorage.

So with localStorage you can save some text data into a user’s browser.

This is just the thing I need for my app. So I went ahead and look into ways to implement it.

So when I add items into my list, it will be stored in my web browser as local storage.

Making it work​

I coded the basic implementation of the app, but I was running into problems. The main problem I faced was, I created a variable called “items” and this variable contained the array of objects. The object was grabbed from the local storage.

const items = JSON.parse(localStorage.getItem('items'))

But when you open the app for the first time, there is no local storage and no data in that variable, this led to huge problems.

I found Wes Bos had a dedicated video tutorial on localStorage api. I looked into the tutorial and it helped a lot to build out my app. His walkthrough helped build this app in a much more efficient way.

So to solve my initial problem, I set my items variable to the data found from localStorage. But when there is no local storage, it will fall back to an empty array [ ].

const items = JSON.parse(localStorage.getItem('items')) || []

Designing the frontend & putting it all together​

After my app was working as I wanted, I went on to my favorite part: the design. I worked a few hours to come up with a sleek user interface.

I built the items into an ordered list, so they come with numbers.

I did some CSS work to make the app look pretty.

Making it general purpose​

I built this glorified ToDo list to track my laundry, but not everyone will be using it for the same purpose. So I went ahead and made it more “general”

I made the title into something which the user can change.

I made the title into a form field and when the user clicks on it, he/she can change it to something else.

I also made the website title tag into the title of the app and also saved it into local storage.

I did it by setting the document.title property to my variable:

// 1. Getting the title from local storage OR fallback to default title
let title = localStorage.getItem('localTitle') || 'Laundry List ✎ Edit this!'
// 2. Getting the title from the form
document.querySelector('[name=title]').value = title
// 3. Setting the document title tag
document.title = title

Final thoughts​

I had fun working on this little thing. It’s really useful too! I am using it to properly track my laundry.

I am also going to work on a portable mobile version, so people can use it offline and in mobile too.

This little side project taught me so many new things. You can check out the finished version over here.

In any given day, we can’t always utilize every hour of the day. To get the most done, you must quit many things. You must quit projects, say “NO” to things, so you can succeed at your goals.

We are always being reminded not to quit, just go for it, just do it. Any motivational seminar, video or quote tells us to never quit.

But does this kind of motivation really works?

It doesn’t, here’s why:

I was your average highly motivated productive person. I would get done many things, and I was really proud of myself.

I was admired by people around me, because of how much work I do.

But I had this one flaw:

I could not say “NO” to anything. Just like you, I get new ideas everyweek to do something new. I would get pitched a new idea, a new joint venture on a regular basis.

As a result I was doing a dozen of things all at once. It created an illusion that I was getting so much done, and I am super busy.

But if I examine the individual projects, I would see a bunch of half-baked things. Things that are sucking my time.

I Quit!​

The moment of realization came when I read the book The Dip from Seth Godin. All my life I was told you should never quit. But this book taught me, you should quit. You should quit early.

Finishing the book, I started to rearrange my work life. I knew I had to quit everything I am doing.

To be successful, you must quit every other thing and focus on just one thing only. When you are focused with that one thing, only then you will get the true success out of it. The motivational advice comes handy then: don’t quit, keep going, just do it the thing you decided to work on. Seth taught me to quit. Quit early, quit often. But once you have already into it deep, you are in the dip, don’t quit.

Saying No.​

No is my new best friend. I am saying “NO” to almost everything that comes to me. New ideas, new ventures, new partnerships, new offers, I turn down everything. First I must complete my current goal at hand, and once I am fully satisfied with the progress, only then I will accept something else. This helped me to work on just a few things, as oppose to doing 10 different things at a time.

A Gift From The Past​

Quitting is not easy. Especially when you have spent so much time and energy into something.

How can you quit something, that you put many years into? Seth Godin recieved a similar question and his answer helped me very much. It goes something like this, better explained in this video from (Break the Twitch):

Imagine your past self gifted you something. Now you don’t have any space left in your closet to put that in. If you just get rid of the gift, you can make room for new stuff. You must treat that as a gift from your past self and remove it just as you would do with any old tangible good.

https://www.youtube.com/watch?v=RPZLVEjCRh8

Don’t Quit Emotionally, Make a Plan​

Making emotional decisions can cost you a lot. Instead make a plan. Just give yourself some time and conditions. Write down in paper: If I don’t get X amount of return within Y amount of time, I will quit this thing. Give it some reasonable timeframe like 6-12 months and a reasonable outcome. What happens when you meet the goal? Make another timeframe. This will definitely help you keep the projects that work for you and get rid of the ones that are pulling you down.

Conclusion​

The idea of quiting is horrible, embarrassing, and scary. It makes you look like a looser to other people. But if you quit properly, you will be left with only the things that matter to you most.

Comments:​

Shamim: I still remember the days when I was doing a job in BJMC and later created a company in Dhaka. My friends were running the company but I felt i need to quit. So, I quit from BJMC and got busy with SEO & Internet Marketing stuff. 😉

You quit your govt job. That was a big choice.

It was 2014, I had recently finished JavaScript and JQuery lessons from Codecademy. It was about time I build something with my knowledge.

At that time I didn’t know what actually JQuery was. I thought it’s another language like JS. Now I know well that, JQuery is a library which goes on top of JavaScript. It makes writing code a little bit easier.

An overview of what I am going to build:

There is a mobile payment service in Bangladesh called Bkash. You can use the service to pay friends. They charge a % for every time you want to cash out from your wallet.

The idea was simple,

1. Have a text field so people can input an amount
2. Click on the button to calculate the result
3. The fee amount will show up

I could not sleep the previous night. So I got up to my computer with enthusiasm. I built the logic first.

While trying to work on it, I learned the hard way: following a tutorial is easy but building something on my own doesn’t always behave the same way.

The JavaScript​

Looking at my code, I rush coded a lot. I did not comment on the code, I didn’t even use semantic variable names.

var $b = $('input[name=bkashamount]').val()
var $c = $cashout()

Variable $b should have been called balance.

$c should have been change.

I also didn’t add a class or ID for the input button text, which would’ve to make my life a bit more easier.

So you see all the code is a mess and harder to follow through.

The conditional logic tree was the hardest part.

It took me more than an hour to create a simple calculation to work. At the time of building the calculator, Bkash had a different fee structure.

Their fee % varies on the amount you are cashing out.

So I had to write a long set of conditions to fit the fee structure.

It was a really long (6-8) steps of else if codes.

It was a nightmare to make this work. So after I was done, I could display both a smaller amount and a larger amount with the correct fee.

New Fee Structure​

Right after I implemented the cumbersome fee, I did a lookup online and found that Bkash now has a simplified fee structure.

What you know, they now have 1.85% flat fee for any amount you wanna cash out.

If I had known this earlier, it would have saved me a lot of trouble.

Anyways, I implemented the new fee structure.

After a few tweaks and checking my code part was ready.

HTML Page​

The site has just a single HTML page for the view. It was the first time I coded a page without the help of the Bootstrap framework. At the time I did not know how to create a container in the middle so I used a table markup.

<table>
        <thead>
        </thead>
        <tbody>
            <td>
                <td><h1><a href="/"><img src="images/logo.png"/></a></h1></td>
                <td><iframe src="//www.facebook.com/plugins/like.php?href=https://tamalanwar.github.io/bkash-calc/%2F&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21&amp;appId=114661981960459" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe></td>
            </tr>
        </tbody>
    </table>

A table really?

Look, I also invented a new HTML tag called the <wrapper> wow!

Other than these rookie mistakes, the final design was good. It also had Facebook open graph tags which looked nice when I shared on social media.

I also registered a free domain name BkashCalc.tk to host it.

I was happy and proud to share my work. Overall it was a good first project.

You can have a look at the working version here and the source code on Github.

Since then I made a new Bkash calculator with React:

I don’t have the live version up but you can have a look at the source code.

Comments:​

Morol: I still remember the days when you first launched this app. 🙂

And this has been a pure roasting. 🙂

Tamal: Thank you for following me from those days buddy! One thing I regret is, there has been a huge gap from those days to recent times. I wish I stick with just one path. Ohh yeah, I am thinking about roasting my own stuff from now on, whenever I can feel creative. Feels good to tinker with old stuff 😀

I want to discuss the lessons I learned from Apple’s iPhone from a product development perspective.

Start Simple​

If you look at the original iPhone, you would realize how lame that phone was. It didn’t had video recording option, no 3G, and many modern features you would expect from a new phone.

Apple could have put so many things into the iPhone and make it a killer feature rich smartphone, but they went for the simple route.

More feature means more research and development time. Steve Jobs and his team brought the minimum viable product to the market and see the reaction.

Although it lacked many essential features of a modern phone that time, it did just a few things right.

For the iPhone, its wow factor was the full screen touch screen, rotating screen, iPod, internet and messaging features.

Sell on The Benefits​

Steve Jobs talked about the user interface and how it is built for day to day situations. He got rid of the stylus in favor of finger touch. He scrolled down the contact list, the music library to show how easy it is to scroll through the long list of items with a touchscreen.

Messages were modern and looks like modern messaging apps. You need to swipe to unlock the screen so that it does not accidentally unlocks in your pocket.

He didn’t sold on how much ram or processing power the phone has, all he did was show what the iPhone can do.

Add Another Feature in Your Next Version​

The next iPhone had some extra features like video recording, 3G and faster speed. They could have included it on the first iphone but they didn’t. They made it into a second version just so they can sell more units.

I don’t like that companies making products that don’t last longer. To increase the profits they launch a new product every year with slightly more features than before and drop support for the older ones.

Since the first iPhone, Apple kept launching one/two new iPhones every year with slightly better features. So please take note, if you want to increase your profit margins, launch new versions of the same product to sell more and more copies.

Applying Steve Jobs’ Formula on My Own:​

Few years ago I learnt about WordPress theme development and I was so hooked up to create my own themes. For my first theme to the public, I thought of going the easy way by creating a free theme. This way, the expectations would be low.

Then I applied Steve Jobs’ iPhone formulla, by stripping out all the modern features of that theme and just go with a simple presentable theme.

I was still learning at the moment and implementing many features would increase the development time.

So I created version 1.0 of that theme with some basic features.

The theme was so simple with nothing more than just regular WordPress features, like custom header, background image, background color etc. These are default features which come with WordPress.

My finished version was pretty plain.

The first theme had this default blue color scheme which you can’t even change from the options.

I ignored what my theme doesn’t have and used what I have:

I talked about the benefits of using the theme like

• Having a good typography keeps the reader engaged
• Simple site loads faster
• The code has HTML5 semantic markup for better search rankings etc.

So anyways I put the theme out to the public. A few people tried it out and started to use it.

I added a few more code improvements and submit the theme to WordPress theme directory. After it was approved, I saw lots of downloads.

People loved my free theme. More than 1,000 people are using the theme. Every now and then I get message from people who are using and loving the theme.

It motivated me and got me to work on the theme again.

On the next version I added Google Analytics options, then followed by color scheme option.

You see, I did not wasted my time trying to make my product filled with lots of cool features. I stick to the essentials, get it out to the public and talked about the benefits.

Conclusion:​

We can learn a lot by following Steve Jobs and Apple products. Just watching one video how Steve launches a new product can teach you a lot about selling technology to the masses.

https://www.youtube.com/watch?v=wGoM_wVrwng

To sum it all up:

1. Create a minimum viable product (MVP) and get it out to the public for feedback
2. Add more features as you go on with next iterations
3. Talk about the benefits, not the features

Comments:​

Ryan Biddulph: Good analogy Tamal! Simple wins. Every time. Simple, clear, basic, all are winning elements in the product development game. This is why all of my eBooks, courses and audio books are simple. The ultimate lesson in life is to keep things basic, to remove the complex, and folks doing this become icons. You are on your way brother.

Ryan

Tamal: Good to see you here buddy! Yes, simple rocks!

Let’s be honest here, programming is not that easy. It takes discipline and repeated effort to code something on your own, build a thing which actually works. I never thought someday I would turn into a web developer and actually code in this weird language.

Please note: I am using the words “coding”, “development”, and “programming” interchangeably in this article, although they all have very different meanings. But you get the point!

When I get the chance to talk to people who are new to code, it reminds me how it felt when I was just starting out.

Some time ago, I met this guy at a conference. It was not a developer conference, it was more like a marketing one. While talking with him, he learned about my web development work and how I became a self taught web developer.

Knowing that, he expressed to me that he can never ever learn to code:

“You know Tamal bro, I can never learn how to code. I just don’t get it!”

So instead of comforting him by saying how everyone can code, how easy it is and all that, I told him:

“You are right, you won’t get it. I was just like you many years ago when I just couldn’t understand all the code.”

“HTML code looked like Chinese text to me.”

“All I did was just copy and paste bunch of codes and put it all together.”

“But as I built many websites, I slowly started to get it.”

Hearing my words gave him comfort, and I think after that day he will see programming in a different light.

When I got started into building websites, I came across all the free resources like blogs, tutorials and W3Schools. But I didn’t even had the skill to read and learn from the documentation.

For me it took a while to condition myself into a programming mindset to finally understand how to code things.

It didn’t happen magically just by watching a few tutorial videos or completing a course. The real journey was different. To help you track how I got so far, here is a quick highlight of my learning over the years:

• Early days: I used website builders and MS FrontPage to build websites. Used Flash to create interfaces.
• Blogger/blogspot days: Copy pasted code from various places to design sites.
• WordPress days: Used little HTML & PHP code to change various design elements. Once again, I copy pasted from the web.
• Thesis theme days: I used the Thesis Theme to build designs. Learned little CSS to customize the websites but most of it was copy-pasta.
• Codecademy: Took my first formal programming lesson with the Hour of Code. Took formal lessons on HTML, CSS, JavaScript, JQuery and PHP from Codecademy. Built my first “Thing” with JS.
• WordPress themes: Built my first WordPress theme and got it approved to the theme directory. This is when I started to call myself a real web developer.
• Modern times: I made my mind to pursue a career in web development/programming. I am learning how to build web applications with Node.js and JavaScript.
• In 2019: I am studying to become a software engineer.

As you can see, I spent a long time just copy and pasting bunch of code from the internet.

Taking formal courses gave me a bird eye view over the subject but it did not instantly turned me into a pro. It took repeated effort and practice to master various things.

Now I see my learning curve is getting shorter. I am learning new technology faster as I practice more.

So if there is anything you can take from my story: everyone learns differently. If you want to do this kind of thing, give it a shot. If you really love to program, you will learn it eventually (no matter how long it takes).

Comments​

DJ Rony: There is no shortcut or easy way, only the hard way. All the best brother.

Tamal: Good to see you here DJ! Yes that’s true, there’s no shortcut.

Oksana: Well done !! It’s a proof that only hard persistent work, grinding and patience can lead to success! Go for it!

Tamal: Thanks for dropping by Oksana, all the best to your code learning!