Skip to content

Instantly share code, notes, and snippets.

View kishoreandra's full-sized avatar
🎯
Focusing - Learning responsive web design 😉

Kishore Kumar Andra kishoreandra

🎯
Focusing - Learning responsive web design 😉
View GitHub Profile
@kishoreandra
kishoreandra / gist:ac7c7f6087a00e972178bbfcd65497ff
Created June 15, 2021 15:54
Best way of creating nested elements using JavaScript
<div class="carousel-item active">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjMyMDc0fQ&amp;s=7c625ea379640da3ef2e24f20df7ce8d">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<div class="form-group">
@kishoreandra
kishoreandra / Carousel Code for reference
Last active October 22, 2021 14:03
carousel code for ref
@kishoreandra
kishoreandra / fetchAPI.js
Created November 15, 2021 03:26
Reusbale fetch api with error handling
export async function fetchData(header, query, url) {
try {
const timeout = 8000;
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeout);
const response = await fetch(url, {
method: "POST",
headers: { ...header },
body: JSON.stringify(query),
timeout: timeout,
@kishoreandra
kishoreandra / video-grid.html
Last active November 15, 2021 10:32
video grid sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video YT</title>
<style>
* {
margin: 0;
@kishoreandra
kishoreandra / loc-changes.js
Created March 30, 2022 08:36
Listen for changes in local storage - key
window.addEventListener('storage',(e)=>{
if(e.key === 'totalQty'){
const totalQty = localStorage.getItem('totalQty');
if([null,"null","undefined",undefined,'0',0].includes(totalQty)){
// Hide here 🤣
}
}
})
https://codesandbox.io/s/nameless-resonance-m3r1yj?file=/src/App.js
@kishoreandra
kishoreandra / ObjectIs.js
Created July 31, 2022 12:08
Object.is - Poly fill - YDKJS Kyle Simpson 🙇‍♂️
// TODO: define polyfill for `Object.is(..)`
// my solution 😛
if (!Object.is || true) {
Object.is = function ObjectIs(p1, p2) {
if (Number.isNaN(p1) && Number.isNaN(p2)) {
return true;
} else if (2 / p1 === -Infinity || 2 / p2 === -Infinity) {
if (2 / p1 === -Infinity && 2 / p2 === -Infinity) {
return true;
@kishoreandra
kishoreandra / filter.js
Created August 2, 2022 17:28
Filter with reduce - Eva (discord SH)
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const filters = [(item) => item > 4, (item) => item !== 6];
const filtered = array.reduce((acc, cur) => {
if(filters.every(filter => filter(cur))) return acc.concat(cur);
return acc;
}, []);
ref -> https://discordapp.com/channels/102860784329052160/565213527673929729/1004072869250203658
@kishoreandra
kishoreandra / about_state_setter
Last active August 12, 2022 10:02
state setter and updater in react useState - Leebo explained
To be specific, currentValue is the value the state had last time the component rendered. It isn't under any obligation to keep "up to date," because you want to start a new render when that happens. It's sort of like taking a blurry photograph vs a crisp clear one. Trying to render your component with a "always up to date" state would cause a blurry photo, because the state would be different by the time you got to the bottom of the render than it was at the top. Instead, the entire render shows you the same state from top to bottom, just like a clear photo
This is essentially one of the problems with class components vs functional components; the class architecture encouraged devs to "take blurry photos" all the time
@kishoreandra
kishoreandra / curryHandler.js
Created August 13, 2022 06:30
gristoi - curried function - handler
myFunc(myVar){
return function(event){... do stuff}
}
// or
const myFunc = (myVar) => (event) => {...do stuff}
// in child