SlideShare a Scribd company logo
1 of 45
Download to read offline
HTML5
and the future of the web.
Chris Heilmann and Crystal Beasley, Mozilla, Webvisions Barcelona 2012
This talk is
being given
over and
over again.
The normal flow is this:
★   I show you incredible stuff! (in a special browser build with all kind of flags turned on)
★   You try it out later.
★   It doesn’t work for you.
★   You are behind in fixing that layout glitch in IE8 your boss
    so wants you to fix.
★   I am awesome, you are frustrated.
Something is broken...




There seems to be a disconnect between the “web development and
design scene” and both the market we are working for and the
companies building the tools we use.
we <3 abstractions!




                                                                           http://www.flickr.com/photos/pa1nt/2395397976/

We seem to be obsessed with abstractions. Instead of using ideas
like for example vendor prefixes in browsers we write a library to not
have to care about them. This leads to a lot of problems with
experimental implementations becoming necessary features and new
developers learning abstractions instead of the core technologies.
Everybody is a creator:
              Last year: 37 new
              microlibraries and 10 new
              “innovative CSS work
              frameworks”
We all want to be creators and build a thing that makes it easier for
others to code. We don’t even follow up any longer if they are used or
not, the concept of having built them makes us already feel great.
“This photo was taken by photographer Jack Bradley and depicts the exact moment this boy, Harold Whittles,
hears for the very first time ever.The doctor treating him has just placed an earpiece in his left ear.
Date unknown. “

I think we have forgotten a bit about the wonder of hearing and
learning and are too focused on building what brings change. We
have two ears but one mouth and most of the time our speaking
to listening ratio does not reflect that.
At Mozilla we have a lot of programs to turn people into webmakers and it is
amazing to see how excited kids are doing their first few web things using
Mozilla Thimble.
Unless someone like you
  cares a whole awful lot,
  nothing is going to get better.
  It's not.




On the flight over here I watched the Lorax based on the book by
Dr. Seuss and I loved it - especially this quote. I actually got so inspired,
that I wrote the rest of this presentation in the style of Dr. Seuss. That
way all of you in the audience who have kids can read to them and
learn about the future of the web at the same time.
http://codepo8.github.com/seussweb/
I uploaded the whole “poem” to github, where you can find it and use it -
be my guest. There are a lot of links in there for you to follow and read
at your own leisure.
http://www.chrisharrison.net/index.php/Visualizations/InternetMap




 There's a big web out there, 
 it's huge - I tell you, 
 it spans the whole world, 
 but it was boring and blue…
Then change came about, 
in the shape of a fox, 
it was cunning and open, 
and it broke all the locks.
Others showed up,
and joined the good fight, 
a singer, an adventurer, 
and a shiny new knight.
These all played together, 
and spoke the same tongue, 
which brought back old players,
to join them in song. 
A standard was set, 
and it changed a few things,
a richer web for apps, 
was the promise it brings.
Bah, standards! Who needs them?
Some flashy ones said, 
till a phone that was smart,
kicked them out of its bed.
https://github.com/SirPepe/SpecGraph#html5-spezifikations-%C3%9Cbersicht--



We moved past one standard, 
as web work is richer,
so "HTML5 and friends",
paints a much better <picture>.
http://www.flickr.com/photos/ikkoskinen/4046500800/



Things that are fun, 
should be shiny and cool,
that's why the new standards
bring many a new tool.
Watching and hearing,
are what people like to do.
Using <audio> and <video> is simple,
and you can do it , too.
Both of them are web-native,
which is a reason to clap.
They can interact with other content,
and Mozilla Popcorn makes that a snap.
If beats and frequencies are
what you need to play,
check the Web Audio API -
it gives you just that - even today.
http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/



To play nice with batteries,
use requestAnimationFrame(),
don't let it stop you
that it has such a long name.
http://alteredqualia.com/



 3D graphics are thrilling,
 as gamers will tell,
 we now have that on the web
 and it is called WebGL.
Water goes everywhere you pour it,
just ask Chris about his Macbook Air :(
MediaQueries allow you be as fluid
and respond instead of despair.
Natural movements are smooth,
just open your eyes.
With CSS animation, transforms and transition,
you can mimic this - nice!
"The web means you need to be online",
I hear smartypants gloat,
well, we have offline storage,
so there - take your coat.
Got a cam and some friends,
and do you want to chat?
WebRTC is what you need,
even to show off your cat.
Srsly?


Rhymes sometimes don't come easy,
as you just became aware.
So let's just move ahead quickly,
this was just too much to bear.
An artist needs a <canvas>,
and HTML5 gave us that.
Read, write and convert pixels,
All in the client, it's mad!
http://mozilla.github.com/x-tag/demo.html




"We don't have rich elements!"
many people complain,
Use Web Components with X-Tag
and create them - easy to maintain.
god?

       password?

       password123?

       letmein?

       ihatethis?


Passwords are tough, 
it is easy to see, 
so allow login with emails,
using BrowserID.
The web is a mess,
with third party buttons abound.
Web Intents make them pointless,
let's not have them around.
Magic and stuff!




By design HTML5 is forgiving,
its parser is great.
It didn't want to break the web,
so let's not break it in its stead.
Course you can write weird things,
and they will work - there's no doubt.
But will they be readable by others?
This is what it's about.
http://www.flickr.com/photos/crimsonninjagirl/241166239/


You don't create for yourself,
or your friends who are the same.
You develop for the next guy,
so make sure you're not to blame.
You don't jump in a river,
if you don't know its depth.
On the web using Modernizr,
should be your first step.
Give new stuff to new players,
and use it to enhance.
Don't support when it's not needed
IE6 only walks - it can't dance!
With a vendor prefix browsers tell you
"this is not ready".
So by all means, give them a go,
but don't expect to go steady. 
And those prefixes vanish,
you mustn't forget!
End with a prefixless version,
It's your very best bet.
http://movethewebforward.org/


So we ask you to help us,
build a web that will last.
Be future friendly and look forward,
and stop building for the past.
http://movethewebforward.org/


The web is on phones,
tablets, computers, TVs.
We have to move it forward.
or else our existence will cease.
http://blog.mozilla.org/blog/2012/07/02/firefox-mobile-os/


Hardware that is locked up,
is not what we are about,
so check out Firefox OS,
if you like the web - you’ll like it -
no doubt.
http://coding.smashingmagazine.com/2011/09/07/help-the-community-report-browser-bugs/


Last but not least,
if you find something's wrong
please file a bug and tell us,
this is how things get done.
http://www.flickr.com/photos/wilderdom/64733125/


So there you have a lot to play with,
check out and share.
We really want you to do that,
come on, show us you care.
Thanks!
                                      Christian Heilmann
                                      @codepo8
                                      Crystal Beasley
                                      @skinny
So well done for reading and listening,
and going great lengths,
that's all we got time for,
so good-bye and thanks!

More Related Content

What's hot

Web education, and the Opera web standards curriculum
Web education, and the Opera web standards curriculumWeb education, and the Opera web standards curriculum
Web education, and the Opera web standards curriculumChris Mills
 
Accessibility doesn't exist
Accessibility doesn't existAccessibility doesn't exist
Accessibility doesn't existChris Mills
 
Keynote talk: How to stay in love with programming (with notes)
Keynote talk: How to stay in love with programming (with notes)Keynote talk: How to stay in love with programming (with notes)
Keynote talk: How to stay in love with programming (with notes)Camille Fournier
 
Libguides, easybib, databases and more!.pptx
Libguides, easybib, databases and more!.pptx Libguides, easybib, databases and more!.pptx
Libguides, easybib, databases and more!.pptx wmrhsd
 
The Importance of presence, reputation, and working different
The Importance of presence, reputation, and working differentThe Importance of presence, reputation, and working different
The Importance of presence, reputation, and working differentKushtrim Xhakli
 
What we learned from #CMGimPACt Performance and Capacity Conference attendee ...
What we learned from #CMGimPACt Performance and Capacity Conference attendee ...What we learned from #CMGimPACt Performance and Capacity Conference attendee ...
What we learned from #CMGimPACt Performance and Capacity Conference attendee ...Anoush Najarian
 
Avoiding common Accessibility mistakes
Avoiding common Accessibility mistakesAvoiding common Accessibility mistakes
Avoiding common Accessibility mistakesDirk Ginader
 
Some Web Design Dos and Don'ts
Some Web Design Dos and Don'tsSome Web Design Dos and Don'ts
Some Web Design Dos and Don'tsMiami University
 
Don't Make Me Think Review
Don't Make Me Think ReviewDon't Make Me Think Review
Don't Make Me Think Reviewsus22
 
Top 10 useful website for every college students
Top 10 useful website for every college studentsTop 10 useful website for every college students
Top 10 useful website for every college studentsEducation
 
FETC CS4018 The iPad & the Paperless School Environment - live
FETC CS4018 The iPad & the Paperless School Environment - liveFETC CS4018 The iPad & the Paperless School Environment - live
FETC CS4018 The iPad & the Paperless School Environment - liveChristopher Casal
 
Cure for the Common Code
Cure for the Common CodeCure for the Common Code
Cure for the Common CodeJenn Lukas
 
iPads for Administrators: Communicate, Collaborate & Connect - live
iPads for Administrators: Communicate, Collaborate & Connect - liveiPads for Administrators: Communicate, Collaborate & Connect - live
iPads for Administrators: Communicate, Collaborate & Connect - liveChristopher Casal
 
Are You Legal? Copyright & Plagiarism in the Classroom
Are You Legal? Copyright & Plagiarism in the ClassroomAre You Legal? Copyright & Plagiarism in the Classroom
Are You Legal? Copyright & Plagiarism in the ClassroomGlenn Wiebe
 
Taking Your High School Newspaper Online: 10 Reasons and 10 Challenges (2011)
Taking Your High School Newspaper Online: 10 Reasons and 10 Challenges (2011)Taking Your High School Newspaper Online: 10 Reasons and 10 Challenges (2011)
Taking Your High School Newspaper Online: 10 Reasons and 10 Challenges (2011)Foothill Technology High School
 
Ice House presentation
Ice House presentationIce House presentation
Ice House presentationJon Nicholls
 
Making the unfamiliar familiar: reflections on training digital scholarship i...
Making the unfamiliar familiar: reflections on training digital scholarship i...Making the unfamiliar familiar: reflections on training digital scholarship i...
Making the unfamiliar familiar: reflections on training digital scholarship i...James Baker
 
Web Design Teaching - Sharing Effective Tools and Techniques
Web Design Teaching - Sharing Effective Tools and TechniquesWeb Design Teaching - Sharing Effective Tools and Techniques
Web Design Teaching - Sharing Effective Tools and TechniquesShelley Bartlette
 
Michelle Kane Final Presentation
Michelle Kane Final PresentationMichelle Kane Final Presentation
Michelle Kane Final Presentationthehurrikanes
 

What's hot (20)

Web education, and the Opera web standards curriculum
Web education, and the Opera web standards curriculumWeb education, and the Opera web standards curriculum
Web education, and the Opera web standards curriculum
 
Contributing to drupal
Contributing to drupalContributing to drupal
Contributing to drupal
 
Accessibility doesn't exist
Accessibility doesn't existAccessibility doesn't exist
Accessibility doesn't exist
 
Keynote talk: How to stay in love with programming (with notes)
Keynote talk: How to stay in love with programming (with notes)Keynote talk: How to stay in love with programming (with notes)
Keynote talk: How to stay in love with programming (with notes)
 
Libguides, easybib, databases and more!.pptx
Libguides, easybib, databases and more!.pptx Libguides, easybib, databases and more!.pptx
Libguides, easybib, databases and more!.pptx
 
The Importance of presence, reputation, and working different
The Importance of presence, reputation, and working differentThe Importance of presence, reputation, and working different
The Importance of presence, reputation, and working different
 
What we learned from #CMGimPACt Performance and Capacity Conference attendee ...
What we learned from #CMGimPACt Performance and Capacity Conference attendee ...What we learned from #CMGimPACt Performance and Capacity Conference attendee ...
What we learned from #CMGimPACt Performance and Capacity Conference attendee ...
 
Avoiding common Accessibility mistakes
Avoiding common Accessibility mistakesAvoiding common Accessibility mistakes
Avoiding common Accessibility mistakes
 
Some Web Design Dos and Don'ts
Some Web Design Dos and Don'tsSome Web Design Dos and Don'ts
Some Web Design Dos and Don'ts
 
Don't Make Me Think Review
Don't Make Me Think ReviewDon't Make Me Think Review
Don't Make Me Think Review
 
Top 10 useful website for every college students
Top 10 useful website for every college studentsTop 10 useful website for every college students
Top 10 useful website for every college students
 
FETC CS4018 The iPad & the Paperless School Environment - live
FETC CS4018 The iPad & the Paperless School Environment - liveFETC CS4018 The iPad & the Paperless School Environment - live
FETC CS4018 The iPad & the Paperless School Environment - live
 
Cure for the Common Code
Cure for the Common CodeCure for the Common Code
Cure for the Common Code
 
iPads for Administrators: Communicate, Collaborate & Connect - live
iPads for Administrators: Communicate, Collaborate & Connect - liveiPads for Administrators: Communicate, Collaborate & Connect - live
iPads for Administrators: Communicate, Collaborate & Connect - live
 
Are You Legal? Copyright & Plagiarism in the Classroom
Are You Legal? Copyright & Plagiarism in the ClassroomAre You Legal? Copyright & Plagiarism in the Classroom
Are You Legal? Copyright & Plagiarism in the Classroom
 
Taking Your High School Newspaper Online: 10 Reasons and 10 Challenges (2011)
Taking Your High School Newspaper Online: 10 Reasons and 10 Challenges (2011)Taking Your High School Newspaper Online: 10 Reasons and 10 Challenges (2011)
Taking Your High School Newspaper Online: 10 Reasons and 10 Challenges (2011)
 
Ice House presentation
Ice House presentationIce House presentation
Ice House presentation
 
Making the unfamiliar familiar: reflections on training digital scholarship i...
Making the unfamiliar familiar: reflections on training digital scholarship i...Making the unfamiliar familiar: reflections on training digital scholarship i...
Making the unfamiliar familiar: reflections on training digital scholarship i...
 
Web Design Teaching - Sharing Effective Tools and Techniques
Web Design Teaching - Sharing Effective Tools and TechniquesWeb Design Teaching - Sharing Effective Tools and Techniques
Web Design Teaching - Sharing Effective Tools and Techniques
 
Michelle Kane Final Presentation
Michelle Kane Final PresentationMichelle Kane Final Presentation
Michelle Kane Final Presentation
 

Viewers also liked

The web is a mess: how I learnt to stop worrying and love web archiving. Kris...
The web is a mess: how I learnt to stop worrying and love web archiving. Kris...The web is a mess: how I learnt to stop worrying and love web archiving. Kris...
The web is a mess: how I learnt to stop worrying and love web archiving. Kris...Biblioteca Nacional de España
 
Diamond Dash iOS - Post Mortem_GDC Europe 2012
Diamond Dash iOS - Post Mortem_GDC Europe 2012Diamond Dash iOS - Post Mortem_GDC Europe 2012
Diamond Dash iOS - Post Mortem_GDC Europe 2012Wooga
 
Gamification on Branding
Gamification on BrandingGamification on Branding
Gamification on BrandingJaume Teixi
 
Killer Benefits of HTML5 in Games
Killer Benefits of HTML5 in GamesKiller Benefits of HTML5 in Games
Killer Benefits of HTML5 in GamesHenric Suuronen
 
Craft the Perfect Posts for the "Big 3" Social Networks
Craft the Perfect Posts for the "Big 3" Social NetworksCraft the Perfect Posts for the "Big 3" Social Networks
Craft the Perfect Posts for the "Big 3" Social NetworksHubSpot
 

Viewers also liked (6)

Web enabled video
Web enabled videoWeb enabled video
Web enabled video
 
The web is a mess: how I learnt to stop worrying and love web archiving. Kris...
The web is a mess: how I learnt to stop worrying and love web archiving. Kris...The web is a mess: how I learnt to stop worrying and love web archiving. Kris...
The web is a mess: how I learnt to stop worrying and love web archiving. Kris...
 
Diamond Dash iOS - Post Mortem_GDC Europe 2012
Diamond Dash iOS - Post Mortem_GDC Europe 2012Diamond Dash iOS - Post Mortem_GDC Europe 2012
Diamond Dash iOS - Post Mortem_GDC Europe 2012
 
Gamification on Branding
Gamification on BrandingGamification on Branding
Gamification on Branding
 
Killer Benefits of HTML5 in Games
Killer Benefits of HTML5 in GamesKiller Benefits of HTML5 in Games
Killer Benefits of HTML5 in Games
 
Craft the Perfect Posts for the "Big 3" Social Networks
Craft the Perfect Posts for the "Big 3" Social NetworksCraft the Perfect Posts for the "Big 3" Social Networks
Craft the Perfect Posts for the "Big 3" Social Networks
 

Similar to HTML5 and the future of the web (Dr. Seuss style)

Finding harmony in web development
Finding harmony in web developmentFinding harmony in web development
Finding harmony in web developmentChristian Heilmann
 
HTML5 - Moving from hacks to solutions
HTML5 - Moving from hacks to solutionsHTML5 - Moving from hacks to solutions
HTML5 - Moving from hacks to solutionsChristian Heilmann
 
Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Christian Heilmann
 
Know thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webKnow thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webnolly00
 
The prestige of being a web developer
The prestige of being a web developerThe prestige of being a web developer
The prestige of being a web developerChristian Heilmann
 
Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014
Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014
Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014Christian Heilmann
 
Responsive Web Design Process
Responsive Web Design ProcessResponsive Web Design Process
Responsive Web Design ProcessSteve Fisher
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature CreatureChristian Heilmann
 
Justin French Web Directions07
Justin French Web Directions07Justin French Web Directions07
Justin French Web Directions07justinfrench
 
Put a UI Developer in a Bank; See What Happens
Put a UI Developer in a Bank; See What HappensPut a UI Developer in a Bank; See What Happens
Put a UI Developer in a Bank; See What HappensC4Media
 
Front Porch Keynote 2014
Front Porch Keynote 2014Front Porch Keynote 2014
Front Porch Keynote 2014amboy00
 
Web2 And Distributed Services
Web2 And Distributed ServicesWeb2 And Distributed Services
Web2 And Distributed ServicesMike Ellis
 
Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfacesJohan Ronsse
 
Niche or Platform - what next for our institutions online?
Niche or Platform - what next for our institutions online?Niche or Platform - what next for our institutions online?
Niche or Platform - what next for our institutions online?Mike Ellis
 
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptChristian Heilmann
 
M is for modernization
M is for modernizationM is for modernization
M is for modernizationRed Pill Now
 

Similar to HTML5 and the future of the web (Dr. Seuss style) (20)

Finding harmony in web development
Finding harmony in web developmentFinding harmony in web development
Finding harmony in web development
 
HTML5 - Moving from hacks to solutions
HTML5 - Moving from hacks to solutionsHTML5 - Moving from hacks to solutions
HTML5 - Moving from hacks to solutions
 
Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016
 
Know thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webKnow thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the web
 
The prestige of being a web developer
The prestige of being a web developerThe prestige of being a web developer
The prestige of being a web developer
 
Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014
Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014
Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014
 
Smashingconf nyc-final
Smashingconf nyc-finalSmashingconf nyc-final
Smashingconf nyc-final
 
Responsive Web Design Process
Responsive Web Design ProcessResponsive Web Design Process
Responsive Web Design Process
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature Creature
 
Justin French Web Directions07
Justin French Web Directions07Justin French Web Directions07
Justin French Web Directions07
 
Put a UI Developer in a Bank; See What Happens
Put a UI Developer in a Bank; See What HappensPut a UI Developer in a Bank; See What Happens
Put a UI Developer in a Bank; See What Happens
 
Front Porch Keynote 2014
Front Porch Keynote 2014Front Porch Keynote 2014
Front Porch Keynote 2014
 
Web2 And Distributed Services
Web2 And Distributed ServicesWeb2 And Distributed Services
Web2 And Distributed Services
 
Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfaces
 
Niche or Platform - what next for our institutions online?
Niche or Platform - what next for our institutions online?Niche or Platform - what next for our institutions online?
Niche or Platform - what next for our institutions online?
 
Progressive web and the problem of JavaScript
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScript
 
No Breaks
No BreaksNo Breaks
No Breaks
 
M is for modernization
M is for modernizationM is for modernization
M is for modernization
 
Making Web Accessibility Sexy
Making Web Accessibility SexyMaking Web Accessibility Sexy
Making Web Accessibility Sexy
 

More from Christian Heilmann

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloChristian Heilmann
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteChristian Heilmann
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteChristian Heilmann
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandChristian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerChristian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachChristian Heilmann
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsChristian Heilmann
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansChristian Heilmann
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Christian Heilmann
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Christian Heilmann
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)Christian Heilmann
 

More from Christian Heilmann (20)

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 

Recently uploaded

Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024Janet Corral
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...fonyou31
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...PsychoTech Services
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDThiyagu K
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingTeacherCyreneCayanan
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfsanyamsingh5019
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 

Recently uploaded (20)

Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 

HTML5 and the future of the web (Dr. Seuss style)

  • 1. HTML5 and the future of the web. Chris Heilmann and Crystal Beasley, Mozilla, Webvisions Barcelona 2012
  • 2. This talk is being given over and over again.
  • 3. The normal flow is this: ★ I show you incredible stuff! (in a special browser build with all kind of flags turned on) ★ You try it out later. ★ It doesn’t work for you. ★ You are behind in fixing that layout glitch in IE8 your boss so wants you to fix. ★ I am awesome, you are frustrated.
  • 4. Something is broken... There seems to be a disconnect between the “web development and design scene” and both the market we are working for and the companies building the tools we use.
  • 5. we <3 abstractions! http://www.flickr.com/photos/pa1nt/2395397976/ We seem to be obsessed with abstractions. Instead of using ideas like for example vendor prefixes in browsers we write a library to not have to care about them. This leads to a lot of problems with experimental implementations becoming necessary features and new developers learning abstractions instead of the core technologies.
  • 6. Everybody is a creator: Last year: 37 new microlibraries and 10 new “innovative CSS work frameworks” We all want to be creators and build a thing that makes it easier for others to code. We don’t even follow up any longer if they are used or not, the concept of having built them makes us already feel great.
  • 7. “This photo was taken by photographer Jack Bradley and depicts the exact moment this boy, Harold Whittles, hears for the very first time ever.The doctor treating him has just placed an earpiece in his left ear. Date unknown. “ I think we have forgotten a bit about the wonder of hearing and learning and are too focused on building what brings change. We have two ears but one mouth and most of the time our speaking to listening ratio does not reflect that.
  • 8. At Mozilla we have a lot of programs to turn people into webmakers and it is amazing to see how excited kids are doing their first few web things using Mozilla Thimble.
  • 9. Unless someone like you cares a whole awful lot, nothing is going to get better. It's not. On the flight over here I watched the Lorax based on the book by Dr. Seuss and I loved it - especially this quote. I actually got so inspired, that I wrote the rest of this presentation in the style of Dr. Seuss. That way all of you in the audience who have kids can read to them and learn about the future of the web at the same time.
  • 10. http://codepo8.github.com/seussweb/ I uploaded the whole “poem” to github, where you can find it and use it - be my guest. There are a lot of links in there for you to follow and read at your own leisure.
  • 11. http://www.chrisharrison.net/index.php/Visualizations/InternetMap There's a big web out there,  it's huge - I tell you,  it spans the whole world,  but it was boring and blue…
  • 12. Then change came about,  in the shape of a fox,  it was cunning and open,  and it broke all the locks.
  • 13. Others showed up, and joined the good fight,  a singer, an adventurer,  and a shiny new knight.
  • 14. These all played together,  and spoke the same tongue,  which brought back old players, to join them in song. 
  • 15. A standard was set,  and it changed a few things, a richer web for apps,  was the promise it brings.
  • 16. Bah, standards! Who needs them? Some flashy ones said,  till a phone that was smart, kicked them out of its bed.
  • 17. https://github.com/SirPepe/SpecGraph#html5-spezifikations-%C3%9Cbersicht-- We moved past one standard,  as web work is richer, so "HTML5 and friends", paints a much better <picture>.
  • 18. http://www.flickr.com/photos/ikkoskinen/4046500800/ Things that are fun,  should be shiny and cool, that's why the new standards bring many a new tool.
  • 19. Watching and hearing, are what people like to do. Using <audio> and <video> is simple, and you can do it , too.
  • 20. Both of them are web-native, which is a reason to clap. They can interact with other content, and Mozilla Popcorn makes that a snap.
  • 21. If beats and frequencies are what you need to play, check the Web Audio API - it gives you just that - even today.
  • 22. http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/ To play nice with batteries, use requestAnimationFrame(), don't let it stop you that it has such a long name.
  • 23. http://alteredqualia.com/ 3D graphics are thrilling, as gamers will tell, we now have that on the web and it is called WebGL.
  • 24. Water goes everywhere you pour it, just ask Chris about his Macbook Air :( MediaQueries allow you be as fluid and respond instead of despair.
  • 25. Natural movements are smooth, just open your eyes. With CSS animation, transforms and transition, you can mimic this - nice!
  • 26. "The web means you need to be online", I hear smartypants gloat, well, we have offline storage, so there - take your coat.
  • 27. Got a cam and some friends, and do you want to chat? WebRTC is what you need, even to show off your cat.
  • 28. Srsly? Rhymes sometimes don't come easy, as you just became aware. So let's just move ahead quickly, this was just too much to bear.
  • 29. An artist needs a <canvas>, and HTML5 gave us that. Read, write and convert pixels, All in the client, it's mad!
  • 30. http://mozilla.github.com/x-tag/demo.html "We don't have rich elements!" many people complain, Use Web Components with X-Tag and create them - easy to maintain.
  • 31. god? password? password123? letmein? ihatethis? Passwords are tough,  it is easy to see,  so allow login with emails, using BrowserID.
  • 32. The web is a mess, with third party buttons abound. Web Intents make them pointless, let's not have them around.
  • 33. Magic and stuff! By design HTML5 is forgiving, its parser is great. It didn't want to break the web, so let's not break it in its stead.
  • 34. Course you can write weird things, and they will work - there's no doubt. But will they be readable by others? This is what it's about.
  • 35. http://www.flickr.com/photos/crimsonninjagirl/241166239/ You don't create for yourself, or your friends who are the same. You develop for the next guy, so make sure you're not to blame.
  • 36. You don't jump in a river, if you don't know its depth. On the web using Modernizr, should be your first step.
  • 37. Give new stuff to new players, and use it to enhance. Don't support when it's not needed IE6 only walks - it can't dance!
  • 38. With a vendor prefix browsers tell you "this is not ready". So by all means, give them a go, but don't expect to go steady. 
  • 39. And those prefixes vanish, you mustn't forget! End with a prefixless version, It's your very best bet.
  • 40. http://movethewebforward.org/ So we ask you to help us, build a web that will last. Be future friendly and look forward, and stop building for the past.
  • 41. http://movethewebforward.org/ The web is on phones, tablets, computers, TVs. We have to move it forward. or else our existence will cease.
  • 42. http://blog.mozilla.org/blog/2012/07/02/firefox-mobile-os/ Hardware that is locked up, is not what we are about, so check out Firefox OS, if you like the web - you’ll like it - no doubt.
  • 43. http://coding.smashingmagazine.com/2011/09/07/help-the-community-report-browser-bugs/ Last but not least, if you find something's wrong please file a bug and tell us, this is how things get done.
  • 44. http://www.flickr.com/photos/wilderdom/64733125/ So there you have a lot to play with, check out and share. We really want you to do that, come on, show us you care.
  • 45. Thanks! Christian Heilmann @codepo8 Crystal Beasley @skinny So well done for reading and listening, and going great lengths, that's all we got time for, so good-bye and thanks!