Skip to content

Instantly share code, notes, and snippets.

Avatar
📒
Writing like whoa

Corbin Crutchley crutchcorn

📒
Writing like whoa
View GitHub Profile
@crutchcorn
crutchcorn / app.component.html
Created June 4, 2023 16:07
Weird framework idea
View app.component.html
<button data-on-click="updateCount()">Count</button>
<p>Count: {{count.value}}</p>
<p>Double: {{double.value}}</p>
<p data-if="count.value % 2 === 0">{{count.value}} is even</p>
<p data-if="count.value % 2 !== 0">{{count.value}} is odd</p>
<Child/>
@crutchcorn
crutchcorn / setTimeoutGrossPolyfill.js
Created May 29, 2023 10:04
Eww, a JS-only setTimeout polyfill??
View setTimeoutGrossPolyfill.js
globalThis.setTimeout = (cb, num) => {
const start = Date.now();
function loop() {
return new Promise((resolve) => {
queueMicrotask(() => {
const now = Date.now();
const diff = now - start;
if (diff < num) {
loop()
@crutchcorn
crutchcorn / after.js
Created March 26, 2023 07:04
Used in a Twitter thread
View after.js
// ...
let theme = document.documentElement.className;
toggleButtonIcon(theme);
themeToggleBtn.addEventListener('click', () => {
theme = theme === 'light' ? 'dark' : 'light';
toggleButtonIcon(theme);
});
View minimal-angular-from-scratch.js
class Zone {
constructor() {
this.tasks = [];
}
// Add a new task to the zone
add(task) {
this.tasks.push(task);
}
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)
var(--code-block-corner-radius_inner);
}
@crutchcorn
crutchcorn / react-add-children-to-component
Created November 16, 2022 04:46
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
crutchcorn / context-menu.ts
Created September 18, 2022 17:14
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};
}
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)
})