Skip to content

Instantly share code, notes, and snippets.

Avatar
🦈
Building something cool

Corbin Crutchley crutchcorn

🦈
Building something cool
View GitHub Profile
@crutchcorn
crutchcorn / context-menu.ts
Created Sep 18, 2022
A semi-complex code example in "The Framework Field Guide 1: Fundamentals"
View context-menu.ts
@Injectable()
class CloseIfOutSideContext implements OnDestroy {
getCloseIfOutsideFunction = (contextMenu: ElementRef<HTMLElement>, close: EventEmitter<any>) => {
return (e: MouseEvent) => {
const contextMenuEl = contextMenu?.nativeElement;
if (!contextMenuEl) return;
const isClickInside = contextMenuEl.contains(e.target as HTMLElement);
if (isClickInside) return;
close.emit();
}
View 1-window-hook.ts
const useWindowSize = () => {
// This doesn't handle resizes or SSR, only used for demos
const [height, setHeight] = useState(window.innerHeight);
const [width, setWidth] = useState(window.innerWidth);
return {height, width};
}
@crutchcorn
crutchcorn / DHCP.md
Last active Jul 30, 2022
Networking post WIP
View DHCP.md

DHCP {#dhcp}

DHCP stands for "dynamic host control protocol". It is the method for which machines on a local network automatically retrieve an IP address in order to identiy itself. It requires both a server and a client to work as-expected. This process includes 4 steps:

  1. A client that requires an IP address sends a UDP packet to the local network, asking if there are any DHCP servers on the network. This step is called DHCPDiscover

1a) This request is then ignored by anything that isn't a DHCP server

  1. The DHCP Server responds with an IP address suggestion. It doesn't know where to send it back to, since the requester does not have an IP address yet it will respond using UDP to every machine on the network. This step is called DHCPOffer
View toggle-theme-after.js
let theme = document.documentElement.className;
toggleButton(theme);
themeToggleBtn.addEventListener('click', () => {
theme = currentTheme === 'light' ? 'dark' : 'light';
toggleButton(theme);
localStorage.setItem(COLOR_MODE_STORAGE_KEY, theme)
})
@crutchcorn
crutchcorn / preface-framework-specifics.md
Created Jul 8, 2022
An early draft of one heading in the Preface of "The Framework Field Guide". https://framework.guide
View preface-framework-specifics.md

A note on framework specifics

As a final note, before I send you into the rest of the book/course, I want to touch on a few points about these frameworks:

  • React has two different ways of writing code: Using classes and "Hooks".

While React classes are more similar to Angular or Vue's Option API, I've decided to write this book/course using React's "Hooks" method as references for the components.

This is because, while classes are still a part of the most modern versions of React, they've drastically fallen out of favor in comparison to React Hooks. I want to try to make this book representative of real-world codebases you're likely to run into with modern versions of these frameworks, so I thought it only made sense to go with Hooks.

View breadth-first.js
function treeByLevels (rootNode) {
let sortedArr = []
if (!rootNode) return sortedArr;
sortedArr.push(rootNode.value);
let toReadAfter = [];
currNode = rootNode;
while (currNode) {
currNode.left && sortedArr.push(currNode.left.value);
currNode.right && sortedArr.push(currNode.right.value);
@crutchcorn
crutchcorn / bucketsort.js
Created Jun 3, 2022
A naive implementation of bucket sort
View bucketsort.js
function bucketSort(arrToSort) {
const buckets = {}
for (let num of arrToSort) {
buckets[num] = buckets[num] ?? [];
buckets[num].push(num);
}
let newArr = []
for (let i of Object.keys(buckets)) {
@crutchcorn
crutchcorn / 1-simple-class-usage.js
Last active May 27, 2022
Explaination of `this` keyword in JavaScript through a series of Tweets
View 1-simple-class-usage.js
class Cup {
contents = "water";
consume() {
console.log(
"You drink the ",
this.contents,
". Hydrating!"
);
}
@crutchcorn
crutchcorn / solids-internals.js
Last active May 21, 2022
A basic reproduction of how SolidJS's internal attribute reactivity works
View solids-internals.js
let Listener = undefined;
function readSignal() {
if (Listener) {
this.observers.push(Listener)
}
return this.value;
}
@crutchcorn
crutchcorn / index-based-tracking.js
Last active May 18, 2022
An explaination of how React Hooks work under-the-hood to persist data across function calls (AKA "renders" of FCs)
View index-based-tracking.js
/**
* This is similar to how React tracks hook's data under-the-hood
*/
const state = [];
let idx = 0;
function useState(init) {
const id = ++idx;
state[id] = state[id] ?? {val: init};