Skip to content

Instantly share code, notes, and snippets.

@myfonj

myfonj/assorted-code-snippets.md

Last active April 29, 2021 13:37
Show Gist options
  • Save myfonj/3499424f6aaeaf425edc1f2aeae3fd53 to your computer and use it in GitHub Desktop.
Save myfonj/3499424f6aaeaf425edc1f2aeae3fd53 to your computer and use it in GitHub Desktop.
Download ZIP
Assorted code snippets
Raw
javascript-mistakes.js
// @ts-check
✗ [].contains
✗ [].involves
✓ [].includes
✗ JSON.encode()
✓ JSON.stringify()
Raw
matrixConfLookup.js
/**
* Converts "easy-to-edit" "boolean matrix" object to array object
* @param {Object} matrix rows are whitespace delimited values, 1. row is header
* @returns {Object}
* @example
// returns {
// p1: ['foo'],
// p2: ['foo','baz'],
// p3: ['bar','baz']
// }
matrixConfLookup({
__: ' foo bar baz ',
p1: ' 1 0 0 ',
p2: ' 1 0 1 ',
p3: ' 0 1 1 ',
});
*/
function matrixConfLookup (matrix) {
var result = {};
var header = [];
Object.keys(matrix).forEach(function (key, i) {
var values = matrix[key].trim().split(/\s+/);
if (!i) {
header = values;
} else {
result[key] = values.map(function (v, i) {
return !!Number(v) ? header[i] : false
}).filter(function (v) {
return !!v
})
}
});
return result
}
Raw
named-colors-bruteforce-doodle.html
<!doctype html>
<div id="out"></div>
<script>
wordsCount = 0;
var abc = 'abcdefghijklmnopqrstuvwxyz';
function* permutter(abc) {
var abcLength = abc.length;
var clock = [0];
while (true) {
yield clockToString(clock, abc);
tick(clock, clock.length - 1, abcLength);
}
function tick(clock, idx, abcLength) {
if (idx < 0) {
clock.unshift(-1);
idx = 0;
}
clock[idx] += 1;
if (clock[idx] == abcLength) {
clock[idx] = 0;
tick(clock, idx - 1, abcLength);
}
}
function clockToString(clock, abc) {
return clock.map(
function (i) { return abc.charAt(i) }
).join('')
}
}
var gen = permutter(abc);
var tstEl = document.createElement('span');
var s = tstEl.style
var lastColor = '';
function getRGBStr(strColor) {
s.color = strColor;
if (s.color == lastColor) {
return;
}
lastColor = strColor;
out.appendChild(colorEl(strColor));
if(strColor == 'lightgoldenrodyellow'){
alert('You have won!');
throw 'wow'
}
}
var start = Date.now();
var then = start;
function colorEl(n) {
var d = document.createElement('div');
var e = document.createElement('span');
e.textContent = '█████';
e.style.color = n;
d.appendChild(e);
var now = Date.now();
var txt = [n , tries , 'tries', (now-start)/1000, 's total', (now-then)/1000, 's since last'].join(' | ');
d.appendChild(document.createTextNode(txt));
then = now;
return d
}
var tries = 0;
function chunk(){
if(0)return;
var max = tries + 1e5;
while( tries < max ) {
tries++;
getRGBStr(gen.next().value)
}
setTimeout(function(){requestAnimationFrame(chunk)},20);
}
requestAnimationFrame(chunk);
</script>
<!--
red
tan
gray
lime
navy
blue
teal
aqua
cyan
gold
grey
peru
pink
plum
snow
black
white
green
olive
azure
beige
brown
coral
ivory
khaki
linen
wheat
silver
maroon
purple
yellow
orange
bisque
indigo
orchid
salmon
sienna
tomato
violet
fuchsia
crimson
darkred
dimgray
dimgrey
hotpink
magenta
oldlace
skyblue
thistle
cornsilk
darkblue
darkcyan
darkgray
darkgrey
deeppink
honeydew
lavender
moccasin
seagreen
seashell
aliceblue
burlywood
cadetblue
chocolate
darkgreen
darkkhaki
firebrick
gainsboro
goldenrod
indianred
lawngreen
lightblue
lightcyan
lightgray
lightgrey
lightpink
limegreen
mintcream
mistyrose
olivedrab
orangered
palegreen
peachpuff
rosybrown
royalblue
slateblue
slategray
slategrey
steelblue
turquoise
aquamarine
blueviolet
chartreuse
darkorange
darkorchid
darksalmon
darkviolet
dodgerblue
ghostwhite
lightcoral
lightgreen
mediumblue
papayawhip
powderblue
sandybrown
whitesmoke
darkmagenta
deepskyblue
floralwhite
forestgreen
greenyellow
lightsalmon
lightyellow
navajowhite
saddlebrown
springgreen
yellowgreen
antiquewhite
darkseagreen
lemonchiffon
lightskyblue
mediumorchid
mediumpurple
midnightblue
darkgoldenrod
darkslateblue
darkslategray
darkslategrey
darkturquoise
lavenderblush
lightseagreen
palegoldenrod
paleturquoise
palevioletred
rebeccapurple
blanchedalmond
cornflowerblue
darkolivegreen
lightslategray
lightslategrey
lightsteelblue
mediumseagreen
mediumslateblue
mediumturquoise
mediumvioletred
mediumaquamarine
mediumspringgreen
lightgoldenrodyellow
-->
Raw
permutter.js
function* permutter (abc) {
var abcLength = abc.length;
var clock = [0];
while (true) {
yield clockToString(clock, abc);
tick(clock, clock.length - 1, abcLength);
}
function tick (clock, idx, abcLength) {
if (idx < 0) {
clock.unshift(-1);
idx = 0;
}
clock[idx] += 1;
if (clock[idx] == abcLength) {
clock[idx] = 0;
tick(clock, idx - 1, abcLength);
}
}
function clockToString (clock, abc) {
return clock.map(
function (i) { return abc.charAt(i) }
).join('')
}
}
var gen = permutter('abc');
Array(10).fill(1).map(()=>gen.next().value).join('\n')
Display the source blob
Display the rendered blob
Raw
simple-static-pie-chart.svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="outline: 1px solid red"
width="100%" height="100%"
viewBox="0 0 31.8309886184 31.8309886184">
<g stroke-width="31.8309886184">
<use xlink:href="#graph" stroke="dimgray" stroke-width="1%"></use>
<use xlink:href="#graph" stroke="#5d292a" stroke-dasharray="0 25 50 0" stroke-width="50%"></use>
<use xlink:href="#graph" stroke="#9e8f8a" stroke-dasharray="0 75 10 0" stroke-width="75%"></use>
</g>
<defs>
<circle id="c" r="15.9154943092" transform="rotate(-90)"></circle>
<mask id="clip">
<use xlink:href="#c" fill="#fff"></use>
</mask>
<symbol viewbox="-15.9154943092 -15.9154943092 31.8309886184 31.8309886184" id="graph">
<use xlink:href="#c" mask="url(#clip)" fill="none"></use>
</symbol>
</defs>
</svg>
Raw
stringToNumber-numberToString.js
function stringToNum (str, base) {
var bl = base.length
return str.split('').reduce(
function (acc, char, idx, arr) {
return acc += Math.pow(bl, arr.length - idx - 1) * base.indexOf(char)
}, 0
);
}
function numToString (num, base) {
var bl = base.length;
var ret = '', mod;
if (!num) return base.charAt(0);
while (num) {
mod = num % bl;
num -= mod;
num /= bl;
ret = base.charAt(mod) + ret;
}
return ret;
}
var abc = 'abcdefghijklmnopqrstuvwxyz'
//numToString(255,'0123456789abcdef') == 'ff'
//stringToNum('12345','0123456789')
// stringToNum('ba',abc) == 26
//numToString(100000000000000000000000000000,abc)
Raw
table-spread-rowspan.js
{let cell;
while (cell = document.querySelector('[rowspan]')) {
let rs = 'rowspan';
let row = cell.parentElement;
let tbody = row.parentElement;
let rowspan = Number(cell.getAttribute(rs));
let cellIndex = cell.cellIndex;
let clone = cell.cloneNode(true);
clone.removeAttribute(rs);
//debugger;
while(--rowspan){
cell.setAttribute(rs,rowspan);
let targetRow = tbody.children[row.rowIndex+rowspan];
if(targetRow.cells.length<cellIndex) {
targetRow.appendChild(clone);
} else {
targetRow.insertBefore(
clone.cloneNode(true),
targetRow.cells[cellIndex]
)
}
}
cell.removeAttribute(rs);
}}
Raw
various.css
/* Method to visually hide something but still */
/* make it available to screen readers */
.visually-hidden {
position: absolute;
top: auto;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE 6/7 */
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
white-space: nowrap;
}
/*
https://adrianroselli.com/2020/01/my-priority-of-methods-for-labeling-a-control.html
https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
*/
/*
Logical Operations with CSS Variables
by Ana Tudor
https://css-tricks.com/logical-operations-with-css-variables/
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment