Philipp Bock pbock

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?

Idiomatic React Testing Patterns

Testing React components seems simple at first. Then you need to test something that isn't a pure interaction and things seem to break down. These 4 patterns should help you write readable, flexible tests for the type of component you are testing.

Setup

I recommend doing all setup in the most functional way possible. If you can avoid it, don't set variables in a beforeEach. This will help ensure tests are isolated and make things a bit easier to reason about. I use a pattern that gives great defaults for each test example but allows every example to override props when needed:

	# OSX for Hackers (Mavericks/Yosemite)
	#
	# Source: https://gist.github.com/brandonb927/3195465

	#!/bin/sh

	# Some things taken from here
	# https://github.com/mathiasbynens/dotfiles/blob/master/.osx

	# Ask for the administrator password upfront

	#!/usr/bin/env ruby

	# modified from https://gist.github.com/pbock/3ab260f3862c350e6b5f #

	require 'watir-webdriver'

	class BurgerBot

	def initialize
	@attempt_count = 0

	GET /addons/dbmobile.cfg HTTP/1.1
	host: reiseauskunft.bahn.de
	Connection: keep-alive
	Proxy-Connection: keep-alive
	Accept: /
	User-Agent: DB%20Navigator/00 CFNetwork/758.3.15 Darwin/15.4.0
	Accept-Language: de-de
	Authorization: Basic YXBwOmJhaG5kaXJla3Q=
	Accept-Encoding: gzip, deflate

	# convert Untitled.mov to out.gif with width: 310px;
	movtogif Untitled.mov out.gif 310