DEV Community: Trust Jamin

How to handle large file uploads

Trust Jamin — Thu, 11 Dec 2025 11:09:52 +0000

In this article, we’ll go over how you can handle large files in your Node.js applications using various large file uploading techniques. These techniques can also be applied to other programming languages and frameworks as needed.

Possible issues when uploading a large file

Uploading a large file in an application can often pose several expected and unintended challenges, since you cannot predict the location, device type, or network conditions used to upload a file.

Upload speed, bandwidth, and latency

The larger a file, the more bandwidth and time it takes to upload. While a small file can be an easy pass in an application, uploading a large file can be a different story and can be a pain point for your users.

A single large file upload can consume significant bandwidth.

Typically, upload speed problems occur when you transfer large amounts of data in a single batch to your server.

In this scenario, regardless of the end user’s location, all files are directed to a single destination via the same route, creating a traffic jam similar to that in Manhattan during rush hour.

When your users upload multiple large files simultaneously, it can cause your servers to become paralyzed: the speed decreases and the server response time increases, especially if your server is not configured to handle large file uploads.

Upload failures and timeouts

When uploading a single large file, upload failures and timeouts may occur for various reasons:

If there is a network interruption during the upload process
If the file isn’t sent within the allotted timeout period
If the server takes too long to respond to a request due to overload

Whatever the reason may be, upload failures are likely to occur if you do not handle large files properly.

Mobile & edge case constraint

Globally, a majority of users access the internet via mobile devices, which often present unique challenges and edge cases to consider when enabling large-file uploads.

For one, mobile devices generally have slower network speeds and stricter data limits compared to wired connections, leading to issues such as timeouts and network interruptions.

What about a situation where a user wants to switch between apps while uploading is happening, but the browser suspends background activities to conserve battery? Or the user’s device may be in battery-saving mode, in which the mobile OS aggressively shuts down non-essential tasks, interrupting the upload process.?

It is also possible that the device has limited storage or the OS has specific limitations that may cause issues with uploading large files. This could result in the device crashing or stalling uploads.

Server limitations

Handling large file uploads is not just about configuring servers; it also involves determining the maximum file size your server can handle.

Factors such as your server’s storage, memory, and the number of concurrent tasks it can handle simultaneously can be issues.

Yes, your server might be able to handle a single large file upload by default, but what happens when 1,000 users upload large files simultaneously, and your server needs to process them all?

Proven techniques for handling large file uploads

How do you handle large files and avoid problems related to large file uploads while ensuring your users have a good experience? The following techniques are some of the best practices for handling file uploads.

1. Chunk file uploads: Split large files into manageable parts

Chunking involves breaking a large file into smaller parts (chunks) and uploading them individually. This method makes error management easier, as only the failed chunk needs to be re-uploaded. Additionally, chunking helps efficiently manage memory and bandwidth usage.

To implement chunking, programmatically split the large files into smaller chunks and upload them sequentially to your server. Next, set up a backend service to combine all the chunk files into the original file.

Once that is done, you can then return a response or the URL of the uploaded file to the frontend of your application, allowing users to access it.

For example, say you have an HTML form with an input that you would like to use for uploading large files (in this case, let’s consider a large file to be a file above 10 MB) with the following markup:

<form id="upload-form">
  <input type="file" id="file-upload">
  <button type="submit">Upload file</button>
</form>

Using JavaScript on the frontend, you can split the large file into smaller chunks and upload them individually using the code below:

document.getElementById('upload-form').addEventListener('submit', e => {
  e.preventDefault();
  uploadFile();
});

async function uploadFile() {
  const fileInput = document.getElementById('file-upload');
  const file = fileInput.files[0];

  if (!file) {
    alert('Please select a file to upload');
    return;
  }

  const chunkSize = 5 * 1024 * 1024; // 5MB chunks
  const totalChunks = Math.ceil(file.size / chunkSize);
  const fileId = generateFileId(); // Generate unique ID for this upload

  console.log(`Uploading file: ${file.name}, Size: ${file.size}, Chunks: ${totalChunks}`);

  try {
    // Upload all chunks
    for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
      const start = chunkIndex * chunkSize;
      const end = Math.min(start + chunkSize, file.size);
      const chunk = file.slice(start, end);

      await uploadChunk(chunk, chunkIndex, totalChunks, fileId, file.name);

      // Update progress
      const progress = ((chunkIndex + 1) / totalChunks) * 100;
      console.log(`Upload progress: ${progress.toFixed(2)}%`);
    }

    await mergeChunks(fileId, totalChunks, file.name);
    console.log('File upload completed successfully!');

  } catch (error) {
    console.error('Upload failed:', error);
  }
}

async function uploadChunk(chunk, chunkIndex, totalChunks, fileId, fileName) {
  const formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('chunkIndex', chunkIndex);
  formData.append('totalChunks', totalChunks);
  formData.append('fileId', fileId);
  formData.append('fileName', fileName);

  const response = await fetch('/upload-chunk', {
    method: 'POST',
    body: formData
  });

  if (!response.ok) {
    throw new Error(`Failed to upload chunk ${chunkIndex}`);
  }

  return response.json();
}

async function mergeChunks(fileId, totalChunks, fileName) {
  const response = await fetch('/merge-chunks', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      fileId,
      totalChunks,
      fileName
    })
  });

  if (!response.ok) {
    throw new Error('Failed to merge chunks');
  }

  return response.json();
}

function generateFileId() {
  return Date.now().toString(36) + Math.random().toString(36);
}

The code above splits a large file upload into smaller chunks (5 MB in size) and uploads them in bits to a server.

There are three important functions in the code: uploadFile, uploadChunk, and mergeChunks.

I’ll show you what each one does and how they work together.

Let’s start with the uploadFile function, which is the main function that calls the other functions.

This function performs multiple steps for splitting the file:

First, it gets the file from the form input.
Then it generates a fileId for the file and, using the chunkSize variable of 5 MB, calculates how many chunks the file can be split into.
Next, using the Blob.slice method, it splits the file into various chunks, loops through each chunk, and for each chunk, calls the uploadChunk function.
When the uploadChunk function finishes, it calls the mergeChunks function.

The uploadChunk function is quite straightforward; it creates a new FormData object and adds all the necessary information about the uploaded chunk to it.

This information includes values like chunk, chunkIndex, totalChunks, fileId, and fileName. It then sends a POST request using a Fetch API to the URL /upload-chunk to upload each chunk file to the server.

When each chunk file has been uploaded successfully, the mergeChunks function is called. This function uses the variables fileId, totalChunks, and fileName to send another request to the server at the URL merge-chunks, this time to merge all the uploaded chunk files and retrieve the complete original file.

An example of how you might implement this in a Node.js backend that uses Express.js and expects to receive large files in chunks would look like this:

import express from 'express';
import multer from 'multer';
import fs from 'fs';
import path from 'path';

const app = express();
const PORT = 3000;

app.use(express.json());
app.use(express.static('public'));

// Create directories for uploads and temporary chunks
const uploadsDir = './uploads';
const chunksDir = './chunks';

fs.mkdirSync(uploadsDir, { recursive: true });
fs.mkdirSync(chunksDir, { recursive: true });

// Configure multer for chunk uploads with field parsing
const upload = multer({
  storage: multer.diskStorage({
    destination: (req, file, cb) => {
      // Create a temporary directory first, we'll move the file later
      const tempDir = path.join(chunksDir, 'temp');
      fs.mkdirSync(tempDir, { recursive: true });

      cb(null, tempDir);
    },
    filename: (req, file, cb) => {
      // Use a temporary filename
      cb(null, `temp-${Date.now()}-${Math.random().toString(36)}`);
    },
  }),
});

// Endpoint to upload individual chunks
app.post('/upload-chunk', upload.single('chunk'), (req, res) => {
  const { fileId, chunkIndex, totalChunks } = req.body;

  // Validate required fields after multer processes the request
  if (!fileId) {
    // Clean up the temporary file
    if (req.file) {
      fs.unlinkSync(req.file.path);
    }
    return res.status(400).json({ error: 'fileId is required' });
  }

  if (chunkIndex === undefined) {
    // Clean up the temporary file
    if (req.file) {
      fs.unlinkSync(req.file.path);
    }
    return res.status(400).json({ error: 'chunkIndex is required' });
  }

  if (!req.file) {
    return res.status(400).json({ error: 'No chunk uploaded' });
  }

  // Create the proper directory and move the file
  const chunkDir = path.join(chunksDir, fileId);
  fs.mkdirSync(chunkDir, { recursive: true });

  const finalChunkPath = path.join(chunkDir, `chunk-${chunkIndex}`);

  // Move the file from temp location to final location
  fs.renameSync(req.file.path, finalChunkPath);

  console.log(
    `Received chunk ${chunkIndex} of ${totalChunks} for file ${fileId}`
  );

  res.json({
    message: `Chunk ${chunkIndex} uploaded successfully`,
    chunkIndex: parseInt(chunkIndex),
    fileId,
  });
});

// Endpoint to merge all chunks into the final file
app.post('/merge-chunks', async (req, res) => {
  const { fileId, totalChunks, fileName } = req.body;

  try {
    const chunkDir = path.join(chunksDir, fileId);
    const finalFilePath = path.join(uploadsDir, fileName);

    // Create write stream for the final file
    const writeStream = fs.createWriteStream(finalFilePath);

    // Read and write chunks in order
    for (let i = 0; i < totalChunks; i++) {
      const chunkPath = path.join(chunkDir, `chunk-${i}`);

      if (!fs.existsSync(chunkPath)) {
        throw new Error(`Chunk ${i} is missing`);
      }

      await new Promise((resolve, reject) => {
const readStream = fs.createReadStream(chunkPath);
readStream.pipe(writeStream, { end: false });
readStream.on('end', resolve);
readStream.on('error', reject);
});
    }

    writeStream.end();

    // Wait for the write stream to finish
    await new Promise((resolve, reject) => {
      writeStream.on('finish', resolve);
      writeStream.on('error', reject);
    });

    // Clean up chunks directory
    fs.rmSync(chunkDir, { recursive: true, force: true });

    console.log(`File ${fileName} merged successfully`);

    res.json({
      message: 'File uploaded successfully',
      fileName,
      filePath: finalFilePath,
    });
  } catch (error) {
    console.error('Error merging chunks:', error);
    res.status(500).json({ error: 'Failed to merge chunks' });
  }
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

The backend code creates all the endpoints used by the frontend to upload the chunk files.

It uses multer as middleware to catch each file in a request and process it before proceeding with the request. Let’s look at each endpoint and how it handles it.

/upload-chunk: When a file is sent to this endpoint, it first checks if the file info is correct. If it is, it creates a temporary directory named /chunks and uploads the chunk file there with the chunkIndex and fileId attached to the file name so it knows the order of the chunks when it needs to merge them later.
/merge-chunks: When the endpoint is requested, it first uses the fileId to retrieve the uploaded chunks, then loops through them to create a single file using fs.createWriteStream.

This way, it creates the original uploaded file and moves it to the /uploads directory.

If you’d rather not implement chunking in your application from scratch, you could use a ready-made solution like Uploadcare’s File Uploader, which supports chunking out of the box.

2. Resumable uploads: Ensure reliability

Implementing resumable uploads helps maintain upload integrity in case of interruptions. It allows the upload to pause and resume without starting over. This technique is beneficial in environments with unstable network connections.

Resumable uploads allow users to pause and resume uploads at any time. This feature is particularly useful for large files, as it enables users to continue uploading from where they left off in case of network interruptions or other issues.

When implementing resumable uploads, include clear error messages and next steps to inform the user about what happened during the upload process and what to do next.

3. Streaming large files in real time

Another useful method is streaming, where the file is uploaded as it is being read. This is particularly beneficial for large files, as it reduces stress on both the client and the server, and enables continuous data transfer.

Some use cases where streaming a large file might come in handy are:

When uploading very large media files in GBs, like 4k videos, game assets, or raw datasets
When there is low RAM memory on the server, or when you use a serverless environment for your backend

An example of this is using the createReadStream method in Node.js from the fs module to read files as they are being uploaded:

// example of streaming large file uploads in Node.js
const fs = require('fs');
const http = require('http');

const server = http.createServer((req, res) => {
  const stream = fs.createReadStream('largefile.mp4');
  stream.pipe(res);
});

server.listen(3000, () => console.log('Server running on port 3000'));

4. Use a CDN and upload files to the closest data center

Using a Content Delivery Network (CDN) effectively handles large file uploads and ensures a smooth and reliable user experience. A CDN is a distributed server network that delivers content to users based on their geographic location.

By using a CDN for your backend services and uploading files to the closest data center, you can significantly speed up large-file uploads in your application.

At Uploadcare, we use Amazon S3, which receives numerous batches of data simultaneously and stores each in globally distributed edge locations. To further reduce speed and latency, we use an acceleration feature that enables fast transfers between a browser and an S3 bucket.

Adopting this method can help you to produce a wow effect for your users.

For example, if a user is in Singapore, the uploaded data doesn’t try to reach the primary AWS server in the US. Instead, it goes to the nearest data center, which is 73% faster.

A speed estimate for uploading data to AWS with and without the transfer acceleration feature

Check out the speed comparison and possible acceleration for your target regions in this speed checker.

Conclusion

While handling large files can be tedious, it can be streamlined by applying these techniques throughout the upload process to provide a better user experience.

Start by implementing chunking during uploads, then migrate to a CDN as you scale. Your users will notice the difference.

Happy coding!

How to Deploy Directus to Render.com

Trust Jamin — Wed, 03 Apr 2024 01:54:33 +0000

Directus is an open-source backend-as-a-service platform that offers a user-friendly interface that simplifies building fully functional backend services, APIs, and graphQL endpoints. This ease of use extends to Render, a fully managed cloud platform where you can effortlessly host static sites, backend APIs, databases, and all other components for your web application. In this article, you'll learn how to deploy a self-hosted instance of Directus to Render and connect it to a PostgreSQL database.

Prerequisites

Before you begin this tutorial, you will need a Render account; the free plan is good enough to follow along with this tutorial.

Step 1: Set Up a PostgreSQL Database

On your Render account,, click on the New + button and Click on PostgreSQL to create a new PostgreSQL database.

On the database creation page, add a name for your PostgreSQL instance, a database name, a user, and the region from which you want the PostgreSQL instance to run. Also, select For hobby projects as the instance type for a free tier.

Next, click on the Create Database button to create your PostgreSQL database.

You should be redirected to the created database page.

You can scroll down to the Connections tab to find the credentials needed to communicate with the database you created.

Copy the hostname, port, database, username, and password and save them, as youll need them when creating an instance of Directus later in the next step of this tutorial:

Step 2: Deploy an Instance of Directus from Docker Hub

On your Render.com account, click on the New + button and Click on Web Service to create a new web service

Select the second option on the How would you like to deploy your web service? page, then click next.

The next page will ask you for the image URL you want to deploy. Paste the official Directus URL from the Docker hub below into the input field, and click on next:

https://hub.docker.com/r/directus/directus

On the web service creation page, you can add your preferred name for your web service and the region where you want the web service to run; also, select the For Hobby Projects as the Instance Type plan.

On the Environment Variables tab, add the following variables to set up the Directus instance:

ADMIN_EMAIL = admin@example.comADMIN_PASSWORD = d1r3ctu5DB_CLIENT = postgresDB_DATABASE = YOUR_DB_NAME_FROM_STEP_1DB_HOST = YOUR_DB_HOSTNAME_FROM_STEP_1DB_PASSWORD = YOUR_DB_PASSWORD_FROM_STEP_1DB_PORT = 5432DB_USER = YOUR_DB_USER_FROM_STEP_1KEY = YOUR_RANDOM_KEYSECRET = YOUR_RANDOM_SECRETWEBSOCKETS_ENABLED = true

Click on the Create Web Service button, and a new instance of Directus will be deployed as a web service.

After deployment, you will be redirected to the web service page with all the details about your web service. Click on the live URL of your web service, and it should open Directus in a new tab.

Congratulations! 🥳 you've just deployed an instance of Directus on Render and connected it to a PostgreSQL database.

Summary

In this article, you successfully created a PostgreSQL instance and deployed Directus to Render.com; some possible next steps you can take to improve your deployment might include setting up autoscaling to handle large incoming requests on your Directus application and enabling cron jobs to run backups for your application. (This involves upgrading to a paid account on Render 😉).

Directus also has a Directus Cloud version that offers constant backups, rolling updates, round-the-clock monitoring, and the ability to restart automatically during a crash.

I hope this article is helpful to you.

Happy coding!🍻

I'd love to connect with you on Twitter | LinkedIn | GitHub

What is cross-browser compatibility, and why should you care?

Trust Jamin — Fri, 29 Mar 2024 10:44:03 +0000

Picture this scenario: You worked hard to build your company's website or app, and it worked. It seems to be functioning. A few days later, the product team informed you that people reported that the website looked terrible on the Edge browser in Windows, and several functionalities are not working.

But everything works fine on my machine, you might say. The machine referred to might be a 2021 M1 MacBook Pro, yet the user complaining may be using a 2015 Windows 10 laptop or something else. How do you tackle this issue? How do you ensure your websites and web apps are compatible with all other browsers and devices, not just the one you used for developing? This article will discuss cross-browser compatibility and its significance, methods to ensure compatibility, and practical tips for ensuring cross-browser compatibility in your websites.

What is Cross-Browser Compatibility?

Cross-browser compatibility is the ability of your website or web application to function consistently and correctly across various devices and web browsers. It ensures that browsers like Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and others interpret and render your website uniformly.

Common Causes of Cross-Browser Compatibility Issues

Different Browser Rendering Engines:

Each browser employs its rendering engine (e.g., Blink for Chrome, WebKit for Safari, Gecko for Firefox). These engines may interpret and display website code differently.

Different Devices:

Different devices, such as Laptops, Tablets, and smartphones, display your website differently to their user.

Why Cross-Browser Compatibility Matters

As a developer, understanding the importance of cross-browser compatibility is essential for several reasons:

User Experience: A seamless experience across different browsers contributes to positive user experiences, impacting user satisfaction and business success. If a user visits your website and notices things are not displayed correctly, it might give them a bad experience and deter them from revisiting it.
Reach Diverse Users: The internet's diversity means users access content via various browsers and devices. Compatibility ensures your website reaches a broader audience.
Better SEO: Search engines favor websites with consistent positive experiences across browsers. Neglecting compatibility can adversely affect search rankings.
Future-Proofing Your Code: Evolving browsers introduce new features. Cross-browser compatibility ensures your application remains functional amid these changes.

Tips for Ensuring Cross-Browser Compatibility

Use Modern Web Standards
Your HTML, CSS, and JavaScript code and website accessibility should follow the standard web practices, reducing the likelihood of compatibility issues with browsers. The World Wide Web Consortium (W3C) develops open standards to ensure the long-term growth and accessibility of the World Wide Web. Following these standards will help ensure your website is compatible with the standard web browser.
Practice Responsive Design
Implementing fluid layouts, flexible images, and CSS media queries to provide a consistent user experience across various devices. These will help to make your website responsive to different devices that your users will visit from
Validate Your Code
Include tools like W3C code validation service and CSS validator to ensure your code meets web standards.
Test Early, Test Often
Begin cross-browser Testing in the early stages of development to identify and address these issues. Frequent Testing can help you catch issues before they turn into significant problems.

Consider Using CSS Resets

Use CSS resets to establish a baseline layout across browsers and minimize inconsistencies. Each browser has predefined padding, margin, and line height styles by default. Etc. Applying CSS resets before adding custom styling to your webpage helps you predict how elements render comfortably across different browsers.

/*

1. Use a box-sizing model.
*/
*, *::before, *::after {
    box-sizing: border-box;
}
/*
2. Removes the default margin and padding on the browsers
*/
 {
    margin: 0;
    padding: 0;
}

You can also consider using stylesheets like Normalize.css, Eric Mayer's CSS reset rules to establish a baseline layout across browsers.

How to Test for Cross-Browser Compatibility

Create a Plan: Based on audience research, determine target browsers and establish what your website should look like, what devices they would be using, and what browsers are primarily used in the region where your intended users will be. Having a plan will help you decide which browsers to test.
Development: Strive for uniform functionality across all target browsers. Or use polyfills as needed. Some Browsers interpret your code differently on some styling features, so you should try styling them using browser-specific code; you can do this using prefixes. Some general prefixes used when targeting specific browsers are:
Testing: There are two types of Testing you should consider when performing cross-browser compatibility tests

Pitfalls to Avoid in Cross-Browser Compatibility

There are a couple of pitfalls to avoid when ensuring your websites and web applications are cross-browser compatible; because cross-browser compatibility can be tedious, it's easy to fall into these pitfalls

Over-Engineering: Focus more on the core functionality of your website and the user experience it provides for your users rather than pursuing pixel-perfect consistency across all browsers. This will help you avoid over-engineering your product to target specific browsers.
Ignoring Older Browsers: Balance dropping support for outdated browsers with considering your target audience's browser usage. For example, Microsoft retired the Internet Explorer browser in favor of its new Edge browser, so it wouldn't be wise to spend time making your website compatible with browsers like Internet Explorer that are no longer supported.
Misusing Polyfills: While using polyfills can help you to implement features that are not present in a browser and flatten the browser API landscape, you should only use it judiciously for critical missing features to avoid unnecessary code bloat that might hurt your website performance.

Testing in Isolation: To better understand how your website will function in different environments. Test not only on individual browsers but also various combinations of devices and screen sizes.

Best Practices for Cross-Browser Compatibility

Research Your Audience: Perform market research to understand your target audience's browser preferences based on their region. Do not test randomly with browsers, as this might not be adequate for your users.
Prepare a Browser List To Test on: Limit development and test coverage efforts to a specific set of browsers relevant to your audience. A list of browsers will help you focus on pertinent issues for your target audience and reduce exposure to cross-browser bugs.
Choose the Right Automation Tool: Since cross-browser compatibility testing is a tedious task and requires a lot of time and effort, consider selecting tools that are easy to use and allow Testing across a maximum number of browsers for maximum efficiency.
Test on Real Device Browsers: Automated Testing should differ from manual Testing. Testing on actual device browsers will help you identify bugs that may arise on actual devices that your end-users will use, offering a more realistic testing environment.

Conclusion

Cross-browser compatibility is not just a checkbox; it's a journey of continuous improvement. By understanding its significance and following best practices, you can navigate this complex landscape, creating websites and software that provide a seamless experience for users across different browsers and devices.

Happy coding!

I'd love to connect with you on Twitter | LinkedIn | GitHub

Improving Your Workflow as a Developer with Bash Aliases

Trust Jamin — Sat, 05 Aug 2023 07:47:54 +0000

As a developer, you most likely spend a significant amount of time working with the command-line interface (CLI). The command line is a powerful tool that allows you to interact with your operating system and execute various tasks efficiently. However, typing long and repetitive commands can become tedious and time-consuming. Fortunately, Bash aliases can help you streamline your workflow and boost productivity. This article will explore what Bash aliases are and how you can use them to enhance your development process.

Prerequisite

Before you begin, this article requires basic knowledge of the terminal/CLI and bash commands.

What is a Bash Alias?

A bash alias is a user-defined shortcut for frequently used commands. When you create an alias, you assign a custom name to a command or a series of commands. Once defined, you can use the alias instead of typing the entire command. Aliases are specific to your user profile and can be stored in your shell's configuration file, such as .bashrc or .bash_profile.

For example, the following alias command creates a shortcut for the ls -al command:

alias ls="ls -al"

This shortcut can then be used to list all of the files and directories in a directory. So, instead of writing the longer command ls -al every time you need to list the files in a directory, you can now type ls.

Benefits of Using Bash Aliases

There are several benefits to using Bash aliases:

Increased productivity : By reducing the time spent typing repetitive commands, you can focus more on coding and development tasks.
Customization : Bash aliases are entirely customizable, tailored to your specific needs and preferences.
Error prevention : Since aliases can be designed to avoid complex or risky commands, you can reduce the chances of making mistakes when running important commands.

Creating a Bash Alias

To create a Bash alias, follow these steps:

Open your terminal.
Navigate to your home directory (cd ~) if you're not already there.
Edit your shell configuration file using a text editor like Nano or VSCode. For example, to edit .bashrc, use nano ~/.bashrc or code ~/.bashrc.
Add your alias definitions to the file. The syntax for creating an alias is: alias shortcut='command'. Replace shortcut with the name of your desired alias and command with the actual command or commands you want to associate with the alias.
Save the file and exit the text editor.
To make your changes take effect, restart your terminal or run the command source ~/.bashrc.

Aliases with Multiple Commands

Using logical operators such as the AND (&&) and OR (||) operators, you can create aliases with multiple commands.

alias shortcut='command1 && command2'

Using the AND (`&&`) Operator

The double ampersand is a logical AND operator used to execute the second command only if the first command succeeds (i.e., returns an exit status of 0). However, if command1 fails (returns a non-zero exit status), command2 will not be executed. Here's an example alias in Bash:

alias npmsetup='npm install && npm run dev'

In this example, you've created an alias called npmsetup. When you execute npmsetup, it will first install all the packages in the project using the command npm install. If the installation is successful, it will then run the development server using the npm run dev command.

Using Semicolon (`;`)

In Bash, the semicolon is a simple command separator. When you use it to separate commands, Bash will execute each command sequentially, regardless of whether the previous command succeeded or failed. This means that all commands separated by semicolons will be executed, even if some of them produce errors.

alias shortcut='command1 ; command2 ; command3'

In this case, command1 will be executed first, followed by command2, and then command3, irrespective of whether any of them fail or succeed.

Using the OR (`||`) Operator.

The double pipe is a logical OR operator used to execute a second command when the first command fails: When you use command1 || command2, Bash will execute command1 first. If command1 fails (returns a non-zero exit status), then Bash will proceed to execute command2. However, if command1 succeeds (returns an exit status of 0), command2 will not be executed. lets have a look at an example of using the || operator:

Imagine you want to create an alias command dev that turns on the development server in a JavaScript/Typescript project, using the || operator you can create the alias as follows:

alias dev='npm run dev || npm run develop'

In this example, you've created an alias called dev. When you execute dev, it will first try to run the development server using the command npm run dev. If that command is not found or fails, it will then try the second command npm run develop.

Bash Alias Examples

Lets consider some practical examples of bash alias commands that can help improve your development workflow.

I use the following alias commands to run common git and development commands with just a few keystrokes without having to type the whole command:

alias gm='git commit -m'
alias pull='git pull'
alias push='git push'
alias gs='git status -sb'
alias gc='git checkout'
alias gb='git branch'
alias gline='git log --oneline'
alias gcp='git cherry-pick'
alias add='git add'
alias addall='git add .'
alias dps='docker ps'
alias dcu='docker-compose up'
alias cf='STAGE_BACKEND=true yarn start'
alias dev='npm run dev || npm run develop'
alias clean='npm run clean'

What aliases do you use to speed up your workflow? Please share in the comments section; I'll be waiting :)

Reference

Conclusion

Bash aliases can help you optimize your workflow as a developer. By creating shortcuts for common commands, you can save time, improve productivity, and make your development experience more enjoyable. So, don't hesitate to start creating your custom aliases today to improve your productivity on your daily development tasks.

Happy coding!

I'd love to connect with you on Twitter | LinkedIn | GitHub

Mastering Generics in Typescript

Trust Jamin — Fri, 14 Jul 2023 16:10:40 +0000

Generics are one of the superpowers of TypeScript, and while they might look scary if one has little or no knowledge about them, they can be life-saving when understood and used correctly. Mastering generics in TypeScript can significantly enhance one's ability to write clean, robust, and scalable code. In this article, we will explore the fundamentals of generics, delve into some of its concepts, and provide practical examples to help individuals become better users of generics in TypeScript.

What are Generics in Typescript?

Generics enable us to create reusable components that work with different data types while maintaining type safety. They provide a way to define placeholders for types that are determined when the code is used. This enables us to write more generic and flexible code.

Consider this example of this function below:

function echo(value) {
  return value;
}

//Call the function
echo("Hello World")

The echo function receives a value and returns that value without any modification. At the moment, TypeScript frowns at our function parameter and complains that parameter 'value' implicitly has an 'any' type. meaning that since theres no type explicitly specified, TypeScript has inferred a type of any to the parameter of the function. This doesnt help us check the data of the parameter of our function, so how do we check that the right type is passed when our function is called and that our function also returns the correct data?

One way we could do this is by explicitly setting the type of parameter value passed and returned.

function echo(value:string):string {
  return value;
}
echo("Hello World")

This example works perfectly as we know the type of data being passed as a parameter and the data our function returns, but there is a tiny bit of an issue. What if we want to make the echo function reusable and call it somewhere else with a different data type? Typescript will complain that were passing the wrong data type to the echo function.

function echo(value:string): string {
  return value;
}
//Argument of type 'number' is not assignable to parameter of type 'string'
echo(3.14159)

So how do we fix this? How do we create a reusable function that accepts and returns the types we pass to it? Generics!

Basic Generics

Starting with the basics, using the echo function as an example, lets spice it up and update the function with generics to be reusable.

function echo<T> (value: T): T {
  return value;
}

 //calls the function with no errors from typescript
echo("Hello World")
echo(3.14159);
echo(false);
echo([1, 2, 3, 4])
echo({id: 1, fullName: "John Doe"})

In this example, The echo function is a generic function that takes an argument value of type T and returns the exact value of type T without any modification. The generic type parameter <T> we passed to the function allows it to work with different types, thus allowing us to reuse the same function with different data.

Generally, you can write a generic type with any alphabet you like, <X>, <Y>, but T is for type, and it's just a tradition of naming generics, and there is nothing to prevent you from using other names or alphabets.

Generics on Type Declarations

Generics dont only work with functions; we can also use generics to make types more robust, reusable, and flexible when declared. For example, let's say we are building an e-commerce application and have a Repository interface defining common CRUD operations for working with different entities in our system. Instead of creating separate interfaces for each entity (e.g., UserRepository, ProductRepository, etc.), we can use generics to create a single, generic Repository interface that can handle various entity types.

interface Repository<T> {
  getById(id: string): T | undefined;
  getAll(): T[];
  create(item: T): void;
  update(item: T): void;
  delete(id: string): void;
}
class UserRepository implements Repository<User> {
  // Implementation specific to User entity
}

class ProductRepository implements Repository<Product> {
  // Implementation specific to Products operation
}

// Usage
const userRepository: Repository<User> = new UserRepository();
const user = userRepository.getById('123');
userRepository.create(newUser);

const productRepository: Repository<Product> = new ProductRepository();
const products = productRepository.getAll();
productRepository.update(updatedProduct);

In this example, the Repository interface is defined with a generic type parameter T representing the entity type. It provides common methods like getById, getAll, create, update, and delete that can be used with any entity.

By implementing the Repository interface with specific entity types like User and Product, we can create specialized repositories that handle operations particular to those entities. The generic nature of the interface allows for code reuse and flexibility when working with different types of entities.

This approach makes the code more modular, maintainable, and extensible, as we can easily add new entity-specific repositories without duplicating the same set of methods for each entity type.

Generics in Functions with Type Constraints

As weve seen from our first generics example in this article, we can use generics with functions and combine them with some other features of TypeScript to produce more exciting results. Lets say we want a function called printLength that accepts only items with lengths and prints the length of any items we pass on it. Using the extend keyword in Typescript, we can create a function that constrains the data passed to the function.

interface Lengthy {
  length: number;
}

function printLength<T extends Lengthy>(item: T): void {
  console.log(`Length: ${item.length}`);
}

const stringItem = "Hello, World!";
printLength(stringItem); // Output: Length: 13

const arrayItem = [1, 2, 3, 4, 5];
printLength(arrayItem); // Output: Length: 5

const numberItem = 42; // Error: Type 'number' does not have a property 'length'
printLength(numberItem);

In this example, The printLength function takes a generic type parameter T that extends the Lengthy interface using the extends keyword. This means the type T must have the length property of the type number.

Within the printLength function, we can safely access the length property of the item argument without causing type errors because the generic type T is guaranteed to have a length property.

Using the printLength function with items(stringItem and arrayItem ) that satisfy the Lengthy requirements, we got no errors from TypeScript. However, when we try to pass a number (numberItem), which doesn't have a length property, TypeScript raises an error.

Lets consider another example that combines generics with some more inbuilt features of TypeScript. The function below accepts an array of objects, finds an object by the id key property of the object, and returns the key value we specified as a parameter when calling the function.

interface Person {
  id: number;
  name: string;
  age: number;
}

function getObjectValue<T extends { id: number }, K extends keyof T>
  (arr: T[], key: K, id: number): T[K] | undefined {
  const foundObject = arr.find((obj) => obj.id === id);
  return foundObject ? foundObject[key] : undefined;
}

const people: Person[] = [
  { id: 1, name: "John", age: 25 },
  { id: 2, name: "Jane", age: 30 },
  { id: 3, name: "Bob", age: 40 },
];

const nameValue = getObjectValue(people, "name", 2);
console.log(nameValue); // Output: Jane

Whoops! That looks like a complex function with lots of types flying everywhere. Lets break it down bit by bit.

The first line of the function contains two generic types <T, K> where T is an object and has a constraint that it must have an object property of {id: number } and K is a key property of the object T (using the keyof operator) and has a constraint that it must only contain properties from T object (using the extend keyword).
The second line contains the parameters the function receives and what the function returns.
- arr: is an array of our object T.
- key: is a key property of object T.
- id: is a number unique to every object T in the array.
- The function getObjectValue then returns the value of the object key property found, T[K], or undefined if the value is not found.
The third line checks through the array using the id as a criterion, finding the object with the same id.
The fourth line checks if the object foundObject we just searched for actually exists and if it does, we extract a value from it using its key foundObject[key] and return it, or return undefined if its not found.

Thats it. We just broke down the getObjectValue function into small chunks to better understand the generic type definitions it has.

Generics can have default values.

We can also use generics with default values when working with functions. On our previous getObjectValue function, imagine wed like to add a default parameter for our id parameter as the default value our function filters by. We could rewrite the function like this:

function getObjectValue<T extends { id: number }, K extends keyof T>
  (arr: T[], key:K, id:number = 2): T[K] | undefined {
  const foundObject = arr.find((obj) => obj.id === id);
  return foundObject ? foundObject[key] : undefined;
}

By updating the id: number to be id: number = 2, we set the default value to be 2 whenever our function runs.

Conclusion

In conclusion, we covered generics in TypeScript, how they make our code reusable, and how they help to add flexibility to our code using some examples of type declarations and functions.

Generics is one of the features of TypeScript that might look overwhelming at first, but once you get to know it better, you'll appreciate how it makes your code more strictly typed.

I hope this article helps you better understand generics.

Thanks for reading. Cheers.

References

Official TypeScript documentation on generics

I'd love to connect with you on Twitter | LinkedIn | GitHub

The Differences Between Type and Interface in Typescript

Trust Jamin — Tue, 13 Jun 2023 21:34:11 +0000

Typescript is a superset of JavaScript that incorporates static typing, making detecting errors simpler and producing more maintainable code.

Types and interfaces in Typescript represent two distinct methods for defining the structure and shape of values or objects. They help ensure that variables, objects, arrays, parameters, and function return values match the structure and type set by the developer. This article emphasizes the distinctions between types and interfaces and their appropriate use cases.

Types

Types describe a value type such as string, boolean, number, etc. It enables you to explicitly specify the data type of variables, objects, function parameters, and function return values of functions, for example:

//types in variables
const age: number = 24;

//types in functions
function addNumbers(a: number, b: number): number {
  return a + b;
}

You can also use types to describe an object's structure or shape.

//type alias
type User = {
  id: string;
  firstName: string;
  lastName: string;
  isAdmin: boolean;
  age: number;
};

Interfaces

Interfaces allow you to specify the shape of an object by declaring the properties it should have, along with their types and optionally their accessibility modifiers.

The Differences

Below are some key differences between an interface and a type in typescript:

Types can be used to describe primitive types

One key distinction between interfaces and types is that only types can describe primitive types.

In the following code, the type declarations are suitable for describing the shape of data that isn't an object, but they are not valid for interface declarations.


// Types
// works fine with types
type Status = "pending" | "success" | "error";
type FamousQuotes = string[] | undefined;

 //Interface
 //Error! parsing error "{" expected
interface IStatus = "pending" | "success"

Interfaces for declaration merging

One advantage interface has over type is that you can always reopen them to add more properties. this is not possible when using type.

interface Person {
  name: string;
  age: number;
}

// Reopen the Person interface and add a new property
interface Person {
  gender: string;
}

const person: Person = {
  name: "John",
  age: 25,
  gender: "Male",
};

console.log(person.name); // Output: John
console.log(person.age); // Output: 25
console.log(person.gender); // Output: Male

When using type this would throw an error:

type Person = {
  name: string;
  age: number;
}

// Error: "Duplicate identifier 'Person'"
type Person = {
  gender: string;
}
// Error: Object literal may only specify known properties, and 'gender' does not exist in type 'Person'
const person: Person = {
  name: "John",
  age: 25,
  gender: "Male",
};

Interface extension and type union

When working with objects and classes, interfaces offer a more seamless experience, allowing you to extend other interfaces to inherit their properties and methods.

interface Animal {
  name: string;
  age: number;
  eat(): void;
}

interface Dog extends Animal {
  breed: string;
  bark(): void;
}

const myDog: Dog = {
  name: "Max",
  age: 3,
  breed: "Chihuahua",
  eat() {
    console.log("Eating...");
  },
  bark() {
    console.log("Woof!");
  },
};

console.log(myDog.name); // Output: Max
console.log(myDog.age); // Output: 3
myDog.eat(); // Output: Eating...
myDog.bark(); // Output: Woof!

However, we can perform something known as "intersection types" with types. Intersection types allow you to combine multiple types into a single type with all the properties and methods of each type. This is achieved by using the & symbol between the different types.

// type

type Animal = {
  name: string;
  age: number;
  eat(): void;
}

type Dog = Animal & {
  breed: string;
  bark(): void;
}

VS Code IntelliSense performs better with types.

When using types, you can hover over the type declaration, and IntelliSense in VS Code displays the internal properties of that type. However, interfaces only show the name of the declared interface. A related issue can be found on GitHub, as this is a significant factor for some people to prefer using types over interfaces.

IntelliSense on VS Code when using interface:

IntelliSense on VS Code when using type:

Comparison Table

The table below compares types and interfaces in TypeScript:

Type	Interface
Syntax	`type TypeName = ...`
Declaration	Can be named or anonymous
Merging	Can be extended using intersection (`&`)
Implementation	Cannot be implemented directly
Extendable	Cannot extend or be extended
Intersection	Can be used in intersection types
Union	Can be used in union types
Declaration merging	Cannot merge declarations of the same name
Discriminated union	Cannot be used in discriminated unions
Function-like	Can define callable and constructible types

Which should I use for a typescript project?

Often, as someone starting with TypeScript, you might ask yourself, "When should I use 'type' over 'interface' and vice versa?" The comparison above shows that both have different approaches to describing the shape of values and objects in your TypeScript project.

A short, opinionated answer is to use interfaces until you encounter areas where you need to explicitly use types, as interfaces represent how Javascript behaves in a real-world scenario. However, it boils down to a matter of personal preference. This Stackoverflow discussion also highlights different developers' choices and reasons for picking interfaces over types and vice versa.

Conclusion

In this article, we explored some of the differences between types and interfaces in typescript and the best occasions to use one over the other. Ultimately, the decision of whether to use type or interface in a TypeScript project depends on your personal preference and the specific needs of your project. Both have their own strengths and weaknesses, and it's up to you to weigh them and make an informed decision. It's also worth noting that as you gain more experience with TypeScript, your preferences, and needs may change, so don't be afraid to experiment and try different approaches.

Reference

Thanks for reading; I hope you find this article helpful. Cheers

I'd love to connect with you on Twitter | LinkedIn | GitHub

DEV Community: Trust Jamin

How to handle large file uploads

Possible issues when uploading a large file

Upload speed, bandwidth, and latency

Upload failures and timeouts

Mobile & edge case constraint

Server limitations

Proven techniques for handling large file uploads

1. Chunk file uploads: Split large files into manageable parts

2. Resumable uploads: Ensure reliability

3. Streaming large files in real time

4. Use a CDN and upload files to the closest data center

Conclusion

How to Deploy Directus to Render.com

Prerequisites

Step 1: Set Up a PostgreSQL Database

Step 2: Deploy an Instance of Directus from Docker Hub

Summary

What is cross-browser compatibility, and why should you care?

What is Cross-Browser Compatibility?

Common Causes of Cross-Browser Compatibility Issues

Why Cross-Browser Compatibility Matters

Tips for Ensuring Cross-Browser Compatibility

Pitfalls to Avoid in Cross-Browser Compatibility

Best Practices for Cross-Browser Compatibility

Conclusion

Improving Your Workflow as a Developer with Bash Aliases

Prerequisite

What is a Bash Alias?

Benefits of Using Bash Aliases

Creating a Bash Alias

Aliases with Multiple Commands

Using the AND (&&) Operator

Using Semicolon (;)

Using the OR (||) Operator.

Bash Alias Examples

Reference

Conclusion

Mastering Generics in Typescript

What are Generics in Typescript?

Basic Generics

Generics on Type Declarations

Generics in Functions with Type Constraints

Generics can have default values.

Conclusion

References

The Differences Between Type and Interface in Typescript

Types

Interfaces

The Differences

Types can be used to describe primitive types

Interfaces for declaration merging

Interface extension and type union

VS Code IntelliSense performs better with types.

Comparison Table

Which should I use for a typescript project?

Conclusion

Reference

Using the AND (`&&`) Operator

Using Semicolon (`;`)

Using the OR (`||`) Operator.