Forem: nj145

5 Ways to improve productivity and focus as a developer

nj145 — Thu, 23 Mar 2023 21:41:05 +0000

As a developer, you're no stranger to those moments when you're staring at your screen, trying to get work done, but the productivity fairy just won't sprinkle her magic dust on you.
I've faced this myself a lot of times in my career and with several tried and tested methods I feel that I have got some control over the situation now. So, I would like to share a few tips here that has helped me personally to stay focused and improve my productivity over the past several years.

Planning

This might sound uncool or boring, but this is the key. Make a to-do list.
The first thing I do when I start my day at work is make a to-do list. I write down every single thing I want to accomplish, weather it's a coding task or following up on certain topic with a co-worker or replying to that email which you have been putting off for a while now.
As you get done with each of these tasks you get a sense of accomplishment and that'll help you keep motivated to check off the remainder of your tasks.

Avoid multi-tasking

Do you ever feel like you're juggling five different tasks at once, and they all come crashing down on your head? I've been there too. What has helped me there is to focus on one thing at a time and give it all your attention. This is where the to-do list you created in Step 1. can help you prioritize your tasks. Once you do that, you'll be amazed at how much faster you'll complete your tasks without the stress of trying to do everything at once.

Take breaks

Have you ever noticed that the longer you work without a break, the less productive you become? It's science! Take a quick break every hour to stretch your legs, grab a snack, or do a quick walk. You'll come back feeling refreshed and ready to take on the world (or at least your coding tasks). But... beware..do not get carried away during this break by endless scrolling through Instagram or Tiktok, or else before you realize your brain would've consumed a ton of unwanted junk that will further keep your focus away from your task. I learned this the hard way. Finally, with some practice now I'm at a point where I can stop myself from being pulled into the social media loop before it's too late!

Keep your workspace organized like a neat freak

Clutter and chaos are productivity killers. Keep your workspace organized and tidy so you can focus on what really matters – coding like a boss! Plus, you'll feel like a superhero when you can find that one file or note you need in seconds. I've certainly seen a huge difference in the way I function (especially when working from home) when I sit at my work desk vs when I'm on the couch. I tend to be more focused and productive when I'm at my desk with very little distractions.

Learn new skills like a kid in a candy store

Learning new things is like getting an extra life in a video game. Take advantage of all the amazing resources out there, like online courses, forums, and YouTube tutorials. You can take breaks in between your coding tasks to shift focus to learn something new that can probably open you up to some new ideas which in turn can help you with your current task.

I'd love to hear from you as to what are some of your favorite tips and tricks to improve productivity and stay focused in your daily coding routine.. :)

All you need to know about Next.js Image Optimization and how to effectively make use of it

nj145 — Tue, 14 Mar 2023 20:00:56 +0000

Introduction

Images can have a significant impact on website loading times, which can in turn affect user experience and website performance.
Let's look at the importance of image optimization and how Next.js provides us this capability out-of-the-box.

Let's say you need to display an image on your web page. How would you traditionally do this? By adding an image to your UI using the HTML <img> element. Something like this:

The img here is being loaded from an external server and let's examine the file size and download time.

Now, you may think 675ms is fairly quick, but if you had multiple images on your web page you would see it considerably slowing down your page load.

Next.js Image Component to the rescue

The Next.js Image component includes a variety of built-in performance optimizations and here are some of them:

Improved Performance - The Image component can automatically resize images to the correct size for the container they are displayed in. This helps to reduce the file size of images and improve loading times.
Lazy loading - The Image component uses lazy loading to defer the loading of images until they are needed. Images are only loaded when they enter the viewport.
Responsive images - The Image component supports responsive images, which allows different images to be displayed depending on the user's screen size. This helps to ensure that images are displayed at the correct size on different devices, while also reducing the file size of images.
Visual Stability - Prevent Cumulative Layout Shift (CLS) is a metric that measures the visual stability of a web page during the loading process. It measures how much the page layout changes as elements load and shift around on the screen.
You can read more about CLS here - https://nextjs.org/learn/seo/web-performance/cls

Let's see this in action

Next.js Image component can be used in different ways and let's compare it's performance with that of a generic html img in all of these cases.

Scenario 1: Loading a Static Image using Next.js Image component

import Head from 'next/head'
import Image from 'next/image'
import SampleImg from '../../public/sampleImg.jpg'

export default function Home() {
  return (
    <>
      <Head>
        <title>Image Optimization Demo</title>
      </Head>
      <main>
        <div>
            <img src='https://m.media-amazon.com/images/I/71ZOjO-tDRL._SX3000_.jpg' alt='sample' width={960} height={400} />
        </div>
        <div>
            <Image src={SampleImg} alt='Sample' height={400} width={960}></Image>
        </div>
      </main>
    </>
  )
}

In this Next.js application, I've loaded 2 images - one using the HTML img element and the other using Next.js Image component by using a local image.

Now, let's compare the loading times and file sizes of both the image files:

As you can see here, the Next.js Image loads much faster
and also it uses the webp format for the image which offers better compression and smaller file sizes than JPEG, without sacrificing image quality.

Scenario 2: Loading a remote Image

import Head from 'next/head'
import Image from 'next/image'
import SampleImg from '../../public/sampleImg.jpg'

export default function Home() {
  return (
    <>
      <Head>
        <title>Image Optimization Demo</title>
      </Head>
      <main>
        <div>
            <img src='https://m.media-amazon.com/images/I/71ZOjO-tDRL._SX3000_.jpg' alt='sample' width={960} height={400} />
        </div>
        <div>
            <Image src='https://m.media-amazon.com/images/I/71ZOjO-tDRL._SX3000_.jpg' alt='Sample' width={960} height={400}></Image>
        </div>
      </main>
    </>
  )
}

To use a remote image, the src property should be a URL string, which can be relative or absolute. Because Next.js does not have access to remote files during the build process, you'll need to provide the width and height.

However, if you do this, you will most likely get the following error:

The error indicates that in order to protect your application from malicious users, configuration is required in order to use external images. This ensures that only external images from your account can be served from the Next.js Image Optimization API. These external images can be configured with the remotePatterns property in your next.config.js file, as shown below:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'm.media-amazon.com',
        port: '',
        pathname: '/images/**',
      },
    ],
  },
}

module.exports = nextConfig

Adding this configuration should load the image successfully.

Here, again if we compare the results, you can see that the Next image loads much faster.

Scenario 3: The size of the image is unknown in case of a remote Image

One of the ways that images most commonly hurt performance is through layout shift The way to avoid image-based layout shifts is to always size your images. This allows the browser to reserve precisely enough space for the image before it loads.
But, What if I don't know the size of my images?

If you are accessing images from a source without knowledge of the images' sizes, you can use fill prop which allows your image to be sized by its parent element.

import Head from 'next/head'
import Image from 'next/image'
import SampleImg from '../../public/sampleImg.jpg'

export default function Home() {
  return (
    <>
      <Head>
        <title>Image Optimization Demo</title>
      </Head>
      <main>
        <div>
            <img src='https://m.media-amazon.com/images/I/71ZOjO-tDRL._SX3000_.jpg' alt='sample' width={960} height={400}></img>
        </div>
        <div style={{ position: 'relative', width: '960px', height: '400px' }}>
            <Image src='https://m.media-amazon.com/images/I/71ZOjO-tDRL._SX3000_.jpg' alt='Sample' fill></Image>
        </div>
      </main>
    </>
  )
}

Here, when loading the Next Image, we have not specified the size, instead used the fill prop which will size the image based on it's parent div's dimensions.

Lastly, consider a case where a image needs to be on the immediate viewport when a web page is loaded.
- In such case we can use the priority property on the image. Doing so, allows Next.js to specially prioritize the image for loading. When an image is marked with a priority, the browser will attempt to download and render that image before other images on the page. This way we can prevent any kind of flicker that may occur when loading a web page with an Image in the immediate viewport.

Responsive Image loading

As we already discussed, the Next image component supports responsive images, which allows different images to be displayed depending on the user's screen size. Let's examine this in action.

If you resize the screen to different sizes, it can be seen that for each of the Next image requests, query parameters of the width and height are passed in depending on the screen size.

Here's an image request for screen size of a tablet.

This is another request for screen size of a mobile.

So to conclude, Next.js Image component provides us with various Image Optimization techniques which we can leverage to improve the page load and overall web page performance which otherwise would require us to manually implement these optimization techniques thereby saving us developers a ton of time! All we need to do is remember to use the Image component in a Next.js application.
However, I'd also like to point out that if you are pulling in the images dynamically from external sites that you do not trust, be cautious when using Next Image component as you need to white-list the domains.

Happy Coding! :)

React - Multi-select/deselect selection input using MUI Autocomplete

nj145 — Fri, 10 Mar 2023 23:40:26 +0000

Introduction

Autocomplete is a popular UI component used in web applications to enhance user experience and productivity. It allows users to quickly search and select from a large set of options.
Material UI (MUI) provides an AutoComplete component which is very useful especially if you need to search and select multiple options.

https://mui.com/material-ui/react-autocomplete/#multiple-values
Here's what MUI offers us out of the box.

But, the MUI Autocomplete has some limitations as well. Suppose, I want to do a select all from a large list, it is a tedious task to keep clicking and selecting. Also, there is no way to select/deselect all of the filtered items from the list easily.

So, this is the exact problem I had to solve. I wanted to filter and select from a very large list of items and also provide the ability to select/deselect all options or select/deselect all of the filtered options.

Suppose we have a list of Departments under different Companies and we need a way to either select/deselect them all or filter by a particular Department and select all filtered options.

I've come up with a custom AutoComplete to solve this very problem which uses MUI Autocomplete and some javascript.

Tools and Dependencies:

React
Material UI
lodash

Link to GitHub Repo - https://github.com/nj145/multiselectDeselect-dropdown

Open in CodeSandbox - https://codesandbox.io/s/github/nj145/multiselectDeselect-dropdown

Code Explained

We have 2 components:
- Selection
- MultiSelectAll

Selection component

import React, { useState } from "react";
import { Grid, TextField, Typography } from "@mui/material";
import MultiSelectAll from "./MultiSelectAll";

const Selection = () => {
  const initialValue = [{ label: "Uber/Sales", value: "14" }];

  const departmentNames = [
    { label: "Amazon/Sales", value: "1" },
    { label: "Amazon/Customer Support", value: "2" },
    { label: "Google/Operations", value: "3" },
    { label: "Google/Engineering", value: "4" },
    { label: "Google/Services", value: "5" },
    { label: "Google/Customer Support", value: "6" },
    { label: "Netflix/Sales", value: "7" },
    { label: "Netflix/Engineering", value: "8" },
    { label: "Netflix/Services", value: "9" },
    { label: "Netflix/Operations", value: "10" },
    { label: "Microsoft/Sales", value: "11" },
    { label: "Microsoft/Operations", value: "12" },
    { label: "Microsoft/Customer Support", value: "13" },
    { label: "Uber/Sales", value: "14" },
    { label: "Uber/Services", value: "15" },
    { label: "Uber/Customer Support", value: "16" },
    { label: "Uber/Engineering", value: "17" },
    { label: "Uber/Operations", value: "18" },
    { label: "Walmart/Sales", value: "19" },
    { label: "Walmart/Services", value: "20" },
    { label: "Walmart/Operations", value: "21" },
    { label: "Walmart/Engineering", value: "22" },
    { label: "Walmart/Customer Support", value: "23" },
    { label: "CVS/Sales", value: "24" },
    { label: "CVS/Customer Support", value: "25" },
    { label: "CVS/Engineering", value: "26" },
    { label: "CVS/Operations", value: "27" }
  ];

  const getTextBoxInputValue = (input) => {
    return input.map((itm) => itm.label).join(";");
  };

  const [currentSelection, setCurrentSelection] = useState(
    getTextBoxInputValue(initialValue)
  );

  const handleSelectionChange = (result) => {
    const valueToSave = result.map((itm) => itm.label).join(";");
    setCurrentSelection(valueToSave);
  };

  return (
    <Grid container flexDirection="column" alignItems="center">
      <Grid item xs={12} sx={{ p: 2 }}>
        <MultiSelectAll
          sx={{ maxheight: "700px" }}
          items={departmentNames}
          selectAllLabel="Select All"
          value={initialValue}
          onChange={handleSelectionChange}
        />
      </Grid>
      <Grid item xs={12} sx={{ p: 2 }}>
        <Typography>Selected items:</Typography>
        <TextField sx={{ width: "450px" }} value={currentSelection} />
      </Grid>
    </Grid>
  );
};

export default Selection;

This component displays the MultiSelectAll component and a simple text box that lists all the selected values separated by a semi colon.
The MultiSelectAll component takes in an array of options in the form of label-value pairs and renders them as a dropdown menu. It also displays a "Select All" option, allowing users to select all the available options with a single click.
When a user selects or deselects an option, the handleSelectionChange function is called. This function takes in the updated selection and updates the state of the currentSelection variable by converting the selected options' labels into a semicolon-separated string.

MultiSelectAll Component

import React, { useState, useEffect, useRef } from "react";
import isEqual from "lodash/isEqual";
import debounce from "lodash/debounce";

import {
  Autocomplete,
  Checkbox,
  Grid,
  FormControlLabel,
  TextField
} from "@mui/material";
import { createFilterOptions } from "@mui/material/Autocomplete";

const MultiSelectAll = ({ items, selectAllLabel, onChange, value }) => {
  const [selectedOptions, setSelectedOptions] = useState(value);
  const [filteredOptions, setFilteredOptions] = useState(null);
  const multiSelectRef = useRef(null);

  useEffect(() => {
    onChange(selectedOptions);
  }, [selectedOptions]);

  const handleToggleOption = (selectedOptions) =>
    setSelectedOptions(selectedOptions);
  const handleClearOptions = () => setSelectedOptions([]);
  const getOptionLabel = (option) => `${option.label}`;

  const allItemsSelected = () => {
    // if options are filtered, check to see if all filtered options are in selected items
    // if yes, selectAll - true, else selectAll - false
    // if options are not filtered, check to see if all items are selected or not
    if (filteredOptions?.length !== items.length) {
      const excludedFilteredOptions = filteredOptions?.filter(
        (opt) => !selectedOptions.find((selOpt) => selOpt.label === opt.label)
      );
      if (excludedFilteredOptions?.length > 0) {
        return false;
      }
      return true;
    }
    const allSelected =
      items.length > 0 && items.length === selectedOptions.length;
    return allSelected;
  };

  const clearSelected = (selOptions) => {
    // filter out the selOptions
    if (selOptions.length > 0) {
      setSelectedOptions(
        selectedOptions.filter(
          (item) =>
            !selOptions.find((selOption) => selOption.label === item.label)
        )
      );
    } else {
      setSelectedOptions([]);
    }
  };

  const handleSelectAll = (isSelected) => {
    let selectedList = [];
    if (
      filteredOptions?.length > 0 &&
      filteredOptions.length !== items.length
    ) {
      selectedList = items.filter((item) =>
        filteredOptions.find(
          (filteredOption) => filteredOption.label === item.label
        )
      );
    }
    if (isSelected) {
      if (selectedList.length > 0) {
        setSelectedOptions([...selectedOptions, ...selectedList]);
      } else {
        setSelectedOptions(items);
      }
    } else {
      clearSelected(selectedList);
    }
  };

  const handleToggleSelectAll = () => {
    handleSelectAll(!allItemsSelected());
  };

  const handleChange = (event, selectedOptions, reason) => {
    let result = null;
    if (reason === "clear") {
      handleClearOptions();
    } else if (reason === "selectOption" || reason === "removeOption") {
      if (selectedOptions.find((option) => option.value === "select-all")) {
        handleToggleSelectAll();
        // let result = [];
        result = items.filter((el) => el.value !== "select-all");
        // onChange(result);
      } else {
        handleToggleOption(selectedOptions);
        result = selectedOptions;
        // onChange(selectedOptions);
      }
    }
  };

  const handleCheckboxChange = (e, option) => {
    if (option.value === "select-all") {
      handleToggleSelectAll();
      // if (e.target.checked) {
      //     // onChange(items);
      // } else {
      //     // onChange([]);
      // }
    } else if (e.target.checked) {
      const result = [...selectedOptions, option];
      setSelectedOptions(result);
      // onChange(result);
    } else {
      const result = selectedOptions.filter(
        (selOption) => selOption.value !== option.value
      );
      setSelectedOptions(result);
      // onChange(result);
    }
  };

  const optionRenderer = (props, option, { selected }) => {
    const selectAllProps =
      option.value === "select-all" // To control the state of 'select-all' checkbox
        ? { checked: allItemsSelected() }
        : {};
    return (
      <Grid container key={option.label}>
        <Grid item xs={12} sx={{ pl: 1, pr: 1 }}>
          <FormControlLabel
            control={
              <Checkbox
                key={option.label}
                checked={selected}
                onChange={(e) => handleCheckboxChange(e, option)}
                {...selectAllProps}
                sx={{ mr: 1 }}
              />
            }
            label={getOptionLabel(option)}
            key={option.label}
          />
        </Grid>
      </Grid>
    );
  };

  const debouncedStateValue = debounce((newVal) => {
    // console.log(isEqual(newVal, filteredOptions));
    if (newVal && !isEqual(newVal, filteredOptions)) {
      // console.log('setting filtered options');
      setFilteredOptions(newVal);
    }
  }, 1000);

  const updateFilteredOptions = (filtered) => {
    debouncedStateValue(filtered);
  };

  const inputRenderer = (params) => <TextField {...params} />;

  const filter = createFilterOptions();

  return (
    <Autocomplete
      ref={multiSelectRef}
      sx={{
        width: "350px",
        maxHeight: "120px",
        overflowY: "scroll"
      }}
      multiple
      size="small"
      options={items}
      value={selectedOptions}
      disableCloseOnSelect
      getOptionLabel={getOptionLabel}
      isOptionEqualToValue={(option, val) => option.value === val.value}
      filterOptions={(options, params) => {
        const filtered = filter(options, params);
        updateFilteredOptions(filtered);
        return [{ label: selectAllLabel, value: "select-all" }, ...filtered];
      }}
      onChange={handleChange}
      renderOption={optionRenderer}
      renderInput={inputRenderer}
    />
  );
};

export default MultiSelectAll;

The MultiSelectAll component takes in an array of items to be displayed, a label for the "Select All" option, a function to handle changes, and a value to represent the selected items.
The allItemsSelected function determines if all options are selected or not.
The handleToggleSelectAll function toggles the selection of all options when the "Select All" checkbox is checked or unchecked.
The handleChange function handles changes to the selected options. If the "Select All" option is checked or unchecked, the handleToggleSelectAll function is called. Otherwise, the handleToggleOption function is called.
The handleCheckboxChange function handles the change of an individual checkbox. If the "Select All" checkbox is checked, the handleToggleSelectAll function is called. Otherwise, the selected item is added or removed from the selected options list.
The optionRenderer function is a helper function that renders each option in the dropdown.
The Autocomplete component is used to render the multi-select dropdown. It uses the filterOptions function to filter the options based on user input. The getOptionLabel function is used to get the label of an option. The isOptionEqualToValue function is used to check if two options are equal. The renderInput function is used to render the input field.

Hope this helped! :)