{"id":440,"date":"2008-03-16T22:10:43","date_gmt":"2008-03-17T04:10:43","guid":{"rendered":"http:\/\/blog.codedread.com\/archives\/2008\/03\/16\/fake-smile\/"},"modified":"2008-03-16T22:10:43","modified_gmt":"2008-03-17T04:10:43","slug":"fake-smile","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2008\/03\/16\/fake-smile\/","title":{"rendered":"Fake Smile"},"content":{"rendered":"

<\/object>David Leunen<\/a> has released a new JavaScript library<\/a> to fake SMIL<\/a> for modern browsers that do not yet support declarative animation (Firefox 3.0- and Safari 3.0-). The nice thing about this is that it uses existing standards, so that when Mozilla and WebKit finally implement SMIL, this script will avoid executing. On that day, suddenly animations will become less processor-intensive. I'm all about progressive enhancement<\/a>, but I'm also not above occasionally faking it a little to experiment with cool features. <\/p>\n

As with all experiments of late, you need a cool browser like Opera<\/a>, Firefox<\/a> or Safari<\/a> to see this stuff. I'd be interested to hear if Konqueror 4.0 supports it. Internet Explorer will just not do, I'm afraid.<\/p>\n

I currently use SMIL in my menu<\/a> above, in the leering FakeSmile icon to the right (which I've inlined to see what happens when it gets aggregated in feed readers like Planet Venus<\/a>)<\/strike>, and now in my comment box when you focus and blur it.<\/p>\n

Yes, this is just shiggles<\/abbr> and not very productive - but I'm not alone<\/a> in experimenting with some advanced web features on my blog.<\/p>\n

Yes, SMIL intermixes \"presentational\"-type markup with \"content\" markup - but SMIL Timesheets<\/a> looks to me like an attempt by the SYMM Working Group to address this. Maybe something in the future for FakeSmile to support?<\/p>\n

And yes, it's kinda fun. SMIL is the blink tag of the new millenium...<\/p>\n

Oh, and in case you missed it<\/a> above, I've started using SMIL in my blog's comment<\/a> textarea - that's XHTML, not SVG. The FakeSmile library supports a limited subset of SMIL functionality in not just SVG content but on any attribute in a XML-based language (provided you properly namespace where required, like in XHTML):<\/p>\n

<textarea rows=\"5\" ...>
  <smil:animate attributeName=\"rows\" from=\"5\" to=\"10\" dur=\"350ms\" begin=\"focus\" end=\"blur\" fill=\"freeze\" \/><\/b>
<\/textarea><\/div>\n

That's what makes XHTML so attractive to me - the X is for eXtensibility. While I still support the effort, the current HTML 5 activity<\/a> is mostly focused on SVG (and to a lesser extent MathML) integration with text\/html. I hope they do address more flexible extensibility<\/a> within HTML5 at a later date. It would be great if someone had already done HTML+SMIL<\/a> so there was some basis off which to work. Snarkiness aside, I will admit to not understanding the ins-and-outs of namespaces within HTML and all the problems it poses, but I'm trying to learn in my spare time...<\/p>\n

One semi-amusing footnote: You won't see the textarea expand when you focus it in Opera. This is because Opera supports SMIL-in-SVG already, so the FakeSmile script is not executed (short-circuited). It would be great if Opera went ahead with XHTML+SMIL<\/a> support. I'm not sure why that hasn't happened yet...<\/p>\n

[Update: David has fixed his library to allow Opera to use the library for XHTML+SMIL as well as interpolate between properties with units (i.e. 2em).]<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"

David Leunen has released a new JavaScript library to fake SMIL for modern browsers that do not yet support declarative animation (Firefox 3.0- and Safari 3.0-). The nice thing about this is that it uses existing standards, so that when Mozilla and WebKit finally implement SMIL, this script will avoid executing. On that day, suddenly […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,43,25,46,11,28],"tags":[192,136,198],"class_list":["post-440","post","type-post","status-publish","format-standard","hentry","category-javascript","category-ria","category-software","category-svg","category-technology","category-web","tag-javascript","tag-smil","tag-svg"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=440"}],"version-history":[{"count":0,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/440\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}