6 ms·

JQuery 1.4 (HTML5 Presentation)

92 points by ihumanable 16y ago

FluidDjango 16y ago
I guess what is supposed to be most striking is the horizontal slide show at [EDIT: that did not originally show for me in Safari 4.0.5]: http://apirocks.com/html5/html5.html http://apirocks.com/html5/html5.html Which didn't seem remarkable till around slide #31: http://apirocks.com/html5/html5.html#slide31 http://apirocks.com/html5/html5.html#slide31 - whose css-controlled number of columns ( -webkit-column-count: 3; ) I had never seen before. EDIT: For real usability a TOC of the numerous slides + info on cross-browser testing would have added huge value.
quellhorst 16y ago
In Safari I'm unable to advance to a new slide.
ytNumbers 16y ago
Only the first slide was visible when viewed in Firefox 3.6.3 and Chrome 4.1... It's Hard to believe that something so unviewable made it to the front page of HN.
- ihumanable 16y ago
  You have to push the right arrow key, it's a slide show. Sorry for not having better instructions, it's based off of the http://apirocks.com/html5/html5.html#slide1 http://apirocks.com/html5/html5.html#slide1 presentation. The reason mouse clicks can't be used is because that would interfere with the JavaScript examples later on in the presentation.
  - FluidDjango 16y ago
    Impressive work, Matthew! And I'm pleased it led me to your "Prosper" db front-end: looking forward to following its development. ...and to your use of "unlicense'd" (did i get right number/type of quotes?).
    - ihumanable 16y ago
      Thank you for your kind words, yes I believe that all of your quotes match up nicely. I can't take all the credit, this is based heavily on the apirocks HTML5 slideshow and on the amazing work Paul Irish did on the jQuery 1.4 Hawtness series, standing on the shoulders of giants.
va_coder 16y ago
checkout the clean html source code.
- RyanMcGreal 16y ago
  HTML Tidy finds 21 errors and 3 warnings. I like Eric Meyer's S5 template for clean markup and slick interface: http://meyerweb.com/eric/tools/s5/ http://meyerweb.com/eric/tools/s5/
mcav 16y ago
Tip: use left/right arrow keys to move
- boucher 16y ago
  Less like a tip, more like a requirement. Clicking to advance didn't work for me. :(
- Sidnicious 16y ago
  Tip: Mobile devices may not have arrow keys. Making your website require them is not a great idea.
  - deleted 16y ago
    [deleted]
  - todd3834 16y ago
    On the iPhone/iPad I found you can navigate the slides by one quick slide left or right.
joubert 16y ago
slide 10+ have their content missing
- mgcross 16y ago
  are you viewing in FF? I am and noticed some of the logos aren't displaying - but they do in Chrome. Nice presentation, but "HTML5" shouldn't mean "webkit only".
  - joubert 16y ago
    Safari
joubert 16y ago
doesn't solve fundamental powerpointitis problem
KTamas 16y ago
Great stuff. I forked it on GitHub and added support for [tab] cause it messed up the whole thing. Now it advances to the next slide.
- p858snake 16y ago
  Linkage would be nice, So we can all marvel in the wonderful stuff being done with this.
mgrouchy 16y ago
I thought the most impressive part about the html5 presentation wasn't necessarily the fact that it was HTML5. Its the fact that you can show working examples directly on the slide, they aren't simulated, they are just working javascript.
- messel 16y ago
  That didn't sink in for me right away. I was like whoa, this is all live javascript how the heck is Matt Nowack pulling this off in something like slideshare/etc. Then it clicked. Very cool stuff.
deleted 16y ago
[deleted]
deleted 16y ago
[deleted]
calebgilbert 16y ago
Tried it in FF 3.6.3 and safari - no arrows, can't advance anywhere.
- jister 16y ago
  did too and was lost because I don't know where to click. not "human" friendly.
theycallmemorty 16y ago
I had no idea John Resig is so young! I was picturing a gandalf-like grey-beard who had been coding JS since before the internet. :P
Kilimanjaro 16y ago
Using the scroll wheel would be a nice touch: window.addEventListener("DOMMouseScroll",onwheel,false); function onwheel(event){ var delta = -event.detail/3; if(delta>0){prevSlide();} else if(delta<0){nextSlide();} event.preventDefault(); event.returnValue = false; }
amalcon 16y ago
I saw pretty crazy behavior regarding the back button, at least in FF 3.5.9. It put many elements in my history, none of which actually took me anywhere.
jackfoxy 16y ago
I'm sure this is an interesting presentation for me, but I've tried the latest versions of IE, FireFox, and Chrome, and at best I get an overly kludgy interface. Please repost in some better format. Thanks
lhorie 16y ago
Quick thoughts: - Graceful degradation in HTML5 demos in general could definitely use some love - if you use a non-bleeding-edge Gecko-based browser (e.g. Flock), you get no functionality and no errors. Also, if your intended target audience is webdevs, why in the world would you require them to install chrome frame in IE? Just leave the first slide as is and we'll get it. - Content nitpit: the slide about live() says "Efficient and concise way to provide client-side interaction". AFAIK, live events are slower than regular events, so calling them efficient seems wrong.
ethan 16y ago
Browser Back/Forward buttons do nothing, scrollwheel does nothing, no overview/clickable index of links, annoying to scan...powerpoint is the future of webdev?
julio_the_squid 16y ago
Some good examples there, but in all it's rather brief. Surely there's more to jQuery 1.4? I'm getting quite weary of hearing that this or that is HTML5, and then you view it and there's really nothing in particular that you couldn't do with HTML 4.1. Is there something special and brand new about showing a set of slides with Javascript with a poor interface? With all of this hype and mislabeling, average semi-technical people are becoming confused from here to Zaire about HTML5. The comments on say, TechCrunch prove this thoroughly every time the topic is mentioned.
- mbrubeck 16y ago
  Interestingly it does use "section" and "header" elements, which are basically invisible to users but are also among the few "HTML5" features that actually fit the name.
  - julio_the_squid 16y ago
    Yeah, I saw it uses a few new elements. Still, you could accomplish the same effect without them, right? So it doesn't really require HTML5?
3dFlatLander 16y ago
It would be a nice accessibility feature to make it scale a bit better for browser zoom functions.
p858snake 16y ago
Would be nice to have a small menu in a corner or a custom right click context menu which has "Jump To/Previous/Next" type options. Also a option for it to full the whole screen area would be awesome.

92 points by ihumanable 16y ago

I guess what is supposed to be most striking is the horizontal slide show at [EDIT: that did not originally show for me in Safari 4.0.5]: http://apirocks.com/html5/html5.html http://apirocks.com/html5/html5.html Which didn't seem remarkable till around slide #31: http://apirocks.com/html5/html5.html#slide31 http://apirocks.com/html5/html5.html#slide31 - whose css-controlled number of columns ( -webkit-column-count: 3; ) I had never seen before. EDIT: For real usability a TOC of the numerous slides + info on cross-browser testing would have added huge value.

quellhorst 16y ago

In Safari I'm unable to advance to a new slide.

ytNumbers 16y ago

Only the first slide was visible when viewed in Firefox 3.6.3 and Chrome 4.1... It's Hard to believe that something so unviewable made it to the front page of HN.

ihumanable 16y ago
You have to push the right arrow key, it's a slide show. Sorry for not having better instructions, it's based off of the http://apirocks.com/html5/html5.html#slide1 http://apirocks.com/html5/html5.html#slide1 presentation. The reason mouse clicks can't be used is because that would interfere with the JavaScript examples later on in the presentation.
- FluidDjango 16y ago
  Impressive work, Matthew! And I'm pleased it led me to your "Prosper" db front-end: looking forward to following its development. ...and to your use of "unlicense'd" (did i get right number/type of quotes?).
  - ihumanable 16y ago
    Thank you for your kind words, yes I believe that all of your quotes match up nicely. I can't take all the credit, this is based heavily on the apirocks HTML5 slideshow and on the amazing work Paul Irish did on the jQuery 1.4 Hawtness series, standing on the shoulders of giants.

va_coder 16y ago

checkout the clean html source code.

RyanMcGreal 16y ago
HTML Tidy finds 21 errors and 3 warnings. I like Eric Meyer's S5 template for clean markup and slick interface: http://meyerweb.com/eric/tools/s5/ http://meyerweb.com/eric/tools/s5/

mcav 16y ago

Tip: use left/right arrow keys to move

boucher 16y ago
Less like a tip, more like a requirement. Clicking to advance didn't work for me. :(
Sidnicious 16y ago
Tip: Mobile devices may not have arrow keys. Making your website require them is not a great idea.
- deleted 16y ago
  [deleted]
- todd3834 16y ago
  On the iPhone/iPad I found you can navigate the slides by one quick slide left or right.

joubert 16y ago

slide 10+ have their content missing

mgcross 16y ago
are you viewing in FF? I am and noticed some of the logos aren't displaying - but they do in Chrome. Nice presentation, but "HTML5" shouldn't mean "webkit only".
- joubert 16y ago
  Safari

joubert 16y ago

doesn't solve fundamental powerpointitis problem

KTamas 16y ago

Great stuff. I forked it on GitHub and added support for [tab] cause it messed up the whole thing. Now it advances to the next slide.

p858snake 16y ago
Linkage would be nice, So we can all marvel in the wonderful stuff being done with this.

mgrouchy 16y ago

I thought the most impressive part about the html5 presentation wasn't necessarily the fact that it was HTML5. Its the fact that you can show working examples directly on the slide, they aren't simulated, they are just working javascript.

messel 16y ago
That didn't sink in for me right away. I was like whoa, this is all live javascript how the heck is Matt Nowack pulling this off in something like slideshare/etc. Then it clicked. Very cool stuff.

deleted 16y ago

[deleted]

deleted 16y ago

[deleted]

calebgilbert 16y ago

Tried it in FF 3.6.3 and safari - no arrows, can't advance anywhere.

jister 16y ago
did too and was lost because I don't know where to click. not "human" friendly.

theycallmemorty 16y ago

I had no idea John Resig is so young! I was picturing a gandalf-like grey-beard who had been coding JS since before the internet. :P

Kilimanjaro 16y ago

Using the scroll wheel would be a nice touch: window.addEventListener("DOMMouseScroll",onwheel,false); function onwheel(event){ var delta = -event.detail/3; if(delta>0){prevSlide();} else if(delta<0){nextSlide();} event.preventDefault(); event.returnValue = false; }

amalcon 16y ago

I saw pretty crazy behavior regarding the back button, at least in FF 3.5.9. It put many elements in my history, none of which actually took me anywhere.

jackfoxy 16y ago

I'm sure this is an interesting presentation for me, but I've tried the latest versions of IE, FireFox, and Chrome, and at best I get an overly kludgy interface. Please repost in some better format. Thanks

lhorie 16y ago

Quick thoughts: - Graceful degradation in HTML5 demos in general could definitely use some love - if you use a non-bleeding-edge Gecko-based browser (e.g. Flock), you get no functionality and no errors. Also, if your intended target audience is webdevs, why in the world would you require them to install chrome frame in IE? Just leave the first slide as is and we'll get it. - Content nitpit: the slide about live() says "Efficient and concise way to provide client-side interaction". AFAIK, live events are slower than regular events, so calling them efficient seems wrong.

ethan 16y ago

Browser Back/Forward buttons do nothing, scrollwheel does nothing, no overview/clickable index of links, annoying to scan...powerpoint is the future of webdev?

julio_the_squid 16y ago

Some good examples there, but in all it's rather brief. Surely there's more to jQuery 1.4? I'm getting quite weary of hearing that this or that is HTML5, and then you view it and there's really nothing in particular that you couldn't do with HTML 4.1. Is there something special and brand new about showing a set of slides with Javascript with a poor interface? With all of this hype and mislabeling, average semi-technical people are becoming confused from here to Zaire about HTML5. The comments on say, TechCrunch prove this thoroughly every time the topic is mentioned.

mbrubeck 16y ago
Interestingly it does use "section" and "header" elements, which are basically invisible to users but are also among the few "HTML5" features that actually fit the name.
- julio_the_squid 16y ago
  Yeah, I saw it uses a few new elements. Still, you could accomplish the same effect without them, right? So it doesn't really require HTML5?

3dFlatLander 16y ago

It would be a nice accessibility feature to make it scale a bit better for browser zoom functions.

p858snake 16y ago

Would be nice to have a small menu in a corner or a custom right click context menu which has "Jump To/Previous/Next" type options. Also a option for it to full the whole screen area would be awesome.