Skip to content

Instantly share code, notes, and snippets.

@crazy4groovy
crazy4groovy / event.html
Created Dec 1, 2022
simple HTML page to download a file
View event.html
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<title>Redirecting&hellip;</title>
<link rel="canonical" href="/event.ics">
<script>location="/event.ics"</script>
<meta http-equiv="refresh" content="0; url=/event.ics">
<meta name="robots" content="noindex">
<h1>Redirecting&hellip;</h1>
@crazy4groovy
crazy4groovy / package.json
Created Oct 13, 2022
dependency-cruiser to generate ES import dependencies as a map (SVG)
View package.json
...
"scripts": {
"arch": "depcruise --include-only \"^src\" --output-type dot src | dot -T svg > dependencygraph.svg",
...
"dependencies": {
"dependency-cruiser": "^11.16.0",
...
@crazy4groovy
crazy4groovy / app.js
Last active Nov 4, 2022
context + hook pattern (ReactJS)
View app.js
import { UserProvider } from "./context"
import { Component } from "./component"
export default function App() {
return (
<UserProvider>
<h1>Context App</h1>
<Component />
<br />
<Component />
View brev.sh
# https://docs.brev.dev/howto/automatically-set-up/
##### Homebrew #####
(echo ""; echo "##### Homebrew #####"; echo "";)
curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh | bash -
echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"' >> /home/brev/.bash_profile
echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"' >> /home/brev/.zshrc
eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"
brew install fnm
@crazy4groovy
crazy4groovy / useEvent.tsx
Last active May 19, 2022 — forked from diegohaz/useEvent.tsx
Make a component callback prop stable (i.e. cannot be used during render phase) (ReactJS)
View useEvent.tsx
type AnyFunction = (...args: any[]) => any
function useEvent<T extends AnyFunction>(callback?: T) {
const ref = useRef<AnyFunction | undefined>(() => {
throw new Error("Cannot call an event handler while rendering.")
})
useLayoutEffect(() => {
ref.current = callback
})
return useCallback<AnyFunction>(
@crazy4groovy
crazy4groovy / toKeyedArray.js
Created Apr 26, 2022
A wrapper that takes an object and defines some array-like behavior for it (JavaScript)
View toKeyedArray.js
// credit: https://www.30secondsofcode.org/articles/s/javascript-object-array-proxy
const toKeyedArray = obj => {
const methods = {
map(target) {
return (callback) =>
Object.keys(target).map(key => callback(target[key], key, target));
},
reduce(target) {
return (callback, accumulator) =>
@crazy4groovy
crazy4groovy / immutable.js
Last active Apr 26, 2022
Using a Proxy object to enforce immutability, instead of Object.freeze (JavaScript)
View immutable.js
// credit: https://www.30secondsofcode.org/articles/s/js-immutable-object-proxy
const term = {
id: 1,
value: 'hello',
properties: [{ type: 'usage', value: 'greeting' }],
};
const immutable = obj =>
new Proxy(obj, {
@crazy4groovy
crazy4groovy / on-jsx-presentation.markdown
Last active Apr 26, 2022 — forked from chantastic/on-jsx.markdown
JSX presentation composition
View on-jsx-presentation.markdown

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

@crazy4groovy
crazy4groovy / ShiftBy.js
Last active Mar 14, 2022
Shift web components around in small increments. (ReactJS)
View ShiftBy.js
// No matter how impressive your design system is, there will always be times that small layout adjustments are required. This handy component lets you shift things around in small increments.
// credit: https://www.joshwcomeau.com/snippets/react-components/shift-by/
import React from 'react';
function ShiftBy({ x = 0, y = 0, children }) {
return (
<div
style={{
transform: `translate(${x}px, ${y}px)`,
@crazy4groovy
crazy4groovy / neutralino.config.json
Created Mar 10, 2022
Neutralinojs config file for ReactJs apps (working!) (JavaScript)
View neutralino.config.json
{
"applicationId": "js.neutralino.fpp",
"port": 0,
"version": "1.0.0",
"defaultMode": "window",
"documentRoot": "/",
"url": "/react-app/build/",
"enableServer": true,
"enableNativeAPI": true,
"tokenSecurity": "one-time",