Skip to content

Instantly share code, notes, and snippets.

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.")
})
// Or useInsertionEffect if it's React 18
useLayoutEffect(() => {
ref.current = callback
})
@marvinhagemeister
marvinhagemeister / little-vdom-decompiled.js
Created March 8, 2020 14:13
Jason little-vdom decompiled
/* eslint-disable no-unused-vars */
/* eslint-disable no-else-return */
// JSX constructor, similar to createElement()
export const h = (type, props, ...children) => {
return {
type,
// Props will be an object for components and DOM nodes, but a string for
// text nodes
props,
@tomhicks
tomhicks / plink-plonk.js
Last active November 12, 2024 19:08
Listen to your web pages
@bradtraversy
bradtraversy / docker_wordpress.md
Last active November 20, 2024 14:11
Docker Compose FIle For Wordpress, MySQL & phpmyadmin

Wordpress & Docker

This file will setup Wordpress, MySQL & PHPMyAdmin with a single command. Add the code below to a file called "docker-compose.yaml" and run the command

$ docker-compose up -d

# To Tear Down
$ docker-compose down --volumes
@bradtraversy
bradtraversy / django_cheat_sheet.md
Last active October 12, 2024 12:00
Django command cheat sheet

Django 2.x Cheat Sheet

Creating a virtual environment

We need to create a virtual env for our app to run in: More Here Run this command in whatever folder you want to create your venv folder

python -m venv ./venv
<!DOCTYPE html>
<html>
<head>
<title>Google Fonts Preview</title>
<style>
#preview {
margin: 0 auto;
text-align: center;
width: 80%;
}
@crazy4groovy
crazy4groovy / react-jets.js
Last active October 23, 2018 00:18
CSS-based, dynamic list search/filter with *insane* render performance - jets.js.org
/**
* Inspired by: https://jets.js.org
**/
import React from 'react'
import PropTypes from 'prop-types'
const style = Object.freeze({
borderRadius: '5px',
padding: '.1em'
})
dashboard "Food":
- h1 text: Food
- h2 text: By caloric content
- 3 columns:
- rows:
- h3 text: Bananas
- pie chart: {
"columns": [
["Protein", 5], ["Sugar", 10], ["Other carbs", 40], ["Fat", 1]
]
@ericwbailey
ericwbailey / file-types.css
Last active December 8, 2020 07:03
#writing #css-tricks
/*
* Archives
* A compressed collection of data.
*/
a[href$=".7z"],
a[href$=".cab"],
a[href$=".gz"],
a[href$=".lzh"],
a[href$=".rar"],
a[href$=".tar"],
@crazy4groovy
crazy4groovy / ProgressBar.css
Last active May 16, 2018 15:50
Simple progress bar for ReactJs
#progress-bar {
border: 1px solid lightblue;
position: fixed;
top: 0;
left: 0;
opacity: 1;
transition: opacity .5s ease-in-out;
animation: progress-bar-grow 10s 0s infinite alternate backwards;
}