Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Just One (CSS Dev Conference keynote)

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.

  • Be the first to comment

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:/ /
  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:/ /
  16. 16. exercise person http:/ /
  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 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:/ /
  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:/ /
  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:/ /
  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:/ /
  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 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.
  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:/ /
  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:/ /
  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:/ /
  126. 126. change 0 to 1
  127. 127. thank you http:/ /