Forem: karam koujan

Animate on scroll

karam koujan — Fri, 20 Jan 2023 02:20:55 +0000

Introduction

Animation on scroll is a feature that we see often on modern websites, it grabs user attention and add interactivity to your web application rather than just a static page.

In this article I am going to show you how to implement on-scroll animation using the intersection observer api.

Intersection Observer API

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with the viewport, It used for lazy loading Images, infinite scrolling and on-scroll animation. For more information about this api you can check the docs.

A Simple example

I created three section, Each one is going to fade in when we intersect with it.

<section class="hidden">
 <h2>title 1</h2>
</section>
<section class="hidden">
 <h2>title 2</h2>
</section>
<section class="hidden">
 <h2>title 2</h2>
</section>

h2{
    color: #4b6cc1;
}
.hidden{
    display: flex;
    padding-block:15rem ;
    flex-direction: column;
    opacity: 0;
    transition: opacity 1s .5s ease-in;
}

const targets = document.querySelectorAll(".hidden")
const options = {
    root : null,
    threshold:0.5
}

const callback = (entries)=>{
    console.log(entries)
    entries.forEach(entry => {
          if(entry.isIntersecting){
            entry.target.classList.add("show")
          }else{
            entry.target.classList.remove("show")
          }
    });

}
const observer = new IntersectionObserver(callback,options)

targets.forEach(target=>observer.observe(target))

.show{
 opacity:1;
 }

we will get all elements that have class "hidden" and add the "show" class to the element that intersects with 50% of the viewport, that’s what 0.5 in the threshold means.

Demo

Intersection Observer API as react hook

This is the react version

import {useState,useRef,useEffect} from "react"
export const useOnScreen = (options)=>{
    const ref = useRef(null);
    const [isVisible,setIsVisible] = useState(false)

   useEffect(()=>{
     const observer = new IntersectionObserver(([entry])=>{
         if(entry.isIntersecting){
         setIsVisible(true)         
         }
     },options)
     if(ref.current){
         observer.observe(ref.current)
     }
     return ()=> ref.current ? observer.unobserve(ref.current):null

   },[ref,options])

   return [isVisible,ref]
}

The Event Loop

karam koujan — Fri, 15 Jul 2022 21:52:29 +0000

The event loop model gives javascript the possibility to handle many operations like I/O in a non-blocking way even though it’s a single threaded language.

Visual representation

Stack

A stack is a data structure that follows the principle of Last In First Out (LIFO), This means the last element inserted inside the stack is removed first, in js every invoked function get pushed to the stack and when it finishes, it is popped from the stack.

const last = ()=>{
  console.log("last")
}
const first = ()=>{
  last()
  console.log("first") 
}
first()
/*
last 
first
*/

Heap

Objects are allocated in a heap which is just a name to denote a large (mostly unstructured) region of memory.

The event Loop

The event loop is as it sounds a loop that put events on the queue and wait till the stack gets empty then it pushes the events handlers to the stack to get executed.

const foo = ()=>{
 console.log("first")
}
setTimeout(()=>{
  console.log("second")
},0)
foo()
/*
 first 
 second
*/

setTimeout is a webApi that has a minmum (not an exact) delay time to execute its callback. in this example the event loop put setTimeout in the queue and the foo function to the call stack, when the function foo executes, the stack becomes empty and then the event loop pushes setTimeout callback to the call stack.

Conclusion

The event loop model gives javascript the possibility to handle many operations like I/O in a non-blocking way even though it’s a single threaded language.

== versus ===

karam koujan — Sun, 05 Jun 2022 16:53:27 +0000

There is a very common misconception about the difference between == (loose equals) and === (strict equals) operators, the misconception is: “== checks values for equality and === checks both values and types for equality”. The correct description is “== allows coercion in the equality comparison and === disallows coercion”. === behavior is obvious, so in this article I will focus more on == behavior.

Type Coercion

Before we discuss about == behavior we need to understand type coercion and its rules, Type coercion is the conversion of values from one data type to another.

let toBool = !"12"
console.log(toBool)//false 
// toBool is converted from a string to a boolean

There are basic rules that govern how values become either a string, number, or boolean. The Es5 spec defines several "abstract operators" with the rules of value conversion, I will focus on toString, toNumber, toBoolean, and toPrimitive.

ToString

Whenever we coerce a non-string value to a string value, ToString handles the conversion as in section 7.1.12 of the specification. Primitive types have natural stringification. The table looks like:

true -> 'true'
false -> 'false'
null -> 'null'
undefined -> 'undefined'
2 -> '2'

For regular object and array, the default toString which is defined on Object.prototype is invoked.

let lang = {language: 'JavaScript'}; 
lang.toString(); // "[object Object]"

[].toString(); // ""

You can specify your own method that override the default behavior.

let lang = {language: 'JavaScript'}; 
Object.prototype.toString = ()=>"javascript"
lang.toString(); // "javascript"

ToNumber

Whenever a non-number value is supplied in an operation where a number was expected, such as a mathematical operation, ES2020 defines a ToNumber abstract operation in section 7.1.3.

true -> 1
false -> 0
undefined -> NaN (not a valid number)
null -> 0

For object and array, values are first converted to their primitive value via ToPrimitive operation and the result is converted to number according to the ToNumber abstract operation.

ToBoolean

The toBoolean operation preforms a table lookup as mentioned in section 7.1.2.

ToPrimitive

If we have non-primitive type (like function, object, array) and we need a primitive equivalent, ES2020 defines ToPrimitive in section 7.1.1.
This is a flow chart explaining the ToPrimitive operation.

The loose equality Operator “==”

The behavior of == operator is defined by “the abstract equality comparison algorithm”.

The Abstract comparison algorithm

If two values being compared are of the same type, they are simply and naturally compared via identity as you would expect.

let a = "12";
let b = "12"
console.log(a==b)

There is exceptions to this :

NaN is never equal to itself
+0 and -0 is equal to each other
objects (arrays and functions) are equal if they have the same reference

console.log(NaN==NaN) //false
console.log({}=={}) //false
console.log(-0==+0) //true

Comparison between a string and a number

If Type(x) is a number and type(y) is a string the result of the comparison is x == toNumber(y).
If Type(x) is a string and type(y) is a number the result of the comparison is toNumber(x) == y.

console.log(1=="1") //true
console.log("1"==1) //true
/* the string will be converted to a number
 the result will be  1 == 1 which is true
*/
console.log(0=="") //true
/*
 if we convert an empty string to a number it will result 0 
*/

Comparison between anything and a boolean

If Type(x) is a boolean and type(y) is non-boolean type the result of the comparison is toNumber(x) == y.
If Type(x) is a none-boolean type and type(y) is a boolean the result of the comparison is x == ToNumber(y)

console.log("hi"==true)//false
/*
The algorithm converts true to 1, the result is "hi"==1, now we have a comparison
between a number and a string, the algorithm recursivley will convert a string to 
a number, the final result is NaN==1 which is false    
*/

Comparison between null and undefined

If x is null and y is undefined the result is true
If x is undefined and y is null the result is true

console.log(undefined==null) //true
console.log(null==undefined) //true
//if a function is returning either null or undefined you can do
const a = doSomething()
if(a==null){
  console.log("hello world")
}
//instead of 
if(a==null||a==undefined){
  console.log("hello world")
}

Comparison between object and non-object

If type(x) is a string or a number and type(y) is an object the result of comparison is x == toPrimitive(y)
If type(x) is an object and type(y) is a string or a number the result of comparison is toPrimitive(x) == y

console.log({}=="[object Object]")//true
//The result is true because toPrimitive({}) is "[object Object]"
console.log([1]==1)//true
/*
The result is true because toPrimitive([1]) is "1", now we have a string to number
comparison, In this as case as we have seen above we convert the string to a number.
The final result is 1==1 which is true. 
*/

In This article we have discussed about :

The common misconception about the differences between == and ===.
Javascript Type coercion and the rules that govern how the values is converted from one data type to another.
The abstract comparison algorithm that explain the behavior of == operator.

After reading this article, explain in the comments why:

console.log([]==![]) //true

Hope you liked the article, a few ❤️ will make me smile 😍.

Var vs Let vs Const

karam koujan — Mon, 28 Feb 2022 22:26:03 +0000

Javascript has 3 keywords to declare a variable, let, const and var. In this article we are going to talk about the similarities and the differences between these keywords.

Var

A variable declared with var it can be accessed everywhere except when it is declared inside a function.

if(true){
  var a = "global variable";
}
console.log(a) // global variable

function foo(){
  var b = "function scoped";
}
console.log(b) // ReferenceError: b is not defined

a variable declared with var is moved to the top of the scope before code execution “hoisting”.

console.log(a) // undefined
var a = "hoisting"

// behind the scenes 
var a;
console.log(a) // undefined
a = "hoisting"

var variables can be re-declared within the same scope without getting an error.

var a = 1;
var a = 2 
console.log(a) // 2

var variables can be updated.

var a = "hello";
a = "hello world";
console.log(a) // hello world

Let

let keyword is one of the features for declaring variables that came with Es6 in addition to const, let has some differences and similarities with var.
let is block scoped, in javascript anything within curly braces is a block, so a variable declared with let inside a block cannot be accessible outside of it.

if(true){
let a = "hello world";
}
console.log(a) // ReferenceError: a is not defined

let variables cannot be re-declared like var.

let a = "hello world";
let a = "hello javascript";
console.log(a) // SyntaxError: Identifier 'a' has already been declared

like var, let can be updated.

let a = "hello world";
a = "hello javascript";
console.log(a) // hello javascript

Const

const behaves like let but it cannot be updated.

 const a = "hello world";
a = "hello javascript";
console.log(a) // TypeError: Assignment to constant variable.

Conclusion

In case you have missed, here are the differences:

let and const are block scoped.
var declarations are globally and function scoped.
var and let can be updated but const cannot.
var can be re-declared but const and let cannot.

Arrow function vs Regular function

karam koujan — Sun, 13 Feb 2022 23:31:01 +0000

Arrow function and regular function ( function expression) are used interchangeably in our code without knowing the difference between them which could cause some confusing behavior, in this article I will mention 3 important differences between arrow function and regular function.

1. This value

The value of this depends on how function is invoked, in javascript there are 4 ways to invoke a function.

1. Simple invocation

 const foo = function(){
  console.log(this) // global object
}  
foo()

2. Method invocation

const obj = {
 foo(){
 console.log(this) // { foo: [Function: foo] }

}
}
obj.foo()

3. Indirect invocation

const obj =  {
  name : "javascript"
}
const foo = function(){
 console.log(this) // { name: 'javascript' }

}

foo.call(obj)

4. Constructor function

const Language = function(name){
 this.name = name
}

new Language("javascript") // {name:javascript}

For the arrow function the behavior of this differs from the regular function, the arrow function doesn’t have its binding to this but it establishes this based on the lexical scope the arrow function defined within. this difference could cause a strange behavior when we use arrow functions as methods, so it’s better to avoid using arrow functions as methods.

const obj = {
 foo :()=>{
 console.log(this) // window
}
}
obj.foo()

2. Constructors

Arrow function cannot be used as constructors, if you try to invoke arrow function’s prefix with new keyword, javascript throws an error.

 const Language = (name)=>{
 this.name = name
}

new Language("javascript") // TypeError : Language is not a constructor

3. Arguments object

Inside the body of a regular function, arguments is an array-like object containing the function invocation arguments.

function myFunction() {
  console.log(arguments);
}
myFunction('a', 'b'); // { 0: 'a', 1: 'b', length: 2 }

on the other side there is no special arguments keyword inside the arrow function, but it accesses arguments from the outer function

function RegularFunction() {
  const ArrowFunction = () => {
    console.log(arguments);
  }
  ArrowFunction('c', 'd');
}
RegularFunction('a', 'b');  logs { 0: 'a', 1: 'b', length: 2

Conclusion

We have discussed in this article about 3 differences between arrow functions and regular functions which is :

This value
constructors
arguments object

What other differences between arrow and regular functions do you know?

Infinite Scrolling with React

karam koujan — Wed, 02 Feb 2022 22:57:11 +0000

Infinite scrolling is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. This technique is used by social media sites and in this article we are going to learn how to implement infinite scrolling in our apps using React.

At first we are going to create a new react app

npx create-react-app infinite-scrolling-app 
cd infinite-scrolling-app
npm start

we install react-waypoint, a loading react component to execute a function whenever you scroll to an element.

npm install react-waypoint

we create a data array that contains elements we want to show on the screen.

export const data = [
  {
    id:1,
    text: "hello, new post"
  },
  {
    id:2,
    text: "hello, new post"
  },
  {
    id:3,
    text: "hello new post"
  },
  {
    id:4,
    text: "hello new post"
  },
  {
    id:5,
    text: "hello new post"
  },
  {
    id:6,
    text: "hello new post"
  },
  {
    id:7,
    text: "hello new post"
  },
  {
    id:8,
    text: "hello new post"
  },
  {
    id:9,
    text: "hello new post"
  },
  {
    id:10,
    text: "hello new post"
  },
  {
    id:11,
    text: "hello new post"
  },
  {
    id:12,
    text: "hello new post"
  },
  {
    id:13,
    text: "hello new post"
  },
  {
    id:14,
    text: "hello new post"
  },
  {
    id:15,
    text: "hello new post"
  },
  {
    id:16,
    text: "hello new post"
  },
  {
    id:17,
    text: "hello new post"
  }
]

we create a costume hook that will take the data and limit of elements we want to show and the page that we want to show next.

export const useInfiniteScroll = (data, limit, page) => {
  const ending = limit * page + 1;
  return data.slice(0, ending);
}

now we create a component as a container and show the first page of the data we will consider 4 elements as a limit.

import React,{ useState } from "react";
import {data} from "./data.js";
import {useInfiniteScroll} from "./useInfiniteScroll";
import "./styles.css";

export default function App() {
  const limit = 4 ;
  const [page, setPage] = useState(1);
  const elements = useInfiniteScroll(data,limit, page);
  return (
    <div className="container">
      {elements.map(element => (
          <p>{element.text}</p>    
     ))}
    </div>
  );
}

we will add some styling to the container to show the scroll.

.container {
  background-color: red;
  font-family: sans-serif;
  text-align: center;
  height: 180px;
  overflow-y: scroll;
}

import React,{ useState } from "react";
import {data} from "./data.js";
import {useInfiniteScroll} from "./useInfiniteScroll";
import {Waypoint} from "react-waypoint";
import "./styles.css";

export default function App() {
  const limit = 4
  const [page, setPage] = useState(1);
  const elements = useInfiniteScroll(data, limit, page);
  return (
    <div className="container">


      {elements.map(element => (
        <React.Fragment key={element.id}>
          <p>{element.text}</p> 

            { element.id - 1 === limit * page ? (
    <Waypoint onEnter={() => setPage(page+1)} /> ) : null} 
          </React.Fragment>
     ))}
    </div>
  );
}

after showing the first page on the screen we want to show the next page when we scroll, for that we are going to use react-waypoint component that executes a function when we scroll to an element.
we put the condition to show the next page when we scroll to the last element.
Congratulations ! we have made infinite scrolling with react.
you can see the code in this sandbox