Skip to content

Instantly share code, notes, and snippets.

@branneman
branneman / task-runner.js
Created April 21, 2016 08:32
Streaming task-runner (how gulp works, simplified)
'use strict';
const fs = require('fs');
const glob = require('glob').sync;
const mkdirp = require('mkdirp').sync;
const sass = require('node-sass');
const path = require('path');
const streams = require('stream');
const runner = {};
@Gaya
Gaya / responsive-svg-sprite-template.scss
Last active September 15, 2017 14:19
Responsive SVG Sprite Mixin
/*
* Generate a SVG-sprite mixin for Sass
* ====================================
*
* Gaya Kessler - http://gaya.ninja - http://twitter.com/GayaNinja
*
* SVGSprite is a wonderful package, but doesn't enable responsive sprites out of the box.
* This moustache template generates a sass file with a mixin for the generated SVG-sprite.
* Calculates the position and size of the background by filename.
* Included SVG image scales to width and height.
@peeke
peeke / observer.js
Last active September 21, 2017 07:43
Used for inter-object communication. (Semi-)drop in replacement for Rik Schennink's Observer.
/**
* Used for inter-object communication.
* (Semi-)drop in replacement for Rik Schennink's Observer.
*
* Implementation differences:
* - ES6
* - The use of WeakMaps
* - inform() and conceal() don't return a boolean indicating success.
* - Subscription fn's are called with seperate arguments, instead of one data parameter. This is backwards compatible.
*
(function(open) {
XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
// Do some magic
open.call(this, method, rewrittenUrl, async, user, pass);
};
})(XMLHttpRequest.prototype.open);
@branneman
branneman / composition.js
Last active April 15, 2018 19:51
OO JavaScript: Inheritance vs. Composition
//
// hasPosition trait
//
const hasPosition = state => ({
setPosition: function(x, y) {
this.x = x;
this.y = y;
}.bind(state)
});
@dethi
dethi / unused-files.sh
Last active April 25, 2022 05:34
create-react-app: find files not used in the app bundle, i.e. unused source code
#!/bin/bash
# Launch inside a create-react-app project after building the production build.
# Require `jq`.
diff \
<(find src -type f \( -name '*.js' -o -name '*.jsx' -o -name '*.css' \) | sort) \
<(cat build/**/*.map | jq --raw-output '.sources | join("\n")' \
| grep -v '\.\./' | grep -E '\.(js|jsx|css)$' \
| sed "s#^#src/#" | sort | uniq) \
@icebob
icebob / serve.js
Last active May 1, 2022 16:31
Running Vue CLI 3 generated project with custom Express server
"use strict";
// Generate webpack config with CLI service
const webpackConfig = require("@vue/cli-service/webpack.config.js");
// Create express app
const express = require("express");
const app = express();
// Configure webpack as middleware
@darrenjennings
darrenjennings / useSWR.vue.ts
Created January 24, 2020 22:31
useSWR for Vue hooks
import { Ref, reactive, onMounted, watch, toRefs } from '@vue/composition-api'
// const { data, error } = useSWR('/api/user', fetcher)
export type fetcherFn<Data> = (...args: any) => Data | Promise<Data>
function isDocumentVisible (): boolean {
if (
typeof document !== 'undefined' &&
typeof document.visibilityState !== 'undefined'
) {
@amenuor
amenuor / gist:e7d1508a0bde196758b8
Created November 11, 2015 21:21
CORS on GraphQL Server from relay-starter-kit
import express from 'express';
import cors from 'cors';
import graphQLHTTP from 'express-graphql';
import path from 'path';
import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import {Schema} from './data/schema';
const APP_PORT = 3000;
const GRAPHQL_PORT = 8080;
@paulirish
paulirish / performance.now()-polyfill.js
Last active August 1, 2023 15:42
performance.now() polyfill (aka perf.now())
// @license http://opensource.org/licenses/MIT
// copyright Paul Irish 2015
// Date.now() is supported everywhere except IE8. For IE8 we use the Date.now polyfill
// github.com/Financial-Times/polyfill-service/blob/master/polyfills/Date.now/polyfill.js
// as Safari 6 doesn't have support for NavigationTiming, we use a Date.now() timestamp for relative values
// if you want values similar to what you'd get with real perf.now, place this towards the head of the page
// but in reality, you're just getting the delta between now() calls, so it's not terribly important where it's placed