Skip to content

Instantly share code, notes, and snippets.

View Munter's full-sized avatar

Peter Müller Munter

383 followers · 17 following
View GitHub Profile
@Munter
Munter / inlineCriticalCss.js
Last active October 29, 2016 13:34
/*
* This transform works on an assumption about browser loading and rendering behavior of CSS:
* When a browser loads CSS in <head> it render blocks untill all CSS in <head> has loaded.
*
* That might be slow.
*
* To appear faster, browsers will render what they have in buffer already if they meet a style <link> in <body>
* before they dive into the render blocking load.
* This lets you potentially inline critical css in <head> and put the bulk of your CSS "below the fold".
* The effect will be a quick render with critical styles applied, just before the render blockign starts.
@Munter
Munter / northernlights.js
Created August 26, 2016 13:34
Lighting control program for JSConf Iceland northern lights
const { totalCols } = config
function crazyCaterpillar(time) {
const newLights = new Lights()
let dead = [];
for (let i = 0; i < 3; i++) {
dead.push(Math.round(Math.random() * totalCols));
@Munter
Munter / fs.write.js
Created July 23, 2016 19:42
What is the expected console output of the following?
var fs = require('fs');
fs.open('hello-world.txt', 'ax', function (err, fd) {
if (err) {
console.error(err);
}
fs.write(fd, new Buffer('hello world'), function (err) {
if (err) {
console.log('manual', 'noooo');
@Munter
Munter / drop.html
Created June 16, 2016 19:31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 { padding: 50px 200px; border: 3px dotted gray; }
h1.drag { background: #123456; cursor: grabbing;}
</style>
@Munter
Munter / check-jspm-config.js
Created July 7, 2015 12:34
Small script to automatically verify that a jspm package has been correctly installed and configured
var jspm = require('../package.json').jspm;
var jsdom = require('jsdom');
var async = require('async');
var chalk = require('chalk');
var express = require('express');
var app = express();
app
.get('*.html', function (req, res) {
@Munter
Munter / RadioGroupComponent-test.jsx
Last active December 7, 2020 09:13
React radio input group component, giving you a single selected value across a range of radio inputs in its children
define(function (require) {
var expect = require('unexpected');
var React = require('react');
var ReactTestUtils = React.addons.TestUtils;
var RadioGroup = require('jsx!../RadioGroupComponent.jsx');
describe('RadioGroupComponent', function() {
@Munter
Munter / mailtoNewTab.js
Created May 20, 2015 14:08
Always open mailto: links in a new tab. Useful when using webmail clients as mailto: scheme handlers
document.body.addEventListener('focus', function (el) {
if (el.tagName === 'A' && (el.getAttribute('href') || '').indexOf('mailto:') === 0) {
el.setAttribute('target', '_blank');
}
}, false);
@Munter
Munter / mntr.dk.tap
Last active August 29, 2015 14:18
hyperlink tap output
TAP version 13
# Crawling internal assets
ok 1 loading https://mntr.dk/
ok 2 loading https://mntr.dk/favicon.ico
ok 3 loading https://mntr.dk/assets/images/favicon/152.png
ok 4 loading https://mntr.dk/assets/images/favicon/144.png
ok 5 loading https://mntr.dk/assets/images/favicon/120.png
ok 6 loading https://mntr.dk/assets/images/favicon/114.png
ok 7 loading https://mntr.dk/assets/images/favicon/72.png
ok 8 loading https://mntr.dk/assets/images/favicon/57.png
@Munter
Munter / example.css
Created March 4, 2015 22:03
/* Different size images based on same source image */
.thing-4x { background-size: 100px; background-image: url(image.svg?inkscape&resize=400); }
.thing-2x { background-size: 100px; background-image: url(image.svg?inkscape&resize=200); }
.thing-1x { background-size: 100px; background-image: url(image.svg?inkscape&resize=100); }
/* Different size images based on same source image, in individual sprite sheets */
.thing-4x { background-size: 100px; background-image: url(image.svg?inkscape&resize=400&sprite=4x); }
.thing-2x { background-size: 100px; background-image: url(image.svg?inkscape&resize=200&sprite=2x); }
.thing-1x { background-size: 100px; background-image: url(image.svg?inkscape&resize=100&sprite=1x); }
@Munter
Munter / animation.css
Created March 4, 2015 21:16
.frame-1 { background-image: url(frames/1.png?sprite); }
.frame-2 { background-image: url(frames/2.png?sprite); }
.frame-3 { background-image: url(frames/3.png?sprite); }
.frame-4 { background-image: url(frames/4.png?sprite); }
.frame-5 { background-image: url(frames/5.png?sprite); }
.frame-6 { background-image: url(frames/6.png?sprite); }
.frame-7 { background-image: url(frames/7.png?sprite); }
.frame-8 { background-image: url(frames/8.png?sprite); }
.frame-9 { background-image: url(frames/9.png?sprite); }