Skip to content

Instantly share code, notes, and snippets.

Building something cool

Corbin Crutchley crutchcorn

Building something cool
View GitHub Profile
View tabs-border-roundness.css
ul.tabs__tab-list:has(> .tabs__tab:first-child:not([aria-selected="true"]))
~ .tabs__tab-panel {
border-radius: var(--code-block-corner-radius_inner);
ul.tabs__tab-list:has(> .tabs__tab:first-child[aria-selected="true"])
~ .tabs__tab-panel {
border-radius: 0 var(--code-block-corner-radius_inner)
crutchcorn / react-add-children-to-component
Created Nov 16, 2022
A TypeScipt type to add children to older React components that don't have children declared
View react-add-children-to-component
import { ComponentType, PropsWithChildren } from "react";
import { Text } from "react-native";
import { Wrapper } from "aws-amplify-react-native";
// 🪄 This is the magic
type AddChildrenToComponent<T> = T extends ComponentType<infer P>
? ComponentType<PropsWithChildren<P>>
: never;
const WrapperWithChildren = Wrapper as AddChildrenToComponent<typeof Wrapper>;
View fill-route.ts
// OK
const firstRoute = ":test"; // Or ":test/" or "/:test" or "other/:test", etc
fillRoute(firstRoute, {
test: "hello",
// Type error - not enough params
const secondRoute = ":test/:other";
fillRoute(secondRoute, {
test: "hello",
crutchcorn / context-menu.ts
Created Sep 18, 2022
A semi-complex code example in "The Framework Field Guide 1: Fundamentals"
View context-menu.ts
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( as HTMLElement);
if (isClickInside) return;
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};
View toggle-theme-after.js
let theme = document.documentElement.className;
themeToggleBtn.addEventListener('click', () => {
theme = currentTheme === 'light' ? 'dark' : 'light';
localStorage.setItem(COLOR_MODE_STORAGE_KEY, theme)
crutchcorn /
Created Jul 8, 2022
An early draft of one heading in the Preface of "The Framework Field Guide".

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;
let toReadAfter = [];
currNode = rootNode;
while (currNode) {
currNode.left && sortedArr.push(currNode.left.value);
currNode.right && sortedArr.push(currNode.right.value);
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] ?? [];
let newArr = []
for (let i of Object.keys(buckets)) {
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() {
"You drink the ",
". Hydrating!"