1.
Breaking out of the Tetris mind set
Chris Heilmann @codepo8, Beyond Tellerand 2017https://www.flickr.com/photos/statefarm/9473169772

2.
Chris Heilmann
@codepo8
christianheilmann.com

3.
If Tetris has taught me anything, it’s that
errors pile up and accomplishments
disappear

4.
conservativeinnovative
The spectrum of web technologies and
development approaches…
controlling trusting

5.
conservativeinnovative
Quotes are not my views or mine. Please do
not cause Twitter Drama™ by telling the world so.
controlling trusting

6.
conservativeinnovative
The right, conservative blocker…
controlling trusting
Don’t trust the client side - do it all on the server.

7.
conservativeinnovative
The right, conservative blocker…
controlling trusting
Web standards are good, but let’s not get
overboard with fancy things.

8.
conservativeinnovative
The right, conservative blocker…
controlling trusting
It is great that there are evergreen browsers, but
that doesn’t apply to our customers…

9.
conservativeinnovative
The right, conservative blocker…
controlling trusting
Bullet-proof, working interfaces that are likely to
bore end users.=

10.
conservativeinnovative
controlling trusting
The right, conservative piece…
Progressive enhancement is the way to build
working solutions. You build on static HTML
generated from a backend and you will never break
the user experience.

11.
conservativeinnovative
controlling trusting
The right, conservative piece…
You have no right to block any user.
The web is independent of device and ability. It is
our job to make sure people can use our products.
We do that by relying on standards.

12.
conservativeinnovative
controlling trusting
The right, conservative piece…
Web products do not have to look and work the
same in every environment.

13.
conservativeinnovative
controlling trusting
The right, conservative piece…
Working, great looking interfaces that vary with the
environment.=

14.
conservativeinnovative
controlling trusting
The square…
No matter what you do, HTML is always the thing
the browser gets. HTML is fault tolerant and will
work wherever and forever.

15.
conservativeinnovative
controlling trusting
The square…
Using semantic HTML gives you a lot of things for
free. Accessibility, caching, fast rendering. You can’t
lose.

16.
conservativeinnovative
controlling trusting
The square…
HTML is the final truth, that’s 100% correct=

17.
conservativeinnovative
controlling trusting
The straight and narrow…
Browser differences are annoying and shouldn’t be
in the way of the developer. That’s why we need
abstraction libraries to fix these issues.

18.
conservativeinnovative
controlling trusting
The straight and narrow…
Understanding standards while they are in the
making is nothing we have time for.

19.
conservativeinnovative
controlling trusting
The straight and narrow…
$library is so much easier - why don’t we just add
those to browsers?

20.
conservativeinnovative
controlling trusting
The straight and narrow…
There is no doubt that jQuery, Modernizr and
polyfills are to thank for the web we have today.=

21.
conservativeinnovative
controlling trusting
The T-block…
I can do everything in JavaScript. Every developer
on the web should know it.

22.
conservativeinnovative
controlling trusting
The T-block…
Using JavaScript, I can test if something I wanted to
happen happened. There is no hoping that the
browser did it right – we know.

23.
conservativeinnovative
controlling trusting
The T-block…
JavaScript was necessary to make the web of today
happen.=

24.
conservativeinnovative
controlling trusting
The innovation piece…
It is OK to rely on JavaScript to be available. The
benefits of computational values without reloads are
too many to miss out on.

25.
conservativeinnovative
controlling trusting
The innovation piece…
I don’t want to have to think about older browsers
and broken environments. Frameworks and build
processes can take care of that.

26.
conservativeinnovative
controlling trusting
The innovation piece…
The concept of starting with a text editor and static
files is outdated. We have so much more benefits
from using a proper toolchain. If that’s too hard for
you, then you’re not a web developer.

27.
conservativeinnovative
controlling trusting
The innovation piece…
Web standards like CSS, JavaScript and HTML are
conversion targets. Sass, CoffeeScript, Elm,
Markdown and Jade gives us more reliable control
right now, not when browsers catch up.

28.
conservativeinnovative
controlling trusting
The innovation piece…
Knowing about different browsers and caring about
broken implementations is a waste of time. It is
much more efficient to start with an abstraction.

29.
conservativeinnovative
controlling trusting
The innovation piece…
Developer convenience trumps end users
experience here. This can result in bloated solutions.=

30.
conservativeinnovative
controlling trusting
The innovative blocker…
Browsers and web standards are too slow and don’t
give us enough control. We want to know what’s
going on and control every part of the interface.

31.
conservativeinnovative
controlling trusting
The innovative blocker…
CSS is broken. The DOM is broken. We have the
technologies in our evergreen browsers to fix all
that reliably as we have insight into what’s
happening and can optimise it.

32.
conservativeinnovative
controlling trusting
The innovative blocker…
High fidelity, beautiful, responsive interfaces that are
very likely to lock out a large group of users.=

33.
conservativeinnovative
All of these parts have their place on the web.
controlling trusting

34.
conservativeinnovative
All of them result in better experiences for our
users in their frame of reference.
controlling trusting

35.
conservativeinnovative
The difference is responsibility and support.
controlling trusting
End users can cater the
interface to their needs,
products run everywhere.
High responsibility, high
demand on the end
user’s environment.

36.
Who defines who is
allowed to use our
products?

37.
Who has the final say how
an interface looks and
what it is used for?

38.
conservativeinnovative
Users over authors over implementors over
specifiers over theoretical purity…
controlling trusting
https://www.w3.org/TR/html-design-principles/

39.
If our users are the end goal, findings and best
practices should go both ways.
conservativeinnovative
controlling trusting

40.
conservativeinnovative
controlling trusting
Advocates of a sturdy web can learn from
innovators and vice versa.

41.
conservativeinnovative
controlling trusting
However, we’re not quite doing that…

42.
Developer mindset = fix it!

43.
We work in an incredibly
creative, fast moving space
that is in constant flux.

44.
It is a mess, but mess can
be fun.

45.
Working in a creative
space needs a certain
attitude…

46.
https://www.youtube.com/watch?v=D3pF9owYlRI
Imagining Zootopia

47.
We have solid
foundations.

48.
▪ Open Source, embeddable
VMs
▪ NodeJS/NPM
▪ Solid DOM access/traversal
▪ Fetch(), bark(), playDead(),
goodBoy()
▪ Promises / Async / Await
▪ …
JavaScript is unstoppable

49.
▪ Transitions
▪ Animations
▪ Flexbox
▪ Grids
▪ Custom properties (variables)
How cool is CSS now?

50.
▪ Manifests
▪ Service Workers
How much of a great
opportunity are
Progressive Web Apps?

51.
▪ In-browser tooling
▪ Hackable editors written in
web technologies.
▪ Toolchains to produce what
we need when it makes sense!
How amazing are our
developer tools?

52.
▪ Browser makers are available
for feedback and information.
▪ We have collaboration tools
by the truckload
▪ We have more events than I
can count with published
videos
How easy is it for us to
stay up-to-date?

53.
We have solid
foundations.
Time to fill in the gaps…

54.
It is time we realise that not
everything we do is lasting
forever and needs to add
up to a perfect solution.

55.
It is OK for our
accomplishments to
vanish.

56.
It is not OK for them to
become landfill of the web.

57.
Our job right now is to
create interfaces that are
simple, human and fun
to use…

58.
There is no such thing as a perfect user - think inclusive.
https://www.microsoft.com/en-us/Design/inclusive
It isn’t about allowing access but about avoiding barriers.

59.
Users over authors over implementors over
specifiers over theoretical purity…
https://www.w3.org/TR/html-design-principles/

60.
We have come a
long way.
We made the world
much smaller and
more connected.

61.
Things are looking up.
I can’t wait to see what all
of you - together - will
come up with next.

62.
Let’s storyboard the next
web.
Use Codepen, JSBin, all the
fiddles out there.
Give feedback on
standards and browser
features

63.
Let’s stop fussing over
minor details, and show
more love to the web,
love to the craft and much
more respect for another.

64.
You don’t owe the world
perfection.
But you have a voice that
should be heard and your
input matters.
Get creative – no creativity
is a waste.

65.
CHRIS HEILMANN
@CODEPO8
CHRISTIANHEILMANN.COM
THANKS!