Upload
zoe-gillenwater
View
5.459
Download
8
Embed Size (px)
DESCRIPTION
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.
Citation preview
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 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
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 crayons away and replace them
with books on algebra etc. Hugh MacLeod
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 position... But who you think you are will
determine your direction of motion.
Khatzumoto
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:
Step 4
$green: #4F9F1A; $blue: #1D6783; $lightgray: #D6D6D6; body { background: $lightgray; color: $green; } a { color: $blue; } button { background: $blue; color: $lightgray; }
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: 10px; color: #666666; }
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 that “knowing” a language, but that’s no more than a convenient
—and horribly misleading—shorthand. Khatzumoto
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
process is painful and boring then your life is painful and boring.
Your number one job is to make your life not suck.
Khatzumoto
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 path to nothing.
…
Doing nothing is of a fundamentally different
character than doing something.
And doing something is of a fundamentally different character than doing nothing.
…
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
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 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
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 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
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
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
some of my recent CSS mistakes
Flexbox demo www.smoresday.us Use Chrome, Opera, Safari 7, or IE 10 for full effect
.action
.component
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>
HTML for flexbox version
<form class="builder"> <section class="component"> <section class="component"> <section class="component"> <section class="component"> <section class="action"> </form>
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 how much flex item will grow relative to other items if extra space is available (proportion of extra space that it gets)
flex-shrink how much item will shrink relative to others if there is not enough space (proportion of overflow that gets shaved off)
flex-basis the initial starting size before free space is distributed (any standard width/height value, including auto)
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.”
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 .component to shrink to only 0px wide, a 100% wide element can and will sit on the same line as all the components.
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.).
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 each other
flex: 1; flex: 1; flex: 2;
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; flex: 2 0 0px;
If flex-basis isn’t 0px…
…the widths may not end up as you expect
The third box gets twice as much of the extra, but that doesn’t make it twice as
wide overall
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
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 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).
…
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 gathering them together.
I see that now, but there's no clear road map for that.
So, I'm making it up. Jeremy Smith
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 existed before.
There's nothing more vulnerable than that.
Dr. Brené Brown
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 am not sure if we need this, but too scared to delete. // Magic. Do not touch.
Revisiting comments
// TODO: Fix this. Fix what? // somedev1 - 6/7/02 Adding temporary tracking of Login screen // somedev2 - 5/22/07 Temporary my ass
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 communities of highly skilled participants even when you are
of a level of competence to match those around you.
Angelina Fabbro
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/