DEV Community: Anas Nabil

Caesar Cipher and JavaScript

Anas Nabil — Mon, 22 Aug 2022 22:09:00 +0000

What is Caesar Cipher?

In cryptography, a Caesar cipher, also known as Caesar's cipher, the shift cipher, Caesar's code or Caesar shift, is one of the simplest and most widely known encryption techniques. It is a type of substitution cipher in which each letter in the plaintext is replaced by a letter some fixed number of positions down the alphabet. For example, with a left shift of 3, D would be replaced by A, E would become B, and so on. The method is named after Julius Caesar, who used it in his private correspondence.

Code

const caesarCipher = (str, shift) => {
  const letters = 'abcdefghijklmnopqrstuvwxyz'.split('');
  let res = '';

  for (let i = 0; i < str.length; i++) {
    const char = str[i];
    const ind = letters.indexOf(char);

    if (ind === -1) {
      res += char;
      continue;
    }

    const encodedIndex = (ind + shift) % 26;
    res += letters[encodedIndex];
  }

  return res;
};

Mocha Test

mocha.setup('bdd');
const { assert } = chai;

describe('caesarCipher()', () => {
  it('Shifting Letters Successfully', () => {
    assert.equal(caesarCipher('c', -2), 'a');
    assert.equal(caesarCipher('abcd', 1), 'bcde');
    assert.equal(caesarCipher('yz', 1), 'za');
    assert.equal(caesarCipher('abcd', 100), 'wxyz');
  });
  it("Doesn't shift non-alphabetic Characters", () => {
    assert.equal(caesarCipher('gurer ner 9 qbtf!', 13), 'there are 9 dogs!');
  });
});

mocha.run();

Importing and Exporting Modules in JavaScript

Anas Nabil — Tue, 16 Aug 2022 23:14:00 +0000

Name Export

export const name = 'value'

Name Import

import { name } from '...'

Default Export

export default 'value'

Default Import

import anyName from '...'

Rename Export

export { name as newName }

Name Import

import { newName } from '...'

List Export and Renaming

export {
    name1,
    name2 as newName2
}

List Import and Renaming

import {
    name1 as newName1,
    newName2
} from '...'

Binary Search Algorithm

Anas Nabil — Sat, 13 Aug 2022 19:59:00 +0000

Definition

Binary Search is a searching algorithm used in a sorted array by repeatedly dividing the search interval in half. The idea of binary search is to use the information that the array is sorted and reduce the time complexity to O(Log n).

Comparsion

Binary Search Big O Notation is O(log n), Compared to Linear Search which Has Time Complexity of O(n).

Binary Search is able to search sorted arrays much faster than Linear Search.

Real Life Example

I'm thinking of a number from 1 to 50, The answer is 1

Linear Search

Number = 50 ? No
Number = 49 ? No
...
Number = 2 ? No
Number = 1 ? Yes!

It takes 50 Guesses at Worst Case!

Binary Search

Number = 25 ? No, Less
Number = 12 ? No, Less
Number = 6 ? No, Less
Number = 3 ? No, Less
Number = 2 ? No, Less
Number = 1 ? Yes!

It takes 6 Guesses at Worst Case!

Conclusion

Assuming 1,000,000 Numbers!
Linear Search would result in a 1,000,000 Guesses (Worst Case)
Binary Search would result in a 20 Guesses (Worst Case)

Visualization

Binary Search

Linear Search

Coding

const binarySearch = (sortedArr, value) => {
  let left = 0;
  let right = sortedArr.length - 1;

  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    const midVal = sortedArr[mid];

    if (midVal === value) {
      return mid;
    } else if (midVal < value) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }

  return -1;
};

Hick's Law

Anas Nabil — Mon, 08 Aug 2022 15:52:00 +0000

Hick's Law Origins

Hick’s Law (or the Hick-Hyman Law) is named after a British and an American psychologist team of William Edmund Hick and Ray Hyman. In 1952, this pair set out to examine the relationship between the number of stimuli present and an individual’s reaction time to any given stimulus. As you would expect, the more stimuli to choose from, the longer it takes the user to make a decision on which one to interact with. Users bombarded with choices have to take time to interpret and decide, giving them work they don’t want.

Hick's Law Definition

The time it takes to make a decision increases with the number and complexity of choices.

Hick's Law Formula

RT = a + b log2 (n)

Where
"RT" = Reaction Time
"(n)" = Number of Choices
"a" & "b" = arbitrary measurable constants that depend on the task that is to be carried out and the conditions under which it will be carried out.

Summary Points

Reduce the number of choices to get a faster Decision.
Minimize choices when response times are critical to increase decision time.
Break complex tasks into smaller steps in order to decrease cognitive load.
Avoid overwhelming users by highlighting recommended options.
Use progressive onboarding to minimize cognitive load for new users.
Keep a balance between reducing complexity and oversimplifying.
Smaller steps makes people more Comfortable.
Use the highlighting to help users to avoid overloading and to make a choice quicker.

How to Google Like a Pro

Anas Nabil — Mon, 08 Aug 2022 10:39:00 +0000

Search for a specific site

Put "site:" in front of a site or domain.
Example: site:dev.to React Native Custom Hooks
Hint: Don’t put spaces between the symbol or word and your search term. A search for site:dev.to will work, but site: dev.to won’t.

Fill missing words or phrases

Use Asterisk * to fill missing words or phrases.
Example: How to * in React Native

Exclude words from your search

Put - in front of a word you want to leave out.
Example: React Native -navigation

Search for an exact match

Put a word or phrase inside quotes.
Example: "React Native Navigation"

Search within a range of numbers

Put .. between two numbers.
Example: Javascript 2017..2022

Combine searches

Put "OR" between each search query.
Exmaple: Javascript OR Typescript

Important: Not all search operators return exhaustive results.

Thank you for reading ♥

Interview Warmup

Anas Nabil — Fri, 05 Aug 2022 22:22:38 +0000

Google Launches New Interview Warmup to Assist Job Candidates Enhance Their Interview Approach.

Interview Warmup

A quick way to prepare for your next interview in many fields, Practice key questions, get insights about your answers, and get more comfortable interviewing.

Singly Linked List in JavaScript

Anas Nabil — Fri, 05 Aug 2022 20:16:00 +0000

Node Class

class Node {
  constructor(data, next) {
    this.data = data;
    this.next = next;
  }
}

Linked List Initial Setup

class LinkedList {
  constructor() {
    this.head = null;
    this.length = 0;
  }
}

Adding a new Node to Start

unshift(data) {
  const newHead = new Node(data, this.head);
  this.length++;
  this.head = newHead;
}

// ✔ Adds new node to start of list by correctly setting head and updating length.
// ✔ Does not overwrite old head.

Getting First Node (Head)

getFirst() {
  return this.head;
}

// ✔ Returns the first node in linked list.

Getting Last Node (Tail)

getLast() {
  let currentNode = this.head;

  while (currentNode && currentNode.next) {
    currentNode = currentNode.next;
  }

  return currentNode;
}

// ✔ Returns the last node in linked list.
// ✔ Does not crash AND returns null on empty list.

Clear Linked List

clear() {
  this.head = null;
  this.length = 0;
}

// ✔ Clears out the linked list and resets length to 0.

Removing and Returning First Node

shift() {
  if (!this.head) {
    return;
  }

  const oldHead = this.head;
  this.head = this.head.next;
  this.length--;

  return oldHead;
}

// ✔ Removes AND returns first node, updates length for linked list w/ one node.
// ✔ Removes the first node and returns it, decreases length of list.
// ✔ Does not crash AND returns null on empty list. Does not decrease length.

Removing and Returning Last Node

pop() {
  if (!this.head) {
    return;
  }

  if (this.length === 1) {
    return this.shift();
  }

  const last = this.getLast();
  let current = this.head;

  while (current.next !== last) {
    current = current.next;
  }

  current.next = null;
  this.length--;

  return last;
}

// ✔ Removes AND returns last node, decreases length.
// ✔ Removes AND returns last node, decreases length on linked-list w/ one node.
// ✔ Returns null on empty list AND does not decrease length.

Adding a new Node to End

push(data) {
  if (!this.head) {
    return this.unshift(data);
  }

  const last = this.getLast();
  last.next = new Node(data, null);
  this.length++;
}

// ✔ Adds to the end of the list and increases length.
// ✔ Adds to end of empty list and increases length without crashing.

Return Node at given Index

get(index) {
  if (index >= this.length || index < 0) {
    return null;
  }

  let counter = 0;
  let current = this.head;

  while (counter < index) {
    current = current.next;
    counter++;
  }

  return current;
}

// ✔ Returns null on negative or out of bounds index.
// ✔ Returns the node at given index.

Update Node at given Index

set(index, data) {
  if (!this.get(index)) {
    return false;
  }

  const node = this.get(index);
  node.data = data;
  return true;
}

// ✔ Returns falsy value on out of bounds or negative index.
// ✔ Updates node and returns true.

Remove Node at given Index

remove(index) {
  if (!this.get(index)) {
    return;
  }

  if (index === 0) {
    return this.shift();
  }

  const nodeToRemove = this.get(index);
  const prevNode = this.get(index - 1);

  prevNode.next = prevNode.next.next;
  this.length--;

  return nodeToRemove;
}

// ✔ Returns falsy value on out of bounds OR negative index.
// ✔ Removes and returns node at given index. Decreases length.
// ✔ Removes node at index 0, decreases length, and returns removed node.

Insert a new Node at given Index

insert(index, data) {
  if (index >= this.length || index < 0) {
    return false;
  }

  if (index === 0) {
    this.unshift(data);
    return true;
  }

  const prevNode = this.get(index - 1);
  const nextNode = this.get(index);

  prevNode.next = new Node(data, nextNode);
  this.length++;

  return true;
}

// ✔ Returns false on index greater than length or negative index.
// ✔ Inserts new node at given index, increases length, and returns true.
// ✔ Inserts node at 0 index correctly, increases length, returns true.

React Native Custom Hooks - Part 1

Anas Nabil — Fri, 05 Aug 2022 12:20:00 +0000

- useEffectOnce

import { useEffect } from 'react';

export function useEffectOnce(cb) {
  useEffect(cb, []);
}

Example

import { useEffectOnce } from './hooks';

useEffectOnce(() => {
  console.log('Will be executed at first render only');
});

- useUpdateEffect

import { useEffect, useRef } from 'react';

export function useUpdateEffect(callback, dependencies) {
  const firstRenderRef = useRef(true);

  useEffect(() => {
    if (firstRenderRef.current) {
      firstRenderRef.current = false;
      return;
    }
    return callback();
  }, dependencies);
}

Example

import { useState } from 'react';
import { useUpdateEffect } from './hooks';

const [counter, setCounter] = useState(5);

useUpdateEffect(() => {
  console.log('Will be executed whenever the dependency updates, But won\'t be executed at first render');
}, [counter]);

- useToggle

export function useToggle(defaultValue = false) {
  const [value, setValue] = useState(defaultValue);

  const toggleValue = useCallback(() => setValue((value) => !value), []);

  return [value, toggleValue];
}

Example

import { useToggle } from './hooks';

const [isActive, setIsActive] = useToggle(false);

- useTimeout

import { useCallback, useEffect, useRef } from 'react';

export function useTimeout(callback, delay) {
  const callbackRef = useRef(callback);
  const timeoutRef = useRef(null);

  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  const set = useCallback(() => {
    timeoutRef.current = setTimeout(() => callbackRef.current(), delay);
  }, [delay]);

  const clear = useCallback(() => {
    timeoutRef.current && clearTimeout(timeoutRef.current);
  }, []);

  useEffect(() => {
    set();
    return clear;
  }, [delay, set, clear]);

  const reset = useCallback(() => {
    clear();
    set();
  }, [clear, set]);

  return { reset, clear };
}

Example

import { useState } from 'react';
import { useTimeout } from './hooks';

const [counter, setCounter] = useState(5);
const { clear, reset } = useTimeout(() => setCounter(0), 1000);

// counter value is 5, and after 1000ms the value will be changed to 0 as we can see, and we also have 2 functions, clear that clears Timeout, and a Reset function.

- useDebounce

import { useEffect } from 'react';
import { useTimeout } from './useTimeout';

export function useDebounce(callback, delay, dependencies) {
  const { reset, clear } = useTimeout(callback, delay);
  useEffect(reset, [...dependencies, reset]);
  useEffect(clear, []);
}

Example

import { useState } from 'react';
import { useDebounce } from './hooks';

const [term, setTerm] = useState('');
useDebounce(async () => await searchAutoComplete(term), 1000, [term]);

// Typing in a search field, and we want to send a search auto complete request that returns array of auto complete words, but we want to send this request only after user stops typing for 1000ms

Priceless Tips for Life and Self Development

Anas Nabil — Mon, 01 Aug 2022 11:59:00 +0000

Object and Array Destructuring in JavaScript ES6

Anas Nabil — Sat, 30 Jul 2022 18:04:00 +0000

Destructuring Object

Default Values

const product = {
  name: 'Mac M1 256GB',
  price: 1100,
  description: 'This is a Mac M1 Chip with 256GB SSD',
  warrenty: '1 Year',
  stock: 11,
};

const { name, price, featured = false } = product;

console.log(`${name}, ${price}, ${featured}`); // Mac M1 256GB, 1100, false

Different Variable Names

const product = {
  name: 'Mac M1 256GB',
  price: 1100,
  description: 'This is a Mac M1 Chip with 256GB SSD',
  warrenty: '1 Year',
  stock: 11,
};

const { name: productName, price: productPrice, featured: isProductFeatured = false } = product;

console.log(`${productName}, ${productPrice}, ${isProductFeatured}`); // Mac M1 256GB, 1100, false

Nested Objects

const product = {
  name: 'Mac M1 256GB',
  price: 1100,
  description: 'This is a Mac M1 Chip with 256GB SSD',
  warrenty: '1 Year',
  stock: 11,
  tech: {
    os: 'iOS',
    logo: './mac_m1.png',
    production_year: '2018',
    production_country: 'USA',
  },
};

const {
  name: productName,
  tech: { os: productOS, logo: productLogo, expired = false },
} = product;

console.log(`${productName}, ${productOS}, ${productLogo}, ${expired}`); // Mac M1 256GB, iOS, ./mac_m1.png, false

const product = {
  name: 'Mac M1 256GB',
  price: 1100,
  description: 'This is a Mac M1 Chip with 256GB SSD',
  warrenty: '1 Year',
  stock: 11,
  tech: {
    os: 'iOS',
    logo: './mac_m1.png',
    production_year: '2018',
    production_country: 'USA',
  },
};

const { os: productOS, logo: productLogo, expired = false } = product.tech;

console.log(`${productOS}, ${productLogo}, ${expired}`); // iOS, ./mac_m1.png, false

Destructuring Array

Default Values

const phones = ['iPhone 8', 'Samsung S22', 'iPhone XS'];

const [firstPhone, secondPhone, thirdPhone, fourthPhone = 'Oppo Ultra Max'] = phones;

console.log(`${firstPhone}, ${secondPhone}, ${thirdPhone}, ${fourthPhone}`); // iPhone 8, Samsung S22, iPhone XS, Oppo Ultra Max

Skipping Elements

const phones = ['iPhone 8', 'Samsung S22', 'iPhone XS', 'Oppo New Release', 'iPhone 11', 'iPhone 12', 'iPhone 13'];

const [firstPhone, , thirdPhone, fourthPhone = 'Oppo Ultra Max', , , seventhPhone] = phones;

console.log(`${firstPhone}, ${thirdPhone}, ${fourthPhone}, ${seventhPhone}`); // iPhone 8, iPhone XS, Oppo New Release, iPhone 13

Nested Array

const phones = ['iPhone 8', 'Samsung S22', ['Unnamed Phone 1', 'Unnamed Phone 2', 'Unnamed Phone 3']];

const [, , [firstNestedPhone, secondNestedPhone, thirdNestedPhone]] = phones;

console.log(`${firstNestedPhone}, ${secondNestedPhone}, ${thirdNestedPhone}`); // Unnamed Phone 1, Unnamed Phone 2, Unnamed Phone 3

const phones = ['iPhone 8', 'Samsung S22', ['Unnamed Phone 1', 'Unnamed Phone 2', ['Clear Phone 1', 'Clear Phone 2']]];

const [, , [firstNestedPhone, , [firstDeepNestedPhone, secondDeepNestedPhone]]] = phones;

console.log(`${firstNestedPhone}, ${firstDeepNestedPhone}, ${secondDeepNestedPhone}`); // Unnamed Phone 1, Clear Phone 1, Clear Phone 2

Rest Parameter

const phones = ['iPhone 8', 'Samsung S22', 'iPhone XS', 'Google Pixel 6'];

const [firstPhone, ...restPhones] = phones;

console.log(`${restPhones}`); // Samsung S22,iPhone XS,Google Pixel 6

Swapping

let firstPhone = 'iPhone 13 Pro Max',
  secondPhone = 'iPhone 12 Pro Max';

[firstPhone, secondPhone] = [secondPhone, firstPhone];

console.log(`${firstPhone}, ${secondPhone}`); // iPhone 12 Pro Max, iPhone 13 Pro Max

Bubble and Selection Sort Algorithms using JavaScript

Anas Nabil — Thu, 28 Jul 2022 19:08:00 +0000

What is Sorting?

Sorting refers to ordering data in an increasing or decreasing fashion according to some linear relationship among the data items.

If we've an array of numbers [6, 1, 5 ,8 ,11 ,4]
Maybe we want to sort in ascending order [1, 4, 5, 6, 8 ,11]
Or in a descending order [11, 8, 6, 5, 4, 1]

JavaScript Provide its own Implementation

And because Sorting is commonly needed and used, JavaScript provide its own implementation, so that we don't have to write it from scratch.

// Ascending Order
console.log([6, 1, 5, 8, 11, 4].sort((a, b) => a - b)); // [1, 4, 5, 6, 8 ,11]

// Descending Order
console.log([6, 1, 5, 8, 11, 4].sort((a, b) => b - a)); // [11, 8, 6, 5, 4 ,1]

Why Should we Learn Sorting Algorithms?

If so, why would we learn how to implement a Sorting Algorithms?
It will definitely make you a better programmer, and help you understand how things work behind the scenes.

There're many Sorting Algorithms, In this article we'll discuss the easist two Algorithms, Bubble and Selection.

Big O Notation

All these Algorithms have different Big O Notation, Varying in difficulty of implementation.

A thing to mention, that JavaScript Default Sort Function uses either Tim or Merge Sort, depending on your Browser.

Swap Function

We'd need a swap function in our Algorithms, So lets start by implementing a Swap function.

const swap = (arr, i, j) => {
  let temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
};

Bubble Sort

Bubble Sort is the simplest Sorting Algorithm that works by repeatedly swapping the adjacent elements if they are in the wrong order, It basically bubbles sorted values to the top.

Here's the first step in Bubble Sort

Repeat the process until the entire array is sorted.

const bubbleSort = (arr) => {
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length - i; j++) {
      if (arr[j] > arr[j + 1]) {
        swap(arr, j, j + 1);
      }
    }
  }

  return arr;
};

And here's a visualisation for Bubble Sort Algorithm.

Selection Sort

The selection sort Algorithm sorts an array by repeatedly finding the minimum element from unsorted part and putting it at the beginning.

Here's the first step in Selection Sort

Repeat the process until the entire array is sorted.

const selectionSort = (arr) => {
  for (let i = 0; i < arr.length; i++) {
    let swapIdx = i;
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[j] < arr[swapIdx]) {
        swapIdx = j;
      }
    }
    swap(arr, i, swapIdx);
  }

  return arr;
};

And here's a visualisation for Bubble Sort Algorithm.

Happy Coding

React Native Top UI Components Libraries

Anas Nabil — Thu, 28 Jul 2022 11:18:00 +0000

DEV Community: Anas Nabil

Caesar Cipher and JavaScript

What is Caesar Cipher?

Code

Mocha Test

Importing and Exporting Modules in JavaScript

Binary Search Algorithm

Definition

Comparsion

Real Life Example

Linear Search

Binary Search

Conclusion

Visualization

Binary Search

Linear Search

Coding

Hick's Law

Hick's Law Origins

Hick's Law Definition

Hick's Law Formula

Summary Points

How to Google Like a Pro

Search for a specific site

Fill missing words or phrases

Exclude words from your search

Search for an exact match

Search within a range of numbers

Combine searches

Interview Warmup

Interview Warmup

Singly Linked List in JavaScript

Node Class

Linked List Initial Setup

Adding a new Node to Start

Getting First Node (Head)

Getting Last Node (Tail)

Clear Linked List

Removing and Returning First Node

Removing and Returning Last Node

Adding a new Node to End

Return Node at given Index

Update Node at given Index

Remove Node at given Index

Insert a new Node at given Index

React Native Custom Hooks - Part 1

- useEffectOnce

Example

- useUpdateEffect

Example

- useToggle

Example

- useTimeout

Example

- useDebounce

Example

Priceless Tips for Life and Self Development

Object and Array Destructuring in JavaScript ES6

Destructuring Object

Destructuring Array

Bubble and Selection Sort Algorithms using JavaScript

What is Sorting?

JavaScript Provide its own Implementation

Why Should we Learn Sorting Algorithms?

Most Popular Sorting Algorithms

Big O Notation

Swap Function

Bubble Sort

Selection Sort

React Native Top UI Components Libraries

1- React Native Elements

2- Native Base

3- React Native Paper

4- React Native UI Kitten

5- Shoutem UI

6- React Native UI Lib