DEV Community: Ronak Jethwa

JavaScript | Sorting Algorithms

Ronak Jethwa — Sun, 29 Nov 2020 18:57:37 +0000

JavaScript | Sorting Algorithms

Bubble Sort

function bubbleSort(array) {
  // run time --> O(n^2)
  let length = array.length;

  for (let i = 0; i < length - 1; i++) {
    for (let j = 0; j < length - 1; j++) {
      if (array[j] > array[j + 1]) {
        let tmp = array[j + 1];
        array[j + 1] = array[j];
        array[j] = tmp;
      }
    }
  }
  return array;
}

Insertion Sort

function insertionSort(array) {
  // run time --> O(n^2)
  let length = array.length;
  for (let i = 1; i < length; i++) {
    let tmp = array[i];
    let currentIndex = i;
    while (currentIndex > 0 && array[currentIndex - 1] > tmp) {
      array[currentIndex] = array[currentIndex - 1];
      currentIndex--;
    }
    array[currentIndex] = tmp;
  }
  return array;
}

Selection Sort

function selectionSort(array) {
  // runtime -->  O(n^2)
  let startIdx = 0;
  let length = array.length;
  while (startIdx < length - 1) {
    let smallestIdx = startIdx;
    for (let i = startIdx + 1; i < length; i++) {
      if (array[smallestIdx] > array[i]) smallestIdx = i;
    }
    swap(startIdx, smallestIdx, array);
    startIdx++;
  }
  return array;
}

function swap(i, j, array) {
  let tmp = array[j];
  array[j] = array[i];
  array[i] = tmp;
}

Quick Sort

function quickSort(array) {
  let start = 0;
  let end = array.length - 1;
  helper(array, start, end);
  return array;
}

function helper(array, start, end) {
  if (start >= end) return;
  let pivot = start;
  let left = start + 1;
  let right = end;

  while (right >= left) {
    if (array[left] > array[pivot] && array[right] < array[pivot]) {
      swap(left, right, array);
    }
    if (array[left] <= array[pivot]) left++;
    if (array[right] >= array[pivot]) right--;
  }
  swap(pivot, right, array);
  let tmp = right - start - 1 < end - (right + 1);
  if (tmp) {
    helper(array, start, right - 1);
    helper(array, right + 1, end);
  } else {
    helper(array, right + 1, end);
    helper(array, start, right - 1);
  }
}

function swap(i, j, array) {
  let tmp = array[i];
  array[i] = array[j];
  array[j] = tmp;
}

CSS-Selectors Guide

Ronak Jethwa — Mon, 08 Jun 2020 03:39:42 +0000

CSS Selectors

I put together a guide for some super important and yet confusing CSS-Selectors. The list should help you clear the confusion between many of them, or simply use this guide as a 5-minutes review book to prep yourself before that interview.

Descendant Selector

A B 
/* selects any B elements that are inside of the element A */

Comma Combinator

A, B
/* selects all A and B elements */

Universal Selector

*
/* selects all elements */

Adjacent Sibling Selector

A + B
/* This selects all B elements that directly follow A. Elements that follow one another are called siblings. They're on the same level, or depth. */
/* div + a selects every a element that directly follows a div */

General Sibling Selector

A ~ B
/* You can select all siblings of an element that follow it. This is like the Adjacent Selector (A + B) except it gets all of the following elements instead of one. */
/* A ~ B selects all B that follow a A */

General vs Adjacent Sibling Selector: With the general sibling combinator, one or potentially multiple elements will be styled. With the adjacent sibling combinator, only one element will be styled.

Child Selector

A > B
/* A > B selects all B that are a direct children A */

First Child Pseudo-selector

:first-child
/* p:first-child selects all first child p elements. */

Only Child Pseudo-selector

:only-child
/* span:only-child selects the span elements that are the only child of some other element. */

Last Child Pseudo-selector

:last-child
/* span:last-child selects all last-child span elements. */

Nth Child Pseudo-selector

:nth-child(A)
/* :nth-child(8) selects every element that is the 8th child of another element. */

:nth-child(odd)
/* :nth-child(odd) selects every odd element */

:nth-child(even)
/* :nth-child(even) selects every even element */

Nth Last Child Selector

/* Selects the children from the bottom of the parent. This is like nth-child, but counting from the back! */
:nth-last-child(A)
/* :nth-last-child(2) selects all second-to-last child elements. */

First of Type Selector

:first-of-type
/* span:first-of-type selects the first span in any element. */

Nth of Type Selector

/* Selects a specific element based on its type and order in another element - or even or odd instances of that element. */
:nth-of-type(A)
/* div:nth-of-type(2) selects the second instance of a div. */

Nth-of-type Selector with Formula

/* The nth-of-type formula selects every nth element, starting the count at a specific instance of that element. */
:nth-of-type(An+B)
/* span:nth-of-type(6n+2) selects every 6th instance of a span, starting from (and including) the second instance. */

Only of Type Selector

/* Selects the only element of its type within another element. */
:only-of-type
/* p span:only-of-type selects a span within any p if it is the only span in there. */

Last of Type Selector

/* Select the last element of a specific type */
:last-of-type
/* div:last-of-type selects the last div in every element. */

Empty Selector

/* Select elements that don't have children */
:empty

Negation Pseudo-class

/* Select all elements that don't match the negation selector */
:not(X)
/* :not(.someClass) selects all elements that do not have class="someClass" */

Singleton In JavaScript

Ronak Jethwa — Sat, 30 May 2020 19:38:47 +0000

This post is dedicated to my very limited understanding on Singleton in JavaScript. Feel free to add more details in the comment below to educate me more about it, or if you think my current knowledge is wrong somewhere.

What is Singleton?
The Singleton Pattern limits the number of instances of a particular object to just one. This single instance is called the singleton.

Usage?
Singletons are useful in co-ordinating system-wide actions from a single central place of the code. An example could be a database connection pool. The pool manages the creation, destruction, and lifetime of all database connections for the entire application ensuring that no connections are 'lost'.

Singletons also reduce the need for global variables which is particularly important in JavaScript because it limits namespace pollution and associated risk of name collisions.

How to create one?
The Singleton object can be implemented as an immediate anonymous function.

Example Below:

var Singleton = (function () {
  var instance;

  function createInstance() {
    var object = new Object("I am the instance");
    return object;
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();

function run() {
  var instance1 = Singleton.getInstance();
  var instance2 = Singleton.getInstance();

  alert("Same instance? " + Object.is(instance1, instance2));
}

run();

Feel free to chime in the comment section with more information about Singleton to help a fellow developer. :)

JavaScript Equality Checks

Ronak Jethwa — Fri, 29 May 2020 19:46:14 +0000

Some Fun Equality Checks In JavaScript

There are mainly 3 ways to check the value equality in JavaScript. You already know two of them. There is a fun third one, Object.is().

- Strict Equality: a === b (triple equals).
- Loose Equality: a == b (double equals).
- Same Value Equality: Object.is(a, b).

// Zero, look closely!
-0 == 0; // true
-0 === 0; // true
Object.is(-0,0); // false

// One, an obvious one!
-1 == 1; //false
-1 === 1; // false
Object.is(-1,1); // false

// NaN, look closely again!
NaN == NaN; // false
NaN === NaN; // false
Object.is(NaN,NaN); // true
Object.is(NaN, 0/0); // true

// String, one more obvious one!
'foo' == 'foo'; // true
'foo' === 'foo'; // true
Object.is('foo', 'foo'); // true

// Array
[] == []; // false
[] === []; // false 
Object.is([], []); // false

// Objects
var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo); // true
Object.is(foo, bar); // false

// One more, for better clarity
let banana = {};
let cherry = banana;
let chocolate = cherry;
cherry = {};

Object.is(banana, cherry); // false
Object.is(cherry, chocolate); // false
Object.is(chocolate, banana); // true

// Null
null == null; // true
null === null; // true
Object.is(null, null); // true

Quick Recap

This tells us Object.is() is way more superior check than === in JavaScript. It handles two special cases where === fails horribly.

// Special Cases
-0 === 0; // true
Object.is(0, -0); // false

NaN === NaN; // false
Object.is(NaN, NaN); // true

Additional: Implementation of `===` Function strictEquals

function strictEquals(a,b){
  // handle special cases, else return the right value!
  if (Object.is(a,NaN) || Object.is(b,NaN)) return false;
  if (Object.is(a,-0) && Object.is(b,0)) return true;
  if (Object.is(a,0) && Object.is(b,-0)) return true;
  return Object.is(a, b);
}

Ciao!

DOM Traversal

Ronak Jethwa — Sun, 24 May 2020 23:23:43 +0000

DOM Traversal is achieved through having the access to a certain node in the DOM, and then traversing through the DOM using its related nodes.

This post shows few things which will help in traversing the DOM with plain old JavaScript.

Descendant & Ancestor Elements

First thing first, what are descendant and ancestor elements?
DOM is built with nested nodes as a tree structure. One node could have multiple nodes in it, and those nodes can have their own child/children. The parent node is an ancestor element with its child elements being called descendent elements.

Keep in mind, all operations on the DOM start with the document object. That’s the main “entry point” to DOM.

For example, take a look at this.

<main id="accordion">
  <section class="item1">
    <a>
      <h2 id="id1">Item 1</h2>
    </a>
    <p class="generic">
      What is Lorem Ipsum? 
    </p>
  </section>
  <section class="item2">
    <a>
       <h2 id="id2">Item 2</h2>
    </a>
    <p class="generic">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci a scelerisque purus semper eget duis.
    </p>
  </section>
</main>

Here, main is the ancestor, and section are its immediate children. section itself has two more immediate children, and so on.

1. Searching DOM

There are 6 main methods that we can use to search an element in the DOM. The table below will make things clear.

Method	Searches with
querySelector	CSS Class
querySelectorAll	CSS Class
getElementById	id
getElementsByName	name
getElementsByTagName	tag
getElementsByClassName	class

Use the one that suits the best. The most popular methods to search the DOM are querySelector, querySelectorAll, getElementById and getElementsByClassName.

Performance Note
getElementById and getElementsByClassName are more than twice as fast as querySelector and querySelectorAll.

getElementById can run about 15 million operations a second, compared to just 7 million per second for querySelector in the latest version of Chrome. That means querySelector is not slow by any means, it's just not as fast as getElementById or getElementsByClassName. :sip_on_coffee:
https://gomakethings.com/javascript-selector-performance/

2. Finding Parent Node

let parent = document.getElementById('id2').parentNode;
// returns section with class item-2

let grandParent = parent.parentNode;
// returns parent of section with class item-2, which is main

There is one more property called parentElement which does the same thing. The only difference comes when a node's parentNode is not an HTML element. If so, parentElement will return null.

document.documentElement.parentNode; // the document node
document.documentElement.parentElement; // null

3. Finding All Immediate Children

document.querySelectorAll('#accordion > *');
// returns both section elements

document.querySelector('#accordion').children;
// another way to grab all immediate children

Along with .children, there is one more property .childNodes which can be used to get all the children of a parent.

There is one major difference though.
.children returns only children elements, where .childNodes return all the children consisting of element nodes, text nodes and comment nodes. Most of the time, you want to use .children because generally you don't want to loop over text or comment nodes in your DOM manipulation.

let element = document.createElement("div");
element.textContent = "foo";

element.childNodes.length === 1; // Contains a text node child.
element.children.length === 0;

For clarity, just remember that .children returns all children which are only elements and .childNodes returns all children which could be element nodes or text nodes or comment nodes.

One more caveat with using .childNodes is that it treats line-breaks and white-space as text nodes. Chose your weapon wisely!

4. Finding Special Children

firstChild and lastChild of a parent are considered the special children of that element.

Using our first HTML block as an example,

document.querySelector('#accordion').firstChild;
// returns the first child node

document.querySelector('#accordion').lastChild;
// returns the last child node

Again, note that the firstChild and lastChild will give you back the first or last node. They will also treat line-break and white-space as text nodes. Depending on how your HTML is written, it could either give back the text-node or element-node. To avoid this, JavaScript provides two more properties called firstElementChild and lastElementChild. These two always return the first and last HTML elements only. Take the clue from parentNode vs parentElement

document.querySelector('#accordion').firstElementChild;
// returns the first child element

document.querySelector('#accordion').lastElementChild;
// returns the last child element

5. Finding Siblings

When we have the access to a given node, we can access its sibling nodes using the nextSibling and previousSibling properties.

As mentioned with parent and children selectors, there are again four ways to achieve this.

.nextSibling
.nextElementSibling
.previousSibling
.previousElementSibling

Taking a clue from the examples above, nextElementSibling will always return an element whereas nextSibling can return any kind of node. Same logic applies to previousElementSibling and previousSibling.

document.querySelector('#accordion').firstElementChild.nextElementSibling;
// returns the next sibling of the first child element

document.querySelector('#accordion').lastElementChild.previousElementSibling;
// returns the previous sibling of the last child element

If we get to the last element of the parent node, using the nextSibling will return null because there are no more siblings after the last child node.

If we get to the first element of the parent node, using the previousSibling will return null because there are no more siblings prior the first child node.

6. Finding NodeType

By this time, you are aware of the differences between .parentNode vs .parentElement, .children vs .childNodes, .firstChild vs .firstElementChild and so on.

You might be asking, is there a way we can check what type of node we are getting back when we are dealing with the code written by somebody else? YES, we can!

You can check the type of the node(text vs element vs comment) with a special property called nodeType. The read-only Node.nodeType property is an integer that identifies what kind of node we are traversing or fetching.

These read-only integer values are constant, which helps you identify what kind of node you are getting. There are eight different values, but you mostly need all the major ones, which are listed below.

NodeType	Value	Description
Node.ELEMENT_NODE	1	Element Node.
Node.ATTRIBUTE_NODE	2	Attribute Node
Node.TEXT_NODE	3	Text Node.
Node.COMMENT_NODE	8	Comment Node
Node.DOCUMENT_NODE	9	Document Node

How do we use it though? Check out the example below.

let el = document.querySelector('#accordion').lastElementChild.previousElementSibling;
alert(el.nodeType === Node.ELEMENT_NODE); // alerts true
alert(el.nodeType === Node.COMMENT_NODE); // alerts false

Use the Node.nodeType check while looping over the nodes object, to make sure you are manipulating the right kind of node.

7. Finding Content

We learned how to traverse to the parent element, grab children elements, find siblings or special children. But how do we manipulate the content inside a given node?

We have 3 special properties for it.

innerHTML
innerText
textContent

Let's breakdown the subtle differences while choosing one over another.

innerHTML
It returns string inside our element and the HTML (or XML) markup contained within our string, including any spacing, line breaks, etc. Check out the below code,

let el = document.querySelector('#accordion').lastElementChild.previousElementSibling.innerHTML;
alert(el);

// will return
// "
//   <a>
//     <h2 id=\"id1\">Item 1</h2>
//   </a>
//   <p class=\"generic\">
//     What is Lorem Ipsum? 
//   </p>
// "

Use innerHTML when you want to grab the entire HTML markup exactly how it is in the code with the proper formatting.

One caveat is if your markup includes special character inside, innerHTML will return the equivalent HTML entities for those characters. Be aware of that.

innerText
It returns the string inside our Node. It's similar to you highlighting the content on your screen and copying it.

let el = document.querySelector('#accordion').lastElementChild.previousElementSibling.innerText;
alert(el);

// returns
// "Item 1
// What is Lorem Ipsum?"

It does not preserve any formatting while returning. Although, it's aware of all the styling and CSS applied to that node. Think of it returning a plain text without any formatting.

textContent
It returns the content inside our Node including any style elements if applied.

let el = document.querySelector('#accordion').lastElementChild.previousElementSibling.textContent;
alert(el);

// returns
// "
//   Item 1
//   What is Lorem Ipsum? 
// "

textContent is aware of formatting like spacing, line breaks and styles and will return those as well. Use textContent when you want to see what's in the element with the stylings applied to it.

This makes textContent very similar to innerText with only one difference. innerText is not aware of the appearance of the rendered text (line-breaks & spaces) while textContent is! innerText will not include text that is hidden by CSS, but textContent will.

You can also set or update the content with one of these three properties to update the existing content on the page.

Bonus Tip
Be aware while using innerHTML to set or update your content. Every time innerHTML is set, the new HTML has to be parsed, a DOM has to be constructed, and inserted into the document object. This turns out to be a very performance heavy process and takes time to finish.

That's all for now in DOM Traversal. Hope this helps you navigating your next DOM.

Happy DOMing!

Max Your Flex

Ronak Jethwa — Wed, 06 May 2020 20:41:53 +0000

Max Your Flex

Note that this is only the compilation of the flex-styles majorly used during flex development. Use this for the 5-minute recap of Flexbox before your interview days. This is not meant to be a complete documentation. Refer the following links for the complete documentation.

Official MDN Resource for Flexbox & CSS-Tricks Resource for Flexbox

How Flex Works

Image Courtesy: css-tricks.com

Properties For Parent (flex-container)

display

.container {
  display: flex; /* or inline-flex */
}

flex-direction

Check out the above architecture image to get more clarity.

.container {
  flex-direction: row | row-reverse | column column-reverse;
}

flex-wrap

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow

This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. The default value is row nowrap.

.container {
  flex-flow: column nowrap;
}

justify-content

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

align-items

You can override the align-items behavior for individual flex items by applying the align-self property to the particular item.

.container {
  align-items: stretch | flex-start | flex-end | center;
}

align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}

Properties For Children (flex-items)

order

The order property controls the order in which they appear in the flex container. Flex items with higher order values set on them will appear later in the display order than items with lower order values.

.item {
  order: 5; /* default is 0 */
}

flex-grow

This defines the ability for a flex item to grow if necessary.

.item {
  flex-grow: 4; /* default 0 */
}

flex-shrink

This defines the ability for a flex item to shrink if necessary.

.item {
  flex-shrink: 3; /* default 1 */
}

align-self

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

float, clear and vertical-align have no effect on a flex item.

Flex With Fun?

Check out Flexbox Defense & Flexbox Froggy games that helps you learn flex.

DEV Community: Ronak Jethwa

JavaScript | Sorting Algorithms

JavaScript | Sorting Algorithms

Bubble Sort

Insertion Sort

Selection Sort

Quick Sort

CSS-Selectors Guide

CSS Selectors

Descendant Selector

Comma Combinator

Universal Selector

Adjacent Sibling Selector

General Sibling Selector

Child Selector

First Child Pseudo-selector

Only Child Pseudo-selector

Last Child Pseudo-selector

Nth Child Pseudo-selector

Nth Last Child Selector

First of Type Selector

Nth of Type Selector

Nth-of-type Selector with Formula

Only of Type Selector

Last of Type Selector

Empty Selector

Negation Pseudo-class

Singleton In JavaScript

JavaScript Equality Checks

Some Fun Equality Checks In JavaScript

Quick Recap

Additional: Implementation of === Function strictEquals

DOM Traversal

Descendant & Ancestor Elements

1. Searching DOM

2. Finding Parent Node

3. Finding All Immediate Children

4. Finding Special Children

5. Finding Siblings

6. Finding NodeType

7. Finding Content

Max Your Flex

Max Your Flex

How Flex Works

Properties For Parent (flex-container)

display

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

Properties For Children (flex-items)

order

flex-grow

flex-shrink

align-self

Flex With Fun?

Additional: Implementation of `===` Function strictEquals