Skip to content

Instantly share code, notes, and snippets.

View joduplessis's full-sized avatar
Brewing coffee.

Jo du Plessis joduplessis

Brewing coffee.
View GitHub Profile
@joduplessis
joduplessis / state.js
Created September 11, 2023 07:30
Stupid simple global state management using React Hooks.
import React, { useState, useEffect } from 'react'
let state = { user: { name: '' } }
export const dispatch = (data) => {
const { namespace, ...rest } = data
state = { ...state, ...rest }
window.dispatchEvent(new CustomEvent(namespace, { detail: data }))
}
@joduplessis
joduplessis / generated-web-react.ts
Created August 16, 2023 06:39
Fastify plugin that generates React hooks & service methods from a config object in the header.
const workspacesReact = () => {
const [error, setError] = useState(null)
const [loading, setLoading] = useState(null)
const params = useParams()
const { some, shit } = location
const [name, setName] = useState('')
const handleWorkspacesPost = async () => {
setLoading(true)
@joduplessis
joduplessis / iterate-over-radio-group.js
Last active August 16, 2023 06:41
Nice easy way of iterating over radiogroup
const radioGroup = e.target.closest('*[role=radiogroup]')
const isDown = e.keyCode == 40
const isLeft = e.keyCode == 37
const isUp = e.keyCode == 38
const isRight = e.keyCode == 39
if (radioGroup) {
const children = radioGroup.querySelectorAll('[role=radio]')
const index = [...children].indexOf(e.target)
const nextIndex = index + 1 == children.length ? 0 : index + 1
@joduplessis
joduplessis / stars.css
Created November 10, 2022 19:01
CSS for highlighting all previous stars in a rating component (without JS!).
.rate {
width: fit-content;
}
.rate__star {
color: var(--f-color-text-weakest);
padding: var(--f-size-1);
}
.rate__star:hover {
@joduplessis
joduplessis / index.sass
Created November 7, 2022 17:43
Programatically create theme CSS properties with Sass.
$themeColours: (
"gray",
"red",
"orange",
"yellow",
"green",
"teal",
"blue",
"cyan",
"purple",
@joduplessis
joduplessis / tokens.ts
Created October 14, 2022 12:57
Recursively create tokens from JS objects
import { objects } from './objects'
const createTokenObject = (obj) => {
let o = {}
Object.keys(obj).map((key) => {
if (typeof obj[key] == "object") {
o[String(key)] = createTokenObject(obj[key])
} else {
o[String(key)] = { value: obj[key] }
}
@joduplessis
joduplessis / config-1-file.js
Created September 9, 2022 09:11
Style Dictionary setups for exporting darkValue values to 1 file or to 2 files.
function darkFormatWrapper(format) {
return function (args) {
const darkTokens = []
const dictionary = {
...args.dictionary
}
// Strip out the dark tokens
dictionary.allTokens = dictionary.allTokens.map((token) => {
const { darkValue } = token;
@joduplessis
joduplessis / update.sh
Created May 9, 2022 16:56
Custom GitHub org name using API
curl -H "Authorization: bearer githubtoken" -d '{"location":"Noice"}' https://api.github.com/orgs/orgname
@joduplessis
joduplessis / index.html
Created May 2, 2022 08:18
Basic (very old) WebRTC test
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video autoplay controls></video>
<button onClick="javascript:start()">Connect</button>
@joduplessis
joduplessis / index.html
Created March 1, 2022 11:43
The Adtriba coding challenge. Form solution + draggable input curve.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
* {
font-family: sans-serif;
outline: none;
text-decoration: none;