finding harmony in web development
DESCRIPTION
A presentation questioning why we keep fighting the same fights as web developers when there are a lot more important things to worry about.TRANSCRIPT
Finding harmony in web development
Chris Heilmann - London Web Meetup, February 2011
You are in a strangeplace.
To the west is a rock, to the east is a hard place, to the north is the Devil and the south is the Deep Blue Sea.
Command:_
A world of mixed messages
A world of constant disagreement and overly quick and harsh responses.
Let’s take a current hot topic...
http://twitter.com/#!/codepo8
http://twitter.com/codepo8
vs.
Erase and rewind.
Text text text link text text text link
text
Text text text text link text link text
Text text text link text text text link
text
load
Document Document
load
Document
Basic Hypertext model:
Frames!
100% Flash Sites
AJAX!
Fragments vs. documents.
Load on demand vs. massive documents.
Application state vs. fragments.
Breaking stuff...
★Back button
★Browser history
★Bookmarks
★Deep links / Crawlability
Actions are applicable in a certain environment.
★Back button
★Browser history
Web sites
★Bookmarks
★Deep links / Crawlability
★Back button
★Browser history
Web applications
★Bookmarks
★Deep links / Crawlabilityhttps://heatmap.mozillalabs.com/mozmetrics/
http://www.flickr.com/photos/artonice/4599768501/
You miss all SEO benefits!
Standards to the rescue...
http://www.w3.org/TR/html5/author/history.html
Scripts to the rescue...
Web
Sit
e
Ap
plic
atio
n
Identity crisis...
Religious debates
Saving the long web!
http://178.63.252.42
Brokenlinks are broken promises
72165041
Web vs. Contracts
Corporate shortsightedness?
http://icant.co.uk/csstablegallery
1012005-2010
http://icant.co.uk/csstablegallery/tables/2.php
67
Show love to your links, but don’t kid yourself and others - there is no “long web”.
Web vs. Realtime Web
Links and resources are great, but knowing people and having a network gets you somewhere!
Best practices are timeless!
The holy trinity according to the book of Zeldman.
Structure (HTML)
Presentation(CSS)
Behaviour(JavaScript)
The reality according to people you ask these days.
Some HTML Placeholder stuff
CSS - created with a meta language asit lacks variables and stuff.
JavaScriptlibraries,
polyfills, templating languages and “real
languages” translated to JS.
Of course depending on what they do...
clean HTML from Expression Engine or Wordpress.
CSS OMFG!!!! CSS3Transition and Animationand Shadows and fonts!
OMG OMG OMG!
jQuery!
We tend to define tech by how we use it rather than what it is meant to do.
This yields a plethora of different definitions.
★ JavaScript’s bitch (empty elements, links pointing nowhere, content to show and hide)
★ A static database (microformats, semantics of awesome)
★ The thing Google loves
★ The end result of using real languages on the server.
★ Outdated
What is HTML?
★ Something to style and animate with - really the thing that makes the web interesting.
★ Something to simulate layouts with and hope they work.
★ Not good enough - it needs variables and constants and mixins and all the other cool thing real languages have.
★ Broken
What is CSS?
★ The predecessor to jQuery.
★ Dangerous - use noscript.
★ Awesome, use it with node.js to see why it rocks.
★ Too hard to learn.
★ Broken. Time to use LUA/Python/Ruby/Coffescript instead.
★ The thing Crockford understands.
What is JavaScript?
Time for a more flexible approach it seems.
Agile and small one-size-fits-all solutions are the future.
jQuery.com - 2006
There’s a plugin for that!
Lots of small, very clever solutions adding up...
http://www.flickr.com/photos/wheatfields/3026491551/
Is modularity extra complexity?
shrtr = btr!
B=(function x(){})[-5]=='x'?'FF3':(function x(){})[-6]=='x'?'FF2':/a/[-1]=='a'?'FF':'\v'=='v'?'IE':/a/.__proto__=='//'?'Saf':/s/.test(/a/.toString)?'Chr':/^function \(/.test([].sort)?'Op':'Unknown';
“Clearly code quality is not important to you, or you would not be demanding your right to write incompetent crap.”
Douglas Crockford
<!doctype html><html lang=en><head><meta charset=utf-8><title>blah</title></head><body><p>I'm the content</p></body></html>
Web content is a mix of different technologies to make them work and display correctly...
Showing them off separately paints a wrong image!
Getting it out the door as quickly as possible - reiterate and fix later.
http://www.flickr.com/photos/artonice/4599768501/
Abstracting problems into new languages and preprocessing.
Unknown overheads:
★ Portability.★ Training of all involved.★ Explanation of abstraction layers for
maintainers.★ Performance impact (can the client/
server handle it?).★ Impact on UX/PM.
Another flaw in the human character is that everybody wants to build and nobody wants to do maintenance.
Kurt Vonnegut, Hocus Pocus
The community knows best.
http://tools.ietf.org/html/rfc2795
“If you animate things, do it in CSS! CSS transitions and animations are are faster as they are hardware accelerated and people don’t need to learn JavaScript!”
“Using a Mac is the best thing you can do right now, but be careful as everything is faster and looks much smoother there! Test in a VM, too!”
“Chrome is currently the fastest browser -‐ no point in using any other if you want to build things fast.”
https://developers.facebook.com/blog/post/460
https://developers.facebook.com/blog/post/460
On desktops, using CSS transitions for motion or CSS keyframes for animations were slower than simply using JavaScript for these tasks. Worse, they often generated noisy framerates, so they are not a good solution for games in desktop browsers.
Sentiment vs. research
http://twitter.com/tomcopy/statuses/36378510465433600
Bring on the hyperboles!
SEO techniques - anything to stand out.
(...)
Are we really that broken as a media that experts need to resort to tricks to lure us to content?
All this sensationalism doesn’t get us anywhere...
So many theories, so many prophecies. What we need now is a change of ideas!
I am worried about the internet right now.
From read/write web to consumption media.
Net neutrality? Censorship and government control?
I am worried about lock-in to certain systems.
Formal education vs. needs of the market.
We believe that the web is more cared for than owned.
We are the people who make the web work - we should have fun doing it!
First up: Chill the f*ck out!
Stop yourself from spouting truisms and do some reflection.
Encouraging discussion and explaining your POV is a great way towards finding solutions.
Context is king!
There is no such thing as a perfect web product that meets all needs of the web audience.
Explaining the context of a product makes sure people don’t measure it with the wrong values...
...or implement it where it doesn’t fit.
Let’s move from showcases to case studies.
We have inspiration overload and a lack of real implementations.
The main market we work for needs to get a push to move on.
Let’s focus on the future and apply something I call “web euthanasia”.
Redirect old and outdated tutorials to new and maintained resources!
Offer a basic, working experience for legacy browsers - not more, not less.
Simulating new tech with old platforms means we also need to test with them - wasting time!
Let’s take ownership of the web our jobs are dependent on!
http://jsconfeu.blip.tv/file/4234500/
Question authority
Our job is to make the web of tomorrow better than the web of today.
This means we need to let go of some old ideas and be flexible.
It also means to concentrate on our outcome, not our ego.
So instead of creating a lot of soon-to-be outdated “look what I did” posts, let’s collaborate.
Go where people are who build for the web, but aren’t where we normally go (conferences, meetups)
Everyone of you has something to contribute.
Tell others, work together and build *real* products!
Thanks!
Chris Heilmann@codepo8#mozilla#html5/freenet