Skip to content

Instantly share code, notes, and snippets.

View mzgoddard's full-sized avatar

Z Goddard mzgoddard

  • Bocoup
  • Boston, MA
View GitHub Profile
@mzgoddard
mzgoddard / hard-webpack-cache.js
Last active August 8, 2016 20:19
Experimenting with a Hard Webpack Cache
{
apply: function(compiler) {
var times = {};
var cache = {};
var moduleCache = {};
try {
cache = JSON.parse(require('fs').readFileSync(__dirname + '/webpack.resolve.cache.json', 'utf8'));
require('fs').readdirSync(__dirname + '/webpack.module.cache').forEach(function(name) {
let subcache = JSON.parse(require('fs').readFileSync(__dirname + '/webpack.module.cache/' + name, 'utf8'));
let key = Object.keys(subcache)[0];
@mzgoddard
mzgoddard / animated-grammar.js
Created June 24, 2016 18:52
BoxArt Animated Grammar WIP
function buildConcat(setBuild, space) {
if (setBuild.length === 0) {
return function(t) {
return '';
};
}
else if (setBuild.length === 1) {
var a = setBuild[0];
return function(t) {
return a(t);
@mzgoddard
mzgoddard / webpack-those-assets.md
Created February 29, 2016 15:39
Webpacking an application and processing assets with it.

would love to hear how you're getting your hashed assets to your cdn, and how you're making those urls known to your app

I've been using webpack for a while now and in projects released online using webpack's idioms and some of it's options defaults to take my non-code assets and output them with hashed names. Setting another option and using a community plugin makes it easy to output the javascript files with hashed names and automatically include those in html files.

Using webpack getting the output hashed names into the app mostly goes through two parts, file-loader and webpack's loader context method emitFile.

Getting an asset included in the build and its hashed output name is like getting another javascript file in the build. Getting a javascript file included happens from requiring it with something like var someFileOutput = require('./some-file.js');. Getting an asset included uses the same pattern var someImageOutput = require('./some-image.png');. By default webpack treats every included fi

@mzgoddard
mzgoddard / lodash-init-loader.js
Last active October 1, 2015 15:15
Example custom lodash initialization loader
// web_loaders/lodash-init-loader.js
// example way to create a custom loader to modify
module.exports = function(source) {
return source + [
'',
'module.exports = (',
'this.options.lodashInit.toString().split('\n'),',
')(_);',
].join('\n');
};
@mzgoddard
mzgoddard / helper-initializer.js
Created April 23, 2015 03:35
Example ember-loader configuration to add handlebar helper loading.
// src/initializers/helper.js
exports.name = 'helper';
exports.initialize = function(container, app) {
Object.keys(app.HELPERS).forEach(function(key) {
Ember.Handlerbars.helper(key.replace(/\//g, '-'), app.HELPERS[key]);
});
};
@mzgoddard
mzgoddard / 01-abstract.md
Last active August 29, 2015 14:14
Welder API Brainstorm 1

Welder exposes 3 major hooks and 1 minor one. Commands create a promise chain with the other 2 major hooks settle and reduce. Settle creates a hash of immutable data. Reduce operates in series on the same data. Settle and reduce are called with a name which expands by the command running it into a series of name sets to match against settle and reduce handles registered. If there are multiple handles registeredto the same matching name set, the minor hook, order, determines the sorting order of these handels.

  • command: performs a set of settle and reduce hooks
  • settle: returns immutable data optionally cached, errors are ok
  • reduce: operate on last value, error at the end is not ok, handlers can fix errors
  • order: used in settle and reduce to order multiple handles

'sync:graph' - matches in the high level order, handles on the same match rely on a 'order' handle to sort them. default 'order' is to warn and sort by generated name, causing registration order to determine order.

  • 'sync:graph:f
@mzgoddard
mzgoddard / 01-style-bindings.js
Last active August 29, 2015 14:14
Style bindings ember mixin
export default Ember.Mixin.create({
attributeBindings: ['style'],
concatenatedProperties: ['styleBindings'],
styleBindings: [],
_styleBoundValues: function() {
var values = Ember.ArrayProxy.create({content: []});
this.get('styleBindings').map(function(key, index) {
var observer = function() {
@mzgoddard
mzgoddard / workdays.js
Created January 31, 2015 06:56
Add a number of workdays to a starting date.
// Solution to https://gist.github.com/jmeas/0a713e0b9901a25a32f1.
module.exports = function(start, increment) {
// Parse the date.
var d = new Date(start);
// Determine day of week.
var day = d.getUTCDay();
// Determine sign.
var sign = Math.sign(increment);
var absIncrement = Math.abs(increment);
@mzgoddard
mzgoddard / 01_reduce.js
Last active August 29, 2015 14:10
Dummy source node map, with reduction over non-word tokens.
SourceMapConcatHelper.prototype._dummyNode = function(src, name) {
var node = new SourceNode();
var lineIndex = 1;
var charIndex = 0;
// Tokenize on words, new lines, and white space.
var tokens = src.split(/(\n|\b)/g);
// Filter out empty strings.
tokens = tokens.filter(function(t) { return !!t; });
// Reduce whitespace tokens together.
tokens = tokens.reduce(function(dest, t, index, src) {
@mzgoddard
mzgoddard / awebp.sh
Created August 20, 2014 16:44
Turn a movie into an animated webp.
#!/bin/zsh
movieInput=$1
tmpFolder=$2
outName=$3
mkdir -p $tmpFolder
ffmpeg -i $movieInput $tmpFolder/%03d.png
for i in `ls $tmpFolder`; do
j=`echo $i | sed s/\.png/.webp/`