Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014

Chris Heilmann (@codepo8) - SmashingConf, NYC, June 2015
WELCOME TO PLANET
FINTLEWOODLEWIX

THIS IS GOING TO BE ONE OF THESE
ANGRY, UNCOMFORTABLE TALKS…

…BUT I PROMISE,
YOU’LL FEEL
BETTER, WISER AND
MORE ENERGETIC
AFTERWARDS

I FEEL LIKE I DON’T
UNDERSTAND THINGS
ANY MORE.
https://medium.com/@codepo8/i-feel-like-a-fraud-and-thats-a-good-thing-cc1fa338b902

http://wesbos.com/overwhelmed-with-web-development/
PRAGMATIC
ENGINEERING OF THE
MODERN WEB WITH
FRAMEWORKS AND
FULL STACK DEVOPS
TOOLS.

WAY, WAY BACK AND TO THE
FUTURE
LET’S GO BACK A BIT…

THE WEB IS THE
CLOSEST THING TO
THE GUIDE I KNOW…

AND THE PEOPLE OF
THE WEB WERE
PEOPLE I FELT GREAT
AMONGST.

"And the wheel," said the Captain, "What about
this wheel thingy? It sounds a terribly interesting
project."
"Ah," said the marketing girl, "Well, we’re having
a little difficulty there."
"Difficulty?" exclaimed Ford, "Difficulty? What
do you mean, difficulty? It's the single
simplest machine in the entire Universe!"
The marketing girl soured him with a look.
"Alright, Mr Wiseguy," she said, "you're so clever,
you tell us what colour it should have."
INNOVATION AND ADAPTATION…

WE ARE NOT OUR AUDIENCE
IN OTHER WORDS…

AS DEVELOPERS AND POWER
USERS OF THE WEB WE
ASSUME OUR AUDIENCE TO BE
AS EXCITED, KNOWLEDGABLE
AND ENGAGED AS WE ARE…

A B C
1
2
3
4
BASIC, LOGICAL THINKING…

A B C
1
2
3
4
2B
✘

A B C
1
2
3
4
2B
✔

A B C D E
1
2
3
4
5
6
7

5D
✔
A B C D E
1
2
3
4
5
6
7

A B C D E
1
2
3
4
5
6
7
5D
✘

A B C D E F
1
2
3
4
5
6
7
8

A B C D E F
1
2
3
4
5
6
7
8
3D
✘

A B C D E F
1
2
3
4
5
6
7
8
3D
✔

…CHILD’S PLAY!

AND YET, WE ALL FAILED THIS…

Edwards: Why the big secret? People
are smart. They can handle it.
Kay: A person is smart. People are
dumb, panicky dangerous animals
and you know it.

Stressful environments
with mainstream users
breed accidental idiots.

FOR THE AUDIENCE
OF NOW, THE WEB
IS NOTHING BUT
PLUMBING…

ARE YOU READY TO ROCK THE WORLD OF
“GENERATION SELFIE”?

NATIVE WINS THIS
AUDIENCE
•Beautiful interactions
•Simplicity of pressing an icon
to get where you want
•No waiting, no interstitials -
you buy, you get.
•Incredibly easy to buy things
•Easy to show and tell
•Consumable and defined by
fashion

THE BROWSER AND
THE WEB ARE THE
REDHEADED
STEPCHILDREN OF
MOBILE PLATFORMS!

THE COOL FACTOR
IS NOT ON THE WEB
ANY LONGER.

https://www.microsoft.com/microsoft-hololens/en-us
MICROSOFT HOLOLENS

https://www.google.com/atap/project-jacquard/
GOOGLE JACQUARD

https://www.youtube.com/watch?v=0QNiZfSsPc0
GOOGLE SOLI

GOOGLE 360° VIDEOS / CARDBOARD

ACTUALLY…
ALL OF THIS IS THE
WEB!

The web is not binary, one or zero, on or
off. It’s not a platform where you get one
hundred per cent or zero per cent. It’s
this continuum.
The web is not a platform.
It’s a continuum.
https://adactio.com/journal/6692
– Jeremy Keith

The web is not a
platform. It’s a
continuum.
– Jeremy Keith
✓ 100% true
✓ Deep, future-focused
thinking
✓ Insightful
✓ Inspiring
✓ Techno hippie horseshit

WE’RE TRYING TO
SELL LONGEVITY TO A
MARKET THAT’S PURE
CONSUMERISM AND
HYPE.

NEW DEVELOPERS
WANT A SLICE OF
THAT PIE, NOT GRAND
VISIONS OF THE
FUTURE.

AND MOST OF IT IS BULLSHIT!
FOR US, IT’S ALL ABOUT THE RECOGNITION

FAKE CURRENCIES OF
FINTLEWOODLEWIX

WE CREATE FOR
RECOGNITION BY
OUR PEERS INSTEAD
OF CREATING
PRODUCTS FOR END
USERS.

WE’RE IN THIS
ECHO CHAMBER OF
TOOLS AND
RECOGNITION…
•We build tool chains to make
ourselves more effective
•We create a new, innovative
editor every few months
using these tool chains.
•We have daily new libraries
that abstract all of our
problems
•We then have tasks runners
that minimise and pack
these libraries…

WE HAVE MORE
CONTENT THAT WE
CAN CONSUME.
•There’s an event almost
every day
•Videos, transcripts, slide
decks, all of these are
available.
•All of our learning content is
available on the web for free
•Every week is one amazingly
insightful blog post that
quotes 12 others.

WE DON’T NEED
USERS AS LONG AS
WE KEEP
APPLAUDING AND
ARGUING WITH
OURSELVES.

AND WE FIGHT EACH OTHER
WE ARE ALL EXPERTS…

We trained very hard, but it seemed
that every time we were beginning
to form into teams, we would be
reorganised.
I was to learn later in life that we
tend to meet any new situation by
reorganising and a wonderful
method it can be for creating the
illusion of progress, while producing
confusion, inefficiency and
demoralisation.
Caius Petronius (AD66)

WE DON’T EVEN
NEED PEOPLE TO
SPLIT US INTO
GROUPS.
•Full Stack Developer
•Devops
•Designers
•Webdevs
•Backend
•UX Person
•Futurist

AND WE BROKE IT!
THE WEB IS BROKEN…

DESPITE ALL THE
COOL TECH WE
HAVE, THE WEB OF
TODAY SUCKS…
•The noise to content ratio is
ridiculous - reader modes are
the new popup blockers.
•Monetisation of the web is
basically advertising - and it
gets more aggressive every
day.
•Waiting for fonts to load is the
new waiting for the page to
load.
•Tracking is rampant and
slows down traffic.

DOESN’T LOOK THAT
BAD TO YOU?

DESPITE
TRUCKLOADS OF
RESOURCES AND
INFO, WE
SUPERSIZED THE
WEB.
https://twitter.com/scottjehl/status/595827049136267266

OLD CLUTTER,
NEW WEB?
https://twitter.com/Caged/status/590602214021922818

WE HAVE NO LACK
OF EXCUSES…
•Clients want stuff we don’t
•Maintainers mess things up
•End users have ridiculous
setups and old browsers.
•Browser tooling isn’t good
enough
•We probably follow the wrong
methodology - let’s invent a
new one.
•Browsers are crap and
browser makers don’t listen
to us developers.

THANK GOD WE GOT FRAMEWORKS!
http://www.webpagetest.org/video/view.php?id=150314_Q2_DEY.1.0Tested From: Virginia USA - EC2 - Firefox - Cable
Tested From: Dulles, VA - Nexus 5 - Chrome http://www.webpagetest.org/video/view.php?id=150314_7R_DTG.1.0

DELETING OLD AND
UNNECESSARY
CODE FEELS
TERRIBLY GOOD…
✘ VML
✘ attachEvent()
✘ currentStyle
✘ X-UA-Compatible (render
modes)
✘ IE Layout Quirks
✘ VBScript
✘ Conditional Comments
✘ MS-Prefixed Events

OLD IE INTERFACE
CODE REMOVED
FROM MICROSOFT
EDGE

REPLACING THE CRUFT WITH GOODNESS…

A WEB SAFARI BURNING CHROME?
https://twitter.com/Caged/status/590602214021922818

USER AGENT
SNIFFING…
PARSING THE “PACK OF LIES”

LET’S DETECT MOBILE!
window.mobileCheck
=
function()
{

var
check
=
false;

(function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|
elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge
|maemo|midp|mmp|mobile.+firefox|
netfront|opera
m(ob|in)i|palm(
os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|
symbian|treo|up.(browser|link)|vodafone|wap|windows
(ce|phone)|xda|xiino/i.test(a)||/1207|
6310|6590|3gso|4thp|50[1-‐6]i|770s|802s|a
wa|abac|ac(er|oo|s-‐)|ai(ko|rn)|al(av|ca|co)|amoi|
an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-‐m|r
|s
)|avan|be(ck|ll|nq)|bi(lb|rd)|
bl(ac|az)|br(e|v)w|bumb|bw-‐(n|u)|c55/|capi|ccwa|cdm-‐|cell|chtm|cldc|cmd-‐|co(mp|nd)|
craw|da(it|ll|ng)|dbte|dc-‐s|devi|dica|dmob|do(c|p)o|ds(12|-‐d)|el(49|ai)|em(l2|ul)|er(ic|
k0)|esl8|ez([4-‐7]0|os|wa|ze)|fetc|fly(-‐|_)|g1
u|g560|gene|gf-‐5|g-‐mo|go(.w|od)|gr(ad|
un)|haie|hcit|hd-‐(m|p|t)|hei-‐|hi(pt|ta)|hp(
i|ip)|hs-‐c|ht(c(-‐|
|_|a|g|p|s|t)|tp)|hu(aw|
tc)|i-‐(20|go|ma)|i230|iac(
|-‐|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|
jemu|jigs|kddi|keji|kgt(
|/)|klon|kpt
|kwc-‐|kyo(c|k)|le(no|xi)|lg(
g|/(k|l|u)|50|54|-‐
[a-‐w])|libw|lynx|m1-‐w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-‐cr|me(rc|ri)|mi(o8|oa|ts)|
mmef|mo(01|02|bi|de|do|t(-‐|
|o|v)|zz)|mt(50|p1|v
)|mwbp|mywa|n10[0-‐2]|n20[2-‐3]|n30(0|2)|
n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-‐|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|
p800|pan(a|d|t)|pdxg|pg(13|-‐([1-‐8]|c))|phil|pire|pl(ay|uc)|pn-‐2|po(ck|rt|se)|prox|psio|pt
-‐g|qa-‐a|qc(07|12|21|32|60|-‐[2-‐7]|i-‐)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|
mm|ms|ny|va)|sc(01|h-‐|oo|p-‐)|sdk/|se(c(-‐|0|1)|47|mc|nd|ri)|sgh-‐|shar|sie(-‐|m)|sk-‐0|
sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-‐|v-‐|v
)|sy(01|mb)|t2(18|50)|t6(00|10|18)|
ta(gt|lk)|tcl-‐|tdg-‐|tel(i|m)|tim-‐|t-‐mo|to(pl|sh)|ts(70|m-‐|m3|m5)|tx-‐9|up(.b|g1|si)|
utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-‐3]|-‐v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|
85|98)|w3c(-‐|
)|webc|whit|wi(g
|nc|nw)|wmlb|wonu|x700|yas-‐|your|zeto|zte-‐/
i.test(a.substr(0,4)))check
=
true})(navigator.userAgent||navigator.vendor||window.opera);

return
check;
}

WHAT CAN GO WRONG?

before
after
before
after
RELIANCE ON WEBKIT-SPECIFIC,
EXPERIMENTAL FEATURES…
-webkit-appearance: none -webkit-gradient

PERPETUATING MISSPELLINGS
https://github.com/search?l=html&q=charset+%22UTF8%22&ref=searchresults&type=Code&utf8=%E2%9C%93
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta charset="utf-8">
<meta charset=“utf8"> ✘
✔
> 600k times in use on GitHub!

RELEASING A
STANDARDS
COMPLIANT
BROWSER IN 2015
ISN’T ENOUGH…
✘ we repeated the same
mistakes we did with IE6
(checking for browsers,
blocking others)
✘ we practice code “that
works” rather than “is
correct”
✘ we optimised our work for a
platform that doesn’t
appreciate it and where it
won’t flourish

IN SUMMARY…
✘ we over-communicate and
try to impress ourselves
✘ we feel like frauds and
stressed that we’re missing
the boat.
✘ we add to an ever-growing
landfill of broken code for
the sake of releasing the
newest and coolest.
✘ we widen the gap between
our users and us

I DON’T WANT TO BE ON
FINTLEWOODLEWIX

TELL US HOW GET HAPPY
AGAIN!
ENOUGH OF THIS…

WHEN THINGS BURN
WITHOUT A CAUSE, IT
FEELS TERRIBLE…

LET’S CALM DOWN
AND CLEAN OUR
ACT.
✔ Stop trying to impress and
do some work instead
✔ Test and try your products
not on the newest Mac and
with your developer
browsers
✔ Clean up old code, delete
things you hated writing
✔ Stop trying to replace
working technologies with
ones you prefer - talk to
people who like those
instead.

HERE’S TO FEELING
GOOD ALL THE
TIME!
✔ Feel more empathy, stop
using adblockers
✔ Communicate more with
clients and in our teams
✔ Let native run its course and
work towards the strengths
of the web
✔ Be what you want to be, not
what is the hot job title at
the moment - play to your
strengths.

LET’S DEVELOP AND STOP
TRYING TO ENGINEER.

OUR JOBS ARE
NEVER BORING AND
THERE IS SO MUCH
TO DO!
@CODEPO8
THANK YOU!

Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (9)

Similar to Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014

Similar to Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014 (20)

More from Christian Heilmann

More from Christian Heilmann (20)

Recently uploaded

Recently uploaded (20)

Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014