DEV Community: Nitin Reddy

Wassup TypeScript Interfaces!

Nitin Reddy — Sun, 22 Jan 2023 02:50:00 +0000

TypeScript is a popular superset of JavaScript that adds optional static typing to the language. One of the key features of TypeScript is its support for interfaces, which allow you to define a contract for the shape of an object. This can be useful for defining the structure of objects that will be passed as function arguments, or for creating custom types that are used throughout your application.

An interface in TypeScript is defined using the interface keyword, followed by the name of the interface. The interface definition includes a list of properties, along with their types. For example, the following interface defines a simple object with two properties, name and age, both of which are strings:

interface Person {
  name: string;
  age: string;
}

Once an interface has been defined, it can be used to create variables and objects that conform to that specific shape. You can use the : operator to tell TypeScript that a variable or object should conform to a specific interface. For example:

let person: Person = { name: "John Doe", age: "35" };

You can also use interfaces to define function types. This can be useful when a function takes an object as an argument, and you want to ensure that the object conforms to a specific shape. For example:

interface GreetingFunction {
  (person: Person): string;
}

let greet: GreetingFunction = (person: Person) => {
  return "Hello, " + person.name;
};

Interfaces can also be extended to create new interfaces that inherit the properties of existing interfaces. This can be useful for creating more specific interfaces that add additional properties or constraints to the base interface. For example:

interface Employee extends Person {
  salary: number;
}

let employee: Employee = { name: "Jane Doe", age: "28", salary: 50000 };

In this example, the Employee interface inherits all of the properties of the Person interface, but also includes an additional property, salary.

In summary, interfaces in TypeScript are a powerful tool for defining the structure of objects and functions in your application. They allow you to create custom types that can be used throughout your code, and provide a way to ensure that objects conform to a specific shape. This can help to catch errors early on, reducing the chances of bugs and making your code more maintainable.

Thanks in advance for reading this article...🚀

I am more than happy to connect with you on

You can also find me on

@Github
@DEV

Let’s play around with Carousel marquee ✌️

Nitin Reddy — Sat, 21 Jan 2023 02:09:57 +0000

Today we will look at how we can create a carousel marquee view and customise it according to our requirements.

To experiment with the carousel view, we will

Create a new codesandbox project.
Select a React boiler plate template

and boo-ya the project would be created for you.

Now in the styles.css, update the code with the below CSS.

.App {
  font-family: sans-serif;
  text-align: center;
}

.wrapper {
  max-width: 100%;
  overflow-y: auto;
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: marquee 50s linear infinite;
}

.marquee p {
  display: inline-block;
}

.item {
  float: left;
  margin-right: 50px;
  margin-bottom: 50px;
  border: 1px solid;
}

.item:last-child {
  margin-right: 0;
}
@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

Update your App.js file with the below code,

import "./styles.css";

export default function App() {
  const items = [
    {
      name: "Test1",
      url: "https://upload.wikimedia.org/wikipedia/commons/1/11/Test-Logo.svg"
    },
    {
      name: "Test2",
      url:
        "https://images.pling.com/img/00/00/48/70/84/1220648/e4fff450a6306e045f5c26801ce31c3efaeb.jpg"
    },
    {
      name: "Test3",
      url: "https://upload.wikimedia.org/wikipedia/commons/8/85/Logo-Test.png"
    },
    {
      name: "Test4",
      url:
        "https://static6.depositphotos.com/1014550/624/i/950/depositphotos_6240474-stock-photo-test-word-on-keyboard.jpg"
    },
    {
      name: "Test5",
      url: "https://upload.wikimedia.org/wikipedia/commons/1/11/Test-Logo.svg"
    },
    {
      name: "Test6",
      url:
        "https://images.pling.com/img/00/00/48/70/84/1220648/e4fff450a6306e045f5c26801ce31c3efaeb.jpg"
    },
    {
      name: "Test7",
      url: "https://upload.wikimedia.org/wikipedia/commons/8/85/Logo-Test.png"
    },
    {
      name: "Test8",
      url:
        "https://static6.depositphotos.com/1014550/624/i/950/depositphotos_6240474-stock-photo-test-word-on-keyboard.jpg"
    }
  ];
  return (
    <div className="App">
      <h1>Caoursel marquee</h1>

      <div className="wrapper">
        <div className="marquee">
          {items.map(({ url, name }) => {
            return (
              <div
                className="item"
                onClick={() => window.open(url, "_blank")}
              >
                <img src={url} width="100" height="100" alt={name}/>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

So easy, right? You can find the project on codesandbox

Credits

https://stackoverflow.com/questions/45847392/pure-css-continuous-horizontal-text-scroll-without-break

Thanks in advance for reading this article...🚀

I am more than happy to connect with you on

You can also find me on

@Github
@DEV

Configure Jest and usage in UmiJS 🥳

Nitin Reddy — Thu, 12 Jan 2023 12:54:37 +0000

Before setting up Jest and using it in your application,
you can initiate a umijs project using the following

yarn create @umijs/umi-app

To configure Jest in umi.js, you will need to install the following dependencies:

jest and @testing-library/react: These are the core libraries needed for running tests and testing React components.
babel-jest: This library is needed to enable Jest to understand modern JavaScript syntax.
@umijs/preset-jest: This is a preset that provides a set of Jest configurations that are optimized for umi.js.

Once you have installed these dependencies, you can add a jest field to the package.json file in your project's root directory. This field should contain the following configurations:

{
  "jest": {
    "preset": "@umijs/preset-jest"
  }
}

You also need to add jest script in package.json

"scripts": {
    "test": "jest"
  }

And then you can run the test cases via npm run test

You can also configure Jest with a configuration file, jest.config.js, in the project's root directory. This file should export an object that contains the Jest configurations.

Make sure you have the correct imports and presets in your jest.config.js file.

const { presets } = require('@umijs/preset-jest');
module.exports = {
  ...presets,
  testMatch: ['<rootDir>/tests/**/*.test.js'],
};

This should get you started with Jest in umi.js.

To write unit tests in umi.js, you can use Jest as the test runner and React testing library as the testing library.

Create a tests folder in your project, and create a test file for the component you want to test (e.g. MyComponent.test.js).
Import the component you want to test and the Enzyme library at the top of the test file:

import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

Write your test cases using Jest and Enzyme. For example, you can test if the component renders correctly by doing the following:

describe('MyComponent', () => {
  it('should render the component', () => {
    const { getByText } = render(<MyComponent />);
    const text = getByText(/Hello, World!/i);
    expect(text).toBeInTheDocument();
  });
});

Finally, you can run the tests by running the following command:

npx jest

Make sure you have the jest configuration file in your project root directory. If not, you can create one with the command jest --init or creating a file called jest.config.js in the root of your project with the following content:

module.exports = {
  "setupFilesAfterEnv": ["<rootDir>/setupTests.js"]
}

Thanks in advance for reading this article...🚀

I am more than happy to connect with you on

You can also find me on

Python Dictionaries - Update data, loop through 🐍

Nitin Reddy — Wed, 04 Jan 2023 17:07:29 +0000

Dictionaries are an interesting data structure in Python. In other programming languages like JavaScript, you can call it an object.

Getting back to our example, we can change the value of a dictionary key as shown below:

dict = {"name": "Nitin", "age": 34, "gender": "male"}

dict["name"] = "ABC"
dict["name"]
Result -> ABC

Pretty easy isn't it?

Add a new key-value pair

Now let's look at how we can add a new key-value pair to a dictionary.
Python dictionary has an update method that gives you the freedom to add or update a new key-value pair.

dict = {"name": "Nitin", "age": 34, "gender": "male"}

dict.update({"city": "Pune"})
dict
Result -> {"name": "Nitin", "age": 34, "gender": "male", "city": "Pune"}

Update a key-value pair

Updating a key-value pair is pretty simple.

dict = {"name": "Nitin", "age": 34, "gender": "male"}

dict.update({"city": "Delhi"})
dict
Result -> {"name": "Nitin", "age": 34, "gender": "male", "city": "Delhi"}

If you observe in the above example, the new key-value pair is added with the curly braces as an argument to the update method.

If the key-value pair already exists in the dictionary then the value will be replaced and if the key-value pair does not exist then this method will create a new key-value pair.

Loop over the dictionary

We can also loop over the dictionary data using the for iterator and it's quite easy.

dict = {"name": "Nitin", "age": 34, "gender": "male"}

for data in dict.keys():
    print(data)

Result ->
name
age
gender

Here we loop over the dictionary keys and as a result, the keys are getting printed.

We can also loop over the dictionary keys' values using the for iterator

dict = {"name": "Nitin", "age": 34, "gender": "male"}

for data in dict.values():
    print(data)

Result ->
Nitin
34
male

Easy to understand? 💡

A dictionary contains

Loop over the dictionary
Add or update the dictionary data

This would look similar to an object in JavaScript

Conclusion 📗

There are more posts on the way related to the dictionaries...So keep reading.

Thanks in advance for reading this article...🚀

I am more than happy to connect with you on

You can also find me on

Python Dictionaries - Access, delete element…

Nitin Reddy — Mon, 02 Jan 2023 10:50:11 +0000

In the last article we had seen how we can create a dictionary and access an element in it. Today we are going to deep dive into the main data structure in Python known as Dictionary.

Accessing an element 💡

The element in the dictionary can be accessed through the square brackets nomenclature.

dict = {"name": "Nitin", "age": 34, "gender": "male"}

dict["name"]
Result -> Nitin

What if you are trying to access an element that is not in the dictionary?

dict = {"name": "Nitin", "age": 34, "gender": "male"}

dict["address"]
Result -> Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
KeyError: 'address'

In the above example, the address is not in the dictionary because we are trying to access it from the square brackets.

But we can also leverage the get method to access the dictionary key

dict = {"name": "Nitin", "age": 34, "gender": "male"}
dict.get("name")
Result -> 'Nitin'

Delete an element with `del` method 💡

dict = {"name": "Nitin", "age": 34, "gender": "male"}
del(dict["name"])
print(dict)
Result -> {"age": 34, "gender": "male"}

Delete the dictionary 💡

dict = {"name": "Nitin", "age": 34, "gender": "male"}
del(dict)
print(dict)
Result -> <class 'dict'>

In order to delete the dictionary you just have to mention the dictionary variable name in the del method.

Find the length 💡

Finding the length of the dictionary is quite simple.

dict = {"name": "Nitin", "age": 34, "gender": "male"}
len(dict)
Result -> 3

Check if the key exists 💡

Not so difficult.

dict = {"name": "Nitin", "age": 34, "gender": "male"}
print("name" in dict)
Result -> True

The boolean would be returned when you try to check the key in the dictionary.

Easy to understand? 💡

A dictionary contains

unique keys
key can have different types of values like number, string, boolean etc.
we can access dictionary elements with multiple approaches

This would look similar to an object in JavaScript

Conclusion 📗

There are more posts on the way related to the tuples...So keep reading.

Thanks in advance for reading this article...🚀

I am more than happy to connect with you on

You can also find me on

Let us learn about UmiJS

Nitin Reddy — Wed, 26 Oct 2022 05:45:09 +0000

What is UmiJS 💡

It leverages the idealogy of React, NextJS and TypeScript.
It is a utility framework that can be used to build enterprise-level applications.
Built by Ant Group, the subsidiary of Alibaba.
It has an in-built routing mechanism that supports configuration and conventional routing.
Supports micro-frontend, component packaging, documentation tools, request library, hooks library, data flow etc.

Setup the project

Prerequisites

node ≥ 10.13.0
yarn package

Create an empty project

$ mkdir myapp && cd myapp

Create a umi project

$ yarn create @umijs/umi-app

Install dependencies

$ yarn

Start the project

$ yarn start

Check the application running

Folder structure

.umi folder contains the umi plugins that would be used across the development of the application.
pages folder contains the files that would be rendered in the UI. The name of the file name is the route name for the file as well.

Conclusion 📗

More details are incoming around UmiJS...

Thanks in advance for reading this article...🚀

I am more than happy to connect with you on

You can also find me on

Learn Python #9 - Yeah Dictionary🐍

Nitin Reddy — Fri, 07 Oct 2022 11:33:12 +0000

Today we are going to deep dive into the main data structure in Python known as Dictionary.

Not a dictionary of words

What is Dictionary?💡

In Python, a dictionary is a list of key-value pairs.
Ok, let's take an example.

Creating a Dictionary💡

dictionary_1 = {
  'name': 'Nitin',
  'age': 34,
  'country': 'India'
}

In the above example
name, age, and country are the keys with the corresponding values as Nitin, 34, and India.

Also, we can create a nested dictionary

dictionary_1 = {
  'name': 'Nitin',
  'age': 34,
  'address': {
    'street': 'Keshav'
    'country': 'India'
  }
}

Easy to understand?💡

A dictionary contains

unique keys
key can have different types of values like number, string, boolean etc.

This would look similar to an object in JavaScript

Accessing a key's value💡

dictionary_1 = {
  'name': 'Nitin',
  'age': 34,
  'country': 'India'
}

dictionary_1['name']
// Nitin


dictionary_2 = {
  'name': 'Nitin',
  'age': 34,
  'address': {
    'street': 'Keshav'
    'country': 'India'
  }
}

dictionary_2['address']['street']
// Keshav

To access any value in a dictionary, we need to enclose the key in square brackets []

Conclusion 📗

There are more posts on the way related to the tuples...So keep reading.

Thanks in advance for reading this article...🚀

I am more than happy to connect with you on

You can also find me on

Learn Python #8 - Let's do Tuple...🐍

Nitin Reddy — Sat, 10 Sep 2022 08:34:42 +0000

Tuples 💡

Tuple in Python is a collection that is ordered, and unchangeable.

Find an element by index 💡

You can find an element in the tuple by index

new_tuple=(1,"b",False)
print(new_tuple[0]) //1
print(new_tuple[1]) //"b"

Ordered 💡

The tuple is an ordered collection. The order can not be changed.

Unchangeable 💡

Once defined, the tuple cannot be changed. But we can do some work around to update the tuple by leveraging list.

new_tuple = (1,"b")
updated_tuple = list(new_tuple)
updated_tuple[1] = "c"
new_tuple = tuple(updated_tuple)
print(new_tuple) // (1,"c")

Access the elements 💡

Items in a tuple can be accessed with a negative index as well.

new_tuple=(1,2,3,"a", False)
new_tuple[-1] //False

Conclusion 📗

There are more posts on the way related to the tuples...So keep reading.

Thanks in advance for reading this article...🚀

I am more than happy to connect with you on

You can also find me on

Learn Python #7 - List operations 💡!

Nitin Reddy — Sat, 03 Sep 2022 01:06:33 +0000

💡This is a continuation of what we had learnt in our last post. Let us learn more about some other operations that could be performed on the python lists.

📘So today we will be covering the following list of operations:-

Combining list
Removing list items
Clearing out a list
Counting how many times an item appeared in the list
Finding a list item's index

Combining list

In python, combining the two lists is bit easy. Let's learn through an example...

list1 = ['Roger', 'Stark', 'Banner'] //List 1
list2 = ['Steve', 'Tony', 'Bruce'] //List 2

list1.extend(list2)
//['Roger', 'Stark', 'Banner', 'Steve', 'Tony', 'Bruce']

In the above example, list1 is extended by including the list items of list2.

Removing list items

There are different ways in which the item can be removed from the list. Let's look at them one by one

remove method

list1 = ['Roger', 'Stark', 'Banner']
list1.remove('Roger')

pop method

list1 = ['Roger', 'Stark', 'Banner', 'Steve', 'Tony', 'Bruce']
list1.pop(0) // 'Roger' is removed from the list since the index specified is 0
// Result - ['Stark', 'Banner', 'Steve', 'Tony', 'Bruce']

list1.pop() // 'Bruce' is removed from the list as it was the last item on the list.
// Result - ['Stark', 'Banner', 'Steve', 'Tony']

del keyword

list1 =  ['Roger', 'Stark', 'Banner', 'Steve', 'Tony', 'Bruce']
del list1[2]
// Result -  ['Roger', 'Stark', 'Steve', 'Tony', 'Bruce']

Clearing out the list

In case you want the delete the content of the lists but not the list, you can use the clear method on the list.

list1 =  ['Roger', 'Stark', 'Banner', 'Steve', 'Tony', 'Bruce']
list1.clear()
// Result - []

Easy peasy isn't it?

Counting how many times an item appeared in the list

You can also find the number of appearances of a specific item in a list. This can be achieved by using the count method on a list that takes an item as an argument.

list1 =  ['Roger', 'Stark', 'Banner', 'Roger', 'Tony', 'Bruce']
list1.count('Roger')
// Result - 2

Finding a list item's index

This operation would be pretty useful when you want to find and replace an item in the list with another item.
To find an index of an item in a list, we use the index method.

list1 =  ['Roger', 'Stark', 'Banner', 'Roger', 'Tony', 'Bruce']
list1.index('Roger')

The catch here is that this method will return the index of the first instance of an item from the list.

Conclusion

There are more posts on the way related to the lists...So keep reading.

Thanks in advance for reading this article...🚀

I am more than happy to connect with you on

You can also find me on

Deep cloning of an object in JavaScript...

Nitin Reddy — Tue, 16 Aug 2022 19:00:00 +0000

As JavaScript developers, we most often than not come across a situation where we want to clone an object and reuse it to perform some operations.

And we usually follow well-known approaches to deep clone the object:-

lodash's cloneDeep method
JSON.parse(JSON.stringify(object))

What if I say that you are not supposed to use the above two approaches and you should create your custom method to deep clone the object?

I have an answer for that. Let's write a utility method that would help us in achieving the deep cloning of an object.

Example

Let us say that I have a nested object as below

let emptyStack = {
  feTools: 'JS, React, NextJS, Tailwindcss, Netlify',
  react: {
    baseConcepts: 'props, states, hooks',
    advancedConcepts: {
      hoc: 'composition of the functions',
      contextApi: 'Sharing the data without prop drilling'
    }
  }
}

So in the above, as you can see we have the nested objects inside emptyStack. Let us try to understand and evaluate what all steps are required to be executed to achieve the deep cloning of an object.

Pseudo code

Steps:

Initialize a new empty object
Iterate over the keys of an object and check if the key-value pair is an object
And based on the result of Step#2 update the empty object with the new properties.
Repeat the Step#2 and #3 till the last element of an object is evaluated.

The ultimate utility method

function deepCopy(currentObj) {
  let newObj = Array.isArray(currentObj) ? [] : {}; //Step#1
  for (let key in currentObj) { //Step#2
    let property = currentObj[key];
    if (typeof property === "object") {
      newObj[key] = deepCopy(property); //Step#3
    } else {
      newObj[key] = property; //Step#3
    }
  }
  return newObj;
}

Usage

let deepClonedObject = deepCopy(emptyStack)

console.log(`${JSON.stringify(deepClonedObject)}`)
/** Output
{"feTools":"JS, React, NextJS, Tailwindcss, Netlify","react":{"baseConcepts":"props, states, hooks","advancedConcepts":{"hoc":"composition of the functions","contextApi":"Sharing the data without prop drilling"}}} */

What all concepts are used in the above method?

Recursive function
Object keys iteration

Conclusion

Deep cloning an object is really useful in the scenarios where you want the back referencing to happen for a cloned object.
There are more posts on the way related to the lists...So keep reading.

Thanks in advance for reading this article...🚀

I am more than happy to connect with you on

You can also find me on

Learn Python #6 - Let's List it...

Nitin Reddy — Sun, 07 Aug 2022 01:02:00 +0000

What are Lists?

Lists in Python are the collection of elements of data. What does that mean? Let's check the below examples.

Let us look at an example

Example 1:

Let's say we have a list of employees with their name as the list items

employees = ["Abc", "Bcd"]

In the above item, you can add a new item, remove an item, append an item, and furthermore.

Add an item

There are two ways in which we can add a new item to the list.

Append

employee.append("Cde")
// employee -> ["Abc", "Bcd", "Cde"]

Insert

employee.insert(0, "Efg")
// employee -> ["Efg", "Abc", "Bcd", "Cde"]

The difference between the append and insert methods is that the append add the element at the last position of the list whereas in insert you can specify at what position you want to add the element.

Get the length of the list

employee = ["Efg", "Abc", "Bcd", "Cde"]
len(employee) -> 4

len is useful that helps in getting the length of a list.

Reference a list item by its position

employee = ["Efg", "Abc", "Bcd", "Cde"]
employee[2]

In the [] you need to specify a position of an element that you need a reference to.

Changing an item in the list

employee = ["Efg", "Abc", "Bcd", "Cde"]
employee[1] = "Nitin"

Find the element by specifying the position and then assign the value.

Conclusion

There are more posts on the way related to the lists...So keep reading.

Thanks in advance for reading this article...🚀

I am more than happy to connect with you on

You can also find me on

Let’s do fabform…

Nitin Reddy — Thu, 28 Jul 2022 04:47:09 +0000

What is fabform?

Fabform is a smart form endpoint for developers who are using the forms in the web apps on a day-to-day basis.

Fabform provides an endpoint to play around with their neat APIs.

How to create the fabform API id?

Signup to fabform.io

Click on Create endpoint

Provide a meaningful name to create an endpoint.

And that is it. You are done

How to play around with the fabform API?

Once you create an endpoint, you can simply click on Test Form to try the API.

You will see the input boxes asking for First Name, Last Name and Email to be entered. Once you enter the fields click on the Test Form button.

Once you click on the Test Form button, information is saved corresponding to the API ID that you had created earlier.

Conclusion

Try this new tool to save the form data via their API. It’s easy to use.

Thanks in advance for reading this article...🚀

I am more than happy to connect with you on

You can also find me on

@Github
@DEV

DEV Community: Nitin Reddy

Wassup TypeScript Interfaces!

Let’s play around with Carousel marquee ✌️

To experiment with the carousel view, we will

Credits

Configure Jest and usage in UmiJS 🥳

To configure Jest in umi.js, you will need to install the following dependencies:

To write unit tests in umi.js, you can use Jest as the test runner and React testing library as the testing library.

Python Dictionaries - Update data, loop through 🐍

Add a new key-value pair

Update a key-value pair

Loop over the dictionary

Easy to understand? 💡

Conclusion 📗

Python Dictionaries - Access, delete element…

Accessing an element 💡

Delete an element with del method 💡

Delete the dictionary 💡

Find the length 💡

Check if the key exists 💡

Easy to understand? 💡

Conclusion 📗

Let us learn about UmiJS

What is UmiJS 💡

Setup the project

Prerequisites

Create an empty project

Create a umi project

Install dependencies

Start the project

Check the application running

Folder structure

Conclusion 📗

Learn Python #9 - Yeah Dictionary🐍

What is Dictionary?💡

Creating a Dictionary💡

Easy to understand?💡

Accessing a key's value💡

Conclusion 📗

Learn Python #8 - Let's do Tuple...🐍

Tuples 💡

Find an element by index 💡

Ordered 💡

Unchangeable 💡

Access the elements 💡

Conclusion 📗

Learn Python #7 - List operations 💡!

Combining list

Removing list items

Clearing out the list

Counting how many times an item appeared in the list

Finding a list item's index

Conclusion

Deep cloning of an object in JavaScript...

Example

Pseudo code

The ultimate utility method

Usage

What all concepts are used in the above method?

Conclusion

Learn Python #6 - Let's List it...

What are Lists?

Let us look at an example

Add an item

Get the length of the list

Reference a list item by its position

Changing an item in the list

Conclusion

Let’s do fabform…

What is fabform?

How to create the fabform API id?

How to play around with the fabform API?

Conclusion

Delete an element with `del` method 💡