Skip to content

Instantly share code, notes, and snippets.

View ryanve's full-sized avatar
📶
stay free

deepskyblue ryanve

📶
stay free
166 followers · 252 following
View GitHub Profile
@ryanve
ryanve / layout.md
Created October 30, 2017 01:12
layout debugging
@ryanve
ryanve / classing.js
Created October 29, 2017 00:25
Classing example
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
@ryanve
ryanve / data.md
Created October 28, 2017 23:28
CSS data attribute molecule example 
<Button
  data-shadow="raised"
  data-shape="button"
  data-spacing="ml-auto"
  data-tone="secondary">
  Cancel
</Button>
<Button
 data-shadow="raised"
@ryanve
ryanve / performance.md
Created October 27, 2017 22:09
CSS performance
@ryanve
ryanve / shade.css
Created October 26, 2017 23:02
CSS shade vars
: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);
@ryanve
ryanve / legend.md
Last active October 23, 2017 17:42
Emoji legend for software traits

Positive

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

Negative

@ryanve
ryanve / package.json
Last active September 26, 2017 21:53
postcss config example
{
"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"
}
@ryanve
ryanve / growth.md
Created September 13, 2017 22:34
RM's notes from Instacart meetup

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

@ryanve
ryanve / punks-not-dead.md
Last active August 29, 2017 02:48
Notes from https://designersandgeeks.com/events/punks-not-dead on 7/20/2017

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

@ryanve
ryanve / 5s.md
Created August 29, 2017 01:43
8/28 user research 5s
  • Actionable
  • Open ended
  • Specific context
  • Observe behavior (vs self report)
  • 5s wait