DEV Community: Raunaq Chawhan

PicsTweakr

Raunaq Chawhan — Mon, 15 Apr 2024 07:10:30 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

I've tried to come up with a simple fun app as this was my first interaction with using AI.

Demo

The app can be tested out at: https://picstweakr.pages.dev/

My Code

The code can be found here: https://github.com/RaunaqChawhan/picstweakr

Journey

The journey of building this app was fun. It was more of exploring the various models provided by Cloudfare and it was very well documented on how to utilize the models.
This app basically requires a user to upload an image and based on that image, the various AI models will generate images, generate a description and a creative short story of that image.

Multiple Models and/or Triple Task Types
I've used the following models to come up with the app:
"@cf/unum/uform-gen2-qwen-500m" - this model will provide a detailed description of the image uploaded.

"@cf/lykon/dreamshaper-8-lcm" - this model will generate new images based on description.

"@cf/meta/llama-2-7b-chat-fp16" - this model will create a short creative story based on the description of the original image uploaded by user.

Command Line Job Search Application using Node.js

Raunaq Chawhan — Fri, 30 Apr 2021 19:46:24 +0000

Introduction

In this post, we'll build a command line job search application using Node. It's a JavaScript runtime that allows the JavaScript code to run outside the browser.

We'll use the GitHub Jobs API to fetch data and present it in a tabular format on the command line interface.

We'll focus on the following three scenarios for this application:

Job search command without any filter criteria that returns all the data
Job search command with location filter returning data specific to that location
Job search command with location and technology filter returning data specific to that location as well as technology

Step 1 - Setting up the project

First, create your project folder and navigate into it using the following commands:

mkdir job-search-app

cd job-search-app

Now, we'll be creating a package.json file which holds the information about the project and the packages/dependencies we install. This is done using the following command

npm init

npm will prompt few questions about your project before creating package.json file. In case you want to escape the questions and have all the details filled with default values, you can use the following command

npm init -y

This will save you from the questions and generate a package.json file directly.

Now, create a file called index.js in the job-search-app folder. We'll write the entire code of the application in this file.

The project structure should look like the following:

job-search-app
    ├──index.js
    └──package.json

Step 2 - Installing the packages

yargs - it is used to parse the command line arguments
cli-table - it is used to display the data in a tabular format
axios - it is used to make HTTP requests

Use the following command to install all the packages

npm install yargs cli-table axios

Now, we'll import all the packages in the index.js file using the following lines of code.

const yargs = require('yargs');
const Table = require("cli-table");
const axios = require("axios");

Now, we'll define the header and the structure of the table that will contain the data

const dataTable = new Table({
    head: ["Company Name", "Job Role", "Location", "Full Time", "Job Description"],
    chars: { 'top': '' , 'top-mid': '' , 'top-left': '' , 'top-right': ''
         , 'bottom': '' , 'bottom-mid': '' , 'bottom-left': '' , 'bottom-right': ''
         , 'left': '' , 'left-mid': '' , 'mid': '' , 'mid-mid': ''
         , 'right': '' , 'right-mid': '' , 'middle': '|' },
    colWidths: [25, 30, 20, 11, 72],
    style: {
        head: ['bgBlue', 'white', 'bold'],
        border: ['yellow']
    }
});

We create a dataTable instance using the Table constructor function provided by the cli-table package. An object is passed as an argument that sets the header and different properties of the table as defined below:

head - it is an array of column header names for the table
chars - it is an object defining how the table is drawn. Each property in the chars object represents the separator at the respective position
colWidths - it is an array that defines the column width
style - it is an object that defines the style of the table. head property is an array that defines the background color, text color and font weight of the header. border property is an array that defines the color of the separator

Step 3 - Creating the first command (Job search without any filter parameters)

In this step, you'll be creating your first job search command without any filter parameters.

Before writing code for the first command, let's look at the command that we'll type to run the application

node index.js searchAll

node index.js is used to run the application and searchAll is the command line argument passed along with it. searchAll informs the application that it needs to do a job search and return the data on the commannd line interface. yargs is used to parse this command line argument and perform the necessary operation.

Now, let's start with the code

yargs.command({
    command: 'searchAll',
    describe: 'Default search',
    handler() {
        axios.get("https://jobs.github.com/positions.json?markdown=true").
        then(response => {
            response.data.forEach(jobData => {
                dataTable.push(
                    [jobData.company, jobData.title, jobData.location, jobData.type, jobData.url]
                    );
                });

                console.log(dataTable.toString());
            });
    }
});

yargs.command() method from the yargs package is used to create the command. An object is passed as an argument to it which defines all the options related to a particular command. The command property is used to provide a name to the command. Here, searchAll is the command name that we are going to use. You are free to provide any command name. The describe property is used to provide description about the command. Here, "Default search" is the description that we are giving to the command. You can provide any description as desired.

The handler method holds the implementation of what the command will do. We'll call the GitHub Jobs API using axios.get() method. axios.get() returns a promise and therefore, then is chained to it which receives the response from the API.

response is an object that is returned and response.data is an array that holds the job data. You can now loop through the array and push the required details in the dataTable instance as it's an array too. Once the data is pushed, the last line of code console.log(dataTable.toString()) displays the data on the command line interface in a tabular format.

At the end of the entire code, include the following line

....
....


yargs.parse();

This code is required at the end for yargs to parse our command line arguments.

Now, we can run our application using the following command:

node index.js searchAll

Step 4 - Creating the second command (Job search based on location)

In this step, you'll be creating your second command which will return job data based on the location option that you pass along with the command.

Let's look at the command first that we'll type to run the application

node index.js searchByLocation --location="india"  // location can be a city name, zip code, or any other location search term.

Here, searchByLocation is the command which is passed along with --location option to return the job data of a particular location.

Now, add the following code block before yargs.parse() and after the first command code:

yargs.command({
    command: "searchByLocation",
    describe: "Job search by location",
    builder: {
        location: {
            describe: "Location",
            demandOption: true,
            type: 'string'
        }
    },
    handler(argv) {
        axios.get(`https://jobs.github.com/positions.json?markdown=true&location=${argv.location}`).
        then(response => {
            response.data.forEach(jobData => {
                dataTable.push(
                    [jobData.company, jobData.title, jobData.location, jobData.type, jobData.url]
                    );
                });

                console.log(dataTable.toString());
            });
    }
});

This code block is similar to the previous one expect that it has an additional builder property. The value of this property is an object which hold the options that were passed with the command; like the location in this case.

location property is an object where describe is used to provide a description about the option. demandOption is a boolean which when true makes this option as required. type property is used to provide the datatype of the option.

The handler method provides the implementation of the command. Here, handler takes an argument argv which is an object that holds the value of options passed in the command. It can be accessed using argv.OPTION_NAME. In this case, it is argv.location. This value is used in the API url which then returns data for a particular location. The data is then pushed into the dataTable instance and displayed on the command line interface.

Step 5 - Creating the third command (Job search based on location as well as technology)

Based on the previous command, we'll creating our third and final command that will return job data based on location as well as technology.

Let's look at the command first that we'll type to do a job search based on location and technology

node index.js search --location="india" --technology="react"

Here, search is the command and --location and --technology are the options passed with it.

Now, add the following code block before yargs.parse() and after the second command code:

yargs.command({
    command: "search",
    describe: "Job search by location and technology",
    builder: {
        location: {
            describe: "Location",
            demandOption: true,
            type: 'string'
        },
        technology: {
            describe: "Technology",
            demandOption: true,
            type: "string"
        }
    },
    handler(argv) {
        axios.get(` https://jobs.github.com/positions.json?markdown=true&location=${argv.location}&search=${argv.technology}`).
        then(response => {
            response.data.forEach(jobData => {
                dataTable.push(
                    [jobData.company, jobData.title, jobData.location, jobData.type, jobData.url]
                    );
                });

                console.log(dataTable.toString());
            });
    }
});

This is similar to the previous command. Only the technology filter is an additional parameter here which is defined in the builder property too. The handler holds the implementation here just like the previous commands .

Conclusion

In this post, we learned to create a command line job search application. We learned how to create a command using yargs.command() method and how yargs.parse() is an important line of code to be included at the end of the entire code. We also used the axios package to trigger our API request and cli-table to present our data in a tabular format.✌

Thanks for taking the time to read this post. I hope this post helped you!!😊😃 If you liked it, please share.

It would be great to connect with you on Twitter. Please do share your valuable feedback and suggestions👋

You can also check my other posts:

Understanding the React useEffect() Hook

Raunaq Chawhan — Fri, 23 Apr 2021 20:18:56 +0000

Introduction

In the previous post, we looked at the useState() Hook that adds state to a functional component. We learned how to initialize, update and access state variables in a functional component using useState() Hook.

In this post, we'll focus on the useEffect() Hook that let us perform side effects in functional components. We'll also understand how this particular hook can be used to mimic the behavior of componentDidMount(), componentWillUnmount() and componentDidUpdate() lifecycle methods.

Prerequisites

An understanding of the useState() Hook

useEffect() Hook

The operations such as data fetching, manual DOM mutations, logging, setting up a subscription and unsubscribing it are all examples of side effects. These side effects are too early to be dealt while the component is being rendered to the screen. Therefore, the class components are provided with lifecycle methods such as componentDidMount, componentDidUpdate and componentWillUnmount that run after React has updated the DOM.

However, functional components don't have such lifecycle methods. Thus, useEffect Hook was introduced that let us perform side effects in functional components.

The syntax for useEffect Hook is as below:

useEffect(function, [dependencies]);

// first argument is a function where we pass our side effect
// second argument is a dependencies array. it is an optional argument
// with no dependencies array present, useEffect runs after every render

Now that we are clear with the syntax, lets take a look at the following class based component that logs a message to the console after the component is rendered to the screen and on any state update

import React, { Component } from "react";

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      age: 26
    }
  }

  componentDidMount() {
    console.log(`I am ${this.state.age} years old`);
  }

  componentDidUpdate() {
    console.log(`I am ${this.state.age} years old`);
  }

  render() {
    return (
      <div>
        <p>I am {this.state.age} years old</p>
        <button onClick={() => this.setState({
          age: this.state.age + 1
        })}>Celebrate Birthday</button>
      </div>
    );
  }
}

As per the above code block, after the component gets rendered to the screen, componentDidMount gets called which logs a message to the console. When the button is clicked, the component re-renders with the updated age value and componentDidUpdate gets called which logs a message to the console.

It is evident from the above code block that duplicate code is used in both the lifecycle methods. This is because in many cases you want to perform the same side effect regardless of whether the component was just mounted or has been updated. React class components don't have a lifecycle method that allows a particular code to run after every render.

Now, lets take a look at the functional component using useEffect Hook to achieve the same thing

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

export default function App() {

  const [age, setAge] = useState(26);

  useEffect(() => {
    console.log(`I am ${age} years old`);
  });

  return (
    <div>
      <p>I am {age} years old</p>
      <button onClick={() => setAge(age + 1)}>Celebrate Birthday</button>
    </div>
  );
}

The above code performs the same thing that the class component does but with lesser code. Here, we use the useState Hook to initialize and update the age variable.

Now, lets understand the useEffect Hook

In order to perform side effects in functional component, you first need to import useEffect Hook from React.
In the App component above, you can see that the State Hook is used to initialize the age variable.
useEffect Hook is defined after the State Hook and a function to log the age variable is passed to it.
The Effect Hook is defined inside the component so that it can easily access the age variable or any props passed to the component.
After React renders the component to the screen, it moves to the useEffect Hook and runs it which logs the age variable to the console.
When you click the button, age variable is updated that leads to re-rendering of the component with the updated value. This triggers the effect to run again.
The useEffect Hook runs both after the first render and after every update (on state variable change and props change) because there is no dependencies array present as the second argument.

Thus, you can see that the functional component with useEffect Hook is able to achieve the same thing in a single code block which class component achieved in two lifecycle methods.

Now, you got a basic understanding of how useEffect Hook runs. But, without the dependencies array, it is seen that the Effect Hook runs after every render.

There are cases where we don't want it to run after every render as it can lead to undesirable results or performance issues in many cases. In such scenarios, you can make use of dependencies array to determine when useEffect should run again once it has run after the first render. Any change in value of dependencies present in the array triggers the useEffect Hook to run again.

useEffect() with dependencies array

The following code block introduces the dependencies array in the Effect Hook

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

export default function App() {

  const [age, setAge] = useState(26);
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`I am ${age} years old`);
  }, [age]);

  return (
    <div>
      <p>I am {age} years old</p>
      <button onClick={() => setAge(age + 1)}>Celebrate Birthday</button>
      <p>The guest count is {count}</p>
      <button onClick={() => setCount(count + 1)}>Add Guest</button>
    </div>
  );
}

Here, we are having two state variables age and count. The dependencies array has age variable present in it. So, once the Effect hook runs after the first render, it will now run only when the age variable is updated. Therefore, if you click the button that updates the count variable, it will not trigger the effect to run. But when the button that updates the age variable is clicked, the effect will run. Therefore, the effect now runs only when age is updated and not after every render.

So far, you've looked at the side effects without cleanup. But there are certain side effects which do require clean up. Some examples include setting up a subscription to some external data source which also needs to be cleaned up so that no memory leak is introduced or setting up a timer and then clearing it after that component is destroyed.

useEffect() with cleanup

Now, lets take a look at the class component where setting up a timer is typically done in componentDidMount method and clean up is done in componentWillUnmount method

import React, { Component } from "react";

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      timer: 0
    }
  }

  componentDidMount() {
    this.id = setInterval(() => {
      this.setState({
        timer: this.state.timer + 1
      })
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.id);
  }

  render() {
    return (
      <div>
        <p>Timer: {this.state.timer}</p>
      </div>
    );
  }
}

componentDidMount gets executed after the component is rendered to the screen thereby setting up a timer. This timer continues to run till the component is in scope. If the component is about to be unmounted and destroyed, componentWillUnmount gets executed immediately before unmount and any necessary cleanup is performed such as clearing up the timer in the above example.

Now, lets take a look at an equivalent functional component. The function passed to the useEffect hook can return a function that acts as a clean up script. This script runs when the component is about to be unmounted and before every consecutive run of the Effect hook after the first run.

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

export default function App() {

  const [timer, setTimer] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setTimer(prevValue => prevValue + 1)
    }, 1000);
    return () => {
      // cleanup script
      clearInterval(id)
    }
  },[]);

    return (
      <div>
        <p>Timer: {timer}</p>
      </div>
    );
}

In the above example, the Effect hook returns a cleanup function. Since, the dependencies array is empty, the effect does not depend on any changes in the state value or props value and therefore it never re-runs. It will always have the initial value of state and props.

Since the Effect hook is restricted here to run only once, the clean up script gets executed only when the component is about to be unmounted. Therefore using the Effect Hook in this manner is equivalent to componentDidMount and componentWillUnmount lifecycle methods.

You can have more than one Effect Hook in your component.

Conclusion

In this post, you got an understanding of the useEffect() Hook. You learned its syntax and how it is used to perform side effects in a functional component. You also learned about the dependencies array that restricts the Effect hook to run on every render. You learned how related code gets split between lifecycle methods in class component whereas Hooks in functional component let us split the code based on what it is doing and groups related code together.

Thanks for taking the time to read this post. I hope this post helped you!!😊😃 If you liked it, please share.

It would be great to connect with you on Twitter. Please do share your valuable feedback and suggestions👋

Understanding the React useState() Hook

Raunaq Chawhan — Sat, 17 Apr 2021 07:22:43 +0000

Introduction

Hooks were introduced in React v16.8.0. Prior to that, if we had written a functional component and wanted to add state or make use of lifecycle methods to perform operations such as data fetching and manual DOM manipulation, the functional component had to be converted into class based component.

However, introduction of Hooks made adding state and performing those operations in functional component possible. It also helped in keeping the mutually related code together rather than splitting the code based on lifecycle methods. Hooks don't work inside classes rather they let us work with React without the need for class.

In this post, we will learn about the built-in useState() Hook and how to use it in a functional component. We will also understand the difference in initializing, updating and accessing the state in class component as compared to functional component.

Rules of Hooks

Following are the two rules of Hooks that needs to be followed:

Hooks should always be called at the top level of the React function which means it shouldn't be called inside loops, conditionals or nested functions. This is done to ensure that Hooks are called in the same order each time a component renders.
Never call Hooks from regular JavaScript functions. Instead, call it from React function components or custom Hooks.

useState() Hook

As the name suggests, useState Hook is used to add state to function components.

The syntax for useState is as below:

const [state, setState] = useState(initialState);

// assigns initialState to state
// setState function is used to update the state

useState() returns an array with exact two values. Array destructuring can be used to store these values in different variables.

The first value returned represents the state and the second value returned is a function that can be used to update the state. You can give any name to these two variables. For our understanding, we'll name the state variable as state and the function that updates it as setState. You can follow this convention of assigning any name to state variable and then prefixing it with 'set' to form the function name.

The 'initialState' argument passed to useState sets the initial state. On subsequent re-renders, state is updated through the setState function returned from the useState Hook.

Now, let's take a look at the following code block which represents a class component with state

import React, { Component } from "react";

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      weather: 'hot',
      disabled: false
    }
  }

  render() {
    return (
      <div>
        <p>The weather is {this.state.weather}</p>
        <button 
            onClick={() => this.setState({weather: 'cloudy', disabled: !this.state.disabled})} 
            disabled={this.state.disabled}>
            Change weather
        </button>
      </div>
    );
  }
}

When the above class component gets rendered to the screen, you get a paragraph The weather is hot with a 'Change weather' button below it.

On clicking the button, the component re-renders and output changes to The weather is cloudy with the button getting disabled.

In a class component, you can initialize state in the constructor by using this.state. In the above example, it is initialized to {weather: 'hot', disabled: false}. Any update to state is done through this.setState and respective values can be accessed using this.state.weather and this.state.disabled.

The state is defined as an object and all the state updates done through this.setState is merged into that object as class component can have a single state object only. Therefore, {weather: 'cloudy', disabled: !this.state.disabled} gets merged with the previous value and state is updated.

In order to initialize, update or access any value from state in a class component, you always need to use this keyword.

Now, let's take a look at the following functional component using the State Hook that works the same way as the earlier class component

// import useState Hook from "react" package
import React, { useState } from "react";

export default function App() {

  const [weather, setWeather] = useState('hot');    // "weather" value initialized to "hot"
  const [disabled, setDisabled] = useState(false);  // "disabled" value initialized to "false" 
  return (
    <div>
      <p>The weather is {weather}</p>
      <button onClick={() => {
        setWeather('cloudy');     // setWeather('cloudy') updates the "weather" to "cloudy"
        setDisabled(!disabled);   // setDisabled(!disabled) updates the "disabled" to "true"
      }} disabled={disabled}>Change weather</button>
    </div>
  );
}

In order to use state in functional component, you first need to import useState Hook from React.
Unlike class component where you can have a single state object only, functional component allows you to have multiple state variables. Here, weather and disabled state variables are initialized to the argument passed to useState Hook.
This argument can be of any type such as number, string, array or object unlike class component where state is initialized to object only.
On clicking the button, setWeather and setDisabled functions are called with new state values passed to it. React will then re-render the component by passing the new weather and disabled values to it.
In a functional component, updating a state value always replaces the previous value unlike class component where state updates are merged.

In the above example, new state values are not dependent on previous state values. Therefore, we directly pass new value to state update function. In scenarios where new state value depends on previous state value, you can use the following functional update format to update the state.

setState(previousStateValue => {
    // newStateValue determined using previousStateValue
    return newStateValue;
})

This functional update format is used to update the state depending on the previous state value.

Conclusion

In this post, you learnt about the useState() Hook that makes it possible to use state in a functional component without transforming it into a class component. You learnt how to initialize, update and access the state variables in a functional component using Hooks.

Thank you for taking the time to read this post 😊
Hope this post helped you!! Please share if you liked it.

I would love to connect with you on Twitter.
Do share your valuable feedback and suggestions you have for me 👋

git stash - Store your uncommitted changes aside to work on it later

Raunaq Chawhan — Wed, 07 Apr 2021 19:47:38 +0000

Introduction

In this post, we'll be looking at the git stash command and its usage. We come across situations in our development work where we are in the middle of a task with quite a good amount of code changes and have to switch to some other task that has come on priority. Now, if the changes are somewhat complete then we can commit it and start with the other task but what if those changes are unfinished and far away from a meaningful commit, in that case instead of committing it we can make use of

git stash

git stash stores the uncommitted changes that we've made on our current branch away to be used at a later point in time and we are left with the code that was present before those changes. This allows us to work on our other task and get back to the stashed one later.

git stash

Suppose we have a demo project and we've modified some files in it

As we can see from the above screenshot that we have modified two files and now we'll use git stash

After performing git stash, the changes get stashed and when we use git status, it shows that there is nothing to commit. Now, we can work on any other changes, switch branches and perform different operations and once we are done, we can re-apply the stash and continue working on it.

Re-applying the stashed changes

We can use the following command to re-apply the stashed changes

git stash pop

We see that the above command pops out our stashed changes and applies them to the current branch. After the changes are applied, it gets removed from the stash.

If we don't want our changes to be removed from the stash after applying it on the branch, we can use the following command

git stash apply

This command can be used to apply the same changes on multiple branches.

Multiple stashes

We are not limited to a single stash and can use the git stash command multiple times to create as many stash as required. We can then use the following command to view our stashes.

git stash list

Suppose, we've created few stashes by running the git stash command multiple times

We see that this command list out all the stashes that we've created and the stashes are identified as

stash@{n}: WIP(work in progress) on (branch on which stash is created): (commit from which the stash is created)

Identifying which stash contains what change becomes difficult as the message does not provide any context related to the change that it holds. Therefore, instead of using only git stash we can use the following command that adds a description to the stash

git stash save "description to give you an idea about your change"

git stash pop and git stash apply re-applies the most recently created stash which is stash@{0}. If we want to re-apply the changes from a different stash, we should pass its identifier as the last argument to the respective commands.

git stash pop stash@{3}

git stash apply stash@{3}

Stash untracked and ignored files

By default, git stash stores the staged and unstaged changes only. It will not store the new files added to the directory that has not been staged yet and also the files that have been ignored.

If we also want to stash the new files, we can use the following command

git stash save "description" -u
OR
git stash save "description" --include-untracked

Using the following command will stash all the files including the ignored ones

git stash save "description" -a
OR
git stash save "description" --all

View the changes recorded in a stash

We can use the following command to view the changes recorded in a particular stash as a diff between the stashed contents and the commit back when the stash was first created.

git stash show -p stash@{n}

Stash specific files

We can make use of the --patch flag while running the git stash command that instructs Git not to stash everything that is modified instead it will iterate through all the changes and ask whether we want to stash it or not

git stash save "description" -p
OR
git stash save "description" --patch

Create a branch from the stash

Suppose we stashed some changes from a branch and continue to work on that particular branch and later try to re-apply those stashed changes, it might happen that the stashed changes try to modify a file which has already been modified and it results in a merge conflict. In that case we'll have to resolve the conflict or what we can do is use the following command that creates a new branch and checks out the commit we were on when the stash was created and reapply the stashed changes and removes the stash if it gets applied successfully.

git stash branch branch_name stash@{n}

Cleaning the stash

So far we've seen how to create a stash and re-apply those changes back, now we'll be looking at the commands that will allow us to delete the stash. If we want to delete a particular stash, we can use the following command to delete it

git stash drop stash@{n}

In case we want to delete all the stashes, it can be done using

git stash clear

Conclusion

In this post, we learned about the git stash command that lets us store our uncommitted changes that are not ready enough to be committed. We learned how to stash our work and also re-apply the changes back.

By default, the stash command only stores the staged and unstaged changes so we learned how to stash the untracked and ignored files as well.
We learned the command to view the changes stored in a stash and also stash specific files. Lastly, we created a branch from the stash and also deleted the created stashes.

Thanks for taking the time to read this post. I hope this post helped you in learning something and if you enjoyed it, please share.

It would be great to connect with you on Twitter. Please do share your valuable feedback and suggestions👋