karimshalapy / findOverflowParents.js

Created December 27, 2022 11:03 — forked from brandonjp/findOverflowParents.js

find overflow:hidden ancestors

	// when you're trying to use `position:sticky` on an element
	// you'll have trouble if any parent/ancestor element has
	// overflow set to anything other than "visible" (such as: auto,hidden,overlay,scroll)
	// & turns out if a parent is `display:flex` it might need some love
	// (to remedy this you can set the `align-self` of your sticky element)
	// see here for how the display & align-self properties affect: http://bit.ly/2ZaRu4o

	// so, to find those troublesome parents...
	// copy & paste this into Chrome Inspector/Dev Tools console
	// (and be sure to change the #stickyElement below, if needed)

karimshalapy / README.md

Last active November 18, 2021 17:25

CSR v SSR v SSG

Terminology

Acronym	Stands for
CSR	Client Side Rendering
SSR	Server Side Rendering
SSG	Static Site Generation
ISR	Incremental Static Regeneration

karimshalapy / useScrollDirection.js

Created December 28, 2020 16:47 — forked from reecelucas/useScrollDirection.js

React hook to detect scroll direction, based on the API of https://github.com/dollarshaveclub/scrolldir

	const SCROLL_UP = "up";
	const SCROLL_DOWN = "down";

	const useScrollDirection = ({
	initialDirection,
	thresholdPixels,
	off
	} = {}) => {
	const [scrollDir, setScrollDir] = useState(initialDirection);

karimshalapy / Dijkstra'sAlgorithm.js

Created December 4, 2020 16:06

Dijkstra's algorithm to find the shortest path between to vertices in a graph as I understand it.

	//Dijkstra's algorithm uses a weighted graph (either directed or undirected) to get the shortest path between any two vertices
	//it's depenedant on creating a priority queue that we will push edges on it with the priority as the weight of the edge
	//here's a simple implementation of priority queue with enqueue and dequeue methods only
	//to read about priority queue check BinaryHeaps.js gist
	class QueueNode {
	constructor(val, priority) {
	this.val = val
	this.priority = priority
	}
	}

karimshalapy / Graph.js

Created December 4, 2020 15:14

Graph data structures, and graph traversing algorithms as I understand them

	//trees are a subset of graphs because graphs are the same as trees and the only difference is that there're no parent child relationships here, because the siblings can have links togethere
	//hence the relations here are neighbors
	//the types of graphs are split into two categories
	//first category: weighted and unweighted graphs
	//weighted graphs have the edges beteween the vertices containing values like distance
	//unweighted graphs have edges with no values only direction
	//second category: directed and undirected graphs
	//directed graphs: have edges with direction look from a vertex to another
	//undorected graphs: the edges have no specific direction, because any edge created is looking both ways to each vertex back and forth
	//they graph structure is used in a lot of applications like network routing or map shortest paths

karimshalapy / HashTable.js

Last active December 4, 2020 13:41

Hash table data structures as I understand them

	//Hash table examples is the object or map in javascript
	//it mainly depends on a good hashing function that runs O(1) and returns the same amount of numerical digits as a return value but unique each time
	//these numbers are used as indices to store items in an array and access it O(1)
	//so inserting, accessing, deletion, all of these are O(1) or dependant on the hashing function
	//start by determining the class
	class HashTable {
	//the constructor should take in size of the array the bigger the less the conflicts the more the size
	//this is a poor implementation for education purposes, and mostly we'll use the already implemented object, or map in javascript
	constructor(size = 53) {
	//we create array with the same length but all the values are empty

karimshalapy / BinaryHeaps.js

Last active December 4, 2020 13:40

Binary heaps data structures, and heapify, and heap saearch algorithms as I understand them

	//Binary heaps are a type of binary trees but with special rules
	//the rules of the heap is that the parent node is bigger than all the children incase of max binary heap, if min heap, then the exact opposite, the parent is the smalles
	//this rule makes it easier to get the smallest (in min heap), or the largest (in max heap) item really quickly
	//the other rule is that the heaps only fill from left to right and can't create a new level of depth without filling the current one
	//by doing that it means that the nodes are always distributed evenly on both sides of the tree
	//note: the children are not sorted at all, the only relation they have together is that they're both smaller than the parent
	//Binary heap is also using a sorting algorithm called binary sort O(log n)
	//start by defining the binary heap class
	class BinaryHeap {
	//constructor doesn't require anything and the class shall have only one property called whatever but in our implemintation this property is going to be an array

karimshalapy / BinaryTree.js

Last active December 4, 2020 23:32

Binary trees and Binary search trees data structures, and traversing algorithms as I understand them

	//define a class for each node in the list
	class Node {
	//the class should have a value, and a left and right pointers
	constructor(val){
	this.val = val
	this.left = null
	this.right = null
	}
	}

karimshalapy / StacksAndQueues.js

Created November 29, 2020 19:49

Stacks and Queues data structures as I understand them

	class Stack {
	//stack is an abstraction datastructure built over another one
	//we can implement stacks using arrays, SLL (singly linked lists), or DLL (doubly linked lists)
	//the stack datastructure follows the rule of LIFO (last in first out) meaning the last item added to the stack will be the first to be removed
	//to implement it with arrays, just define an empty array and keep pushing items onto the array, and pop whenever you want to remove
	//this is not too bad but the arrays have indexing and a ton of methods provided that we need none of them here.
	//so the commonly used datastructure to build the Stacks are SLL or DLL, but the two direction is not required either so it's prefered to use SLL
	//to implement it using an SLL, just define a node and SLL class like the one in SinglyLinkedList.js
	//add the shift and unshift methods to the SLL class
	//that's it

karimshalapy / DoublyLinkedList.js

Created November 29, 2020 19:31

Doubly linked list data structure as I understand it

	//define a class for each node in the list
	class Node {
	//the class should have a value and a next and a previous pointer because this list is two directional
	constructor(val) {
	this.prev = null
	this.val = val
	this.next = null
	}
	}

Karim Shalapy karimshalapy