Jo du Plessis joduplessis

☕

Brewing coffee.

Pew pew pew.

joduplessis / nodify.zsh-theme

Created May 29, 2024 06:51

zsh theme for minimal Node dev

	function node_prompt_version {
	if which node &> /dev/null; then
	echo "%{$fg_bold[blue]%}node(%{$FG[129]%}$(node -v)%{$fg[blue]%}) %{$reset_color%}"
	fi
	}

	PROMPT='%{$FG[198]%}%~%{$reset_color%} $(node_prompt_version)$fg[blue]%{$fg[blue]%}(%{$FG[171]%}$(git_current_branch)%{$fg[blue]%}) %{$FG[129]%}➜ '

	ZSH_THEME_GIT_PROMPT_PREFIX="%{$fg_bold[blue]%}git:(%{$fg[red]%}"
	ZSH_THEME_GIT_PROMPT_SUFFIX="%{$reset_color%} "

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 / 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 / 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 / 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 / index.sass

Created November 7, 2022 17:43

Programatically create theme CSS properties with Sass.

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 / 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 / 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 / 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>