DEV Community: Ambuj sahu

Deploy a puppeteer nodejs application on netlify

Ambuj sahu — Mon, 20 Feb 2023 13:30:24 +0000

In this article, we’ll learn how we can take advantage of packages like @sparticuz/chromium and Puppeteer-core to create and deploy our puppeteer nodejs application on netlify.

If you are facing issue to run puppeteer on netlify that could be due to the fact that you are using a library called chrome-aws-lambda. And puppeteer core library which is updated very constantly. So it becomes quite a hassle to use chrome-aws-lambda because of the pace of the puppeteer updates. To resolve this issue we could use @sparticuz/chromium library as their docs say that this package is not chained to puppeteer versions.

Let first create a simple node application.

mkdir puppeteer-node-application
cd puppeteer-node-application
npm init

Now we can also install netlify libraries which will help us to deploy our nodejs application.

npm install netlify-cli -g

Now create a dist folder with empty index.html file in it. This is the required netlify configuration.
Now create a dist folder with empty index.html file in it. This is required for netlify configuration.
Now create a file name netlify.toml file and copy the following code in it. This will help netlify recognize where the functions are stored.

[build]
    functions = "functions"

Now create the function directory where we will keep our node puppeteer code. In this directory create a file name api.js
Now lets install puppeteer dependencies to start using puppeteer code in our application

npm install puppeteer-core@19.6.0
npm install serverless-http
npm install @sparticuz/chromium@110

Note: In order to figure out what version of @sparticuz/chromium you will need, please visit Puppeteer's Chromium Support page.

Finally copy the following code in the api.js file.

Now finally run following netlify commands to deploy the application and you need to select few option where you could either link this deployment to an existing site or to a new site. If you are doing it for the first time then select a new site and give it a new name.

netlify deploy --prod

Finally you could check the deployment links and don't forget to append /.netlify/functions/api at the end of the deployment url to be able to access the node application.

You can also refer the sample code for same here

Create a simple GitHub Actions Workflow

Ambuj sahu — Sat, 04 Feb 2023 09:10:56 +0000

If you are trying to build any software project you definitely need an workflows to build and test your project. GitHub Actions workflow can help you by automating, customizing and executing the workflow itself.

In this post, we're going to create a simple GitHub action workflow that will check the build status and test the code every time someone pushes the code or creates the pull request.

Let try to understand first the concepts related to GitHub action workflow.

GitHub Actions Workflow Building Blocks

Workflow: The workflow define the specific automation procedures, instructions and actions which run after an event is triggered or scheduled. The workflow is written in the .yml(YAML) file which is created in the project repository itself.
Workflow Triggers: Triggers are the events that will decide when the GitHub workflow will run. These triggers can be of four types. These are :
- Manual trigger.
- A predefined schedule.
- Events happening in the workflow’s GitHub repository.
- Events occurring outside of GitHub, which trigger a repository dispatch event in GitHub.

Runners: The workflow requires an environment where it can be executed. For example if we build or test our project we use our own environment usually it is a dedicated system that we are using. Just like our dedicated system Runners are servers where the workflow will be executed. Runner are always listening for events to trigger the workflow.

Jobs: Jobs are pretty much self explanatory they contain a series of steps that runs within the runners environment. Every workflow needs at least one job. By default the jobs under the same workflow runs in parallel.

Actions: Actions are the smallest unit. The actions of a job are specified with the steps syntax. Each step can have a name, own environment variables, and commands to run.

Okay now as we know enough about the basic terminologies of workflow, we can get back to create simple GitHub action workflow.

GitHub Actions Workflow Example

1) In your project repository create a dedicated directory to store workflow files. The directory must be named as -.github/workflows This directory is where GitHub will look for the workflow files.

2) Create a .yml file in github/workflows directory. You can name this file anything you like but for now, we are naming it as main.yml.

3) Now add a name of the workflow for example use the following line at the beginning of the main.yml file:

name: check-build

4) Add on attribute which will tell GitHub when to run the the workflow. In our case we want to run the workflow when code is pushed or there is a pull request. use the following lines on your main.yml file.

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

5) Now we want to create two jobs one for checking the build and another for testing the code. Let start with check-build jobs that will contains the following steps and run-ons attribute:

jobs:
  check-build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: ['14']
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node }}
      - run: npm install
      - run: npm run build

run-ons attribute as described earlier will decide which environment the build will be created. Now if you focus on the steps attribute has two run attribute to execute the commands npm install and npm run build which is exactly how you would do it in your local system.

6) Lets move on the testing the code that should check if the code contains any lint issues, formatting issues or check if any of the test are failing. For this we will create a check-code job that will contain the following steps:

check-code:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: ['14']
    name: Prettier on Node ${{ matrix.node }}
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node }}
      - run: npm install
      - run: npm run prettier:check
      - run: npm run eslint --ext .ts ./src
      - run: npm run test

Note The above code assumes that you have setup prettier and eslint in your project.

7) Now the final workflow main.yml file should match the following gist:

8) Now finally you can commit your code and push it to the GitHub.

9) You can further check the build status in your code repository Action tab.

Thanks for reading this Create a simple GitHub Actions Workflow blog. I hope it has been a helpful read.

Focus management in react

Ambuj sahu — Mon, 30 Jan 2023 18:43:32 +0000

The design and creation of websites should be such that it can be used by everyone. It should also increase usability and reduce confusion for both keyboard-only and screen reader users.

when website are created using react, the content of website are updated very frequently which can lead to issues such as that the focus element is no longer in the dom. And keyboard focus is lost or set to an unexpected element. This means the keyboard-only user has to navigate through the entire page again to get back to where they were. To solve such issues we need to programmatically nudge the keyboard focus in the right direction. Doing this will ensure that the web application can be fully operated with the keyboard only.

WCAG

Web accessibility (also referred to as a11y) requires that we create website by following WCAG ( Web Content Accessibility Guidelines ). The WCAG checklists includes lot of things such as

Every HTML form control, such as and , needs to be labeled accessibly.
Error situations need to be understood by all users.
Ensure that your web application can be fully operated with the keyboard only which is exactly same as focus management.
Ensure that all functionality exposed through a mouse or pointer event can also be accessed using the keyboard alone.
Provide a mechanism to allow users to skip past navigation sections in your application as this assists and speeds up keyboard navigation.

In this article we will try to discuss how we can manage focus in our react app.

Focus Management in React

Keyboard focus refers to the current element in the DOM that is selected to accept input from the keyboard. We want to set focus to a particular element in react component, when after the deletion of particular element or perhaps after form submission or after component first mounts.

Targeting our elements

To set focus to our target element in React, we need to use React's useRef hook.

1) Add a import statement in your react component. so that it includes useRef:

import React, { useRef} from "react";

2) create a new constants in the component that has the target element. Something like below :

const targetELementRef = useRef(null);

The ref has a default value of null because it will not have value until we attach the ref to target element to focus.

3) we'll add an attribute of ref to target element, and set its values to the ref objects that we added above. Let suppose you want to focus input element when component first mounts. Than the input component should be updated like this:

import React, { useRef } from 'react';
const CustomTextInput = () => {
    const targetELementRef  = useRef(null);
    return (
        <div>
            <input ref={targetELementRef} />
        </div>
    );
};

Note: Some html elements are not usually focusable like header e.g. <h2> . But we can make any element programmatically focusable by adding the attribute tabindex="-1" to it.

4) setting focus to our target input element using useEffect() hook.

useEffect() hooks runs after React renders a given component. This make sense in our situation because we don't want browser to focus the element if the component itself is not yet rendered.

Change the import statement of the component again to add useEffect. e.g.

import React, { useEffect, useRef, useState } from "react";

Now add the following useEffect hook to the component:

useEffect(() => {
    targetELementRef.current.focus();
}, []);

The second value in the useEffect is an empty array. Because we want to focus input element when the component first mount, we have used an empty array. It simply tells React that your effect doesn't depend on any values from props or state, so it never needs to re-run.

But if we want to focus when after the deletion of particular element or perhaps after form submission. We can pass the Some value in the props and update the useEffect as follows:

useEffect(() => {
    targetELementRef.current.focus();
}, [someValue]);

so the final code should updated like this:

import React, { useRef } from 'react';
const CustomTextInput = (props) => {

    const targetELementRef  = useRef(null);

    useEffect((props.dependedValue) => {
        targetELementRef.current.focus();
    }, [someValue]);

    return (
        <div>
            <input ref={targetELementRef} />
        </div>
    );
};

At last if you are stuck with a problem that there is no target element to focus, it can happen if you delete an list item and there are no more list items to focus. In that case you can focus the list heading by making list heading focusable using `tabindex="-1" on the list heading or you can move the focus to next actionable item.

References

"Accessibility in React" on mdn

Where to store data in chrome extension ?

Ambuj sahu — Wed, 25 Jan 2023 10:10:40 +0000

In this post, we're going to use chrome.storage API to store, retrieve, and track changes to user data in the chrome extension.

If you are building your first chrome extension than you might stumble across a problem of storing user data specific to each site. Using chrome.storage API is the easiest way to solve the problem and it can also help you to establish a indirect communication channel between the extensions and the content scripts.

So let's get started!

1. To use the storage API, declare the "storage" permission in the extension manifest. For example:

 {
  "name": "My extension",
  ...
  "permissions": [
    "storage"
  ],
  ...
}

2. Create a file storage.ts which will act as a storage utility file to keep all the methods you need to work with chrome.storage Api. For example:

The setter and getter will help you to store and retrieve user data from chrome extension local storage.

3. Now you can import localStorage from storage.ts file in your extension or in your content script. For example

  import { localStorage } from '../shared/storage';

  // To get the data from local storage use follow
  localStorage .get((userData) => {
    // do something
  })

  // to save the data simply use
  localStorage.set(userData);

Note Think of adding to storage as being like putting something in a pipe. The pipe may have material in it already, and it may even be filled. Always assume a delay between when you add to storage and when it is actually recorded

4. In your content script you can listen to the changes done to stored data by adding the following

   localStorage.listen(updateDom);

The listen method will need a callback function which will be called every time any changes is done to stored user data. Hence it act as communication channel between content script and the extension. you can now easily update the dom or trigger some content script work by updating the local storage in your extension.

You can find the complete code sample here

References

chrome.storage

Implementing Singleton in TypeScript

Ambuj sahu — Tue, 17 Jan 2023 19:57:56 +0000

What is the Singleton design pattern?

Implementing the singleton design pattern ensure that there is only one instance of a class. It essentially controls of when and how that the single instance of the class is created and provides global access point to that single instance. It also restrict the developers from creating new instance of the class.

Advantage of using singleton design pattern ?

To keep resource utilization under control that is some objects
consumes too much time or resources to be created. So by making
the class singleton restricts the option to have multiple objects of the same class.
Memory overhead is reduced as the singleton pattern has only one instance in memory.
To keep a single channel of communication with an outside resource open all the time.

Some well known examples of Singleton design pattern are logging, caching, and database connection.

Let's try to implement singleton design pattern in typescript

we need to make sure that:

there is no option to create multiple instance of the class. To achieve this we can make our class constructor specifier as private. These way the ability to create new instance using new keyword will only be possible within the class.
function and method can be called without the need to create instance of the object. These we can achieve by making method and function static. A static method don’t need an instance of the class to be used.

Let's dive into code

Here we have a TaskListTemplates class which helps to render the task list in the dom. And the constructor is private. So that if you try to instantiate this class using new keyword from outside, then TypeScript compiler will prompt the following error message:

Constructor of class 'TaskListTemplates' is private and only accessible within the class TaskListTemplates.ts(2673)

Now we can use the TaskListTemplates class as follow

import TaskListTemplates from './templates/TaskListTemplates';


let taskList: TaskListTemplates = TaskListTemplates .getInstance();
taskList.render();

By having TaskListTemplates class as singleton, we made sure that there only one task list instance manipulating the dom (instead of accidentally instantiating several at once, and having duplicate task list showing in the dom).

we can further verify its functionality

let taskListOne: TaskListTemplates = TaskListTemplates .getInstance();
let taskListTwo: TaskListTemplates = TaskListTemplates .getInstance();

console.log(taskListOne=== taskListTwo); // true

You can find the complete code sample here

The never type in typescript

Ambuj sahu — Sat, 14 Jan 2023 16:09:42 +0000

The never type

The never type is used when you are sure that something is never going to happen. It simply represents a state which shouldn’t exist.

It might be return type of function that never returns.


function throwError(errorMsg: string): never { 
    throw new Error(errorMsg); 
}

function loop(): never {
    while(true) {}
}

Here, both reportError and loop type function either throw errors or return infinite loop that will be analyzed by TypeScript control flow as functions with unreachable endpoints, thus specifying their return type as never.

Note When a function is throw-only, it gets the type never if it's an expression, and void if it's a declaration.

function foo() { 
    throw new Error("Should never get here");
}

here foo is () => void. Read more about it in StackOverFlow answer

Exhaustiveness checking

you can use never type for narrowing and turning up to do exhaustive checking in a switch statement.

type Shape = Circle | Square;

function getArea(shape: Shape) {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.sideLength ** 2;
    default:
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

Here getArea function which tries to assign the shape to never will raise the issue that every possible case has not been handled.

Assignability in TypeScript

The never type is assignable to every type; however, no type is assignable to never (except never itself).It can be understood as "the smallest type".

 // ✨ `never` is assignable to all types.
  // It is a subtype of all types.
  let neverValue: never = getNever();


  let numberValue: number = neverValue;  // ✅
  let stringValue: string = neverValue;  // ✅
  let objectValue: object = neverValue;  // ✅
  let unknownValue: unknown = neverValue;  // ✅
  let anyValue: any = neverValue;  // ✅
  let neverValue1: never = neverValue;  // ✅


  neverValue = 1; // ❌
  neverValue = '1'; // ❌
  neverValue = {}; // ❌
  neverValue = anyValue; // ❌

Void Vs Never

The never type looks very similar to void. But the void type can have undefined or null as a value where as never cannot have any value.

let something: void = null;
let nothing: never = null; // Error: Type 'null' is not assignable to type 'never'

Intersection and Union with never type

In intersection types, it absorbs all types, and in union types all types absorb it. This is because never is a subtype of all types.

 type anyTypeUnion = never | any; // any
 type anyTypeIntersection = never & any; // never

References

File Tree Structure using CSS

Ambuj sahu — Wed, 11 Jan 2023 14:10:58 +0000

File tree structure

It is very simple but amazing file structure design in Pure CSS that you can apply to an unordered list, just follow the below steps : -

create a simple html file
use nested HTML Unordered Lists

<ul>
  <li>root
    <ul>
      <li>folder one
      <ul>
         <li>file_one.txt</li>
         <li>file_two.txt</li>
      </ul>
      </li>
      <li>folder two
      <ul>
         <li>file_one.txt</li>
         <li>file_two.txt</li>
      </ul>
     </li>
    </ul>
  </li>
</ul>

Add a span inside every li element

<li><span></span>file_one.txt</li>

you can add some folder and files icon or svg in the li element to make the file tree structure look more real
- folder icon

    <li><span></span><i class="fa-regular fa-folder-open"></i>root<ul>...rest</li>

Now finally add some css magic to complete the file tree structure.
- create L shape line by adding following css to the empty span.

    border-bottom: 1px solid;
    border-left: 1px solid;
    height: 1.5rem;
    width: 2rem;
    display: inline-block;
    margin-bottom: 0.3rem;
    margin-left: 1rem;

final output preview

you can find live example here
Also checkout the code pointer for the same code sample