ryan neptune ryanve

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

<Button
  data-shadow="raised"
  data-shape="button"
  data-spacing="ml-auto"
  data-tone="secondary">
  Cancel
</Button>
<Button
 data-shadow="raised"

Positive

💕 = adoptable
🌐 = universally compatible
♿ = facilitates standards
♒ = built for change
♌ = adaptable within guardrails
🌀 = quickly debuggable
= composable

Negative

Growth Meetup at Instacart 9/12/2017

Format: 6 ten minute talks, five minutes of Q&A each. Most of this is directly quoted so no amazing insights. 😞

Instacart

3 lessons from 10 years of hyper growth

By Elliot, VP of Product

Punk is an idea about how you approach your life

Consistency builds trust and trust is never more important than electing the president

The def of hope is you still believe even when it's hard

Culture is important

Internet.org

	const facade = Object.freeze({
	"Additive": "border-box overflow-visible m0 p1 line-single size-fine rounded border case-none pointer shadow-ring tone-additive",
	"Ask": "block-table unbold line-single size-fine",
	"Destructive": "border-box overflow-visible m0 p1 line-single size-fine rounded border case-none pointer shadow-ring tone-destructive",
	"Input": "border-box width-fit overflow-visible m0 p1 pl2 pr2 line-single size-fine rounded border shadow-ring",
	"Input:valid": "border-box width-fit overflow-visible m0 p1 pl2 pr2 line-single size-fine rounded border shadow-ring tone-valid",
	"Input:validity": "border-box width-fit overflow-visible m0 p1 pl2 pr2 line-single size-fine rounded border shadow-ring tone-validity",
	"Input:invalid": "border-box width-fit overflow-visible m0 p1 pl2 pr2 line-single size-fine rounded border shadow-ring tone-invalid",
	"Field": "border-none p0 m0",
	"Primary": "border-box overflow-visible m0 p1 line-single size-fine rounded border case-none pointer shadow-ring to

	:root {
	--shade-90: rgba(0, 0, 0, .9);
	--shade-80: rgba(0, 0, 0, .8);
	--shade-70: rgba(0, 0, 0, .7);
	--shade-60: rgba(0, 0, 0, .6);
	--shade-50: rgba(0, 0, 0, .5);
	--shade-40: rgba(0, 0, 0, .4);
	--shade-30: rgba(0, 0, 0, .3);
	--shade-20: rgba(0, 0, 0, .2);
	--shade-10: rgba(0, 0, 0, .1);

	{
	"private": true,
	"scripts": {
	"css": "postcss module.css --no-map --output main.css"
	},
	"devDependencies": {
	"postcss-cli": "^4.1.1",
	"postcss-functions": "^3.0.0",
	"postcss-import": "^11.0.0"
	}