DEV Community: 💡Piyush Kesarwani

9 HTTP request methods explained!

💡Piyush Kesarwani — Sun, 19 May 2024 05:47:48 +0000

HTTP methods are the backbone of Integration and getting request/response from the server. These methods create the fundamentals of programming and handling requests to/from the client and server side.

In this blog post, I will discuss about some of the most Important HTTP Methods that every developer must know about.

Let's get started.

HTTP (Hypertext Transfer Protocol) specifies a collection of request methods to specify what action is to be performed on a particular resource. The most commonly used HTTP request methods are GET, POST, PUT, PATCH, and DELETE. These are equivalent to the CRUD operations (create, read, update, and delete). But there are total of 9 HTTP Methods that you must be aware of.

HTTP methods can be judged on the basis of three properties:

Safe – if it doesn't affect the server state
Idempotent – no matter how many times you make an API call, the result remains the same
Cacheable – can a response be cached?

Here are some characteristics of all HTTP Methods:

1. GET

Widely used.

GET method is used to request the desired resource from the server. The GET method is used to request any of the following resources:

A webpage or HTML file.
An image or video.
A JSON document.
A CSS file or JavaScript file.
An XML file.

It doesn't affect the server state.

✅ Safe
✅ Idempotent
✅ Cacheable

2. POST

POST method is completely opposite to GET.

It is used to submit the data to the server and hence it changes the server state.

The data sent to the server is typically in the following form:

Input fields from online forms.
XML or JSON data.
Text data from query parameters.

❌ Safe
❌ Idempotent

3. PUT

PUT method is used to update the resource on the server which is already present.

It replaces the entire content at a particular location with data that is passed in the body payload.

The HTTP PUT request method includes two rules:

A PUT operation always includes a payload that describes a completely new resource definition to be saved by the server.
The PUT operation uses the exact URL of the target resource.

If a resource exists at the URL provided by a PUT operation, the resource’s representation is completely replaced. If a resource does not exist at that URL, a new resource is created.

❌ Safe
✅ Idempotent
❌ Cacheable

4. PATCH

PATCH is similar to PUT request, but the only difference is, it modifies a part of the data. It will only replace the content that you want to update.

❌ Safe
❌ Idempotent
❌ Cacheable

5. DELETE

As the name suggests, it is used to delete the data on the server.

❌ Safe
✅ Idempotent
❌ Cacheable

6. HEAD

The HEAD method in HTTP is similar to GET, but it requests only the headers of a resource without fetching the actual body content.

The HTTP HEAD method is commonly used to check the following conditions:

The size of a resource on the server.
If a resource exists on the server or not.
The last-modified date of a resource.
Validity of a cached resource on the server.

The following example shows sample data returned from a HEAD request:

HTTP/1.1 200 OK 
Date: Fri, 19 Aug 2023 12:00:00 GMT 
Content-Type: text/html 
Content-Length: 1234 
Last-Modified: Thu, 18 Aug 2023 15:30:00 GMT

✅ Safe
✅ Idempotent
✅ Cacheable

7. OPTIONS

OPTIONS in HTTP retrieves available communication options for a resource. It tells supported methods and server restrictions.

The following is a sample response to an HTTP OPTIONS method call to a server:

OPTIONS /example/resource HTTP/1.1 
Host: www.example.com HTTP/1.1 200 OK 
Allow: GET, POST, DELETE, HEAD, OPTIONS 
Access-Control-Allow-Origin: * 
Access-Control-Allow-Methods: GET, POST, DELETE, OPTIONS 
Access-Control-Allow-Headers: Authorization, Content-Type

Used for preflight requests.

✅ Safe
✅ Idempotent
❌ Cacheable

8. CONNECT

It establishes a TCP connection through a proxy server to the actual server. It's commonly used in HTTPS connections to set up secure communication between a client and a server through an intermediary proxy server.

❌ Safe
❌ Idempotent
❌ Cacheable

9. TRACE

TRACE HTTP method is useful in debugging.

When a TRACE request is sent, the server reflects the received request to the client, letting it see any changes made as it passes through proxies or gateways.

✅ Safe
✅ Idempotent
❌ Cacheable

That's a wrap. I hope that you've enjoyed reading this article.

Please share this information with others and show some love. See ya...

Follow me on socials:

Twitter: https://x.com/Hy_piyush
LinkedIn : https://www.linkedin.com/in/piyush-kesarwani-809a30219/

15 Must-Know Javascript array methods

💡Piyush Kesarwani — Sat, 27 Apr 2024 07:09:27 +0000

Arrays are an essential part of any programming language, and JavaScript is no exception. With arrays, developers can store and manipulate collections of data, including strings, numbers, and even objects. In this article, we will cover 15 must-know JavaScript array methods that everyone should know.

push() – Adds one or more elements to the end of an array.

The push() method adds one or more elements to the end of an array and returns the new length of the array. This method is useful when you need to add elements to an array without specifying the index.

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

pop() – Removes and returns the last element from an array.

The pop() method removes and returns the last element from an array. This method is useful when you need to remove an element from the end of an array.

const array = [1, 2, 3];
    const lastElement = array.pop();
    console.log(array); // Output: [1, 2]
    console.log(lastElement); // Output: 3

shift() – Removes and returns the first element from an array

The shift() method removes and returns the first element from an array. This method is useful when you need to remove an element from the beginning of an array.

const array = [1, 2, 3];
    const firstElement = array.shift();
    console.log(array); // Output: [2, 3]
    console.log(firstElement); // Output: 1

unshift() – Adds one or more elements to the beginning of an array

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array. This method is useful when you need to add elements to an array at the beginning.

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

splice() – Adds or removes elements from an array at a specified index

The splice() method adds and removes elements from an array at a specified index. This method can be used to add or remove elements from anywhere in the array.

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

slice() – Returns a copy of a portion of an array specified by its starting and ending indexes

The slice() method returns a copy of a portion of an array specified by its starting and ending indexes. This method can be used to create a new array that contains a subset of the original array.

const array = [1, 2, 3, 4];
    const newArray = array.slice(1, 3);
    console.log(newArray); // Output: [2, 3]

concat() – Combines two or more arrays and returns a new array

The concat() method combines two or more arrays and returns a new array. This method can be used to join arrays together without modifying the original arrays.

const array1 = [1, 2];
    const array2 = [3, 4];
    const newArray = array1.concat(array2);
    console.log(newArray); // Output: [1, 2, 3, 4]

join() – Joins all elements of an array into a string

The join() method joins all elements of an array into a string, using a specified separator. This method can be used to create a string from an array.

const array = [1, 2, 3];  const string = array.join("-");  console.log(string); // Output: "1-2-3"

indexOf() – Returns the index of the first occurrence of a specified element in an array

The indexOf() method returns the index of the first occurrence of a specified element in an array. If the element is not found, this method returns -1.

const array = [1, 2, 3];  const index = array.indexOf(2);  console.log(index); // Output: 1

lastIndexOf() – Returns the index of the last occurrence of a specified element in an array

The lastIndexOf() method returns the index of the last occurrence of a specified element in the array. If the element is not found, this method returns -1.

const array = [1, 2, 3, 2];  const index = array.lastIndexOf(2);  console.log(index); // Output: 3

forEach() – Executes a provided function once for each element in an array

The forEach() method executes a provided function once for each element in an array. This method can be used to perform an operation on each element of an array.

const array = [1, 2, 3];  array.forEach((element) => {  console.log(element);  });  // Output:  // 1  // 2  // 3

map() – Creates a new array with the results of calling a provided function on every element in the array

The map() method creates a new array with the results of calling a provided function on every element in the array. This method can be used to create a new array based on the original array.

const array = [1, 2, 3];  const newArray = array.map((element) => {  return element * 2;  });  console.log(newArray); // Output: [2, 4, 6]

filter() – Creates a new array with all elements that pass a test specified by a provided function

The filter() method creates a new array with all elements that pass a test specified by a provided function. This method can be used to create a new array based on a condition.

const array = [1, 2, 3];  const newArray = array.filter((element) => {  return element > 1;  });  console.log(newArray); // Output: [2, 3]

reduce() – Executes a provided function on each element of the array and returns a single value

The reduce() method executes a provided function on each element of the array and returns a single value. This method can be used to perform an operation on all elements of an array and return a single value.

const array = [1, 2, 3];  const sum = array.reduce((accumulator, currentValue) => {  return accumulator + currentValue;  }, 0);  console.log(sum); // Output: 6

sort() – Sorts the elements of an array in place

The sort() method sorts the elements of an array in place. This method can be used to sort an array in ascending or descending order.

const array = [3, 2, 1];
array.sort();
console.log(array); // Output: [1, 2, 3]

Conclusion
In this article, we have covered 15 must-know JavaScript array methods that everyone should know. These methods are essential for working with arrays in JavaScript and can greatly simplify your code. By using these methods, you can perform a wide range of operations on arrays, such as adding, removing, sorting, and filtering elements. Whether you’re a beginner or an experienced developer, mastering these array methods will make your life easier and your code more efficient.

Those were the 15 must-know javascript array methods for you. I really hoped that you enjoyed reading this article.

Follow me on socials:

Twitter: https://twitter.com/Hy_piyush
Instagram: https://www.instagram.com/piyush_kesarwani22/
Linkedin: https://www.linkedin.com/in/piyush-kesarwani-809a30219/
GitHub: https://github.com/piyushkesarwani

How to make Responsive Web designs in CSS: Tips and Tricks

💡Piyush Kesarwani — Tue, 11 Apr 2023 05:01:12 +0000

In today's world, where mobile devices have become an integral part of our lives, it's essential to make sure that your website is responsive. A responsive website means that it is designed to adjust to the screen size of the device it is being viewed on. This is crucial because if your website is not responsive, users will have a hard time navigating it on their mobile devices, which can result in a negative user experience.

Responsive web design has become increasingly important in recent years, and there are many ways to achieve it. However, one of the most popular and effective methods is the use of CSS. In this article, we will discuss some tips and tricks for using CSS to create a responsive web design.

Use Fluid Layouts

A fluid layout is a layout that adjusts its width based on the screen size of the device it is being viewed on. This means that the elements on your website will be resized based on the size of the screen. To achieve a fluid layout, you can use percentage-based widths instead of fixed pixel widths. For example, instead of setting a width of 1000px for your website, you can set it to 100%. This will ensure that your website adjusts to the size of the screen it is being viewed on.

.container {
  width: 100%; /* Use percentage-based width */
}

img {
  max-width: 100%; /* Ensure images do not exceed container width */
}

Use Media Queries

Media queries are a powerful tool in CSS that allows you to define different styles for different screen sizes. With media queries, you can set specific styles for screens of different sizes, such as desktops, tablets, and mobile devices. To use media queries, you need to define the breakpoints at which your styles will change. For example, you can set a breakpoint at 768px, which is the screen size of most tablets, and define different styles for screens smaller than that size.

/* Styles for screens smaller than 768px */
@media screen and (max-width: 767px) {
  .menu {
    display: none; /* Hide menu on small screens */
  }

  .logo {
    font-size: 1.5em; /* Increase font size of logo on small screens */
  }
}

Use Flexbox

Flexbox is a layout mode in CSS that allows you to create flexible and responsive layouts. With Flexbox, you can align and distribute elements on your website easily. Flexbox is particularly useful for creating responsive navigation menus and grid layouts. To use Flexbox, you need to define a container element and set its display property to "flex". You can then define the layout and alignment of the elements within the container.

.container {
  display: flex; /* Set display property to flex */
  flex-wrap: wrap; /* Allow items to wrap to next line if there is not enough space */
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
}

.item {
  flex-basis: 200px; /* Set minimum width of item */
  margin: 10px; /* Add margin around items */
}

Use Relative Units

Relative units are units of measurement in CSS that are based on the size of other elements on the page. These units include em, rem, and vw/vh. Using relative units instead of fixed pixel sizes allows your website to adjust its layout and font sizes based on the screen size of the device it is being viewed on. For example, you can set the font size of your website to 1em, which will be the same size as the font size of the parent element.

.container {
  font-size: 16px; /* Set font size to 16px */
}

h1 {
  font-size: 2em; /* Font size is twice the font size of the parent element */
}

p {
  font-size: 1.2em; /* Font size is 1.2 times the font size of the parent element */
}

Test Your Website on Different Devices

Finally, it's essential to test your website on different devices to ensure that it is responsive and user-friendly. There are several tools available that allow you to test your website on different devices, such as Google's Mobile-Friendly Test and Responsinator. By testing your website on different devices, you can identify any issues and make the necessary changes to ensure that your website is responsive and accessible to all users.

Conclusion

In conclusion, responsive web design is crucial for ensuring that your website is accessible and user-friendly on all devices. Using CSS, you can create a responsive web design that adjusts to the screen size of the device it is being viewed on. By using fluid layouts, media queries, Flexbox, relative units, and testing your website on different devices, you can create a responsive website that provides an optimal user experience.

That's a wrap. Thanks for reading.

If you enjoyed reading this issue, then you can follow me for more such interesting posts and articles on similar topics like this one.

Socials:

Twitter : https://twitter.com/Hy_piyush

LinkedIn : https://www.linkedin.com/in/piyush-kesarwani-809a30219/

Github Profile Link - https://github.com/piyushkesarwani

Top 20 VS Code Extensions for programmers

💡Piyush Kesarwani — Sat, 25 Mar 2023 07:34:40 +0000

As a programmer, you know that choosing the right tools and resources can make a big difference in your productivity and the quality of your work. Visual Studio Code (VS Code) is a popular code editor that is highly extensible through the use of extensions. In this article, I've introduced you to the top 20 VS Code extensions for programmers. Let's get started.

Bracket Pair Colorizer

When working with code that contains many nested brackets, it can be challenging to match them correctly. Bracket Pair Colorizer helps by coloring matching brackets with the same color, making it easy to see where each pair starts and ends.

Code Spell Checker

It's easy to make typos and grammatical errors when writing code and comments. Code Spell Checker is an extension that checks your spelling and grammar, helping you catch those pesky errors before you submit your code.

Color Highlight

CSS and other styling languages use colors extensively. Color Highlight is an extension that highlights color codes within your code, making it easy to see which color is being used where.

Debugger for Chrome

Debugging web applications can be a challenge, but Debugger for Chrome makes it easier. This extension provides debugging support for Chrome, allowing you to debug JavaScript and TypeScript code in the Chrome browser directly from VS Code.

GitLens

Git is an essential tool for software development, and GitLens is an extension that provides enhanced Git support within VS Code. With GitLens, you can see who made changes to your code, when they made them, and why. You can also navigate through the Git history of your project with ease.

HTML CSS Support

HTML and CSS are two of the most common languages used in web development. HTML CSS Support is an extension that provides comprehensive support for both HTML and CSS within VS Code.

IntelliSense for CSS class names in HTML

If you're working with a lot of CSS class names in your HTML, IntelliSense for CSS class names in HTML can save you time. This extension provides IntelliSense for CSS class names in your HTML, making it easy to select the right class name from a list.

IntelliSense for CSS, Sass, and Less

If you're working with CSS, Sass, or Less, IntelliSense for CSS, Sass, and Less can make your life easier. This extension provides IntelliSense for CSS, Sass, and Less, making it easy to autocomplete code and find the right property or value.

Live Server

Live Server is an extension that launches a local development server with a live reload feature. This makes it easy to see your changes in real-time, without having to manually refresh the page.

Material Icon Theme

Material Icon Theme is an extension that provides Material Design icons for files and folders within VS Code. This makes it easy to identify different types of files at a glance.

Prettier - Code formatter

Formatting code can be time-consuming, but the Prettier - Code formatter can help. This extension automatically formats your code according to a set of rules, making it easy to maintain a consistent code style.

Python

If you're working with Python, the Python extension for VS Code is a must-have. It provides syntax highlighting, code completion, and debugging support for Python.

REST Client

REST Client is an extension that allows you to send HTTP requests and shows responses directly in the editor. This makes it easy to test and debug REST APIs without leaving VS Code.

Settings Sync

If you work on multiple computers or want to keep your settings and extensions synced across devices, Settings Sync is an extension that can help. It syncs your VS Code settings, keybindings, and extensions across devices.

SonarLint

SonarLint is an extension that detects and highlights coding issues in real-time, making it easy to identify potential bugs and security vulnerabilities before you submit your code.

Todo Tree

As you work on a project, you may leave comments with TODO, FIXME, or other tags to remind yourself of things that need to be done. Todo Tree is an extension that shows these comments in a tree view, making it easy to keep track of what needs to be done.

TypeScript Importer

TypeScript Importer is an extension that automatically imports TypeScript modules as you use them. This saves you time and reduces errors caused by manual imports.

Visual Studio IntelliCode

Visual Studio IntelliCode is an extension that provides AI-assisted IntelliSense. It uses machine learning to suggest the most likely completion for your code, making coding faster and more efficient.

vscode-icons

vscode-icons is an extension that provides icons for files and folders within VS Code. This makes it easy to quickly identify different types of files and folders, improving your productivity.

YAML

YAML is a popular data serialization format used in many applications, including Kubernetes and Docker. The YAML extension provides comprehensive YAML language support within VS Code.

Conclusion
In conclusion, I would like to say that the right set of extensions can make a big difference in your productivity and the quality of your code. The top 20 VS Code extensions for programmers I've introduced here can help you write better code faster, catch errors before they cause problems, and stay organized as you work on your projects. So, do try them and you can see the results by yourself.

That's a wrap. Thanks for reading.

If you like this blog, then do share it with other people. It supports me to create more content like this.

Till then, take care and keep coding :)

Socials:

Twitter: https://twitter.com/Hy_piyush
Instagram: https://www.instagram.com/piyush_kesarwani22/
LinkedIn: https://www.linkedin.com/in/piyush-kesarwani-809a30219/
GitHub: https://github.com/piyushkesarwani

Awesome Chrome extensions to maximize your productivity 10X

💡Piyush Kesarwani — Fri, 03 Feb 2023 05:57:13 +0000

Coding is about productivity. And the more productive you’re, the better you can be at your coding skills. In this article, I will be discussing some of the best chrome extensions that can increase your productivity up to 10 times. Let’s get started.

ChatGPT for Google

It will display all ChatGPT responses alongside your google search results.

This is an open-source extension that shows the response from ChatGPT alongside Google, Bing, DuckDuckGo, and other search engines

It has features like Markdown rendering, Code highlighting, Dark mode, Custom trigger mode, etc.

https://chrome.google.com/webstore/detail/chatgpt-for-google/jgjaeacdkonaoafenlfkkkmbaopkbilf

Summarize

With this amazing chrome extension. you can get the summary or main ideas of any page content without even leaving the page. All in just one click. Whether you're reading news, articles, blogs, or research reports, Summarize have you covered.

https://chrome.google.com/webstore/detail/summarize/lmhkmibdclhibdooglianggbnhcbcjeh

Flonnect

This extension allows you to screen record from your webcam or from your desktop. You can also Record your screen or camera along with your audio. This extension supports all types of screen recordings for free with unlimited usage.

https://chrome.google.com/webstore/detail/screen-webcam-recorder-fl/lkeokcighogdliiajgbbdjibidaaeang

HackerTab

This extension allows you to customize your default tab pages that include news, tools, and events from top sources such as GitHub Trendings, Hacker News, DevTo, Medium, and Product Hunt. No matter what type of developer you are, you'll find valuable and relevant information here.

https://chrome.google.com/webstore/detail/hackertabdev-developer-ne/ocoipcahhaedjhnpoanfflhbdcpmalmp

SuperDev

If you are a developer or a designer, then you will love this amazing extension. This extension minimizes the development/designing time and provides various tools to debug the web without any hassle. It contains 18 tools for developers so you won't have to install a separate extension for each one.

https://chrome.google.com/webstore/detail/superdev-design-and-dev-t/jlkikimlceonbmfjieipbonnglnlchhl

GitHub Writer

This extension provides all the features available in the GitHub plain-text editor, including Markdown input. For features like tables, it offers a much easier experience in comparison to plain-text Markdown and allows users to be more productive. No more switching to the Preview tab to see what you write!

link: https://chrome.google.com/webstore/detail/github-writer/diilnnhpcdjhhkjcbdljaonhmhapadap

Querio

This extension intercepts and displays GraphQL and XHR requests in a nicer and more dev-friendly way than the built-in Network panel. Moreover, each request made on the page is beautifully formatted and highlighted. Dark and light themes are also available.

https://chrome.google.com/webstore/detail/querio-graphql-and-xhr-re/ojealanebldmhejpndmaenfcdpengbac

Little Star

This handful Extension will help you to categorize your GitHub projects quickly and hassle-free by clicking the GitHub star button. Now, you can manage all your projects in the app, quickly find and locate them, and no longer have trouble finding projects.

https://chrome.google.com/webstore/detail/little-star-github-stars/kmjfdonmflchjdlmeoecbmebfpnafpec

You

Search less, find, and create more with generative AI apps supercharging your search and helping you write better, code better, and design better. Quickly access generative AI apps powered by OpenAI models (such as GPT-3).

https://chrome.google.com/webstore/detail/youcom-search-chat-and-cr/fhplnehgjpmohhldfnjhibanpbiedofi

OCR Editor

This extension will you in extracting text from images and videos. It uses optical character recognition (OCR) technology to accurately convert images into text.

link: https://chrome.google.com/webstore/detail/ocr-editor-text-from-imag/ihnfmldlpdipgnliolhfffenpcmjgnif/related

That’s a wrap. Thanks for reading.

Follow me for weekly new tidbits on the domain of tech.

Need a Top Rated UI/UX designer and Front-End Development Freelancer to chop away your development woes? Contact me on Upwork and Freelancer

Want to see what I am working on? Check out my Personal Website, Twitter, and GitHub.

Want to connect? Reach out to me on LinkedIn. Follow me on Instagram.

10 GitHub repositories you must know as a JavaScript developer

💡Piyush Kesarwani — Wed, 01 Feb 2023 04:51:53 +0000

If you want to improve your programming skills, then learning continuously could be the safest and evergreen option. Learning new things continuously makes you a better developer and it also helps you in developing new skills as a coder. Today, in this article, I’ll be telling you how you can become a better JavaScript developer by learning all of its concepts from cool GitHub repositories.

Here are the 10 GitHub repositories that every JavaScript developer must know:

Node Best Practices

Node.js for web development is a revolutionary technology that offers unique features. Developers regard it as one of the most efficient cross-platform JavaScript environments that can help you build robust and effective REST APIs, mobile applications, and web applications.

In this GitHub repo, you’ll find the Node.js best practices list to learn.

link => https://github.com/goldbergyoni/nodebestpractices

JavaScript Algorithms

Data Structure and Algorithms are very important concepts to learn if you want to become a successful developer and software engineer.

So, here is the GitHub repo in Algorithms and data structures which is implemented in JavaScript with explanations and links to further readings.

link => https://github.com/trekhleb/javascript-algorithms

33 JS Concepts

This GitHub repository contains 33 JavaScript concepts every developer should know.

link => https://github.com/leonardomso/33-js-concepts

You Don't Know JS (Yet)

This GitHub repository is a book series on JavaScript. @YDKJS on Twitter.

link => https://github.com/getify/You-Dont-Know-JS

Clean Code JavaScript

This GitHub repository will teach you the Clean Code concepts adapted for JavaScript.

link*=>* https://github.com/ryanmcdermott/clean-code-javascript

Awesome NodeJS

NodeJs is one of the best JavaScript frameworks if you want to become a successful JavaScript developer.

This GitHub repository contains Delightful Node.js packages and resources that will make you a successful JavaScript developer in no time.

link ️=> https://github.com/sindresorhus/awesome-nodejs

30 Days Of JavaScript

30 days of JavaScript programming challenge is a step-by-step guide to learning JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace.

link => https://github.com/Asabeneh/30-Days-Of-JavaScript

Modern JS Cheatsheet

This GitHub repository contains Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects. Save it and learn to grow.

link => https://github.com/mbeaudru/modern-js-cheatsheet

JavaScript Testing Best Practices

This GitHub repository is all about the Comprehensive and exhaustive JavaScript & Node.js testing best practices to learn.

link => https://github.com/goldbergyoni/javascript-testing-best-practices

ES6 Cheatsheet

Here's a repository containing tips, tricks, best practices, and code snippets in JavaScript.

Feel free to bookmark it and refer to it when you need it.

link => https://github.com/DrkSephy/es6-cheatsheet

That’s a wrap. Thanks for reading.

Follow me for weekly new tidbits on the domain of tech.

Need a Top Rated UI/UX designer and Front-End Development Freelancer to chop away your development woes? Contact me on Upwork and Freelancer

Want to see what I am working on? Check out my Personal Website, Twitter, and GitHub.

Want to connect? Reach out to me on LinkedIn. Follow me on Instagram.

Async JavaScript: Simply Explained

💡Piyush Kesarwani — Sat, 28 Jan 2023 06:14:21 +0000

JavaScript is a single-threaded programming language, which means that it can only process one task at a time. However, with the introduction of Asynchronous JavaScript, it is now possible for the language to handle multiple tasks at the same time, without blocking the execution of the program. In this article, we will delve into the intricacies of Asynchronous JavaScript and how it can be used to improve the performance of your web applications.

JavaScript is an event-driven language, which means that the execution of the program is based on events such as user input, network requests, and timers. When an event occurs, the JavaScript engine adds the corresponding task to the event loop and waits for the task to be completed before moving on to the next task. However, this can lead to delays and freezing of the UI if the task takes too long to complete.

To overcome this limitation, JavaScript introduced the concept of Asynchronous programming. Asynchronous programming allows the program to continue executing other tasks while waiting for a long-running task to complete. This is achieved by using callback functions and promises.

A callback function is a function that is passed as an argument to another function, and is executed when the task is completed. For example, when making an HTTP request using the XMLHttpRequest object, we can pass a callback function as an argument to the onreadystatechange event. The callback function will be executed when the HTTP request is completed and the response is available.

Promises are another way to handle Asynchronous tasks in JavaScript. A promise represents the eventual completion of a task and can be in one of three states: fulfilled, rejected, or pending. A promise can be returned by a function and can be used to attach callbacks to handle the completion of the task.

In addition to callbacks and promises, JavaScript also introduced the async and await keywords in ECMAScript 2017. The async keyword is used to define an asynchronous function, and the await keyword is used to pause the execution of the program until a promise is fulfilled. This makes the code look synchronous, even though it is executing asynchronously in the background.

In conclusion, Asynchronous JavaScript is a powerful tool that allows web developers to improve the performance and responsiveness of their applications. By using callback functions, promises, and the async and await keywords, developers can write code that can handle multiple tasks at the same time, without blocking the execution of the program. With the increasing demand for fast and responsive web applications, understanding Asynchronous JavaScript is essential for any modern web developer.

That’s a wrap. Thanks for reading.

Follow me for weekly new tidbits on the domain of tech.

Want to see what I am working on? Check out my Personal Website, Twitter, and GitHub.

Want to connect? Reach out to me on LinkedIn.

5 Lessons I wish someone have told me before I started coding

💡Piyush Kesarwani — Tue, 24 Jan 2023 05:11:21 +0000

Coding is the most interesting thing to me. It’s more like a passion than a hobby for me. So, I continue to make interesting projects and I devote 1–2 hours consistently to coding and learning new things from YouTube. I am a self-taught learner (a full-stack web developer) and I have learned everything from YouTube alone. So I rely a lot on YouTube, Google, StackOverflow, and ChatGPT. There is no mentor for me. nor any instructor, so whenever I make projects I make a lot of mistakes, and I make many errors as well. But every time I learn from my mistakes and errors of mine. It helps me to become a better programmer.

It’s been 1.5 years since I learned web development and I am still learning more and more new/interesting topics about DevOps, Kubernetes, and System Design. The journey was pretty tough for me.

I learn so many lessons from my coding experience, but I wish someone could have told me all this earlier when I just started. So, here are some of the 5 best lessons that I want you to learn before starting coding so that you don’t have to learn this a hard way. Let’s get started.

Lifelong Learning process

Coding is a lifelong learning process. Before you start coding, it’s important to understand that you will never know everything about it. There will always be new languages, frameworks, and technologies to learn. Embrace the fact that you will constantly be learning and growing as a developer.

Practice, Practice, and Practice is the only way

Practice makes perfect. Coding is a skill, and like any other skill, it takes practice to master. Set aside some time each day to code, even if it’s just for a few minutes. The more you practice, the better you will become.

Learn to debug your code

Debugging is a crucial part of the process. One of the most frustrating parts of coding can be trying to figure out why your code isn’t working. But debugging is an essential part of the process, and it’s important to learn how to do it effectively.

Don’t be afraid to ask

Don’t be afraid to ask for help. Coding can be a solitary activity, but you don’t have to go through it alone. There are countless online communities and forums where you can ask for help, and many experienced developers are more than happy to offer guidance.

Fun is also Important

Have fun! Coding can be challenging, but it can also be incredibly rewarding. Don’t take it too seriously, and don’t be afraid to experiment and try new things. Remember that coding is a creative process, and the most important thing is to enjoy the journey.

That’s a wrap. Thanks for reading.

Follow me for weekly new tidbits on the domain of tech.

Want to see what I am working on? Check out my Personal Website, Twitter, and GitHub.

Want to connect? Reach out to me on LinkedIn. Follow me on Instagram.

10 Important JavaScript Object Methods everyone must know in 2023

💡Piyush Kesarwani — Mon, 23 Jan 2023 05:35:33 +0000

JavaScript object methods are actions that can be performed on JavaScript objects. They are functions that are associated with an object and can be invoked using the dot notation or bracket notation on that object. In JavaScript, objects can have properties and methods. Properties are data variables and methods are functions that can be executed by invoking them.

Object methods are used to perform certain actions or operations on an object and/or its properties.

In JavaScript, objects have certain built-in methods that can be used to manipulate and interact with the object’s properties and values. Some of the most commonly used object methods include:

Object Keys

Object.keys(obj): Returns an array of the object's own enumerable properties. The Object.keys() the method returns an array of a given object's own enumerable property names, in the same order as we get with a normal loop. This array only includes properties that are enumerable. Enumerable properties are those properties whose internal enumerable flag is set to true.

For example:

let obj = { name: "John", age: 30, city: "New York" };
let keys = Object.keys(obj);
console.log(keys); // Output: [ "name", "age", "city" ]

Object Values

Object.values(obj): Returns an array of the object's own enumerable property values. The Object.values() the method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in the loop. This array includes only the values of enumerable properties.

For example:

let obj = { name: "John", age: 30, city: "New York" };
let values = Object.values(obj);
console.log(values); // Output: [ "John", 30, "New York" ]

Object Entries

Object.entries(obj): Returns an array of the object's own enumerable property [key, value] pairs. The Object.entries() the method returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop. This array includes only the properties that are enumerable.

For example:

let obj = { name: "John", age: 30, city: "New York" };
let entries = Object.entries(obj);
console.log(entries); // Output: [ ["name", "John"], ["age", 30], ["city", "New York"] ]

Object assign

Object.assign(obj1, obj2, ...): Copies the values of all enumerable own properties from one or more source objects to a target object and returns the target object. This method is used to copy properties from one object to another, it makes a complete copy of all properties, including non-enumerable properties.

For example:

let obj1 = { name: "John" };
let obj2 = { age: 30 };
let obj3 = Object.assign(obj1, obj2);
console.log(obj3); // Output: { name: "John", age: 30 }

Object defineProperty

Object.defineProperty(obj, prop, descriptor): Defines a new property directly on an object, or modifies an existing property on an object, and returns the object. The defineProperty() the method allows you to define a new property on an object, or modify an existing property, and provides a way to set the property's attributes.

For example:

let obj = {};
Object.defineProperty(obj, "name", {
  value: "John",
  writable: true,
  enumerable: true,
  configurable: true
});
console.log(obj.name); // Output: "John"

Object defineProperties

Object.defineProperties(obj, props): Defines new or modifies existing properties directly on an object and returns the object. The defineProperties() the method is similar to the defineProperty() method, but it allows you to define multiple properties at once, using an object that contains the property descriptors.

For example:

let obj = {};
Object.defineProperties(obj, {
  name: {
    value: "John",
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 30,
    writable: true,
    enumerable: true,
    configurable: true
  }
});
console.log(obj.name); // Output: "John"
console.log(obj.age); // Output: 30

Object getOwnPropertyNames

Object.getOwnPropertyDescriptor(obj, prop): Returns a property descriptor for the own property of an object. The getOwnPropertyDescriptor() method returns a property descriptor for an own property (that is, one directly present on an object, not present by virtue of being along an object's prototype chain) of a given object.

For example:

let obj = { name: "John" };
let descriptor = Object.getOwnPropertyDescriptor(obj, "name");
console.log(descriptor); 
// Output: { 
//    value: "John",
//    writable: true,
//    enumerable: true,
//    configurable: true 
// }

Object getOwnPropertyNames

Object.getOwnPropertyNames(obj): Returns an array of all own properties' names (enumerable or non-enumerable) of an object. The getOwnPropertyNames() method returns an array of all properties (enumerable or non-enumerable) found directly on an object.

For example:

let obj = { name: "John", age: 30 };
let properties = Object.getOwnPropertyNames(obj);
console.log(properties); // Output: [ "name", "age" ]

Object getPrototypeOf

Object.getPrototypeOf(obj): Returns the prototype (i.e. the internal [[Prototype]]) of the specified object. The getPrototypeOf() method returns the prototype (i.e. the value of the internal [[Prototype]] property) of the specified object.

For example:

let obj = { name: "John" };
let prototype = Object.getPrototypeOf(obj);
console.log(prototype); // Output: {}

Object Create

Object.create(proto[, propertiesObject]): creates an object with the given prototype or with null as a prototype if none is given, and an optional properties object that describes its own properties. The create() method creates a new object with the specified prototype object and properties. If the prototype is not an object or null, it throws a TypeError.

For example:

let prototype = { sayHi: function() { console.log("Hi") } };
let obj = Object.create(prototype);
obj.sayHi(); // Output: "Hi"

These methods allow you to interact with objects in JavaScript in a more powerful way, they allow you to create, modify, and retrieve properties and values of objects, and to manipulate the prototype chain of an object.

That’s a wrap. Thanks for reading.

Follow me for weekly new tidbits on the domain of tech.

Need a Top Rated UI/UX designer and Front-End Development Freelancer to chop away your development woes? Contact me on Upwork and Freelancer

Want to see what I am working on? Check out my Personal Website, Twitter, and GitHub.

Want to connect? Reach out to me on LinkedIn.

I bet you don’t know about these 11 functional HTML elements

💡Piyush Kesarwani — Sun, 22 Jan 2023 05:35:59 +0000

HTML stands for Hypertext Markup Language. It is the standard markup language used to create web pages and other types of documents that can be displayed in web browsers. HTML is used to structure the content of a web page, including text, images, and other types of media, and to create the layout and design of the page using elements such as headings, paragraphs, lists, and tables.

HTML is a markup language, which means that it uses a set of tags and attributes to define the structure and layout of the content. These tags and attributes are used to create elements such as headings, paragraphs, links, images, and other types of content.

HTML is constantly evolving, and it is currently on version HTML5 which has introduced some new tags and attributes that are more semantically meaningful for modern web development such as and to mention a few.

HTML is the backbone of any website and it is used in conjunction with other technologies such as CSS and JavaScript to create dynamic and interactive websites. In this article, I’ll be discussing HTML elements.

So, here are some of the most practical HTML elements you should know about:

Details Element

The element is used to create a collapsible section of content, which can be expanded and collapsed by the user. This element is not widely used, but it can be useful for creating accordions or other types of content that can be hidden and revealed as needed.

Mark Element

The element is used to highlight text within a document. This element is useful for highlighting keywords or phrases within a block of text, such as in a search result or in a document with a lot of text.

Output Element

The element is used to display the result of a calculation or other output from a script. This element is useful for creating forms that include calculations or other dynamic content.

Time Element

The element is used to represent a specific date or time. This element can be used to mark up dates and times in a way that is machine-readable, which can be useful for indexing and searching content.

Figure Element

The and elements are used to create captions for images and other types of media. These elements can be used to create more accessible and semantic content by providing context for images and other media.

Progress Element

The element is used to create a progress bar, indicating the completion status of a task. This element is useful for creating interactive interfaces, such as file uploads, form submissions, and other types of tasks that have a progress indicator.

DataList element

The element is used to create a list of predefined options for an input element. This element can be used to provide a list of suggestions for the user, such as a list of countries or a list of product names. This can be useful for creating forms with input fields that have a large number of possible options.

Meter Element

The element is used to create a gauge or meter, which can be used to display a value within a specific range. This element is useful for displaying data such as disk usage, battery level, or other types of data that can be represented as a value within a range.

Ruby Element

The element is used to create ruby annotations, which are small text annotations that are typically used in East Asian languages to provide pronunciation or translation information. This element is not widely used, but it can be useful for creating content in languages that use ruby annotations.

Template Element

The element is used to define a template of HTML that can be reused later in the document. This can be useful for creating reusable components in web applications, such as forms, modals, or other types of content that can be reused across the application.

Picture Element

The element is used to create responsive images that can be displayed differently based on screen size, viewport, and other factors. This element allows you to specify different source images for different screen sizes and resolutions, and it’s a powerful way to optimize images for the web.

That’s a wrap. Thanks for reading.

Follow me for weekly new tidbits on the domain of tech.

Want to see what I am working on? Check out my Personal Website, Twitter, and GitHub.

Want to connect? Reach out to me on LinkedIn. Follow me on Instagram

8 mistakes you must never make as a programmer

💡Piyush Kesarwani — Tue, 17 Jan 2023 05:45:29 +0000

As a programmer, it's essential to be aware of common mistakes that can lead to poor code quality, decreased productivity, and missed deadlines. In this article, we'll discuss eight mistakes that you must never do as a programmer to ensure that you're writing high-quality code and working efficiently.

Not commenting on your code

One of the most common mistakes that programmers make is failing to comment on their code. Comments are a vital tool for making your code readable and understandable for others, and for yourself in the future. Without comments, it's often difficult to understand the purpose and function of a particular piece of code, leading to confusion and wasted time.

Not testing your code

Another mistake that programmers make is failing to test their code. Testing is crucial for identifying bugs and ensuring that your code is working as expected. Without testing, you're leaving your code open to bugs and errors, which can lead to wasted time and missed deadlines.

Not using version control

Version control is an essential tool for managing and tracking changes to your code. Without version control, it's difficult to keep track of changes, collaborate with others, and roll back to a previous version if something goes wrong. Not using version control can lead to wasted time, missed deadlines, and the loss of important work.

Not paying attention to performance

As a programmer, it's essential to pay attention to performance. Poorly optimized code can lead to slow performance, increased memory usage, and wasted resources. Not paying attention to performance can lead to wasted time and missed deadlines.

Not using proper data structures

Choosing the right data structure for your code is crucial for performance and readability. Not using the proper data structure can lead to poor performance and increased complexity.

Not keeping up to date with new technologies

As a programmer, it's essential to keep up to date with new technologies and programming languages. Failing to do so can lead to a lack of knowledge and skills, which can make it difficult to write efficient and maintainable code.

Not following best practices

As a programmer, it's essential to follow best practices for writing code. Failing to do so can lead to poor code quality, increased complexity, and wasted time.

Not asking for help

As a programmer, it's essential to know when to ask for help. Failing to ask for help when needed can lead to wasted time, missed deadlines, and poor code quality.

In conclusion, it's important to be aware of these common mistakes to ensure that you're writing high-quality code and working efficiently. By avoiding these mistakes, you'll be able to write better code, work more efficiently, and meet deadlines more easily. Remember, it's always better to avoid mistakes than to fix them later.

That's a wrap. Thanks for reading.

Follow me for weekly new tidbits on the domain of tech.

Need a Top Rated UI/UX designer and Front-End Development Freelancer to chop away your development woes? Contact me on Upwork and Freelancer

Want to see what I am working on? Check out my Personal Website, Twitter, and GitHub.

Want to connect? Reach out to me on LinkedIn.

Follow me on Instagram.

Learn Everything about React Hooks in 10 Mins

💡Piyush Kesarwani — Fri, 13 Jan 2023 05:47:46 +0000

Today we'll be going to learn everything about React Hooks and all of its types. This is going to be a fun ride. So, let's keep going.

React Hooks are functions that allow you to use state and other React features in functional components, rather than in class components. They were introduced in React v16.8 in 2019 and since then, it is a recommended way to write React component. They allow you to write more functional and composable code, and make it easier to reuse logic across your application.

React Hooks provide a way to access React features such as state, lifecycle methods, and context, in a functional way, without the need for a class component. They help to make your code more readable, maintainable, and testable.

React provides a set of built-in Hooks that you can use in your functional components to access React features such as state, lifecycle methods, and context. Here's a list of the 15 built-in Hooks in React:

useState

Allows a functional component to use state, similar to how a class component would use this.state.

useEffect

Allows a functional component to use lifecycle methods, such as componentDidMount and componentDidUpdate, in a way that is similar to how they would be used in a class component.

useContext

Allows a functional component to access context, which is a way to pass data through the component tree without having to pass props down manually at every level.

useReducer

Allows a functional component to use a reducer, which is a way to handle complex state changes and updates.

useCallback

A hook that returns a memoized callback. It takes two arguments, the callback function, and an array of dependencies.

useMemo

A hook that returns a memoized value. It takes two arguments, a function that returns the value, and an array of dependencies.

useRef

A hook that returns a ref object which holds a mutable value.

useImperativeHandle

A hook that allows you to customize the instance value that is exposed to parent components when using forwardRef.

useLayoutEffect

Same as useEffect but it runs synchronously after all DOM mutations.

useDebugValue

Allows you to add a label to custom hooks for more meaningful debugging.

useErrorBoundary

Allows you to create an error boundary component, to handle errors that occur during the lifecycle of a component.

useMutationEffect

Same as useEffect but it runs synchronously after all DOM mutations.

useResponder

Allows you to build gesture-based interactions.

useTransition

Allows you to schedule animations and manage the lifecycle of components that are entering, exiting, or updating.

useDeferredValue

A hook that allows you to work with a deferred value, which updates at a lower priority than other state updates.

These are all the built-in hooks that React provides, you can use these hooks to access React features in a functional way, without the need for a class component.

That’s a wrap. Thanks for reading.

Follow me for weekly new tidbits on the domain of tech.

Need a Top Rated UI/UX designer and Front-End Development Freelancer to chop away your development woes? Contact me.

Want to see what I am working on? Check out my Twitter, and GitHub.

Want to connect? Reach out to me on LinkedIn.