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.
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
8. “I’m not a math person.”
or
“I’m not an artist.”
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. I used to often say
“I’m not a JavaScript person.”
11. JavaScript expert != JavaScript person
You can be a JavaScript person without being an expert.
12. I do a little JavaScript,
therefore,
I am
a person who does JavaScript.
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. One new thing can
change your identity
http:/
/www.flickr.com/photos/jfolsom/5931303869/
33. 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
36. 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
37. You can do anything if you
stop trying to do everything.
Oliver Emberton
40. 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.
…
41. Doing nothing
is of a fundamentally different
character than doing something.
And doing something
is of a fundamentally different
character than doing nothing.
…
42. 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
43. Using Sass and not using Sass
are totally different things.
68. 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
73. 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
74.
75. 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
76. 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
83. Using flex to control width/height
.flex-item {
flex: 1 0 100px;
}
flex-grow
flex-shrink
flex-basis
84. 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)
85. 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.”
88. /* this is needed to
make .action wrap to
second line. why??? */
My comment on the 1px margin
89. 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.
90. 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.).
91. This was not just a case of
succeeding despite a mistake.
It was a case of succeeding
because of a mistake.
93. 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;
94. Trying to make one twice as wide
.gallery-item {
flex: 1 0 200px;
}
.feature {
flex: 2 0 200px;
}
97. 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;
98. 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
102. 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).
…
103. 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.”
…
104. 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
107. Vulnerability is not weakness.
And that myth is profoundly dangerous.
Dr. Brené Brown
108. 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
112. /* this is needed to
make .action wrap to
second line. why??? */
113. 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.
114. Revisiting comments
// TODO: Fix this.
Fix what?
// somedev1 - 6/7/02
Adding temporary tracking of Login screen
// somedev2 - 5/22/07
Temporary my ass
128. Do the best with what you know,
keep learning one new thing,
and there’s nothing to judge.
129. 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