Just

One
Zoe Mickley Gillenwater
@zomigi
CSS Dev Conference
October 21, 2013
Simple solutions
are almost always quickest, easiest and most effective.
Maybe sometimes it does turn out that they aren’t...
1
learning
failing
accepting
learning
You don’t need everything

http:/
/www.flickr.com/photos/montage_man/4713541238/
Dramatic reenactment;
not my actual niece
“I’m not a math person.”
or
“I’m not an artist.”
Everyone is born creative;
everyone is given a box of
crayons in kindergarten.
Then when you hit puberty they take
the cra...
I used to often say
“I’m not a JavaScript person.”
JavaScript expert != JavaScript person
You can be a JavaScript person without being an expert.
I do a little JavaScript,
therefore,

I am
a person who does JavaScript.
Since I’m not
“not a JavaScript person,”
I can do more of it.
Who you think you are matters more
than who you actually are. Who you
actually are only describes your
immediate present p...
One new thing can
change your identity
http:/
/www.flickr.com/photos/jfolsom/5931303869/
exercise person

http:/
/www.flickr.com/photos/jblmpao/5837741476/
I’m not an “exercise person”
but not “not an exercise person.”
It’s all a simple matter [of]
self-fulfilling prophecy.
Auto-suggestion.
You become it
because you said so.
Khatzumoto
Your identity empowers you
to learn and do more.
Transform yourself into a
Sass user in four easy steps.
Install Prepros from
http://alphapixels.com/prepros/
Step 1
Drag your web site’s folder
into Prepros.
Step 2
In this folder, create a file
named styles.scss.
Step 3
Write in it this:
$green: #4F9F1A;
$blue: #1D6783;
$lightgray: #D6D6D6;
body {
background: $lightgray;
color: $green;
}
a ...
http:/
/www.flickr.com/photos/masterslate/3105936070/
Thinking back to when
I first learned CSS…
<font face="Verdana, Arial, Helvetica,
sans-serif" size="1" color="#666666">

vs.
p {
font-family: Verdana;
font-size: 10p...
Why should I do it with CSS
when I can do the same
thing with <font> tags?
Zoe, circa 2002
Why should I do it with Sass
when I can do the same
thing with CSS?
Give yourself time to learn
[cool new thing] before it
becomes [standard thing].
http:/
/www.flickr.com/photos/adrians/37489866/
You never learn a language.
You just hear and learn
individual words.
And if they all belong to one language,
then we call...
browser tab guilt

http:/
/www.flickr.com/photos/degerstrom/1512993275/
Just pick one.
The learning process is not a little
necessary evil on your way to “real” life,
it is your life. … And so if your learning...
You can do anything if you
stop trying to do everything.
Oliver Emberton
1≫0
http:/
/www.flickr.com/photos/mthurman/2592723051/
1 isn’t just slightly bigger than 0.

1 is infinitely bigger than 0.
Because 1 is the start of everything.

While 0 is the...
Doing nothing
is of a fundamentally different
character than doing something.

And doing something
is of a fundamentally d...
Something (1, etc.) and nothing (0) are not the same;

they’re not friends;
they’re not neighbors;

they’re not cousins;

...
Using Sass and not using Sass

are totally different things.
Why not
learn something new?
What I’m doing still works
and I have two kids under 5.
What I’m doing still works
and I have two kids over 13.
What I’m doing still works
and I’m planning my wedding.
What I’m doing still works
and I just moved into a new house.
What I’m doing still works
and I’m taking care of my sick dad.
What I’m doing still works
and I’ll suck at this new thing.
What I’m doing still works
and I don’t have time to learn
everything about it.
What I’m doing still works
and I’m not a ____ person.
What I’m doing still works
and I’m not smart enough
to learn it.
What I’m doing still works
and I don’t have anyone
to help me.
What I’m doing still works
and I have no idea where to start.
What I’m doing still works
and I don’t want to make any
mistakes.
failing
Never compare your inside
with somebody else’s outside.
the natural-born genius
Thomas Cole
Vincent Van Gogh
Van Gogh was not
a natural-born art genius.
He worked really hard to
make his art.
Van Gogh did this grid copy thing

*Note: this is not a genuine Van Gogh piece
And he used a perspective frame
giants!
I know how much
I still have to learn myself,
but all the same I’m beginning to see light
ahead of me and, one way or anot...
Fixing mistakes
Leaving imperfect work
Creative people
experiment a lot more,
therefore succeed a lot more,
therefore fail a lot more.
If you walk around with the idea
that there are some people
who are so gifted—they have these
wonderful things in their he...
Innovation requires a
mindset that rejects the
fear of failure and replaces
that fear of failure with the
joy of explorati...
We also need to accept and
embrace the concept of failure,
not because failure is a good thing but

because it’s a natural...
some of my
recent CSS mistakes
Flexbox demo
www.smoresday.us
Use Chrome,
Opera, Safari 7, or
IE 10 for full effect
.component

.action
HTML without flexbox
<form class="builder">
<div class="wrap">
<section class="component">
<section class="component">
<se...
HTML for flexbox version
<form class="builder">
<section class="component">
<section class="component">
<section class="co...
Allow boxes to wrap
.builder {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 40px -20px;
}
Using flex to control width/height
.flex-item {
flex: 1 0 100px;
}
flex-grow

flex-shrink

flex-basis
Defining the flex property
flex-grow

flex-shrink

flex-basis

how much
flex item will
grow relative
to other items
if ext...
My first attempt
.component {
flex: 1;
}
.action {
flex: 1 1 100%;
}

Zoe’s Brain Said:
“Since .action starts
out at 100%,...
Flexbox fail
This fixed it
.component {
flex: 1;
margin-right: 1px;
}
/* this is needed to
make .action wrap to
second line. why??? */
My comment on the 1px margin
The hidden flex-basis value
.component {
flex: 1 1 0px;
}
.action {
flex: 1 1 100%;
}

Reality:
Since it’s fine for each
....
Fixing flex-basis to force the wrap
.component {
flex: 1 1 200px;
}
.action {
flex: 1 1 100%;
}

Fixed:
.action will alway...
This was not just a case of
succeeding despite a mistake.
It was a case of succeeding
because of a mistake.
mistake round two
flex can be proportional
Setting flex-grow/flex-shrink to
different values can make flex items size
themselves relative to...
Trying to make one twice as wide
.gallery-item {
flex: 1 0 200px;
}
.feature {
flex: 2 0 200px;
}
Expected rendering
Actual rendering
What I figured out
Having widths be in multiples of each
other only works if flex-basis is 0
flex: 1 0 0px; flex: 1 0 0px;...
If flex-basis isn’t 0px…
…the widths may not end up as you expect
flex: 1 0 10px;

flex: 1 0 10px;

flex: 2 0 10px;

10px ...
It’s because flex-basis = 200px
I really get flex-basis now
steader.com
I realize now, I should have gone looking for
an audience first. If I'd taken the same
amount of time to connect with pass...
But, as I've been doing since I was 15,
I saw a problem/need and thought
“oh, I could build a website for that.”

…
The work that needs to be done to make
this project a reality is the harder (for me)
work of connecting with people and
ga...
Be willing to fail…
…and then tell us about it.
Vulnerability is not weakness.
And that myth is profoundly dangerous.

Dr. Brené Brown
Vulnerability is the birthplace of
innovation, creativity, and change.
To create is to make something
that has never exist...
Try to shift
“Who can I blame?”
to
“Who can I teach?”
http:/
/www.flickr.com/photos/stilleben/49644790/
We all do imperfect work
/* this is needed to
make .action wrap to
second line. why??? */
The evidence in the comments
// Dear future me. Please forgive me.
// I can't even begin to express how
sorry I am.
// I a...
Revisiting comments
// TODO: Fix this.

Fix what?

// somedev1 - 6/7/02
Adding temporary tracking of Login screen
// somed...
YAY! Mediocrity!
YAY! Being human!
Hiding mistakes seems to be
human nature
But sharing mistakes has
benefits
humanize
empathize
humble
accepting
We can sometimes be
web design snobs.
http:/
/www.flickr.com/photos/crazyunclejoe/2540061587/
It doesn’t matter how
someone does his/her work
if the end result rocks
99% of the population of the
world doesn’t know CSS.
Zoe’s made up statistic
holes != stupidity, lack of talent
Do the best with what you know,
keep learning one new thing,
and there’s nothing to judge.
Impostor phenomenon,
explained simply, is the experience of
feeling like a fraud (or impostor) while
participating in comm...
impostor!
Let’s use our confidence in
our skills to build others up
and bravely admit our own
shortcomings.
http:/
/www.flickr.com/photos/visentico/3957547298/
change 0 to 1
thank you

http:/
/www.flickr.com/photos/rosswebsdale/2510946638/
Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)
Upcoming SlideShare
Loading in...5
×

Just One (CSS Dev Conference keynote)

7,223

Published on

Keynote presented at CSS Dev Conference on October 21, 2013. I talked about evolving who we are as web designers and developers by focusing on the power of "just one" in learning, failing, and accepting. Simplicity is powerful.

Published in: Design, Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,223
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
32
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Just One (CSS Dev Conference keynote)

  1. 1. Just One Zoe Mickley Gillenwater @zomigi CSS Dev Conference October 21, 2013
  2. 2. Simple solutions are almost always quickest, easiest and most effective. Maybe sometimes it does turn out that they aren’t enough and you do in fact need to do something hard. But if people in the street keep giving you funny looks, make sure you’re wearing trousers before you start worrying about what colour they are. Rob Heaton
  3. 3. 1
  4. 4. learning failing accepting
  5. 5. learning
  6. 6. You don’t need everything http:/ /www.flickr.com/photos/montage_man/4713541238/
  7. 7. Dramatic reenactment; not my actual niece
  8. 8. “I’m not a math person.” or “I’m not an artist.”
  9. 9. Everyone is born creative; everyone is given a box of crayons in kindergarten. Then when you hit puberty they take the crayons away and replace them with books on algebra etc. Hugh MacLeod
  10. 10. I used to often say “I’m not a JavaScript person.”
  11. 11. JavaScript expert != JavaScript person You can be a JavaScript person without being an expert.
  12. 12. I do a little JavaScript, therefore, I am a person who does JavaScript.
  13. 13. Since I’m not “not a JavaScript person,” I can do more of it.
  14. 14. Who you think you are matters more than who you actually are. Who you actually are only describes your immediate present position... But who you think you are will determine your direction of motion. Khatzumoto
  15. 15. One new thing can change your identity http:/ /www.flickr.com/photos/jfolsom/5931303869/
  16. 16. exercise person http:/ /www.flickr.com/photos/jblmpao/5837741476/
  17. 17. I’m not an “exercise person” but not “not an exercise person.”
  18. 18. It’s all a simple matter [of] self-fulfilling prophecy. Auto-suggestion. You become it because you said so. Khatzumoto
  19. 19. Your identity empowers you to learn and do more.
  20. 20. Transform yourself into a Sass user in four easy steps.
  21. 21. Install Prepros from http://alphapixels.com/prepros/ Step 1
  22. 22. Drag your web site’s folder into Prepros. Step 2
  23. 23. In this folder, create a file named styles.scss. Step 3
  24. 24. Write in it this: $green: #4F9F1A; $blue: #1D6783; $lightgray: #D6D6D6; body { background: $lightgray; color: $green; } a { color: $blue; } button { background: $blue; color: $lightgray; } Step 4
  25. 25. http:/ /www.flickr.com/photos/masterslate/3105936070/
  26. 26. Thinking back to when I first learned CSS…
  27. 27. <font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#666666"> vs. p { font-family: Verdana; font-size: 10px; color: #666666; }
  28. 28. Why should I do it with CSS when I can do the same thing with <font> tags? Zoe, circa 2002
  29. 29. Why should I do it with Sass when I can do the same thing with CSS?
  30. 30. Give yourself time to learn [cool new thing] before it becomes [standard thing].
  31. 31. http:/ /www.flickr.com/photos/adrians/37489866/
  32. 32. You never learn a language. You just hear and learn individual words. And if they all belong to one language, then we call that “knowing” a language, but that’s no more than a convenient —and horribly misleading—shorthand. Khatzumoto
  33. 33. browser tab guilt http:/ /www.flickr.com/photos/degerstrom/1512993275/
  34. 34. Just pick one.
  35. 35. The learning process is not a little necessary evil on your way to “real” life, it is your life. … And so if your learning process is painful and boring then your life is painful and boring. Your number one job is to make your life not suck. Khatzumoto
  36. 36. You can do anything if you stop trying to do everything. Oliver Emberton
  37. 37. 1≫0
  38. 38. http:/ /www.flickr.com/photos/mthurman/2592723051/
  39. 39. 1 isn’t just slightly bigger than 0. 1 is infinitely bigger than 0. Because 1 is the start of everything. While 0 is the path to nothing. …
  40. 40. Doing nothing is of a fundamentally different character than doing something. And doing something is of a fundamentally different character than doing nothing. …
  41. 41. Something (1, etc.) and nothing (0) are not the same; they’re not friends; they’re not neighbors; they’re not cousins; they don’t know each other; they don’t even live in the same universe. Khatzumoto
  42. 42. Using Sass and not using Sass are totally different things.
  43. 43. Why not learn something new?
  44. 44. What I’m doing still works and I have two kids under 5.
  45. 45. What I’m doing still works and I have two kids over 13.
  46. 46. What I’m doing still works and I’m planning my wedding.
  47. 47. What I’m doing still works and I just moved into a new house.
  48. 48. What I’m doing still works and I’m taking care of my sick dad.
  49. 49. What I’m doing still works and I’ll suck at this new thing.
  50. 50. What I’m doing still works and I don’t have time to learn everything about it.
  51. 51. What I’m doing still works and I’m not a ____ person.
  52. 52. What I’m doing still works and I’m not smart enough to learn it.
  53. 53. What I’m doing still works and I don’t have anyone to help me.
  54. 54. What I’m doing still works and I have no idea where to start.
  55. 55. What I’m doing still works and I don’t want to make any mistakes.
  56. 56. failing
  57. 57. Never compare your inside with somebody else’s outside.
  58. 58. the natural-born genius
  59. 59. Thomas Cole
  60. 60. Vincent Van Gogh
  61. 61. Van Gogh was not a natural-born art genius. He worked really hard to make his art.
  62. 62. Van Gogh did this grid copy thing *Note: this is not a genuine Van Gogh piece
  63. 63. And he used a perspective frame
  64. 64. giants!
  65. 65. I know how much I still have to learn myself, but all the same I’m beginning to see light ahead of me and, one way or another, by practicing on my own, by learning anything I can use from others. I’ll continue to paint with passion. Vincent Van Gogh, October 22, 1883
  66. 66. Fixing mistakes
  67. 67. Leaving imperfect work
  68. 68. Creative people experiment a lot more, therefore succeed a lot more, therefore fail a lot more.
  69. 69. If you walk around with the idea that there are some people who are so gifted—they have these wonderful things in their head, but you’re not one of them, you’re just sort of a normal person, you could never do anything like that— then you live a different kind of life. Brian Eno
  70. 70. Innovation requires a mindset that rejects the fear of failure and replaces that fear of failure with the joy of exploration and experimental learning. Dr. Edward D. Hess
  71. 71. We also need to accept and embrace the concept of failure, not because failure is a good thing but because it’s a natural part of the path of progress. If you’re failing, at least that means you’re trying — not remaining on the outside of the arena, looking in. Helen Walters
  72. 72. some of my recent CSS mistakes
  73. 73. Flexbox demo www.smoresday.us Use Chrome, Opera, Safari 7, or IE 10 for full effect
  74. 74. .component .action
  75. 75. HTML without flexbox <form class="builder"> <div class="wrap"> <section class="component"> <section class="component"> <section class="component"> <section class="component"> </div> <section class="action"> </form>
  76. 76. HTML for flexbox version <form class="builder"> <section class="component"> <section class="component"> <section class="component"> <section class="component"> <section class="action"> </form>
  77. 77. Allow boxes to wrap .builder { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 40px -20px; }
  78. 78. Using flex to control width/height .flex-item { flex: 1 0 100px; } flex-grow flex-shrink flex-basis
  79. 79. Defining the flex property flex-grow flex-shrink flex-basis how much flex item will grow relative to other items if extra space is available (proportion of extra space that it gets) how much item will shrink relative to others if there is not enough space (proportion of overflow that gets shaved off) the initial starting size before free space is distributed (any standard width/height value, including auto)
  80. 80. My first attempt .component { flex: 1; } .action { flex: 1 1 100%; } Zoe’s Brain Said: “Since .action starts out at 100%, it won’t have space to sit on the first line with the content preceding it, and will wrap to a second line.”
  81. 81. Flexbox fail
  82. 82. This fixed it .component { flex: 1; margin-right: 1px; }
  83. 83. /* this is needed to make .action wrap to second line. why??? */ My comment on the 1px margin
  84. 84. The hidden flex-basis value .component { flex: 1 1 0px; } .action { flex: 1 1 100%; } Reality: Since it’s fine for each .component to shrink to only 0px wide, a 100% wide element can and will sit on the same line as all the components.
  85. 85. Fixing flex-basis to force the wrap .component { flex: 1 1 200px; } .action { flex: 1 1 100%; } Fixed: .action will always wrap to new line, and .components will wrap to additional lines when there’s less space than their combined flex-basis values (plus margin, etc.).
  86. 86. This was not just a case of succeeding despite a mistake. It was a case of succeeding because of a mistake.
  87. 87. mistake round two
  88. 88. flex can be proportional Setting flex-grow/flex-shrink to different values can make flex items size themselves relative to each other flex: 1; flex: 1; flex: 2;
  89. 89. Trying to make one twice as wide .gallery-item { flex: 1 0 200px; } .feature { flex: 2 0 200px; }
  90. 90. Expected rendering
  91. 91. Actual rendering
  92. 92. What I figured out Having widths be in multiples of each other only works if flex-basis is 0 flex: 1 0 0px; flex: 1 0 0px; flex: 2 0 0px;
  93. 93. If flex-basis isn’t 0px… …the widths may not end up as you expect flex: 1 0 10px; flex: 1 0 10px; flex: 2 0 10px; 10px + 5px extra = 15px 10px + 5px extra = 15px 10px + 10px extra = 20px if 50px available The third box gets twice as much of the extra, but that doesn’t make it twice as wide overall
  94. 94. It’s because flex-basis = 200px
  95. 95. I really get flex-basis now
  96. 96. steader.com
  97. 97. I realize now, I should have gone looking for an audience first. If I'd taken the same amount of time to connect with passionate people, generate interest, and gather contact info, I would have known if it was worth it to build an online community for them (and even what, specifically, to build). …
  98. 98. But, as I've been doing since I was 15, I saw a problem/need and thought “oh, I could build a website for that.” …
  99. 99. The work that needs to be done to make this project a reality is the harder (for me) work of connecting with people and gathering them together. I see that now, but there's no clear road map for that. So, I'm making it up. Jeremy Smith
  100. 100. Be willing to fail…
  101. 101. …and then tell us about it.
  102. 102. Vulnerability is not weakness. And that myth is profoundly dangerous. Dr. Brené Brown
  103. 103. Vulnerability is the birthplace of innovation, creativity, and change. To create is to make something that has never existed before. There's nothing more vulnerable than that. Dr. Brené Brown
  104. 104. Try to shift “Who can I blame?” to “Who can I teach?”
  105. 105. http:/ /www.flickr.com/photos/stilleben/49644790/
  106. 106. We all do imperfect work
  107. 107. /* this is needed to make .action wrap to second line. why??? */
  108. 108. The evidence in the comments // Dear future me. Please forgive me. // I can't even begin to express how sorry I am. // I am not sure if we need this, but too scared to delete. // Magic. Do not touch.
  109. 109. Revisiting comments // TODO: Fix this. Fix what? // somedev1 - 6/7/02 Adding temporary tracking of Login screen // somedev2 - 5/22/07 Temporary my ass
  110. 110. YAY! Mediocrity!
  111. 111. YAY! Being human!
  112. 112. Hiding mistakes seems to be human nature
  113. 113. But sharing mistakes has benefits
  114. 114. humanize empathize humble
  115. 115. accepting
  116. 116. We can sometimes be web design snobs.
  117. 117. http:/ /www.flickr.com/photos/crazyunclejoe/2540061587/
  118. 118. It doesn’t matter how someone does his/her work if the end result rocks
  119. 119. 99% of the population of the world doesn’t know CSS. Zoe’s made up statistic
  120. 120. holes != stupidity, lack of talent
  121. 121. Do the best with what you know, keep learning one new thing, and there’s nothing to judge.
  122. 122. Impostor phenomenon, explained simply, is the experience of feeling like a fraud (or impostor) while participating in communities of highly skilled participants even when you are of a level of competence to match those around you. Angelina Fabbro
  123. 123. impostor!
  124. 124. Let’s use our confidence in our skills to build others up and bravely admit our own shortcomings.
  125. 125. http:/ /www.flickr.com/photos/visentico/3957547298/
  126. 126. change 0 to 1
  127. 127. thank you http:/ /www.flickr.com/photos/rosswebsdale/2510946638/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×