Skip to content

Instantly share code, notes, and snippets.

treyhoover / useStatus.ts
Last active July 26, 2023 19:19
Hook for automatically creating helpers to
import { useState, useMemo } from "react";
// Usage example (booleans)
const userActivity = useStatus([true, false]);
userActivity.status; // true
ifyoumakeit / github-conventional-comments.js
Last active May 14, 2024 08:49
GitHub Conventional Comments (instructions to install in comment below code)
(async function generateReplies(document) {
const LABEL = {
praise: "praise",
nitpick: "nitpick",
suggestion: "suggestion",
issue: "issue",
todo: "todo",
question: "question",
thought: "thought",
dornfeder /
Last active January 24, 2024 09:38
Git Branching Diagram Template

Git Branching Diagram Template for

This is my own variant of a git branching diagram template based on Bryan Braun's great template.

You can use this diagram as a template to create your own git branching diagrams. Here's how:

  1. Create a new diagram with (formerly
  2. Go to File > Open From > URL
  3. Insert this url (it points to the xml data below):
  4. Customize as needed for your team.
const express = require('express');
const { html, Component } = require('htm/preact');
const renderToString = require('preact-render-to-string');
class App extends Component {
render(props) {
return html`
<div class="app">
<h1>This is an app</h1>
<p>Current server time: ${new Date + ''}</p>
bessfernandez /
Last active March 28, 2023 16:37
How to setup a simple Storybook HTML demo app


Storybook for HTML

Storybook is all about writing stories. A story usually contains a single state of one component, almost like a visual test case.

Typically you see Storybook used for React or other frameworks, but the library has recently introduced the option to use HTML for your Storybook projects. As a prototyping tool or playground this is great! No larger scale knowledge of other frameworks needed.

Install Storybook HTML

MariaJackson1 / Poor Man's Style Guide
Last active August 8, 2022 21:03
Poorman's Styleguide
<h1 id="headings">Headings</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
* Example 1
anchors.options = {
placement: 'right',
visible: 'hover',
wiledal / template-literals-3-for-loops.js
Last active March 13, 2023 22:47
Template Literals example: For loops
Template literals for-loop example
Using `Array(5).join(0).split(0)`, we create an empty array
with 5 items which we can iterate through using `.map()`
var element = document.createElement('div')
element.innerHTML = `
<h1>This element is looping</h1>
${Array(5).join(0).split(0).map((item, i) => `
matthewmueller /
Last active April 21, 2024 03:30
OSX for Hackers (Mavericks/Yosemite)
# OSX for Hackers (Mavericks/Yosemite)
# Source:
# Some things taken from here
# Ask for the administrator password upfront
jordanmoore / Better Emmet Media Queries
Created November 18, 2013 10:08
Go to Preferences > Browse Packages > Emmet > Emmet.sublime-settings and add this between the curly brackets under snippets for writing better media queries quickly in Emmet. mqm => min-width media query mqx => max-width media query
"css": {
"abbreviations": {
"mqm": "@media screen and (min-width:${1}) {\n\t|\n}",
"mqx": "@media screen and (max-width:${1}) {\n\t|\n}"