Enjoying the full stack - Frontend 2010

Enjoying the full stack.

Chris&an Heilmann
http://www.flickr.com/photos/andrewrennie/4608617962
Frontend 2010, Oslo, Norway, October 2010

We now had two
days of awesome
web technologies.

The technologies
we’ve been
advocating for
years are more
powerful than ever.

CSS =
rocking the
interface and taking
over tasks that only
JavaScript could do.

HTML =
application
language with reach
into predefined
widgets and OS
data.

JavaScript =
the de-facto
language for new
environments and
interfaces.

JS + Node.js =
kick-ass server side
solutions for today’s
problems.

So what keeps us
from having a really
easy life creating
the coolest apps
ever?

Government FAIL

http://www.hmg.gov.uk/epetition-responses/petition-
view.aspx?epref=ie6upgrade

Complex software will always have
vulnerabilities and motivated
adversaries will always work to
discover and take advantage of
them. There is no evidence that
upgrading away from the latest
fully patched versions of Internet
Explorer to other browsers will
make users more secure.

It is not straightforward for HMG
departments to upgrade IE versions
on their systems. Upgrading these
systems to IE8 can be a very large
operation, taking weeks to test and
roll out to all users.

To test all the web applications
currently used by HMG departments
can take months at signiﬁcant
potential cost to the taxpayer. It is
therefore more cost effective in
many cases to continue to use IE6
and rely on other measures, such as
ﬁrewalls and malware scanning
software, to further protect public
sector internet users.

Not us - we are too
busy writing effect
examples.

Progress is a debt
we all must pay.

HTML5 is not about
dicking around in a
canvas and plotting
shiny things.

HTML5 is about
moving from
documents to
applications.

HTML5 is about
moving from hacks
to solutions.

Real input types,
real app state
retention, real back
button and history
support...

...real collaboration
of apps over a
network...

...real marking up of
what things are.

This is all the
*really* exciting
stuff.

Not rotating a video
or simulating some
Flash effect in
Canvas.

Innovation should
not be at the cost of
quality.

It's convenience we
all cherish.

This is a valid
HTML5 document:
<!doctype html>
<html lang=en>
<meta charset=utf-8>
<title>blah</title>
<body>
<p>I'm the content

HTML5 + CSS3
should be a reboot
of awesome.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>blah</title>
</head>
<body>
<p>I'm the content</p>
</body>
</html>

Less code does not
mean a better
solution...

Less redundancy in
code is a better
solution.

I do not want to
trust a browser to
right the things I
did wrong.

We’ve done that
over and over in the
past...

...and now we bitch
that people do not
upgrade...

...and their reason is
the solutions they
bought for a lot of
money...

...that were built
with the same
attitude for a “cool
and simple”
environment at that
time.

Matrix filter anyone?

http://msdn.microsoft.com/en-us/library/
ms533014%28VS.85%29.aspx

.hta anyone?

http://msdn.microsoft.com/en-us/library/
ms536496%28VS.85%29.aspx

Forking and
repeating code for
different browsers is
not fun.

box-shadow:10px 10px 7px rgba(0,0,0,.7);
-moz-box-shadow:10px 10px 7px
rgba(0,0,0,.7);
-webkit-box-shadow: 10px 10px 7px
rgba(0,0,0,.7);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);

Let’s take a look at
the players.

Opera

http://www.flickr.com/photos/dalbera/4824517154

Firefox

http://www.flickr.com/photos/harlequeen/887663462

Chrome

http://www.flickr.com/photos/jillclardy/2637251419/

Safari

http://www.flickr.com/photos/library_of_congress/2809104638

Explorer

http://www.flickr.com/photos/statelibraryofnsw/3422714392

Explorer

=
http://www.flickr.com/photos/statelibraryofnsw/3422714392

Let’s make upgrading a logical
step.

IE6

Let’s not concentrate on
adding new players and
random additions.

W TF

Give browsers what
they can do and use
what they do better!

Easing the use of
web fonts for better
typography.

http://code.google.com/webfonts/preview#font-family=Lobster

Simply adding a link
doesn’t give you
feedback though...

Using JS to load the
fonts on the other
hand does.

Classes added to the root element
by the Google WebFont loader

.wf-inactive
.wf-active
.wf-tangerine-n4-inactive
.wf-tangerine-n7-active
.wf-droidsans-n4-inactive
[...]

n4 - normal i4 - italic
n7 - bold i7 - bold italic
http://code.google.com/apis/webfonts/docs/webfont_loader.html

WebFontConfig = {
google: {
families: [ 'Tangerine', 'Cantarell' ]
},
typekit: {
id: 'myKitId'
},
loading: function() { },
fontloading: function(family, info) {},
fontactive: function(family, info) {},
fontinactive: function(family, info) {},
active: function() {},
inactive: function() {}
};

Feedback and
handles are needed
to deliver working
solutions.

Web development
is not about what
technology you
love.

It is about using a
full stack of
technologies and let
each do what it is
great at.

Each part needing
experts and
enthusiasts.

And all working
together on the
goal to make our
job easier and more
professional.

We should work for
the web and for
people - not for
browsers.

Browsers can be
handled by a build
process.

View-source is
important but
should happen on
GitHub, not in the
browser.

Performance
optimisation can be
done by machines.

Human optimisation
can not be done by
machines.

We have a very cool
future ahead.

If we build for the
humans and use the
machines for what
they are good at.

Christian Heilmann
http://wait-till-i.com Thanks!
http://developer-evangelism.com
http://twitter.com/codepo8

Enjoying the full stack - Frontend 2010

Recommended

Recommended

More Related Content

Similar to Enjoying the full stack - Frontend 2010

Similar to Enjoying the full stack - Frontend 2010 (20)

More from Christian Heilmann

More from Christian Heilmann (20)

Recently uploaded

Recently uploaded (20)

Enjoying the full stack - Frontend 2010