Storage API
learn more about Storage API (Local and Session Storage).
Aug 8, 2016☕ 2 min read
Home | JavaScript | HTML5 | React | Programming | Problems | About
👋 Hi, I'm Venkat.R
Happy to see you visting WebSlate.IO. I'm a JavaScript and web developer living in sunny Singapore creator of WebSlate.IO.
With a passion for teaching, I started making lot of training materials for free. during pandemic 2020, i started helping people who lose jobs through offline now its online called WebSlate.IO.
I'm just getting started.
Home | JavaScript | HTML5 | React | Programming | Problems | About
👋 Hi, I'm Venkat.R
Happy to see you visting WebSlate.IO. I'm a JavaScript and web developer living in sunny Singapore creator of WebSlate.IO.
With a passion for teaching, I started making lot of training materials for free. during pandemic 2020, i started helping people who lose jobs through offline now its online called WebSlate.IO.
I'm just getting started.
Home | JavaScript | HTML5 | React | Programming | Problems | About
Storage API
learn more about Storage API (Local and Session Storage).
Aug 8, 2016☕ 2 mins readHome | JavaScript | HTML5 | React | Programming | Problems | About
Storage API
Aug 8, 2016☕ 2 min read
One of the good Features in ES6 is Promises Object and their useful methods and they are called software abstraction helps to works smoothly with asynchronous operations. Promise API followed Promises/A+ Specification prior to this, there was Promise/A.
What is Promises/A and Promises/A+ ?
- Both are specification for open standard but Javascript currently uses Promise/A+.
- The main three reason for using Promise/A+ is Three different states, Value for Fulfilment and for Rejection and thenable object. for more detail see Differences from Promises/A
- These Promise/A+ organisation occasionally revise and address the corner cases in to new Specification.
Difference between Promise/A and /A+?
- Rejection / Fulfilment method returns thenable object.
- Rejection triggers catch method, if errors thrown.
In short, running continuation-passing style. Let me shoot few bullets with simple diagram on Promises below.
Home | JavaScript | HTML5 | React | Programming | Problems | About
Storage API
Aug 8, 2016☕ 2 mins read
One of the good Features in ES6 is Promises Object and their useful methods and they are called software abstraction helps to works smoothly with asynchronous operations. Promise API followed Promises/A+ Specification prior to this, there was Promise/A.
What is Promises/A and Promises/A+ ?
- Both are specification for open standard but Javascript currently uses Promise/A+.
- The main three reason for using Promise/A+ is Three different states, Value for Fulfilment and for Rejection and thenable object. for more detail see Differences from Promises/A
- These Promise/A+ organisation occasionally revise and address the corner cases in to new Specification.
Difference between Promise/A and /A+?
- Rejection / Fulfilment method returns thenable object.
- Rejection triggers catch method, if errors thrown.
In short, running continuation-passing style. Let me shoot few bullets with simple diagram on Promises below.
Home | JavaScript | HTML5 | React | Programming | Problems | About
JS Promise (Part 2 - Q.js, When.js and RSVP.js)
I would like to continue with an examination of JavaScript Promise API. Let’s have a look at Promise evolution by various libraries. below three libraries which we are going to explore on this article.
Dec 5, 2016☕ 5 min readJS Promises Basics (Part 1)
One of the good Features in ES6 is Promises Object and their useful methods and they are called software abstraction helps to works smoothly with asynchronous operations. Promise API followed Promises/A+ Specification prior to this, there was Promise/A.
Oct 21, 2016☕ 2 min readHome | JavaScript | HTML5 | React | Programming | Problems | About
JS Promise (Part 2 - Q.js, When.js and RSVP.js)
I would like to continue with an examination of JavaScript Promise API. Let’s have a look at Promise evolution by various libraries. below three libraries which we are going to explore on this article.
Dec 5, 2016☕ 5 mins readJS Promises Basics (Part 1)
One of the good Features in ES6 is Promises Object and their useful methods and they are called software abstraction helps to works smoothly with asynchronous operations. Promise API followed Promises/A+ Specification prior to this, there was Promise/A.
Oct 21, 2016☕ 2 mins readHome | JavaScript | HTML5 | React | Programming | Problems | About
JS Promise (Part 2 - Q.js, When.js and RSVP.js)
Dec 5, 2016☕ 5 min read
I would like to continue with an examination of JavaScript Promise API. Let’s have a look at Promise evolution by various libraries. below three libraries which we are going to explore on this article.
- Q.js Library
- When.js Library
- RSVP.js Library
Using q.js
The q.js is best one for promise implementation by Kris Kowal. It is more evident of promise evolution.
Lets have a look, What makes it special.
- It provides two ways to define the promise. one is very famous by Q.defer() and another one is Q.Promise().
- The Q.defer() method is custom and flexible way to define promise like defining anywhere in the code likevar deferred = Q.defer(); and any time that can be resolved, rejected and notified (deferred.resolve, deferred.reject, deferred.notify).
Home | JavaScript | HTML5 | React | Programming | Problems | About
JS Promise (Part 2 - Q.js, When.js and RSVP.js)
Dec 5, 2016☕ 5 mins read
I would like to continue with an examination of JavaScript Promise API. Let’s have a look at Promise evolution by various libraries. below three libraries which we are going to explore on this article.
- Q.js Library
- When.js Library
- RSVP.js Library
Using q.js
The q.js is best one for promise implementation by Kris Kowal. It is more evident of promise evolution.
Lets have a look, What makes it special.
- It provides two ways to define the promise. one is very famous by Q.defer() and another one is Q.Promise().
- The Q.defer() method is custom and flexible way to define promise like defining anywhere in the code likevar deferred = Q.defer(); and any time that can be resolved, rejected and notified (deferred.resolve, deferred.reject, deferred.notify).
Home | JavaScript | HTML5 | React | Programming | Problems | About
JS Promises Basics (Part 1)
Oct 21, 2016☕ 2 min read
One of the good Features in ES6 is Promises Object and their useful methods and they are called software abstraction helps to works smoothly with asynchronous operations. Promise API followed Promises/A+ Specification prior to this, there was Promise/A.
What is Promises/A and Promises/A+ ?
- Both are specification for open standard but Javascript currently uses Promise/A+.
- The main three reason for using Promise/A+ is Three different states, Value for Fulfilment and for Rejection and thenable object. for more detail see Differences from Promises/A
- These Promise/A+ organisation occasionally revise and address the corner cases in to new Specification.
Difference between Promise/A and /A+?
- Rejection / Fulfilment method returns thenable object.
- Rejection triggers catch method, if errors thrown.
In short, running continuation-passing style. Let me shoot few bullets with simple diagram on Promises below.
Home | JavaScript | HTML5 | React | Programming | Problems | About
JS Promises Basics (Part 1)
Oct 21, 2016☕ 2 mins read
One of the good Features in ES6 is Promises Object and their useful methods and they are called software abstraction helps to works smoothly with asynchronous operations. Promise API followed Promises/A+ Specification prior to this, there was Promise/A.
What is Promises/A and Promises/A+ ?
- Both are specification for open standard but Javascript currently uses Promise/A+.
- The main three reason for using Promise/A+ is Three different states, Value for Fulfilment and for Rejection and thenable object. for more detail see Differences from Promises/A
- These Promise/A+ organisation occasionally revise and address the corner cases in to new Specification.
Difference between Promise/A and /A+?
- Rejection / Fulfilment method returns thenable object.
- Rejection triggers catch method, if errors thrown.
In short, running continuation-passing style. Let me shoot few bullets with simple diagram on Promises below.
Home | JavaScript | HTML5 | React | Programming | Problems | About
Fibonacci Series
Fibonacci numbers, commonly denoted Fn sequence
Aug 7, 2021☕ 2 min readPalindrome Solutions
Palindrome is in reverse also same
Jul 21, 2020☕ 2 min readHome | JavaScript | HTML5 | React | Programming | Problems | About
Fibonacci Series
Fibonacci numbers, commonly denoted Fn sequence
Aug 7, 2021☕ 10 mins readPalindrome Solutions
Palindrome is in reverse also same
Jul 21, 2020☕ 2 mins readHome | JavaScript | HTML5 | React | Programming | Problems | About
Fibonacci Series
Aug 7, 2021☕ 2 min read
Table of Contents
The Fibonacci numbers are the numbers in the following integer sequence, called the Fibonacci sequence, and characterized by the fact that every number after the first two is the sum of the two preceding ones.
History
- Leonardo Bonacci, Italian Mathemetician from the Republic of Pisa studied with Muslim schoolmaster who introduced him to the Hindu-Arabic system of Enumeration along with computation. later he investigated various arithmetic sytems in Egypt, France, Greece, Rome and Syria.
- In 1202, he published his Liber Abaci (Book of Abacus), Practice of Geometry (1220), Book of Square Numbers (1225) and others etc.
- This sequence of numbers (0,1,1,2,3,5,8,13,21,34...) called Fibonacci Sequence which is contraction of Filius Bonacci (son of Bonacci).
Problem of Rabbits
Problem is about a person who has a pair of newborn rabbits (different gender). here problem to determine the numbers of pairs after a year. at the end of each month, a newborn pair grows to maturity.
Rabbits Population per year.
| Newborn | Matured | Total | |
|---|---|---|---|
| Jan 1 | 1 | 0 | 1 |
| Feb 1 | 0 | 1 | 1 |
| Mar 1 | 1 | 1 | 2 |
| Apr 1 | 1 | 2 | 3 |
| May 1 | 2 | 3 | 5 |
| Jun 1 | 3 | 5 | 8 |
| Jul 1 | 5 | 8 | 13 |
| Aug 1 | 8 | 13 | 21 |
| Sep 1 | 13 | 21 | 34 |
| Oct 1 | 21 | 34 | 55 |
| Nov 1 | 34 | 55 | 89 |
| Dec 1 | 55 | 89 | 144 |
| Jan 1 | 89 | 144 | 233 |
Properties
Finding the great common divisor of F5 = 5 and F6 = 8 is 1. This is due to the fact that only positive integer that divide F5 = 5 are 1 and 5 (denoted as gcd(F5, F6) = 1 likewise, F6 = 8 are 1,2,4 and 8 (denoted as gcd(F9, F10) = 1) there are common properties available. lets look at them.
- For n>=0, GCD(Fn, Fn+1) = 1
- For n>=0, GCD(Fn, Fn+2) = 1
- Sum of any six consecutive fibonacci numbers is divisible by 4
- Sum of 10 consecutive fibonacci numbers is divisible by 11
- and there is five more properties until 9.
Solutions
There is various kinds of approaches in order to get this sequence and there is many solutions available. lets see each of them with solutions written in javascript. +
Home | JavaScript | HTML5 | React | Programming | Problems | About
Fibonacci Series
Aug 7, 2021☕ 10 mins read
Table of Contents
The Fibonacci numbers are the numbers in the following integer sequence, called the Fibonacci sequence, and characterized by the fact that every number after the first two is the sum of the two preceding ones.
History
- Leonardo Bonacci, Italian Mathemetician from the Republic of Pisa studied with Muslim schoolmaster who introduced him to the Hindu-Arabic system of Enumeration along with computation. later he investigated various arithmetic sytems in Egypt, France, Greece, Rome and Syria.
- In 1202, he published his Liber Abaci (Book of Abacus), Practice of Geometry (1220), Book of Square Numbers (1225) and others etc.
- This sequence of numbers (0,1,1,2,3,5,8,13,21,34...) called Fibonacci Sequence which is contraction of Filius Bonacci (son of Bonacci).
Problem of Rabbits
Problem is about a person who has a pair of newborn rabbits (different gender). here problem to determine the numbers of pairs after a year. at the end of each month, a newborn pair grows to maturity.
Rabbits Population per year.
| Newborn | Matured | Total | |
|---|---|---|---|
| Jan 1 | 1 | 0 | 1 |
| Feb 1 | 0 | 1 | 1 |
| Mar 1 | 1 | 1 | 2 |
| Apr 1 | 1 | 2 | 3 |
| May 1 | 2 | 3 | 5 |
| Jun 1 | 3 | 5 | 8 |
| Jul 1 | 5 | 8 | 13 |
| Aug 1 | 8 | 13 | 21 |
| Sep 1 | 13 | 21 | 34 |
| Oct 1 | 21 | 34 | 55 |
| Nov 1 | 34 | 55 | 89 |
| Dec 1 | 55 | 89 | 144 |
| Jan 1 | 89 | 144 | 233 |
Properties
Finding the great common divisor of F5 = 5 and F6 = 8 is 1. This is due to the fact that only positive integer that divide F5 = 5 are 1 and 5 (denoted as gcd(F5, F6) = 1 likewise, F6 = 8 are 1,2,4 and 8 (denoted as gcd(F9, F10) = 1) there are common properties available. lets look at them.
- For n>=0, GCD(Fn, Fn+1) = 1
- For n>=0, GCD(Fn, Fn+2) = 1
- Sum of any six consecutive fibonacci numbers is divisible by 4
- Sum of 10 consecutive fibonacci numbers is divisible by 11
- and there is five more properties until 9.
Solutions
There is various kinds of approaches in order to get this sequence and there is many solutions available. lets see each of them with solutions written in javascript. Before, lets look at the formulae.
- F0 = 0, F1 = 1 (initial conditions)
- Fn = Fn-1 + Fn-2, n>=2 (Recurrence Relation)
1. Recursive Approach
Basically, this approach call itself creating more and more branches of the tree until it hits the base case. Below is the recursive solution in Javascript.
Time Complexity: 2^n (exponential time)
Space Complexity: O(n) considering function call stack size, otherwise O(1).
1function fib_1(n) {2 if (n < 2) {3 return n4 }5 return fib_1(n - 1) + fib_1(n - 2)6}
2. Dynamic Programming
- Dynamic Programming is mainly an optimization over plain recursion. Wherever we see a recursive solution that has repeated calls for same inputs, we can optimize it using Dynamic Programming.
- The idea is to simply store the results of sub problems to prevent re-computations of same inputs.
- This helps to reduces time complexities from exponential to polynomial.
Time Complexity: O(n) Space Complexity: O(1)
1function fib_2(n) {2 let a = 0, b = 1, c, i;3 if (n == 0)4 return a;5 for (i = 2; i <= n; i++) {6 c = a + b;7 a = b;8 b = c;9 }10 return b;11}
3. Power of Matrix Approach
Time Complexity: O(Logn) Space Complexity: O(1) or O(Logn) on function call stack size consideration.
1function fib(n) {2 const F = [[1, 1], [1, 0]];3 if (n == 0)4 return 0;5 power(F, n - 1);6 return F[0][0];7}8// Helper function that multiplies 29// matrices F and M of size 2*2, and10// puts the multiplication result11// back to F[][]12function multiply(F, M) {13 const x = F[0][0] * M[0][0] + F[0][1] * M[1][0];14 const y = F[0][0] * M[0][1] + F[0][1] * M[1][1];15 const z = F[1][0] * M[0][0] + F[1][1] * M[1][0];16 const w = F[1][0] * M[0][1] + F[1][1] * M[1][1];17 F[0][0] = x;18 F[0][1] = y;19 F[1][0] = z;20 F[1][1] = w;21}22// Helper function that calculates F[][]23// raise to the power n and puts the24// result in F[][]25function power(F, n) {26 const M = [[1, 1], [1, 0]];27 // n - 1 times multiply the28 // matrix to {{1,0},{0,1}}29 for (let i = 2; i <= n; i++)30 multiply(F, M);31}32// Optimized version of power() in method 4 */33function power(F, n) {34 if (n == 0 || n == 1)35 return;36 const M = [[1, 1], [1, 0]];37 power(F, n / 2);38 multiply(F, F);39 if (n % 2 != 0)40 multiply(F, M);41}
4 Using Binet's Formula
Binet formula, sums, combinatorial representations and generating function of the generalized Fibonacci -numbers.
Time Complexity: O(logn), this is because calculating phi^n takes logn time.
-Space Complexity: O(1)
1function fib_4(n) {2 let phi = (1 + Math.sqrt(5)) / 2;3 return Math.round(Math.pow(phi, n) / Math.sqrt(5));4}
Other Facts
Let's look at the other facts where we used in real life.
Planets Activity
Even our planet activities like Rotations period, Precession Period, Orbital Period are in fibonacci. Refer to Journal of Astronomy on Modeling Celestial Mechanics Using the Fibonacci Numbers
Golden Ratio (Phi)
In mathematics, two quantities are in the golden ratio if their ratio is the same as the ratio of their sum to the larger of the two quantities where F(n+1) / Fn is most of the time is 1.618
Golden ratio everywhere like example below.
- Flower petals
- Spiral of Pine Cone, Pineapple
- Storms spin in golden sequence
- Wave can be measured in this ratio.
- Planet alignment and spirals of our Milky way galaxy
- Shoulder to elbow and elbow to fingertips will be 1:1.6
- Finger tips to wrist and wrist to elbow
- bottom of fingertips to wrist
- Even your ears, brains, lungs system even helix of our DNA that forms rhythm of our hearbeat.
- Musical scales like piano.
1function fib_4(n) {2 let phi = (1 + Math.sqrt(5)) / 2;3 return Math.round(Math.pow(phi, n) / Math.sqrt(5));4}
Other Facts
Let's look at the other facts where we used in real life.
Planets Activity
Even our planet activities like Rotations period, Precession Period, Orbital Period are in fibonacci. Refer to Journal of Astronomy on Modeling Celestial Mechanics Using the Fibonacci Numbers
Golden Ratio (Phi)
In mathematics, two quantities are in the golden ratio if their ratio is the same as the ratio of their sum to the larger of the two quantities where F(n+1) / Fn is most of the time is 1.618
Golden ratio everywhere like example below.
- Flower petals
- Spiral of Pine Cone, Pineapple
- Storms spin in golden sequence
- Wave can be measured in this ratio.
- Planet alignment and spirals of our Milky way galaxy
- Shoulder to elbow and elbow to fingertips will be 1:1.6
- Finger tips to wrist and wrist to elbow
- bottom of fingertips to wrist
- Even your ears, brains, lungs system even helix of our DNA that forms rhythm of our hearbeat.
- Musical scales like piano.
Fibonacci Extension
Home | JavaScript | HTML5 | React | Programming | Problems | About
Palindrome Solutions
Jul 21, 2020☕ 2 min read
Below is the basic coding solution written in javascript.
function isPalindrome(S) {
+Palindrome Solutions Home | JavaScript | HTML5 | React | Programming | Problems | About
Palindrome Solutions
Jul 21, 2020☕ 2 mins readBelow is the basic coding solution written in javascript.
function isPalindrome(S) {
let iteration = Math.round(S.length / 2);
let backward = S.length;
@@ -11,4 +11,4 @@
return "YES";
}
-
Home | JavaScript | HTML5 | React | Programming | Problems | About
10 Things you should know
10 Things you should know
Jul 21, 2020☕ 2 min readHome | JavaScript | HTML5 | React | Programming | Problems | About
10 Things you should know
10 Things you should know
Jul 21, 2020☕ 2 mins readHome | JavaScript | HTML5 | React | Programming | Problems | About
10 Things you should know
Jul 21, 2020☕ 2 min read
10 Things you should know
Home | JavaScript | HTML5 | React | Programming | Problems | About
10 Things you should know
Jul 21, 2020☕ 2 mins read
10 Things you should know
Home | JavaScript | HTML5 | React | Programming | Problems | About
useEffect Basics (Part 1)
One of the good Features in React 16.x
Jul 21, 2020☕ 2 min readHome | JavaScript | HTML5 | React | Programming | Problems | About
useEffect Basics (Part 1)
One of the good Features in React 16.x
Jul 21, 2020☕ 2 mins readHome | JavaScript | HTML5 | React | Programming | Problems | About
useEffect Basics (Part 1)
Jul 21, 2020☕ 2 min read
Welcome to useEffect basics article
Home | JavaScript | HTML5 | React | Programming | Problems | About
useEffect Basics (Part 1)
Jul 21, 2020☕ 2 mins read
Welcome to useEffect basics article
Thanks for visiting this page. Its coming soon...
Home | JavaScript | HTML5 | React | Programming | Problems | About
Thanks for visiting this page. Its coming soon...
Home | JavaScript | HTML5 | React | Programming | Problems | About
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/styles/global.css b/docs/styles/global.css
index c1b32da..87cc63d 100644
--- a/docs/styles/global.css
+++ b/docs/styles/global.css
@@ -1,5 +1,7 @@
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
+*{scroll-behavior: smooth;}
+
body {
font-family: "Open Sans", sans-serif;
}
diff --git a/src/common/components/Blog/CodeBlock.js b/src/common/components/Blog/CodeBlock.js
index e694340..19a0414 100644
--- a/src/common/components/Blog/CodeBlock.js
+++ b/src/common/components/Blog/CodeBlock.js
@@ -1,16 +1,7 @@
import React from 'react'
-import { Wrapper, Pre, Line, LineNo, LineContent } from "./CodeBlockStyles";
+import { Wrapper, Pre, Line, LineNo, LineContent } from './CodeBlockStyles';
import Highlight, { defaultProps } from 'prism-react-renderer'
-import theme from "prism-react-renderer/themes/nightOwl";
-
-const exampleCode = `
-function fibo_1(n) {
- if (n < 2) {
- return n
- }
- return fibo_1(n - 1) + fibo_1(n - 2)
-}
-`.trim();
+import theme from 'prism-react-renderer/themes/nightOwl';
const CodeBlock = ({ children, language = 'javascript' }) => (
{meta.description}
} {meta.date} - ☕ {meta.readTime + " min read"} + ☕ {meta.readTime + " mins read"}