DEV Community: Alwaisy al-waisy

NuxtJs 3.2.0: The Latest Release Brings Exciting New Features

Alwaisy al-waisy — Sun, 12 Feb 2023 10:33:40 +0000

Nuxt.js, a popular open-source framework for building modern web applications, has just released its latest version, 3.2.0. This is the first minor release since the start of the new release schedule and is packed with new features and improvements.

Do you remember when there was last release?, it was on 3 Feb 2023. The NuxtLab team is so fast, they release 3.2.0, another update from the NuxtJs. In this article, we'll take a look at some of the highlights of this latest release.

Originally published here

Some new features from Nuxt 3.2.0

One of the most exciting features in the 3.2.0 release is Nuxt DevTools. This new tool allows developers to debug and inspect their Nuxt.js applications with ease. You can enable Nuxt DevTools per project by running the command,

 npx nuxi@latest devtools enable

Once you restart your Nuxt server and open your application in the browser, you can toggle the DevTools by clicking on the Nuxt icon at the bottom of the screen or by pressing Alt+D.

The latest release includes better DX (developer experience) for overriding runtimeConfig. This includes inline type helpers, making it easier for developers to change their applications.
Another exciting feature in the 3.2.0 release is the automatically inferred return type for useFetch and $fetch. This new feature makes it a type error to use the wrong method when hitting an endpoint, and the response type will match the kind of response you make.

Additionally, the useFetch is now integrated with event.$fetch, which means that cookies and context are automatically passed to API requests within internal requests.
Treeshake Client-Only Components Out of the Server Build: treeshakes client-only components out of the server build more effectively using the experimental treeshakeClientOnly feature. This is turned on by default, but if you experience any issues, you can turn it off by modifying the configuration.
Module authors now have access to a new addRouteMiddleware kit utility, making it easier for them to create and manage middleware for their modules.

Nitropack v2.2 Released

Along with the Nuxt.js 3.2.0 release, Nitropack v2.2 has also been released. This new version includes several new features, including runtime proxy support using route rules, nested fetch calls, binary and raw storage operations, and built-in session support.

Conclusion

In conclusion, the Nuxt.js 3.2.0 release is a minor update that brings several new features and improvements to the framework. Whether you're a seasoned Nuxt.js developer or just starting out, this latest release is definitely worth checking out. For more information on the 3.2.0 release, be sure to check out the release notes.

Which feature do you like so much, I like treeshaking and nitropack updates, these are awesome updates by Nuxt team.

A developer lives in a state of learning, some times he suffers from imposter syndrome. I am also a developer and learner. I wrote about what I learned. I want to get you out of syndrome. Here is the newsletter that will help you to learn new concepts. Here you go

I am open to feedback, suggestion, and improvements. Thanks for your precious time.

7 ways to convert Objects into Array in JavaScript

Alwaisy al-waisy — Wed, 01 Feb 2023 04:32:12 +0000

There are different methods to convert an object into an array like Object.entries(), Object.values(), and loops including for...in, and for...of .

Originally published
here

Hi, Developers! in this article, I will talk about typecasting on a higher level. It is not exactly the same but it has a similar procedure. We are going to convert Objects into Array.

Nifty!

but why do we need to convert? Do objects not play well? That is not true! actually, Objects are much better than arrays. They can handle complex data and provide better access to their properties. But sometimes array becomes a great choice because of its methods and easy iteration.

Here I will explain why to use an Array,

Arrays provide an easy way to iterate over their elements using a for loop, forEach(), or map() method, while objects require additional steps to iterate over their properties.
It is often necessary to sort an array of objects based on a specific property. This can be done using the sort() method, which is not available for objects.
Converting an object into an array allows you to manipulate its properties in a more flexible way, such as mapping, filtering, or reducing and slicing the properties into a new form.

Two days ago I tried to slice an object but later I have to convert it into an array. Therefore I am going to explain several ways to convert a JavaScript object into an array.

Object.entries()
Object.values()
for...in loop
Object.keys() and map()
Using Array.from() method
Using the spread operator (...)
Using JSON.parse() and JSON.stringify()

How to use Object.entries()?

The first method to convert a JavaScript object into an array is using Object.entries().

Object.entries() is a method available on all JavaScript objects that returns an array of arrays, where each inner array consists of a key/value pair from the object. Here's an example of using Object.entries() to convert an object into an array

let obj = { name: 'John', age: 30, city: 'New York' };

let arr = Object.entries(obj);
console.log(arr);

// Output: [['name', 'John'], ['age', 30], ['city', 'New York']]

How to use Object.values()?

The second method to convert a JavaScript object into an array is using Object.values().

Object.values() is a method available on all JavaScript objects that returns an array of the object's values. Here's an example of using Object.values() to convert an object into an array

let obj = { name: 'John', age: 30, city: 'New York' };

let arr = Object.values(obj);
console.log(arr);

// Output: ['John', 30, 'New York']

Using for...in loop with Objects

The for...in loop is a traditional looping method in JavaScript to iterate over the properties (keys) of an object. It can be used to convert an object into an array by extracting its values and forming a new array with them. Here's an example

let obj = {a: 1, b: 2, c: 3};
let arr = [];

for (let key in obj) {
    arr.push(obj[key]);
}

console.log(arr);
// Output: [1, 2, 3]

Using Object.keys() and map()

The fourth method to convert a JavaScript object into an array is by using the Object.keys() method combined with the map() method.

The Object.keys() method returns an array of the properties (keys) of an object, and the map() method allows you to transform each item in an array and return a new array.

Here's an example to use it,

let obj = {a: 1, b: 2, c: 3};
let arr = Object.keys(obj).map(key => obj[key]);

console.log(arr);
// Output: [1, 2, 3]

Array.from() is best method

To convert a JavaScript object into an array is by using the Array.from() method. The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object. Here is how

let obj = {a: 1, b: 2, c: 3};
let arr = Array.from(Object.entries(obj), ([key, value]) => value);

console.log(arr);
// Output: [1, 2, 3]

How spread operator help to convert an Object into an Array

The second last method to convert a JavaScript object into an array is by using the spread operator (...). The spread operator allows you to spread the elements of an iterable such as an object, into a new array.

Here's what you can do!

let obj = {a: 1, b: 2, c: 3};
let arr = [...Object.values(obj)];

console.log(arr);
// Output: [1, 2, 3]

What JSON.parse() and JSON.stringify() can do

I am also learning it. I will add an example here later.

I am open to feedback, suggestion, and improvements. Thanks for your precious time.

TypeScript's Utility Types: A developer's guide to strong typing

Alwaisy al-waisy — Sun, 29 Jan 2023 04:00:00 +0000

TypeScript's utility types are a powerful tool for developers looking to improve the robustness and maintainability of their code. TypeScript comes with a large number of types that can help with some common type manipulation, usually referred to as utility types.

With utility types, developers can create new types, extract specific properties from existing types, or even remove properties from existing types. One of the main benefits of strong typing is that it allows for better code readability and maintainability.

The purpose of this guide is to provide developers with a comprehensive understanding of TypeScript's utility types and how to use them effectively in their projects.

The guide will cover the various types of utility types available in TypeScript, such as "Pick", "Exclude", "Omit", and "Partial”.

This guide is intended for developers of all skill levels, from those who are new to TypeScript to experienced developers looking to improve their knowledge of the language.

By the end of this guide, you will have a solid understanding of how to use TypeScript's utility types to improve the quality and maintainability of your code.

Commonly used utility types

Understanding TypeScript's Utility Types is an essential aspect of working with the TypeScript programming language. The most commonly used utility types include "Pick", "Exclude", "Omit", "Partial" and more.

Using TypeScript `Pick` type

The "Pick" type allows developers to extract a specific set of properties from an existing type and create a new type that only includes those properties. This can be useful for situations where you have an object with multiple properties, but you only need to use a specific subset of those properties in a particular function.

interface Person {
  name: string;  // Property name
  age: number;   // Property age
  address: string;  // Property address
}

type PersonInfo = Pick<Person, "name" | "age">; // Use Pick utility type to select properties "name" and "age" from Person interface and create new type PersonInfo

const person: PersonInfo = {  // Define person as type of PersonInfo
  name: "John Doe",
  age: 30
};

Using TypeScript `Exclude` type

The "Exclude" type allows developers to remove specific properties from an existing type. This can be useful for situations where you have an object with multiple properties, but you only need to exclude some of those properties in a particular function.

interface Person {
  name: string; // Property name
  age: number; // Property age
  address: string; // Property address
}

type PersonInfo = Exclude<Person, "address">; // Exclude "address" property from Person interface and create new type PersonInfo

const person: PersonInfo = { // Define person as type of PersonInfo
  name: "John Doe",
  age: 30
};

Using TypeScript `Omit` type

Omit is the opposite of Pick, it allows you to remove specific properties from an existing type and create a new type that does not include those properties*,*

*********Note:********* unlike pick which allows you to extract specific properties from an existing type and create a new type that only includes those properties.

It is useful when you have an object with multiple properties, but you only need to exclude some of those properties in a particular function. I hope you understand it well because it took me a lot of time to learn it, but you are smart and not dumb. Don’t worry code will omit your confusion.

interface Person {
  name: string;  // Property name
  age: number;   // Property age
  address: string;  // Property address
}

type PersonInfo = Omit<Person, "address">;  // Omit "address" property from Person interface and create new type PersonInfo

const person: PersonInfo = {  // Define person as type of PersonInfo
  name: "John Doe",
  age: 30
};

In addition to these commonly used utility types, TypeScript also provides a number of advanced utility types that can be used for more specific use cases. These include types such as "Readonly", "Required", "Record", and "Extract", among others.

Advanced Usage of Utility Types

Advanced usage of utility types in TypeScript can involve combining multiple utility types to create more complex types. Here are a few examples of how to use utility types in advanced ways:

Using Intersection to create a type that includes properties from multiple types:

type T1 = { a: number, b: string };
type T2 = { b: boolean, c: string };
type T3 = T1 & T2;

Using Mapped Types to create a new type with modified properties:

type T1 = { a: number, b: string };
type T2 = { [P in keyof T1]: T1[P] | null }

Using Conditional Types to create a type that changes based on certain conditions:

type T1 = { a: number, b: string };
type T2 = { c: number, d: string };
type T3 = Exclude<keyof T1 | keyof T2, keyof T1>;

Combining utility types to create custom types

When you want to create a new type that combines properties from multiple existing types. The Intersection utility type allows you to easily create new types that include properties from multiple other types.

interface Person {
  name: string; // Property name
  age: number; // Property age
  address: string; // Property address
}

interface Job {
  title: string; // Property title
  salary: number; // Property salary
}

// Use the Intersection utility type to create a new type that includes properties from both Person and Job interfaces
type Employee = Person & Job;

const employee: Employee = {
  name: "John Doe",
  age: 30,
  address: "123 Main St",
  title: "Developer",
  salary: 60000
};

It is also possible to use other utility types to further refine this custom type. For example, you might use the "Pick" utility type to select specific properties from the "Employee" type or the "Omit" utility type to exclude certain properties from the "Employee" type.

Best Practices for Using Utility Types

When using utility types, it is important to keep in mind that they are a tool to help you achieve strong typing in your application, but they should not be overused.

Here is an example close to a real use case,

interface User {
  name: string;
  age: number;
  address: string;
  email: string;
  phone: string;
}

// Define a custom type that is specific to the needs of the application
type ContactableUser = {
  name: User['name'],
  email: User['email']
}

const user: ContactableUser = {
  name: 'John Doe',
  email: 'johndoe@example.com',
};

It is often better to create a custom type that is specific to the needs of your application rather than trying to use multiple utility types together. This can make your code more readable and easier to maintain. These are some common mistakes when using utility types

Not specifying the correct types: It's important to make sure that you are passing the correct types to the utility types. For example, if you're using Pick to select properties from an object, make sure that the properties you're selecting actually exist on that object.
Not using the correct syntax: Utility types often require a specific syntax to be used correctly. For example, when using Exclude, you need to pass in two types: the original type and the type of the properties to be excluded.
Not understanding the behavior of the utility type: Each utility type behaves differently and it's important to understand how they work before using them. For example, Omit will remove properties from an object, but it will not change the type of the remaining properties.

To prevent these mistakes, it is important to read the official TypeScript documentation and understand the behavior of each utility type.

Additionally, mostly I do, you should use inline comments in your code to document your use of the utility types and to make it easier for other developers to understand your code.

Strategies for debugging code with utility types

Debugging and troubleshooting code that uses TypeScript's utility types can be challenging, but there are a few strategies you can use to make it easier. One of the most important things to understand is the error messages that TypeScript will provide. These messages often include the specific utility type that is causing the issue, so understanding what these types do can help you quickly identify and fix the problem. Okay! let's learn some debugging tips

Using the `console.log()` function

Logging the values of variables that use utility types can help you understand what is happening with your data. This can be especially useful when working with complex utility types such as Intersection and Union. console.log is considered to be a weapon in the JavaScript world.

Using the `typeof` operator

The typeof operator can be used to check the type of a variable, which can be useful when working with utility types that change the type of a variable, such as Exclude and Omit.

Using the `in` operator

The in operator can be used to check if a property exists in an object, which can be useful when working with utility types that remove properties from an object, such as Pick and Omit.

Using the `keyof` operator

The keyof operator can be used to check the keys of an object, which can be useful when working with utility types that change the keys of an object, such as Record.

Using the `type` alias

Defining a type alias for a complex utility type can make the code more readable and also make it easier to debug.

Using a type-checking tool

There is a ts-check in your editor, which can provide real-time type checking and error messages, which can help you catch issues with your types early on.

If all else fails, consult the TypeScript documentation, which provides detailed explanations of each utility type and how to use them correctly.

Closing words

I hope you like the article and found it informative and helpful. TypeScript's utility types are a powerful tool for improving the safety and maintainability of your code.

By understanding the different utility types available and how to use them, you can create more robust and error-free code.

Additionally, by following best practices and having strategies for debugging and troubleshooting, you can ensure that any issues that arise can be quickly identified and resolved.

Overall, learning to effectively use utility types can greatly benefit any developer working with TypeScript.

A developer lives in a state of learning, some times he suffers from imposter syndrome. I am also a developer and learning. I wrote about what I learn. I want to get you out of syndrome. Here is the newsletter that will help you to learn new concepts. There you go

I am open to feedback, suggestion, and improvements. Thanks for your precious time.

3.1.0 is the first minor release after Nuxt 3.0 is out

Alwaisy al-waisy — Wed, 25 Jan 2023 04:24:53 +0000

Hi Vue developers! this is the very first release after Nuxt becomes stable.
The latest release of Nuxt, version 3.1.0, brings a host of new features and improvements to the framework. This release includes bug fixes and enhancements and new experimental features such as component Islands and server-only components. Island feature, I like it really.

What’s changed

One of the major highlights of this release is the significant improvements made to the documentation and website, which can already be seen on the NuxtJs GitHub release page. New composables such as onNuxtReady, useNuxtData, and useSeoMeta have been added, as well as an experimental config schema for module or theme authors.

In terms of performance, this release includes an upgrade to Nitropack v2 and a migration to Vite 4 and Rollup 3. This is expected to result in faster build times and improved performance. Vite and Turbopack are the future.

Other enhancements in this release include the addition of an experimental server component islands, support for extending error.vue in layers, and the ability to use deep-watch useCookie ref value by default.

There are also several bug fixes in this release, including the removal of postcss.config from the schema, the inclusion of missing <NuxtPage> component props, and the support for applying .nuxtignore within external layers. A really interesting feature, getting more control over layouts.

My remarks

Overall, this release of Nuxt brings a number of new features and improvements that are expected to enhance the user experience and improve performance. It is essential for developers to stay up-to-date on the latest releases of Nuxt in order to take advantage of these new features and improvements. Use NuxtJs, and leverage its amazing Vue and Vite-powered features. What do you think about this new release, share your thoughts?

Typescript for frontend developers

Alwaisy al-waisy — Sat, 14 Jan 2023 05:56:29 +0000

Hey developers! I know you are working on an exciting project. I assume that, while starting the project, a person from management asked you to use Typescript and you are aware of TS. A year ago when Typescript was an immense fear for me, I never thought I will be using it in my every project and loving it. Typescript is an excellent language that has many cool features like

Catches errors at compile-time.
Provides documentation.
Allows editors to flag errors while typing and provides completion.
Makes refactoring less error-prone.
Makes some tests unnecessary.
Disallows many JavaScript-type coercions.
Very helpful in frontend frameworks like Vue and React, obviously in angular too

Typescript comes with a serious learning curve, and no doubt for beginners, it can give you a tough time but you have to learn it and grasp its advanced concepts because now the industry demands this technology almost in all new projects. But stay with me, because I am going to tell you some senior typescript concepts, I know you‘ll be loving them. Let’s go developers.

Remember major Types in typescript

"Hello" is a string
2 is a number
true/false is a boolean
{} is an object
[] is an array
NaN is not a number, not basically a real type.
null is empty or unknown
undefined means no value is set

credit: Conrad Davis Jr. on medium

What is type noImplicitAny

Typescript’s default behavior is to set the default type to function, or variable and mostly it types any for variables. Here is the function;

function testijgNoImplicitAny(args) {
  return args;
}

So here typescript will infer type automatically. Typescript gives you control over types. If making a variable typed is mandatory then there is an option to tell the compiler to produce an error on untyped code, so here is how to do this

Add "noImplicitAny": true

{
  "compilerOptions": {
    "target": "esnext",
    "noImplicitAny": true    -> here is the line
}

underlined error in red color - very nice it is working

To remove this error we can use any type such as any, number, string

What is type unknown

The unknown type is similar to any type in that all types are assignable to any, and unknown type.

Assignments to and from unknown require a type check, whereas assignments to and from any do not.
The unknown is a more restrictive type than any, meaning that fewer operations are allowed on values of type unknown without a type check.
unknown can be narrowed to a more specific type using type guards, whereas any cannot.

function example1(arg: any) {
  const a: str = arg; // no error
  const b: num = arg; // no error
}

function example2(arg: unknown) {
  const a: str = arg; // 🔴 Type 'unknown' is not assignable to type 'string'.(2322)
  const b: num = arg; // 🔴 Type 'unknown' is not assignable to type 'number'.(2322)
}

any type is bidirectional, whereas unknown is unidirectional.

Union and intersection types

An intersection type is a type that combines several types into one; a value that can be any one of several types is a union type. The & symbol is used to create an intersection, whereas the | symbol is used to represent a union.

Union types

Are joining multiple types with the "pipe" (|) symbol. For example, the type string | number is a union type that can be either a string or a number.

let value: string | number;

value = "hello";
console.log(value.toUpperCase()); // okay, value is of type 'string'

value = 42;
console.log(value.toFixed(2)); // Error: value.toFixed is not a function

Intersection types

Are joining multiple types with the "ampersand" (&) symbol. For example, the type string & number is an intersection type meaning one variable is a string and the other is a number.

interface A {
    x: number;
}

interface B {
    y: string;
}

let value: A & B;

value = { x: 1, y: "hi, ts developers" }; // okay
console.log(value.x); // 1
console.log(value.y); // "hi, ts developers"

Using Union and Intersection types together rock, for example

interface Person {
  name: string;
  age: number;
}
interface Employee {
  employeeId: number;
  salary: number;
}
interface Student {
  studentId: number;
  major: string;
}

type PersonType = Person & (Employee | Student);

let person: PersonType;
person = {
  name: "John",
  age: 25,
  employeeId: 123,
  salary: 50000
};

console.log(typeof person.name, person.name); // string John
console.log(typeof person.employeeId, person.employeeId) ; // number 123

How to use `Keyof` in typescript

In TypeScript, the keyof operator is used to create a new type that represents the keys of a given object type. The new type is a union of the string literals of the object's property names. To be honest, since I knew this type I am learning to use it. I mostly use it with Typescript record types.

A bit of usage of keyof

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

type PersonKeys = keyof Person;

let key: PersonKeys;
key = "name"; // okay
key = "age"; // okay
key = "address"; // Error: "address" is not a property of type 'PersonKeys'

PersonKeys is a union of the string literals of the property names of Person, only the values "name" and "age" are valid values for key.

Use-case of using keyof

interface Car {
    make: string;
    model: string;
    year: number;
}

const myCar: Car = {
    make: "Toyota",
    model: "Camry",
    year: 2020
};

function updateCar(
    car: Car,
    prop: keyof Car,
    value: string | number
) {
    car[prop] = value;
}

// 👍 okay
updateCar(myCar, "make", "Honda");
// 👍 okay
updateCar(myCar, "year", 2022);

// 👎 Error: "color" is not a property of type 'keyof Car'
updateCar(myCar, "color", "red");
// 👎 Error: "year" is not a property of type 'string'
updateCar(myCar, "year", "2022");

There is an interface Car that defines a car with three properties: make, model, and year. There is an object named myCar interfaced Car.

The updateCar function takes three arguments:

car of type Car.
prop of type keyof Car.
value of type string | number which can be string or number based on the prop.

The function modifies the value of the property identified by prop to value.

How Typeof in Typescript is different

JavaScript already has a typeof operator you can use in an expression context:

// Prints "string"
console.log(typeof "Hello world");

TypeScript adds a typeof operator you can use in a type context to refer to the type of a variable or property.

let text: string;
const firstName: typeof text;
const lasrName: typeof text;

firstName, lastName are a variable whose type is inferred using the typeof operator and the value of text. Because text is of type string.

ReturnType in typescript

The ReturnType utility type in TypeScript is used to extract the return type of a function or method.

function add(a: number, b: number): number {
    return a + b;
}

let addReturnType: ReturnType<typeof add>;

add is a function that takes two numbers as arguments and returns a number.

addReturnType is a variable whose type is inferred using the ReturnType utility type and the function add. And ReturnType<typeof add> is the same as number.

Use-case of ReturnType

Here is a real-world example using array functions.

data

const data = [
    { id: 1, name: 'John' }, // id -> number, name -> string
    { id: 2, name: 'Jane' }
];

implementing some array functions

const findById = (id: number) => data.find(item => item.id === id);
const getName = (item: any) => item.name;
const toUpperCase = (str: string) => str.toUpperCase();

extracting ReturnType and storing them in variables

let foundItem: ReturnType<typeof findById> = findById(1);
console.log(foundItem); // { id: 1, name: 'John' } // { id: number, name: string }

let itemName: ReturnType<typeof getName> = getName(foundItem);
console.log(itemName); // 'John'  // string

let upperCasedName: ReturnType<typeof toUpperCase> = toUpperCase(itemName);
console.log(upperCasedName); // 'JOHN' // string

What are Generics in Typescript

As per typescript docs,

Being able to create a component that can work over a variety of types rather than a single one. This allows users to consume these components and use their own types.

When you create a generic component, you can specify a placeholder type (also called a type parameter) that represents the actual type that the component will work with. Mostly this parameter is set to T like and these angle brackets are known as type-interface.

Syntax of Generics

A simple generic function that takes an array of elements and returns the first element of the array:

function syntax<T>(arg: T): T {
    return arg;
}

T is the type parameter that represents the actual type of elements in the array. When you call the syntax function, you can specify the type of elements by providing a type argument. So in simple words, arguments will decide the final type.

function getFirst<T>(arr: T[]): T {
    return arr[0];
}

let numbers = [1, 2, 3];
let firstNumber = getFirst<number>(numbers); // 1

let strings = ['a', 'b', 'c'];
let firstString = getFirst<string>(strings); // 'a'

type of the elements in the array is inferred from the array argument.

Using Conditional types in Typescript

The conditional ternary operator is a very well-known operator in Javascript. The ternary operator takes three operands. A condition, a return type if the condition is true, and a return type is false.

*********syntax*********

condition ? returnTypeIfTrue : returnTypeIfFalse;

Before going forward a bit of note about extending types

💡 In TypeScript, you can use the extends keyword to create new types that are based on existing types.

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

interface Employee extends Person {
    salary: number;
}

Here is how to use conditional types by leveraging generics <T>.

interface IdWithString {
  id: string;
}

interface IdWithNumber {
  id: number;
}

type Id<T> = T extends string ? IdWithString : IdWithNumber;

let idA: Id<string> = { id: "stringId" };
// Type is inferred as IdWithString

let idB: Id<number> = { id: 1 };
// Type is inferred as IdWithNumber

The Id type is a generic type that takes a type parameter T, and it uses a conditional type to check if T is assignable to string

Using typeof, and keyof types together

It is rocking to use keyof and typeof together in TypeScript. The keyof keyword allows you to extract the keys of an object type, while typeof allows you to extract the type of a variable.

so here is how

const colors = {
  red: '#ff0000',
  green: '#00ff00',
  blue: '#0000ff',
}; // 1

type Colors = keyof typeof colors; // 2, note

let selectedColor: Colors = 'green'; // 3

let anotherSelection: Colors = 'yellow'; // 4

console.log(colors[selectedColor]); // 5

// docs 
/**
1. Type '"yellow"' is not assignable to type '"red" | "green" | "blue"'
2. trying to get types of properties
3. yeah, it is correct 
4. Type '"yellow"' is not assignable to type '"red" | "green" | "blue"'
5. '#00ff00'

note: keyof typeof colors is equal to "red" | "green" | "blue" 
*/

How the TypeScript Record Type Works

The Record type is used to create an object type that has a set of properties with a specific key type and a specific value type. For a beginner, it is a bit tough to understand types per data type.

When I was young in typescript I usually use an empty object {} as a type of object, then IDE told me, dude! there is a Record type, use that.

*********Syntax of Record type*********

Record<K extends keyof any, T>

Where K is the type of the keys of the object and T is the type of the values of the object.

type TRecords = Record<string, number>;

let tryingRecords: TRecords = {
    "key1": 1,
    "key2": 2,
};

tryingRecords is an object type that has properties with keys of type string and values of type number.

Using typescript Records and union types together

A practical example of how you can use Record and union types together in TypeScript:

interface User {
    id: number;
    name: string;
}

interface Admin {
    id: number;
    name: string;
    permissions: string[];
}

interface Guest {
    id: number;
    name: string;
    expiration: string;
}

type UserType = "user" | "admin" | "guest";

type Users = Record<UserType, User | Admin | Guest>;

let users: Users = {
    user: { id: 1, name: "John" },
    admin: { id: 2, name: "Jane", permissions: ["read", "write"] },
    guest: { id: 3, name: "Jim", expiration: "2022-12-31" }
};

There are three interfaces that represent different types of users (User, Admin, and Guest),
There is a union type UserType to combine three types into a single type that can be one of "user", "admin" or "guest".
There is an object with Record type to define a new type Users. Type Users is an object type with properties that have keys that can only be the string literals "user", "admin", and "guest",
values of type User | Admin | Guest which is a union of all the three interfaces.

Using record types with `typeof`, and `keyof` without interfaces

But there is a better way to type objects without even the use of interfaces, and I name it time-saving types.

*****data*****

// Data
const productInventory = {
    shirts: {
        small: 10,
        medium: 15,
        large: 20
    },
    pants: {
        small: 5,
        medium: 10,
        large: 15
    },
    shoes: {
        size7: 25,
        size8: 30,
        size9: 35
    }
};

*******logic*******


type Product = keyof typeof productInventory;
type ProductSizes = typeof productInventory[Product];

function checkInventory(product: Product, size: keyof ProductSizes): boolean {
    return productInventory[product][size] > 0;
}

console.log(checkInventory("shirts", "medium")); // true
console.log(checkInventory("pants", "small")); // true
console.log(checkInventory("shoes", "size9")); // true
console.log(checkInventory("pants", "extra large")); //compile error, extra large is not key of ProductSizes

productInventory → information about different products and the sizes available for each product, Record type to define a new type ProductSizes
ProductSizes is an object type with properties that have keys of the
productInventory[Product] object and values of type number.
Product is the keyof productInventory to reference the specific product.
ProductSizes is the type of productInventory[Product] to reference the specific product sizes.

Closing words

For front-end developers, TypeScript can provide several benefits to improve the development experience. TypeScript can help catch errors early by providing better type safety. which can make your code more robust and maintainable.

Using TypeScript in frontend development can also help you take advantage of modern JavaScript features such as JSX, async/await, and destructuring, while still providing the benefits of static type checking. This can make it easier to write and maintain complex and large-scale applications.

How to store HTML form value in an array

Alwaisy al-waisy — Tue, 10 Jan 2023 03:24:13 +0000

To get input from an HTML input element and store it in an array in JavaScript, you can use the value property of the input element and the push() method of the array.

Here's an example of how you can do this:

<!-- HTML code -->
<form id="form">
  <input type="text" id="input1">
  <input type="text" id="input2">
  <input type="text" id="input3">
  <button type="button" onclick="storeInput()">Store Input</button>
</form>

// JavaScript code
function storeInput() {
  // Initialize an empty array
  const inputArray = [];

  // Get the input elements
  const input1 = document.getElementById("input1");
  const input2 = document.getElementById("input2");
  const input3 = document.getElementById("input3");

  // Get the values of the input elements
  const value1 = input1.value;
  const value2 = input2.value;
  const value3 = input3.value;

  // Add the values to the array
  inputArray.push(value1, value2, value3);

  // Print the array to the console
  console.log(inputArray);
}

The first step is to get the values of the input elements with the ids "input1", "input2", and "input3" on the button clicked
To store the values in the inputArray array. Create an array named inputArray
You can add as many input elements as you need, and modify the code to store the values in the array as needed.

Note that this code assumes that the input elements are inside a form element with the id "form". You can modify the code to use a different form element or to get the input elements in a different way.

Generations of the web: A Small introduction to web 1, web 2, and web 3

Alwaisy al-waisy — Tue, 10 Jan 2023 03:07:28 +0000

The first web service was designed and tested by Tim Berners-Lee, a British computer scientist who is credited with inventing the World Wide Web. In 1989, while working at CERN (the European Organization for Nuclear Research), Berners-Lee wrote a proposal for a system of interlinked hypertext documents that could be accessed via the Internet.

This system, which was later referred to as the World Wide Web, allowed users to view web pages containing text, images, videos, and other multimedia, and navigate between them using hyperlinks. Berners-Lee developed the first web server and web browser, and the first website was launched at CERN in 1991. The first web page went live on August 6, 1991.

Web 1.0 - the 1st generation of web

Web 1.0, also known as the "static web" or the "first generation of the web," was the first implementation of the World Wide Web. It lasted from 1989, when Tim Berners-Lee developed the first web server and web browser, to around 2005.

Pros

Technologies include core web protocols such as HTML (Hypertext Markup Language), HTTP (Hypertext Transfer Protocol), and URI (Uniform Resource Identifier).
Is characterized by read-only content, meaning that users can view the information on a website but cannot interact with it or modify it.
Websites are focused on establishing an online presence and making their information available to anyone at any time.
Websites are primarily composed of static web pages, which means that the content only changes if it is manually updated by the website owner.
Websites use basic HTML to structure and format the content on their pages.
Was the first generation of the World Wide Web, and it laid the foundation for the more interactive and dynamic web that we know today.

Cons

The Web 1.0 pages can only be understood by humans (web readers) they do not have machine-compatible content.
The webmaster is solely responsible for updating users and managing the content of the website.
Lack of Dynamic representation i.e., to acquire only static information, no web console was available to perform dynamic events

Web 2.0 - the second generation of web

Web 2.0, also known as the "interactive web" or the "second generation of the web," is a term coined by Dale Dougherty in 2004 to describe the evolution of the World Wide Web from a "read-only" platform to a "read-write" platform.

Pros

Web 2.0 technologies enable users to interact and collaborate with each other and the content on a website.
This includes features such as blogs, wikis, social networking, and online forums, which allow users to share and exchange information and ideas.
Web 2.0 also introduced technologies such as JavaScript and Flash, which allowed for the creation of more interactive and dynamic websites.
These technologies allowed for the development of new types of online applications, such as online games, video-sharing platforms, and virtual worlds.
It has enabled users to create and share content, as well as participate in online communities and social networks.

Web 2.0 has also paved the way for the development of the third generation of the web, or the "semantic web," which is focused on the integration of data and the development of more intelligent systems.

Cons

Constant iteration cycle of Change and Updates to services
Ethical issues concerning the build and usage of Web 2.0.
Interconnectivity and knowledge sharing between platforms across community boundaries are still limited
It relies on the availability of the internet, which means that users may not be able to access certain features or services if they are offline.
Often involve the sharing of personal information, which can raise concerns about security and privacy.
Often rely on user-generated content, which means that the quality of the content may vary.
It can be difficult to ensure that the information being shared is accurate, up-to-date, and reliable.

Web 3.0 - the third generation of web

The term Web3 was coined by Gavin Wood—one of the co-founders of the Ethereum cryptocurrency—as Web 3.0 in 2014. It is also known as the "semantic web," the third generation of the World Wide Web, which is focused on the integration of data and the development of more intelligent systems. It is characterized by the use of technologies such as artificial intelligence (AI) and machine learning, which allow websites to better understand and interpret user behavior.

Web 3.0 makes use of standards such as the Resource Description Framework (RDF) and the Web Ontology Language (OWL), which allow for the creation of structured data that can be easily understood by machines.

Web 3.0 is still in the early stages of development, and it is difficult to predict exactly what it will look like or what its impact will be.

Conclusion

Since its inception, the World Wide Web has become a crucial part of modern life, with billions of people around the world accessing it on a daily basis. It has revolutionized the way we communicate, share information, and do business, and continues to evolve and expand as new technologies and developments emerge.

A Beginner's Guide to Understanding the Blockchain

Alwaisy al-waisy — Wed, 04 Jan 2023 04:17:39 +0000

Blockchain is a digital database that is shared among a network of computers. It is used to store information electronically and is well-known for its role in cryptocurrency systems such as Bitcoin, where it helps maintain a secure and decentralized record of transactions.

Introduction

Blockchain is a decentralized technology developed by Satoshi Nakamoto that enables the distribution of digital information. It is made up of a network of computing nodes and is known for its impressive characteristics, including durability, robustness, transparency, and incorruptibility. It is primarily used to manage Bitcoin transactions through a global network of computers. Still, it has the potential to be applied in a variety of business contexts, such as crowdfunding, smart contracts, and supply chain auditing.

Benefits and features of blockchain technology

Blockchain technology has several key benefits and features that make it attractive for various applications:

Decentralization: One of the main benefits of blockchain is that it is decentralized, meaning that a single entity or authority does not control it. Instead, it is maintained by a network of computers, or nodes, that work together to validate and record transactions. This decentralized structure makes it resistant to tampering or fraud.
Immutability: Once data has been recorded on a blockchain, it is very difficult to change or alter. This feature, known as immutability, ensures that the integrity of the data is maintained and that it can be trusted.
Transparency: Blockchain technology is transparent, meaning that all transactions and data stored on the blockchain are visible to all users. This makes it easier to track and verify the authenticity of transactions, increasing trust and accountability.
Security: Blockchain uses cryptographic techniques to secure the data stored on the blockchain and to ensure that transactions are valid. This makes it resistant to cyber-attacks and helps to protect against fraud and unauthorized access.
Efficiency: By automating certain processes and eliminating the need for intermediaries, blockchain technology can increase the speed and efficiency of transactions and reduce the costs associated with them.
Interoperability: Blockchain technology can facilitate the exchange of data and assets between different systems and platforms, enabling greater interoperability and reducing the complexity of certain processes.
Smart contracts: Blockchain technology can enable the creation and execution of smart contracts, which are self-executing contracts with the terms of the agreement between buyer and seller being directly written into lines of code. Smart contracts can help to reduce the risk of fraud and increase the efficiency of specific processes.

Proof of the concept of a distributed ledger

A distributed ledger is a type of database that is decentralized and distributed among a network of computers or nodes. It is designed to be transparent, secure, and immutable, and it allows multiple parties to record and track transactions without the need for a central authority.

One way to demonstrate the concept of a distributed ledger is to create a simple blockchain using a programming language such as JavaScript. Here's an example of how you might do this:

const crypto = require('crypto');

// Define the Block class
class Block {
  constructor(data, previousHash) {
    this.timestamp = Date.now();
    this.data = data;
    this.previousHash = previousHash;
    this.hash = this.calculateHash();
  }

  calculateHash() {
    return crypto.createHash('sha256')
      .update(this.timestamp + JSON.stringify(this.data) + this.previousHash)
      .digest('hex');
  }
}

// Define the Blockchain class
class Blockchain {
  constructor() {
    this.chain = [this.createGenesisBlock()];
  }

  createGenesisBlock() {
    return new Block('Genesis Block', '0');
  }

  getLatestBlock() {
    return this.chain[this.chain.length - 1];
  }

  addBlock(newBlock) {
    newBlock.previousHash = this.getLatestBlock().hash;
    newBlock.hash = newBlock.calculateHash();
    this.chain.push(newBlock);
  }

  isChainValid() {
    for (let i = 1; i < this.chain.length; i++) {
      const currentBlock = this.chain[i];
      const previousBlock = this.chain[i - 1];

      if (currentBlock.hash !== currentBlock.calculateHash()) {
        return false;
      }

      if (currentBlock.previousHash !== previousBlock.hash) {
        return false;
      }
    }

    return true;
  }
}

// Create a new blockchain
const blockchain = new Blockchain();

// Add some blocks to the chain
blockchain.addBlock(new Block('First block', blockchain.getLatestBlock().hash));
blockchain.addBlock(new Block('Second block', blockchain.getLatestBlock().hash));
blockchain.addBlock(new Block('Third block', blockchain.get

Process of adding new blocks to the chain

The process of adding new blocks to a blockchain typically involves the following steps:

A new transaction is initiated by a user. This could be a financial transaction, such as the transfer of cryptocurrency, or the exchange of other types of data or assets.
The transaction is broadcast to the network of nodes that make up the blockchain.
The nodes verify the transaction to ensure that it is valid and complies with the rules of the blockchain. This may involve checking the digital signature of the user who initiated the transaction to verify their identity, as well as checking the availability of the assets being transferred.
If the transaction is valid, it is added to a pool of unconfirmed transactions, also known as the mempool.
Miners (in the case of a public blockchain) or the nodes (in the case of a private blockchain) select transactions from the mempool to include in the next block. The selection process may be based on various factors, such as the transaction fee offered by the user or the priority of the transaction.
The selected transactions are added to a new block, along with a timestamp and a unique code, known as a hash, that links the block to the previous one in the chain.
The miner or node attempts to solve a complex mathematical problem in order to validate the block and add it to the chain. In a public blockchain, the first miner to solve the problem is rewarded with a small amount of cryptocurrency.
Once the block has been validated and added to the chain, the transactions it contains are considered confirmed.

function addBlock(blockchain, newBlock) {
  // Validate the new block
  if (isValidNewBlock(blockchain, newBlock)) {
    // Add the new block to the blockchain
    blockchain.push(newBlock);
  } else {
    console.log('Invalid block. Not added to the blockchain.');
  }
}

function isValidNewBlock(blockchain, newBlock) {
  // Check that the new block has a valid hash
  if (calculateBlockHash(newBlock) !== newBlock.hash) {
    return false;
  }

  // Check that the new block has a valid previous block hash
  const previousBlock = blockchain[blockchain.length - 1];
  if (newBlock.previousHash !== calculateBlockHash(previousBlock)) {
    return false;
  }

  // If the new block passes all checks, it is valid
  return true;
}

function calculateBlockHash(block) {
  // Calculate the hash of the block data using a cryptographic hash function
  return crypto.createHash('sha256').update(block).digest('hex');
}

This process may vary slightly depending on the specific blockchain platform being used.

Role of miners and consensus algorithms

Miners and consensus algorithms are key components of many blockchain platforms and play important roles in the process of adding new transactions to the blockchain.

What do miners do in blockchain?

Miners are responsible for validating transactions and adding them to the blockchain in a public blockchain. They do this by competing to solve a complex mathematical problem, and the first one to solve it is rewarded with a small amount of cryptocurrency and the right to add the next block to the chain. This process is known as mining.

What does consensus do in blockchain?

Consensus algorithms are rules that govern how nodes reach an agreement on the state of the ledger in a blockchain. They are used to ensure that all nodes on the network agree on the validity of transactions and the current state of the blockchain. There are various types of consensus algorithms, including proof of work, proof of stake, and delegated proof of stake.

function proofOfWork(block, difficulty) {
  // Find a number that, when hashed with the block data, produces a hash
  // with `difficulty` leading zeros
  while (true) {
    block.nonce++;
    let hash = hashBlock(block);
    if (hash.substring(0, difficulty) === '0'.repeat(difficulty)) {
      return block.nonce;
    }
  }
}

function hashBlock(block) {
  // Hash the block data using a cryptographic hash function
  return crypto.createHash('sha256').update(block).digest('hex');
}

Different types of the blockchain

There are three main types of blockchains: public, private, and consortium. Each type of blockchain has its own advantages and disadvantages, and the most appropriate type will depend on the specific needs and goals of the application.

Public blockchains	Private blockchains	Consortium blockchains
Public blockchains are open to anyone and are secured through the mining process.	Private blockchains are restricted to a specific group of users and are not secured through mining.	Consortium blockchains are a hybrid of public and private blockchains.
Examples of public blockchains include Bitcoin and Ethereum.	Used in industries such as finance and healthcare, where the need for security and privacy is high.	Hyperledger is an example of a consortium blockchain.

Applications of blockchain

Blockchain technology has the potential to revolutionize a wide variety of industries and applications. Here are a few examples of how blockchain is being used or has the potential to be used:

Cryptocurrencies: One of the most well-known applications of blockchain is in the creation of digital currencies, such as Bitcoin. Blockchain allows for the secure, decentralized tracking of digital currency transactions.
Supply chain management: Blockchain can be used to track the movement of goods through a supply chain, providing transparency and enabling more efficient and accurate tracking of products.
Identity verification: Blockchain technology can be used to create secure, digital identities that can be used to verify the identity of individuals or organizations.
Smart contracts: Blockchain technology can be used to create self-executing contracts that are automatically triggered when certain conditions are met.
Voting systems: Blockchain can be used to create secure, transparent voting systems that can be used in elections or decision-making processes.
Health records: Blockchain can be used to securely store and manage electronic health records, enabling more efficient and accurate tracking of patient data.
Real estate: Blockchain can be used to track property ownership and transfer, streamlining the process of buying and selling real estate*.*
Education: Blockchain can be used to track and verify educational qualifications, making it easier for employers to verify the credentials of job candidates.

The future of blockchain:

Blockchain technology is still in its early stages, and it is difficult to predict exactly how it will evolve in the future. However, it is likely that blockchain will continue to grow in popularity and usage as more industries and applications adopt it. Some potential future developments for blockchain include:

Increased adoption: As more industries and organizations become aware of the benefits of blockchain, it is likely that adoption will continue to grow.
Development of new consensus algorithms: Consensus algorithms play a crucial role in the security and reliability of blockchain technology. As the technology continues to evolve, it is likely that new consensus algorithms will be developed to improve the performance and scalability of blockchain systems.
Improved scalability: One of the main challenges facing blockchain technology is scalability – the ability to process a large number of transactions quickly. As the technology develops, it is likely that new solutions will be found to improve the scalability of blockchain systems.
Integration with other technologies: Blockchain technology is likely to be integrated with a variety of other technologies, such as artificial intelligence and the Internet of Things, to create new and innovative solutions.
Increased regulation: As blockchain technology becomes more widely used, it is likely that it will be subject to increased regulation to ensure its proper use and protect users.
Wider use of decentralized applications: Decentralized applications (dApps) are applications that are built on top of blockchain technology and are decentralized, meaning they are not controlled by a single entity. It is likely that the use of dApps will continue to grow as more people become aware of their benefits.

Wrapping up

Blockchain technology has the potential to transform a wide variety of industries with its decentralized, secure, and transparent nature. Its potential applications include cryptocurrency, supply chain management, identity verification, smart contracts, voting systems, health records, real estate, and education. As technology continues to mature and be adopted by more companies and organizations, we can expect to see an increasing number of practical applications. It is important for individuals and companies to stay informed and embrace blockchain technology to take advantage of its benefits.

6 Array methods every JavaScript developer must know

Alwaisy al-waisy — Wed, 04 Jan 2023 03:30:00 +0000

An array in JavaScript is an ordered collection of data that can hold multiple values of the same or different types. It is a data structure that is used to store a collection of items in a single place.

Arrays are created using the Array constructor or the square brackets ([]) notation. For example:

// Using the Array constructor
const arr1 = new Array("🍇","🍈","🍉","🍋","🍌");

// Using square brackets
const arr2 = ["🍇","🍈","🍉","🍋","🍌"];

You can access the items in an array using their indices, which are the positions of the items in the array. For example, to access the second item in the arr2 array, you can use the following syntax:

console.log(arr2[1]);  // Output: 🍈

You can also modify the values in an array by assigning new values to the indices. For example:

arr2[1] = "🍍";  // The second item in the array is now 🍍

Arrays in JavaScript are zero-indexed, meaning that the first item in the array is at index 0, the second item is at index 1, and so on.

In addition to storing simple values, arrays can also store complex data types, such as objects or other arrays.

const arr3 = [1, 'hello', [1, 2, 3], {key: 'value'}];

There are many methods available for working with arrays in JavaScript, such as push to add items to the end of an array, unshift to add items to the beginning of an array and splice to insert or remove items from an array. I will explain some of the important methods of the JavaScript array.

Insert Elements to a JavaScript array - array.push()

There is a push method to add elements to the JavaScript array. push() method is actually a method function that receives an argument as an array element. It always adds elements to the end of the array. Another method to perform the same operation using unshift add elements to the start of the array.

const winterFruits = [],
// winter has come, now where is the fruit basket, let's fill it

winterFruits.push("🍊")
winterFruits.push("🥕")
winterFruits.push("🍍")

// print
console.log(winterFruits)   // ['🍊', '🥕', '🍍']

Remove Elements from an Array in JS

There is a pop method to remove elements from the JavaScript array. the pop() method actually a method function, available on the array. It always removes elements one by one from the end of an existing array. Another method to perform the same operation using shift add elements to the start of the array. pop returns removed element.

Let’s do eat a burger,

const burgers = ['zinger stack 🍔', 'stack 🍔', 'mighty burger 🍔']

// try mighty bites, so remove it.
burgers.pop() // so here is your: 'mighty burger 🍔'

// how about other burgers eat one, for 
console.log(burgers)

// I will like you to try zinger stack. I insist 
burgers.shift() // how was it? 'zinger stack 🍔'

Modify the JS array by adding, removing, and replacing, elements

There is a splice method to add, remove, replacing, elements at a specific index. It modifies the array in place and does not create a new array. splice() is a JavaScript method function, that allows passing 3 main arguments with one optional.

Read more about splice arguments

Array.prototype.splice() - JavaScript | MDN

Remove elements from the array using splice

The major use of the splice() method is to delete elements from an array. It returns an array of the elements deleted and modifies the original array.

const array = ['porsche 911 ', 'TNT 150I', 'a large house', 'disney plus', 'deezer hifi'];
//array.splice(startIndex, how many elements should be removed)

// choose a number from 0 to 4
const candidateResponse = array.splice(2, 1); // removes elements at index 2 ('a large house') from the array and returns them

console.log(array); // Output: ['porsche 911 ', 'TNT 150I', 'disney plus', 'deezer hifi']
console.log(candidateResponse); // Output: ['a large house'] 

// candidate won a large beautiful house. good one, try yours.

Add elements to an array using splice

The splice method can also be used to add elements to an array at a specific index. Let’s see how

let tasks = ['Take out the trash', 'Do the dishes', 'Mow the lawn'];

tasks.splice(0, 0, 'Buy groceries'); // adds the new task at index 0, without removing any elements

console.log(tasks); // Output: ['Buy groceries', 'Take out the trash', 'Do the dishes', 'Mow the lawn']

Practical example

let items = ["apple", "banana", "cherry"];

// Get the new item from the input field
let newItem = document.getElementById("new-item-input").value;

// Add the new item to the list
items.splice(items.length, 0, newItem);

// Update the display to show the new list
updateListDisplay(items);

Note: It always elements after a specific index.

Replace elements in an array using splice

The splice method can replace elements in an array. It removes elements and adds elements at a specific index.

// syntax
array.splice(startIndex, deleteCount, element1, element2, ...);

let array = [1, 2, 3, 4, 5];

let removed = array.splice(2, 2, 6, 7); // removes elements at index 2 and 3 (3 and 4) and replaces them with 6 and 7

console.log(array); // Output: [1, 2, 6, 7, 5]
console.log(removed); // Output: [3, 4]

Sort elements of the JavaScript array

The sort method is a built-in JavaScript function that allows you to sort the elements of an array in place. It modifies the original array and does not create a new array.

Here is an example of how to use the sort method to sort the elements of an array in ascending order:

let array = [3, 5, 1, 2, 4];

array.sort(); // sorts the array in ascending order

console.log(array); // Output: [1, 2, 3, 4, 5]

Sorting products using JavaScript

Why not take a sneak peek at a real-world scenario?

let products = [
  { name: "Product A", price: 50 },
  { name: "Product B", price: 20 },
  { name: "Product C", price: 30 },
  { name: "Product D", price: 10 },
];

products.sort((a, b) => {
  return a.price - b.price;
});

console.log(products);
// Output:
// [
//   { name: "Product D", price: 10 },
//   { name: "Product B", price: 20 },
//   { name: "Product C", price: 30 },
//   { name: "Product A", price: 50 }
// ]
I;

Another way to do sorting is using a sort algorithm. Explained here.

How to reverse an array in JavaScript

To reverse an array in JavaScript, you can use the reverse method provided by the Array object. The reverse method modifies the original array in place and does not create a new array.

let array = [1, 2, 3, 4, 5];

array.reverse();

console.log(array); // Output: [5, 4, 3, 2, 1]

Closing remarks

You have just learned about the 3 to 4 methods of the JavaScript array. The array is a widely used data structure in building frontend and backend apps. When an array is used to store large, complex data, methods are required to deal with data to sort, remove, and add new data. So array is overall very useful and easy to understand with a bunch of problem-solving solutions.

DEV Community: Alwaisy al-waisy

NuxtJs 3.2.0: The Latest Release Brings Exciting New Features

Some new features from Nuxt 3.2.0

Nitropack v2.2 Released

Conclusion

7 ways to convert Objects into Array in JavaScript

How to use Object.entries()?

How to use Object.values()?

Using for...in loop with Objects

Using Object.keys() and map()

Array.from() is best method

How spread operator help to convert an Object into an Array

What JSON.parse() and JSON.stringify() can do

TypeScript's Utility Types: A developer's guide to strong typing

Commonly used utility types

Using TypeScript Pick type

Using TypeScript Exclude type

Using TypeScript Omit type

Advanced Usage of Utility Types

Combining utility types to create custom types

Best Practices for Using Utility Types

Strategies for debugging code with utility types

Using the console.log() function

Using the typeof operator

Using the in operator

Using the keyof operator

Using the type alias

Using a type-checking tool

Closing words

3.1.0 is the first minor release after Nuxt 3.0 is out

What’s changed

My remarks

Typescript for frontend developers

Remember major Types in typescript

What is type noImplicitAny

What is type unknown

Union and intersection types

Union types

Intersection types

How to use Keyof in typescript

Use-case of using keyof

How Typeof in Typescript is different

ReturnType in typescript

Use-case of ReturnType

What are Generics in Typescript

Syntax of Generics

Using Conditional types in Typescript

Using typeof, and keyof types together

*How the TypeScript Record Type Works*

Using typescript Records and union types together

Using record types with typeof, and keyof without interfaces

Closing words

How to store HTML form value in an array

Generations of the web: A Small introduction to web 1, web 2, and web 3

Web 1.0 - the 1st generation of web

Pros

Cons

Web 2.0 - the second generation of web

Pros

Cons

Web 3.0 - the third generation of web

Conclusion

A Beginner's Guide to Understanding the Blockchain

Introduction

Benefits and features of blockchain technology

Proof of the concept of a distributed ledger

Process of adding new blocks to the chain

Role of miners and consensus algorithms

What do miners do in blockchain?

What does consensus do in blockchain?

Different types of the blockchain

Applications of blockchain

The future of blockchain:

Wrapping up

6 Array methods every JavaScript developer must know

Insert *Elements to a JavaScript array - array.push()*

*Remove Elements from an Array in JS*

Modify the JS array by adding, removing, and replacing, elements

Remove elements from the array using splice

Add elements to an array using splice

Using TypeScript `Pick` type

Using TypeScript `Exclude` type

Using TypeScript `Omit` type

Using the `console.log()` function

Using the `typeof` operator

Using the `in` operator

Using the `keyof` operator

Using the `type` alias

How to use `Keyof` in typescript

How the TypeScript Record Type Works

Using record types with `typeof`, and `keyof` without interfaces

Insert Elements to a JavaScript array - array.push()

Remove Elements from an Array in JS