The Problem with Large Image Uploads

Modern web applications often handle large image uploads, especially from mobile devices that capture high-resolution photos by default. Uploading these full-sized images directly to the backend or sending them to an AI or LLM (Large Language Model) for visual processing leads to predictable issues:

• Slow uploads

• Overloaded backend systems

• Increased LLM processing costs

Most use cases, such as profile pictures, product thumbnails, or AI inputs, do not require such massive files. Using a 4K source only adds latency and cost without any real benefit.

The Solution: Frontend Image Resizing

Frontend image resizing is a valuable technique that involves resizing and compressing images before they are sent to the backend. This approach can significantly reduce load times and cost without any noticeable drop in quality.

How It Works

The typical workflow looks like this

1. User selects an image.

2. The frontend resizes the image.

3. The optimized image is uploaded to the backend.

4. The backend sends it to an LLM or processing service.

5. The response is returned faster and at a lower processing cost.

This optimization reduces the payload size, shortens upload duration, and minimizes downstream resource usage.

Approaches to Resizing

There are several options available, but here are the two main methods I recommend for resizing images within the browser:

1. Canvas (native)

The browser’s Canvas 2D API lets you draw an image at a smaller size and export a new Blob/File. No dependencies, minimal code, very fast for typical uploads.

When it shines

• Screenshots, product photos, everyday camera images you’ll cap at ~768–1080px.

• You want no bundle impact and simple maintenance.

Implementation

async function resizeWithCanvas(file: File, maxSide = 768, quality = 0.9): Promise<File> {
  const img = await fileToImage(file);

  // compute scaled dimensions keeping aspect ratio
  const scale = Math.min(maxSide / img.width, maxSide / img.height);
  const w = Math.round(img.width * scale);
  const h = Math.round(img.height * scale);

  const canvas = document.createElement('canvas');
  canvas.width = w; canvas.height = h;
  const ctx = canvas.getContext('2d')!;
  ctx.imageSmoothingEnabled = true;
  (ctx as any).imageSmoothingQuality = 'high';
  ctx.drawImage(img, 0, 0, w, h);

  const blob = await new Promise<Blob>(r => canvas.toBlob(b => r(b!), 'image/jpeg', quality));
  return new File([blob], file.name.replace(/\.[^.]+$/, '.jpg'), { type: 'image/jpeg' });
}

function fileToImage(file: File): Promise<HTMLImageElement> {
  return new Promise((res, rej) => {
    const img = new Image();
    img.onload = () => res(img);
    img.onerror = rej;
    img.src = URL.createObjectURL(file);
  });
}

2. Pica (library)

Pica is a high-quality re-sampler (using Lanczos3, with WASM/worker support). It's designed to provide better sharpness and fewer artifacts when significantly reducing the size of large images (e.g., 4000–6000px sources). It adds a small dependency, but the quality can be noticeably better on very large photos.

When it shines

• DSLR-scale inputs or highly detailed textures where Canvas starts to look slightly soft.

• Optionally runs in a Web Worker to prevent main-thread blocking.

Implementation

import pica from 'pica';

async function resizeWithPica(file: File, maxSide = 768, quality = 0.9): Promise<File> {
  const img = await fileToImage(file);
  const scale = Math.min(maxSide / img.width, maxSide / img.height);
  const w = Math.round(img.width * scale);
  const h = Math.round(img.height * scale);

  const canvas = document.createElement('canvas');
  canvas.width = w; canvas.height = h;

  const p = pica();
  await p.resize(img, canvas, { quality: 3, unsharpAmount: 80, unsharpRadius: 0.6, unsharpThreshold: 2 });
  const blob = await p.toBlob(canvas, 'image/jpeg', quality);
  return new File([blob], file.name.replace(/\.[^.]+$/, '.jpg'), { type: 'image/jpeg' });
}

function fileToImage(file: File): Promise<HTMLImageElement> {
  return new Promise((res, rej) => {
    const img = new Image();
    img.onload = () => res(img);
    img.onerror = rej;
    img.src = URL.createObjectURL(file);
  });
}

Comparison Overview

Both approaches achieve the same goal: reduce image dimensions and file size before upload. The main difference lies in quality vs. simplicity trade-offs.

Demo: Canvas vs Pica in Practice

Live Demo: web-image-resize.vercel.app

Source Code: github.com/abdrahmansoltan/web-image-resize

The demo compares both resizing approaches side by side with these Key findings:

• Canvas consistently reduced image size by up to ~98% with minimal quality loss.

• Pica delivered slightly sharper edges for very large photos but required additional setup.

• For images under 1080px, differences were nearly imperceptible.

Findings and Conclusion

Expected Impact

• Average image size: 2.8 MB → 350 KB

• Upload duration: reduced by up to ~98%

• Request time: reduced up to ~60%

• Backend processing time: improved proportionally

• LLM processing cost: reduced per pixel input

• Image clarity: visually unchanged for standard use cases

Conclusion

Resizing images on the frontend is a simple yet powerful optimization that improves user experience and operational efficiency, especially for most applications, particularly those involving LLM inputs, profile pictures, or thumbnails.

Canvas API provides an ideal balance of performance, quality, and maintainability, as it’s native, fast, and introduce no dependencies. which is recommended for most cases.

Pica remains a valuable alternative for applications handling extremely detailed images (e.g., photography tools or high-resolution artwork).

Small optimization, significant results. Resize early, upload smart, and make every pixel count.

References

• MDN: CanvasRenderingContext2D.drawImage()

• Pica GitHub Repository

In this article, we will discuss chapter 2 of the book which discusses different types of automated tests and their advantages and disadvantages, providing guidance for selecting the appropriate tests to write.

[1] Testing pyramid

Developers use different types of tests for different purposes, frequencies, and durations. Tests can guide developers during development, test completed features, and interact with code or graphical interface (as an end-user would). The choice of selecting the right test type depends on the developer's judgment and the software's specific needs to build more reliable software. Understanding the types and purposes of tests is reflected in a fundamental concept in software testing: the testing pyramid.

The testing pyramid is a useful approach to ensure high-quality software development by showing the role, value, and frequency of tests. it involves 3 steps:

1. The first step is to test individual units of code, just like testing individual functions, to ensure they work correctly. (Unit tests)

2. The second step involves testing the integration of these units into larger components, like combining code modules to create a software feature. This validates that the different pieces of your software work together. (Integration tests)

3. Finally, the last step is to test the final product, by verifying your work from a user’s perspective by interacting with your software through the user interface it provides. (E2E tests)

The size of each layer indicates the number of tests that should be written of that type, and the higher up a test is in the pyramid, the less frequently they run and the more value they provide.

By following this testing pyramid approach, we can ensure that our software meets high-quality standards and is useful to our users.

[2] Testing setup and frameworks

To write a test any functionality, we can use manual tests for each condition (using if..else), or we can use a testing library because:

• It gets rid of the complicated logic to determine whether objects are equal to each other (using if..else), instead, it has built-in methods.

• It generates meaningful testing output, so you don’t have to manipulate strings yourself.

• It solves the problem of organizing and running multiple tests sequentially and in individual scopes, providing easily readable results, by using Test Runners.

Currently, the most popular testing tool in the JavaScript ecosystem is Jest.

Jest is a testing framework created at Facebook. It focuses on simplicity and, therefore, ships with everything, So you can start writing tests straightaway.

To prepare tests for Jest, wrap them in the test() function that Jest adds to the global scope. This function helps organize multiple tests within a file and specifies which tests should run.

• The test() creates a block called "Test spec" and it's a function that takes the test's name as its first argument and a callback function that contains the actual test as the second argument.

    test('sample test', () => {
      // Testing logic  
    });
  

• The expect() function helps Jest provide feedback that’s even more helpful.

    test('sample test', () => {
      expect(1 + 2).toBe(3); // check if 1 + 2 = 3 using toBe() matcher utility
    });
  

  • It takes the actual subject of the assertion as an argument and returns an object that provides different matcher functions.

    • These matcher functions verify whether the actual value matches your expectations.

    • they compare the value of the assertion’s target (the argument provided to expect()) to the value of the argument passed to them (toBe())

Note for installing a testing library/framework:

• Using a global installation of a testing library/framework can result in incorrect test results, indicating that the application is functioning correctly when it may not be.

  You want tests to fail only when there’s something wrong with your application, not when people are running different versions of a test framework.

• To avoid this, Install them as devDependencies using "npm install [library] --save-dev". This ensures consistency for developers without shipping the library with the application.

[3] Unit tests

Unit tests help you ensure that the smallest units of your software (your functions) behave as you expect them to.

• Unit tests’ scope is limited to a function, So their feedback is narrow and precise. They can immediately tell which function is failing. Strict feedback like this makes it faster to write and fix your code.

• These tests are inexpensive and quick to write, but they cover only a small part of your application, and the guarantees they provide are weaker.

• Just because functions work in isolation for a few cases doesn’t mean your whole software application works, too.

  • So, to get the most out of these narrow and inexpensive tests, you should write many of them.

Considering that unit tests are numerous and inexpensive, and run quickly and frequently, we place these tests at the bottom of the testing pyramid. They’re the foundation other tests will build upon

[3.1] Writing unit tests

When writing a test, we follow this sequence known as "The three As": (Arrange, Act, Assert).

1. First, you set up a scenario -> Arrange

2. Then you call the function you want to test -> Act

3. And, finally, you check whether the output matches what you expected -> Assert

Let's say that we want to test the behavior of a Shopping Cart and we want to test its functionalities in our app:

we have a class Cart that has these functions:

• addItemToCart functionality -> addToCart() method

• listCartItems() functionality -> items property

// Cart.js
class Cart {
  constructor() {
    this.items = [];
  }
  addToCart(item) {
    this.items.push(item);
  }
}

module.exports = Cart;

To test it, we create a Cart.test.js file:

// Cart.test.js
const Cart = require("./Cart.js");

test("The addToCart function can add an item to the cart", () => {
  const cart = new Cart(); // 1. Arrange the test data
  cart.addToCart("cheesecake"); // 2. Act on the data
  expect(cart.items).toEqual(["cheesecake"]); // 3. Assert the result
});

As we can see, in unit tests, we only focus on testing small and isolated pieces of code.

Isolating your code in unit tests can be great for writing quick and simple tests, but unit tests can’t guarantee that you are using other pieces of software as you’re supposed to. That's where Integration tests come into place.

[4] Integration tests

Integration tests help you ensure that different components or modules of your software work together as expected. They verify that the interactions between these components are correct, data is transferred between modules properly, and the integrated system functions as intended.

• Integration testing is a critical step in the software development process as it helps to identify any defects or issues that arise when multiple components are combined and tested together.

• By conducting integration tests, you can ensure that the different parts of your software work seamlessly together and deliver the desired functionality to end-users.

The scope of these tests is broader than the scope of unit tests but smaller than the scope of end-to-end tests. They assert the quality of the intermediary steps of the process.

[4.1] Testing 3rd party libraries

If you are using a library like React, for example, your software must integrate appropriately with it. The way React behaves is essential to how your application does, so you must test your code in integration with React.

• For example, you should not write tests for React's core built-in methods like useState() or useEffect(). Instead, you should write integration tests to ensure that your code correctly integrates with and utilizes these React methods in the intended way. By doing so, you can verify that your application functions as expected and takes full advantage of the features provided by React.

• Testing the library methods is the author’s responsibility, not yours. And, if the authors didn’t write tests, it’s probably better to reconsider its adoption.

The same is valid for interacting with a database or with a computer’s filesystem. You rely on how those external pieces of software work, and, therefore, it’s wise to check if you’re using them correctly.

It’s important to highlight that the goal of an integration test is not to test any third-party pieces of software themselves. The purpose of an integration test is to check whether you are interacting with them correctly.

When looking at the application’s infrastructure diagram, you will see that the scope of integration tests is broader than the scope of unit tests. They check how your functions interact and how your software integrates with third parties.

[4.2] Example: a test that talks to a database

For example, we have a database that we're connected to, and will use it in our cart functionality:

// cart.js
const { db } = require("./dbConnection");

const createCart = username => {
  return db("carts").insert({ username });
};

module.exports = {
  createCart
};

Writing tests for it will help ensure that your code works with the database correctly and that the APIs you’re using behave as you expect. So, If you had any incorrect queries, these tests would catch them.

To test the functions in the cart.js module, We can follow a pattern similar to the one we used in unit testing: (Arrange, Act, Assert)

Here's a test for createCart(). It should ensure that the database is clean, create a cart, and then check if the database contains the cart you’ve just created:

// cart.test.js
const { db, closeConnection } = require("./dbConnection");
const { createCart } = require("./cart");

test("createCart creates a cart for a username", async () => {
  // 1. Arrange the test data
  await db("carts").truncate(); // Delete every row in the carts table

  // 2. Act on the data
  await createCart("Lucas da Costa");

  // Selects value in the username column for all the items in the carts table
  const result = await db.select("username").from("carts");

  // 3. Assert the result
  expect(result).toEqual([{ username: "Lucas da Costa" }]);

  await closeConnection(); // Tears down the connection pool
});

Usually in integration tests, we notice that we have prerequisites and postrequisites for tests that have dependencies like "connecting to a database", they can be handled in what we call "Testing Hooks":

• afterAll & afterEach hooks to close the connection pool only after all tests have run and remove the invocation of closeConnection() from within the test.

• beforeAll & beforeEach hooks to clean the database before they run. If you do this, there’s no need to repeat the truncate() statements on every test.

So testing the interaction with the database using hooks will look like this:

// cart.test.js
const { db, closeConnection } = require('./dbConnection');
const { createCart, addItem } = require('./cart');

// Prerequisites: clear the carts and carts_items tables before each test
beforeEach(async () => {
  await db('carts_items').truncate();
  await db('carts').truncate();
});

// Postrequisites: tear down the connection pool once all tests have finished,
afterAll(async () => await closeConnection());

test('createCart creates a cart for a username', async () => {
  await createCart('Lucas da Costa');
  const result = await db.select('username').from('carts');
  expect(result).toEqual([{ username: 'Lucas da Costa' }]);
});

[5] End-to-end tests

End-to-end tests are the most comprehensive tests, they validate your application by interacting with it as a real user would.

E2E tests don’t use your software’s code directly as unit tests do. Instead, they interact with it from an external perspective. So they end up covering a large surface of the application, as shown in the illustration. They rely on the client side working as well as all the pieces of software in the backend (the entire application).

• For example, In an E2E test to validate whether it’s possible to add an item to a cart:

  • It wouldn’t directly call the addToCart() function.

  • Instead, it would open your web application, click the buttons with “Add to Cart” written on them, and then check the cart’s content by accessing the page that lists its items.

E2E tests also tend to take more time to run and, therefore, run less frequently. Unlike in unit tests, it’s not feasible to run end-to-end tests whenever you save a file.

E2E tests are very valuable and expensive, take relatively more time to run, and need a smaller quantity. So these tests are more suited for a later stage of the development process. Thus they are at the very top of the testing pyramid.

E2E tests can be divided into 2 parts:

1. Testing HTTP APIs

2. Testing GUIs

[5.1] Testing HTTP APIs

Tests for HTTP APIs are excellent for ensuring that services follow the established “contracts”. When multiple teams have to develop different services, these services must have well-defined communication standards, which you can enforce through tests. Tests will help prevent services from not being able to talk to each other

HTTP API tests have a narrower scope than GUI tests as they only focus on probing the backend of the application. Hence, the testing pyramid divides the area for end-to-end tests and places HTTP API tests below GUI tests.

For example, let's say we have an endpoint to get items in the cart:

• To retrieve the cart’s content, the client must send a request to GET /carts/:username/items.

• To write a test that uses HTTP requests to add items to a cart and check the cart’s contents. Even though you are making HTTP requests instead of calling functions, the general formula for tests should be the same: (Arrange, Act, Assert).

• Because tests for RESTful APIs require only a client capable of performing HTTP requests and inspecting responses, we can write them within Jest using fetching libraries like Axios to perform HTTP requests within our tests.

// server.test.js
const axios = require("axios");
const apiRoot = "http://localhost:3000";
const app = require("./server");

// HELPER FUNCTIONS
const getItems = async username => {
  const response = await axios.get(`${apiRoot}/carts/${username}/items`);
  return response;
};

test("getting cart items for a user", async () => {
  // 1. Lists the items in a user’s cart
  const itemsResponse = await getItems("lucas");
  // 2. Checks whether the response’s status is 200
  expect(initialItemsResponse.status).toBe(200);
  // 3. Checks whether the response data include the correct items
  expect(await finalItemsResponse.data.json()).toEqual(["cake"]);
});

// Stops the server after finishing all tests
afterAll(() => app.close());

[5.2] Testing GUIs

GUI (Graphical User Interface) tests cover your entire application. They will use its client-side to interact with your backend-side, therefore, touching every single piece of your stack. that's why they're usually called "UI tests".

UI tests require specialized tools capable of interacting with web page elements, such as buttons and forms, and controlling a real browser. Popular tools for UI testing, including Cypress, TestCafe, and Selenium, allow browser interaction through JavaScript control.

UI tests follow a similar structure to other types of tests, including setting up a scenario, performing actions, and making assertions. However, the main difference is that UI tests involve browser interactions, where actions happen through the browser, and assertions depend on a web page's content.

Because these tests cover all parts of your application, they have the highest place in the testing pyramid, as shown below. They take the longest to run, but they also provide the strongest possible guarantees.

Summary

The testing pyramid is a metaphor for categorizing tests based on their frequency, quantity, scope, and quality guarantees. As we move up the pyramid, tests become less frequent but more valuable, with broader scope and stronger quality guarantees.

Test runners organize tests, generate output, and include assertion libraries to compare the output. Jest is a popular example.

Tests follow a three-step formula: arrange, act, and assert, which involves setting up a scenario, triggering an action, and checking the results.

Unit tests ensure software quality by testing functions at a granular level, providing precise feedback.

Integration tests ensure that different parts of an application work together, and may require access to external third-party libraries or dependencies like databases.

End-to-end tests interact with an application like a user, providing strong quality guarantees by simulating real-world use-case scenarios.

References

Testing Javascript Applications

This book focuses on Putting those pieces together and answers questions like :

• Should software engineers always write tests?

• If so, which types of tests, for what, and how many?

• How do software development and QA fit together?

This book contains 12 chapters divided into three main parts:

1. Testing JavaScript Applications: covers what automated tests are, why they are important, the different types of automated tests, and how each type of test impacts your projects.

2. Writing Tests: uses practical examples to teach you how to write the different types of tests that you learned about in the first part.

3. Business Impact: covers complementary techniques to amplify the positive impact that writing tests can have on your business.

We will start with Chapter 1: Introduction to automated testing which explains what automated tests are and the advantages of writing them.

[1] What is an automated test?

In the software industry, the demand for new features is growing fast, making it critical to frequently ship software that works. That’s what automated tests are here for, Developers focus on building features and no longer afford time for manual testing. At this point, writing tests is not only good practice, it’s an industry standard with more job postings requiring some degree of knowledge about automated software testing. Tests are valuable for projects of all sizes because they:

• Help avoid defects.

• Reduce the cost of failure associated with a project.

So, Automated testing is simply replacing customer interactions with code.

[1.1] Replacing Customer Interactions with Code

Let’s think about how a user tells our program to add something to a shopping cart:

• The application allows users to interact through a website that sends an HTTP request to the backend to add items to their cart. The addToCart function identifies the customer's cart based on the sender's session and updates the website according to the server's response.

  

• We can replace the customer with a piece of software that can call the addToCart function. Now, we don’t depend on someone to manually add items to a cart and look at the response. Instead, we have a piece of code that does the verification for us. That’s an automated test.

  

• Also, When testing, we can replicate user actions, such as adding items to a cart, to simulate real-world scenarios. By doing so, we can detect any potential bugs or issues before they occur in the production environment, which can be more costly to fix.

[1.2] Testing Functionality with External Dependencies

Tests can also interact with larger scopes by testing functionality that uses External Dependencies like a Database.

For example: if we want to test a scenario like "Adding a large number of macaroons to the cart":

• Before that, The server must check the database to ensure that there are enough macaroons in stock before adding them to the cart. If the quantity requested is smaller than or equal to the amount in stock, the macaroons will be added to the cart, and the server will send a response to the client which updates accordingly.

  

NOTE: When conducting tests, it is important to use a separate database instead of the production database to avoid the risk of losing data or causing inconsistencies. A separate database also allows for easier identification of bugs as the test environment is fully controlled and not influenced by customer actions.

[1.3] Role of Tests in Software Development

Tests play a crucial role in software development, but it is important to understand their limitations. "Tests can’t prove your software works; they can only prove it doesn’t".

Tests serve as experiments, encoding the developer's expectations about how the software should behave. However, just because tests have passed in the past does not always mean the application will behave the same way in the future. That's why it's important to increase the efficacy of tests to ensure that they closely resemble what real users do. The more tests there are, and the more they simulate actual user behavior, the more guarantees they provide.

Despite all this, automated tests do not replace the need for manual testing. Manual testing, which involves verifying work as end-users would do, and investing time in exploratory testing, is still indispensable.

[2] Why automated tests matter?

Tests provide quick and fail-proof feedback, which improves the development process in several ways. We will examine how swift and precise feedback can:

1. Makes the development workflow more uniform and predictable

2. Facilitates issue reproduction and test case documentation

3. Enhances collaboration among different teams

4. Shortens the time to deliver high-quality software

[2.1] Predictability

Having a predictable development process means preventing the introduction of unexpected behavior during the implementation of a feature or the fixing of a bug. Also Reducing the number of surprises during development makes tasks easier to estimate and causes developers to revisit their work less often.

• Manually ensuring that your entire software works as you expect is a time-consuming and error-prone process.

• Tests improve this process because they decrease the time it takes to get feedback on the code you write and, therefore, make it quicker to fix mistakes.

To illustrate how tests can make development more predictable, let’s imagine we have a new feature: "Enable customers to track the status of their orders"

• Manually testing the "tracking" feature of the shopping process would be time-consuming, requiring the tester to go through the (testing environment setup + shopping process) each time. This would involve:

  1. clearing databases

  2. opening a browser

  3. adding items to the cart

  4. scheduling a delivery, going through the checkout

  5. finally testing the tracking feature.

• As we can see, the manual testing process is time-consuming, developers may write bigger chunks of code at a time, delaying feedback on the software's performance, and By the time the feedback arrives, it may be too late, making it difficult to locate bugs in the new code written before the testing process.

• With an automated test, you can write less code before getting feedback. So your automated tests can call the trackOrder functionality directly and you can avoid touching unnecessary parts of your application before you’re sure that the trackOrder functionality works correctly.

  

Writing tests for small chunks of code can make it easier to locate bugs and issues. If a test fails after writing only a few lines of code, it is easier to identify the root cause of the issue. on the other hand, if a large amount of code is written before testing, it becomes more challenging to identify the source of the problem, especially if other parts of the application are affected.

• Automated tests provide early detection of issues, enabling developers to make corrections quickly. Running tests frequently provides precise feedback on which part of the application is broken as soon as it occurs.

The less time it takes to get feedback once you’ve written code, the more predictable your development process will be.

[2.2] Reproducibility

In manual testing, the more steps a particular task has, the more likely a human is to make mistakes following them. This process is also long and error-prone, and there are many different ways to approach each testing step.

Automated tests ensure that these steps are followed to the letter, making it easier and quicker to reproduce bugs to fix them and ensure they aren’t present anymore. This is particularly important when testing applications that have multiple testing steps because we can ensure that these steps are followed exactly each time.

Also, If the list of test cases grows too long or if there are too many steps, the room for human mistakes gets bigger.

• Here is an example of a case with multiple bugs that require the same repeated steps to be reproduced and tested manually:

  

• Even if you decide to maintain a checklist for those test cases, you will have the overhead of keeping that documentation always up-to-date. If you ever forget to update it and something not described in a test case happens, who’s wrong—the application or the documentation?

Automated tests do the exact same actions every time you execute them. When a machine is running tests, it neither forgets any steps nor makes mistakes.

[2.3] Collaboration

When working with other developers, new concerns arise regarding how changes to different parts of the application may interfere with each other.

For example, if you are working on a new feature feat 1 and another developer (Alice) is working on another feature feat 2, How to ensure that the 2 features are not going to interfere with each other?

• This requires coordination and communication to ensure that everyone's work is compatible and doesn't interfere with each other. This is done by manually testing changes that are resulted from the integration between both features, and this will be additional effort added for testing.

  

• Besides being time-consuming, this process is also error-prone. You have to remember all the steps and edge cases to test in both your work and Alice’s, an also still need to follow them exactly.

Adding automated tests to solve this benefits everyone. Tests serve as up-to-date documentation, guiding further work and saving time in the future. If multiple developers are working on a project, automated tests ensure that changes to one part of the application don't interfere with another.

Writing tests whenever changes are made creates a productive collaboration cycle, where one developer helps those who will work on that part of the codebase next.

Well-written tests are the best documentation a developer can have because they are always up-to-date and need to pass.

This approach reduces communication overhead but does not eliminate the need for communication, which is the foundation stone for every project to succeed. Automated tests remarkably improve the collaboration process, but they become even more effective when paired with other practices, such as code reviews.

[2.4] Speed

While tests improve the development process, ultimately, what matters for the business is speed and correctness. When developers can produce code quickly, ensure it's bug-free, and integrate it with everyone else's work, the business succeeds. Preventing regressions and making deployments safer, and also contribute to the success of the business.

While writing tests does have a cost in terms of time, the benefits are greater than the drawbacks. Although writing a test may take more time initially than doing a manual test, the value extracted from it increases the more it's run.

For example:

• If it takes five minutes to write an automated test and one minute to do a manual test, as soon as the automated test runs for the fifth time, it will have paid for itself. Given how frequently tests are run, the time invested in writing them is well worth it.

• In contrast to manual testing, which will always take the same amount of time or more. As time passes, the total effort involved in manual tests grows much quicker.

The difference in effort and time between writing automated tests and performing manual testing:

Writing tests is like making an investment in stocks. You may pay a big price up-front, but you will continue to reap the payoffs for a long time.

• Long-term projects benefit the most from tests because the longer the project runs, the more effort is saved, and the more you can invest in new features or other meaningful activities.

• Short-term projects don't benefit much from tests since they don't live long enough to justify the effort saved with testing over time.

Summary

Automated tests are programs that automate the task of testing software. They interact with the application, compare its output to expected output, and provide feedback when output is incorrect.

Automated tests reduce the distance between writing code and receiving feedback, making the development process more predictable and reducing surprises. They always follow the same steps and make it easier to reproduce bugs. Well-written tests serve as documentation for developers and help businesses deliver higher-quality software faster, driving up profits.

Although writing tests requires an investment of time, the more often a test runs, the more time it saves, making them more critical for long-term projects.

References

Testing Javascript Applications

In this article, we'll explore why data structures and algorithms matter for frontend development, provide real-life examples of how they have been used in frontend projects, and show you how to leverage them to take your frontend skills to the next level. Whether you're just starting out or a seasoned pro, learning about data structures and algorithms is a must if you want to stay ahead of the curve in this rapidly changing industry.

[1] What are Data structures and algorithms?

Data structures and algorithms (D&A) are two of the most fundamental concepts in computer science. Data structures are ways of organizing data, while algorithms are procedures for solving problems. Together, they form the basis of all computer programming.

• Data structures allow us to store and organize data in a way that is efficient and easy to access. For example, if we are building a website that displays a list of products, we need to store the product data in a data structure that allows us to quickly find the product that the user is looking for.

• Algorithms allow us to solve problems that are too complex to be solved manually. For example, if we are building a website that allows users to search for products, we need to use an algorithm to search the product database and return the results to the user.

There are many different types of data structures and algorithms, and each one has its strengths and weaknesses. The best data structure or algorithm for a particular problem will depend on the specific requirements of the problem.

[2] How data structures and algorithms can be used in frontend development?

As a frontend developer, you may be used to focusing on creating visually appealing interfaces and writing clean, maintainable code. However, there's another aspect of coding that can significantly impact the performance and efficiency of your applications: Data structures and Algorithms. By understanding some concepts, you can optimize your code, solve complex problems, improve user experience, and future-proof your skills. Here are some of the key benefits:

[2.1] Optimizing Performance

In frontend development, performance is critical. Slow-loading pages or clunky interfaces can turn users away and hurt your website's effectiveness. By using the right data structure or algorithm, you can optimize your code for performance. For example:

• Using arrays instead of loops to search for data can significantly speed up your code's execution time.

  • Let's say you have a large dataset that you need to search through frequently. Using a linear search algorithm to find a specific item could be slow and inefficient, especially if the dataset is very large. However, by using a binary search algorithm with a sorted array, you can significantly improve performance. This is because a binary search algorithm can find the target item in a much shorter amount of time by dividing the dataset in half at each iteration.

• Another example is when you need to render a large list of items on a webpage. Using a simple loop to iterate through the list and render each item can be slow and cause the page to lag. However, by using a technique called virtualization, you can render only the items that are currently visible on the screen, and dynamically load additional items as needed. This can significantly improve the performance and speed of your application.

[2.2] Improving User Experience

Good user experience is key to retaining users and keeping them engaged with your website. By using data structures and algorithms, you can build more interactive and dynamic user interfaces. For example:

• Let's say you have a form with multiple input fields, and you want to highlight the next field when the user finishes filling out the current field. By using a queue data structure, you can keep track of the order in which the fields should be filled out and easily highlight the next field when the user submits the current one. This can help users navigate the form more easily and provide a better overall experience.

• Another example is when you want to implement autocomplete functionality in a search bar. By using a Trie data structure, you can efficiently store and search through a large dictionary of possible search terms. This can provide users with more accurate and relevant search suggestions, and make the search experience faster and more seamless.

[2.3] Solving Complex Problems

Frontend development often involves solving complex problems, such as data processing, caching, and real-time updates. By using the appropriate data structures and algorithms, you can tackle these challenges more effectively. For example:

• Let's say you're building a real-time chat application that needs to display messages in chronological order as they are received. By using a heap data structure to store the messages, you can keep them in the correct order based on their timestamp, and easily retrieve the most recent messages to display to the user. This can make the chat application more efficient and responsive, and provide a better user experience.

• Another example is when you need to implement caching in localstorage to improve performance. By using a cache data structure, such as a hash table or a Least Recently Used (LRU) you can store frequently accessed data in memory for faster access. This can significantly improve the speed and efficiency of your application, especially when working with large datasets or repeated expensive operations.

[2.4] Understanding the Browser

Understanding data structures and algorithms can also help you understand how the browser works behind the scenes, which can be valuable for debugging and troubleshooting. For example:

• Let's say you're experiencing performance issues with your website, and you suspect that it may be related to the way the browser is handling the Document Object Model (DOM) tree. By understanding how the browser parses and manipulates the DOM tree, you can more easily identify the root cause of the performance issue and optimize your code accordingly. Additionally, understanding the browser's caching and rendering mechanisms can help you create more efficient and faster applications.

[2.5] Future-Proofing Your Skills

• Finally, learning about data structures and algorithms can future-proof your skills as a frontend developer. As technology continues to evolve, the ability to understand and apply these concepts will become increasingly valuable. For example:

  • Many modern frontend frameworks, such as React and Vue.js, rely heavily on data structures and algorithms to optimize performance and provide a seamless user experience. By understanding these concepts, you can more easily understand how these frameworks work under the hood, and how to use them effectively to build scalable and efficient applications.

• Additionally, as the field of frontend development continues to grow and change rapidly, it's important to stay up-to-date with the latest trends and technologies. By investing time in learning about data structures and algorithms, you can develop a deeper understanding of how different frontend technologies work, and how to choose the best tools and frameworks for your projects. This can help you stay ahead of the curve and remain competitive in this fast-paced industry.

These are just a few examples of how learning data structures and algorithms can benefit frontend developers. If you are a frontend developer, I encourage you to learn these essential concepts. It is an investment that will pay off in the long run.

[3] Real-life examples of how data structures and algorithms have been used in frontend development

Now that we've explored the benefits of data structures and algorithms for frontend development, let's take a look at some real-life examples of how these concepts have been applied in actual projects.

Note: Most of these examples will happen if we're storing data from frontend side and not dealing with database from the backend. However, data structures and algorithms are still important for backend developers, as they can help to improve the performance and efficiency of their code.

1. Autocomplete search bars

   • Tries can be used to efficiently store and search through a large dictionary of possible search terms for autocomplete functionality.

2. Chat applications

   • Heaps can be used to store messages and keep them ordered by their timestamps so that the most recent messages can be easily retrieved and displayed.

3. Rendering lists with a large number of records

   • Virtualization techniques can be used to render only the items that are currently visible on the screen, and dynamically load additional items as needed, improving the performance and speed of the application.

4. Real-time data processing

   • Data structures and algorithms can be used to choose the most efficient and scalable approach to processing data, such as using a radix tree for IP address lookups to improve speed and scalability.

5. Forms with multiple input fields

   • Queues can be used to keep track of the order in which the fields should be filled out and easily highlight the next field when the user submits the current one.

6. Handling application state

   • Understanding different data structures can help frontend developers choose the right data structure for a particular task, such as using a hash table instead of an array to store products in a shopping cart and other different state items.

7. Filtering data

   • Binary search trees (BST) can be used to quickly find data items that match specific criteria when displaying a list of data on a frontend.

8. Recursion & Call Stack

   • The browser call stack is the closest thing to the stack that is used by frontend developers. The browser call stack is a data structure that stores information about the functions that are currently executing in a web browser. The call stack is used to track the execution of functions and to help debug JavaScript code.

   • The call stack can be used to debug JavaScript code by providing information about the current function that is executing and the functions that have been called before it. This information can be used to identify the source of a JavaScript error.

9. Frontend Libraries

   1. React Virtualized uses windowing and a combination of data structures and algorithms to efficiently manage large, scrollable lists and tables in React applications.

   2. D3.js provides a wide range of data structures and algorithms for manipulating and visualizing data, such as force-directed graph layouts that use physics simulations to position nodes.

   3. Lodash includes various data manipulation and functional programming tools, such as memoization using hash table data structures to cache function call results.

• By using libraries like these, frontend developers can leverage the power and efficiency of data structures and algorithms to build faster, more responsive, and more scalable applications.

These are just a few examples of how data structures and algorithms can be used in frontend development. By utilizing these tools effectively, developers can create faster, more efficient, and more user-friendly applications.

[4] How to Learn Data Structures and Algorithms as a Frontend Developer

[4.1] Choosing the right programming language for learning D&A

Learning data structures and algorithms is important for frontend developers, However, it's worth noting that JavaScript, the primary language used in frontend development, doesn't have built-in support for most data structures and algorithms, so developers need to create them from scratch or use libraries and modules that provide these functionalities.

Fortunately, there are many resources available to help frontend developers learn and apply these concepts effectively. For example, developers can use other languages like Python, C++, or Java, which have built-in support for many data structures and algorithms. Additionally, there are many libraries and modules available for JavaScript that provide similar functionalities. By leveraging these resources, frontend developers can build more efficient and effective applications that meet user needs.

[4.2] Tips for learning data structures and algorithms

• Start with the basics

  • Begin by learning fundamental concepts such as arrays, linked lists, stacks, queues, sorting algorithms, and searching algorithms. Understanding these concepts will help you grasp more advanced topics.

• Practice implementation

  • Implement data structures and algorithms in your code, starting with simple examples and gradually working your way up to more complex problems. This approach will help you gain hands-on experience and build your skills.

  • Websites like LeetCode, HackerRank, and Codeforces offer exercises and problems to practice implementing these concepts.

• Utilize online resources

  • There are many free and paid resources available online, including courses, tutorials, and books that cover data structures and algorithms.

  • My recommendation is to go with "Data Structures and Algorithms in Python" by Michael T. Goodrich, Roberto Tamassia, and Michael H. Goldwasser.

• Learn from other developers

  • Collaborate with experienced developers through online communities, meetups, and mentorship programs. This approach can help you learn new techniques, get feedback, and gain a better understanding of how these concepts are applied in real-world scenarios.

• Apply what you learn

  • Look for opportunities to use data structures and algorithms in your frontend development projects to optimize performance, improve user experience, and solve complex problems. By applying what you learn, you can gain a deeper understanding of these concepts and develop the skills necessary to become a more efficient and effective frontend developer.

conclusion

In conclusion, data structures and algorithms are essential. By learning about data structures and algorithms, frontend developers can use them to build websites that are more efficient, high-performing, and user-friendly.

There are many resources available to learn about data structures and algorithms, including books, online courses, and tutorials. I encourage you to check out some of these resources and start learning about data structures and algorithms today.

By investing time in learning these concepts and applying them to your work, you can build better, more efficient code and stay ahead of the curve in this rapidly changing industry.