Steffen Bruchmann sbruchmann

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

In all the discussions about ES6 one thing is bugging me. I'm picking one random comment here from this io.js issue but it's something that comes up over and over again:

There's sentiment from one group that Node should have full support for Promises. While at the same time another group wants generator syntax support (e.g. var f = yield fs.stat(...)).

People keep putting generators, callbacks, co, thunks, control flow libraries, and promises into one bucket. If you read that list and you think "well, they are all kind of doing the same thing", then this is to you.

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

	#!/bin/sh

	command="${*}"
	printf "Initialized REPL for `%s`\n" "$command"
	printf "%s> " "$command"
	read -r input
	while [ "$input" != "" ];
	do
	eval "$command $input"
	printf "%s> " "$command"

	var fs = require('fs');
	var input = fs.readFileSync('./2016-01-03.xml').toString();

	var olddataraw = JSON.parse(fs.readFileSync('./oldposts.json').toString());
	var olddata = olddataraw.map(function(item) {
	var date = new Date(item.posted);
	item.year = date.getFullYear();
	item.month = pad(date.getMonth() + 1,2);
	item.day = pad(date.getDate(),2);
	return item;

	var gulp = require('gulp');
	var sourcemaps = require('gulp-sourcemaps');
	var source = require('vinyl-source-stream');
	var buffer = require('vinyl-buffer');
	var browserify = require('browserify');
	var watchify = require('watchify');
	var babel = require('babelify');

	function compile(watch) {
	var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));

	// Pretend that cookies work
	(function (document) {
	var cookies = {};
	document.__defineGetter__('cookie', function () {
	var output = [];
	for (var cookieName in cookies) {
	output.push(cookieName + "=" + cookies[cookieName]);
	}
	return output.join(";");
	});

	(function(window){

	var EVENT_EXISTS = 'GlobalEvents: Event already exists.';

	var eventIsRunning,
	_eventStack,
	_findByName,
	stackEvent,
	removeEvent,
	eventListener,

	#!/bin/sh

	# Check to see if we are on master branch. Stop accidental commits
	if [ $(git symbolic-ref HEAD 2>/dev/null) == "refs/heads/master" ]
	then
	echo "Cannot commit to master branch"
	exit 1
	fi
	exit 0