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/