DEV Community: Atta

How to implement Stripe revenue verification?

Atta — Sun, 05 Sep 2021 17:59:09 +0000

I am building AcquireBase - a marketplace for buying and selling side-projects, micro-SaaS, etc.

As part of our upcoming feature, we want to allow our seller to verify their reported MRR via Stripe - something IH already does for products.

It has been over 1 month since I am trying to figure out how to do this. I tried Google search but nothing came up useful. Stripe's documentation did help either.

Now, I'm getting frustrated.

Is there anyone who has successfully implemented Stripe revenue verification or knows how to do this?

I'd highly appreciate it if you share the info with me.

Thanks!

Are Ad Blockers blocking Google Analytics?

Atta — Tue, 03 Mar 2020 11:03:37 +0000

Blog Stats Discrepancy (Feb 2020)

Google Analytics shows I had 70.7k total users including direct, organic, referrals, and social.
Google Search Console displays I had 81.7K organic clicks only in the month of February.

Now, I am wondering what went wrong with GA tracking. Are Ad Blockers the real culprit?

Does anyone know how to bypass Ad Blockers?

Introduction to JavaScript URL Object

Atta — Sun, 08 Sep 2019 14:58:53 +0000

This post was originally published on attacomsian.com/blog.

The vanilla JavaScript URL object is used to parse, construct, normalize, and encode URLs. It provides static methods and properties to easily read and modify different components of the URL.

Creating a URL

You can create a new URL object by either passing the string URL or by providing a relative path and a base string URL to its constructor:

// url object with absolute path
const url1 = new URL('https://attacomsian.com/blog/javascript-url-object');

// url object with relative path and base url
const url2 = new URL('/blog/javascript-url-object', 'https://attacomsian.com');

In the example above, both URLs are same. We can even create a new URL based on the path relative to an existing URL:

// create new url based on existing url
const url3 = new URL('/blog', url1);

console.log(url3.toString()); // https://atttacomsian.com/blog

URL Properties

The URL object is very helpful if you want to extract different parts from a string URL, such as the host name, port, relative path, and parameter values. You can access these properties immediately after the URL object is created:

const url = new URL('https://attacomsian.com/blog/javascript-url-object#url-properties');

console.log(url.protocol); // https:
console.log(url.host);     // attacomsian.com
console.log(url.pathname); // /blog/javascript-url-object
console.log(url.hash);     // #url-properties
console.log(url.origin);   // https://attacomsian.com

In addition to the above properties, the URL object also has:

search — The query parameters string including the leading ? character.
href — The complete URL, same as url.toString() method.
port — Returns the port of the URL.
searchParams — A URLSearchParams object that can be used to access the individual query parameters found in search.
username & password — Only available if HTTP authentication is used.

Apart from the above properties, the URL object also provides two methods:

toString() — It is similar to url.href but cannot be used to modify the value.
toJSON() — It returns the same string as href property.

Updating a URL

The URL object properties (except origin and searchParams) can be used to construct a new URL or update parts of an existing URL:

// construct a url
const url = new URL('http://attacomsian.com');
url.pathname = '/blog/javascript-url-object';
url.hash = '#url-properties';

// update `protocol` property
url.protocol = 'https:';

console.log(url.toString()); // https://attacomsian.com/blog/javascript-url-object#url-properties

Static Methods

The URL interface provides createObjectURL() static method to generate a blob URL (starts with blob: as its schema) that uniquely identify the object in the browser:

const blobUrl = URL.createObjectURL(blob);

Once you have the blob URL, pass it to revokeObjectURL() static method to remove it from the memory:

URL.revokeObjectURL(blobUrl);

URL Object Usage

At the moment, the URL object usage is limited. Simple strings are good enough for making network requests. However, you can use the URL object in modern JavaScript APIs especially in Fetch API, or even in XMLHttpRequest (XHR) to communicate with the server.

Here is an example of Fetch API that uses a URL object to get a JSON object:

const url = new URL('https://reqres.in/api/users');

fetch(url)
    .then(res => res.json())
    .then(res => {
        res.data.map(user => {
            console.log(`${user.id}: ${user.first_name} ${user.last_name}`);
        });
    });

✌️ I write about modern JavaScript, Node.js, Spring Boot, and all things web development. Subscribe to my newsletter to get web development tutorials & protips every week.

Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV.

Object.entries() and Object.values() Methods in JavaScript

Atta — Thu, 22 Aug 2019 16:21:29 +0000

This post was originally published on attacomsian.com/blog.

The Object.entries() and Object.values() methods were introduced to JavaScript Object constructor with the release of ECMAScript 2017 (ES8). Let us have a quick look at these useful methods.

`Object.entries()` Method

The Object.entries() method takes an object as argument and returns an array with arrays of key-value pairs:

const birds = {
    owl: '🦉',
    eagle: '🦅',
    duck: '🦆'
};

const entries = Object.entries(birds);
console.log(entries);

// [['owl', '🦉'], ['eagle', '🦅'], ['duck', '🦆']]

The order of the array element do not depend on how the object was defined. The order is same as that provided by a for...in loop.

Iterating through an Object

We can use Object.entries() to iterate over object as well:

// using `for...of` loop
for (const [key, value] of Object.entries(birds)) {
    console.log(`${key}: ${value}`);
}

// owl: 🦉
// eagle: 🦅
// duck: 🦆

// using array destructuring
Object.entries(birds).forEach(([key, value]) => console.log(`${key}: ${value}`));

// owl: 🦉
// eagle: 🦅
// duck: 🦆

Converting an Object to a Map

Since the Map constructor also takes an iterable of entries to initialize a map object, the Object.entries() method can be used to create a map from an object:

const map = new Map(Object.entries(birds));

console.log(map.size); // 3
console.log(map.has('owl')); // true
console.log(map.get('duck')); // 🦆

`Object.values()` Method

The Object.values() method works very much like Object.entries(), but only returns the values of the own enumerable string-keyed properties in the same order as provided by the for...in loop:

const foods = {
    cake: '🍰',
    pizza: '🍕',
    candy: '🍬',
    icecream: '🍨'
};

const values = Object.values(foods);
console.log(values);

// ['🍰', '🍕', '🍬', '🍨']

Both Object.values() and Object.entries() do not follow the prototype chain and only iterate through the properties that are directly added to the given object. They also ignore all non-enumerable properties as well:

Object.defineProperty(foods, 'sushi', {
    value: '🍣',
    writable: true,
    configurable: true,
    enumerable: false
});

console.log(Object.values(foods));

// ['🍰', '🍕', '🍬', '🍨']

Converting an Object to Set

Since the Set constructor accepts an iterable, with Object.values(), we can easily convert an Object to a Set:

const set = new Set(Object.values(foods));

console.log(set.size); // 4
console.log(set.has('🍨')); // true

✌️ I write about modern JavaScript, Node.js, Spring Boot, and all things web development. Subscribe to my newsletter to get web development tutorials & protips every week.

Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV.

Introduction to XMLHttpRequest (XHR)

Atta — Fri, 16 Aug 2019 11:56:59 +0000

This post was originally published on attacomsian.com/blog.

XMLHttpRequest (XHR) was invented by Microsoft in the early '90s and became a go-to technology for asynchronous server interactions during the mid of the first decade of the 21st century.

Thanks to XHR, for the first time, it became possible to update parts of a web page without reloading the whole page.

XMLHttpRequest is a built-in browser object in all modern browsers that can be used to make HTTP requests in JavaScript to exchange data between the web browser and the server.

Despite the word "XML" in its name, XMLHttpRequest can be used to retrieve any kind of data, and not just XML. We can use it to upload/download files, submit form data, track progress and much more.

Basic XHR Request

To send an HTTP request using XHR, create an XMLHttpRequest object, open a connection to URL, and send the request. Once the request completes, the object will contain useful information such as the response body and the HTTP status code.

Let's use JSONPlaceholder test REST API to send a GET request using XHR:

// create an XHR object
const xhr = new XMLHttpRequest();

// listen for `onload` event
xhr.onload = () => {
    // process response
    if (xhr.status == 200) {
        // parse JSON data
        console.log(JSON.parse(xhr.response));
    } else {
        console.error('Error!');
    }
};

// create a `GET` request
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users');

// send request
xhr.send();

xhr.onload event only works in modern browsers (IE10+, FireFox, Chrome, Safari). If you want to support old browsers, use xhr.onreadystatechange event instead.

`xhr.open()` Method

In the example above, we passed the HTTP method and a URL to the request to open() method. This method is normally called right after new XMLHttpRequest(). We can use this method to specify the main parameters of the request:

Here is the syntax of this method:

xhr.open(method, URL, [async, user, password])

method — HTTP request method. It can be GET, POST, DELETE, PUT, etc.
URL — The URL to request, a string or a URL object
asnyc — Specify whether the request should be made asynchronously or not. Default value is true
username & password — Credentials for basic HTTP authentication

The open() method does not open the connection to URL. It only configures the HTTP request.

`xhr.send()` Method

xhr.send([body])

The send() method opens the network connection and sends the request to the server. It takes an optional body parameter that contains the request body. For request methods like GET you do not need to pass the body parameter.

XHR Events

The three most widely used XHR events are the following:

load — This event is called when the result is ready. It is equivalent to xhr.onreadystatechange event with xhr.readyState == 4.
error — This event is fired when the request is failed due to network down or invalid URL.
progress — This event is triggered periodically during the response download. It can be used to report progress for large network requests.

// listen for `load` event
xhr.onload = () => {
    console.log(`Data Loaded: ${xhr.status} ${xhr.response}`);
};

// listen for `error` event
xhr.onerror = () => {
    console.error('Request failed.');
}

// listen for `progress` event
xhr.onprogress = (event) => {
    // event.loaded returns how many bytes are downloaded
    // event.total returns the total number of bytes
    // event.total is only available if server sends `Content-Length` header
    console.log(`Downloaded ${event.loaded} of ${event.total}`);
}

Request Timeout

You can easily configure the request timeout by specify the time in milliseconds:

// set timeout
xhr.timeout = 5000; // 5 seconds

// listen for `timeout` event
xhr.ontimeout = () => console.log('Request timeout.', xhr.responseURL);

xhr.responseURL property returns the final URL of a XMLHttpRequest instance after following all redirects. This is the only way to retrieve Location header.

Response Type

We can use xhr.responseType property to set the expected response format:

Empty (default) or text — plain text
json — parsed JSON
blob — binary data Blob
document — XML document
arraybuffer — ArrayBuffer for binary data

Let's call a RESTful API to get the response as JSON:

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.jsonbin.io/b/5d5076e01ec3937ed4d05eab/1');

// set response format
xhr.responseType = 'json';

xhr.send();

xhr.onload = () => {
    // get JSON response
    const user = xhr.response;

    // log details
    console.log(user.name); // John Doe
    console.log(user.email); // john.doe@example.com
    console.log(user.website); // http://example.com
}

Request States (`xhr.readyState`)

The XMLHttpRequest object changes state as the request progresses. We can access the current state using xhr.readyState property.

The states are:

UNSENT (0) — The initial state
OPENED (1) — The request begins
HEADERS_RECEIVED (2) — The HTTP headers received
LOADING (3) — Response is loading
DONE (4) — The request is completed

We can track the request state by using onreadystatechange event:

xhr.onreadystatechange = function () {
    if(xhr.readyState == 1) {
        console.log('Request started.');
    }

    if(xhr.readyState == 2) {
        console.log('Headers received.');
    }

    if (xhr.readyState == 3) {
        console.log('Data loading..!');
    }
    if (xhr.readyState == 4) {
        console.log('Request ended.');
    }
};

Aborting Request

We can easily abort an XHR request anytime by calling the abort() method on the xhr object:

xhr.abort(); // cancel request

Synchronous Requests

By default, XHR makes asynchronous requests which is good for performance. But if you want to make an explicit synchronous request, just pass false as 3rd argument to open() method. It will pause the JavaScript execution at send() and resume when the response is available:

xhr.open('GET', 'https://api.jsonbin.io/b/5d5076e01ec3937ed4d05eab/1', false);

Be careful! Chrome display the following warning for synchronous XHR request: [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

HTTP Headers

XMLHttpRequest allows us to set request headers as well as read response headers. We can set the request Content-Type & Accept headers by calling setRequestHeader() method on the xhr object:

// set request headers
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Accept', '*/*'); // accept all

Similarly if you want to read the response headers (except Set-Cookie), call getResponseHeader() on the xhr object:

// read response headers
xhr.getResponseHeader('Content-Type');
xhr.getResponseHeader('Cache-Control');

Want to get response headers at once? Use getAllResponseHeaders() instead:

xhr.getAllResponseHeaders();

XHR POST Request

The XMLHttpRequest POST request to submit a form data can be sent in two ways:

Using only Ajax
Using FormData API

The first approach is good enough unless you want to upload a file and need multipart/form-data encoding. Here is how we can make a POST request with URL encoded form data:

const xhr = new XMLHttpRequest();

// configure a `POST` request
xhr.open('POST', '/login');

// prepare form data
let params = 'username=attacomsian&password=123456';

// set `Content-Type` header
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// pass `params` to `send()` method
xhr.send(params);

// listen for `load` event
xhr.onload = () => {
   console.log(xhr.responseText);
}

Want to make a JSON POST request? Make sure you convert the JSON data into a string using JSON.stringify() and set the Content-Type header to application/json:

const xhr = new XMLHttpRequest();

// configure a `POST` request
xhr.open('POST', '/login');

// create a JSON object
const json = {
    username: 'attacomsian',
    password: '123456'
};

// set `Content-Type` header
xhr.setRequestHeader('Content-Type', 'application/json');

// pass `params` to `send()` method
xhr.send(JSON.stringify(params));

// listen for `load` event
xhr.onload = () => {
   console.log(xhr.responseText);
}

Cross-Origin Requests & Cookies

XMLHttpRequest can send cross-origin requests, but it is subjected to special security measures. To request a resource from a different server, the server must explicitly support this using CORS (Cross-Origin Resource Sharing).

Just like Fetch API, XHR does not send cookies and HTTP-authorization to another origin. To send cookies, you can use withCredentials property of the xhr object:

xhr.withCredentials = true;

XHR vs jQuery

jQuery wrapper methods like $.ajax() uses XHR under the hood and provides a higher-level of abstraction to make developers life easy. Using jQuery, we can translate the above code into just a few lines:

$.ajax('https://jsonplaceholder.typicode.com/users')
    .done(data => {
        console.log(data);
    }).fail(err => {
        console.error('Error:', err);
    });

XHR vs Fetch API

The Fetch API is a promise-based modern alternative to XHR. It is clean, easier to understand, and massively used in PWA Service Workers.

The XHR example above can be converted to a much simpler fetch()-based code that even automatically parses the returned JSON:

fetch('https://jsonplaceholder.typicode.com/users')
    .then(res => res.json())
    .then(json => console.log(json))
    .catch(err => console.error('Error:', err));

✌️ I write about modern JavaScript, Node.js, Spring Boot, and all things web development. Subscribe to my newsletter to get web development tutorials & protips every week.

Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV.

Introduction to JavaScript Regular Expressions

Atta — Fri, 09 Aug 2019 11:14:32 +0000

This post was originally published on attacomsian.com/blog.

A regular expression (also called regex or regexp) is a sequence of characters that defines a search pattern. These search patterns are usually used for text search, text search and replace, data extraction, and input validation operations.

Just like other programming languages, JavaScript also supports regular expressions to perform pattern-matching and search-and-replace functions on strings. JavaScript treats regular expression as an object with predefined properties and methods.

Syntax

A regular expression can consist of one or more metacharacters and literal characters.

/pattern/modifiers;

For example, /javascript/i is a regular expression where javascript is a search pattern and i is a modifier.

Creating a Regular Expression

In JavaScript, you can create a regular expression in two ways: using a regular expression literal or calling the constructor of RegExp to initialize a new object.

var re1 = /java+script/g;
var re2 = new RegExp('java+script', 'g');

In literal form, regular expressions are compiled when the script is loaded. If the pattern remains constant, regular expression literals are better in terms of performance.

On the other hand, regular expressions created using constructor are compiled at runtime and should only be used when you are sure the pattern is dynamic.

Testing a Regular Expression

You can use test() method of RegExp object to quickly test a regular expression. This method performs a search for a match between a regular expression and a specified string. It returns true if a match is found, otherwise false.

var re = /java+script/gi;
re.test('javascript'); // true
re.test('JavaScript is a client side programming language'); // true
re.test('java'); // false

Another way to test a regular expression is using exec() method of RegExp object. It runs a search for a match in the target string and returns an array if found, otherwise null.

/^The/.exec('The Apple')
// ["The", index: 0, input: "The Apple", groups: undefined]

Regular Expression Modifiers

Modifiers (also called flags) are special characters that can be used to perform case-insensitive more advanced searches.

i performs case-insensitive matching
g performs a global match (does not stop after finding the first match and finds all possible matches)
m performs multiline matching
u enables unicode characters matching (introduced in ES6)
s (also called "dotAll") allows . to match newlines (introduced in ES9)

Flags can be combined to perform sophisticated matching operations:

var re1 = /java+script/gi;
var re2 = new RegExp('java+script', 'gi');

Regular Expression Patterns

A regular expression pattern consists of either simple characters such as /javascript/ or a combination of simple and special characters such as /java*script/. Simple characters are used for direct match. For example, the simple pattern /bcd/ matches characters combinations in strings only when exactly the characters 'bcd' appear together and in exact same order.

/bcd/g.test('Who is this bcd?') // exact match substring bcd

Special characters are used to match a broad range of values than literal strings. For example, to match a single 'a' followed by one or more 'b's followed by 'd', we can use the pattern /ab+d/. The + after 'b' means "1 or more occurrences of the previous item."

/ab+d/g.test('aabbbdccbbbd') // match substring abbbd

The following tables provide a complete list of special characters along with examples that can be used in regular expressions:

Assertions

Assertions show that a match is possible in some way. Assertions include look-ahead, look-behind, and conditional expressions.

The ? character can also be used as a quantifier.

Characters	Example	Description
`x(?=y)`	`/Atta(?=shah)/`	Look-ahead assertion. Matches `x` only if it is followed by `y`.
`x(?!y)`	`/\d+(?!\.)/`	Negative look-ahead assertion. Matches `x` only if it is NOT followed by `y`.
`(?<=y)x`	`/(?<=shah)Atta/`	Look-behind assertion. Matches `x` only if it is preceded by `y`.
`(?<!y)x`	`/(?<!-)\d+/`	Negative look-behind assertion. Matches `x` only if it is NOT preceded by `y`.

In assertions, only the x is a part of the match. For example, /Europe+(?=Germany|France)/ matches "Europe" only if it is followed by "Germany" or "France". However, neither "Germany" not "France" is part of the match results.

/Europe+(?=Germany|France)/.test('EuropeGermany') // matches "EuropeGermany"
/(?<!-)\d+/.test('45.99') // matches "45"

Boundaries

Boundaries indicate the starts and ends of lines and words.

Characters	Example	Description
`^`	`/^An/`	Matches the start of input
`$`	`/App$/`	Matches the end of input
`\b`	`/un\b/`	Matches a word boundary
`\B`	`/\Bon/`	Matches a non-word boundary

/^An/.test('An Apple') // matches "An"
/App$/.test('Mobile App') // matches "App" 
/un\b/.test('Sun') // matches "un"
/\Bon/.test('Moon') // matches "on"

Groups and Ranges

Groups and ranges are useful to find a range of characters.

(x|y) matches either x or y. For example, /(green|red)/ matches "red" in "red bull".
[abcd] matches any one of the enclosed characters. Equivalent to [a-d].
[^abcd] matches none of the enclosed characters. Equivalent to [^a-d].
[0-9] matches any one of the enclosed characters (any digit).
[^0-9] matches none of the enclosed characters (any non-digit).

/[a-z]/.exec('a2') // matches "a"
/[0-9]/.exec('a2') // matches "2"
/[a-z0-9]/.exec('$a2') // matches "a"

Character Classes

Character Classes (also called Metacharacters) are characters with special meaning to distinguish kinds of characters. For example, differentiating between letters and digits.

Characters	Example	Description
`.`	`/.s/`	Matches any single character, except newline or line terminators
`\w`	`/\w/`	Matches any alphanumeric character including underscore. Equivalent to `[A-Za-z0-9_]`.
`\W`	`/\W/`	Matches any non-alphanumeric character. Equivalent to `[^A-Za-z0-9_]`.
`\d`	`/\d/`	Matches any digit. Equivalent to `[0-9]`.
`\D`	`/\D/`	Matches any character that is not a digit. Equivalent to `[^0-9]`.
`\s`	`/\s/`	Matches a single whitespace character
`\S`	`/\S/`	Matches a single character other than whitespace
`\t`	`/\t/`	Matches a tab character
`\n`	`/\n/`	Matches a newline character
`\0`	`/\0/`	Matches a NUL character
`\uxxxx`	`/\uxxxx/`	Matches a unicode character

/.s/.test('yes') // matches "es"
/\d/.test('3D') // matches "3"
/\w/.test('$9.99') // matches "9"
/\W/.test('45%') // matches "%"

Quantifiers

Quantifiers define quantities and indicate numbers of characters or expressions to match.

Characters	Example	Description
`n+`	`/ab+/`	Matches any string that contains at least one `n`
`n*`	`/ab*/`	Matches any string that contains zero or more occurrences of `n`
`n?`	`/ab?/`	Matches any string that contains zero or one `n`
`n{x}`	`/a{2}/`	Matches exactly `x` occurrences of the preceding item `n`
`n{x,}`	`/a{2, }/`	Matches at least `x` occurrences of the preceding item `n`
`n{x,y}`	`/a{1,3}/`	Matches at least `x` and at most `y` occurrences of the preceding item `n`

/ab+/.test('abbcdab') // matches "abb"
/bb*/.test('abbcdab') // matches "bb"
/b{2,}/.test('abbcdab') // matches "bb"
/a{1,3}/.test('bbcdaaab') // matches "aaa"

Regular Expression Escaping

If you want to use any of the special characters as literals (like searching for a '+'), you need to escape them by putting a backslash in front of them. For instance, to search for 'a' followed by '+' followed by 'c', you'd use /a\+b/. The backslash "escapes" the '+', making it literal instead of special.

/\d\+\d/.test('2+2') // true
/\$\d/.test('$2.49') // true

Regular Expression Usage

In JavaScript, regular expressions are used with RegExp's object method exec() and test(), and with the match(), replace(), search(), and split() methods of String.

var str = "JavaScript is a client-side programming language";
str.search(/client/i)
//16 (the starting position of "client")
str.replace(/client/i, 'server')
//JavaScript is a server-side programming language
str.match(/client/i)
//["client", index: 16]
str.split(/\s/i)
//["JavaScript", "is", "a", "client-side", "programming", "language"]

Above are only a few examples of using regular expressions for search and replace operations. They are also used for input validations and data extractions in JavaScript:

// extract number from a string
'I paid $45.99'.match(/\d+\.*\d*/) //["45.99", index: 8]

// validate date in dd-mm-yyyy format
/(\d{2})-(\d{2})-(\d{2,4})/.test('23-12-89') // true

✌️ I write about modern JavaScript, Node.js, Spring Boot, and all things web development. Subscribe to my newsletter to get web development tutorials & protips every week.

Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV.

Introduction to JavaScript Arrow Functions

Atta — Wed, 31 Jul 2019 08:25:40 +0000

This post was originally published on attacomsian.com/blog.

Arrow functions, introduced in ES6/ECMAScript 2015, are a syntactically compact alternative to regular ES5 functions. They are undoubtedly one of the most loved features of ES6 and are widely used nowadays. Arrow functions introduced a new way to write concise functions.

Here is a function written in ES5 function syntax:

function absolute(num) {
    return Math.abs(num);
}

absolute(-9);   //9

Now, here is the same function written using ES6 arrow function syntax:

const absolute = (num) => {
    return Math.abs(num);
}

absolute(-9);   //9

If the function body contains just a single statement, we can even omit the brackets and write everything in one line:

const absolute = (num) => Math.abs(num);

Function Parameters

If there are no parameters, just add an empty parentheses before =>:

const pi = () => Math.PI;

You can even replace empty parentheses with _:

const pi = _ => Math.PI;

If you have one ore more parameters, just pass them in the parentheses:

const abs = (num) => Math.abs(num); // on parameter
const sum = (a, b) => a + b;    // two parameters

In case of only one parameter, you can remove the parentheses completely:

const abs = num => Math.abs(num);

Concise vs Block Body

An arrow function can have either a concise body or the block body. If the function contains only a single statement, you can use a concise body. In a concise body, only the expression is specified which implicitly returns a value (without using return keyword):

const multiply = (a, b) => a * b;

In a block body, you must use an explicit return statement:

const multiply = (a, b) => {
    return a * b;
};

Look at the curly braces. They are required in a block body to wrap statements:

const oddNumber = (num) => {
    if(num % 2 == 0) {
        return false;
    } else {
        return true;
    }
};

Object Literals

If you are returning an object literal using the concise body, it must be wrapped in parentheses to avoid it being treated as a block body:

const json = () => ({x: 2});

`this` Keyword

In regular function expressions, the this keyword is bound to different value based on the context in which the function is called:

A new object in case of a constructor.
undefined in strict mode function calls.
The parent object if the function is called as an object method.

For example, Here is a person object which has fullName() function:

const person = {
    firstName: 'Mike',
    lastName: 'Lilly',
    fullName: function () {
        return `${this.firstName} ${this.lastName}`;
    }
};

person.fullName(); // Mike Lilly

Calling fullName() method of person object returns the full name of the person.

However, an arrow function does not have its own this and is lexically bound. It essentially means that the this scope is inherited from the code that contains the arrow function. So while looking up for this which is not present in the current scope, the ES6 arrow function will use the value of this in the scope in which it was defined. That is why the call to fullName() will not work and will return an undefined value:

const person = {
    firstName: 'Mike',
    lastName: 'Lilly',
    fullName: () => {
        return `${this.firstName} ${this.lastName}`;
    }
};

person.fullName(); // undefined undefined

Become of this arrow functions are not suited to object methods. You should also not use them as constructors either to avoid errors.

DOM Event Handling

Arrow functions can be a problem while handling events. DOM event listeners set this to be the target element. Now, if you use arrow function for callbacks, the this keyword won't be bound to the target element, but rather bound to its parent scope.

const button = document.getElementsByTagName('button')
button.addEventListener('click', () => {
  this.classList.toggle('blur');
});

Now if you click the button, you will get a TypeError because this refers to window in this scope. If you need a dynamic context for callback function, a regular function expression is required:

const button = document.getElementsByTagName('button')
button.addEventListener('click', function() {
  this.classList.toggle('blur');
});

Conclusion

Arrow functions provide a new way of writing concise functions in ES6. They are shorter, have no binding of this keyword, implicitly return a value (when the concise body is used), and are widely used in modern codebases. Arrow functions are inappropriate as object methods, and cannot be used as constructors.

✌️ I write about modern JavaScript, Node.js, Spring Boot, and all things web development. Subscribe to my newsletter to get web development tutorials & protips every week.

Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV.

Photo by Nick Fewings on Unsplash

Getting DOM Elements using JavaScript

Atta — Thu, 25 Jul 2019 20:57:32 +0000

This post was originally published on attacomsian.com/blog.

The Document Object Model (DOM) is a programming interface for HTML and XML documents created by the browser once the document is loaded. A web page is essentially a document represented by the DOM as nodes and objects. It allows programs to manipulate the document's content, structure, and styles.

In this tutorial, we will learn how to use JavaScript to access different nodes (HTML elements) in the DOM. Let us start with the first method: getting element by ID.

Get Element By ID

The docuemnt's getElementById() method takes the element ID as input and returns an Element object representing the DOM element. Here is an example:

<div id="unicorn">🦄</div>

Now here is how we can get the above <div> element by using its ID:

const unicorn = document.getElementById('unicorn');

The ID is case-sensitive and unique across the entire HTML document. So this method always returns a single element. If no matching element is found, it returns null.

Note: Do not put the # sign before the ID string while calling getElementById() method. You will get null instead of the element, and then you might wonder for hours what went wrong.

Get Elements By Tag Name

The getElementsByTagName() method is used to access multiple elements. It takes the tag name as input and returns all of the DOM elements that match the tag name as HTMLCollection:

<p>🐱</p>
<p>🐰</p>
<p>🐯</p>
<p>🐧</p>

JavaScript code to access all <p> elements:

const animals = document.getElementsByTagName('p');

This method searches only one tag name at a time. But if you pass in * as the tag name, you will get all elements in the DOM:

const allNodes = document.getElementsByTagName('*');

Get Elements By Name

The getElementsByName() method is used to get a collection of elements by their name attribute, and returns a NodeList object:

<input type="text" name="email">
<input type="tel" name="phone">
<input type="date" name="dob">

Let us get all the elements with the name email:

const emails = document.getElementsByName('email');

Note: Unlike the id attribute, which must be unique, multiple HTML elements can have the same name attribute. That's why getElementsByName() returns a collection of nodes.

Get Elements By Class Name

Want to use class attribute to get a list of matching elements? You can use getElementsByClassName() method, just pass it a class name (without .) and it will return an HTMLCollection of all DOM elements that have the given class name:

<div class="bird owl">🦉</div>
<div class="bird">🐦</div>
<div class="bird eagle">🦅</div>
<div class="animal cat">🐱</div>

Let us get all the bird's:

const birds = document.getElementsByClassName('bird');

This method also accepts multiple class names separated by spaces. Let us get all elements that have both the bird and eagle classes:

const eagle = document.getElementsByClassName('bird eagle');

Query Selector

The querySelector() is one of the two modern JavaScript methods that allows you to get elements from DOM based on CSS selectors. Just pass in the CSS selector and you will get the first element that matches the specified selector. If no matches exist, it returns null. Here is an example:

const email = document.querySelector('#signup input[name="email"]');

Query Selector All

Want to select a list of elements that match the specified selectors? Use querySelectorAll() method instead. This method takes multiple CSS selectors as input and returns a NodeList - a list of DOM elements that match the given selectors. Let us select all elements with a class of either bird or animal from the above HTML markup:

const elems = document.querySelectorAll('.bird, .animal');
console.log(elems.length); // 4

Function Chaining

You can also chain multiple functions together to search elements within another element. You first need to select a single element using either getElementById() or querySelector(), and then chain another function to search within:

<form id="signup">
    <input type="text" name="email">
    <input type="tel" name="phone">
    <input type="date" name="date-of-birth">
</form>

Get all input elements, inside of an element that has the ID signup:

const inputs = document.getElementById('signup').getElementsByTagName('input');
// OR
const inputs = document.querySelector('#signup').querySelectorAll('input');

Traversing HTMLCollection and NodeList

Most of the methods we discussed above (except getElementById() and querySelector()) returns multiple elements as either an HTMLCollection or a NodeList.

The HTMLCollection is not an array but a generic collection of elements. So it is not possible to iterate over it with forEach() or map(). However, we can convert it to a real array and then iterate using Array.from() method:

const inputs = document.getElementById('signup').getElementsByTagName('input');
// iterate over HTMLCollection
Array.from(inputs).forEach(element => {
    console.log(element);
});

Although NodeList is also not an array, but it does provide forEach() method to iterate over the elements:

const inputs = document.querySelector('#signup').querySelectorAll('input');
//iterate over NodeList
inputs.forEach(element => {
    console.log(element);
});

Conclusion

That's all for getting DOM elements using JavaScript. We have learned so many different methods to access the DOM elements: using id attribute, HTML tag name, name attribute, class attribute and CSS selectors. We also discussed ways to iterate over the generic collection of elements returned by these methods.

✌️ I write about modern JavaScript, Node.js, Spring Boot, and all things web development. Subscribe to my newsletter to get web development tutorials & protips every week.

Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV.

Photo by Pankaj Patel on Unsplash.

Introduction to Service Workers in JavaScript

Atta — Thu, 18 Jul 2019 20:24:55 +0000

This post was originally published on attacomsian.com/blog.

Service workers are a core part of Progressive Web Apps that allow caching of resources and web push notifications, among other things, to create an effective offline experience. They act as a proxy between web applications, the browser, and the network, allowing developers to intercept and cache network requests and take appropriate action based on the availability of the network.

A service worker runs on a separate thread, so it is non-blocking. This also means that it does not have access to DOM and other APIs available in the main JavaScript thread like cookies, XHR, web storage APIs (local storage and session storage), etc. Since they are designed to be fully asynchronous, they heavily use promises to wait for responses of network requests.

Due to security concerns, service workers only run over HTTPS and cannot be used in private browsing mode. However, you do not need a secure connection while making location requests (good enough for testing).

Browser Support

The service worker is a relatively new API that is only supported by modern web browsers. Therefore, we first need to check if the API is supported by the browser:

if('serviceWorker' in navigator) {
    // Supported 😍
} else {
    // Not supported 😥
}

Service Worker Registration

Before we start caching the resources or intercepting network requests, we must install a service worker in the browser. Since a service worker is essentially a JavaScript file, it can be registered by specifying the path of the file. The file must be accessible over the network and should only contain service worker code.

You should wait until the page is loaded, then pass the service worker file path to navigator.serviceWorker.register() method:

window.addEventListener('load', () => {
    if ('serviceWorker' in navigator) {
        // register service worker
        navigator.serviceWorker.register('/sw-worker.js').then(
            () => {
                console.log('SW registration succesful 😍');
            },
            err => {
                console.error('SW registration failed 😠', err)
            });
    } else {
        // Not supported 😥
    }
});

You can run the above code every time a page loads without any trouble; the browser will decide if the service worker is already installed or not and handle it accordingly.

Service Worker Lifecycle

The registration lifecycle consists of three steps:

Download
Install
Activate

When a user first visits your website, the service worker file is immediately downloaded and installation is attempted. If the installation is successful, the service worker is activated. Any functionality that's inside the service worker file is not made available until the user visits another page or refresh the current page.

Browser Events

Once the service worker is installed and activated, it can start intercepting network requests and caching resources. This can be done by listening to events emitted by the browser inside the service worker file. The browser emits the following events:

install is emitted when the service worker is being installed.
activate is sent when the service worker has been successfully registered and installed. This event can be used to remove outdated cache resources before installing a new version.
fetch is emitted whenever the web page requests a network resource. It can be anything: a new HTML document, an image, a JSON API, a stylesheet or JavaScript file, whatever that is available on a remote location.
push is sent by the Push API when a new push notification is received. You can use this event to display a notification to the user.
sync is invoked when the browser detects network availability after the connection was lost.

Serving Cached Resources

We can listen to install event when the service worker is installing to cache specific resources that would be need to serve the page when we are out of network:

const CACHE_NAME = 'site-name-cache';

self.addEventListener('install', event => {
    event.waitUntil(
        caches
            .open(CACHE_NAME)
            .then(cache =>
                cache.addAll([
                    'favicon.ico',
                    'projects.json',
                    'style.css',
                    'index.js',
                    'https://fonts.googleapis.com/css?family=Open+Sans:400,700'
                ])
            )
    );
});

The above example code uses the Cache API to store the resources in a cache named site-name-cache.

The self is a read-only global property that is used by the service workers to get access to themselves.

Now let us listen for a fetch event to check if the requested resource was already stored in the cache, and return it back if found:

// ...
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            if (response) {
                //found cached resource
                return response;
            }
            return fetch(event.request);
        })
    );
});

We look for a cache entry for the resource identified by the request property, and if not found, we make a fetch request to get it. If you want to cache new requests too, you can do it by handling the response of the fetch request and then adding it to the cache, like below:

//...
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(response => {
            if (response) {
                //found cached resource
                return response;
            }

            // get resource and add it to cache
            return fetch(event.request)
                .then(response => {
                    // check if the response is valid
                    if (!response.ok) {
                        return response;
                    }

                    // clone the response
                    const newResponse = response.clone();

                    // add it to cache
                    caches.open(CACHE_NAME)
                        .then(cache =>
                            cache.put(event.request, newResponse)
                        );

                    // return response
                    return response;
                });
        })
    );
});

Service Worker Update

When the service worker is installed, it continues to run until it is removed by the user or updated. To update a service worker, all you need to do is upload a new version of the service worker file on the server. When the user visits your site, the browser will automatically detect the file changes (even just one byte is enough), and install the new version.

Just like the first time installation, the new service worker functionality will only be available when the user navigates to another page or refresh the current page.

On thing we can do is listen for activate event and remove the old cache resources. The following code does this by looping over all caches and deleting the cache that matches our cache name:

// ...
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(keys => {
            return Promise.all(
                keys.map(cache => {
                    if (cache === CACHE_NAME) {
                        return caches.delete(cache);
                    }
                })
            );
        })
    );
});

That's all for service workers introduction. If you want to learn more, check out ServiceWorker Cookbook — a collection of working, practical examples of using service workers in modern web sites.

✌️ I write about modern JavaScript, Node.js, Spring Boot, and all things web development. Subscribe to my newsletter to get web development tutorials & protips every week.

Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV.

A marketplace for buying and selling side-projects

Atta — Thu, 11 Jul 2019 19:29:56 +0000

Hey Dev.to community!

I just launched Whobal - a marketplace for buying and selling online businesses (side projects, saas apps, chrome extensions, etc.). It is a free platform for the founders to sell their businesses without paying any commission.

💡Seller?

List unlimited projects for sale
Receive offers from buyers (only verified)
Sell securely via Escrow.com (Escrow Pay is integrated)
No paywall for unlocking offers
Absolutely 0% commission on successful sale unlike Flippa or similar sites which charge 10% to 15% commission

You can sign up as a seller and add your projects here: https://whobal.com/signup

💰Buyer?

Join our buyers network for free
Get new businesses via email when they are listed for sale
24 Hours early access to incredible businesses (curated by our team)
Contact seller to ask a question or simple make an offer
Buy securely via Escrow.com
No commission / broker fees

👉 What's next?

Listing verification
Google Analytics integration for traffic stats
Stripe integration for revenue stats

✍️ Feedback?

I'd appreciate any feedback from the community, specifically on the landing page copy, and what you like or dislike about the platform.

Thank you so much 💖

Introduction to JavaScript Fetch API

Atta — Wed, 03 Jul 2019 15:34:10 +0000

This post was originally published on attacomsian.com/blog.

The Fetch API is a promise-based JavaScript API for making asynchronous HTTP requests in the browser similar to XMLHttpRequest (XHR). Unlike XHR, it is a simple and clean API that uses promises to provides a more powerful and flexible feature set to fetch resources from the server.

Fetch is pretty much standardized now and is supported by all modern browsers except IE. If you need to support all browsers including IE, just add a polyfill released by GitHub to your project.

API Usage

Using Fetch API is really simple. Just pass the URL, the path to the resource you want to fetch, to fetch() method:

fetch('/js/users.json')
    .then(response => {
        // handle response data
    })
    .catch(err => {
        // handle errors
    });

We pass the path for the resource we want to retrieve as a parameter to fetch(). It returns a promise that passes the response to then() when it is fulfilled. The catch() method intercepts errors if the request fails to complete due to network failure or any other reason.

GET Request

By default, the Fetch API uses GET method for asynchronous requests. Let's use the Reqres REST API to retrieve a list of users using GET request:

fetch('https://reqres.in/api/users')
    .then(res => res.json())
    .then(res => {
        res.data.map(user => {
            console.log(`${user.id}: ${user.first_name} ${user.last_name}`);
        });
    });

The above request prints the following on the console:

1: George Bluth
2: Janet Weaver
3: Emma Wong

Calling fetch() method returns a promise. The response returned by the promise is a stream object which means that when we call json() method, it returns another promise. Call to json() method indicates that we are expecting a JSON response. If you are expecting an XML response, you should use text() method.

POST Request

Just like Axios, Fetch also allows to use any other HTTP method in the request: POST, PUT, DELETE, HEAD and OPTIONS. All you need to do is set the method and body parameters in the fetch() options:

const user = {
    first_name: 'John',
    last_name: 'Lilly',
    job_title: 'Software Engineer'
};

const options = {
    method: 'POST',
    body: JSON.stringify(user),
    headers: {
        'Content-Type': 'application/json'
    }
}

fetch('https://reqres.in/api/users', options)
    .then(res => res.json())
    .then(res => console.log(res));

The Reqres API sends us the body data back with an ID and created timestamp attached:

{  
   "first_name":"John",
   "last_name":"Lilly",
   "job_title":"Software Engineer",
   "id":"482",
   "createdAt":"2019-05-12T15:09:13.140Z"
}

DELETE Request

The DELETE request looks very similar to the POST request except body is not required:

const options = {
    method: 'DELETE',
    headers: {
        'Content-Type': 'application/json'
    }
}

fetch('https://reqres.in/api/users/2', options)
    .then(res => {
        if (res.ok) {
            return Promise.resolve('User deleted.');
        } else {
            return Promise.reject('An error occurred.');
        }
    })
    .then(res => console.log(res));

Error Handling

Since fetch() method returns a promise, error handling is easy. We can use the catch() method of the promise to intercept any error that is thrown during the execution of the request. However, no error will be thrown if the request hits the server and comes back, regardless of what response was returned by the server. The promise returned by the fetch() doesn't reject on HTTP errors even if the HTTP response code is 404 or 500.

Fortunately, you can use the ok property of response object to check whether the request was successful or not:

fetch('https://reqres.in/api/users/22') // 404 Error
    .then(res => {
        if (res.ok) {
            return res.json();
        } else {
            return Promise.reject(res.status);
        }
    })
    .then(res => console.log(res))
    .catch(err => console.log(`Error with message: ${err}`));

Response Object

The response object returned by the fetch() method contains the information about the request and the response of the asynchronous call including headers, status code, and status message:

fetch('https://reqres.in/api/users')
    .then(res => {
        console.log(res.headers.get('content-type'));
        console.log(res.headers.get('expires'));

        console.log(res.status);
        console.log(res.ok); // shorthand for `status` between 200 and 299 
        console.log(res.statusText);
        console.log(res.redirected);
        console.log(res.type);
        console.log(res.url);
    });

You can several options to access the response body of the Fetch API:

json() returns the body as a JSON object
text() returns the body as s string
blob() returns the body as a Blob object
formData() returns the body as a FormData object
arrayBuffer() returns the body as an arrayBuffer object

All these methods return a promise. Here is an example of text() method:

fetch('https://reqres.in/api/unknown/2')
    .then(res => res.text())
    .then(res => console.log(res));

The output of the above network call will be a JSON string:

'{"data":{"id":2,"name":"fuchsia rose","year":2001,"color":"#C74375","pantone_value":"17-2031"}}'

Fetch & Async/await

Since Fetch is a promise-based API, we can go one step further and use the latest ES2017 async/await syntax to make our code even simpler and synchronous-looking:

const fetchUsers = async () => {
    try {
        const res = await fetch('https://reqres.in/api/users');
        if (!res.ok) {
            throw new Error(res.status);
        }
        const data = await res.json();
        console.log(data);
    } catch (error) {
        console.log(error);
    }
}

fetchUsers();

Conclusion

That's all folks for using JavaScript Fetch API. It is a huge improvement over XMLHttpRequest with an easy-to-use interface and works great for fetching resources (even across the network). The Fetch API is supported by all modern browsers, so there is no need to use any polyfill unless you want to support IE.

✌️ I write about modern JavaScript, Node.js, Spring Boot, and all things web development. Subscribe to my newsletter to get web development tutorials & protips every week.

Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV.

Objects, Prototypes and Classes in JavaScript

Atta — Fri, 28 Jun 2019 20:37:27 +0000

This post was originally published on attacomsian.com/blog.

JavaScript is based on a simple object-oriented programming model with objects being a fundamental part of the language. Almost everything in JavaScript is an object. Unlike other object-oriented programming languages such as Java, JavaScript objects are very flexible.

Objects

An object is a collection of key-value pairs called properties. A property's key is a string or symbol (also known as property name) and value can be anything. There are multiple ways to create an object in JavaScript. The simplest and the most popular way is to use object literal syntax:

const user = {
    fisrtName: 'John',
    lastName: 'Doe',
    age: 29 
};

Objects can also be created using the new operator. The new keyword can be used either with in-built Object constructor function or user-defined constructor function:

// in-built constructor function
const user = new Object();
user.fisrtName = 'John';
user.lastName = 'Doe';
user.age = 29;

// user-defined constructor function
function User(fisrtName, lastName, age) {
    this.fisrtName = fisrtName;
    this.lastName = lastName;
    this.age = age;
};

const user = new User('John', 'Doe', 29);

A property's value can also be a function. Such a property is called a method:

const user = {
    fisrtName: 'John',
    lastName: 'Doe',
    age: 29,
    fullName: function () {
        return `${this.fisrtName} ${this.lastName}`;
    }
};

Properties values are accessible using both the dot (.) notation and the square bracket ([]) notation:

// dot notation
console.log(user.fullName()); // John Doe
console.log(user.age); // 29

// square bracket notation - does not work for methods
console.log(user['fisrtName']); // John

You can add new properties to an existing object by just assigning them values:

user.country = 'United States';

// method can also be added
user.ageRange = function() {
    return `${this.age - 5}-${this.age + 5}`;
}

To remove a property from the object, use the delete operator:

delete user.age;

To iterate over all keys of an object, we can use the for...in loop:

for (const key in user) {
    console.log(user[key]);
}

The object literal syntax can only be used to create a single object. For creating multiple objects of the same type, we must use object constructor function:

function Animal(name, icon) {
    this.name = name;
    this.icon = icon;
};

const rabbit = new Animal('Rabbit','🐰');
const cat = new Animal('Cat','🐱');

We cannot directly assign values to an object constructor to add new properties and method. New properties must be added inside the object constructor function:

Animal.color = 'Red'; // wrong way

// correct way
function Animal(name, icon, color) {
    // ...
    this.color = color;
};

Prototypes

All objects in JavaScript inherit properties and methods from another object called prototype. The prototype property allows us to add new properties and methods to existing object constructors. The new properties are shared among all instances of the specified type, rather than just by one instance of the object.

Let us add new properties to all objects of type Animal via prototype:

// add property
Animal.prototype.color = 'White';

// add method
Animal.prototype.meow = function() {
    if(this.name === 'Cat') {
        return `${this.name} can meow!`;
    } else {
        return `${this.name} cannot meow!`;
    }
}

Now the above cat and rabbit objects have the property color and method meow() because the prototype of Animal has them:

console.log(cat.color); // White
console.log(rabbit.meow()); // Rabbit cannot meow!
console.log(cat.meow()); // Cat can meow!

If you want to access the shared prototype property through an instance of a specific type, there is a __proto__ property available. Through this property, you can modify the existing prototype properties or even add new properties. Since the prototype property is shared among all instance, changes made to one instance's prototype property or method will be reflected in all instances:

cat.__proto__.color = 'Black';
cat.__proto__.eatMeat = true;

console.log(rabbit.color); // Black
console.log(rabbit.eatMeat); // true

Similar to objects, the prototype property or method can be removed using the delete operator:

delete cat.__proto__.eatMeat;
// OR
delete Animal.prototype.eatMeat;

console.log(rabbit.eatMeat); // undefined

As we can see above, the prototype property is a core part of object basics in JavaScript. Any changes made to this property affects all instances of that particular object type.

Classes

The concept of classes was introduced in JavaScript in ES6 (ECMA2015). In the object-oriented programming paradigm, a class is a blueprint for creating objects with properties and methods while encapsulating the implementation details from the user. However, the concept of true classes does not exist in JavaScript.

JavaScript classes are nothing but just syntactic sugar over existing prototype-based inheritance and constructor functions. Let us see an example:

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHi() {
        return `👋 ${this.name}!`;
    }
}

Now if we want to create a new instance of Person class, we must use the new operator:

const bill = new Person('Bill', 25);
console.log(bill.sayHi()); // 👋 Bill!

When we create an object of Person class, the class constructor does the following:

Create a new function named Person and copy all the properties declared inside the constructor into it (name and age).
Add all methods of the class, such as sayHi(), to Person.prototype property.

Afterward, when we call any method of the object, it is taken from the prototype property.

Summary

Objects are an important part of JavaScript language. Almost everything in JavaScript is an object.

An object is a collection of key-value properties. An object can be created with either object literal syntax or object constructor function syntax.
Whenever a new function is created in JavaScript, the JavaScript engine automatically attaches a prototype property to it. Changes made to this property are shared among all instances of a particular object type. It is a great way of adding new properties to existing object constructor functions.
ES6 brought classes to JavaScript, which are nothing but a new way of writing constructor functions by utilizing the prototype functionality.

If you want to learn more about objects, here is an in-depth MDN guide that explains how to use objects, properties, and methods.

✌️ I write about modern JavaScript, Node.js, Spring Boot, and all things web development. Subscribe to my newsletter to get web development tutorials & protips every week.

Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV.

DEV Community: Atta

How to implement Stripe revenue verification?

Are Ad Blockers blocking Google Analytics?

Introduction to JavaScript URL Object

Creating a URL

URL Properties

Updating a URL

Static Methods

URL Object Usage

Object.entries() and Object.values() Methods in JavaScript

Object.entries() Method

Iterating through an Object

Converting an Object to a Map

Object.values() Method

Converting an Object to Set

Introduction to XMLHttpRequest (XHR)

Basic XHR Request

xhr.open() Method

xhr.send() Method

XHR Events

Request Timeout

Response Type

Request States (xhr.readyState)

Aborting Request

Synchronous Requests

HTTP Headers

XHR POST Request

Cross-Origin Requests & Cookies

XHR vs jQuery

XHR vs Fetch API

Introduction to JavaScript Regular Expressions

Syntax

Creating a Regular Expression

Testing a Regular Expression

Regular Expression Modifiers

Regular Expression Patterns

Assertions

Boundaries

Groups and Ranges

Character Classes

Quantifiers

Regular Expression Escaping

Regular Expression Usage

Introduction to JavaScript Arrow Functions

Function Parameters

Concise vs Block Body

Object Literals

this Keyword

DOM Event Handling

Conclusion

Getting DOM Elements using JavaScript

Get Element By ID

Get Elements By Tag Name

Get Elements By Name

Get Elements By Class Name

Query Selector

Query Selector All

Function Chaining

Traversing HTMLCollection and NodeList

Conclusion

Introduction to Service Workers in JavaScript

Browser Support

Service Worker Registration

Service Worker Lifecycle

Browser Events

Serving Cached Resources

Service Worker Update

A marketplace for buying and selling side-projects

💡Seller?

💰Buyer?

👉 What's next?

✍️ Feedback?

Introduction to JavaScript Fetch API

API Usage

GET Request

POST Request

DELETE Request

Error Handling

Response Object

Fetch & Async/await

`Object.entries()` Method

`Object.values()` Method

`xhr.open()` Method

`xhr.send()` Method

Request States (`xhr.readyState`)

`this` Keyword