If you’re new to Machine Learning and are just getting started, then a free Kaggle or Colab might be enough for you. But that won’t be the case when you want to go deeper. You’ll need a GPU, which can get costly if you’re continuously using it on the cloud.

But there’s some good news: you can utilize your computer’s Nvidia GPU (GTX/RTX) quite easily and perform machine learning-related tasks right on your local machine. The cool thing is, it won’t cost you anything other than the electricity it uses!

When you’re running Machine Learning models on your local machines, the most suitable operating system is a Linux-based one, like Ubuntu. But Windows has improved a lot for this purpose. If you’re using the latest Windows 11, you can leverage Windows Subsystem for Linux (WSL) and use your GPU directly for Machine Learning-related workflows.

This process can be quite tricky, though, as can making two popular Machine Learning frameworks, TensorFlow and PyTorch, compatible with your system GPU in Windows 11. That’s why I have written this comprehensive guide to ease your pain.

In it, I’ll help you set up CUDA on Windows Subsystem for Linux 2 (WSL2) so you can leverage your Nvidia GPU for machine learning tasks.

By following these steps, you’ll be able to run ML frameworks like TensorFlow and PyTorch with GPU acceleration on Windows 11.

Keep in mind that this guide assumes you have a compatible Nvidia GPU. Make sure to check Nvidia's official compatibility list before proceeding.

I have also prepared a video for you that’ll help you follow proper guidelines throughout this article.

Also, if this tutorial helps you, then don’t forget to add a star to the GitHub repository CUDA-WSL2-Ubuntu-v2. If you face any issues or have any suggestions/improvements, then please raise an issue in the GitHub repository. Currently, the live website is available at ml-win11-v2.fahimbinamin.com.

Table of Contents

1. Prerequisites

2. Windows Terminal

3. Windows PowerShell (Latest & Greatest)

4. Configure Windows Terminal

5. Configuration of my computer

6. CPU Virtualization

7. Install WSL2

8. Install Latest LTS Ubuntu via WSL2

9. Update & Upgrade Ubuntu Packages

10. Install and Configure Miniconda

11. Install Jupyter & Ipykernel

12. Nvidia Driver

13. Install CUDA dependencies

14. CUDA Toolkit

15. Add Path to Shell Profile for CUDA

16. nvcc Version

17. cuDNN SDK

18. TensorFlow GPU

    • Check TensorFlow GPU

19. PyTorch GPU

    • Check PyTorch GPU

    • Check PyTorch & TensorFlow GPU inside Jupyter Notebook

20. Conclusion

Prerequisites

Before you begin, make sure you have the following requirements met:

• Windows 11 operating system

• Nvidia GPU (GTX/RTX series)

• Administrator access to your PC

• At least 30 GB of free disk space

• Internet connection for downloads

• Latest Nvidia drivers installed

Windows Terminal

First, you’ll need to ensure that you have Windows Terminal installed properly in your operating system. It is the newest terminal application for users of command-line tools and shells like Command Prompt, PowerShell, and WSL. You can download it from the Microsoft Store.

After ensuring that it’s installed properly, you can proceed to the next steps.

Windows PowerShell (Latest & Greatest)

Windows PowerShell is a modern and updated command-line shell from Microsoft. You can use some Linux specific commands directly on it. It comes with built-in command suggestions. You can download it from the official GitHub page.

Download the latest x64 installer and install it. After ensuring that it is installed properly, you can proceed to the next steps.

Configure Windows Terminal

Now you’ll need to configure your Windows Terminal to use PowerShell as the default shell. It’s optional and you might skip this step. But I recommend doing it for a better experience.

Open Windows Terminal. Click on the down arrow icon in the title bar and select "Settings".

In the Settings tab, under "Startup", find the "Default profile" dropdown menu. Select "PowerShell" from the list.

Now for the "Default terminal application", select "Windows Terminal".

By default, Windows PowerShell always shows the version number in the title bar. If you want to disable it, select the "PowerShell" profile from the left sidebar. Click on the "Command Line" field and add an --nologo argument at the end of the command. After this, the line becomes "C:\Program Files\PowerShell\7\pwsh.exe" --nologo.

If you don’t use other shells frequently and want to hide them in the dropdown, then you’ll need to select those profiles one by one from the left sidebar. Scroll down to the bottom and find the "Hide profile from dropdown" toggle and enable it. It will hide that specific shell from the dropdown menu.

For example, I am hiding the Azure Cloud Shell profile as I don't use it frequently:

Now click on the "Save" button at the bottom right corner to apply the changes. Close the Windows Terminal for now.

Configuration of My Computer

I figured it’d be helpful to share my current computer’s configuration so you can have a clear idea of which setup I’m using in this guide. Here are the details:

Now that you have an idea about my computer’s configuration, we can proceed to the next steps.

CPU Virtualization

As we are going to use WSL2, we’ll need to make sure that the CPU virtualization is enabled. To check whether virtualization is enabled or not from Windows, simply open the Windows Task Manager. Go to the Performance tab and select CPU from the left sidebar. In the bottom right corner, you will see the Virtualization status. If it shows "Enabled", then you are good to go. If it shows "Disabled", then you need to enable it from the BIOS.

⚠️ You have to ensure that CPU Virtualization is enabled in your BIOS settings. Different manufacturers have different ways to access the BIOS. Usually, you can access the BIOS by pressing the Delete or F2 key during the boot process. Once in BIOS, look for settings related to "Virtualization Technology" or "Intel VT-x"/"AMD-V" and make sure it is enabled. Save the changes and exit the BIOS.

Install WSL2

Open the Windows Terminal or Windows PowerShell as an administrator. Run the following command to install WSL2 along with the latest Ubuntu LTS distribution:

wsl.exe --install

It will install Windows Subsystem for Linux 2 (WSL2). After the installation is complete, you will be prompted to restart your computer. Do so to finalize the installation.

⚠️ If you encounter any issues during installation, refer to the official Microsoft documentation for troubleshooting WSL installation problems.

Install Latest LTS Ubuntu via WSL2

Open the Windows Terminal or Windows PowerShell again with the administrator privileges. If you want to check the available Linux distributions to install via WSL, run the following command:

wsl.exe --list --online

For installing any specific distribution, run the following command:

wsl.exe --install <DistroName>

We are going to install the latest LTS Ubuntu distribution. As of now, the latest LTS version is Ubuntu 24.04. But I prefer to install the Ubuntu directly as it always points to the latest LTS version. So, run the following command:

wsl.exe --install Ubuntu

You need to give it a default user account name. For me, I am going with fahim.

It also comes with a nice GUI management tool for WSL.

You can configure a lot of stuff in it including restricting core, RAM, disk space and a lot of specifications from the settings GUI window.

Update & Upgrade Ubuntu Packages

Open your Ubuntu terminal from Windows Terminal. First, we need to update and upgrade the existing packages to their latest versions.

To update the Ubuntu system, simply use the following command:

sudo apt update -y

To upgrade all the packages at once, simply use the following command:

sudo apt upgrade -y

⚠️ Make sure that you have a stable internet connection during the update and upgrade process to avoid any interruptions.

Install and Configure Miniconda

In Machine Learning, we need to manage multiple environments with different package versions. Conda is a popular package and environment management system that makes it easy to create and manage isolated environments for different projects. We will install Miniconda, a minimal installer for Conda, to manage our Python environments. But if you prefer Anaconda, you can install it instead.

Go to the official website of Miniconda. Currently the Miniconda installer is inside Anaconda here. If the official website gets updated, you can always search for "Miniconda installer" on Google to find the latest version. Also, you can create an issue in the official GitHub repository of this project to notify me about it.

As we are installing it inside WSL, we have to select the macOS/Linux Installation. Then select Linux Terminal Installer and choose Linux x86 for downloading the installer.

wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh

It will download the installer to your WSL directory. Then use the following command to install it properly:

bash ~/Miniconda3-latest-Linux-x86_64.sh

⚠️ Make sure that you are in the correct directory where the installer is downloaded. If you downloaded it to a different location, adjust the path accordingly. Also, replace bash with zsh or sh if you are using a different shell.

Make sure to choose the initialization option properly. I prefer to keep the conda env active whenever I open a new shell. Therefore, I chose "Yes".

Make sure that the installation succeeds without any errors.

For the changes to take effect, you can close and reopen the current shell. But you can also do that without closing and reopening the shell by applying the command below.

source ~/.bashrc

⚠️ If you’re using a different shell like zsh or fish, make sure to source the appropriate configuration file (e.g., ~/.zshrc for zsh).

Install Jupyter & Ipykernel

I prefer to use Jupyter Notebook for running my machine learning experiments. It provides an interactive environment for coding and data analysis. We’ll install Jupyter Notebook and Ipykernel to run Jupyter notebooks in our conda environment. We will do that in all conda environments starting with the base environment. It also helps us to keep the conda environment kernel inside Jupyter Notebook.

First, make sure that you are in the base conda environment. You will see (base) on the left side of the terminal.

Now install Jupyter and Ipykernel both by applying the following command:

conda install jupyter ipykernel -y

Make sure that you accept the terms of service of Conda.

Now, I will create a separate conda environment for both TensorFlow and the PyTorch GPU. You can directly install them in the base environment or in any other environment as per your preference. I am not specifying any specific Python version while creating the environment. It will automatically install the latest stable version of Python.

conda create -name ml -y

To activate any specific conda environment, you have to use the following command:

conda activate <conda-env-name>

For example, if I want to activate my newly created ml environment, I will use this command:

conda activate ml

If you’re not sure which conda environments are installed in your system, you can check all available and installed conda environments in your system by running the following command:

conda env list

Nvidia Driver

Ensure that you have the latest Nvidia drivers installed on Windows. WSL2 uses the Windows driver, so no separate driver installation is needed in Ubuntu. You can download the latest drivers from the official Nvidia website.

If you are just installing the latest GPU driver, then after installing the drivers, restart your computer to ensure the changes take effect. You can either use the GeForce Game Ready Driver or the NVIDIA Studio Driver. But I recommend using the Studio Driver for better stability with creative and ML applications.

Install CUDA Dependencies

You might face some issues if you do not have the CUDA dependencies installed properly. I recommend that you install the required dependencies before proceeding further:

sudo apt install gcc g++ build-essential

After installing the dependencies, you can then verify the CUDA installation if you had any issues earlier.

CUDA Toolkit

TensorFlow GPU is very picky about the CUDA version. So we need to install a specific version of CUDA Toolkit that is compatible with the TensorFlow version we are going to install.

To understand exactly which CUDA version is compatible with which TensorFlow version, you can check the official TensorFlow GPU support matrix here.

At the time I’m writing this article, the TensorFlow GPU documentation says that we should have CUDA Toolkit 12.3. So I will ensure that I install exactly that version. You can simply click on that version link in the official docs and it will redirect you to the official Nvidia CUDA Toolkit download page. But if the link gets updated in the future, you can always search for "Nvidia CUDA Toolkit" on Google to find the latest version.

As TensorFlow GPU is asking for exact Version 12.3, I will select version 12.3.0 exactly.

In the CUDA Toolkit download page, make sure to choose the operating system as Linux, Architecture as x86_64, Distribution as WSL-Ubuntu, Version as 2.0 and the Installer type as runfile(local).

⚠️ As we are using Ubuntu in our WSL2, you can also choose Ubuntu as your operating system. But I prefer to choose WSL-Ubuntu for better compatibility.

After selecting those, it will give you the download commands. You have to apply them sequentially. Make sure that you don't keep the checkmark in "Kernel Objects" during installing CUDA.

⚠️ Make sure to copy and paste the commands one by one in your WSL Ubuntu terminal to download and install the CUDA Toolkit properly. If you face any issues related to CUDA dependency, then quickly go through the Install CUDA dependencies section, where I have explained how to install the CUDA dependencies properly.

Add Path to Shell Profile for CUDA

After installing CUDA Toolkit, we need to add the CUDA binaries to our shell profile for easy access. This will allow us to run CUDA commands from any directory in the terminal.

Note that, depending on the shell you are using (bash, zsh, and so on), you need to add the CUDA path to the appropriate configuration file. Make sure to replace .bashrc with .zshrc or other configuration files if you are using a different shell.

To add the CUDA binary path, follow the command below:

echo 'export PATH=/usr/local/cuda-12.3/bin:$PATH' >> ~/.bashrc

You have to use the updated path where you installed it. Your terminal will show it after installing the CUDA:

Now, you need to add the path inside the Library path. Just use the exact path where you installed CUDA. Your terminal will list the path properly.

echo 'export LD_LIBRARY_PATH=/usr/local/cuda-12.3/lib64:$LD_LIBRARY_PATH' >> ~/.bashrc

After adding those paths, you need to source the shell profile for the changes to take effect. You can do that by running the following command:

source ~/.bashrc

nvcc Version

NVCC stands for Nvidia CUDA Compiler. It is basically a compiler driver for the CUDA platform that allows developers to write parallel programs to run on Nvidia GPUs. As we have already installed the CUDA toolkit, we need to see whether the compiler is also properly activated. To check that, we need to verify the version.

Verify that CUDA is properly installed by checking the version:

nvcc --version

If the output shows the correct CUDA version, then you have successfully installed CUDA Toolkit in your WSL2 Ubuntu environment.

cuDNN SDK

The cuDNN (CUDA Deep Neural Network) SDK is a GPU accelerated library of primitives for deep neural networks, developed by Nvidia. It provides highly optimized building blocks for common deep learning operations, significantly speeding up the training and inference processes of AI models on Nvidia GPUs.

Note: Even though TensorFlow GPU suggests a specific cuDNN version, it’s often compatible with multiple versions. Because of this, I recommend downloading the latest cuDNN version that is compatible with your installed CUDA version. You can find the cuDNN download page here.

Select the Operating System as Linux, Architecture as x86_64, Distribution as Ubuntu, Version as 24.04, Installer Type as deb (local), Configuration as FULL. After selecting those, it will give you the download commands. You have to apply them sequentially.

⚠️ Make sure to copy and paste the commands one by one in your WSL Ubuntu terminal to download and install the cuDNN SDK properly. If you face any issues related to CUDA dependency, then quickly go through the Install CUDA dependencies section, where I have explained how to install the CUDA dependencies properly.

TensorFlow GPU

Now, we are going to install TensorFlow GPU in our conda environment. Make sure that you have activated the conda environment where you want to install it. I’m going to install it in my previously created ml environment. To activate it, I’ll use the following command:

conda activate ml

⚠️ Make sure that you have activated the correct conda environment before installing TensorFlow GPU. You will see the environment name in the terminal prompt.

I will install ipykernel and jupyter in this new environment.

conda install jupyter ipykernel -y

Now, to install TensorFlow GPU, I will simply use the following command:

pip install tensorflow[and-cuda]

It might take a couple of minutes depending on the internet speed you have. Just have patience and wait for it to finish the installation.

Check TensorFlow GPU

After installing TensorFlow GPU, we need to verify that it is working properly with GPU support. Open a Python shell in your Ubuntu terminal and run the following commands:

python3 -c "import tensorflow as tf; print(tf.config.list_physical_devices('GPU'))"

If the output shows a list of available GPU devices, then TensorFlow GPU is successfully installed and working properly.

PyTorch GPU

Now, we’re going to install PyTorch GPU in our conda environment. Make sure that you have activated the conda environment where you want to install it. I’m going to install it in my previously created ml environment. To activate it, I will use the following command:

conda activate ml

Installing PyTorch GPU is very straightforward. You can use the official PyTorch installation command generator here.

Make sure to select PyTorch Build as the latest Stable one, Your OS as Linux, Package as Pip, Language as Python. For the Compute Platform, select the CUDA version that matches your installed CUDA Toolkit. For me, it is CUDA 12.3. But, if you can not find the exact one then choose the closest. As CUDA 12.3 is not available for me now, I am choosing CUDA 12.6.

After selecting those, it will give you the installation command. You have to apply it in your WSL Ubuntu terminal.

It might take a couple of minutes depending on the internet speed you have. Just have patience and wait for it to finish the installation.

Check PyTorch GPU

After installing PyTorch GPU, verify that it is working properly with GPU support. Open a Python shell in your Ubuntu terminal and run the following commands:

python3 - << 'EOF'
import torch
print(torch.cuda.is_available())
print(torch.cuda.device_count())
print(torch.cuda.current_device())
print(torch.cuda.device(0))
print(torch.cuda.get_device_name(0))
EOF

The output should look similar to the screenshot, showing:

• True: GPU is available for PyTorch

• 1: Number of detected CUDA devices

• 0: Index of the current active CUDA device

• A device object representation

• NVIDIA GeForce RTX 3060 (or your GPU name)

Check PyTorch & TensorFlow GPU inside Jupyter Notebook

Now that the environment is fully configured, we will verify GPU support directly inside Jupyter Notebook. This ensures both PyTorch and TensorFlow can successfully detect and use your GPU.

1. Test PyTorch GPU

Create a new Jupyter Notebook and run the following commands one by one:

import torch

print(torch.cuda.is_available())
print(torch.cuda.device_count())
print(torch.cuda.current_device())
print(torch.cuda.device(0))
print(torch.cuda.get_device_name(0))

If everything is configured correctly, you will see your GPU (for example NVIDIA GeForce RTX 3060) detected properly:

2. Test TensorFlow GPU

Next, run the following code to check whether TensorFlow detects your GPU:

import tensorflow as tf

print(tf.config.list_physical_devices('GPU'))

You can also check the number of GPUs detected:

print("Num GPUs Available:", len(tf.config.list_physical_devices('GPU')))

Finally, run TensorFlow’s built-in GPU validation (warnings are normal):

import tensorflow as tf

assert tf.test.is_gpu_available()
assert tf.test.is_built_with_cuda()

If TensorFlow logs show your GPU model (such as RTX 3060), then TensorFlow GPU is successfully installed and fully working inside Jupyter Notebook.

Conclusion

Thank you so much for reading all the way through. I hope you have been able to configure your Windows 11 computer properly for running almost any kind of Machine Learning-based experiments.

To get more content like this, you can follow me on LinkedIn and X. You can also check my website and follow me on GitHub if you are into open source and development.

In this tutorial, you will learn how to:

• Build tables using plain HTML

• Style them using CSS

• Create and manipulate tables dynamically using vanilla JavaScript

By the end, you’ll understand not just how to do this, but why it matters. You’ll also learn about separating data from presentation, which is at the heart of modern web development.

Table of Contents

1. Creating a Simple Table with HTML

2. Understanding and Styling Borders

3. When to Use HTML vs JavaScript for Tables

4. How to Build a Table Dynamically with JavaScript

5. Step-by-Step Explanation

6. How to Add CSS Classes for Styling

7. How to Turn It Into a Reusable Function

8. Final Thoughts & Conclusion

Creating a Simple Table with HTML

Before we involve JavaScript, let’s first understand how a standard HTML table works.

A table in HTML is built from a few key tags:

Here is a minimal example:

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Occupation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Fahim</td>
      <td>25</td>
      <td>Software Engineer</td>
    </tr>
  </tbody>
</table>

Let me break down that code snippet properly:

• <table> starts the table.

• <thead> defines the table header section.

• Inside <thead>, we have a <tr> (table row), which contains <th> elements (these are column headers).

• <tbody> holds the actual data. Each <tr> inside it is one record, and each <td> inside that row is a cell.

The border="1" attribute gives a thin outline around the cells. It’s useful for visualization when you’re learning about tables.

Understanding and Styling Borders

You might have noticed the border attribute in the <table> tag:

<table border="1">

This is a quick way to add visible outlines. You can even make them thicker, like so:

<table border="5">

The above will render thicker borders, like this:

But there is a catch as well…

Why Using border Is Not a Best Practice

The border attribute is an old, inline styling technique. Modern web development separates structure (HTML) from presentation (CSS). That means we now use CSS for all visual styling.

Here’s the modern equivalent:

table {
  border-collapse: collapse; /* prevents double borders */
  border: 2px solid #444;
}

th, td {
  border: 1px solid #666;
  padding: 8px;
  text-align: left;
}

When to Use HTML vs JavaScript for Tables

You can absolutely create tables entirely in HTML, but only if the data is static.

Use HTML only when:

• The data does not change often (like a static price list).

• You know the exact number of rows and columns.

• You are not fetching data from an external source.

Use JavaScript when:

• The data is dynamic (for example, fetched from an API).

• You want to update the table based on user input.

• You want to sort, filter, or paginate your table interactively.

JavaScript lets you build tables programmatically by defining data in an array or object and letting code handle the rendering.

How to Build a Table Dynamically with JavaScript

We will now create a dynamic table using JavaScript. First, I’ll show you the complete code, and then we’ll break it down step-by-step so you can understand exactly what’s happening.

Code Example:

<!DOCTYPE html>
<html>
<head>
  <title>JS Table Example</title>
</head>
<body>

<div id="table-container"></div>

<script>
  // Step 1: Define your data
  const data = [
    { name: "Fahim", age: 25, job: "Software Engineer" },
    { name: "Sara", age: 29, job: "Designer" },
    { name: "David", age: 31, job: "Manager" }
  ];

  // Step 2: Create a table element
  const table = document.createElement("table");
  table.border = "1"; // for visibility only

  // Step 3: Add headers
  const headers = ["Name", "Age", "Job"];
  const headerRow = document.createElement("tr");

  headers.forEach(text => {
    const th = document.createElement("th");
    th.textContent = text;
    headerRow.appendChild(th);
  });
  table.appendChild(headerRow);

  // Step 4: Add data rows
  data.forEach(item => {
    const row = document.createElement("tr");
    Object.values(item).forEach(value => {
      const cell = document.createElement("td");
      cell.textContent = value;
      row.appendChild(cell);
    });
    table.appendChild(row);
  });

  // Step 5: Insert the table into the DOM
  document.getElementById("table-container").appendChild(table);
</script>

</body>
</html>

Step-by-Step Explanation

Step 1: Define the Data – Separating Data from Presentation

In web development, data and presentation should be kept separate. In this context, data is the content (like names, ages, jobs) and presentation is how that data looks (HTML table layout, colors, and so on).

We define our data as an array of objects:

const data = [
  { name: "Fahim", age: 25, job: "Software Engineer" },
  { name: "Sara", age: 29, job: "Designer" },
  { name: "David", age: 31, job: "Manager" }
];

This structure keeps our data flexible. If you later fetch it from an API or database, your table-rendering logic stays the same.

It also mirrors how modern frameworks (like React or Vue) work: your UI simply renders what is in your data.

Step 2: Create the Table Element

const table = document.createElement("table");
table.border = "1";

Here we are using document.createElement(), a DOM API method that programmatically creates elements. We have not added it to the page yet. It’s just stored in memory.

So why build it in memory first? Well, it’s faster. Appending many elements to the DOM one-by-one causes reflows (browser recalculating layout). Building the structure first and appending once at the end reduces layout recalculations and improves performance.

Step 3: Add the Header Row

const headers = ["Name", "Age", "Job"];
const headerRow = document.createElement("tr");

headers.forEach(text => {
  const th = document.createElement("th");
  th.textContent = text;
  headerRow.appendChild(th);
});
table.appendChild(headerRow);

Here, we loop through the header labels and dynamically create <th> cells.

We generate headers automatically because if you later load data from a JSON file, you can automatically extract column names using Object.keys(data[0]). This avoids hardcoding and makes your table generation more flexible.

Step 4: Populate the Data Rows

data.forEach(item => {
  const row = document.createElement("tr");
  Object.values(item).forEach(value => {
    const cell = document.createElement("td");
    cell.textContent = value;
    row.appendChild(cell);
  });
  table.appendChild(row);
});

We loop through every data object, create a <tr> for each, and then fill in <td> cells for each value. textContent ensures we safely insert text (no HTML injection).

Step 5: Insert the Table into the DOM

document.getElementById("table-container").appendChild(table);

This is where our table finally appears on the page. We select the empty <div> (our placeholder) and append the built table to it.

JavaScript does not automatically add tables. It only creates them because we told it to. The appendChild() call is what actually adds it to the live DOM.

Why This Approach Is Better

Using JavaScript to generate tables has several benefits:

1. Reusability: You can reuse the same code for any dataset – just change the array.

2. Separation of concerns: Data (JS), structure (HTML), and design (CSS) are all handled independently.

3. Performance: Building tables in memory before appending avoids costly DOM reflows.

4. Interactivity: You can easily add features like sorting, filtering, or highlighting rows.

5. Dynamic data: It is the natural approach when fetching JSON data from APIs.

How to Add CSS Classes for Styling

Instead of inline styling, we’ll use classes for better organization:

table.classList.add("data-table");

Then we’ll define our styles in CSS:

.data-table {
  border-collapse: collapse;
  border: 2px solid #333;
  width: 100%;
}

.data-table th, .data-table td {
  border: 1px solid #888;
  padding: 10px;
}

When we say “use them,” we are referring to CSS class names – reusable identifiers that let you style your elements separately from your JavaScript logic.

How to Turn It Into a Reusable Function

Finally, let’s make this process reusable. We can wrap everything in a function that generates any table given some data and headers.

function createTable(data, headers, containerId) {
  const table = document.createElement("table");

  const headerRow = document.createElement("tr");
  headers.forEach(text => {
    const th = document.createElement("th");
    th.textContent = text;
    headerRow.appendChild(th);
  });
  table.appendChild(headerRow);

  data.forEach(item => {
    const row = document.createElement("tr");
    Object.values(item).forEach(value => {
      const td = document.createElement("td");
      td.textContent = value;
      row.appendChild(td);
    });
    table.appendChild(row);
  });

  document.getElementById(containerId).appendChild(table);
}

Then use it like this:

createTable(data, ["Name", "Age", "Job"], "table-container");

When and Why to Use a Function

This pattern is ideal when you need to generate multiple tables on one page, you want cleaner, modular, and testable code, or you plan to integrate with dynamic data sources (like APIs).

Final Thoughts & Conclusion

We have covered a lot! In this article, so let’s recap what you learned:

• How to create a table with HTML

• How to style it properly using CSS

• When to use HTML vs JavaScript

• How to separate data from presentation

• How to generate tables dynamically with JavaScript

• How to make your code reusable and efficient

With these foundations, you can now build tables that are dynamic, styled, and data-driven – using nothing but vanilla JavaScript.

Thank you for reading the entire article. I hope you have gained some insight into how to make a subtle transition from typical HTML tables to dynamic JavaScript-based tables. To get more content like this, you can follow me on LinkedIn and X. You can also check my website and follow me on GitHub if you are into open source and development.

If you want to use Coolify, you have two options. You can purchase their cloud plan, which costs you money. On the other hand, you can self-host it for free and have unlimited usage without any limitations.

In this article, I will show you how to self-host Coolify directly in an AWS EC2 instance and use its features. I will also show you how to deploy any website directly into it.

This article includes a step-by-step video walkthrough that I made for you. You can watch the video on my YouTube channel.

Table of Contents

• Requirements For Self-Hosting Coolify

• Set Up an AWS EC2 Instance For Coolify

• Security Group of AWS EC2

• Install Coolify In AWS EC2

• Access Coolify From Anywhere Using The Public IP

• How to Deploy A Website Via Coolify

• Conclusion

Requirements For Self-Hosting Coolify

Since we’re going to self-host Coolify in the cloud for this article, you’ll need to make sure that you have at least the minimum specification of the server. According to Coolify, currently, the minimum requirements are given below:

Server Requirements

• A VPS (Virtual Private Server)

• A Dedicated Server

• A Virtual Machine (VM)

• A Raspberry Pi (see our Raspberry Pi OS Setup Guide)

• Or any other server with SSH access

Supported Operating System

• Debian-based (for example, Debian, Ubuntu)

• Redhat-based (for example, CentOS, Fedora, Redhat, AlmaLinux, Rocky, Asahi)

• SUSE-based (for example, SLES, SUSE, openSUSE)

• Arch Linux

• Alpine Linux

• Raspberry Pi OS 64-bit (Raspbian)

Supported Architectures

Coolify runs on 64-bit systems:

• AMD64

• ARM64

Minimum Hardware Requirements

• CPU: 2 cores

• Memory (RAM): 2 GB

• Storage: 30 GB of free space

Coolify may function properly on servers with lower specs than those mentioned above, but they recommend slightly higher minimum requirements. This ensures that users have sufficient resources to deploy multiple applications without performance issues.

I recommend that you check the official documents, as there might be an update regarding the specifications, and you do not want to miss that part!

I am going to use AWS EC2 as my server for this guide.

Set Up an AWS EC2 Instance for Coolify

Create a new EC2 instance in AWS.

Give it any suitable name you want. I am going with coolify-yt for the purpose of this article.

For the Amazon Machine Image (AMI), I will use the latest LTS of Ubuntu (Ubuntu Server 24.04 LTS).

The architecture will be 64-bit (x86).

For the instance type, I can’t go with the free tier because that wouldn’t meet the minimum specification. So I’m going with the t2.medium.

I will create a new key pair for key pair. I will go with RSA, and the file format will be .pem.

When you click on Create key pair, it will download a .pem file. Make sure to keep that safely.

For the storage, I am taking a 50 GB block storage. But you can follow Coolify’s minimum specification storage (30GB) for now if you want.

If I want to use my Coolify from anywhere, I have to check the three boxes in the Network settings.

• Allow SSH traffic from (Anywhere)

• Allow HTTPS traffic from the internet

• Allow HTTP traffic from the internet

Now, simply click on “Launch instance.” It will create our new EC2 server. It might take a few seconds to half a minute. So just be patient and wait for it to finish its task.

Security Group of AWS EC2

Go to the instance tab and find the name of your newly created EC2 instance. Then, find its security group name.

I have the security group name for my newly created EC2 as “launch-wizard-7”.

Now, go to the security group tab and find out which security group is associated with your newly created EC2.

As my EC2’s security group name was “launch-wizard-7”, I will click on that security group ID.

It will take me to its configuration page. Now, click on “Edit inbound rules”.

Add a new rule. The type will be “Custom TCP”. The port will be “8000”. The source will be “Anywhere-IPv4”.

Now save the rules.

Now, go to the EC2 page and make sure that the newly created EC2 is running.

If you want to connect to the EC2 server from your local machine, you have to use the .pem key. For that, you have to go to the “SSH Client” tab in the connect settings.

For now, I am not going to go through that much hassle, so I’ll use the browser to connect to my server using the “Connect” button.

Make sure to note the Public IPv4 address of the EC2. Now click on “Connect”.

It will open a new tab with the EC2 connection in your browser.

It will be ready to use within a few seconds.

Install Coolify in AWS EC2

There are many ways to install Coolify directly on our EC2. But I usually follow the recommended installation script of Coolify.

curl -fsSL https://cdn.coollabs.io/coolify/install.sh | sudo bash

Use sudo zsh instead of sudo bash if you are running the command from a “ZSH” terminal.

It will start installing Coolify into your server. Follow their prompts in the EC2 terminal.

Depending on your EC2 specification, it might take several minutes. Be patient and let it do its job until it reaches the “Congratulations!” screen.

Access Coolify from Anywhere Using the Public IP

After the installation, open a new tab and use that public IP with an ending :8000 port. It will take you to the Coolify account registration page for the first time.

Register your account. The first one becomes the admin by default. But you can change the role afterwards anytime you want.

You can follow their instructions during the onboarding. But for now, I am simply skipping it.

Your coolify is now completely ready to go!

How to Deploy a Website Via Coolify

Now, I want to show you how you can easily deploy a static website directly from your GitHub repository in Coolify.

Go to ”Project” and click on “+Add”.

Give it a name and a suitable description.

I will use one of my public repositories from GitHub for this trial.

You can also deploy from private repositories. To do so, select “Private repository with GitHub App” or “With deploy key”.

Now, click on Production.

Now, we need to add a resource from which it will pull the data.

As this repository is already public, I will select “Public Repository” as my project source.

Now, provide the public repo URL in the Repository URL field. Then click on “Check repository”.

It will show you the project's basic configuration. Check to ensure that everything is correct.

If everything is alright, then click on “Continue”.

As this is just a static website, I will change the build pack to “Static” and click on “Continue.”

Now, deploy the application by clicking on the “Deploy” button.

You can enable/disable the debug log as well.

After the deployment is finished successfully, you can find the website's autogenerated URL from the Links tab.

The site will appear just fine!

You can also auto-generate a new domain or add your own domain/subdomain from the project settings at any time.

The project settings will contain all other necessary configuration/environment variables, and so on. Whenever you change any information/settings/configuration in the configuration section, you just need to redeploy the application to reflect the changes.

You can add new team members, change the Coolify domain to something else (your domain/subdomain) and make it a generic, publicly accessible server.

So, this is the generic procedure to install Coolify in an AWS EC2 instance without any hassle.

Conclusion

Thanks for reading this short tutorial. I hope it helped you install Coolify on your favourite server and increase your productivity.

To get more content like this, you can follow me on GitHub, LinkedIn, and YouTube. My website is always available, too.

LaTeX is not a word processor like Microsoft Word – rather, it’s a document preparation system that allows you to focus on the content of your writing while it handles the formatting. If you use LaTeX to write your formal documents (like a CV, résumé, or research paper), then you don’t need to worry about the formatting and structure, as everything can be done using LaTeX scripts.

If you use LaTeX to write your academic or research papers, you might be familiar with website-based applications like Overleaf. Overleaf is a website that allows anyone to read, write, and compile LaTeX scripts online.

These sites are okay for small tasks or compilations, or if you need only a little bit of free collaboration. But if you need to work on bigger projects or need to conduct many collaborative tasks, then the free tier may be insufficient. And in my opinion, the paid subscription costs too much.

But don’t worry: running LaTeX locally may be the perfect solution for you. I know this because I also faced a similar situation, and this simply changed my life! I also keep all of the tracks in Git (GitHub, GitLab, and so on) along with unlimited collaboration opportunities and compilation. And the great thing is, all of these are completely free as it’s all happening on my local machine.

So in this article, I am going to discuss the methods in detail. I have also created an in-depth video for you to understand how this works.

Video Tutorial

Resources You’ll Need:

1. GitHub Repository

This entire guide is available in one of my GitHub projects named Install-LaTeX. The live website is available here (fahimfba.github.io/Install-LaTeX) as well. I would highly appreciate it if you star (⭐) the repository. Also, you can create issues there if you face any problems. Any kind of good contribution is also welcome here.

2. Operating System

You can install LaTeX on any major operating system (Windows, MacOS, and Linux-based OSes). But in this article, I am only going to talk about the Windows operating system.

Here, I’m using the latest Windows 11 operating system, but the same procedure should be applicable to all of the Windows-based operating systems that are going to come out in the future. Windows 10 should also be okay too.

3. Editor

I am going to use the popular Visual Studio Code as my editor. It is a 100% free and robust editor that’s very popular among devs all over the world. If you don’t already have it, go ahead and install it before proceeding further.

4. LaTeX Compiler/IDE

To work on LaTeX files, you’ll need a specific compiler. I am going to use MikTeX. There are other tools out there, but this is the best tool right now (according to me!). It is completely free and supports all major operating systems as well. It also has a built-in IDE, but we are going to use VS Code as our main editor.

Download the Windows executable file from the Download section.

After the download is finished, install the executable. At the end of the installation, keep the tick in “Check for updates now”.

You will find the MikTeX console in your taskbar. Open that.

Go to the “Updates” tab and click “Update now”. It will install all of those packages.

At the end, it will prompt you to close the console. Click “OK”. Open MiKTeX again.

That’s it for this tool.

5. Perl

The commands we are going to execute for building the LaTeX files are dependent on Perl. As the Windows operating system doesn’t come with a built-in Perl compiler, we are going to install the Strawberry Perl.

Download the latest MSI package from it.

Install the executable after it gets finished downloading the application.

We need to add Perl’s path to the system environment. To do that, go into the location where it has been installed. By default, it gets installed inside C:\Strawberry\perl\bin directory. Copy the path.

Now search for “env” in the Windows search bar until you find something called “Edit the system environment variable”.

Now click on “Environment Variables…”.

Now select “Path” from “System variables” and click “Edit”.

Click “New”. Paste the path. Now exit every windows sequentially by clicking on “OK” in each window.

Visual Code Studio Extensions

We need some extensions in VS Code to streamline our workflow.

First, let’s get LaTeX Workshop. It is the core extension for working with LaTeX files inside VS Code Studio.

Next, you’ll need Rewrap. It is an amazing tool that lets you wrap longer lines. It helps you work in a long line in separate lines without breaking any structure or sentence.

Build the LaTeX File

Whenever you want to build any LaTeX file inside VS Code studio, simply open that file in it. Then open the command palette using Ctrl + Shift + P.

Search for “LaTeX Workshop: Build with recipe” and go there. It will start building the file. Whenever it prompts you to install any missing package, untick the box that says “Always show this dialog” and press “Install”. I do this because clicking on “Install” on hundreds of prompt windows for building a LaTeX file is very difficult for me.

After it finishes building the LaTeX file, you will get the output PDF file inside VS Code. You can open the PDF file directly in VS Code.

If you want to go into any specific line in the code from the output PDF file like Overleaf, simply click on that specific portion in the PDF by pressing the Ctrl key. It will immediately take you to the code part where it belongs.

That’s it! It’s now running on your local machine and there are no restrictions or limitation to it, literally! Also, for collaboration and keeping track of the history, using Git is the best option, like I do.

Conclusion

Thanks for reading this short tutorial. I hope it helped you interact more easily with LaTeX.

You can follow me on GitHub, LinkedIn, and YouTube to get more content like this. Also, my website is always available for you!

One common issue you may have faced is the errors you can get when you want to exit the application. You can easily mitigate that issue by opening the application launcher as Administrator. But opening the launcher via administrator correctly can also be troublesome. This means that you’ll need to configure a setting so that it asks for administrator access each time you want to launch it.

In this quick tutorial, I’ll walk you through this process so you don’t have to struggle with it.

Video Guide

I have prepared a complete video where I show you how to download and install the client. I also teach you how to make some changes so that you don’t encounter any issues when you want to quit the application.

Step-By-Step Process

If you keep the default installation directory during the installation, it will install it inside the C drive of your Windows operating system.

So simply enter into the “C” drive and go inside the “xampp” directory.

Scroll down until you find the “xampp-control.exe” file.

Right-click after selecting the file and open the Properties.

Next, go to the Compatibility section. Make sure to add a check mark by clicking on the checkbox by “Run the program as an administrator”.

Click “Apply”, and “OK”.

That’s it!

Now, whenever you want to open the XAMPP launcher, it will always open with administrator access.

Quitting the application

When you want to quit the application, you need to click the “Quit” button instead of using the “X” exit button at the upper right side of the window.

And now you shouldn’t get any errors when exiting the control panel anymore!

Conclusion

Thanks for reading this short tutorial. I hope it helped you interact more easily with XAMPP.

You can follow me on GitHub, LinkedIn, and YouTube to get more content like this. Also, my website is always available for you!

But sometimes, these saved posts accumulate and become overwhelming. You may decide to un-save them all at once rather than manually unchecking each one, especially if you've amassed a large collection.

Here's a step-by-step guide to bulk un-saving all your saved items on Facebook.

Warning: Before proceeding, note that this method will un-save all the displayed items on the page permanently. Once unsaved, the items will no longer appear in your saved list. There’s no way to retrieve them unless you manually save each post again. Please use this method with caution.

Also, You might need to use allow pasting and hit the Enter key if Facebook warns you before applying any JavaScript commands in the console.

Step 1: Scroll Through Your Saved Items

Start by heading over to your Facebook saved items section. You can access this by clicking the menu icon (three horizontal lines) on the mobile app or the saved section on the left-hand side of the homepage on the desktop version.

Scroll down to load and display all the saved items that you want to un-save. Facebook only loads a few items at a time as you scroll, so ensure you've loaded everything you wish to unsave.

Step 2: Open the Developer Console

To start the bulk un-saving process, you’ll need to use your browser’s developer console. Here’s how to do that:

• On Google Chrome: Press Ctrl + Shift + J (Windows) or Cmd + Option + J (Mac) to open the console.

• On Firefox: Press Ctrl + Shift + K (Windows) or Cmd + Option + K (Mac).

Once the console is open, you can start running the necessary JavaScript commands.

Step 3: Open the Context Menu for Each Item

You’ll first need to open the contextual menu (the three dots beside each saved post) for every item on the page. This is where Facebook allows you to un-save individual posts.

Copy and paste the following command into the console and press Enter:

Array.from(document.querySelector('[role="main"]')?.querySelectorAll('[aria-label="More options for saved item"]') || []).slice(1).forEach(el => el.click());

This command finds all the “More” buttons on the page and opens the contextual menu for each saved item.

Step 4: Un-save Each Item

Once the contextual menus have been opened for each saved post, it’s time to bulk un-save them. For that, run the following command in the console:

Array.from(document.querySelectorAll('[role=menuitem]')).map(e => e.click())

This command clicks on the "Un-save" option in every contextual menu that has been opened, removing the items from your saved list.

Important Reminder:

All the items that are displayed on the page will be unsaved permanently. Ensure that you’ve reviewed the items before proceeding with this method.

Conclusion

This method saves you the hassle of manually un-saving items one by one. Just remember to scroll through and load all the saved items before running the script to ensure nothing is left behind.

Also, since this method affects only the currently displayed items, you may need to scroll and repeat the process if you have a lot of saved posts.

By following these steps, you can easily declutter your Facebook saved items and keep only what truly matters.

You can follow me on GitHub, LinkedIn, and YouTube to get more content like this. Also, my website is always available for you!

Resource: GitHub Comment

And to use R, you’ll need to install the R Compiler and R Studio. But did you know that you can also directly run your R code right in a Jupyter Notebook? This helps in so many ways if you are already used to using Jupyter Notebook for Machine Learning-related tasks using Python.

In this tutorial, I’ll show you exactly how you can set up your local machine to run the R programming language directly in Jupyter Notebook. The processes I am going to show you today are equally applicable to all major operating systems (Windows, MacOS, and Linux OSes).

Table of Contents

• Install Conda

• Create a New Environment

• Activate Your Conda Environment

• Install ipykernel and jupyter

• Install R in the Conda Environment

• Open the Jupyter Notebook

• Run R in Jupyter Notebook

• Conclusion

Install Conda

You’d normally use Conda to handle multiple environments in Python. And here, we’re going to use the same Conda program to install R in our environment. You can either use Anaconda or Miniconda.

I prefer Miniconda as it’s so lightweight. You’ll also get the opportunity to install the latest packages directly using Miniconda. But you can simply go with the Anaconda if you are already comfortable with that.

Create a New Environment

Many people tend to use the Base environment. But I never like to use the Base environment directly as you typically need multiple environments for handling different package and versions of packages as well.

So I’ll create a new environment where I’ll work on my R programming language-related tasks using Jupyter Notebook.

To create a new Conda environment, simply use the following command:

conda create --name r-conda

Here, r-conda is my Conda environment’s name. You can choose any other name, but keep in mind that the conda env name can not have any whitespaces in it.

It will create a new Conda environment named r-conda for me.

Activate Your Conda Environment

If you want to work on a separate conda environment, you’ll need to make sure that you’re activating that specific conda environment before starting to do anything.

I want to work on the r-conda conda environment. So I can simply activate the conda environment using the following command:

conda activate r-conda

You need to use the exact conda env name that you want if it’s different than r-conda in the command.

You will see the conda environment’s name as (conda-env-name) at the left side of your terminal.

Install ipykernel and jupyter

I always like to install the ipykernel and jupyter in all of my conda environments as they help manage different conda environments’ Jupyter notebooks/labs separately.

So I’m going to install them together in my conda env by using the command below:

conda install ipykernel jupyter

This will install both ipykernel and jupyter in the activated conda environment.

Install R in the Conda Environment

To install R directly in the conda environment, simply use the following command:

conda install -c r r-irkernel

This will install the necessary components that enable your local computer to run the R program in your Jupyter Notebook.

Open the Jupyter Notebook

Now you can open the Jupyter Notebook either by using jupyter notebook or jupyter notebook --ip=0.0.0.0 --port=8889 --no-browser --allow-root --NotebookApp.token=''. Just make sure to modify the IP, port, root configuration, and token as you see fit for your work.

Open the given link in the terminal to open Jupyter Notebook in your web browser.

Run R in Jupyter Notebook

After opening Jupyter Notebook in your web browser, when you want to create a new notebook for R, you will get R directly in the “New” menu like the image given below.

Now, you can use the R language directly in your Jupyter Notebook!

You can also see the R programming language logo at the top right side of your Notebook.

Conclusion

Thank you for reading the entire article. I hope you have learned something new here.

If you have enjoyed the procedures step-by-step, then don't forget to let me know on Twitter/X or LinkedIn. I would appreciate it if you could endorse me for some relevant skillsets on LinkedIn. I would also recommend that you subscribe to my YouTube channel for regular programming-related content.

You can follow me on GitHub as well if you are interested in open source. Make sure to check my website as well.

Thank you so much! 😀

However, there are some limitations to this language. In some cases, we can not add that much styling or modifications.

Luckily for us, there are five highlighting features for specific segment blocks such as notice, tip, caution, important, and warning. These are also applicable in GitHub Markdown as well.

In this article, I am going to talk about these features in detail.

Video Walkthrough

If you would like to watch a complete video with step-by-step guidelines, then you can watch the video right now!

How to Create a Note Block in Markdown

Use a Note block if you want to highlight information that users should take into account – even when they are just skimming the text.

To write any Note related segment, you need to start it with an angle bracket ( > ), and then you need to specify the highlighting block as Note with [!NOTE].

After that, you need to add an angle bracket ( > ) in each new line that you want to include in your specific Note block.

If you want to close the Note block, then remove the additional angle bracket in the new line.

> [!NOTE]
> I want the readers to read it carefully as it contains many important docs.

Output:

Note block

You see that the preview already has a nice Note related symbol.

How to Create a Tip Block in Markdown

Use a Tip block if you want to provide optional information to help a user be more successful.

To write any Tip related segment, you need to start it with an angle bracket ( > ), and then you need to specify the highlighting block as Tip with [!TIP].

After that, you need to add an angle bracket ( > ) in each new line that you want to include in your specific Tip block.

If you want to close the Tip block, then remove the additional angle bracket in the new line.

> [!TIP]
> Use the command line to detect and resolve the errors!

Output:

Tip block

You see that the preview already has a nice Tip related symbol.

How to Create a Warning Block in Markdown

Use a Warning block if you want to provide critical content that demands immediate user attention due to potential risks.

To write any Warning related segment, you need to start it with an angle bracket ( > ), and then you need to specify the highlighting block as a Warning with [!WARNING].

After that, you need to add an angle bracket ( > ) in each new line that you want to include in your specific Warning block.

If you want to close the Warning block, then remove the additional angle bracket in the new line.

> [!WARNING]
> DON'T DELETE THE `package.json` file!

Output:

Warning block

You see that the preview already has a nice Warning related symbol.

How to Create a Caution Block in Markdown

Use a caution block if you want to make users aware of the potential negative consequences of an action.

To write any Caution related segment, you need to start it with an angle bracket ( > ), and then you need to specify the highlighting block as a Warning with [!CAUTION].

After that you need to add an angle bracket ( > ) in each new line that you want to include in your specific Caution block.

If you want to close the Caution block, then remove the additional angle bracket in the new line.

> [!CAUTION]
> Don't execute the code without commenting the test cases.

Output:

Caution block

You see that the preview already has a nice Caution related symbol.

How to Create an Important Block in Markdown

Use an important block if you want to provide crucial information that is necessary for users to succeed.

To write any Important related segment, you need to start it with an angle bracket ( > ), and then you need to specify the highlighting block as a Warning with [!IMPORTANT].

After that, you need to add an angle bracket ( > ) in each new line that you want to include in your specific Important block.

If you want to close the Important block, then remove the additional angle bracket in the new line.

> [!IMPORTANT]  
> Read the contribution guideline before adding a pull request.

Output:

Important block

You see that the preview already has a nice Important related symbol.

Conclusion

Thank you for reading the entire article. I hope you have learned something new here.

If you have enjoyed the procedures step-by-step, then don't forget to let me know on Twitter/X or LinkedIn. I would appreciate it if you could endorse me for some relevant skillsets on LinkedIn. I would also recommend you to subscribe to my YouTube channel for regular programming related content.

You can follow me on GitHub as well if you are interested in open source. Make sure to check my website as well.

Thank you so much! 😀

Reference

[Markdown] An option to highlight a "Note" and "Warning" using blockquote (Beta) #16925

But it doesn't look messy if you create a specific directory for saving all the screenshots and your MacBook saves all the screenshots there automatically.

Configuring the settings might seem tricky for new MacBook users. So I will show you how you can do this within a few minutes with this step-by-step guide.

Keep in mind that although I am choosing the Pictures/Screenshots directory as my specific directory for saving all my screenshots, you can choose any directory you want.

For this article, I am using my newly purchased MacBook M1 Air (8/256) which is currently running on macOS Sonoma 14.4.1. But the same procedure is applicable for all the latest macOS versions as well.

A messy desktop full of screenshots :( (Source: Internet)

How to Choose a Different Location

Firstly, you need to select a specific location where you want to save all the screenshots directly.

In my case, I created a separate folder for saving screenshots inside my "Pictures" directory.

Directory where I want to save the screenshots automatically

How to Configure the Screenshot Tool

Now we need to configure the default screenshot tool on macOS so that it automatically saves the screenshot images to our desired location. Here's how you can do that:

1. Use Shift + Command + 5 to open the screenshot tool.
2. Click on "Options". Then click "Other Location...".
3. Select that specific location that you created earlier.
4. Now click "Ok", or "Open", or whatever it says to confirm that new location.

Screenshot tool's options. I captured it using my phone. :)

That's it! From now on, whenever you use the default screenshot tool, it will automatically save all the screenshots in that newly specified location. This will help your desktop remain clutter free!

Screenshot Shortcut

There are many people who still open the Screenshot tool using Spotlight or the launchpad. But there is a dedicated shortcut key for that!

You can use Shift + Command + 3 to take screenshot directly and save yourself a little time.

Conclusion

I hope you have learned something new from this article.

If you have enjoyed the procedures step-by-step, then don't forget to let me know on Twitter/X or LinkedIn. I would appreciate it if you could endorse me for some relevant skillsets on LinkedIn.

You can follow me on GitHub as well if you are interested in open source. Make sure to check my website (https://fahimbinamin.com/) as well.

Thank you so much! 😀

Cover image: Photo by Iewek Gnos on Unsplash

Recently, I have faced an issue where I needed to compress a lot of files individually, and manual intervention to compress each file one by one using traditional 7zip became a hassle.

If you are in love with the Windows operating system like I am (I know, I know, sometimes Windows can become quite a pain. Maybe I like the pain and also like to resolve issues all by myself, who knows!), then you may also face issues in batch processing compressing multiple files to the .gzip format.

There are multiple ways to compress a file into the .gzip format. The main issue is that most of the ways do not support batch processing the conversion. In this article, I will talk about two of the decent ways you can do this.

Method 1: Using 7zip (No Batch Processing)

7zip is a free software available for Windows, Linux, and ARM64. Installing 7zip in the Windows operating system is very simple and straightforward.

If you simply want to compress any single file to .gzip format, you need to simply select that file and add it to the 7zip archive. In the GUI, you can select the Archive format as "gzip" and that's it!

gzip in 7zip

Method 2: Using gzip from Chocolatey (Batch Processing is the Main Benefit of This)

There are several tools that we can use to compress files and folders on our computers. However, Linux-based operating systems come with a lot of tools and there are a lot of CLI (Command Line Interface) type tools that we can also use to compress multiple files altogether in a batch.

If you use Linux based operating system, then you might have also used GZip. Gzip is a file format and software application that compresses and decompresses files. It also makes files smaller and allows for faster network transfers. However, there are not any official installers of GZip for the Windows operating system.

But, we can install "gzip" directly on Windows and work like we're in a Linux OS. I prefer to download GZip via Chocolatey, a very good package manager for the Windows operating system.

Chocolatey is a machine-level, command-line package manager and installer for software on Microsoft Windows. It uses the NuGet packaging infrastructure and Windows PowerShell to simplify the process of downloading and installing software.

If you are using Chocolatey for the first time, then you need to install it first. All of the methods are explained in detail on their official website: https://chocolatey.org/install.

Chocolatey Installation

Open your Terminal and run the command for installing "gzip".

choco install gzip

Write "Yes" when it asks for your permission. After a few seconds, you should be ready to use it.

Let's say I want to batch-compress a lot of files into ".gzip". I can open my terminal and go to that directory (where my raw files are that I want to compress using gzip) using the cd path/to/where/I/have/the/files command.

Or, I can simply open my terminal directly using the "Open In Terminal" context menu in that specific directory where I have the files that I want to compress using gzip. Then I can simply use the following command.

gzip * -r

This will iterate through every folder and subfolder in that specific location and compress all of the files to .gzip recursively (the -r flag). Keep in mind that it will replace all your files to .gzip in that directory.

But, if you also want to keep the original files side by side during the batch compression process, you can use the command below.

gzip * -r -k

Here, the -k flag indicates the --keep option to keep the original files.

If you want to use all your CPU cores in parallel, then follow the command below.

parallel gzip ::: *

You have to add the necessary suffixes to suit your needs obviously in this process.

That's it!

Conclusion

I hope you have gained some valuable insights from this article.

If you have enjoyed the procedures step-by-step, then don't forget to let me know on Twitter/X or LinkedIn. I would appreciate it if you could endorse me for some relevant skillsets of mine on LinkedIn.

You can follow me on GitHub as well if you are interested in open source. Make sure to check my website (https://fahimbinamin.com/) as well.

Thank you so much!

The platform contains a ton of datasets and notebooks that you can use to learn and practice your data science and machine learning skills. They even have competitions you can participate in.

Kaggle offers a 100% free platform for all users – but there are some restrictions depending on the resources you're using.

For example, you can use their CPU system for an unlimited amount of time. But there are strict limitations on GPU and TPU usage. You can use their GPU for 30 hours and TPU for 20 hours in a week. It gets resets each week, and then you get a fresh 30 hours GPU usage and 20 hours TPU usage at the start of the new week.

Kaggle Website

Alongside Kaggle, there are another popular platforms for machine learning engineers and data scientists – like Google Colaboratory, or Google Colab for short.

In Google Colab, you can also use their CPU and GPU, but the free versions have more limitations than the free Kaggle account. In Google Colab, you can not get any GPU computational power until they allocate it from their free units. You don't know how many hours you can use, and you don't even know if you have any chance to get units over the next few days.

In order to get all the features, you need to subscribe to their pro plans which are quite expensive.

But sometimes you still may want to use Colab, in most cases for short tasks. In Colab, you can directly connect your Google Drive and use your datasets from there. You can also store your output from the notebook to Google Drive if you want.

When you're working on a project, though, sometimes you'll want to use datasets from Kaggle in Google Colab. So you'll need to download the dataset from Kaggle and upload that to Colab's temporary storage or your Google Drive.

You can probably guess that this is a very time-consuming process.

But there is a way that you can directly download a Kaggle dataset using an API call in the Google Colab's notebook! In this article, I am going to show you how you can do that.

Table of Contents

I've broken this tutorial down into separate parts for better understanding. You can get a clear overview of the entire article here:

• Types of Kaggle datasets
• Prerequisites
• Setup Google Colab for using Kaggle API
• Install Kaggle library
• Mount Google Drive to Colab
• Add the Kaggle API Token to Colab Notebook
• Download Kaggle dataset
• Download Kaggle Competition dataset
• Download Specifc file from Kaggle Competition dataset
• Conclusion

Video

If you would like to watch all of the steps from a video, you're in luck – I made this video just for you:

Types of Kaggle Datasets

Normally Kaggle provides two types of datasets: typical datasets that anyone can upload, and competition datasets. In the competition datasets, the competition organizers typically add/upload the datasets.

Even though you can download a Kaggle dataset easily, you can't download a competition dataset if you don't participate in that competition. But some competitions remain open, and you can access their datasets via "Late Submission". So just make sure to check.

Prerequisites

To go through this tutorial and get the most ouf of it, you'll need a Kaggle account, and that is completely free. Simply head over to the official website of Kaggle, and create an account if you don't have one already.

You'll also need Kaggle's API. Head over to the settings of your Kaggle account. Go to the API section, and click "Create New Token". Keep in mind that Kaggle does not allow you to keep multiple tokens. You can use only one active token for your Kaggle account.

Kaggle API Token

This will give you a kaggle.json file. Keep it safe, as you'll need to use it later.

You also need a Google account if you want to use Google Colab. You may already have one, but if you don't, go ahead and create a new account in Google.

Now, you can store your Kaggle JSON in your Google drive. I prefer to create a new folder and keep my JSON file there so that I can call that in Colab whenever I want.

How to Setup Google Colab to Use the Kaggle API

You can simply open any Colab notebook where you want to use the Kaggle API to download the dataset.

Google Colab

Install the Kaggle library

You need to install the Kaggle Python library before you start working with Kaggle. You can simply install it in the colab notebook using the command ! pip install kaggle.

Install Kaggle library in colab

Mount Google Drive to Colab

Now you need to mount your Google Drive to the Colab notebook, since you've uploaded your kaggle.json file inside your Google drive.

You can simply do that by using the two lines of code given below:

from google.colab import drive
drive.mount('/content/drive')

Make sure to give it permission to access your Google Drive:

Give access to Google Drive

Mount Google Drive

If you refresh the mounted folder icon, you will see your Google Drive and all of the content in the notebook.

Find MyDrive in Notebook

Add the Kaggle API Token to the Colab Notebook

Now you need to add the Kaggle API token to the notebook. But before that, you can simply create a temporary directory for Kaggle at the temporary instance location on the Colab drive by using the command ! mkdir ~/.kaggle.

Now you need to copy your uploaded JSON file to that temporary Kaggle directory. You need the URL where you uploaded your JSON file earlier. You can grab that link directly from the drive folder in the notebook.

Copy JSON file location

You can get the path directly like this.

Then you can use the copy command like below:

! cp kaggle_json_path ~/.kaggle/

For example, my JSON file is located at "/content/drive/MyDrive/Kaggle_API/kaggle.json", so my command would be:

! cp /content/drive/MyDrive/Kaggle_API/kaggle.json ~/.kaggle/

Copy JSON file

Now you need to change the file permissions to read/write to the owner only for safety.

You can use the command below to achive that:

! chmod 600 ~/.kaggle/kaggle.json

Change file permission of kaggle.json file

How to Download the Kaggle Dataset

For downloading a typical Kaggle dataset, you have to find the dataset on Kaggle first.

Let's say I want to download the following dataset from Kaggle:

Sample dataset

Check the complete URL of the dataset, which in this case is:

https://www.kaggle.com/datasets/mdfahimbinamin/fastsurfer-processed-3d-brain-mri-from-adni

We need the "account_name_of_the_dataset_owner/dataset_path" string. From the URL, the account name of the dataset owner is mdfahimbinamin. The dataset path is fastsurfer-processed-3d-brain-mri-from-adni.

So to download this exact dataset from Kaggle to your Google colab, your command would be:

! kaggle datasets download mdfahimbinamin/fastsurfer-processed-3d-brain-mri-from-adni

Downloading the Kaggle dataset to your Colab notebook

The entire process happens on Google's Cloud PC. So the downloading speed should be quite fast.

By default, the datasets come as .zip file. So if you need to unzip that, you can simply use the command below:

! unzip dataset-path.zip

For example, my dataset name/path was "fastsurfer-processed-3d-brain-mri-from-adni". So I will use the following command:

! unzip fastsurfer-processed-3d-brain-mri-from-adni.zip

Unzip Kaggle Dataset

That's it! 😊

How to Download a Kaggle Competition Dataset

Before downloading a Competition dataset, you need to make sure that either you have joined that competition or that you've selected "Late Submission" using the same Kaggle account that you're using for Kaggle API token.

Suppose I'm joining the ConnectX competition on Kaggle.

Connect X competition

I need to click "Join Competition" to get access to their dataset.

But if I want to download a dataset from a past competition, I need to join their "Late Submission" to gain their dataset.

Join a past competition

After clicking on "Late Submission", I need to grab the URL. This time, I'm using the Binary Classification with a Bank Churn Dataset. The complete URL is: https://www.kaggle.com/competitions/playground-series-s4e1/overview

From the URL, I can see that the dataset is located at "playground-series-s4e1". So I will use the following command to download the dataset to my Google Colab notebook:

! kaggle competitions download playground-series-s4e1

Download dataset

That's it! 😊

How to Download a Specific File from a Kaggle Competition Dataset

Let's say, I want to download a specific file from a Kaggle competition dataset. I can also do that.

dataset

In the dataset used above, you can see that there are 3 files. Let's say I want to download the test.csv file only.

To do this, the command would be strucutred like this: ! kaggle competitions download dataset-path -f file_name_with_extension.

So my command would be:

! kaggle competitions download playground-series-s4e1 -f test.csv

Download specific file

That's it! 😊

Conclusion

I hope you have gained some valuable insights from the article.

If you have enjoyed the procedures step-by-step, then don't forget to let me know on Twitter/X or LinkedIn.

You can follow me on GitHub as well if you are interested in open source. Make sure to check my website (https://fahimbinamin.com/) as well!

If you like to watch programming and technology-related videos, then you can check my YouTube channel, too. You can also check my other writings on Dev.to.

All the best for your programming and development journey. 😊

You can do it! Don't give up, never! ❤️

In this article, I will explain the significance of commenting your code, best practices to follow, and examples showcasing effective commenting in JavaScript.

Why Comments are Important in JavaScript

They enhance code readability:

Comments provide clarity to code, making it easier for developers to understand the code's purpose and functionality. Comments act as a guide, especially when you need to revisit older code after a period of time.

Consider this un-commented code:

function calculateTotal(price, quantity) {
    return price * quantity;
}

let totalPrice = calculateTotal(25, 5);
console.log(totalPrice); // Output: 125

It is quite difficult for us to understand what the code does, right? Now, let's add comments for clarity:

// Calculates the total cost by multiplying the price per item with the quantity
function calculateTotal(price, quantity) {
    return price * quantity;
}

// Example usage: Calculates the total price for 5 items at $25 each by multiplying the price per item ($25) with the quantity (5), and stores the result in the totalPrice variable.
let totalPrice = calculateTotal(25, 5);
console.log(totalPrice); // Output: 125

With comments, it is quite understandable what each part of the code does, and it also enhances its readability.

They facilitate collaboration:

In a team environment, comments aid collaboration by allowing developers to comprehend each other's code, making it easier to work together on projects.

Imagine working in a team where different developers handle various parts of a project. Clear comments aid in understanding each other's code. Here's an example:

// Validates the format of the provided email address using a regular expression, which checks for the presence of "@" symbol, domain name, and top-level domain (TLD) in the email
function validateEmail(email) {
    // Regular expression pattern to match the standard email format
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

In a collaborative setting, another developer can quickly comprehend the purpose of the validateEmail function due to the comment, enabling smoother teamwork. This would've been very difficult without the comments indicating what the code block does.

They make maintenance and debugging easier:

Well-commented code simplifies maintenance and debugging. Comments can highlight potential issues, outline the reasoning behind specific solutions, and aid in locating bugs.

Comments assist in debugging and maintaining code. Consider the following commented code:

// Finds the maximum number between num1 and num2 using a ternary operator for comparison and returns the larger number
function findMax(num1, num2) {
    /* Using ternary operator to compare num1 and num2
       and return the larger number */
    return (num1 > num2) ? num1 : num2;
}

If a bug arises or modifications are needed, the comment clarifies the logic used, aiding in swift debugging or updates.

Best Practices for Commenting in JavaScript

Use descriptive comments:

Explain the purpose of functions, variables, or complex logic using descriptive comments. This helps other developers, including your future self, understand the code's intention.

// Calculates the area of a circle using the provided radius by multiplying the square of the radius by the mathematical constant π (pi)
function calculateCircleArea(radius) {
    return Math.PI * radius * radius;
}

Descriptive comments like this explain the purpose of functions or operations, aiding in understanding the code's intention.

Avoid over-commenting:

While comments are beneficial, excessive commenting can clutter the code. Aim for a balance where comments add value without stating the obvious.

// Variable to store user data
let userData = fetchUserData(); // Fetch user data from the server

In this case, the comment merely reiterates what the code already expresses clearly. Avoiding over-commenting maintains code clarity.

Update comments regularly:

As code evolves, ensure comments remain accurate and aligned with the code changes. Outdated comments can lead to confusion.

// Function to calculate the area of a rectangle
function calculateRectangleArea(length, width) {
    return length * width;
    // Updated comment: Area calculated by multiplying length and width
}

Ensuring that comments align with the current functionality or logic of the code is vital for accurate documentation.

Comment complex sections:

When dealing with intricate algorithms or unconventional solutions, detailed comments explaining the logic can be immensely helpful.

// Performs a complex calculation on the provided data, involving multiple steps including data preprocessing, calculation based on preprocessed data, and returning the final result
function performComplexCalculation(data) {
    /* 
        Complex logic involving multiple steps:
        - Step 1: Data preprocessing
        - Step 2: Calculation based on preprocessed data
        - Step 3: Final result
    */
    // ... complex calculation logic
}

For intricate algorithms or multi-step processes, detailed comments explaining each step can immensely aid in understanding.

Types of Comments in JavaScript

Single-line comments:

In JavaScript, single-line comments start with //. They're suitable for brief explanations or annotating specific lines. Keep in mind that the two forward slashes don't have any spaces between them.

Example:

// This function calculates the square of a number
function square(number) {
    return number * number;
}

Multi-line comments:

Multi-line comments begin with /* and end with /. They are useful for commenting out blocks of code or providing longer explanations. Keep in mind that the forward slash and the asterisk (*) don't have any spaces between them.

Example:

/*
    This block of code finds the maximum of two numbers
    and returns the larger number.
*/
function findMax(num1, num2) {
    // Logic to find the maximum
    return (num1 > num2) ? num1 : num2;
}

JSDoc comments:

JSDoc is a convention for adding comments to JavaScript code that enables the automatic generation of documentation. It uses a specific syntax to describe functions, parameters, return values, and so on.

Example:

/**
 * Calculates the area of a rectangle
 * @param {number} length - The length of the rectangle
 * @param {number} width - The width of the rectangle
 * @returns {number} - The area of the rectangle
 */
function calculateArea(length, width) {
    return length * width;
}

Practice Commenting Your Code 📝✍️

Learning without practicing is an incomplete process. So here's a learning challenge from the freeCodeCamp Certification Course where you will learn how comments work in JavaScript, and how you can use them in your code.

In this challenge, you will try to understand how single-line comments and multiline comments work.

I've included the solution next in case you can't solve the challenge yourself.

If you'd like to watch a video on this topic as well, you can find it here:

The Solution to the Challenge

Make sure that you have tried to solve this challenge on your own before checking my solution.

Alright, if you're ready...here it is:

// Fahim

/*
My
Name
Is
Fahim
*/

The first one is the single-line comment, and the second one is the multi-line comment.

Conclusion

Commenting on JavaScript code is an essential practice in software development. It improves code comprehension, aids collaboration, and facilitates maintenance and debugging.

By following best practices and using various comment types, we can create codebases that are easier to understand, maintain, and build upon.

I hope you have gained some valuable insights from the article.

If you have enjoyed the procedures step-by-step, then don't forget to let me know on Twitter/X or LinkedIn.

You can follow me on GitHub as well if you are interested in open source. Make sure to check my website (https://fahimbinamin.com/) as well!

If you like to watch programming and technology-related videos, then you can check my YouTube channel, too. You can also check my other writings on Dev.to.

All the best for your programming and development journey. 😊

You can do it! Don't give up, never! ❤️

But if you use the typical sudo apt install nodejs command, it may install a very old version of Node which can be troublesome for you.

So you'll want to install a specific version, which requires a different command. This will install the LTS (Long-Term Support) version of Node which is useful for devs because it has a longer period for support.

Today, I am going to show you how you can install the latest LTS version of Node on your Ubuntu operating system.

This processes will work on any kind of Debian-based Linux operating system (Ubuntu, Mint, Zorin, Debian, Elementary OS, and so on). It'll work whether you are using that as your main operating system, secondary operating system on dual boot, WSL on Windows, or using in a virtual machine (VMware Workstation, VirtualBox, and so on).

Video Tutorial

I have also created a complete video to show you the process step-by-step. You can watch it here:

At the time of writing this article, the latest LTS version for Node is 18.18.2.

Node download page showing current LTS version

When you install Node following the instructions in this article, it will install the latest LTS version of Nodejs automatically. So you'll be safe without any hassle if you simply follow this article and the accompanying video.

Update Your Operating System

First, you'll want to ensure that you have installed all the updates beforehand. I like to work in the terminal mostly, so I'll install the updates using the terminal directly.

For updating to the latest versions of all the relevant packages, use sudo apt update in the terminal. Use your password when it asks for that.

Updating all relevant packages

Now use sudo apt upgrade -y to upgrade all the upgradable packages.

Upgrading all relevant packages

Install CURL

We're using the Node Version Manager (NVM) here to install Node. There are various advantages when we install Node and npm using the NVM as it also allows us to manage multiple versions of Node.js on our system altogether.

First, you'll need to install curl if it's not installed on your system already. You can install curl by using the command below:

sudo apt install curl -y

Installing CURL

How to Install Node.js

Now you'll need to follow these steps in order to ensure that you've installed Node.js successfully on your system.

Install Node Version Manager (NVM)

Install the Node Version Manager (NVM) by using the following command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

Installing the Node Version Manager (NVM)

When you run this specific command, the curl downloads the NVM installation script from that specific URL. Afterward, bash executes the same script for installing NVM.

Activate NVM

Activate the NVM using the command below:

source ~/.bashrc

Activating the Node Version Manager (NVM)

Install the latest LTS version of Node

Install the latest Long Term Support version of Node by using the command below:

nvm install --lts

Command for installing the latest LTS version of Node.js

It installs the latest version of the LTS release of Node by default.

Make the default LTS version as NVM

We have installed the latest LTS version of Node, but we also need to set the default version of NVM so that it gets used by default whenever we need it. You can use the command below to do that. Make sure to change the version to the exact LTS version you have installed on your system just now.

nvm alias default 18.18.2

Selecting the appropriate Node version as the default version

If your LTS version is something like 24.1.2 then the command would be like below:

nvm alias default 24.1.2

Confirm that Node was installed

Use the command below to check whether the default version is the exact version you just installed:

node -v npm -v

Showing the current version of Node installed

How to Set Up the Node.js Environment

After installing Node and NPM, you need to set up the Node environment by creating a new Node project.

Use the command below to create a new directory/folder where you want to test a simple "Hello World" type Node project.

mkdir my-node-project

Creating a new directory/folder to test a simple "Hello World" program on Node

Navigate to the my-node-project directory by using the command below:

cd my-node-project

Changing the directory to enter into that newly created directory/folder

Initialize the new Node project like this:

npm init -y

This command will create a "package.json" file containing your project's metadata and dependencies. Here is the JSON output:

Initializing npm in the folder

The JSON output is below:

{
  "name": "my-node-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now run the setup with the simple command. For this, I am going to create a new file called app.js using the nano text editor in the terminal.

sudo nano app.js

Opening app.js file in nano

Once the text editor opens, type the below code:

console.log("Hello, Node.js from Ubuntu!");

Writing a simple console.log code in the app.js file using nano

Use Ctrl+ O to save the file. Use Enter to save the file as app.js:

Save the app.js file with the newly added line of code

Use Ctrl + X to return to the bash terminal again.

Returning to the terminal again

Now, it is time to check the output and see whether it's working or not.

Use the command below:

node app.js

Running the app.js file using Node

It is working!

We have successfully installed the latest LTS release of Node on our Ubuntu/Debian-based Linux operating system.

Cheers! 🥂

Conclusion

Thank you so much for reading the entire article till now.

If you have enjoyed the procedures step-by-step, then don't forget to let me know on Twitter/X or LinkedIn.

You can follow me on GitHub as well if you are interested in open source. Make sure to check my website (https://fahimbinamin.com/) as well!

If you like to watch programming and technology-related videos, then you can check my YouTube channel, too.

All the best for your programming and development journey. 😊

You can do it! Don't give up, never! ❤️

An example of this can be seen when you want to install the latest version of Java on Ubuntu and make it your default Java version. Yes, I know that you're wondering about other Linux distributions like Fedora or Arch, and so on, but each distribution has some specific advantages and disadvantages over others.

Ubuntu is one of the most commonly used Linux distributions, and most people who would like to try out the Linux operating system for the first time usually start their Linux journey with Ubuntu.

However, if you're a Java developer who is migrating from a Windows machine to an Ubuntu based Linux machine, you might find it tedious to configure the latest version of Java on Ubuntu as opposed to Windows where you simply have to download and install the latest version, and add the directory to the path variable.

In this article, I will cover everything you need to know and do to configure your Ubuntu operating system for Java development. I will explain each of the processes with appropriate screenshots and test runs.

I have also created a full-length video showing all of the procedures. You can find the video at the end of this article. By the way, if you're wondering, "Hey Fahim! Who told you that installing Java on Windows is easier?", then you should probably check out my article on how to install Java on Windows.

How to Check Java Version on Ubuntu

Before proceeding further, you might want to check whether you already have Java installed on your Ubuntu.

You can do this using the terminal. If it returns any version, then that means a version of Java is already installed on your machine. But if it returns something different, then we can assume that you do not have Java installed or it is not configured correctly.

Simply open your terminal. You can also use the shortcut keys for opening the terminal on Ubuntu: Ctrl + Alt + T

Open the terminal

Then run the command: java --version

java --version

If it says "java not found" (like you see in the image above), then you can be sure that your system does not have Java installed.

But if it returns any version of Java or JDK (Java Development Kit), then Java is already installed on your machine. Based on the installed version and your need for the other versions, you can remove the older one and install the newer version or you can keep both of them and make one version the default version.

How to Install Java On Ubuntu

There are many ways to install Java on Ubuntu. You can use the CLI (Command Line Interface) where you will install via the terminal, or you can download the package and install it using GUI (Graphical User Interface).

In this article, I am going to show you how you can download the latest Java from Oracle and install it on your Ubuntu machine. But that, you have to choose between installing the JRE (Java Runtime Environment) or the JDK (Java Development Kit) version for Java.

If you don't understand the differences between them or which one you need for your tasks, then here is a comparison for you:

JDK vs JRE in Java

Here are some differences between JDK and JRE in Java:

If you are a developer, then you should install the JDK instead of the JRE. On the other hand, if you are just a normal user who will not program or write code at all, you can install the JRE.

In this article, we'll be installing the JDK version because that covers everything. If you already have a JDK then you do not need to install JRE separately.

How to Update Ubuntu

Before we install Java, we need to ensure that we've installed all the necessary updates for the Ubuntu operating system.

To update the your Ubuntu OS, simply use the sudo apt update command . Then provide your password and hit the enter key.

Update the system

After updating, if you get a message that says something needs to be upgraded then you can upgrade them using sudo apt upgrade.

23 packages can be upgraded on my system right now. In your case, it might be different.

Make sure to press "y" or "Y" while upgrading.

Upgrading the system

The upgrade might take some time depending on the file sizes that it needs to download and your internet speed.

Make sure that everything has been upgraded without creating any errors.

How to Download Oracle JDK

You can download the official JDK from Oracle website.

Once the landing page loads, click on Products on the top navigation bar:

Oracle website navigation options

Then click Java under the Hardware and Software section.

Click Download Java.

Here, you will get all the latest JDK files. For development purposes, it is recommended to use the LTS (Long Term Support) versions as they receive stable version updates for an extended period.

I am going to install the JDK 20 version (which is the latest version as of the time of writing this article). It is not the LTS version of course, but if you follow through with this article, then you'll be able to install any version you want swiftly!

In your case, I would recommend installing the latest LTS version of JDK. But if you want continuous access to latest JDK features (these features might not be stable), then you can download the latest JDK.

To download, select Linux in the operating system section and download the file for x64 Debian Package. Clicking on the download link will start the download for the Debian package file.

Depending on your internet speed, it can take a shorter or longer amount of time. As I am writing this article at night and my internet speed remains slow at night, it is taking longer to download the package file in my system.

How to Install the JDK

I have downloaded the package file using the Mozilla Firefox browser and by default, it downloads files in the Downloads directory.

Simply go to the directory where you downloaded the file and open the terminal there.

Usually, if you go into any directory and right-click, you will see a context menu that says Open in Terminal. By using that, you can open your terminal in that directory.

Alternatively, if you open the terminal elsewhere, you can use the cd command to go into any specific directory.

For example, I have opened my terminal elsewhere. I am using the cd command to go into my Downloads directory as can be seen in the image below:

You can use the ls command to see all the files and folders available on a particular directory:

After downloading the file, you will see that the file name also contains the version name which is necessary, but if you think that would be troublesome to type later on, you can shorten the filename as well.

For this article, we'll use the default filename.

Grab the full directory path where the JDK package file is downloaded. You can use the shortcut Ctrl + L to display the whole directory path.

For me, the current directory path where my JDK Debian file is located is /home/fahim/Downloads/. Make sure to copy the address.

Next, open the terminal. You can do that using the shortcut Ctrl + Alt + T.

I like to install the JDK using the terminal, but if you can also install it using the GUI (Graphical User Interface). But I recommend using the terminal as that would also help you debug any issues you face during installation.

Use the sudo apt install /home/fahim/Downloads/jdk_filename.deb command to start the installation. For me, the entire command is sudo apt install /home/fahim/Downloads/jdk-20_linux-x64_bin.deb.

Hit the enter key:

Input your password and type "y" when it asks for your permission to install the package.

Make sure that you have successfully installed the package before proceeding to the next step.

You might get N: Download is performed unsandboxed as root as file '/home/fahim/Downloads/jdk-20_linux-x64_bin.deb' couldn't be accessed by user '_apt'. - pkgAcquire::Run (13: Permission denied). But don't worry about that because we performed the installation "unsandboxed" intentionally.

You will not face any problems if you use the Debian package downloaded from the right source.

You can clear the terminal using the command clear.

How to Configure Java in Ubuntu

We need to make sure that if it updates, it does not download any downgraded version of Java.

You can do that using the sudo update-alternatives --install /usr/bin/java java /usr/lib/jvm/jdk-version/bin/java 1 command.

Since I'm using the "JDK - 20" version, my command would be sudo update-alternatives --install /usr/bin/java java /usr/lib/jvm/jdk-20/bin/java 1.

Make sure to change the jdk-version to match your installed JDK version.

We need to do the same thing for the javac (Java Compiler) version as well. The command would be sudo update-alternatives --install /usr/bin/javac javac /usr/lib/jvm/jdk-version/bin/javac 1.

My command would look like this: sudo update-alternatives --install /usr/bin/javac javac /usr/lib/jvm/jdk-20/bin/javac 1.

Remember to change the jdk-version to match your installed JDK version.

We'll also do the same for jar. JAR is essential for running Java based applications directly in the system.

The command would be sudo update-alternatives --install /usr/bin/jar jar /usr/lib/jvm/jdk-version/bin/jar 1.

My command would look like this: sudo update-alternatives --install /usr/bin/jar jar /usr/lib/jvm/jdk-20/bin/jar 1.

Then change the jdk-version to match your installed JDK version.

This is all for most of the cases. You are good to go!

But if you face any kind of problems, then check the complete video provided below. In that video, I talked about a lot of possible issues and how to solve them. If you have multiple Java versions installed on your system, then you need to make one of them the default. This is also covered in the video.

Also, if you want to make more modifications, then the video is going to help you with that as well. But for most of the users, this article is everything that you need to install Java on your Ubuntu operating system.

Video Walkthrough

Check the complete video for troubleshooting any more issues or if you want to make more modifications.

Conclusion

I hope you have enjoyed this article and are able to install Java on your Ubuntu operating system.

If you have any questions then please let me know by reaching out on Twitter or LinkedIn.

You can also follow me on:
🎁GitHub: FahimFBA
🎁YouTube: @FahimAmin

If you are interested then you can also check my website: https://fahimbinamin.com/

In this article, I will be showing two methods by which you can concatenate strings in JavaScript. I will also make sure to clarify when you should use each method.

Also, I will provide you with a good exercise from freeCodeCamp to practice this concept. If you are interested in watching a step-by-step video explanation, then you are also in the right place!

I recently tweeted about this, and and as I promised, I have created a video and now I am writing this article for you. Check out the Twitter thread also:

Make sure to follow me on Twitter/X to get the latest updates about my new videos or articles.

Video Walkthrough:

Now is the moment you may have been waiting for: yes, it is a video, and I have specially prepared it just for you.

Let me know if you like the video presentation in the video's comment section. Also, make sure to subscribe to my YouTube channel.

Working with Strings

Before talking about string concatenation, let us talk about some basic stuff.

Let's say, I want to print my full name but I do not want to input my full name all at once. Check the example below:

myName = "Md. Fahim ";
myName2 = "Bin Amin";
console.log(myName); // Md. Fahim 
console.log(myName2); // Bin Amin

My full name is "Md. Fahim Bin Amin". I have broken it down into two parts or you can say in two halves. Therefore, myName contains my first name, "Md. Fahim " with a space at the end so that I can have a leading space before printing my last name. But you can add this space as a leading space in the second string also.

myName2 contains my last name, "Bin Amin". Then I printed two variables' values. Therefore, I got two separate lines containing my full name. But it does not look good to print a person's name in two different lines, right?

Let's solve this issue now. There are many ways to do that, but we are going to use String Concatenation methods. We are going to learn two different approaches to using string concatenation along with the suitable usage for each of them.

String Concatenation Method 1 – Using the + Operator

This is the simplest method: it uses the + operator. Let me give you an example first, and I promise that it will be crystal clear for you once we go through it.

Let's say I am creating a new variable named fullName for storing my full name. But as earlier, instead of using my full name in the double quotations, I will use separate strings.

fullName = "Md. Fahim " + "Bin Amin";
console.log(fullName); // Md. Fahim Bin Amin

Here, I have provided two separate strings in a single string variable, but I used the plus ( + ) operator to append the second string at the end of the first string. Here "Md. Fahim " is the first string, and "Bin Amin" is the second string.

Since I want a space between the two separate strings, I have added a trailing space in the first string. But you can also add a leading space in the second string instead of adding a trailing space in the first string, as I mentioned above.

It is important to note that the order of the strings always matters in String Concatenation.

For example, if I change the order (give the second string before the first string) in the fullName variable, then the whole string also gets a different orientation and I will not get the result I want (it prints my name wrong!).

fullName =  "Bin Amin" + "Md. Fahim ";
console.log(fullName); // Bin AminMd. Fahim

It always considers the string that appears first as the first string and appends the next string at the end of that first string. It keeps going on each time like this – it doesn't matter how many individual strings you want to append in a single string variable.

fullName =  "Bin Amin " + "Md. Fahim" + " My name is";
console.log(fullName); // Bin Amin Md. Fahim My name is

Ah! It looks awful. Let me correct the orientation now:

fullName = "My name is " + "Md. Fahim " + "Bin Amin";
console.log(fullName); // My name is Md. Fahim Bin Amin

Now it is better.

String Concatenation Method 2 – Using the += Operator

This method is very handy. When using it, we append separate strings in separate lines. Let me give you an example again.

I will use a variable named fullName like earlier, but instead of using the + operator to concatenate strings like earlier, I will use +=:

fullName = "Md. Fahim ";
fullName += "Bin Amin";
console.log(fullName); // Md. Fahim Bin Amin

In the first line, I have stored my first name in the fullName variable. In the second line, I have stored my last name in that same variable but using the += operator (which is actually the combination for fullName = fullName + "Bin Amin"). It appends the second string at the end of the first string like earlier.

This lets me print my full name on a single line.

+= is a combination, so direct usage of the generic way also works the same as below:

fullName = "Md. Fahim ";
fullName = fullName + "Bin Amin";
console.log(fullName); // Md. Fahim Bin Amin

But you can pretty much assume that using += will be the easier and more compact way. So I recommend you to use the += operator directly.

What's the Difference?

I know you may be getting confused and thinking that if these methods give the exact same result, why you should learn both of them? What are the specific use cases for each one?

Hold your horses! I am going to answer your question right now.

Follow the code below where I am using the 1st method:

fullParagraph = "This is the first line of the paragraph. " + "This is the second line of the paragraph. " + "This is the third line of the paragraph. ";
console.log(fullParagraph); // This is the first line of the paragraph. This is the second line of the paragraph. This is the third line of the paragraph.

Here I have taken a variable named fullParagraph and I have stored three individual strings/sentences in it. The output is accurate, but you see that based on the number of adding new strings/sentences, the one line for storing the data in that specific variable is getting longer.

The more strings or different sentences you add for string concatenation using the first method, the longer a single statement becomes. As such, it becomes very boring and hard to inspect later on.

Here comes the second method to the rescue! 😉

Follow the code below where I am using the 2nd method:

fullParagraph = "This is the first line of the paragraph. ";
fullParagraph += "This is the second line of the paragraph. ";
fullParagraph += "This is the third line of the paragraph. ";
console.log(fullParagraph); // This is the first line of the paragraph. This is the second line of the paragraph. This is the third line of the paragraph.

Here I have taken a variable named fullParagraph and stored individual strings in individual lines. As usual, I can easily append newer strings in new lines using the += operator.

Since I'm taking a new line for appending new strings each time, it doesn't create any hassle for me. Also, each individual statement is short and it is very easy to read or inspect later on. The code also looks pretty clean.

Keep in mind that the order of strings of course matters in each method. That means they always follow the orientation of the order of the strings during appending (String Concatenation).

When to Use Each Method

I guess you already know this answer. But, still, for the sake of this article, let me clarify it again.

If you are using any string concatenation where the individual strings are comparatively smaller or you know they'll remain small in size, then you can directly go for the first method.

But if you know that you might need to append longer strings later on, then you should use the second method.

That's it!

Practice String Concatenation

You can practice this concept using this freeCodeCamp exercise.

Conclusion

I hope you have enjoyed this short article. It takes a lot of time and effort to write an in-depth article and create videos for you. So let me know whether these are helping you or not.

Let's connect on LinkedIn. Please make sure to endorse me on the relevant skillset. Also getting recommendations from you always makes me happy! 😊

If you have any questions then please let me know by reaching out on Twitter or LinkedIn.

You can also follow me on:
🎁GitHub: FahimFBA
🎁YouTube: @FahimAmin

If you are interested then you can also check my website: https://fahimbinamin.com/

Cheers! 🍻