Image for post
Image for post

Numeric Separators give us the ability to separate thousands with an underscore (_) in numeric literals.

How it’s useful❓

It makes our code more informative and readable.

let series = 10000;

Numeric Separators in javascript, enables underscore as a separator in numeric literals to improve readability.

Example:

let series = 1_00_00;

You can also use this for binary, octal, and hex numbers.

Binary Number: πŸ‘»

let series1 = 0b1010_0101_1001;
console.log(series1); // 2649

Octal Number: πŸ‘»

let series2 = 0o2_3_5_7;
console.log(series2); // 1263

Hex Number: πŸ‘»

let series3 = 0xA_B_C_D_E;
console.log(series3); // 703710

Few Limitation πŸ€¦β€β™€οΈ

Below limitation snippet will throw SyntaxError


Image for post
Image for post

String.prototype.replaceAll() replaces all occurrence of a string with another string value.

Syntax:

const newStr = str.replaceAll(regexp|substr, newSubstr|function)

There are few ways to replace all occurrence of a string:

1. RegEx πŸ™…β€β™€οΈ

const info = "Hi All, suprabha's account is @suprabha";
const newInfo = info.replace(/suprabha/g, "suprabha supi");
console.log(newInfo);
// "Hi All, suprabhasupi's account is @suprabhasupi"

2. split and join δ·– ⊞

Using split and join, replace all the occurrence of a string.

const info = "Hi All, suprabha's account is @suprabha";
const newInfo = info.split('suprabha').join('suprabhasupi');
console.log(newInfo);
// "Hi All, suprabhasupi's account is @suprabhasupi"

Till now, you were able to do full replacement with above two…


Image for post
Image for post

CSS border property is used to set the border of an HTML element.

The border property is shorthand for three sub-properties that define the style, color, and width of a border.

Example:

border: 1px solid red;

Syntax:

border: border-width border-style color;

border-width πŸ‘»

Sets the thickness of the border. Defaults to medium if absent.

border-width: thin | medium | thick;

OR

border-width: border-top-width border-right-width border-bottom-width border-right-width;
border-width: 0 4px 8px 12px;

border-style πŸ™…β€β™€οΈ

Sets the style of the border. Defaults to none if absent.

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

color 🎨

…


Image for post
Image for post

Selectors are used to selecting elements in an HTML document, in order to attach (style) properties to them.

The most used CSS selectors are by class and by id, nevertheless, there are many selectors which you can use easily and fairly to add styles into a set of elements.

A. Combinators

B. Attribute Selector

C. Pseudo Selector

D. Pseudo Classes

In this article, I will be talking about different selectors beyond class and id and will be covering Combinators and Attribute Selector.

We will be using the below HTML snippet for all the Attribute Selector:

<div> <p>First Paragraph</p> <p>Second Paragraph</p>…


Image for post
Image for post

Centering an element horizontally and vertically is a very common interview question. Suppose there is a parent element surrounding the child element:

<div class="parent">
<div class="child">hello world</div>
</div>

Different ways to align an element to the center of the page:

1️. Using Flex ⭐️

Flexbox control how items are placed and how empty space is distributed in ways that would have required either magic numbers in CSS for a specific number of elements.

Depending on the flex-direction, we might use justify-content or align-items to adjust as needed.

.parent {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

2️. Using Grid ⭐️

CSS…


Image for post
Image for post

The splice method changes the content of the array in place and can be used to add or remove items from the array.

const arr = ["🌼", "🌴", "🌹", "🌡", "πŸ„"];
arr.splice(2,3); // ["🌹", "🌡", "πŸ„"]
console.log(myArr); // ["🌼", "🌴"]

Syntax:

let arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

start specifies index at which to start changing the array.

If start is greater than the length of the array, then start will be set to the length of the array. i.e no element will be deleted.

If start is negative, it will begin that many elements from the end of…


Image for post
Image for post

The slice method returns a new array with a copied slice from the original array.

Syntax:

arr.slice([start[, end]])

start refers Zero-based index. If start is undefined, slice starts from the index 0.

In end, slice extracts up to but not including end.

Its too theoretically right 😜, lets understand by few examples.

Using two arguments βœ…:

const arr = ['🍏', 'πŸ“', '🌽', 'πŸ‡', 'πŸ’'];
const newArr = arr.slice(2,4);
console.log(newArr); // ["🌽", "πŸ‡"]

Without arguments, you get a copy of the full array βœ…

const arr = ['🍏', 'πŸ“', '🌽', 'πŸ‡', 'πŸ’'];
const newArr = arr.slice();
console.log(newArr); // ["🍏", "πŸ“", "🌽", "πŸ‡", "πŸ’"]

Using one argument, you get a copy from the specified index to the end of the array βœ…

const arr = ['🍏', 'πŸ“', '🌽', 'πŸ‡', 'πŸ’']; const newArr = arr.slice(3); console.log(newArr)…


Image for post
Image for post

Deployed my personal blog using Route 53 and Github action .

Lets take this process into two step:

1️. Github Action 🧨

This GitHub Action will run gatsby build at the root of your repository and deploy it to GitHub Pages for you!

Create .github folder in root of the project and under .github folder create workflows folder. Then add the below snippet into main.yml

.github/workflows/main.yml:

name: Gatsby Publishon:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: enriikke/gatsby-gh-pages-action@v2
with:
access-token: ${{ secrets.PERSONAL_BLOG }}
deploy-branch: gh-pages

Configure the access-token πŸŽ—


Image for post
Image for post

How can you deploy Gatsby on Netlify? πŸ€”


Image for post
Image for post

What is Gatsby? πŸ€”

Gatsby is a React based, GraphQL powered, static site generator.

It uses powerful pre-configuration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching.

Contents πŸ”₯

What makes Gatsby special? 😲

Suprabha Supi

Frontend Developer sharing JS, HTML, CSS, GoLangπŸ”₯ Find all on blog.suprabha.meπŸ’›

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store