Forem: saransh kataria

Copy/Pasting output from the terminal

saransh kataria — Wed, 15 May 2024 22:42:22 +0000

Manually copy-pasting the output of a terminal command with a mouse/trackpad feels tedious. It is more convenient to use commands to do so. And we can save the effort by using the built-in commands.

Mac

pwd | pbcopy

We can use pbcopy and pbpaste to copy and paste from the Mac terminal.

We can pipe the output of a command to copy its output to the clipboard. For example, to copy the current directory path, we can use

Or if we want to copy the contents of a file:

cat ~/Desktop/example.txt | pbcopy

Similarly, to paste the clipboard output in a file, we can use:

pbpaste > ~/Documents/example.txt

Windows

The commands to use on a Windows machine are clip and powershell get-clipboard.

For copying the standard output to the clipboard, we use the command line command:

<some command> | clip

For copying the current directory, we need to convert it into a command. Since %cd% is the environment variable that stores that value, we can echo that value and pipe it into the clip command.

echo %cd% | clip

Similarly, for copying a file’s contents to the clipboard, we can use

cat example.txt | clip

To paste the clipboard into a file, we can use the powershell get-clipboard command

powershell get-clipboard > example.txt

Linux

For Linux machines, we can use the terminal commands xclip or xsel.

These need to be installed first:

sudo apt-get install xclip
sudo apt-get install xsel

Using xsel, the command for copying something is

xsel --clipboard --input

So, copy the current directory, we can use:

pwd | xsel --clipboard --input

And for copying the contents of a file to the clipboard:

cat example.txt | xsel --clipboard --input

And for pasting the clipboard contents in a file, we can use:

xsel --clipboard --output > example.txt

That is all there is to copy/pasting output from the terminal to the system clipboard. If you have any questions, let us know in the comments below.

How To Get The Hash of A File In Node.js

saransh kataria — Fri, 26 Apr 2024 16:24:11 +0000

While working on a project, I wanted to do an integrity check of a file that I was referencing. So, I needed to know how to get the hash of a file in Node.js. And this post is about that.

We will use the fs and crypto modules that are available in Node.js to get the hash of a file. We will be using the createReadStream method of the fs module to read the file and get its contents. After we are done reading it, we will call the the getHash() method of the crypto module to calculate the hash of the file.

const fs = require('fs');
const crypto = require('crypto');

const getHash = path => new Promise((resolve, reject) => {
 const hash = crypto.createHash('sha256');
 const rs = fs.createReadStream(path);
 rs.on('error', reject);
 rs.on('data', chunk => hash.update(chunk));
 rs.on('end', () => resolve(hash.digest('hex')));
})

Then, we can use the getHash method to get the hash of a file. It is worth mentioning that we could have used various algorithms for hashing our file, like md5, sha1 and sha256. sha256 would be the more robust algorithm but a bit slower than the other less secure ones. For the digest method, we could have used hex or base64 depending on how we want to output the hash. We can use the above method like so:

(async () => {
  try {
    const hashValue = await getHash('path/to/file');
    console.log(hashValue);
  } catch (error) {
    console.error('Error:', error);
  }
})();

And that is all to the code and its explanation. If you have any questions, feel free to drop a comment below.

Native Popover API in HTML

saransh kataria — Wed, 24 Apr 2024 16:28:42 +0000

Popovers have been a problem that was typically solved by using a third-party solution. But that is no longer the case. We now have a native popover API in HTML supported by all browsers (Firefox added preview browser support on 16th April 2024 in version 125).

Let us take a look at how the native popover API works.

Creating a popover element

Popovers are window-like components shown when a user interacts with an element (that serves as a trigger for showing them). It usually provides additional information or context. They are typically used as tooltips, context menus, toast menus, notifications, onboarding tours, etc.

First, look at the HTML needed to create a popover using the native popover API.

<button popovertarget="wg-popover-container">Toggle popover</button>
<div id="wg-popover-container" popover>Popover content goes here</div>

By default, the container element is hidden (thanks to the popover attribute) and is only visible when a user action triggers it. We can write some JavaScript to do that. However, we can simply use native popover API in HTML without needing any JavaScript. All we need is the custom attribute called popovertarget. It controls the display/hide logic of the div with the same id as the value specified for the attribute. The corresponding element gets hidden or shown when the button gets clicked.

Note: The popover attribute has the value auto by default, meaning that the popover force closes other popovers (except ancestors) when triggered. It can be set to popover="manual" to not force the closing of elements, and manual popovers need to be explicitly closed programmatically.

Popover API and JavaScript

Even though JavaScript is not needed for usage, the popover API does provide a way to trigger popovers using JavaScript for it. The HTMLElement.togglePopover() method can be used to toggle the popover state programmatically. There also are methods for hidePopover() and showPopover() if we want to do the actions independently. Additionally, there are two events available beforetoggle and toggle which are fired before and after a transition state of a popover element.

Popover API and CSS

It is worth mentioning that the popover elements are stacked on a different layer above the rest of the page. So we do not need to worry about z-index’s. In addition to that, there are pseudo-classes, such as the :popover-open that allows us to target the element when it is opened and ::backdrop allows us to add CSS to content behind the popover.

And that is all there is to the native popover API in HTML. It is also worth noting that there is no built-in support for responsiveness in the popover API, and it needs to be handled manually. There is no built-in animation support yet, but it is in the works.

Let us know in the comments if you have any questions!

Node.js 20.6 adds built-in support for .env files

saransh kataria — Fri, 12 Apr 2024 14:19:47 +0000

Node.js 20.6 added built-in support for the .env file. This is an excellent addition to the platform and gives us the ability to load environment variables from .env files directly without using third-party packages. While it is great to see first-class support, some caveats remain.

Let us look at how it works. Assuming that you are running Node 20.6, create a .env file:

API_KEY="KEY"
DATABASE_URL="URL"

And then, you can run node using the following command:

node --env-file .env index.js

This would give you access to the variables defined in the .env file in your JavaScript code.

// index.js
console.log(`Hello ${process.env.DATABASE_URL}`)

// URL

That is it! Want to have a different production configuration? Just create a new file and point it to a .env.production file.

Order when running the command matters

A minor detail to remember when executing the script is that the env file needs to be passed in before the file name. Ideally, it should have been interchangeable, but that is not the case. The env file gets ignored if we use the command:

// .env file gets ignored in this case

node inex.js --env-file .env

Caveats

As with all experimental things, a few things are missing. Some of these might lead to people using dotenv until support for these gets added. I will mention them here and let you see if they are dealbreakers. You can also follow the GitHub issue to track missing feature support.

No Multiline Support

Multiline environment variables are not supported currently. If you add one, it will be undefined.

// .env

WORLD="Hello

World"

// index.js

console.log(Hello ${process.env.WORLD})

// running the script

node --env-file=.env index.js

Hello undefined

The same variable is defined in both the environment and file

If the same variable is defined in the environment and the file, the value from the file takes precedence. There is no way to override it with the system environment variables.

// .env

WORLD="foo"

// index.js

console.log(Hello ${process.env.WORLD})

// running the script

export WORLD="bar"

node --env-file=.env index.js

Hello foo

No variable references/expansions

Node does not support variable expansion currently. It will output the variable as a string if trying to reference another variable using $variable. This is possible in dotenv using the dotenv-expand library.

// .env

WORLD="foo"

WORLD_BAZ=$WORLD

// index.js

console.log(Hello ${process.env.WORLD_BAZ})

// running the script

node --env-file=.env index.js

Hello $WORLD

No .env.vault support

dotenv-vault is another popular package that lets you encrypt your secret and decrypt the file just in time. They are quite helpful for production and CIT environments but are not supported currently.

Conclusion

Node.js 20.6 adding built-in support for .env files is a huge step forward for the Node community. Hopefully, it does not stay experimental in the near future, and we can start using it in our applications soon!

Object destructuring in TypeScript

saransh kataria — Wed, 03 Apr 2024 14:22:39 +0000

Object destructuring is a powerful ES 6 feature that can help developers write cleaner code. It allows us to extract properties from a JavaScript object into variables.

If you are unfamiliar with it, read our post about object destructuring to know more about what is possible using it.

When it comes to object destructuring in TypeScript, the following statement doesn’t work.

const { title: string, comments: number } = blog

Technically, the way it works is that it assigns the title property of the object to a variable named string and the comments property to the number variable. This happens because JavaScript assumes that we want to destructure and rename the variables, which is valid ES6 syntax.

The right way to do object destructuring in TypeScript would be

const { title, comments } : { title: string; comments: number }  = blog

Another alternative can be to use an interface or a type declaration:

interface Blog {
  title: string
  comments: number
}

const { title, comments }: Blog = blog

By default, the types usually get inferred, and this type of object destructuring is usually not needed. But for the cases when we do, we now know how to. I hope this post was helpful. If you have any questions, feel free to drop a comment below.

Originally published at https://www.wisdomgeek.com on March 28, 2024.

Improve git clone performance in a CI pipeline

saransh kataria — Tue, 19 Mar 2024 13:46:03 +0000

Have you felt particularly annoyed by the time it takes to clone a large repository, especially one with a huge commit history? This post will discuss a simple but powerful technique to significantly improve git clone performance.

The solution is called shallow cloning, which uses the --depth=1 flag with git clone. The reason why this improves git clone performance is that it creates a clone of the git repository with history up to the depth field that we specify. So, in this case, only the most recent commit (and some necessary metadata) is fetched, and nothing else. This helps skip any older commits, tags, branches, etc. Skipping everything else helps reduce the download size and the time it takes. This is particularly useful to improve git clone performance on a CI server. All we need to do is use

git clone --depth=1 <repository-url>

It is worth mentioning that while shallow cloning does improve the clone performance, it probably is not useful if you want access to the full commit history. It also means there is no branch history, so switching to a different branch would require additional fetches. So shallow cloning is ideal for continuous integration/deployment pipelines, automated build systems, and cases where you want a quick setup for testing or performing code reviews.

If you are looking for other git-related hacks, do check out our posts about removing file from git history and deleting git branches that do not exist on remote.

Originally published at https://www.wisdomgeek.com on March 19, 2024.

Fix: Hydration failed because the initial UI does not match what was rendered on the server

saransh kataria — Wed, 13 Mar 2024 18:18:26 +0000

Originally published at https://www.wisdomgeek.com on March 13, 2024.

Within a React or Next.js app, if you encounter the error “Hydration failed because the initial UI does not match what was rendered on the server”, there could be a few reasons for it.

Let us look at all the possible reasons and potential fixes for the error.

Potential issues

Incorrect HTML formatting

The most common cause for the error is incorrect HTML formatting in our code.

But why does the browser not tell you that but instead throws the error “Hydration failed because the initial UI does not match what was rendered on the server”? Because the browser tries to fix these on its own and then does a comparison of the HTML it has from what the server sent, it fails to match the two. Thus it throws the generic error.

Some examples of invalid HTML are as follows.

Having a div element inside a paragraph is not allowed.

export const IncorrectComponent = () => {
  return (
    <p>
      <div>Incorrect HTML</div>
    </p>
  )
}

A paragraph inside another paragraph is erroneous too. The same goes for an H1, or a list item too.

export const IncorrectComponent = () => {
  return (
    <p>
      <p>p inside paragraph is invalid</p>
      <h1>H1 inside paragraph is invalid too</h1>
    </p>
  )
}


export const AnotherIncorrectComponent = () => {
  return (
    <ul>
      <p>
        <li>Incorrect HTML</li>
      </p>
    </ul>
  )
}

The Link tag that is provided by Next.js is already rendered as an anchor component. Trying to add another anchor inside it will throw an error too, since an anchor cannot be placed inside another.

export const IncorrectComponent = () => {
  return (
    <Link>
      <a>Link tag already creates an anchor tag, so this errors too</a>
    </Link>
  )
}

must have a or a before adding any table rows ( ).

export const IncorrectComponent = () => {
  return (
    <table>
      tbody is needed inside a table
    </table>
  )
}

Images inside an anchor tag throw an error too.

export const IncorrectComponent = () => {
  return (
    <a>
      <img />
    </a>
  )
}

Locale objects

When working with locale objects, like date or time objects that are being rendered in the component, it could lead to a mismatch in the output of the component. Who doesn’t love timezones, right?

export const IncorrectComponent = () => {
  return (
    {new Date().toLocaleString()}
  )
}

Incorrect CSS formatting

Incorrect CSS formatting can also lead to the error. For example, if you forget to add quotes when specifying background image

.image {
  background-image: url(https://www.wisdomgeek.com)
}

Extensions

Another possible reason is that an extension might be inserting something in the client page that might lead to this error since the rendered HTML is different than what the server sent.

Accessing the window object

If our component tries to access the window object, that is not going to be available on the server. That can lead to this error. This is pretty common when using a third-party component. Even checks like typeof window !== 'undefined' can lead to this error.

Sometimes you still need to access some of the properties mentioned above and there is no workaround. For those cases, there are a couple of possible solutions to fix it. Let us take a look at those next.

Potential workaround solutions

Use a useEffect to run only on the client side

We can intentionally render something different on the client side by using a variable that gets updated inside a useEffect hook.

import { useState, useEffect } from 'react'

export default function App() {
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true);
  }, [])

  return (
    <>
      {isClient && <>{/* Window related checks or components can go here */}</>}
      {!isClient && "Pre-rendered content"}
    </>
  )
}

Disable SSR

Another potential solution is to disable prerendering altogether for a component. In Next.js, we can do so using the following:

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('./Component'), { ssr: false })

export default NewComponent = () => {
  return (
    <>
      <DynamicComponent />
    </>
  )
}

Use suppressHydrationWarning

We can suppress the warning altogether by adding the HTML attribute suppressHydrationWarning to the component or element. For example, if we have a custom component that we want to suppress the warning for:

export default Component = () => {
  return (
    <>
      <CustomComponent suppressHydrationWarning={true} />
    </>
  );
}

And those are all the potential solutions for fixing the “Hydration failed because the initial UI does not match what was rendered on the server” error. Let us know in the comments if you are still facing the error.

How to Convert a React Component to an Image

saransh kataria — Thu, 08 Sep 2022 18:44:33 +0000

Sometimes you want to give the users the ability to download a part of the web application as an image. In that case, you want a way to convert a React component to an image. And it can be straightforward by using a third-party NPM package called html2canvas. Let us look at how to do it.

Setup

We want to first mark the div in HTML markup that we want to be downloaded when the user hits the download button. This could be a chart, user data, a table, or anything we want. We will allocate an id to that element.

<div id="print">This will be downloaded as an image</div>

We can wrap this as a React component with an event handler attached to a download button:

const App = () => {
  const handleImageDownload = () => {
    // TODO: add logic here
  };
  return (
    <>
      <button type="button" onClick={handleImageDownload}>Download</button>
      <div id="print">This will be downloaded as an image</div>
    </>
  );
}

Programming logic

As we discussed earlier, we will install thehtml2canvas NPM package.

npm install html2canvas

Then, all we need to do is use the package to fetch the corresponding div that we want to convert to an image. We then create a link in memory to download the image, click it programmatically and then remove the link from the DOM.

const handleDownloadImage = () => {
    const element = document.getElementById('print'),
    canvas = await html2canvas(element),
    data = canvas.toDataURL('image/jpg'),
    link = document.createElement('a');

    link.href = data;
    link.download = 'downloaded-image.jpg';

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

And that is all we need to do to convert a React component to an image! Hope you found this post useful.

Originally published at https://www.wisdomgeek.com on September 28, 2021.

How to Specify a Node Version in Repl.it

saransh kataria — Wed, 17 Aug 2022 21:24:08 +0000

I was recently trying to use a later version of Node on Repl.it. I wanted to use a package that supported ES Modules, and the default version did not have support for it. So I wanted to use the latest node version in Repl.it. And found that there was no direct way of doing so. But it is still possible with a few custom steps.

The setup

Repl.it allows specifying the node.js version as part of the package.json itself. But it does not use the installed version by default when running the script. But before we get to that, we need to install our node version in repl.it. To do so, we go to the package.json and add the version we want. Or we could have used the package manager interface to do so:

Configuring Repl.it

Once this is set up, we need to use this version instead of the default Repl.it Node.js version. We need to make use of a configuration for Repl.it by creating a file named .replit. You can read more about it here if you are interested.

In this file, we will add the contents:

run="npm start"

This will execute Node from the shell instead of the console. And then all that is left to do is configure the start script in our package.json file:

"scripts": { "start": "node ." }

If we wanted to start using the latest version for the shell as well, we can execute the following command in the shell:

npm config set prefix=$(pwd)/node_modules/node && export PATH=$(pwd)/node_modules/node/bin:$PATH

Optionally, we might want to re-install the packages installed if we want to target them to the higher version of node.js that we just installed.

And that should be it. Our custom Node version in Repl.it should be ready and good to go. As soon as we hit the Run button, the index.js script will be executed using the node version we specified in our package.json.

If you have any questions regarding this, feel free to drop a comment below!

Originally published at https://www.wisdomgeek.com on September 13, 2021.

Access the Clipboard in JavaScript

saransh kataria — Thu, 21 Jul 2022 00:12:57 +0000

Developers are probably the laziest people on the planet. And of all the things, copy-paste is our favorite keyboard shortcut. But what is better than hitting CTRL + C? Having a button do the copying for you! And that is now possible using an asynchronous version of the clipboard API in JavaScript.

You would have probably come across this while copying code off of a website, or an API key, or copying links from Google Drive:

The clipboard API

document.execCommand() has been available to copy text way before the clipboard API became a thing. But it was a synchronous call, did not work correctly across all browsers (permission access was not consistent either), and had some security risks associated with it.

The newer asynchronous clipboard API is supported by all browsers and is more secure (only works on HTTPS pages by default, and is not available to background tabs).

Implementing using JavaScript

// copying to clipboard
navigator.clipboard.writeText(SOME_VALUE)
    .then(() => alert("Text is now stored your cliboard!"));

// copying from clipboard
await readText = await navigator.clipboard.readText();

We will need more code to detect support in the browser and error handling. But that is the gist of the API.

And both the methods are supported in all modern browsers. And that is it. Hope this was helpful and that you start using it in the relevant places.

Originally published at https://www.wisdomgeek.com on September 9, 2021.

Using counters in CSS to number elements automatically

saransh kataria — Thu, 28 Apr 2022 21:51:58 +0000

Ordered lists have been an important part of web design for quite a while now. If we needed more control over the appearance of numbers, we had to add more HTML and/or JavaScript to do so until now. Counters in CSS save us much of that trouble.

Challenges with ol

An ordered list can be rendered as:

Item one
Item one
Item one

What if we wanted complex numbering? What if we wanted dynamic pagination? Or style the numbers in a particular manner?

Instead of doing

Item one

, we would have had to replace it by 1.Item one instead.

And then apply styles to the span tags. But we are developers. We don’t like hard-coded numbers and repetition! Counters in CSS come to our rescue.

Counters in CSS

CSS counters are variables whose values can be changed by using CSS rules. They are scoped to the current web page.

Before using counters in CSS, we need to understand its properties. counter-reset, counter-increment and counter() properties are what make the dynamic nature of counters a possibility. There are a couple of other properties as well, but these are sufficient for a basic counter.

counter-reset is used to reset or initialize the counter. A counter needs to be created with this property in order for it to be used.
counter-increment is used to increment the value of a counter.
counter does the heavy lifting. It should be used inside the content property in a :before or :after pseudo selector to increment counts.

Putting these together, we will first initialize our list:

div.list {
  counter-reset: numbered-list;
}

We are creating a variable called numbered-list to store our counters. Next, we want to increment the variable value every time we encounter a div inside this list. To do that, we will do:

div.list div {
  counter-increment: list-number;
}

This sets up our counter. We need to now add it to the DOM using the content property.

div.list div:before {
  content: counter(numbered-list);
}

And if we apply this CSS to a list:

<div class="list">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

We get the output:
1Item 1
2Item 2

We can then style thediv.list div:before section of the element as we saw fit.

We can even specify a custom starting point to the counter by initializing it as:

counter-reset: list-number 10;

Or specify the increment value:

counter-increment: list-number 10;

Browser support for counters is pretty good too:

So we can start counters in CSS without much hassle.

There are other functions such as counters() which allow nested counters and the counter function also takes a second parameter to specify the format of the counter which are good additions if you are looking for them.

And that is all you need to know about counters in CSS. Feel free to drop a comment below if you have any questions.

Originally published at https://www.wisdomgeek.com on September 1, 2021.

How to Remove a Property from a JavaScript Object

saransh kataria — Thu, 21 Apr 2022 02:09:13 +0000

There are two ways to remove a property from a JavaScript object: one is the mutable way of doing it by using the delete operator. And the second one is the immutable way of doing it by using object restructuring. Let us go through each of these:

1. The delete operator

delete is a JavaScript instruction that allows us to remove a property from a JavaScript object. There are a couple of ways to use it:

delete object.property;
delete object[‘property’];

The operator deletes the corresponding property from the object.

let blog = {name: 'Wisdom Geek', author: 'Saransh Kataria'};
const propToBeDeleted = 'author';
delete blog[propToBeDeleted];
console.log(blog); // {name: 'Wisdom Geek'}

The delete operation modifies the original object. Therefore it is a mutable operation.

2. Object destructuring

Using the object restructuring and rest syntax, we can destructure the object with the property to be removed and create a new copy of it. After the destructuring, a new copy of the object would be created and assigned to a new variable without the property that we chose to remove.

const { property, ...remainingObject } = object;

For example:

let blog = {name: 'Wisdom Geek', author: 'Saransh Kataria'};
const { author, ...blogRest } = blog;
console.log(blogRest) // {name: 'Wisdom Geek'};
console.log(blog); // {name: 'Wisdom Geek', author: 'Saransh Kataria'}

If we want to do this dynamically, we can do this:

const name = 'propertToBeRemoved';
const { [name]: removedProperty, ...remainingObject } = object;

It is also possible to remove multiple properties using the same syntax.

And those are the 2 ways to remove a property from a JavaScript object. If you have any questions, feel free to drop a comment below!

Originally published at https://www.wisdomgeek.com on August 29, 2021.