Skip to content

Instantly share code, notes, and snippets.

Avatar
🦈
Building something cool

Corbin Crutchley crutchcorn

🦈
Building something cool
View GitHub Profile
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 / 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};
@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 / ng-pass-validator.ts
Created Apr 3, 2022
Angular password validator
View ng-pass-validator.ts
function passwordValidator(control: AbstractControl): ValidationErrors | null {
let errors: ValidationErrors = {};
const value = control.value;
if (!/[0-9]/.exec(value)) {
errors['hasNoNum'] = true;
}
if (!/[A-Z]/.exec(value)) {
errors['hasNoUppercase'] = true;
}
View webpack.config
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const root = path.resolve(__dirname, "./");
module.exports = {
name: "seaside-react",
entry: "./src/index.tsx",
externals: {
View promisify.js
const promisify = (fn) => {
return (...args) => {
return new Promise(resolve => {
fn(...args, (...data) => resolve(...data))
})
}
}
promisify((one, cb) => cb(one))(1).then(one => console.log(one))