badsyntax

// Test whether flex-grow will work on elements whose parents
// have min-height set. IE11 does not pass this test.
(function testMinheightflexgrow(Modernizr) {
	Modernizr.testStyles([
		'#modernizr{display:flex;min-height:10px;}',
		'#modernizr :first-child{flex-grow:1;}'
	].join(''), function(elem, rule) {
		Modernizr.addTest('minheightflexgrow', elem.firstElementChild.offsetHeight === 10);
	}, 2);
}(window.Modernizr));

badsyntax

• IE11 will ignore the border-box box model when calculating the flex-basis width. EG: https://gist.github.com/badsyntax/61b28a0c9f804c483e8a
• IE11 will not apply flexbox on pseudo-elements. EG: http://jsbin.com/zawaju/1 (Reported here: https://connect.microsoft.com/IE/feedbackdetail/view/1058330/ie11-will-not-apply-flexbox-on-pseudo-elements)
• IE11 has issues with flex-grow, justify-content: space-around and max-width https://connect.microsoft.com/IE/feedbackdetail/view/951267/horizontal-scrolling-with-flex-grow-max-width
• IE11 flex-grow will not work with containers with min-height set: https://connect.microsoft.com/IE/feedback/details/816293/ie11-flexbox-with-min-height-not-vertically-aligning-with-align-items-center and here:https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

badsyntax

.fix {
	padding: rem(10px) $gutterMargin;

	// We revert to using content-box and calc() as IE11 will ignore the border-box
	// box model when calculating the flex-basis width.
	box-sizing: content-box;
	@include flex-basis(calc(33.3333% - (#{$gutterMargin} * 2)));
}

badsyntax

padding: rem(10px) $gutterMargin;

// We revert to using content-box and calc() as IE11 will ignore border-box when
// calculating the flex-basis width.
box-sizing: content-box;
@include flex-basis(calc(33.3333% - (#{$gutterMargin} * 2)));

badsyntax

# SSL termination at proxy

global
  log /dev/log  local0
  log /dev/log  local1 notice
  chroot /var/lib/haproxy
  stats socket /run/haproxy/admin.sock mode 660 level admin
  stats timeout 30s
  user haproxy
  group haproxy

badsyntax

[program:node-server]
directory=/var/www
command=/usr/bin/npm start
stopasgroup=true
autostart=true
autorestart=true

[program:node-watch]
directory=/var/www
command=/usr/bin/npm run watch

badsyntax

#!/usr/bin/env bash

i=0;
for file in *.jpg
do
	((i++))
	# Resize
	convert $file -resize 588x452\! resized/`basename $file`
	# Overlay an index number
	convert resized/`basename $file` -pointsize 50 -fill white  -undercolor '#00000080' -gravity North -annotate +0+10 $i resized/`basename $file`

badsyntax

The final result: require() any module on npm in your browser console with browserify

This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.

inspiration

My inspiration for building this was Max Ogden's Requirebin, which allows users to use a browser based editor to run custom javascript in the browser (including javascript that had require() statements that would normally need to be pre-processed using browserify).

badsyntax

{
	"directory": "assets/components"
}

badsyntax

var bower = require('bower');
var path = require('path');

var cwd = path.resolve(__dirname, 'project');

bower.commands.install([], {}, {
  cwd: cwd
})
.on('log', function(result) {
  console.log(result.id, result.message);