Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

View tigt's full-sized avatar

Taylor Hunt tigt

View GitHub Profile
@tigt
tigt / webpack.config.js
Created April 17, 2022 03:36
Marko + Sass Webpack config
const path = require('path')
const webpack = require('webpack')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyFilesPlugin = require('copy-webpack-plugin')
const CSSExtractPlugin = require('mini-css-extract-plugin')
const MarkoPlugin = require('@marko/webpack/plugin').default
const nodeExternalsPlugin = require('webpack-node-externals')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
@tigt
tigt / faucet.marko
Created February 12, 2022 03:02
Programmable Faucet: HTML streaming playground with Marko
import { randomString } from './randomstring.js'
$ {
const { query } = input
const chunks = Math.max(0, Math.min(query.chunks || 0, 999))
const size = Math.max(0.001, Math.min(query.kB || 1, 1024))
const delay = Math.max(0.001, Math.min(query.delay || 0.5, 60))
}
<!doctype html>
@tigt
tigt / marko-event-bus.js
Created February 2, 2022 16:52
Event bus for Marko components
/**
* Connect to the event bus. Call in onMount().
* @param {Component} self Pass in `this` from Marko.
* @param {string} event The name of the event to listen on.
* @param {function} fn What to do when the event fires. Takes the data from bus as an argument,
* and `this` is correctly set. (Arrow functions work if you make them in the `class` section.)
*/
export function subscribe (self, event, fn) {
self.subscribeTo(window).on(`bus:${event}`, e => {
fn.call(self, e.detail)
@tigt
tigt / git-branch-to-favicon.js
Created March 18, 2020 21:10
Creates an SVG string that can be used as a favicon across different Git branches. Actually getting this into the browser is sadly project-specific.
const { execSync } = require('child_process')
const { createHash } = require('crypto')
const invertColor = require('invert-color')
const branchName = execSync('git rev-parse --abbrev-ref HEAD')
const hash = createHash('sha256')
hash.update(branchName)
const color = '#' + hash.digest().toString('hex').substring(0, 6)
const invertedColor = invertColor(color, true)
@tigt
tigt / codepen-logo.original.svg
Created April 13, 2016 00:47
Sparkbox: 8794 → 1783 bytes (20.3%) ⁂ Codepen: 1762 → 492 bytes (27.9%)
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@tigt
tigt / brotli-static-compression-dictionary.txt
Last active March 16, 2020 23:17 — forked from anonymous/gist:f66f6206afe40bea1f06
The Web, compressed into a 14,000-word poem
time
down
life
left
back
code
data
show
only
site
@tigt
tigt / gist:a9af3f0dc6fcd38383ed
Last active August 29, 2015 14:23
Look at this horrible `sizes` I came up with
sizes="(orientation: landscape) and (min-width: calc((7/8 * (100vh - 100px)) + 200px)) calc((100vh - 100px) * 8/7 * 0.7142),
(orientation: landscape) calc((100vw - 200px) * 0.7142),
(min-width: calc(7/8 * (100vh - 200px))) calc((100vh - 200px) * 8/7 * 0.7142),
71.42vw"
@tigt
tigt / web-syntaxes.md
Last active April 18, 2016 14:02
A list of syntaxes and microsyntaxes that make up the Web today.

Syntaxes

How many languages and syntaxes make up the Web?

This list is for code on the front-end; the back-end could be literally anything.

Notice this isn't about vocabularies. Many attributes have only certain values they accept, but syntaxes mean the characters are sorted/processed/handled a different way than usual.

The Big Ones