Finding harmony in web development

Finding harmony in webdevelopment Chris Heilmann - London Web Meetup, February 2011

You are in a strangeplace.To the west is arock, to the east isa hard place, to thenorth is the Deviland the south is theDeep Blue Sea.Command:_

A world of mixedmessages

A world of constantdisagreement and overlyquick and harsh responses.

Let’s take a current hottopic...

http://twitter.com/#!/codepo8 vs. http://twitter.com/codepo8

Erase and rewind.

Basic Hypertext model:Document Document Document Text text Text text Text text text link text link text text load text text load text text link text text link text link link text text text

Frames!

Fragments vs. documents.

Load on demand vs.massive documents.

Application state vs.fragments.

Breaking stuﬀ...

★ Back button★ Browser history★ Bookmarks★ Deep links / Crawlability

Actions are applicable in acertain environment.

Web sites★ Back button★ Browser history★ Bookmarks★ Deep links / Crawlability

Web applications★ Back button★ Browser history★ Bookmarks★ Deep links / Crawlability https://heatmap.mozillalabs.com/mozmetrics/

You miss all SEO beneﬁts! http://www.ﬂickr.com/photos/artonice/4599768501/

Standards to the rescue...http://www.w3.org/TR/html5/author/history.html

Scripts to the rescue...

Web Site Identity crisis...Application

Religious debates

Saving the long web!

2.42 8.6 3.25 ttp://17h

Brokenlinks arebrokenpromises

72165041

Web vs. Contracts

Corporateshortsightedness?

2005-2010 101http://icant.co.uk/csstablegallery

67http://icant.co.uk/csstablegallery/tables/2.php

Show love to your links,but don’t kid yourself andothers.

Web vs. Realtime Web

http://packrati.us

https://github.com/anantn/slurp

Links and resources aregreat, but knowing peopleand having a network getsyou somewhere!

Best practices aretimeless!

The holy trinity accordingto the book of Zeldman. Behaviour (JavaScript) Presentation (CSS) Structure (HTML)

The reality according topeople you ask these days. JavaScript libraries, polyfills, templating languages and “real languages” translated to JS. CSS - created with a meta language as it lacks variables and stuff. Some HTML Placeholder stuff

Of course depending onwhat they do... jQuery! CSS OMFG!!!! CSS3 Transition and Animation and Shadows and fonts! OMG OMG OMG! clean HTML from Expression Engine or Wordpress.

We tend to deﬁne tech byhow we use it rather thanwhat it is meant to do.

This yields a plethora ofdiﬀerent deﬁnitions.

What is HTML?★ 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 CSS?★ 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 JavaScript?★ 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/ Coﬀescript instead.★ The thing Crockford understands.

Time for a more ﬂexibleapproach it seems.

Agile and small one-size-ﬁts-all solutions are thefuture.

jQuery.com - 2006

There’s a plugin for that!

Lots of small, very cleversolutions adding up... http://www.ﬂickr.com/photos/wheatﬁelds/3026491551/

Is modularity extracomplexity?

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>Im the content</p></body></html>

http://html5boilerplate.com/

http://initializr.com/

Web content is a mix ofdiﬀerent technologies tomake them work anddisplay correctly...

Showing them oﬀseparately paints a wrongimage!

Getting it out the door asquickly as possible -reiterate and ﬁx later. http://www.ﬂickr.com/photos/artonice/4599768501/

Abstracting problems intonew languages andpreprocessing.

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 ﬂaw in the human character is that everybody wants to build and nobody wants to do maintenance. Kurt Vonnegut, Hocus Pocus

The community knowsbest. 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

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.https://developers.facebook.com/blog/post/460

Sentiment vs. research http://twitter.com/tomcopy/statuses/36378510465433600

Bring on the hyperboles!

SEO techniques - anythingto stand out.

Are we really that brokenas a media that expertsneed to resort to tricks tolure us to content?

All this sensationalismdoesn’t get us anywhere...

So many theories, so manyprophecies. What we neednow is a change of ideas!

I am worried about theinternet right now.

From read/write web toconsumption media.

Net neutrality? Censorshipand government control?

I am worried about lock-into certain systems.

Formal education vs.needs of the market.

We believe that the web ismore cared for thanowned.

We are the people whomake the web work - weshould have fun doing it!

First up: Chill the f*ck out!

Stop yourself fromspouting truisms and dosome reﬂection.

Encouraging discussionand explaining your POV isa great way towardsﬁnding solutions.

Context is king!

There is no such thing as aperfect web product thatmeets all needs of the webaudience.

Explaining the context of aproduct makes surepeople don’t measure itwith the wrong values...

...or implement it where itdoesn’t ﬁt.

Let’s move fromshowcases to case studies.

We have inspirationoverload and a lack of realimplementations.

The main market we workfor needs to get a push tomove on.

Let’s focus on the futureand apply something I call“web euthanasia”.

Redirect old and outdatedtutorials to new andmaintained resources!

Oﬀer a basic, workingexperience for legacybrowsers - not more, notless.

Simulating new tech withold platforms means wealso need to test withthem - wasting time!

Let’s take ownership ofthe web our jobs aredependent on!

http://jsconfeu.blip.tv/ﬁle/4234500/

Question authority

Our job is to make theweb of tomorrow betterthan the web of today.

This means we need to letgo of some old ideas andbe ﬂexible.

It also means toconcentrate on ouroutcome, not our ego.

So instead of creating a lotof soon-to-be outdated“look what I did” posts,let’s collaborate.

Forrst http://forrst.com/

Forrst http://jsﬁddle.net/

http://jsbin.com/

https://github.com/

Go where people are whobuild for the web, butaren’t where we normallygo (conferences, meetups)

http://stackoverﬂow.com/

http://www.quora.com/

Everyone of you hassomething to contribute.

Tell others, work togetherand build *real* products!

Thanks!Chris Heilmann@codepo8#mozilla#html5/freenet

Finding harmony in web development

by Christian Heilmann

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 10

Statistics

Finding harmony in web development Presentation Transcript

http://paper.li	6
http://twitter.com	2
https://twitter.com	1
http://icant.co.uk	1