What Happened When We Talked HTML5 with the Experts

Sarah Hawk

This morning (down under) we ran the latest in our series of Talk With The Experts sessions. The subject this time around was HTML5 and our experts were not only knowledgeable, they were highly entertaining.  Said experts were Remy Sharp and Bruce Lawson of Introducing HTML5 fame.

If you want to know what went down, below is the transcript in full. If you don’t have time to read through the whole thing, here is a list of useful resources that were mentioned in the session.

Remy and Bruce’s book: Introducing HTML5
SitePoint’s HTML5 & CSS3 For The Real World
Full Frontal Conference (UK)  http://2012.full-frontal.org/workshop/html5 

Remy’s recommendations for general resources:
http://html5demos.com
Opera.dev
http://html5rocks.com
http://html5doctor.com
HTML5 Accessibility Chops: notes on using ARIA http://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-using-aria-notes/ 

And from Bruce:
Responsive images: what’s the problem, and how do we fix it? http://dev.opera.com/articles/view/responsive-images-problem/
getUserMedia gives mobiles and browsers access to the camera already.  www.html5doctor.com/getusermedia
Required reading for all History of the browser user-agent string stuff http://webaim.org/blog/user-agent-string-history/

You can follow Remy and Bruce on Twitter @rem and @brucel

Next in our series of chat sessions is CSS Layouts. Details to be announced on the forums over the next week or so.

test test
For those of us habitual xhtml devs, how bad is it if we self-close tags, like <img /> and <br /> while using the html5 doctype?
bruce bruce
test, not bad at all
test test
But doesn’t it throw validation errors?
sega sega
I have BIG issues with form validation in HTML5
bruce bruce
html5 is designed so your existing content won’t break. So self-close or not, both valiud
sega sega
It never works as intended, the bubble cannot be styled.
test test
cool, thanks @bruce
bruce bruce
sega the bubble is part of browser chrome. You can’t style file upoad dialogs, or the back button – you can’t style the validation bubbles. I agree that you should be able to, though
SpaceBee… SpaceBeers
I never realised self closing was a bad thing so I’m learning things already
juliandr… juliandres
How do you guys like your breadcrumbs marked up?
sega sega
I code templates, it’s awesome, but recently with HTML5 new validation tools, the bubble cannot be styled, and you can only style it with Chrome, these cross browser issues drive my crazy. :
rem rem
@saga without seeing your actual code, I can’t be 100% sure, but if it’s valid HTML4 or valid XHTML, then it’s valid HTML5.
bruce bruce
SpaceBee not bad at all, pefectly fine.
SpaceBee… SpaceBeers
@bruce – then I have learnt nothing so far.
alejandr… alejandromg
I alejandro here! What are the most common use case for data-*?
bruce bruce
alejandr common use for data-* is to pass data to scripts on the page
bruce bruce
Nice to see @ian here. Everyone, if you’re looking at HTML5 video/ multimedia, Ian’s book is the best out there
sega sega
external scripts?
paceaux paceaux
@bruce I’d like to understand the the outlining algorithm and the semantic elements a little better. You can have an <aside> for the page, and for an <article> … but what about <section> ? Does the aside then get associated with <section> ?
AliSpark AliSpark
AliSpark here, (just finishing supper!) I am learning html5, css3, Blender 3D, among other things. I have a problem getting audio to work as it should do on my website…
James James
Where do things stand with hgroup? Recommended or not?
rem rem
@alejandromg what’s really nice is when you’re able to access the dataset values directly through JavaScript, i.e. el.dataset.foo will pull out the data-foo value – and setting works the same way.
theirf theirf whats the name of @ian’s book ?
bruce bruce
@theirf Ian Devlin
jess.irw… jess.irwin
I’m Jess, front-end developer at a company in Newcastle in Australia. The Design Team has just moved from xhtml strict to html5 and we’re still confused as to where to use sections etc.
alejandr… alejandromg
oh that’s cool
ian ian
Thanks @bruce – HTML5 Multimedia Develop and Design is the book @theirf
alejandr… alejandromg
so datasets make more easy the interaction with js! nice to know
theirf theirf
Cool, i’ll check it out. thank you
bruce bruce
rem will mostly deal with API/ JS questions, I’ll do markup, validation etc
rem rem
This talker app isn’t very good :- I can’t scroll the people connected on the right…
rem rem
@bruce who was asking?
theirf theirf
@ian cool, i’ll check it out. thank you
bruce bruce
this talker app is rubbish – I can’t use Opera with it, @rem!
HAWK HAWK
I know @rem. Unfortunately it’s the best of a bad lot. I’ve researched extensively and can’t find anything perfect.
paceaux paceaux
@bruce and also, I’d just like to understand what is allowed to get <header> and <footer>… can I put <header> and <footer> in an <aside> ?
eddieA eddieA
Rem, anytime I use javascript should I store the script in my folders or use a link to the apo?
api?
Kestrel Kestrel
I’ve never written anything in HTML5 my sites are in XHTML one big question i have is how do HTML5 sites work in ie6-7?
bruce bruce
@paceaux header and footer can contain anything except another header or footer
Caruso_g Caruso_g
Is there a rule of thumbs to use the section tag? I mean, it should be intended not to be used as a positional element but then, being intended as a logic portion of the page (I.e. sections could be part of a TOC) which should be their correct use? Section > header > content ?
barlow19… barlow1984
CSS 3 rather than HTML 5 question, but why the need for browser prefix’s for many of the new classes when there wasn’t previously a need? Will this be phased out once there is larger scaled adoption of html5/css3?
James James
@paceaux yes you can put header and footer in an aside
rem rem
@eddieA erm, both – depends on the context. Local scripts to your app -> folder. API calls, like to twiter -> regular API calls.
bruce bruce @paceaux yes you can have header/ footer in aside
ah, what @james said
rem rem
Folks – those wanting the skinny on section & article – excellent super detailed section in the wonderful title: Introducing HTML5 =>http://introducinghtml5.com
test test
Is there a best practice for supporting HTML5’s new elements in CSS with IE6?
JoseBranez has left the room
bruce bruce
@kestrel html5 sites work in ie6-7 but you need to use the html5shiv, that @rem wrote, to make them styleable, If your users of IE6, 7 don’t have JavaScript, it won’t work so don’t use html5
test see my answer to @kestrel, above
rem rem
@test either use the html5shiv or modernizr comes with it built in
Kestrel Kestrel
@bruce if you use a html5shiv will that put the browser in quirks mode?
paceaux paceaux
@rem I’ve read that book at least a dozen times, I just wasn’t seeing examples of <header> and footer in all of the sectioning elements at html5doctor.com
jess.irw… jess.irwin
I’m curious to know if this site uses <section>s in the right manner (both on homepage, and a content page – like the about page for example) – http://sill-lighting.com.au
Caruso_g Caruso_g
@rem thanks
HAWK HAWK
Welcome to anyone that has just joined. Feel free to jump in at any stage with questions that you have for Bruce & Remy. If you have none, feel free to introduce yourself and take part in the chat.
ian ian
If I might step in, @paceaux
bruce bruce
kestrel no htmlshiv= doesn’t put browser in qurisk mode
James James
@bruce — hgroup … recommended or not? I’ve read differing opinions.
eddieA eddieA
Bruce, which web designer should I follow on Twitter?
bruce bruce
James I never use hgroup as I never saw the need for it pre-html5
ian ian If I might step in, @paceaux, header might not be used if the header would only contain a h element for example, then it’s not really needed to you might not see it used
sega sega
@eddieA you can follow me *smile* :)
bruce bruce
@eddieA me, @rem, @iandevlin, @mattwilcox, @tabatkins, @miketaylr
johnperc… johnpercival
@rem || @bruce Would love to hear your takes on the future of online advertising and its transition with emerging web standards, being that its primarily flash based?
Kestrel Kestrel
@bruce cool thx man :-)
paceaux paceaux
@ian absolutely, header isn’t a replacement for h1-h6
bruce bruce
@juliandr breadcrumbs: ordered list
juliandr… juliandres
@bruce Thanks.
eddieA eddieA
good question @johnpercival
rem rem
@johnpercival I’d expect ad agencies to start moving to the HTML5 type tech – including video and canvas – basically they won’t move there for the win of standards, they’ll go there for further penetration
sega sega
Anybody has any experience in CS6, and it’s transition to HTML5, does it work? http://www.adobe.com/products/flash.html
James James
@bruce — is W3C considering dropping hgroup from the spec?
hollowx hollowx
Hi, is there a nice and extensive documentation on event listeners and somewhere with good demos
Kestrel Kestrel
maybe its time to try this HTML5 / modernizer stuff out :P
HAWK HAWK
@eddieA A couple of good ones are @justcreative and @meyerweb
bruce bruce
@johnpercival I’m sure webGL, canvas or loads of crap empty divs flung around with CSS animations will be everywhere before lonjg for advertising
theirf has left the room
ian ian
I know @paceaux but if you were going to have <header><h2>Mt Title</h2></header> then you would probably leave out the <header> and only use the <h2>
rem rem
@johnpercival my biggest issue with injected ads is often they use document.write – that’s the big killer and in fact the main thing that needs to go.
johnperc… johnpercival
Agreed :) Thanks for the input
Chris has left the room
dxbmatt has left the room
barlow19… barlow1984
@kestrel I’ve been using it as a newbie and it’s great
johnperc… johnpercival
innerHTML as an alternative?
rem rem
@kestrel remember modernizr is *only* for detecting support in the browser – but yes, check those bad boys out
@johnpercival more than they should wait for dom to be ready – but that’s kind of off topic :)
paceaux paceaux
@ian to be specific, I was doing a CMS implementation where our primary content was being placed in <article>, but that would sometimes have headings where the user could put in h1-6 AND <p> … and the article could be placed in any <Section> ….
bruce bruce
James w3c keeps hgroup, whatwg dropped it. I’ve never used it. For example, I wouldn’t do <header><h1>My site</h1><h2>Widgets of glory!</h2></hgroup></header>, I’d do <header><h1>My site</h1><p>Widgets of Glory!</p></header>
paceaux paceaux
@ian I had wanted to be sure that if I put that same content in an <aside>, it would still be permissible
eqroeil has entered the room
rem rem
@hollowx the MDN is a great resource. I run http://html5demos.com but it’s not extensive, and Opera.dev is a pretty damn good resource too.
juliandres has left the room
johnperc… johnpercival
@rem @bruce – Thx
ian ian
@paceaux
clintonhalpin has left the room
rem rem
@hollowx also check out http://html5rocks.com
eddieA eddieA
@bruce, I sometimes don’t use the <p> tag. Should I always use a p tag
Kestrel Kestrel
@rem i’ve been holding out and sticking with XHTML + CSS2 for the last few years thinking this stuff prob is isn’t ready for production
ian ian
it would @paceaux , as @bruce said earlier I think (I will now stop hijacking!)
rem rem
@hollowx oh – and proably the best resource is http://html5doctor.com
barlow19… barlow1984
is chrome still the best browser for developing html 5 and css 3?
dotbdotb has entered the room
bruce bruce
@eddieA no, don’t need to use <p> in that instance
rem rem
@kestrel CSS2 only went to “recommendation” phase at the end of 2010 – but you were using it in production before then, right?
hollowx hollowx
thanks @rem just checked a nice article on capturing css3 event on sitepoint. http://www.sitepoint.com/css3-animation-javascript-event-handlers/ thats nice as i’m doing more and more iPad adds with animation or events
bruce bruce
barlow1984 Chrome is the best, as is Opera, Firefox, Safari and IE. You’re a web developer, right? SO you design for the web = all browsers
rem rem
@kestrel it’s the same with HTML5 and CSS3 – you take the parts that are stable and you leave the bits that aren’t. i.e. .innerHTML is HTML5 – but you use it, microdata is part of HTML5, but it’s barely supported – so ignore it.
barlow19… barlow1984
@bruce i guess so, we’re pretty limited at work with our over strict IT policies and have to develop in FF 5 at the min, trying to push them to allow full chrome access
paceaux paceaux
@ian thanks for your answers, though. the client will be happy to know I got it right
rem rem
@barlow1984 most of the latest versions of browsers are really good for HTML5 support – even IE10 is impressive. I tend to chose the browser based on dev tools. And that tends to be personal preference.
bruce bruce
barlow1984 you need all browsers, how can yoiu test yoiur website otherwise?
SpaceBee… SpaceBeers
@barlow1984 – The aurora builds of Firefox have some quite nice dev tools
test test
@rem why ignore microdata, since it won’t hurt users who don’t have it?
Kestrel Kestrel
@rem yeah thats the issue its easy to get caught up with the hype and spend many hours trying to fix bugs caused by using features that aren’t stable. Its def difficult getting a feel for when its time to make the leap
eddieA eddieA
Is Adobe Flash dead?
James James
@rem | @bruce — in the past, I have sometimes used <cite> for a byline (ex. “Article written by John Doe”); should I be using something else?
HAWK HAWK
Welcome to anyone that has just joined. Feel free to jump in at any stage with questions that you have for Bruce & Remy.
sega sega
@EddieA nope!
rem rem
@test that’s my choice in what I support, I don’t know microdata well enough to support it, so I don’t add it.
@eddieA no.
paceaux paceaux
@bruce what kind of CSS properties can we expect to find for the elements like <summary> / <details> and even <progress> / <meter>
neriv neriv
Lol! Love it @bruce
hollowx hollowx
@barlow1984 for dev tools you also have google canary
barlow19… barlow1984
@bruce indeed thats my point with them….. we can ‘test’ on other browsers but not ‘develop’ thats why im trying to move to something more modern like chrome or a newer FF
sega sega
@EddieA CS6 has Flash converting to HTML5 pages
mstalfoort has entered the room
barlow19… barlow1984
@hollowx thanks i’ll take a look
paceaux paceaux
@bruce will we be able to control the fill and shape of progress / meter … and can I change the triangle in summary/details ?
bruce bruce
eddieA Flash will be needed to shim video and audio and web sockets for a long time yet (and localstorage, right @rem?)
rem rem
Regarding browser testing – you need all browsers. They ALL have excellent HTML5 support in their latest browsers. As a developer, you need to know your way around, and know what quirks are lurking in older browsers.
mah0001 has entered the room
eddieA eddieA
@sega, interesting. I wonder how that is going to work
bruce bruce
@paceaux yes, once the shadow DOM is available. Not yet.
neriv neriv
Adobe brackets looks interesting… Any thoughts on that?
danielwrobert has entered the room
dxbmatt dxbmatt
@barlow1984 if your IT policies restrict it, tell them you need access to everything. Even a VM with current browsers
sega sega
@eddieA me too! Anybody got experience with this?
rem rem
@eddieA Flash sits in the stratosphere of apps – 3D real-time interactive DRM video is a place that’s a long way off for web standards.
paceaux paceaux
@bruce ahh, cool. could you point me to some documentation on that?
neriv neriv
hollowx hollowx
@barlow1984 check for the about:flags and also the prefs in the inspector (touch events, fps)
bruce bruce
neriv looks interesting. but I have my doubts about wysiwyg editors. They always seem to me to be WYSIWTF
Mavro has entered the room
sega sega
very interesting!
rem rem
@neriv it’s nice, but I’m still a vim and sublime gal
test test
@rem so it’s enough to say that “this works in the latest version of your browser”? Even though, e.g. millions are on IE<9?
sega sega
I use notepad++
mfoof has left the room
Kestrel Kestrel
@bruce are there any issues with people running old browsers (say IE7) also running old versions of flash causing problems with shim?
James James
is anyone still supporting IE6?
bruce bruce
kestrel none that I know of
ian ian
WYSIWTF :-)
barlow19… barlow1984
@dxbmatt yeah we’re trying some VMware stuff but its not that responsive
rem rem
@test nope, far from it. I didn’t say that did I?
Izzmo has entered the room
sega sega
@ian lol!
SpaceBee… SpaceBeers
@James – Not if I can help it but it’s up to the client
barlow19… barlow1984
love that one… WYSIWTF
dxbmatt dxbmatt
@James I hope not
Kestrel Kestrel
@bruce i guess there would be very little way of detecting it other than customer feedback
ian ian
@sega It’s @bruce’s!
SpaceBee… SpaceBeers
WYSIWTF :)
jess.irw… jess.irwin
We test in IE7-9, FF and Chrome (whatever versions we have on our own computers)
AliSpark AliSpark
I’ve tried various ways to get a working audio bar, in html5, (with Flash as last option for the browser). None have been satisfactory so far.. Main problem in good browsers: usually has a rectangle around the control bar which I don’t want. And in Opera says I need a plug-in but don’t know which one I need. Any suggestions?
sega sega
Got to sweet that
sweet#tweet
neriv neriv
@bruce Hah! So, true. @rem Been hearing quite a bit about sublime… guess i need to give it a try.
bruce bruce
AllSpark for Opera problems, email me brucel@opera.com and I’ll have a look
neriv I use sublime
test test
I just mean, if “you need all browsers” – then wouldn’t that stop you from using any HTML5 features? Why say don’t use Chrome-specific features, for example, because it’s not webby, if you’re not supporting IE6/Safari 1.0/etc.?
stefan24 stefan24
A general question regarding HTML5 apart from the obvious inclusion of video / audio and the new semantic tags what is the main purpose of the evolution of the mark up language, this might be a dumb question but what was faulty in xhtml and html 4 that mean we needed a new version? Was it no longer supporting the type of application/pages developers are creating?
patrick has left the room
AliSpark AliSpark
Ok, thanks Bruce
maryisbusy has entered the room
James James
@SpaceBeers — Agreed. However, I let the client know up front that there will be extra time billed for IE6 and/or 7 compatibility.
JavarisTharco has entered the room
alistairds has entered the room
bruce bruce
stefan24 what was faulty? no video, audio, web sockets or local storage or web workers or database facility or method of drawing to the screen.
Thomas has entered the room
rem rem
@test no, that doesn’t stop me at all. I use rounded corners and IE7 still works. Where I need a specific technology, say WebSockets, I’ll polyfill the browsers that don’t support it natively.
JavarisT… JavarisTharco
Hello All, I suppose a question I would have is that will the adoption of HTML5 mean we will see less browser/engine specific CSS tags necessary?
SpaceBee… SpaceBeers
Out of interest, has anyone found a bullet proof way of testing old IE versions on one machine? IETester seems a bit buggy and the IE9 old browser modes are a new beast entirely.
bruce bruce
stefan24 “Was it no longer supporting the type of application/pages developers are creating?” – exactly, you got it in 1
mah0001 has left the room
rem rem
@test but it’s a case by case basis. If the main audience is IE6, then there’s no point in building a 3D game using WebGL and polyfilling with Flash – just build the thing in Flash and be done with it.
test test
@bruce And yet, that all could have been added without changing the HTML elements from the markup perspective, no?
sega sega
@SpaceBeers there is something called SuperPreview
Kestrel Kestrel
@spaceBeers get a browserstack subscription well worth the money! :)
rem rem
@spaceBeers you need multiple virtual machine installations. IETester isn’t good enough because they patch the .dll files to run IE separately, so it’s not a 100% perfect copy of IE.
hollowx hollowx
@ James Ie6 all depends your market if you go for China you have to else Europe and states is no use anymore.
bruce bruce
test yup, sure. You can use all the new APIs without ever using a new HTML5 element
sega sega
@SpaceBeers I used this for a bit, but honestly, I think the best way it probably using virtual PC
rem rem
@spaceBeers I use Fusion on a Mac, but there’s a number of solution.
TimGreen has entered the room
kriess has left the room
ian ian
@SpaceBeers So far, no. We have virtual machines running native versions of the browsers, which is the only way to be sure sadly.
SpaceBee… SpaceBeers
@sega – that’s what I do at the moment. Seems excessive though.
@rem – Mac’s scare me.
danielwrobert has left the room
David has left the room
rem rem
@spaceBeers sure, you can create virtual machines on a PC and linux too – but I’m not sure you can virtualise OS X – so that you can test Safari
jess.irw… jess.irwin
How similar is safari on PC vs Mac?
sega sega
@SpaceBeers it’s the only true way to test the user experience. SuperPreview does not do the hover states and I can’t find another way that does. The only real way (because Microsoft is just silly) is to have x amount of OS”s testing each version of IE and it’s hover states etc.
hollowx hollowx
my setup for test is several windows Xp in virtual machines with IE6 IE7 IE8 and then IE9 in vista
Izzmo has left the room
SpaceBee… SpaceBeers
@rem – all our designers are Mac based so there are a few spare knocking around.
dxbmatt dxbmatt
@test nowadays I’ll use Modernizr for feature detection and shiv so earlier browsers aren’t so much of a concern. Emphasis on the ‘so’ because a client will always be using IE6-7 and as long as its explained upfront I don’t find it a problem.
rem rem
@jess.irwin I’ve heard there’s stability issues on the PC. Can’t say much more than than
HAWK HAWK
@spaceBeers They used to scare me too, but after a year, I wouldn’t go back to PC if you paid me. And I was a .NET dev!
barlow19… barlow1984
sorry didn’t mean to steer the conversation over to xbrowser testing! just something thats front of mind…
rem rem
@hollowx +1
Sunburned_Goose has left the room
Kestrel Kestrel
@jess.irwin safari is the same on both pc and osx they even make the fonts match perfectly which is why its so slow on the PC :P
sega sega
@SpaceBeers I go as back as IE7, I don’t test 6 any more, which means I don’t have to use PNG transparency any more.
eddieA eddieA
@jess.irwin, very similar it is called IE on a PC
test test
@rem @dxbmatt I just don’t understand when people say, e.g. “you’re not doing web development if you only support Chrome and Opera” when in reality, supporting the latest versions of all browsers is still far from full-support. So, I guess my question is, how do we/can we really define what’s “Web development” and what’s “browser-specific” development?
James has left the room
rem rem
@test you have to let go of the notion of “full support”.
stefan24 stefan24
it seems functionality which would have been handled on the server now is usable by front end developers. In terms of making the transition its quite hard to change my workmates mind about moving towards html5 due to the limitations of IE what strategy would you use to make the transition?
hollowx hollowx
but for the time being doing more stuff on the iPad the, regular web Dev
redcrew has entered the room
paceaux paceaux
@bruce do we have any new attributes or elements for <table> in HTML5, I don’t recall reading about any changes in your book… but I want to be sure I haven’t missed anything
rem rem
Folks: no single browser supports all of CSS 2.1 – will that stop you from using it?
SpaceBee… SpaceBeers
@sega – A client told me they were running IE 5 last week. I nearly cried. She read the version wrong. I was very relieved.
bruce bruce
paceaux nothing new with tables, IIRC – some things dropped (summary attribute, axis attribute)., but some more CSS planned
jess.irw… jess.irwin
We just don’t support IE6 at all – Microsoft doesn’t, so we don’t.
hollowx hollowx
the only way to get ride of IE 5 IE6 is to stop development for them
rem rem
@hollowx not true – but I’m not going to get in to that discussion now.
paceaux paceaux
@bruce … damn. just when I was building an app for that
test test
At my last job, my project manager’s favorite browser was IE6. This was last year. He was the lead architect of all our Web software.
bruce bruce
@James said “in the past, I have sometimes used <cite> for a byline (ex. “Article written by John Doe”); should I be using something else?” I’d use Article written by <cite>John Doe</cite> but that’s against spec
barlow19… barlow1984
@jess.irwin & @hollowx agreed
sega sega
@SpaceBeers it’s not our responsibility to create sites for IE5. I once went as far back as IE 5.5. It’s not hard testing for multiple browsers, but realistically having a series of computers would make the testing phase easier, particularly for IE6 stuff.
hollowx hollowx
heard about that Australian online store that charges extra for IE 7 customers
wsho has left the room
StevenGardner has entered the room
test test
(this was in the IT department of a top-10 US university)
rem rem
Do we want to steer back on to HTML5 or are we happy talking about IE6, et al? I don’t mind personally either way.
IE10 is an impressive browser – and should be one hell of a mobile browser if it launches this year.
sega sega
@hollowx seriously? To the end user?
dxbmatt dxbmatt
@test agree with @rem on this one. There is no such thing as full browser support or compatibility. There is (or has to be) an acceptable level of functionality and accessibility. And it all depends on the client
bruce bruce
@rem I want to talk about your hair
Johnnyp has entered the room
SpaceBee… SpaceBeers
@rem – IE10 seems excellent so far
rem rem
@bruce I want to talk about your pink pants
eddieA eddieA
Is it me or are the European countries more advanced as far as new techniques in coding, CSS3, etc
rem rem
@bruce sorry, yellow!
Kestrel Kestrel
I still check my sites in IE6 and if something important doesn’t work then i fix it. I believe you should look at your analytics and support what your customers use. If a significant enough proportion of people are visiting the site with a browser then the best thing to do for your business is support it otherwise you’ll lose customers
ian ian
@bruce Speaking of hair, is yours still pink?
jess.irw… jess.irwin
I’d like to know if http://sill-lighting.com.au uses sections in the right manner. We’ve only been using HTML for 3-4mths and I’m still confused about proper use of sections vs divs
sega sega
@eddieA it’s you.
SpaceBee… SpaceBeers
@rem @bruce – is there going to be anything in the spec about responsive images? I’m using adaptive images at the moment
JavarisTharco has left the room
rem rem
@jess.irwin divs have no semantic meaning at all, they’re dividers. Thinking of it that way helped me categorise how I used them
hollowx hollowx
ok so HTML5 is f-great but with all the different browsers out you have to make a choice if you want css3 transitions effects, etc.. but for the structure thats ok
Johnnyp has left the room
rem rem
@spaceBeers no, but there is discussion going on in the w3c. I don’t know the latest though. @bruce might have some info.
dxbmatt dxbmatt
IE10 awesome running in parallels on a Mac. Back on topic, take it back to HTML5 if necessary, it’s me who keeps replying to cross-browser stuff!
addyosmani has entered the room
Thomas Thomas
Q: best practice for a blockquote in HTML5… Use a P element or not? I see that the blockquote elect doesn’t require the P element. This may have already been coved, but just got here.
HAWK HAWK
Welcome to anyone that has just joined. Feel free to jump in at any stage with questions that you have for Bruce & Remy. If you have none, feel free to introduce yourself and take part in the chat.
joelbgr has entered the room
sega sega
I think it’s not a major issue to use CSS3 transitions @hollowx, it won’t make much of a difference. I use them all the time. I mostly use CSS3 transitions to replace what jQuery once did for me.
hollowx hollowx
@ sega seriously the tell them that they will charge extra or they can download another browser
jess.irw… jess.irwin
@rem its more for templates that are 2 columns – usually it would be something like <div id=content><div id=main></div><div id=side></div></div> – where #main is a left column and #side is a small right column
StevenGa… StevenGardner
@all what do you think about jquery mobile ?
Mike has entered the room
bruce bruce
@spaceBeers r/e adaptive images – the W3C group is discussing it imminently
barlow19… barlow1984
@hollowx yeah that was on sitepoint at some point and BBC in the UK
rem rem
@jess.irwin if divs are being used to get the style you want, then arguably it’s fine. Stuff like id=side – that might be an aside element, so you want to try to soak up the semantic value that HTML5 gives you.
eddieA eddieA
Where in the US can I get training for jQuery Mobile?
SpaceBee… SpaceBeers
@bruce thanks. I’m running a massively adapted version of adaptive images at the moment. An official method would be really handy.
bruce bruce
@spaceBeers I suggested <picture>; WHATWG wanted <img src-set>, now we’re amalgamating the proposals. See Matt Wilcox article
test test
@rem So, can <section> almost always replace <div> if there’s not another clear semantic choice (header/footer/etc.)?
sega sega
TimGreen TimGreen
Best reference book html5 css3?
stefan24 stefan24
how do you use jquery mobile do you use the user agent to serve it to the user?
arranrp has entered the room
barlow19… barlow1984
@stevenGardner I was about to ask something similar to be honest. Mobile optimised websites or HTML 5 native app wrappers?
BenH has left the room
michael has entered the room
bruce bruce
TimGreen Introducing HTML
TimGreen Introducing HTML5
rem rem
@test not at all. <div> was used for everything. Section != div. <div> still has real world use in an HTML5 doc.
arranrp arranrp
electric or wet shave?
rem rem
@arranrp barber.
StevenGa… StevenGardner
Has any of you felt with the cook
nshank has entered the room
hollowx hollowx
@sega well have started to change my habits to pure javascript and css3 instead of jQuery. But maybe i’ll use jQuery 1.8 when you can customise it.
addyosma… addyosmani
@brucel/@rem thoughts on polyfilling HTML5 and bleeding browser edge features vs. investing effort in getting users to switch over to a better browser or something like chrome frame? are we wasting time trying to ‘patch’ the web with the polyfill effort?.
StevenGa… StevenGardner
Ignore this is hard on the ipod
bruce bruce
Responsive images: what’s the problem, and how do we fix it? http://dev.opera.com/articles/view/responsive-images-problem/
rem rem
@barlow1984 it depends on what you need. PhoneGap is an excellent bridging platform if you can’t get the bits you need through a regular web page – like camera access – but that’s all changing.
alistair… alistairds
@test I’m frequently seeing <div id=”wrapper”> in html5 as there’s no obvious replacement e.g. <section>
rem rem
@addyosmani I don’t think we’re wasting time. I think those trying to force a user off <IE8 is wasting time.
paceaux paceaux
@bruce I know that I can use the “for” attribute for <output> and assign it back to a form…. but can I use any of the other typical form attributes on <ouput>?
barlow19… barlow1984
@rem changing as in more HTML 5 support from handsets or something else?
rem rem
@addyosmani => http://remy.tumblr.com/
jess.irw… jess.irwin
I read that content should be split into sections, but isn’t that unrealistic for those using WYSIWYG editors in CMS’s?
StevenGa… StevenGardner
I quite fancied a
bruce bruce
addyosmani !thoughts on polyfilling HTML5 and bleeding browser edge features vs. investing effort in getting users to switch over to a better browser or something like chrome frame?” lots of people can’t change their browser.
nshank has left the room
test test
@alistairds So a wrapper is not a section?
addyosma… addyosmani
@rem cool cool. I shall check it out. Thank you, sir.
rem rem
@addyosmani latest post – bottom line: people aren’t specifically wanting to stick to their browser, just give them the content they want.
michael has left the room
paceaux paceaux
@bruce I’m just wondering if I could use <label> for <output> and if <output> can accept attributes like “name” …
rem rem
@alistairds often when I’m about to do <div id=wrapper> I realise it’s actually <body> that I want to style
@barlow1984 sorry – can you give me that question again with a bit more context – trying to watch quite a few messages here :)
bruce bruce
jess.irwin “I read that content should be split into sections, but isn’t that unrealistic for those using WYSIWYG editors in CMS’s?” Nope, you read that content *may* be split into sections. If your CMS doesn’t allow it, don’t sweat it! HTML4 is with us forever
jess.irw… jess.irwin
@rem how does that work for stickyfooters? don’t you need the <div id=wrapper>
addyosma… addyosmani
@rem/brucel should I assume you guys advocate the ‘at least give everyone content (even if the app/site looks super basic), give modern browsers the best experience’ way of thinking rather than equal experiences for all?
arranrp has left the room
geekosupremo has entered the room
test test
@rem And yet, my supervisor literally chose to use IE6 because he said he liked it best. But he’s hopefully one in 7 billion…
ian ian
@rem but don’t some browsers have issues with certain styling on <body>? I can’t remember specifically what or which browser (useful I know…) but it has happened in the past.
rem rem
@jess.irwin sure – or <footer> that would – but if you need to wrap it for styling purposes: <div><footer>…
bruce bruce
@paceaux can’t remember -p try it and vlaidate it, and tweet me to let me know
paceaux paceaux
@alistairds especially for a centered layout, I apply background to <html> and then do body{margin: 0 auto; width: 60em;}
rem rem
@addyosmani yep.
barlow19… barlow1984
@rem sorry, you mentioned mobile stuff changing, just wondered if you meant that there would be access to hardware via the web browsers such as cameras etc?
addyosma… addyosmani
sweet. sounds good.
rem rem
@test that’s their choice. If I told you your browser was rubbish and you should use mine, it wouldn’t be fair.
bruce bruce
@addyosmani I’m in the “give me the content even if it looks super basic” camp. Because my blind friends prefer that to being locked out and getting no content because they can’t see the shiny
mstalfoo… mstalfoort
@barlow1984 getUserMedia is one of them e.g.
jess.irw… jess.irwin
So for the example <div id=content><div id=main></div><div id=side></div></div> where clients enter content into #main. would html version be <section id=main><article>[content here]</article></section>
alistair… alistairds
@paceaux that’s a good idea, I should try that. I’ve not tried to use a wrapper div much recently, but have seen a few blog posts where others have mentioned continuing to use it in html5
rem rem
@test but in truth, IE6 is a damn old browser. They sound like an old dog not wanting to learn any new tricks – which is fine, let the beast lie :)
test test
I was just responding to the link you posted to your blog that said no one chooses to use IE6. Not that relevant here, sorry ;)
Right, he was definitely an old dog
I just think he may not be alone
addyosma… addyosmani
@brucel thats completely understandable. Not enough consider the accessibility perspective. I agree with not everyone needing the shiny.
bruce bruce
@barlow1984 getUserMedia gives mobiles and browsers access to the camera already. See www.html5doctor.com/getusermedia
rem rem
@barlow1984 yes – exactly that. Access to camera, access to sensors, etc. The two demos at the top of html5demos.com work in Opera Mobile 12 – reads your camera and fees it back to you
Kestrel Kestrel
@test im sure he isn’t alone :)
Mike has left the room
maryisbusy has left the room
Eriks has entered the room
sega sega
A little off topic, but has anybody started using media queries?
StevenGa… StevenGardner
I find it hard to degrade some of my fancy htlm5 stuff on ie6 with no JavaScript. Unfortunatly I have to make everything work great for this and I often find myself removing bits o html5 just to get the work out on time. I’ve been studying prolly fills and other solutions but it takes time
Kestrel Kestrel
@test maybe there is an ie6 appreciation forum out there
johnperc… johnpercival
However – devices could limit access
dxbmatt has left the room
Kravvitz has entered the room
dxbmatt-mac has entered the room
addyosma… addyosmani
getUserMedia with mic audio landing in Chrome later in the year, Opera have an implem and FF are landing theirs soon too.
bruce bruce
jess.irwin nope <div role=main><article>[content here]</article></div> is better
addyosma… addyosmani
good news all around.
SpaceBee… SpaceBeers
@bruce – Do you see being possible to access most phone features from web apps in the future, not just camera etc
test test
His understanding was that newer software is always less secure so better to hold out as long as possible on old stuff.
sega sega
IE6 is dead, even microsoft thinks so, http://www.ie6countdown.com/
rem rem
@StevenGardner that’s our job really though. And make sure you’ve got a good understanding of your demographic – ie. make sure people are using IE6 before supporting it for your business. That said, make sure you give them something – something is better than broken – every time.
ian ian
@test but for how long was he going to “hold on”?
dmcelroy has entered the room
bruce bruce
StevenGardner no worry about making IE6 responsive – who has IE6 on their phone/ tablet?
rem rem
@sega great. Let’s move on then shall we? :)
jess.irw… jess.irwin
I’m trying to push for ‘progressive enhancement’ on older browsers, but sometimes I’m facing a losing battle.
ian ian
@bruce sounds like a challenge…
bruce bruce
@spaceBeers that’s exactly what we’re working on#
sega sega
@rem already did :) We don’t support IE6 any more.
eddieA eddieA
@sega, I have. I am working on a responsive site re design. Not an expert at it yet? lots of trial and error. @bruce and @rem do you guys feel that way too
dxbmatt-… dxbmatt-mac
@test back again on a slightly different username as moved from iPhone to Mac and couldn’t carry the session over. If you want to talk about real world experiences with browser testing and pushing IT depts to sort it out, message me on Twitter @dxbmatt
SpaceBee… SpaceBeers
@bruce – I started on IOS development but it seems almost pointless if web apps could do everything a native app can.
rem rem
@jess.irwin polyfills aren’t progressive enhancement which is their advantage. They’re not graceful degradation either, so you need to be wary, often they’ll *require* javascript, which gets you out of a hole sometime….
BenH has entered the room
colin has left the room
stefan24 stefan24
@sega starting to just learning how to make responsive designs, its taken a while to get to work on these types of projects as you need the right type of site plus a client who can see the benefits.
Kestrel Kestrel
right now if i want to make a HTML5 video to put on my site. How many encoded versions will i need to make and what would they be?
drongen has entered the room
johnperc… johnpercival
@kestrel
bruce bruce
Kestrel 2 – webM and mp4
sega sega
@eddieA I think it is the way. I was reading something a while back that responsive might be bad because it still takes long to download the web page, however, with increasing web speeds I don’t think this will be a prob. for too long.
johnperc… johnpercival
adaptive bitrate?
rem rem
@eddieA responsive is fun. But yep, very new and lots of trail and error. Mostly I’m finding in the design / dev hand off. Our conf site is as responsive as we could get: http://2012.full-frontal.org (JS conf site)
rem pimpage number 1
StevenGa… StevenGardner
A problem i had was placeholders on forms falling back to labels I found super labels on GitHub which is cool
A problem i had was placeholders on forms falling back to labels I found super labels on GitHub which is cool
Kestrel Kestrel
@bruce @johnpercival would the 2 versions cover the whole market or would i need an FLV version as well?
AliSpark AliSpark
Re: audio, I’ve been adding ogv too. Is this not necessary now?
addyosmani has left the room
SpaceBee… SpaceBeers
@stefan24 – My 1st responsive site was for the company I work for. My boss wasn’t willing to try it on a real client so we experimented on ourselves
Kestrel Kestrel
i guess an FLV for older browsers
dmcelroy has left the room
johnperc… johnpercival
FLV for a flash player fail back
bruce bruce
Kestrel that’s fine – you can feed the mp4 to a flash player for older browsers. See video for everybody by Kroc Camen
eddieA eddieA
@rem, Remi, yeah I checked that site out. l Like the bitmap style
hobbitmime has entered the room
janey has left the room
Kestrel Kestrel
@bruce webM for chrome and mp4 for FF / Safari / Opera?
stefan24 stefan24
@spaceBeers what we the biggest problems you had developing a RD site? I’m just learning at the moment been making fixed width sites for years its quite a shift in mindset
bruce bruce
no need for FLV. Or check out Playr by Delphiki or the King of video polyfill/ players, mediaelementjs.com
eddieA eddieA
@bruce, I’m late on this whole SVG thing. Can you give me a summary on why I should use svg
SpaceBee… SpaceBeers
@rem – my boss won’t shell out for tickets but the site looks good and I’m gutting I can’t come along.
rem rem
Any UK folks want to learn some HTML5 and attend the super awesome conference Full Frontal, we have some tickets left: http://2012.full-frontal.org/workshop/html5
(pimping like a boss)
Kestrel Kestrel
@bruce awesome thx man :)
StevenGa… StevenGardner
Do you guys put the effort into microformats and aria
johnperc… johnpercival
Depending on what version of Flash Player you are serving to
dxbmatt-… dxbmatt-mac
@rem @bruce Early stages, but any thoughts on the proposed <picture> element?
bruce bruce
Kestrel webM for Chrome/ FF/ Opera, mp4 for IE, SAfari
Eriks has left the room
BenH has left the room
rem rem
@spaceBeers tell your boss that your competitors that do shell out for training are getting the competitive edge!
test test
@eddieA @sega The pitfall of responsive design is when devs remove navigation/pages completely. Many users spend the majority of time on mobile devices – not just in line at the coffee shop anymore – so it’s important to let the user do whatever they could do if you hadn’t changed the layout.
bruce bruce
dxbmatt-mac lots of thoughts; I invented it
SpaceBee… SpaceBeers
@stefan24 – finding someone to try a site out on was a big deal. As we used ourselves we removed any deadline pressure.
barlow1984 has left the room
rem rem
@dxbmatt-mac personally, I like it – but I’ve not played with it at all in production
dxbmatt-… dxbmatt-mac
@bruce knew I recognised your name from somewhere :)
Kestrel Kestrel
@bruce awesome thx its getting confusing the way browsers keep switching between different codecs
AliSpark AliSpark
Is ogv obsolete?
SpaceBee… SpaceBeers
@rem – already tried that. No luck. I’ll save up myself for next year. New baby means we’re a bit poor at the moment but it seems stupid to miss something like that when it’s so local.
mebush has entered the room
rem rem
@stevenGardner yes, but mostly vcard and little else (for me personally). I’m guilty of not adding aria roles and I know I should – there needs to be more public knowledge of how they work in real life. @bruce might have some links thouhg.
bruce bruce
@dxbmatt-mac more helpfully, see my article http://html5doctor.com/html5-adaptive-images-end-of-round-one/
rem rem
@spaceBeers ah, I have a new baby, the trick is to *run* the conference ;-)
sega sega
@test completely agreed, but responsive layouts change depending on the width of the screen, which changes their user experience, good or bad, time will tell.
SpaceBee… SpaceBeers
@Stefan24 – Otherwise images was the biggest ballache. Working in percentages was fine once you get you head round it.
@rem – Good trick. Cunning.
bruce bruce
AliSpark ogv is obsolte for video, Ogg for audio lives on
eddieA eddieA
“ballache” that was funny
sega sega
Guys, I got to go, thanks for the awesome chat
Kestrel Kestrel
any good deals going for the HTML5 book tonight? :)
AliSpark AliSpark
@bruce – Oh!
webber has entered the room
StevenGa… StevenGardner
I heard a passionate presentation in Edinburgh last year about aria that’s made me put stuff in when I remember
eddieA eddieA
cya @sega
stefan24 stefan24
@spaceBeers I know that responsive images are a problem, my work mate started working on a site for our company but he used the user agent string to serve up different sized images but I really don’t know like the idea of using them seems really messy.
rem rem
@kestrel yes – buy a book, and Bruce and I get 20p royalty each – special deal just for tonight – do it!
Kestrel Kestrel
@sega laters man
bruce bruce
@rem ARIA roles: see HTML5 Accessibility Chops: notes on using ARIA http://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-using-aria-notes/ by my mate Stev (who’s an Aussie)
dxbmatt-… dxbmatt-mac
@bruce Great article, I’m on the main whatwg mailing list so have been following developments anyway
rem rem
@stevenGardner do you remember who?
hobbitmi… hobbitmime
What project could I do right now to learn html5? A standard website doesn’t seem like the right fit since I’d need to spend a bunch of time writing it in xhtml too for browser compatibility. I want a practical project with decent compatibility.
eddieA eddieA
Rem, big boss pimpin right now
ian ian
Joshue O’Connor has a fine book out called HTML5 Accessibility on just that.
stefan24 stefan24
@spaceBeers wish there was a solution to that one, I’m sure its coming.
Kestrel Kestrel
@rem only 20p? :( sitepoint are slave drivers :P
SpaceBee… SpaceBeers
@stefan24 – adaptive images by Matt Willcox(sp) creates different sized images for you but I had to tweak it quite a lot to work with the design.
bruce bruce
fun fact: we offered Introducing HTML5 (our book) to Sitepoint but they turned it down (their audience aren’t interested in it, they said)
ian ian
@bruce Didn’t realise Mr. Faulkner was an Aussie, not that it matters of course!
rem rem
@kestrel they’re not our publishers :)
HAWK HAWK
Hey guys – we officially have just over 5 mins to go so if you’ve been sitting on a question, or you’ve asked one that has been missed in the noise, now would be the time to get it out there.
rem rem
@bruce lol
sega has left the room
test test
@stefan24 I think it’s ok to rely on UserAgent string as anyone who changes theirs knows what they’re doing and knows they’re not getting an experience for their actual device/browser. Anyone else have opinions on this? I don’t understand why everyone on the Web seems to say “you can’t rely on the UserAgent string” when most of the time it’s perfectly accurate.
hobbitmi… hobbitmime
Oops guess I was a little late
rem rem
oh god, I lol’d. Oh god.
paceaux paceaux
@bruce can you help be understand when the “hidden” attribute should be used instead of {display:none} or {visibility:hidden} ?
ScallioXTX has entered the room
HAWK HAWK
@rem You’re fired.
bruce bruce
@rem OMG awesome!!!!
rem rem
@paceaux I actually use this one – but I use it in JavaScript: el.hidden = true – which is a really nice way rather than adding a class
Thomas has left the room
rem rem
@paceaux it’s display: none, rather than visibility: hidden though.
Kestrel Kestrel
@bruce @rem whats the book called? can i find it on amazon? I was expecting it to be a sitepoint book :P
geekosupremo has left the room
bruce bruce
paceaux hidden means hidden from everything, not just undisplayed but still interacting with script etc
stefan24 stefan24
@test think it was just a best practice to avoid the user agent maybe just an old concept that needs letting go of?
webber webber
@test I just bought a cheap Android ICS device, and the default brower User-Agent string is… iPad iOS 3.2!
SpaceBee… SpaceBeers
@paceaux – visibility hidden leaves a big hole where the element once was.
paceaux paceaux
@rem, I always get them backwords… but still, why would I use “hidden”
HAWK HAWK
rem rem
@test you shouldn’t rely on UA strings – they lie. Feature detect whenever you can.
johnperc… johnpercival
Is there an HTML5 intelisense for Sublime Text 2?
redcrew has left the room
hollowx hollowx
@rem about flash. What my approach is now is what i can do in html5 for compatible browsers i do and i fallback for flash. Eg canvas element. of course not to complicated stuff as we are still limited.
itmitică has entered the room
paceaux paceaux
@spaceBeers I know what display and visibility do from the CSS side
rem rem
@paceaux again, I don’t use it in HTML, I use it in JavaScript, like for tabbing systems. tab.hidden = true;
Kestrel Kestrel
there 20p winging its way to you as we speak :P
rem rem
@hollowx that sounds like the right approach.
ScallioXTX has left the room
paceaux paceaux
@rem I’m wondering how the attribute “hidden” is different… like.. why wouldn’t I use {display:none}
stefan24 stefan24
@spaceBeers thanks for the link looks interesting I’ll have to look further into it
bruce bruce
ouch someonejust hit me on the head with a 20p coin
alistair… alistairds
does anyone have any great recommendations for (PC) code editors for html/css/js… WebStorm/Sublime are two I’m trying out at the moment – any other recommendations?
hollowx hollowx
@rem as more sites asks for html5 dev instead of flash
HAWK HAWK
And because I’m a loyal employee, the SitePoint HTML5 book can be found here http://www.sitepoint.com/books/htmlcss1/
rem rem
@bruce damnit, I thought we were splitting that.
hobbitmi… hobbitmime
lol hawk
stevengardner has entered the room
HAWK HAWK
4 minutes left before I cut our experts free…
bruce bruce The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.Elements that are not hidden should not link to or refer to elements that are hidden.
rem rem
@hollowx indeed, I get a lot of clients saying they’re moving from flash to HTML5 and a lot of workshop delegates saying the same thing
ian ian
Clients often ask for HTML5 without actually knowing that they’re talking about. This is a problem.
hobbitmi… hobbitmime
alistair, notepad++ is a lightweight option that has syntax highlighting and tons of plugins (and is open source)
test test
@rem “they lie” – really? I’ve heard people say that but haven’t seen much evidence, @webber’s cheap Android device notwithstanding. Is there an article/book/talk/etc. anywhere that gives any evidence of UA’s that lie?
rem rem
@ian it’s not. Clients are like the visitors to our sites, they don’t care how it’s done – so long as it works and it’s buzzword compliant
@test Opera claims to be Opera 9 according to the UA string, not Opera 12.
bruce bruce
test check out webAIM’s article on user agent strings to see how they loe
ian ian
@rem Ok, it “can be a problem” – depends on the client and their understanding of HTML5.
eddieA eddieA
@hobbitmime, notepadd++ better than Dreamweaver
bruce bruce
.. lie. Or open Opera Dragonfly and set the UA string to “my lovely browser” to fake them
rem rem
@test TV browsers give false UA strings too
eddieA eddieA
?
stevenga… stevengardner
@rem I can’t remember the guys name but it was a good talk. Yours was good too. My HTML5 books are @rem HTML5, malarkey’s hard boiled book and a book a parts html5 pocket book
test test
@bruce will do, thanks!
stefan24 stefan24
@test opera would display its user agent as IE so it wasn’t an acurate test for this browser in this instance to my knowledge this one of the reason stated it isn’t entirely accurate.
rem rem
@stevenGardner oh – up at the Highland Fling?
jess.irw… jess.irwin
@rem @bruce Is this the recent edition? http://booko.com.au/products/9780321784421
paceaux paceaux
@bruce so “hidden” is appropriate for … ‘accordions’ maybe?
webber webber
@test how is a cheap device notwithstanding? I can image a lot of people buying these, especially judging from the Amazon reviews
bruce bruce
required reading for all History of the browser user-agent string http://webaim.org/blog/user-agent-string-history/
AliSpark AliSpark
@eddieA
stevenga… stevengardner
@rem yeah
stefan24 stefan24
thanks for the linlk bruce!
test test
I meant, I was interested in other examples. “notwithstanding” just meant, in addition to.
jean has left the room
StevenGardner has left the room
eddieA eddieA
yes @alispark
webber webber
@test ah ok
AliSpark AliSpark
Thanks for that. Noted re notepadd+++
rem rem
@stevengardner Jack Osbourne then I think.
SpaceBee… SpaceBeers
@AliSpark – Sublime is v.good
paceaux paceaux
@bruce like could I do this <style hidden=”false” contenteditable=”true”> ?
stefan24 stefan24
I felt using the user agent wasn’t cool and so I’ve avoided it, will be interesting to get more information regarding it
hollowx hollowx
@rem a pity we don’t have a great visual editor for creating on the fly real animation in css3 javascript. Like a flash editor for html5 css3 canvas. Forr the non hyper programmers out here. Some exists but the code generated is unusable.
AliSpark AliSpark
Dreamweaver doesn’t cope with showing css and more
stevenga… stevengardner
@rem Na his was good but about HTML5 this guy was all about Aria
rem rem
And folks, remember to check out Full Frontal conference: particularly the tooling tutorial workshops! http://2012.full-frontal.org/#tooling
rem rem
(pimp complete: yay)
mebush has left the room
bruce bruce
paceaux no. hidden=”true” is html, not CSS
AliSpark AliSpark
…I mean in its layout bit.
rem rem
@eddieA even more lovely are the design chops.
paceaux paceaux
ahhh, so hidden is only meant to be used in JS
bruce bruce
paceaux no. It’s HTML. Not CSS, not JS
stevenga… stevengardner
@all What’s been the most welcome addition in HTML5 for you?
eddieA eddieA
Alright guys, it has been real. The 5 oclock whistle blew and I am out.
dxbmatt-… dxbmatt-mac
@rem got a client at the moment who is adamant (not the early 80s icon) that they don’t want to use Flash at all, only HTML5 / JS. For a cartoon website and they’re looking at Pixar / Dreamworks styles of interaction and animation which I think (correct me if I’m wrong) we’re quite a way from! Luckily some of them are quite switched on and are educating the others internally. We’ll see….
rem rem
bruce + paceaux – but it’s defined in the IDL for the HTML element, so it’s part of the JavaScript DOM API
@dxbmatt-mac canvas + web-gl – you can do it.
paceaux paceaux
@rem got it. it’s different from the two CSS approaches, and it’s not an HTML attribute
bruce bruce
@rem true, settable by JS but is an HTML attribute
itmitică has left the room
hobbitmime has left the room
paceaux paceaux
@rem I only access “hidden” then through the JS DOM
bruce bruce
right, good night all. Don’t forget – www.introducinghtml5.com is less frenetic and just as gorgeous as @rem and me
paceaux paceaux
@bruce … oh.. it *is* an HTML attribute, then? … that then goes to my question of when I should use it over the two CSS options
rem rem
@paceaux no, through HTML as an attribute, and through JavaScript via the property.
HAWK HAWK
Ok all. That’s the end of the official session, which means that @rem and @bruce are free to go! You’re welcome to stick around here and chat for as long as you like, but please be aware that the session is no longer moderated (not that you required it in the first place). Thanks very much for taking part.
rem rem
ie. <div hidden></div> and el.hidden = true;
ian ian
thanks @rem and @bruce, informative as always
Kestrel Kestrel
@bruce laters man :)
eddieA has left the room
neriv neriv
Thank you experts! For sharing your thoughts and in many cases code!
dxbmatt-… dxbmatt-mac
@rem love the answer – shame the client has to support IE8 :)
HAWK HAWK
Next up in this series we’ll be talking CSS Layouts. Details TBA.
bruce bruce
rem rem
Adios folks – remember to buy the book, and it’s not just for christmas!
jess.irw… jess.irwin
Thanks guys!
bruce bruce
bye all
TimGreen TimGreen
Thanks
Kestrel Kestrel
@rem thx a lot dude
SpaceBee… SpaceBeers
Thanks guys. This was a nice unexpected way to spend an hour. Very interesting. Your 20p will be winging it’s way to you on payday!
test has left the room
stefan24 stefan24
thanks @rem & @bruce for your time
stevenga… stevengardner
Wish I had remembered this and prepared some questions i needed answered but THanks for your time guys.
SpaceBee… SpaceBeers
@HAWK – How do we find out about the next one? I stumbled across this by accident
dxbmatt-… dxbmatt-mac
Thanks @rem @bruce
Balls has entered the room
Balls Balls
Balls.
paceaux paceaux
@bruce I had read the spec.. .I was still lost on it… that’s ok. If It’s been used in the wild, I
hollowx hollowx
thanks @rem & @bruce for the session and keep up the good knowledge spreading.
johnpercival has left the room
AliSpark AliSpark
Thanks, bye for now, and good night/day (depending on where you are)!
HAWK HAWK
@spaceBeers I post on twitter (@sitepointdotcom) on Facebook (facebook.com/sitepoint) and in this forumhttp://www.sitepoint.com/forums/forumdisplay.php?438-Talk-With-The-Experts
SpaceBee… SpaceBeers
Thanks @HAWK. I’ll be back for more.
stevenga… stevengardner
Cheers Sitepoint.com
paceaux paceaux
@hawk , @bruce, @rem thanks guys … I really appreciate it
rem rem
Cheers @haWK drop us a tweet when you publish the transcript, Bruce and I will pimp it back to the folks outside. Thanks for having us.
xhtmlcod… xhtmlcoder
Farewell for today, have a safe journey – I’ve got a rabbit hole to jump down.
HAWK HAWK
@rem Will do :)
Kravvitz Kravvitz
I didn’t see a response to the “so “hidden” is appropriate for … ‘accordions’ maybe?” question from @paceaux
paceaux paceaux
@rem I tweeted you my question, but it would appear that display:block over-rides hidden=”true”
Kravvitz Kravvitz
I’d say it’s not appropriate in that situation, because you intend to show the content at some point.
xhtmlcoder has left the room
paceaux paceaux
@kravvitz yeah, it seems like it’s just a DOM method for toggling… display:none?
TimWood has entered the room
paceaux paceaux
all I get from the specs is that it’s hidden from *everything*
so screenreaders won’t read hidden=”true”
but my understanding is that display:none does the same thing
troll999 has entered the room
Kravvitz Kravvitz
Perhaps, but CSS properties can be set for specific media types where as the HTML5 hidden attribute applies to everything.
TimWood has left the room
paceaux paceaux
so… I guess if you’re trying <style hidden=”false” contenteditable=”true”> you have a faster method for editing inline style blocks
Kravvitz Kravvitz
No. The specs state that “The [<style>] element does not represent content for the user.” http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-style-element
shaun has entered the room
Kravvitz Kravvitz
Also the hidden attribute is boolean, so its presence is like setting hidden=”true” in JS.
paceaux paceaux
“legitimately shown in another presentation”
paceaux paceaux
so, if I wanted to demo a functionality and let the user edit a a style-block, that seems like an appropriate time to set hidden=false
paceaux paceaux
but yeah, seems like accordions wouldn’t be an appropriate use, b/c I’d want screenreaders to see it
rem rem
1. I’m not here.
2. @paceaux hidden=”false” means hidden = true – because it’s a boolean attribute
it’s presence means it’s enabled and therefore true
same as readonly=”true” is the same as readonly=”false” is the same as readonly.
So don’t set boolean attributes with values.
3. I’m outta here folks!
paceaux paceaux
thanks ghost @rem … as you can tell, I’m not that bright. but I think I’ve got it
stefan24 has left the room
troll999 troll999
@rem how do you tell what is a boolean attribute from the spec ?
rem rem
@paceaux not at all – we’ve all got to get it wrong first.
@troll999 IIRC it says so. But you’d have to check that one. Most attributes like that are bool. But there’s a few freaky ones like autocorrect=”yes” – I mean – WHAT WHERE THEY THINKING!?!?
Silly browser vendors.
Right, I’m really off.
Night night folks.
Kravvitz Kravvitz
bye Rem.
paceaux paceaux
@troll999 http://www.w3.org/TR/2010/WD-html5-20101019/editing.html#the-hidden-attribute if you read the intro to “hidden”, they tell you if it’s bool
Arlen has left the room
paceaux paceaux
@rem thanks a ton!
rem has left the room
Kravvitz Kravvitz
I’ve never tried to use contenteditable=”true” on a <style> element. Do any browsers actually use styles that a user types into it?
Kravvitz Kravvitz

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://mobilewebrockstar.com/blog/ Stephen Alberts

    Wow thanks for the links. I’m still reading through the conversation but it’s pretty interesting.

  • http://www.netkreativ.hu Misi (Webáruház Készítés)

    Thank you!

    I am started to check all links, it is very good to have in 1 post all of them :-)