DEV Community: Basharath

How to handle forms on static sites for FREE?

Basharath — Wed, 08 Jun 2022 05:49:47 +0000

In the early days of the internet, the information on the web consisted of just static pages. When it became interactive people started generating web pages on the server, making them more dynamic in nature.

With the advent of new technologies and site generators, a new philosophy of serving web pages is making us think about static pages again.

This new philosophy or architecture is called JAMstack which stands for JavaScript, APIs and Markdown stack.

The whole idea of JAMstack is to serve websites as static pages, giving dynamic nature using JavaScript, and exchange data through APIs.

As a result, it makes the developer experience simpler, improves performance with greater scalability, and reduces the cost of maintenance.

There are many static site generators available these days viz., NextJS, Hugo, Gatsby, etc.

With the help of third-party tools or services, these static sites can be made more dynamic.

Creating and maintaining static sites is inexpensive but adding dynamic features is where one has to spend on third-party tools.

One essential service which almost every website needs is a contact form and handling contact forms on static sites can be done through third-party services as we don't maintain a full-fledged server to handle forms on static sites.

Some of the static site form handling services are FormSpree, FormKeep, GetForm etc. These third-party services come at a price and free tier services have limitations in data and the number of submissions.

But here is a solution that helps you to handle forms on static sites without the need for these third-party tools.

It is called FormEasy which is a FREE and open-source apps script library that helps you to receive forms on static sites with full control of your data.

Form spree is a quite popular service for handling forms on static websites and FormEasy can be the best formspree alternative with all customizations you want.

Let's see how to set up this FormEasy apps script library to handle static site forms.

FormEasy setup

In a few simple steps, forms on static sites can be handled using FormEasy library.

Create an empty Google sheets file
Open the Apps Script file connected to it
Add the FormEasy library using ScriptID
Add doPost apps script function
Deploy the apps script code and get the Web app URL to make POST requests

1. Create an empty Google sheets file

Visit this link to create a new blank Google sheets file.

2. Open the Apps Script file

After creating an empty Google sheet file(you can rename the file if you want to), go to Extensions in the menu bar and click Apps Script.

It opens up an apps script file connected with the Google sheet.

3. Add the FormEasy library

In the left bar of apps script file click + button beside Libraries and add the below Script ID and click Look up button.

ScriptID: 1CAyzGbXdwMlko81SbJAjRp7ewxhyGKhDipDK4v8ZvlpYqrMAAzbFNccL

You will see two options Version and Identifier.

Select the latest version to reflect the latest changes made to the library if any or you can select the specific version as per the features you want.

For the identifier, the default name is FormEasy it is the name of the object used to call methods in the library. You can change it if you want but keeping it as it is can help you use the ready code snippets related to FormEasy.

4. Add doPost function

Clear the default functions if any in the default apps script file Code.gs.

Create a function named doPost.

doPost function name is the default name of the function that runs whenever a POST request is made to the script.

Next set the email if you want to get notified whenever any form gets submitted using setEmail method on FormEasy object. (FormEasy is the default identifier if you do not make any changes to the identifier while adding the FormEasy library)

Setting email is optional, the data gets logged in the Google sheet and you will not be notified through email if you do not set the email.

You need to return action method on FormEasy object with the req argument from the doPost function and this is the only mandatory method to use and all other methods on FormEasy are optional.

All the available methods on FormEasy library are:

setSheet - To select the specific sheet for saving the data(Default is active sheet)
setEmail - To set the email for receiving notification
setSubject - To set the subject of the email
setFormHeading - To set the heading(inside email)
setFields - To set the fields of the form(Lower case letters, also the keys of the JSON object)
action - To return the response after submitting the form(Mandatory to return)

The above all are optional methods except the action.

The simplest case looks like below:

function doPost(req) {
  FormEasy.setEmail('youremail@domain.com'); // To receive email notification(optional)
  return FormEasy.action(req); // Mandatory to return action method
}

5. Deploy the apps script code

After saving all the changes to the code, it has to be deployed to use it.

To deploy, click the Deploy button at the top right corner and select New deployment and select type to Web app from the gear icon.

Select/fill the below options

Description(optional),
Execute as Me(you email)
Who has access Anyone

Click the Deploy button(authorize the script if you haven't done it before) and you will get a URL under Web app, copy that and it is going to be the endpoint for submitting the POST requests.

That's it. Now you can submit forms on this endpoint and they get logged in the Google sheet you selected. If you had set email then you will be notified through email whenever any form submission happens.

If you want to make any changes to the script, like changing the subject text, email etc, you can do so and save the script. And while redeploying it instead of selecting New deployment, this time you have to select Manage deployments and click the pencil icon, select the New version, and click the deploy button.

The changes will be get reflected when you make the POST requests after that.

Note: Whenever you make a new deployment, the web app URL changes. But when you redeploy using Manage deployments option the URL remains the same.

Here is how a sample POST request using JavaScript fetch looks like.

const data = {
  name: 'John',
  email: 'john@domain.com',
  message: 'Receiving forms is easy and simple now!',
};

const url = 'https://script.google.com/macros/s/<Deployment ID>/exec';

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain;charset=utf-8',
  },
  body: JSON.stringify(data),
})
  .then((res) => res.json())
  .then((data) => console.log('data', data))
  .catch((err) => console.log('err', err));

If you want to follow all the above instructions in the form of a video you can check this demo video.

As said already FormEasy is an open-source FormSpree alternative. You can check the source code of this library, fork it, make changes, use it yourself or you can contribute your code to the FormEasy Github repo.

Hope this is a good solution to handle contact forms on static websites for FREE. If you have or found any such useful solution for static sites then do share it with me.

I'll be sharing interesting tips, tricks and hacks about web development and technology on Twitter @wahVinci and Instagram @dev_apt, follow if you are interested.

Convert text selection to image instantly

Basharath — Fri, 22 Apr 2022 15:56:56 +0000

There are various types of browser extensions that help to accomplish certain tasks very easily.

We have already seen one such interesting chrome extension to copy text easily as never before just with a click.

Here is one more such unique chrome extension that helps to convert text to image just instantly.

Let's see how this text to image extension works and how we can make the best use of it while browsing the web.

Generate image from text selection

Before going to use this extension you need to first install it from the chrome store. You can get this from the below link.

➜ Text to image chrome extension

Once you installed this extension you can find it in the extensions bar and if you can't find it, check it in the dropdown menu of extensions and pin to find it in the main extensions bar.

In order to use it just visit any website where you can be able to select text or just use this website.

Select any text you want and then right-click to see the Text to image option in the right-click menu or specifically the context menu and from there click copy or download.

That's it you'll have the image of the text that you selected, voila!

How to customize the generated image?

You can customize the look of the image that is generated from the selected text with the help of the options available.

When you click the extension icon you can see three customization options viz., mode, padding, and color palettes.

1. Mode

With the help of the mode option, you can select the light or dark mode for the card that holds the text.

By default, it is in light mode.

2. Padding

The padding refers to the spacing around the text card which helps us to see the background. You have various values to pick from 0px to 128px.

When you select the 0px(pixels) it will hide the background and all the space will be occupied by the text card.

When you do not want any fancy background, instead just plain text with a white/dark background, you can make the padding 0px.

3. Color palette

From the color palette, you can pick your favorite color backgrounds to show behind the text card.

These color backgrounds are mostly the gradient colors which make these text images appear nice and attention grabbing.

Note that when you select 0px padding, these background colors will be hidden as there won't be any space.

4. Download

To quickly download the image just after selecting the text you can use this option for downloading the generated image to your device.

There are shortcuts for copying and downloading the image.

Shortcut to copy: Ctrl+Shift+Z

Shortcut to download: Ctrl+Shift+↓(down arrow)

Sometimes these shortcuts may conflict with the shortcuts in the browser or some websites. So keep this in mind while trying them out.

Right-click context menu options are always there whenever you face such issues.

Where to use text to image extension?

If you know why this extension was created, and the main problem it wants to address then it would give an idea of where to use this extension effectively.

There was a situation where I wanted to reply to tweets on Twitter with more than 280 characters, it was difficult or a bit cumbersome to tweet multiple times.

At that time I thought if there was something that could help me instantly to send messages that are of more than 280 characters without leaving the browser.

Then an idea struck me to convert the text to an image instantly which then can be shared as a reply to tweets.

And as a result, this text to image extension is born.

So this extension can be used to share long texts as replies/tweets on Twitter. You can also save text info from websites as images for your future reference.

Sometimes when you want to show text in a fancy and attractive manner you can use it there as well.

If you want to create more rich text effects including images, code snippets, etc you can try out this full-fledged solution from tweetlet website that helps you create amazing and visually appealing images.

If you want a demo of this extension you can watch this video.

That's it about this interesting tool that helps you to convert any selected text instantly to an image without leaving your browser.

Please feel free to share any suggestions/feedback/improvements in this tool.

I'll be sharing interesting tips, tricks and hacks about web development and technology on Twitter @wahVinci and Instagram @dev_apt, follow if you are interested.

Create beautiful images from text and tweets

Basharath — Tue, 15 Mar 2022 08:39:26 +0000

In this social media era, information gets shared in various forms. Text, image, and video are the quite commonly used media formats on the internet.

Images are the commonly used format for displaying information in an attractive way. Images are easy to save and share info.

Images and videos are also the preferred media formats for getting good engagement for your posts on social media.

It's a good idea to convert text to images that are attractive and informative, which is nothing but called infographics.

Here is a tool using which you can convert text, tweet, or any other image into a beautiful image with an attractive background to share on different social media platforms.

The tool is called tweetlet and the images generated by it are called tweetlets.

Let's learn more about this tweetlet tool to make cool photos out of it.

Create beautiful images using tweetlet

Tweetlet.net site has three different modes for creating images from:

Tweet to image
Image to a beautiful image with background
Text to image

To switch to a particular mode, just hover/click on the icon in the search bar, and using that you can switch to a tweet or image, or text mode.

The image can be resized with the help of the white clips provided on the edge of the image. Dragging by holding those resizers(white clips) will resize the image.

In every mode, there are two buttons for copying and downloading the image. Besides that, you can select the desired background from the preset gradients and adjust the image to a ready-made aspect ratio of 1:1 or 2:1.

1. Tweet to image

To convert any tweet to an image just copy the tweet's link and paste it in the search box of the tweetlet website.

It will create a beautiful quote-like image by default. With the help of controls, you can change it to a tweet mode from quote to make it appear exactly like the actual tweet.

With the help of controls, you can also adjust the size of the text, toggle the likes and shares of a tweet, change the background with various preset gradients.

Finally, when you are satisfied with the image, click copy or download it.

2. Image to a beautiful image with a background

In the image mode of tweetlet, you can upload or paste any image directly in the tweetlet site and it will appear with a cool background.

You can resize the image with the help of the resizers.

A cool trick to create a stack-effect image is to copy the current image and paste it and repeat until the stack level you want.

You can change the background as per your interest and finally copy or download the image to share it on any platform you want.

3. Text to image

This is the most powerful way to convert various kinds of text into a beautiful image.

First, switch to the text mode and you'll see a text box with a resizer at the bottom, dragging which you can resize the height of the text box.

This text box supports markdown text. That means you can have rich text effects using this.

Syntax for the rich text as follows:

Mentioning the correct language will enable to highlight the code as per that language, else it will show just a plain pre-formatted text.

Using the markdown syntax, you can even embed other images along with your text to create beautiful images using all of it.

You can learn more about the markdown syntax here.

Text mode will be useful for sharing code snippets and rich text info easily as an image.

If you want to create images instantly just by selecting the text you can check this text to image chrome extension that generates images from selected text in the blink of the eye.

As usual, once you are satisfied with all the adjustments, you can copy or download the image to share it on any platform you wanted.

You can see few other things that can be done using markdown. ↓

There's a dark mode icon at the top right corner where you can switch to the dark mode or light mode based on your preference. Your gradient and mode settings will be stored locally so whenever you open the site your previous settings get reflected.

You can directly try out all the above-mentioned modes from tweetlet.net right away. And if you want any new features you can send a message/feedback from the message icon present at the bottom right corner.

Last but not the least, if you like this tweetlet tool, then do share it with your friends.

I'll be sharing interesting tips, tricks and hacks about web development and technology on Twitter @wahVinci and Instagram @dev_apt, follow if you are interested.

Launched my first product on Product Hunt

Basharath — Wed, 16 Feb 2022 16:18:29 +0000

I'm Basharath, a full-stack developer. I’ve always been interested in solving problems and developing interesting tools to address them.

This is my very first product on ProductHunt. Very much excited to launch. 😀

A few days ago when I was doing some work involving copying text paragraphs and sentences, I noticed that it was tedious work to carry out. Using Ctrl + C all the time for copying text seemed to be a bit time-consuming thing for me.

At that time I felt like to have some tool to copy text or sentences just in a click. I tried finding if there's any tool that could address this problem and I found none.

So I decided to create one myself addressing various scenarios involved while copying text on the web.

Here is that tool addressing those problems involved while copying text. It is called Copy Text Easily.

It is a chrome extension that lets you copy text or code snippets in a hassle-free manner just with a click.

You can have a look at the Copy text easily product on the Product Hunt and give your feedback.

Here is the intro video.

Thank you for reading!

Copy text/codes in a click from any site

Basharath — Mon, 17 Jan 2022 10:22:45 +0000

We often copy text or code snippets or any other kind of resource quite commonly while browsing the web. Copying sometimes got to be tedious work in certain situations.

Using keyboard shortcuts quite often for various tasks is found to be a great time-saver in the long run. But certain people who are not much used to a keyboard, like using the mouse for all their small to big activities in the browser.

Copying and pasting text with the shortcuts Ctrl + C and Ctrl + V are the world's highly used shortcuts and these shortcuts are known almost to all the people who use a computer.

Do you remember yourself copying text with Ctrl + C C C C C C C, typing C multiple times to make sure the text gets copied?

Sometimes we tend to put a bit more time even with copy shortcuts. When you want to copy text just so frequently, let's say you want to shift a formatted text from one place to the other and that can be copied only as paragraphs and not as a whole, in such situations, copying and pasting text with even shortcuts is going to be a very tedious job. Not just this case but in any case that involves frequent copying and pasting text gets tedious even with shortcuts.

So keeping in mind various contexts involved in copying text, a small and compact chrome extension is made to Copy Text Easily.

Using Copy Text Easily(CTE) extension effectively has the potential to save a lot of time in the long run for those who involve in copying text just so frequently. e.g., Students copying reference details to their journals, etc.

Let's see all the features which this Copy Text Easily extension provides.

Copy Text Easily extension

Before getting started to use this Copy Text Extension, you need to first install it from the chrome store. You can install the extension from this link Copy Text Easily Extension.

CTE chrome extension has got three modes for copying text

Paragraph(default)
Sentence
Custom

1. Paragraph mode:

In paragraph mode, you can copy the blocks of text by hovering on any block of text you want. A small preview of the text that you are going to copy will be displayed for convenience. Just clicking on the block of text will get the text copied.

This mode is very useful for copying blocks of code or code snippets on StackOverflow, GitHub, etc.

2. Sentence mode:

This is a very unique way to copy sentences from a paragraph. By hovering the mouse on and off the paragraph, you can see different sentences getting selected to copy the text. Whichever sentence you want can be seen in the preview box and just clicking once will get that particular sentence copied to your clipboard.

This mode is very useful while working with sentences related to writing works.

3. Custom mode:

This is the customized mode to copy any text you want just by selecting. Yes, just selecting a text will copy the text to the clipboard. This is useful in situations when you can want to copy a very specific text when it is not possible with the above previous modes.

By default, the extension will be active on the active browser tab, and the mouse hovering will result in the preview of text hovered. So to avoid that there's an option to activate this extension on demand by pressing any of Ctrl, Alt, Shift keys. You can select the key at your convenience from the extension keypress options.

There's even an option to enable or disable the whole extension and the keypress mode.

Coming to privacy, this extension fully runs on your browser locally and doesn't communicate with the outside world. It is packed in under 15KB of pure JavaScript code without any libraries or frameworks.

If you face any problems with this extension you can try the below methods:

Reload the page whichever is having a problem
Check if the extension is enabled
Check if you have enabled the extension to work only on keypress
Sometimes 'Shift' and 'Alt' keys might have problems, so try to select the 'Ctrl' key if you have problems

And that is all about this simple chrome extension to copy the text in a hassle-free manner.

I'll be sharing interesting tips, tricks and hacks about web development and technology on Twitter @wahVinci and Instagram @dev_apt, follow if you are interested.

P.S: I'm going to make a tutorial to create extension like this soon, until then support me by following and sharing this article on Twitter.

Way to customize each item in the list using simple CSS

Basharath — Thu, 13 Jan 2022 07:12:55 +0000

Lists are the form of data representation commonly used by all types of documents. In HTML there are two types of lists namely ordered and unordered lists.

In an ordered list, the items are indicated by serial numbers or letters that are in some order. In an unordered list, the list items are indicated by various types of bullets viz., disc, circle, square, or by an image.

By default, the ordered list items are indicated by numbers and unordered list items by disc bullets.

<!-- Unordered list -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Styling list style types

For styling lists, there are CSS list properties using which we can change the list style type, list position, and add an image as a list type nothing but the image as the bullet of the list item.

CSS list property

ul, ol {
  /* list-style is a shorthand property */
  list-style: list-style-type list-style-position list-style-image
}

list-style-type - to change the bullet styles of the list
list-style-position - to change the position of the list, two values outside and inside
list-style-image - to add an image as a bullet for the list, if the image fails to show then list-style-type will be shown

So in order to change the bullet type for the list, we just need to use CSS list style type with the bullet we need. Let's see how to change the bullets for the list.

/* Unordered list */
ul {
  list-style-type: '❤️';
  or /* list-style: '❤️'; */
}

/* Orderedlist */
ol {
  list-style: '👍'
}

Just by changing the CSS list style type value, we can change the bullets of any list. The possible value for the list style type can be anything, even language-specific letters, roman numerals, etc. To know various supported list style types in CSS head over to this MDN Docs.

But using this way all the style types are going to be the same for all the items of the list. In order to customize style type for every individual item, we need to define it by using CSS at-rule, @counter-style.

Customize individual list style type

Using @counter-style we can define the custom list style type for individual items of the list. It has so many properties for customizing the list. There are three important properties that we need to know to customize the list style types.

@counter-style custom-type {
  system: cyclic;
  symbols: "😀";
  suffix: " ";
}

ul {
  list-style: custom-type;
  /*or list-style-type: custom-type; */
}

system - defines how the list bullets should show. The possible values for it are: cyclic, numeric, alphabetic, symbolic, additive, or fixed, etc
symbols - here is where you need to give different list style types you want to show for the list items. It can be numbers, alphabets, symbols, even images separated by a space
suffix - usually, this one should be space, to have a space after the style type. Other than space you can have anything as a suffix.

Let's see all the above in action.

<!-- Unordered list -->
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>

/* style type for unordered list */
@counter-style custom-unordered {
  system: cyclic;
  symbols:  '❓' '✌️' '❤️' ;
  suffix: ' ';
}

/* style type for ordered list */
@counter-style custom-ordered {
  system: fixed;
  symbols: '➡️' '😀' '👍';
  suffix: ' ';
}

ul {
  list-style: custom-unordered;
  /* or list-style-type: custom-unordered; */
}
ol {
  list-style-type: custom-ordered;
}

The image of the result is put here because we can't edit the CSS in dev.to. To see the actual result on the webpage, see the original article on the devapt site.

So using the @counter-style that is how we can add individual list style types. If you see when system is defined as cyclic the same list style type repeats after all types are done, and when it is fixed the style type for the item number more than the number of symbols defined, get the default style type i.e., a number for the ordered list and disc for the unordered list.

You need system value as fixed only when you know that the number of items are fixed else it's better to go for cyclic or any other type.

Note: Safari is the only modern browser that doesn't support this CSS feature. You can see the compatibility here.

That is all about styling the individual list item types using CSS.

I'll be sharing interesting tips, tricks and hacks about web development and technology on Twitter @wahVinci and Instagram @dev_apt, follow if you are interested.

Use URL() instead of URLSearchParams() for query params in JavaScript

Basharath — Mon, 10 Jan 2022 09:31:27 +0000

Reading and manipulating URLs or query strings is involved in various applications for obtaining data from requests and routing users or requests. Different languages have different ways to deal with query parameters or routing at the backend.

In this article, we're going to look at the ways to read and manipulate query strings and URLs using URL and URLSearchParams APIs of Javascript at the client or more specifically in the browser.

In the browser, there's a global variable called location or window.location using which we can get various details about the URL of your active browser tab. Using location property we can get details like full URL, protocol, host, hostname, port, pathname, search params as a string, etc

But to parse and read any URL other than our active tab address, we have URL and URLSearchParams APIs at our disposal in JavaScript.

Let's get into more details of these JavaScript APIs.

How to use URL API in JS?

A URL constructor is used to construct, normalize, parse and encode URLs. It provides various properties to read and manipulate the components of a URL.

URL takes an absolute URL string as an argument and returns an object with various properties to read and manipulate the passed URL.

Let's understand this URL by using a sample URL with query params.

const parsedUrl = new URL('https://example.com/?name=John Smith&age=25&id=101');
console.log(parsedUrl); // https://example.com/?name=John%20Smith&age=25&id=101

In the above code, we can see that URL could parse the supplied URL string correctly. The parsedUrl can be used as a string directly anywhere we want or we can use the various properties and methods attached to it by the URL class.

URL has got most of the properties similar to the window.location object which includes host, hostname, href, origin, port, protocol, search, searchParams, username, password etc.

const url = new URL('https://example.com:8080/blog/?name=John Smith&age=25&id=101#heading');

url.host // example.com:8080
url.hostname // example.com
url.href // https://example.com:8080/blog/?name=John%20Smith&age=25&id=101#heading
url.origin // https://example.com:8080
url.pathname // /blog/
url.port // 8080
url.protocol // https:
url.hash // #heading
url.search // ?name=John%20Smith&age=25&id=101
url.searchParams // URLSearchParams {}

So by using URL API we can get various types of info about the URL link that we pass.

If you observe the prop url.searchparams is actually returning the URLSearchParams which we are going to see in the next section.

In certain URLs, we have username and password in the URL itself, and such URLs can be parsed easily to get username and password details using this URL API.

const newUrl = new URL('https://john:somePass@dev.example.com/api/test');
console.log(newUrl.username); // john
console.log(newUrl.password); // somePass

To modify any of the props we can just simply assign any valid value to it.

const url = new URL('https://example.com:8080/blog/?name=John Smith&age=25&id=101#heading');

url.href = 'https://abc.com';
url.pathname = 'about';
url.hash = '#important';
url.search = '?name=Bond&age=20';
console.log(url); // https://abc.com/about?name=Bond&age=20#important

url.origin = 'https://aaa.com:7777';  // Error: Cannot set property origin

You can set or modify any of the properties of url except origin and searchParams if you try, an error will be thrown.

How to use URLSearchParams in JS?

In the last section we have seen the ways to read and modify URLs but reading and setting individual URL query strings can be done easily using the URLSearchParams constructor.

URLSearchParams takes the query string of a URL as argument and returns an iterable object with various methods to read and manipulate the query parameters. If you pass a full URL to the URLSearchParams it will clip off the inital param after ?. So it's always good to pass only the query string part of the URL or just pass query string as an object with key value pairs.

const link = 'https://example.com/blog?name=john&age=25&id=101&name=smith';
const url = new URL(link);
const searchParams = new URLSearchParams(url.search); // For active browser link, use location.search

searchParams.get('name'); // john
searchParams.getAll('name'); // ["john", "smith"]
searchParams.has('age'); // true
searchParams.toString(); // name=john&age=25&id=101&name=smith
searchParams.append('place', 'Munich'); // Adding a new query param
searchParams.set('id', '222'); // Updating the id to 222
searchParams.toString(); // name=john&age=25&id=222&name=smith&place=Munich
searchParams.delete('place'); 
searchParams.toString(); // name=john&age=25&id=222&name=smith

There are other methods like keys, values, entries and forEach(iterates over the values) to iterate the search params.

Other than forEach method all return iterables so array methods like forEach can't be run on those. We need to convert them to an array and use methods like forEach, map etc.

const searchParams = new URLSearchParams('name=john&age=25&id=101');

searchParams.forEach(v => console.log(v)); // john 25 101
Array.from(searchParams.keys()).forEach(k => console.log(k)); // name age id
Array.from(searchParams.values()).forEach(v => console.log(v)); // john 25 101
Object.fromEntries(searchParams.entries()); // {name: "john", age: "25", id: "101"}

In the above code snippet for the methods keys, values and entries we converted them to arrays and object to see the results.

Now if we go back to the URL API methods, we have searchParams method there, using that we can get all the details that we could get using URLSearchParams except that we cannot set any query parameters from there.

const url = new URL('https://example.com/?name=John Smith&age=25&id=101');
url.searchParams.get('name') // John Smith
url.searchParams.has('age') // true
url.searchParams.toString() //name=John+Smith&age=25&id=101
url.searchParams.forEach(i=> console.log(i)) //John Smith 25 101
Object.fromEntries(url.searchParams.entries()) // {name: "John Smith", age: "25", id: "101"}

Using URL we can pass full URL address and can still read the correct query params unlike URLSearchParams where we need to pass only the query string to read the correct query parameters data.

So that's all about URL and URLSearchParams in Javascript. In conclusion what we can infer is in most of the cases to read the query strings we you just need to use URL API.

If you liked this article please give a follow & share. More such interesting articles are on the way.

I'll be sharing interesting tips, tricks and hacks about web development and technology on Twitter @wahVinci and Instagram @dev_apt, follow if you are interested.

Easiest way to understand CAB(Call, Apply, Bind) in JS

Basharath — Fri, 07 Jan 2022 15:40:18 +0000

The keyword this in JavaScript is one of the most muddling concepts because its value depends on where it is used. Often it tricks developers and sometimes it's the culprit behind surreal results.

Let's discuss this this keyword with simple and easy-to-understand examples before actually delving into the call, apply, and bind methods as this keyword is the main reason for having those methods.

What is this in JavaScript?

The this keyword in JavaScript refers to the object that the function is a property of and this will depend on the object that is invoking the function.

To get a quick idea of this have a look at the code snippet below.

const myObj = {
  name: 'John',
  age: 25,
  place: 'London',
  myFunction: function() {
    return this;
  }
};

myObj.myFunction(); 
// {name: "John", age: 25, place: "London", myFunction: ƒ()}

In the above code snippet, you can see that when myFunction method is called it returns the value of this, which is nothing but the myObj itself. If you recollect the definition for this in the previous paragraph, it says this refers to the object that the function is a property of, so here myFunction is a property of myObj, which means this is referring to that myObj object.

A simple trick is whatever precedes before .(dot) is the object referenced by the this keyword. So before .(dot) in myObj.myFunction() is myObj, which is the value of this.

Let's take another example to understand this.

function myFunction() {
  return this;
}

myFunction(); // window or undefined(in case of 'strict mode')

In the above code we are returning this from the myFunction, so when myFunction is called what we see or get is the value of this.

Again if we recollect our definition of this, it refers to the object which the function is a property of. Here our function myFunction is a property of global object nothing but the window object in the browser, so which means when we call myFunction the value of this is going to be the window object.

If we go by our trick of .(dot) preceding the function, here there's no dot but every function is a method in the window object, so it translates to window.myFunction() so here, the this keyword refers to the window object.

In order to avoid functions getting attached to the window object, we use strict mode so as a result window will be undefined in such cases.

So keep in mind our definition as we're going to use that for understanding call, apply and bind methods.

The this keyword in JavaScript refers to the object that the function is a property of and this will depend on the object that is invoking the function.

Understanding call, apply, bind in JavaScript

Let's consider an object person with a property name and a method details.

const person = {
  name: 'John',
  details: function(age, place) {
    return `${this.name} ${age} years old, lives in ${place}`
  }
}

person.details(25, 'London'); //John 25 years old, lives in London

When we call the method details on person object with the arguments, we knew that this refers to the person object because details is a property of the person object and so this.name would be John and so the result that gets returned will be as shown in the comments.

This part is going to be clear as we knew what this means in the person object.

Let's consider a scenario where we wanted to use the details method but with different arguments.

As per the details method we can pass in different age and place values but how about the name, as it is connected with the this keyword? This is where we are going to use those special methods call, apply and bind. Let's dive into those.

Using `call` method

Now we want to associate a different object other than person to this keyword of details method. So to do that we're going to use the call method as shown below in the code snippet.

person.details.call({ name: 'James'}, 30, 'Tokyo'); 
// James 30 years old, lives in Tokyo

A call method takes a new object that we want this to refer to followed by the arguments to the function(nothing but the details method) and it gets called referencing this to the new object passed as the first argument. Voila! That's what a call method is.

Using `apply` method

Guess what, apply method is just the same as the call method, that is, it takes a new object as the first argument to reference the this keyword and is followed by an array of arguments. So it means you can simply pass the arguments to the details function in the form of an array instead of passing individually. Have a look at the code below so it becomes clear for you.

person.details.apply({ name: 'James'}, [30, 'Tokyo']); 
// James 30 years old, lives in Tokyo

So call and apply methods are used to reference a new object to this keyword on methods.

And then what bind is for? Guess!

Using `bind` method

When call and apply methods are applied they are called(invoked) directly referencing the new object passed but in order to get a new function reference that can be used to call at later times, the bind method is used. Have a look at the code snippet below to get more clarity.

const personDetails = person.details.bind({name: 'William'}, 40, 'Rome');

personDetails(); 
// William 40 years old, lives in Rome

So using the bind method returns a new function reference which can be called at a later time and that is all about the bind method.

So putting all the three methods together.

const person = {
  name: 'John',
  details: function(age, place) {
    return `${this.name} ${age} years old, lives in ${place}`
  }
}

person.details(25, 'London');  //John 25 years old, lives in London

// Using call
person.details.call({ name: 'James'}, 30, 'Tokyo'); // James 30 years old, lives in Tokyo

// Using apply
person.details.apply({ name: 'James'}, [30, 'Tokyo']); // James 30 years old, lives in Tokyo

// Using bind
const personDetails = person.details.bind({name: 'William'}, 40, 'Rome');
personDetails();  // William 40 years old, lives in Rome

So in short CAB(call, apply, bind in JavaScript) are used to reference a new owner object to the this keyword. Hope this article has demystified the call, apply and bind methods in JS.

Did we miss anything here? Yes, the this value will be different when we use an arrow function. See you in the next article.

If you liked this article please give a follow & share. More such interesting articles are on the way.

I'll be sharing interesting tips, tricks and hacks about web development and technology on Twitter @wahVinci and Instagram @dev_apt

DEV Community: Basharath

How to handle forms on static sites for FREE?

FormEasy setup

1. Create an empty Google sheets file

2. Open the Apps Script file

3. Add the FormEasy library

4. Add doPost function

5. Deploy the apps script code

Convert text selection to image instantly

Generate image from text selection

How to customize the generated image?

1. Mode

2. Padding

3. Color palette

4. Download

Where to use text to image extension?

Create beautiful images from text and tweets

Create beautiful images using tweetlet

1. Tweet to image

2. Image to a beautiful image with a background

3. Text to image

Launched my first product on Product Hunt

Copy text/codes in a click from any site

Copy Text Easily extension

CTE chrome extension has got three modes for copying text

1. Paragraph mode:

2. Sentence mode:

3. Custom mode:

Way to customize each item in the list using simple CSS

Styling list style types

CSS list property

Customize individual list style type

Use URL() instead of URLSearchParams() for query params in JavaScript

How to use URL API in JS?

How to use URLSearchParams in JS?

Easiest way to understand CAB(Call, Apply, Bind) in JS

What is this in JavaScript?

Understanding call, apply, bind in JavaScript

Using call method

Using apply method

Using bind method

Using `call` method

Using `apply` method

Using `bind` method