Alexander Mescheryakov sibsfinx

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

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?

2015-01-29 Unofficial Relay FAQ

Compilation of questions and answers about Relay from React.js Conf.

Disclaimer: I work on Relay at Facebook. Relay is a complex system on which we're iterating aggressively. I'll do my best here to provide accurate, useful answers, but the details are subject to change. I may also be wrong. Feedback and additional questions are welcome.

What is Relay?

Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).

Resources on the Future of Work and Organizations

Reinventing Organizations is a book by Frederic Laloux about a burgeoning shift toward a new way of doing business
- This video is of a talk by Frederic Laloux wherein he gives an introduction to the big ideas in the book, along with some compelling anecdotes
How Buffer is applying the ideas in Reinventing Organizations is fascinating and exciting
My next 30 years: empowering our workplaces as centers for Adult Development is a blog post by Jen Dary of Plucky wherein she lays out her vision for Employee Development replacing Human Resources
Cultures of Continuous Learning is a talk that

console.log wrap resolving for your wrapped console logs

I've heard this before:

What I really get frustrated by is that I cannot wrap console.* and preserve line numbers

We enabled this in Chrome DevTools via blackboxing a bit ago.

If you blackbox the script file the contains the console log wrapper, the script location shown in the console will be corrected to the original source file and line number. Click, and the full source is looking longingly into your eyes.

Settings

Create a project in XCode with the default settings
- iOS > Application > Single View Application
- Language: Swift
Under project General settings, add ReactKit to Linked Framework and Libraries
- + > Add Other... and choose /path/to/react-native/ReactKit/ReactKit.xcodeproj
Now ReactKit would have been imported. Link it by choosing it from the list.
- + > lib.ReactKit.a
Under project Build Settings,

Moving to ES6 from CoffeeScript

I fell in love with CoffeeScript a couple of years ago. Javascript has always seemed something of an interesting curiosity to me and I was happy to see the meteoric rise of Node.js, but coming from a background of Python I really preferred a cleaner syntax.

In any fast moving community it is inevitable that things will change, and so today we see a big shift toward ES6, the new version of Javascript. It incorporates a handful of the nicer features from CoffeeScript and is usable today through tools like Babel. Here are some of my thoughts and issues on moving away from CoffeeScript in favor of ES6.

While reading I suggest keeping open a tab to Babel's learning ES6 page. The examples there are great.

Punctuation

Holy punctuation, Batman! Say goodbye to your whitespace and hello to parenthesis, curly braces, and semicolons again. Even with the advanced ES6 syntax you'll find yourself writing a lot more punctuatio

Using sketchtool to diff your .sketch files using text

Requirements

You need to have SketchTool installed somewhere in your path.

Setup

Add this in your ~/.gitconfig file (for some reason, it won't work in a local .gitconfig file):

	// (shift cmd c)

	// This plugin copies FramerJS boiler plate code for the currently selected layer.
	// Example:

	/*

	# Import Table Cell from Sketch
	tableCell = layers.Table_Cell

	'use strict';

	var React = require('react-native');
	var {
	Bundler,
	StyleSheet,
	Text,
	TouchableHighlight,
	View,
	ScrollView,