Dwayne Crooks dwayne

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?

React (Virtual) DOM Terminology

In React's terminology, there are five core types that are important to distinguish:

ReactElement / ReactElement Factory
ReactNode
ReactComponent / ReactComponent Class

React Elements

Haskell Style Guide for Elm

Goal: a consistent style throughout all Elm projects that is easy to read and produces clean diffs to make debugging easier. This means valuing regularity and simplicity over cleverness.

Line Length

Keep it under 80 characters. Going over is not the end of the world, but consider refactoring before you decide a line really must be longer.

Variables

Gist

This is a quick tutorial explaining how to get a static website hosted on Heroku.

Why do this?

Heroku hosts apps on the internet, not static websites. To get it to run your static portfolio, personal blog, etc., you need to trick Heroku into thinking your website is a PHP app. This 6-step tutorial will teach you how.

Basic Assumptions

Deprecating `transferPropsTo`

It's a common pattern in React to wrap a component in an abstraction. The outer component exposes a simple property to do something that might have more complex implementation details.

We used to have a helper function called transferPropsTo. We no longer support this method. Instead you're expected to use a generic object helper to merge props.

render() {
 return Component(Object.assign({}, this.props, { more: 'values' }));

Chapter 1 - Object Oriented Design

The purpose of design is to allow you to do design later, and it's primary goal is to reduce the cost of change.

SOLID Design:

Single Responsibility Principle: a class should have only a single responsibility
Open-Closed Principle: Software entities should be open for extension, but closed for modification (inherit instead of modifying existing classes).
Liskov Substitution: Objects in a program should be replaceable with instances of their subtypes without altering the correctness of that program.
Interface Segregation: Many client-specific interfaces are better than one general-purpose interface.

	/**
	* @jsx React.DOM
	*/

	var React = require('react'),
	MyReactComponent = React.createClass({

	// The object returned by this method sets the initial value of this.state
	getInitialState: function(){
	return {};

	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);

	# config/routes.rb
	resources :documents do
	scope module: 'documents' do
	resources :versions do
	post :restore, on: :member
	end

	resource :lock
	end
	end

	require 'active_support/core_ext/time'

	class BusinessHoursFeature
	# This feature is only available between the hours of 10am and 4pm
	def enabled?
	Time.use_zone('Pacific Time (US & Canada)') do
	now = Time.zone.now
	am, pm = Time.zone.parse('10:00'), Time.zone.parse('16:00')
	weekday = !(now.saturday? \|\| now.sunday?)