As developers, we spend a substantial amount of time executing commands on the terminal. Whether it's navigating through directories, running scripts, changing Node.js versions, or version control commands, manually typing every command is a time consuming task.

For those who struggle to remember commands or their associated flags, this can become even more tedious.

Worry not! There's a simple yet powerful solution to this problem. It's called terminal aliases.

The alias Command

The alias command allows you to create shortcuts for existing commands, making them easier to remember and quicker to execute. When you define an alias, you are creating a new label for an existing command.

Syntax of alias Command

The syntax is straightforward: you can assign a command to a label like you'd assign a value to a variable in most programming languages.

alias alias_name='long command'

Let's dissect this command to understand it better:

• alias: The terminal command that enables defining an alias.
• alias_name: This is the name or the label you are assigning to the command. Basically, you will type this in the terminal instead of the full command.
• 'long command': This is the command that you want to add an alias to. Make sure that you are wrapping the command with single quotes (') as almost all commands contain spaces or special characters.

Predefined Aliases

There are some predefined aliases already set within terminals. And there is a high chance that you were using them without even knowing.

Such aliases are defined within the system (/etc/bash.bashrc) or user specific (~/.bsahrc) shell configuration files.

You can find a list of all predefined aliases by executing the alias command without any options or flags.

alias

How to Create an Alias that Persists Across Sessions

By default, aliases only persist in the current session. That means, if you close the terminal, the alias will be erased and you cannot use it afterwards.

To tackle this, you must define the alias in the shell's configuration file. Shell is an interpreter that resides inside a terminal and establishes an interface between you and the operating system. Hence, accessing the correct shell as well as modifying the correct configuration file is very important.

Here are the configuration files for the three most commonly used shell applications:

1. Bash: ~/.bashrc
2. Zsh: ~/.zshrc
3. Fish: ~/.config/fish/config.fish

Let's try adding a new alias to Bash.

echo "alias nrd='npm run dev'" >> ~/.bashrc

Let's dissect this command:

• echo: A terminal command that lets you write content within the terminal command.
• "alias ...": This is the content we talked about in the previous point. It's an alias command that adds nrd as an alias for the npm run dev command.
• >>: Tells the terminal to append the content on the left (alias command) to the file on the right. In our case, we are storing it in the bash configuration file.
• ~/.bashrc: This is the file to which the content from the echo command will be added.

Don't forget to replace ~/.bashrc with your shell's configuration file.

How to Create a Dynamic Alias

Oftentimes, you need to use repetitive commands but with some little changes based on what you want. The best example of this is Git commands. In this case, you can add a substitute to your command which would be replaced by the dynamic option/parameter while executing it in the terminal.

alias gpll='git pull --rebase origin ${branch}'

While executing the command, you need to replace ${branch} with the branch you want to pull changes from. This is how you would do it to pull changes from the main branch:

gpll main

You can also add multiple substitutes to your alias. Just make sure you are writing the alias with the correct order of actual values:

alias gpll='git pull --rebase ${remote} ${branch}

While executing the command, you need to replace ${remote} and ${branch} with appropriate values, like the following:

gpll origin main

How to Create an Alias for Multiple Commands

There are cases where you need to use multiple commands sequentially. You can create an alias for that as well. Separate each command by && which executes the command on the right after the command on the left is executed.

gpsh='git pull --rebase && git push'

How to Delete an Alias

If you want to delete an alias from the current session, you can use the unalias command. This command takes only one argument — the alias name.

unalias my-alias-name

However, if you want to delete an alias saved in the configuration file, you need to delete it from the file itself. You can use a simple text editor like Nano to do this.

nano ~/.bashrc

Scroll down to the bottom to find all of your aliases and delete the ones you don't want anymore.

When you're done, you can exit the editor after saving. This is the place where I can introduce a meme about not being able to exit terminal-based text editors. But with Nano, it's very simple:

1. Press ctrl+x if you are on Linux and ^+x if you are on Mac.
2. Press Y to confirm changes
3. Hit Enter or return based on your operating system to save the file.

See? Nothing difficult :)

Caveats

There are two important things that you must remember while creating an alias.

Aliases are shell-restricted

Aliases are specific to the shell you are using. An alias created in one shell won't work in another shell.

You must create a new alias if you want to use it in a different session. There is no workaround to this caveat. One trick you can do is to manually save the alias to the config files of all the shells you use.

Aliases are session bound by default

Aliases are only available in the current session. If you open a new terminal window or log out, the alias will not be available.

Hence, it's recommended to always save an alias to a configuration file so you use it anytime you want.

TL;DR

• alias command adds shortcuts to a command or series of commands. alias shortcut='existing valid command.
• Save an alias to the shell's config file so it is persisted across sessions. Every shell has a unique config file. echo "nrd='npm run dev'" >> ~/.bashrc.
• Create a dynamic alias by substituting the dynamic value with a placeholder. The placeholder must be wrapped by ${}. alias gp='git pull origin ${branch} should be executed as gp main in the terminal.
• Add multiple commands to an alias by joining them with &&.
• Delete an alias by manually erasing it from the config file.

Wrapping up

I hope this blog helps you optimize your time and boosts your developer productivity. If it did, don't forget to share this with your peers so they can improve their efficiency as well.

What other techniques do you use to work efficiently? I would love to know more about it. I am most active on Twitter and Peerlist, if you want to say hi!

Until then, happy scripting! 👨‍💻

Basic Array Concepts

Let's review some basic JavaScript concepts before delving deeper into the subject so that you have the background info you need.

JavaScript arrays and array of objects

Arrays are one of the fundamental building blocks of any programming language. They're the simplest data structure, yet they're so powerful that they're the underlying data structure of many apps we use today.

const arr = ["apple", "banana", "orange", "mango"]

The most typical use of arrays is to send data from one machine to another. By machine, I mean a client, server, database server, and so on. Such data is often a collection of similar records grouped in an array. Every record is represented by an object, which is an array element.

These arrays are called arrays of objects. Here's an example of an array of objects in JavaScript:

const response = [
    {
        id: 1,
        name: "John",
        age: 41
    },
    {
        id: 2,
        name: "Zack",
        age: 35
    },
    {
        id: 3, 
        name: "Peter",
        age: 47
    }
]

As you can see, it's simply an array. And every element in the array is an object. Hence the name, array of objects.

You can handle an array of objects like any other array and use built-in array functions. But there are some situations where using built-in functions is not feasible, and you must make certain modifications to achieve the objective.

Keys in JavaScript objects

Objects in JavaScript are collections of key-value pairs, with each key identifying a specific value. Think of keys as the labels you assign to retrieve information from a dictionary. For instance:

const person = {
    id: 1,
    name: "John",
    age: 41
};

In the above example, id, name, and age are keys whereas '1', 'John', and '25' are their corresponding values. When we talk about sorting an array of objects based on a key, we are referring to sorting the array elements based on the values associated with a specific property within each object.

Determining the data type of a property

Before sorting, it's crucial to understand the data type of the property you intend to use as the sorting key. JavaScript has different sorting rules for numeric and string values. Knowing the data type helps us choose the appropriate sorting method.

If you are unsure of the data type, you can either check the data type with the typeof operator or convert the type into your desired one.

// Checking if the type is as expected
if(typeof obj.name === "string") {
    // Do something
}

// Converting property's type
const string = String(obj.propertyName)
const number = Number(obj.propertyName)

How to Sort an Array of Objects with a Specific Key from the Object

We need to know two things before sorting an array:

1. Data Type: Understand the data type of the value we want to sort.

2. Sort Order: Determine whether we want to sort in ascending or descending order.

We will cover various use cases to get a full picture of these concepts.

How to sort an array based on numeric values

Let's start by sorting an array based on numeric values, specifically the age property. Our goal is to have the array elements (that is, objects) sorted in ascending order based on the age property. The built-in sort() method will be our tool of choice:

response.sort((a, b) => a.age - b.age)

And that's it! Objects in the array are sorted by the age property. You can confirm this by logging the output in the console:

[
  { id: 2, name: 'Zack', age: 35 },
  { id: 1, name: 'John', age: 41 },
  { id: 3, name: 'Peter', age: 47 }
]

If you want to sort in descending order, you just need to change the position of the variables inside the function.

response.sort((a, b) => b.age - a.age)

Just like that, the array will be sorted in descending order of age.

[
  { id: 3, name: 'Peter', age: 47 },
  { id: 1, name: 'John', age: 41 },
  { id: 2, name: 'Zack', age: 35 }
]

Sorting numbers in an array is easy – so now let's try something a little bit more difficult: sorting based on string values.

How to sort an array based on string values

I struggled a lot in my initial days to perform this operation. Eventually, I found the easiest method to do it. Similar to the previous example, here we want to sort objects based on the string values.

We will use a built-in string function localCompare(). It is used for comparing strings based on language-sensitive ordering. Let's write the sort() function with the help of this function:

response.sort((a, b) => a.name.localeCompare(b.name));

[
  { id: 1, name: 'John', age: 41 },
  { id: 3, name: 'Peter', age: 47 },
  { id: 2, name: 'Zack', age: 35 }
]

As expected, array elements will be sorted based on the name property inside each object element.

Sorting in descending order is a no-brainer as well:

response.sort((a, b) => b.name.localeCompare(a.name));

The output will be like the following:

[
  { id: 2, name: 'Zack', age: 35 },
  { id: 3, name: 'Peter', age: 47 },
  { id: 1, name: 'John', age: 41 }
]

Edge Cases to Consider

While sorting arrays of objects, it's essential to address potential edge cases.

The key must be present in all objects

Ensure that the key used for sorting exists in all objects. Even if a single object is missing the key, the original array is returned unchanged. Here's how you can handle such a case:

if (array.every(obj => 'age' in obj)) {
    array.sort((a, b) => a.age - b.age);
} else {
    console.error("Some objects lack the 'age' key. Sorting is not feasible.");
}

Null or undefined values must not be present

The key you want to use for sorting shouldn't be null or undefined. You can pass an empty string instead of the key if it is a falsy value.

array.sort((a, b) => (a.name || "").localeCompare(b.name || ""));

All values must be strings for string comparisons

While sorting objects based on a particular key, if the key is supposed to be a string, then make sure that the key has the data type String in all cases. A workaround to avoid potential bugs is to convert the key into a string in the sort() function.

array.sort((a, b) => String(a.name).localeCompare(String(b.name)));

Local sensitivity

When dealing with string properties, consider language and case sensitivity. Provide appropriate locales and options information for localeCompare().

array.sort((a, b) => a.title.localeCompare(b.title, 'en', { sensitivity: 'accent' }));

Wrapping up

Understanding array operations will increase the efficiency of your code and improve the performance of your app. In this article, you learned how to sort arrays of objects based on a key from inside the object.

I hope you found this article helpful. If you do, don't forget to share it with your friends so others can benefit from it. If you know a better method to sort arrays, let me know! I would love to learn.

I am most active on Twitter (Now X) if you want to say hi!

Further readings

• JavaScript sort() function

• Intl.Collator object

• JavaScript localeCompare() function

Until next time, happy coding :)

For those not familiar with the AI domain, keeping up with these developments can be challenging.

The biggest news recently is undoubtedly GPT-4. Everyone from my barber to Twitter influencers wants to know more. My fellow software developers are not an exception. It feels like having FOMO because we aren't up to date with what's going on in the AI realm.

In this article, we will cover everything that we publicly know about GPT-4. So if you're unfamiliar with terms like ChatGPT, GPT-4, OpenAI, and other buzzwords, this is the guide you need to read.

History of GPT Until Now

OpenAI announced GPT-3 in 2020. It is a language model trained on a massive dataset available on the internet. It can be your friend and answer your queries, help you debug or write code, solve logical and aptitude questions, translate text, and a lot more.

At the end of 2022, the company released a free preview of ChatGPT. It is a AI chat-bot built with GPT-3.5, the successor to GPT-3. ChatGPT soon became the talk of the town (world!). More than a million people signed up for the preview in just five days.

In January 2023, Microsoft invested (reportedly) $10 billion in OpenAI. We will discuss why this is important later.

And finally, OpenAI released GPT-4 in March 2023, which shook the world with its capabilities.

What is GPT-4?

"Generative Pre-trained Transformer 4" or GPT-4 is a multimodal Large Language Model (LLM). It is more reliable, creative, and can handle more complex instructions than GPT-3.5. It outperforms every known AI model in every measurement parameter.

GPT-4 is OpenAI's efforts at scaling up deep learning. It is the most capable AI model yet. Though it is less capable than humans in many real-world scenarios, it excels at several professional and academic benchmarks with human-level precision.

Availability of GPT-4

GPT-4 is not available for everyone, unlike ChatGPT. There are several ways you can get access to it:

1. API Waitlist: You can sign-up for the waitlist and get rate-limited access to the GPT-4 API

2. Priority access: Developers can contribute to OpenAI Evals and get API access once the contribution is merged.

3. ChatGPT Plus: It is also available for ChatGPT Plus subscribers with a $20 monthly fee.

4. Microsoft Bing: It also powers Microsoft's recently revamped Bing Search Engine. It is currently available for selected users.

5. Third-party Services: OpenAI has collaborated with several organizations to integrate GPT-4, like Duolingo, Morgan Stanley, and Khan Academy, to name a few.

Capabilities of GPT-4

GPT-4 outperforms the majority of humans in various professional and academic benchmarks. The company tested the latest model with the previous one with some of the toughest exams in the world. And GPT-4 excelled at everything thrown to it by significant numbers.

comparing GPT-4 with GPT-3.5 in various competitive exams (source: OpenAI)

OpenAI published a technical paper that analyzes this further.

The team spent 6 months making GPT-4 safer and more aligned. GPT-4 is 82% less likely to respond to requests for disallowed content and 40% more likely to produce factual responses than GPT-3.5 on our internal evaluations.

New and Improved Input Methods

GPT-4 serves user prompts intelligently. It is better at handling large texts and image inputs. It can also change its personality to talk to you!

Provide prompts up to 25,000 words

The GPT-3.5 could only handle text entries of up to 3,000 words. GPT-4 goes far beyond this, accepting entries of up to 25,000 words. It can also accept graphical contributions.

Though GPT-4 struggles when dealing with large amounts of data, it is still superior to GPT-3.5. The increased input length will help you to contextualize your prompts more clearly. You can provide entire documents, theses, and webpages as a prompt all at once.

Upload an image as a prompt

Image inputs are still a research preview yet to be publicly available. As of now, only be my eyes supports the latest image inputs.

Nonetheless, image inputs have identical capabilities and functionalities as text inputs. Users can specify vision or language to get their desired output. It can also be augmented with test-time techniques developed for text-only language models, including few-shot and chain-of-thought prompting.

One more observation about input prompts is that GPT-4 remembers earlier conversations within a single chat session. It can back-reference what it said in the past or bring out what you prompted as well. But it can not remember conversations between different sessions yet.

You can change its personality

I must say, I am fan of this feature. LLMs can change their personalities and behavior as per user prompts. We call it "steerability" in AI.

GPT-3.5 has a fixed personality with predefined vocabulary, tone, and style. Anything that it answers feels the same. With GPT-4, we can describe personalities in the system message. The company explains in its blog that it's easier for ChatGPT to break its character, so the personality is changed only "within bounds".

This is helpful in scenarios where you want the answer to be like a specific personality. You can tell it to be a sympathetic listener, guide, mentor, tutor and so on.

The blog explains steerability by giving an example of a Socratic tutor. The Socratic Method is a discussion between an individual with themselves or others that finds solutions by constantly asking questions and answering them with critical thinking. Using the Socratic method, we can critically think about a complex problem and understand it better.

ChatGPT Plugins

And when we thought everything was cooling off, OpenAI announced plugins for ChatGPT. Until now, GPT-4 solely relied on its training data, which was last updated in September 2021. It was not connected to the external world.

With plugins, it can access the entire internet. Users can install plugins in their ChatGPT to allow it to access the external world. Now it can interact with real world and updated data to perform various tasks for you.

Plugins can act as "eyes and ears" for LLMs. This allows LLMs to access information unavailable in their training data. This includes data that's too recent, personal, or specific to be included in the training data. Plugins can use such information to produce better, highly accurate, and precise outcomes.

11 companies partnering up with OpenAI to build plugins (Source:OpenAI Blog)

OpenAI has partnered with 11 companies to create such plugins. Expedia, FiscalNote, Milo, and Zapier are some companies that have already made their plugins. The company also hosts two plugins: a web browser and a code interpreter. It has open-sourced a knowledge base retrieval plugin.

You can join the waitlist by submitting your interest on its website. If you want to read more, I recently wrote a blog that discusses plugins in detail.

What's Built with GPT-4?

There are several tools available today that are built on GPT-4. OpenAI partnered with different companies in two stages. The first stage was for the launch of GPT-4 itself.

Microsoft

Source: Unsplash (Ed Hardie)

At the start of the article, I mentioned that Microsoft invested $10 billion in OpenAI. Microsoft is integrating GPT-4 into its existing suite of services, mainly Office-365 and Microsoft Edge. Here is a brief description of every Microsoft tool or service integrated with OpenAI services/GPT-4.

1. Copilot for the Web: Microsoft Bing and Edge have integrated GPT-4 for a better, more complete and creative experience.

2. OpenAI in Azure: ChatGPT is available in preview in Azure OpenAI Service.

3. Copilot X: GitHub, a Microsoft owned product, also introduced Copilot X that leverages GPT-4 for new features.

4. Copilot for Work: Microsoft introduced Microsoft 365 Copilot, which aims to turn your words into the most powerful productivity tool on the planet.

Duolingo

Dulingo Max (Source: Dulingo blog)

Dulingo integrated GPT-4 and launched Dulingo Max. It introduces two new features: Explain My Answer and Roleplay. The first explains why user's answers were right or wrong, and provides further examples for better clarification. The latter allows learners to practice real-world conversation skills with world characters in the app.

Be My Eyes

source: Internet

Be My Eyes is a platform for visually impaired people to help them interpret the world better. GPT-4 acts as a virtual volunteer and analyzes images through GPT-4's image-to-text generator. It doesn't just analyze the content of the image but the context of the image as well.

Khan Academy

Source: Khan Academy

Khan Academy is also one of the early adopters of GPT-4. It intends to use GPT-4 as a study and technical assistant. It can help students in exam preparation, improving and practicing vocabulary, and so on. It can also help teachers in administrative tasks, writing lessons and creating lesson hooks, writing exit tickets, and similar tasks.

Stripe

Source: Stripe

Now, Stripe is integrating GPT-4 into its platform. The company already used GPT-3 for simple tasks, but integrating GPT-4 means AI will play a bigger role in the company's processes. It intends to use GPT-4 to streamline the user-experience and add another layer of fraud detection.

What Competitors are Doing

People started using ChatGPT and Microsoft Sydney for their internet searches. Google recognized the imminent threat to their business and acted quickly. The company announced "Bard", its own AI Chatbot that competes with GPT-4.

Source: Google

Google Bard is a generative AI chatbot that can produce text responses based on user queries or prompts. Bard uses its own internal knowledge and creativity to generate answers. Bard is powered by a new version of LaMDA, Google's flagship large language model that has been fine-tuned with human feedback.

Bard allows speech inputs along with plain text. It also allows you to make a Google search with the same prompt to verify Bard's answers.

One thing to note here is that Bard constantly reminds us that it is still an experimental model, and it may hallucinate. It also doesn't forget to mention that Google does not support any views and opinions Bard may tell.

Google Bard is currently available in the United States and Britian. You can join the waitlist by visitng Bard's official website. I wrote a blog discussing more about Bard. Make sure you read it too.

Will AI Take Your Job?

After reading the entire article, you might feel concerned about your job. OpenAI, OpenReseach, and the University of Pennsylvania published a paper, "GPTs are GPTs: An Early Look at the Labor Market Impact Potential of Large Language Model", to analyze the potential impact of such tools on the labor market.

According to the study, 10% of tasks in 80% of US workers can be done by LLMs. For the other ~19% of workers, LLMs could influence at least 50% of tasks. Higher-income jobs will potentially face greater exposure. Programming and writing jobs will also be impacted. On the other hand, jobs that require critical thinking and science are safe. Similarly, jobs with a low barrier to entry are less likely to be impacted.

These jobs are more likely to taken over by AI:

• mathematicians

• tax preparers

• writers

• web designers, programmers

• accountants

• journalists

• legal secretaries

AI will be more likely to take these jobs (Source:Research Paper)

Jobs that are less likely to be impacted by GPT are as follows:

• graphic designers

• search marketing strategies

• financial managers

The researchers also list LLM's impact on various industries. Industries with the most significant impact are as follows:

• data processing services

• information services

• publishing industries

• insurance carriers

On the other hand, the industries with the most negligible impact are:

• food manufacturing

• wood product manufacturing

• support manufacturing

• agriculture forestry

AI is very unlikely to take these jobs (Source: Research paper)

Epilogue

If you read all the way through this, give yourself a pat on the back! You have come a long way, and you should know know enough about this crazy buzzword to share your knowledge in meetings and catchups.

I hope you learned something in this overview of ChatGPT. If you did, share it within your networks so that everyone can benefit from it.

Almost every bit of information has been curated from existing announcement blogs, research papers, and content put by official company handles. Still, if you find a mistake or an improvement, please let me know. I would be happy to correct my mistakes.

Let's connect! I want to know what you think about this article. Do you think AI will replace our jobs? Let me know. Here is how you can reach me:

• Twitter

• Personal Website

• Showwcase

• Peerlist

Finally, check out my personal blog, where I write about front-end development, open-source, technology, and technical writing.

Stay curious! ✨

You've likely come across a scenario where the code is running on your machine, but is somehow throwing errors on someone else's machine.

Well, Docker was created to solve this very problem.

image source: internet

In this article, we will cover four major concepts:

1. How to setup, install, and configure Docker
2. How to add Docker to your project
3. How to install and configure AWS CLI on your system
4. How to use AWS ECR to host a Docker image in a remote location

Prerequisites

Here's what you'll need to follow along with this tutorial:

1. A Docker account
2. Basic knowledge of Docker: use case, commands
3. AWS account
4. Basic knowledge of AWS: console, IAM, users, ECS, ECR
5. A simple web app that we can use for this project

If you don't have a web app or just want to give it a try, you can clone this project:

The above application is an Express.js application with MongoDB Compass as the database. We will create a Docker image of the project, push it to AWS ECR, and access it through AWS ECS.

Docker Setup

The only thing you need to do if you're using Windows or Mac is install the Docker desktop application. It installs everything you need and gives a nice GUI for interaction.

Go to the official website and install the setup. You also need to create a Docker account for further usage. If you're on Linux, this page or a simple YouTube search will help you get it done.

To check if the installation is successful, execute docker --version in the terminal. It should prompt with the version and build installed in your system.

Checking if the Docker installation is successful

Docker Login

Go to hub.docker.com/signup and create your account. To connect your system with your Docker account, execute docker login in the terminal.

You will see Login succeeded prompted in the terminal.

Checking if the Docker login is successful

Once Docker is installed and configured in your system, let's move to the next section.

How to Dockerize Your Project

By Dockerize, I mean setting up your existing project with Docker and containerizing it.

Create a file named Dockerfile without any extension in the root of your project directory. It contains the code required to build a Docker image and run the dockerized app as a container.

If you are using VS Code, the Docker extension will come in handy.

How to Configure the Dockerfile

As a bare minimum configuration, paste the following code in the Dockerfile.

FROM node:12.17.0

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

ENV PORT=3000

EXPOSE 3000

CMD [ "npm", "start" ]

Before understanding these instructions, create a .dockerignore file and add node_modules in it. It works the same as .gitignore.

Now let's go through that code:

• FROM: Sets the base image for further instructions. For the sake of simplicity, we will use an officially supported Node.js image. I am using the exact version mentioned in my package.json, so change it accordingly if you're using a different node version.
• WORKDIR: Adds source code from our current working directory to the image.
• COPY: Copy files and folders from source to destination in the image filesystem. We are copying package.json and package-lock.json. This command ensures that we have a list of dependencies to install in our docker container.
• RUN: Executes the given command. As we have package.json from the previous step, we can install dependencies in our container.
• COPY: Now, we are copying everything from project directory to our container. Since both are in the same directory, we are using . which indicates the current working directory. node_modules doesn't get copied since we have added it in .dokcerignore.
• ENV: Sets an environment variable for the docker container.
• EXPOSES: When we are running this container, we want to listen our app on a particular port. EXPOSES allows us to access the containerized application publicly. It doesn't need to be the same as ENV, but it reduces complexity :)
• CMD: There can be only one CMD command in one image, which tells the container how to start the application. Notice we have passed as array and the necessary command as elements. This is called as exec form and it allows us to run the command without starting a shell session.

We have setup everything we need to create a Docker file. Let's create a Docker image now!

How to Create a Docker Image

You use the docker build command to create a build of Docker image. There are a bunch of parameters we can pass with the command. But one we are going to use here is -t. This gives your image a name tag which makes it easy to remember as well as access.

There is no standardized way to name your image, but normally you would see this: Docker user name followed by a slash (/) and then version number separated by a colon(:).

docker build -t <name-tag> .

The second argument is the location of the Dockerfile. Since ours are in the same directory, we can put a period(.).

When you run the command, you will see that steps are being executed in the same order as they are written in the Dockerfile. Once done, it will prompt Successfully built in the terminal.

You can use baseID to access the particular Docker image instead of using its name tag.

You can verify this by looking at the Images section in the Docker app. Also you can see the local container in Containers/ Apps section.

For the time being, let's run our Docker image in our local system.

docker run -p 3000:3000 <name-tag>

Remember, you can also use <baseID> instead of <name-tag>.

Port Forwarding

If you run the above command without -p 3000:3000, you won't see anything on the port 3000. This is because even if we have exposed port 3000 in Dockerfile, if have not made it accessible to the outside world,

The -p flag allows us to do port forwarding from the container to our local machine.

Port forwarding is actually a huge concept, but this is everything we need to know for now.

Visit http://localhost:3000/ in your browser. Well, you have created a Docker container and are running it on your local machine. Kudos!

Usually, you push this image to some kind of container registry to use it in real world scenarios. It could be a Docker Hub or anything else. We are using Amazon Elastic Container Service provided by AWS.

For smooth communication between local Docker image and ECS, we need to set up AWS CLI in our system. Let's see how to do it.

How to Set Up AWS CLI

AWS Command Line Interface is a command line tool that enables us to use AWS resources through our terminal. Anything that we can do in AWS console or web GUI can also be done with CLI.

We have to setup and configure AWS CLI in our system in order to use ECS services locally. To check if you already have AWS CLI installed, execute this command in the terminal:

aws cli

If the command doesn't respond with anything, CLI is not configured. If it does, feel free to jump to the next section.

How to Install AWS CLI

I am using Windows 10 with WSL2. But the procedure is similar for Mac OS and Linux Debian.

Go to this website and follow the steps for your distribution. For Windows, you have to download an MSI. Then an installer prompt will show up. Just follow along and it will be installed in a few minutes.

Now restart the terminal and execute aws cli again. Let's setup a user for this local profile.

How to Set Up a Local User for AWS CLI

Go to the IAM section of AWS console on the web. Follow this GIF to create a new user:

create a user with appropriate rights

Remember:

1. Access Key - Programmatic Access is checked when you enter the name of new user.
2. Add a user policy that gives full access of ECS. The name of the policy is AmazonECS_FullAccess.
3. Note down access key ID and Secret access key, as we'll have to use these later.

Let's go back to our good ol' terminal. Execute the configuration command in the terminal and enter your access key, secret access key, and preferred region. Skip the default output format for now.

aws configure

Verify the configuration by executing aws configure list command.

Verifying AWS CLI Configuration

Congratulations! We have successfully setup AWS CLI with our local terminal. Now it's time to push our Docker image to Amazon ECR.

AWS Elastic Container Services

It's been so long since we talked about Docker. We have created a local Docker image and container. We have to publish it from our local Docker repository to AWS ECR. It is done through ECS

What is ECS? You might ask.

Amazon Elastic Container Services aka ECS is a fully managed container orchestration service that makes it easy for you to deploy, manage, and scale containerized applications.

And Elastic Container Registry or ECR is the registry for Docker containers stored in ECS. We will be using ECS to push our Docker container to ECR.

How to Create a Repo in ECR

For simplicity, I suggest keeping the same name as your project.

aws ecr create-repository --repository-name <repo_name> --region <region_name>

If you are not sure about region_name, put us-east-1. This would create your repo in US EAST-1 region. Once finished, it will prompt a JSON object like response in the terminal.

For a safer side, check AWS console and see if a repository is created:

verifying if a repo is created

Remember:

1. You won't see any images under repository. Because we haven't pushed any image yet.
2. Note down URI of your repo. We'll have to use it soon.

How to Push a Docker Image to ECR

Every piece has been individually created so far. It's time to join each and every piece and complete the puzzle.

For Docker to push the image to ECR, first we have to authenticate our Docker credentials with AWS. We use the get-login-password command that retrieves and displays an authentication token using the GetAuthorizationToken API that we can use to authenticate to an Amazon ECR registry.

aws ecr get-login-password --region <region_name>

Use the same region_name that you used while creating a repo. Store the encrypted token somewhere for a moment.

Take a deep breath now. We need two things I told you to save somewhere. The first is the token I just mentioned and second is the repository URI from the previous step.

Did you get that? Lessgooo!

 aws ecr --region <region> | docker login -u AWS -p <encrypted_token> <repo_uri>

Needless to say, put the same region where your repository exists.

We are querying the ECR API provided by AWS CLI. Later we are pipelining Docker login.

• -u AWS: Default user provided by AWS.
• -p <encrypted_token>: Password we retrieved in the last step.
• repo_uri: URI of our repository.

If the login is successful, Login Succeeded will be shown in the terminal.

How to Tag a Local Docker Image

This command tags a local Docker image with the ECR Repo.

docker tag <source_image_tag> <target_ecr_repo_uri>

• source_image_tag: The name you gave for the docker build command. If you are following along, it is username/image_name:tag.
• target_ecr_repo_uri: ECR Repository URI.

How to Push the Docker Image to ECR

The final step – the last piece of the puzzle!

The following command pushes the local Docker file to the remote ECR repository. Depending on the image size, it will take some time to finish.

docker push <ecr-repo-uri>

Hurray! We have made it 🎉

You can see the uploaded image in the AWS console. Go to ECR, click on repositories, and open ECR repo we uploaded a few minutes back. Copy Image URI if you want to use it further.

Wrapping Up

In this article, we covered how to deploy a Docker image on AWS ECS. You can use this Docker container resting inside ECR to host your application on the server. It could be AWS EC2 or anything else.

Docker and AWS are widely used to develop large scale applications. Having an idea how these things work together should help you build large scale applications in the future.

Having said that, I hope this article has helped you in your work, studies or learnings. If it did, you might also find my other articles helpful.

I mainly write on my personal blog and freeCodeCamp. If you want to say hi, I am most active on Twitter, LinkedIn and Showwcase.

Happy shipping! 🐳🚢

This worked, and let us complete our tasks – but why settle for less when you can create a diagram within the README file itself? Well, now you can.

On February 14th, GitHub gifted a new feature to all devlovers. Mermaid syntax is now supported by default in GitHub Markdown. This means that we can now create and edit diagrams in the native markdown file.

But first, what is Mermaid?

What is Mermaid? 🧜‍♀️

Mermaid is a tool that renders diagrams based on markdown-like text content. It helps us visualize documentation and catch it up with development by dynamically creating and modifying diagrams in the browser.

Mermaid supports various types of diagrams, such as UML diagrams, Gantt charts, Git Graphs, and User Journey Diagrams.

How Does Mermaid Work? 🤔

According to the official GitHub blog, when a code block marked as mermaid is encountered, the raw mermaid syntax in the block is passed to Mermaid.js and an iframe is generated. The iframe is injected into the page, pointing src to the Viewscreen service. Viewscreen is GitHub's internal file rendering service which is partially responsible for this whole process.

The entire process is explained well in the official announcement blog. Here's a representation of how the Mermaid code block is dynamically rendered in the browser:

rendering Mermaid code

Mermaid Demo 🧐

To integrate Mermaid in your README, you don't need to add any external thing whatsoever! You just have to make a code block with the mermaid language designation.

But don't worry – you don't need to learn a new language or script. If you have an idea about markdown and supported diagrams, you won't find it too hard to get started.

Sounds simple? Let's make a user journey diagram of me studying for exams.

In your GitHub Web, open any markdown file. Paste the below code into the write section and hit preview.

journey title Me studying for exams section Exam is announced I start studying: 1: Me Make notes: 2: Me Ask friend for help: 3: Me, Friend We study togther: 5: Me, Friend section Exam Day Syllabys is incomplete: 2: Me Give exam: 1: Me, Friend section Result Declared I passed the exam with destinction!: 5: Me Friend barely gets passing marks: 2: Friend

Don't forget to enclose it in code blocks and add mermaid at the beginning.
Like this:

When rendered, it will look something like this:

User Diagram created with Mermaid in GitHub README

Fun fact: The sequence diagram depicting the rendering Mermaid syntax above is also rendered with the new feature. You can find the code here.

Final Words 👋

Mermaid integration allows you to keep your diagrams close to the documentation, saving time and effort spent managing a separate software.

You can read the original GitHub blog here or have a look at Mermaid's official documentation.

Before We End ✨

I was inspired to write this article because I was eager to try out this feature as soon as I heard about its release. I hope you found this article helpful. I have my own personal blog where I talk about web development and my experiences.

My DMs are always open if you want to say hello. I am most active on Twitter, LinkedIn, and Showwcase. See you there!

Till then, happy documenting! 📃