Sam Yamashita sotayamashita

How not to scale css

Several years ago I got curious about how css worked at scale. When I first started out, there weren’t nearly as many learning resources as there are now. CSS zen garden was amazing, at the time it showed how much you could change a design without altering the html.

In the beginning, that’s what people sold me as a feature. By writing css, you could make a change one place and have it propagate everywhere. In principle this sounds pretty good. I’m lazy so I like doing things one time. But eleven years later, my experience on both large and small teams is that this is the most terrifying thing about css.

https://twitter.com/thomasfuchs/status/493790680397803521

In the past few years a lot of very smart people have been thinking more about CSS and this has lead to some fascinating discussions around how to build ‘scalable’ ui and how that relates to CSS. When I first started to think about scalability I naturally started to read every blog post and watch every tech talk I could get

Great Readme

📝 Be a great README tips

Badge

https://img.shields.io/badge/<left side>-<right side>-<color>.svg?style=<plastic|flat|flat-square>

It's important to note that running this reset will drop any existing data you have in the application

How to reset PG Database on Heroku?

Step 1: heroku restart
Step 2: heroku pg:reset DATABASE (no need to change the DATABASE)
Step 3: heroku run rake db:migrate
Step 4: heroku run rake db:seed (if you have seed)

One liner

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

いつ誰が作った branch なのかを知る方法

$ git for-each-ref --format='%(committerdate) %09 %(authorname) %09 %(refname)' | sort -k5n -k2M -k3n -k4n

停止している container の削除：

$ docker rm `docker ps -a -q`

REPOSITORY 名が <none> になっている image 削除：

$ docker rmi $(docker images | awk '/^/ { print $3 }')

	import $ from 'jquery';
	import plugin from './plugin';

	class ScrollToTop {
	constructor(element, options) {
	const $element = $(element);

	$(window).scroll(function () {
	if ($(this).scrollTop() > options.offset) {
	$element.fadeIn();

	import { combineReducers } from 'redux';
	import users from './reducers/users';
	import posts from './reducers/posts';

	export default function createReducer(asyncReducers) {
	return combineReducers({
	users,
	posts,
	...asyncReducers
	});

	function mapValues(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	result[key] = fn(obj[key], key);
	return result;
	}, {});
	}

	function pick(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	if (fn(obj[key])) {

	function xpath(el) {
	if (typeof el == "string") return document.evaluate(el, document, null, 0, null)
	if (!el \|\| el.nodeType != 1) return ''
	if (el.id) return "//*[@id='" + el.id + "']"
	var sames = [].filter.call(el.parentNode.children, function (x) { return x.tagName == el.tagName })
	return xpath(el.parentNode) + '/' + el.tagName.toLowerCase() + (sames.length > 1 ? '['+([].indexOf.call(sames, el)+1)+']' : '')
	}

	// Usage: