Just One (CSS Dev Conference keynote)

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

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:
$green: #4F9F1A;
$blue: #1D6783;
$lightgray: #D6D6D6;
body {
background: $lightgray;
color: $green;
}
a {
color: $blue;
}
button {
background: $blue;
color: $lightgray;
}
Step 4

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/

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

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.

What I’m doing still works
and I have two kids under 5.

and I have two kids over 13.

and I’m planning my wedding.

and I just moved into a new house.

and I’m taking care of my sick dad.

and I’ll suck at this new thing.

and I don’t have time to learn
everything about it.

and I’m not a ____ person.

and I’m not smart enough
to learn it.

and I don’t have anyone
to help me.

and I have no idea where to start.

and I don’t want to make any
mistakes.

Never compare your inside
with somebody else’s outside.

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

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

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

HTML without flexbox
<form class="builder">
<div class="wrap">
<section class="component">
</div>
<section class="action">
</form>

HTML for flexbox version
<form class="builder">
<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

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)

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.”

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.

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;
}

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
flex: 1 0 10px;

flex: 1 0 10px;

flex: 2 0 10px;

10px + 5px extra = 15px



if 50px available

The third box gets twice as much of the
extra, but that doesn’t make it twice as
wide overall

It’s because flex-basis = 200px

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

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/

/* 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

Hiding mistakes seems to be
human nature

But sharing mistakes has
benefits

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

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/

thank you

http:/
/www.flickr.com/photos/rosswebsdale/2510946638/

Just One (CSS Dev Conference keynote)

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Just One (CSS Dev Conference keynote)

Similar to Just One (CSS Dev Conference keynote) (20)

More from Zoe Gillenwater

More from Zoe Gillenwater (20)

Recently uploaded

Recently uploaded (20)

Just One (CSS Dev Conference keynote)