Microsoft and IE9 New Features
in [JavaScript]
|
Prev: Microsoft expanding it use of jQuery & involvement with jQuery
Next: *PITIFUL* FAQ Entry - How can I access the client-side filesystem?(2010-03-15)
From: Garrett Smith on 16 Mar 2010 18:17 A colleague of mine recently informed me with the emphatic title: "HTML5, CSS3, and omg finally AddEventListener in new IE9!" With a link to: http://ie.microsoft.com/testdrive/ And from the getgo, anyone who is not both stupid and ignorant would notice some major problems there. For example: Under "HTML 5" category is a link to "DOM Events" (where my colleague had directed my attention). To most anyone who can use google and read, DOM Events is not part of HTML 5, but a completely separate specification. Apparently nobody at Microsoft can search the web and read, which would explain why D3E is categorized under HTML 5. I replied to my colleagues email, but then decided to post my replies here. My response to that email below (I edited it up a bit to be less obnoxious). BEGIN EMAIL REPLY: I have no doubt that they totally f**ked it up. My first glance at the Events; the first thing you're directing me to: http://ie.microsoft.com/testdrive/HTML5/13DOM_Events/Default.html http://validator.w3.org/check?uri=http%3A%2F%2Fie.microsoft.com%2Ftestdrive%2FHTML5%2F13DOM_Events%2FDefault.html&charset=%28detect+automatically%29&doctype=Inline&group=0 They are serving invalid html document, w/XHTML doctype, as content-type "text/html". Documents served with XHTML doctype should be sent with an xml content type header. Sending XHTML as text/html forces browsers to error-correct. The document at the following URL explains well enough: http://hixie.ch/advocacy/xhtml So MS does not know html. This is news or what? I reformatted their example code. They posted a mix of tabs spaces. I reformatted it to use space indentation. Have a look: | var addSummaryListeners = function () { | | | // Call "showSummary" on mouseover | addEventListener("mouseover", showSummary, | false); | | // Call "hideSummary" on mouseout | addEventListener("mouseout", showSummary, | false); | } | } | } The first most obvious things are: 1) Why is the EventTarget the global object? 2) Do they think that global object implements MouseEvents? 3) Why are there three closing curly braces for the function? 4) Why is the ExpressionStatement, a FunctionExpression not terminated by a semicolon? 5) What is "..." in the function body? The answer to all of these questions can be explained by the fact that Microsoft does not hire competent individuals. The extra semicolons and "..." can be explained as a formatting errors. Relying on ASI (automatic semicolon insertion) is a beginner mistake or careless mistake; it can taken be a sign of being under qualified. Suggesting that the global object implements MouseEvents is demonstration of a nonstandard feature. The #1 mistake in the example is that the example is used to support claims support of DOM events but instead provides a proprietary (non-standard) example of MouseEvents on the global object. Classic Microsoft. Virtually every example on MSDN uses code that will function only in MSIE, often using things such as IE's global scope polluter, document.all, and usually invalid HTML. The Consequences. Javascript library authors will likely end up believing that the global object implements MouseEvents and EventTarget and expecting those things to work. At least, those will be used for IE-only sites. Microsoft should hire competent individuals to write unit tests to ensure that the APIs they are producing are standard, valid, and functional in known modern browsers (at least including Safari 2, IE7, FF2). Microsoft gets acknowledgment for trying. Unfortunately the effort falls short of being acceptable. The rest of the code tends to be worse. For example, they attempt to provide a "fallback" for IE8 that requires javascript: | // should probably do something similar for | //IE7 but it's a lot more work | if (_isIE8) { | var xhtmllinks = | document.querySelectorAll("a.noIE8"); | | for (var i = 0; i < xhtmllinks.length; ++i){ | xhtmllinks[i].removeAttribute("href"); | xhtmllinks[i].style.color = "#ccc"; | xhtmllinks[i].setAttribute("title", | "This page does not work in " | + "Internet Explorer 8"); | } | } This is the most absurd piece of code yet. The removal of the href attribute is likely to not work cross browser. The concept of basing a fallback strategy on javascript is a demonstration of misunderstanding what a fallback is, which is also demonstrated that the fallback is targeted specifically for IE8 and IE8 only. The author did seem to recognize at least the significance of IE7, else he would not have included the comment: "for IE7 it's a lot more work."). There is also the message to the user, written in English, not localized, and appearing directly in the source code. This is the most absurd code I have seen in quite a long time. END EMAIL REPLY. -- Garrett comp.lang.javascript FAQ: http://jibbering.com/faq/
From: David Mark on 16 Mar 2010 19:19 Garrett Smith wrote: > A colleague of mine recently informed me with the emphatic title: > "HTML5, CSS3, and omg finally AddEventListener in new IE9!" Oh boy. > > With a link to: > http://ie.microsoft.com/testdrive/ Screw them. I'll look at their latest BS when they release it. > > And from the getgo, anyone who is not both stupid and ignorant would > notice some major problems there. > > For example: Under "HTML 5" category is a link to "DOM Events" (where my > colleague had directed my attention). To most anyone who can use google > and read, DOM Events is not part of HTML 5, but a completely separate > specification. Apparently nobody at Microsoft can search the web and > read, which would explain why D3E is categorized under HTML 5. As I said, screw them. Their explanations are never worth reading. I'll see for myself what the stupid thing does when it comes out. > > I replied to my colleagues email, but then decided to post my replies > here. My response to that email below (I edited it up a bit to be less > obnoxious). Is f**ked really less obnoxious than fucked? I don't think so. > > BEGIN EMAIL REPLY: > I have no doubt that they totally f**ked it up. > > My first glance at the Events; the first thing you're directing me to: > http://ie.microsoft.com/testdrive/HTML5/13DOM_Events/Default.html > > http://validator.w3.org/check?uri=http%3A%2F%2Fie.microsoft.com%2Ftestdrive%2FHTML5%2F13DOM_Events%2FDefault.html&charset=%28detect+automatically%29&doctype=Inline&group=0 No need to check that. But I see you have the game summary below. :) > > > They are serving invalid html document, w/XHTML doctype, as content-type > "text/html". Documents served with XHTML doctype should be sent with an > xml content type header. Which you should NEVER do on the Web (unless you are writing a library test page of course). > Sending XHTML as text/html forces browsers to > error-correct. The document at the following URL explains well enough: > http://hixie.ch/advocacy/xhtml > > So MS does not know html. This is news or what? Nope. Which raises a question... > > I reformatted their example code. They posted a mix of tabs spaces. I > reformatted it to use space indentation. Have a look: > > | var addSummaryListeners = function () { > | > | > | // Call "showSummary" on mouseover > | addEventListener("mouseover", showSummary, > | false); > | > | // Call "hideSummary" on mouseout > | addEventListener("mouseout", showSummary, > | false); > | } > | } > | } > > The first most obvious things are: > 1) Why is the EventTarget the global object? Because their Web developers are a bunch of incorrigible incompetents. Of course, that describes most Web developers anyway, but MS is particularly awful, considering how much money they have to spend on talent (see also Google). > 2) Do they think that global object implements MouseEvents? No, they think that window is the Global Object, which is almost as stupid as why would a window object support mouse events? > 3) Why are there three closing curly braces for the function? Key got stuck? > 4) Why is the ExpressionStatement, a FunctionExpression not terminated > by a semicolon? You are asking a bit much from that bunch. > 5) What is "..." in the function body? Where? > > The answer to all of these questions can be explained by the fact that > Microsoft does not hire competent individuals. Yes, what else is new? > > The extra semicolons and "..." can be explained as a formatting errors. I still don't see the ellipsis. > Relying on ASI (automatic semicolon insertion) is a beginner mistake or > careless mistake; it can taken be a sign of being under qualified. It's easy to do while pounding out code, but also easy to use a verifier like JSLint. And, of course, this is one _example_ function. > Suggesting that the global object implements MouseEvents is > demonstration of a nonstandard feature. And just a flat-out insane idea. > > The #1 mistake in the example is that the example is used to support > claims support of DOM events but instead provides a proprietary > (non-standard) example of MouseEvents on the global object. Classic > Microsoft. Virtually every example on MSDN uses code that will function > only in MSIE, often using things such as IE's global scope polluter, > document.all, and usually invalid HTML. Well, they are consistent if nothing else. :) > > > The Consequences. > > Javascript library authors will likely end up believing that the global > object implements MouseEvents and EventTarget and expecting those things > to work. At least, those will be used for IE-only sites. As we've seen, Javascript library authors will likely do about anything. I could publish code here to delete the window object and it would show up in some library six months from now. > > Microsoft should hire competent individuals to write unit tests to > ensure that the APIs they are producing are standard, valid, and > functional in known modern browsers (at least including Safari 2, IE7, > FF2). They don't want compatibility. It doesn't fit their business plan. > > Microsoft gets acknowledgment for trying. Not from me. > Unfortunately the effort falls > short of being acceptable. In the same way that jQuery falls short of competence. Those two should be very happy together. ;) > > The rest of the code tends to be worse. For example, they attempt to > provide a "fallback" for IE8 that requires javascript: > > | // should probably do something similar for > | //IE7 but it's a lot more work That looks like a Dojo apology comment. > | if (_isIE8) { > | var xhtmllinks = They really think they are using XHTML. :) > | document.querySelectorAll("a.noIE8"); > | > | for (var i = 0; i < xhtmllinks.length; ++i){ > | xhtmllinks[i].removeAttribute("href"); > | xhtmllinks[i].style.color = "#ccc"; > | xhtmllinks[i].setAttribute("title", > | "This page does not work in " > | + "Internet Explorer 8"); > | } > | } Those rebels. :) > > This is the most absurd piece of code yet. The removal of the href > attribute is likely to not work cross browser. The concept of basing a > fallback strategy on javascript is a demonstration of misunderstanding > what a fallback is, which is also demonstrated that the fallback is > targeted specifically for IE8 and IE8 only. The author did seem to > recognize at least the significance of IE7, else he would not have > included the comment: "for IE7 it's a lot more work."). And it wouldn't have been a lot more work (unless you were using jQuery or otherwise had no clue what you were doing). Yes, the more I think about it, MS and jQuery are perfect together. Just like Apple and My Library (hint). > > There is also the message to the user, written in English, not > localized, and appearing directly in the source code. > > This is the most absurd code I have seen in quite a long time. Have a look at virtually any file in Dojo. Just throw darts at them... You're sure to hit some absurdity.
From: S.T. on 16 Mar 2010 19:43 On 3/16/2010 3:17 PM, Garrett Smith wrote: > For example: Under "HTML 5" category is a link to "DOM Events" (where my > colleague had directed my attention). To most anyone who can use google > and read, DOM Events is not part of HTML 5, but a completely separate > specification. Apparently nobody at Microsoft can search the web and > read, which would explain why D3E is categorized under HTML 5. I doubt they were expecting somehow to so carefully analyze their categorization on a demo page. > I replied to my colleagues email, but then decided to post my replies > here. My response to that email below (I edited it up a bit to be less > obnoxious). > > BEGIN EMAIL REPLY: > I have no doubt that they totally f**ked it up. > > My first glance at the Events; the first thing you're directing me to: > http://ie.microsoft.com/testdrive/HTML5/13DOM_Events/Default.html > I reformatted their example code. They posted a mix of tabs spaces. I > reformatted it to use space indentation. Have a look: That's not sample code. It's filler text. > | var addSummaryListeners = function () { > | > | > | // Call "showSummary" on mouseover > | addEventListener("mouseover", showSummary, > | false); > | > | // Call "hideSummary" on mouseout > | addEventListener("mouseout", showSummary, > | false); > | } > | } > | } > > The first most obvious things are: > 1) Why is the EventTarget the global object? > 2) Do they think that global object implements MouseEvents? > 3) Why are there three closing curly braces for the function? > 4) Why is the ExpressionStatement, a FunctionExpression not terminated > by a semicolon? > 5) What is "..." in the function body? > > The answer to all of these questions can be explained by the fact that > Microsoft does not hire competent individuals. > > The extra semicolons and "..." can be explained as a formatting errors. > Relying on ASI (automatic semicolon insertion) is a beginner mistake or > careless mistake; it can taken be a sign of being under qualified. > Suggesting that the global object implements MouseEvents is > demonstration of a nonstandard feature. You're analyzing fillertext -- it wasn't intended to be a tutorial. Just some text they stuck up there - a snip of part of their code. It could have been the Gettysburg address or some 'ipsum lorem'. Probably just looked more appropriate to through some code'y looking text on screen when giving a presentation to a techie audience. Here's the actual code -- maybe it'll calm at least some of your wrath? -------------------------------- var init = function () { preventSelection(); hideSummaries(); addSummaryListeners(); } // Abstraction layer for event registration differences var addListener = function (obj, event, handler) { if (obj.addEventListener) { obj.addEventListener(event, handler, false); } else { obj.attachEvent("on" + event, handler); } } // Call "init" on page load addListener(window, "load", init); // // Initialization Methods // // Add listeners to show/hide summaries when needed var addSummaryListeners = function () { var links = document.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { var next = links[i].nextSibling; if (next && next.className == "summary") { links[i].summary = next; // Call "showSummary" on mouseover addListener(links[i], "mouseover", showSummary); // Call "hideSummary" on mouseout addListener(links[i], "mouseout", hideSummary); } } } --------------------------- .... and a couple more functions called in the init() I mean... sheesh!! It's a basic demo site intended for a presentation and posted online. They probably weren't too worried about being cross-browser since it's a site specifically targeted for people to test with an IE9 preview release. When you open the preview release, it's the site you end up on and it's purposefully inconvenient to move elsewhere. Having actually tried the preview release, I was quite impressed. Though no indication of the UI, the js performance in my stuff seems at least as 'peppy' as Chrome and faster than Firefox. Substantially faster than IE8. Its 'flying images' demo showed far better performance than anything else on my system (both FPS and image quality while moving). And the only thing readily obvious that breaks on my sites (even when forcing IE9 rendering) is some jQueryUI autocomplete stuff on an intranet app -- which is beta itself and I know it's buggy. IMHO Microsoft should be applauded for this. As it evolves is starts supporting DOM level 2 events (they've said they will) and other fixes/features they'll likely deserve even more credit. And since they're now providing resources to a somewhat Mozilla-affiliated jQuery project, probably a move to gain some positive PR from the web developer community, I would guess they'll get more and more standard compliant. I'm sure some remnant junk will remain -- else it would kill any chance of getting corporations to upgrade -- but it's most certainly headed the right direction and, in some cases, outperforms everything else already.
From: David Mark on 16 Mar 2010 20:02 S.T. wrote: > On 3/16/2010 3:17 PM, Garrett Smith wrote: >> For example: Under "HTML 5" category is a link to "DOM Events" (where my >> colleague had directed my attention). To most anyone who can use google >> and read, DOM Events is not part of HTML 5, but a completely separate >> specification. Apparently nobody at Microsoft can search the web and >> read, which would explain why D3E is categorized under HTML 5. > > I doubt they were expecting somehow to so carefully analyze their > categorization on a demo page. > >> I replied to my colleagues email, but then decided to post my replies >> here. My response to that email below (I edited it up a bit to be less >> obnoxious). >> >> BEGIN EMAIL REPLY: >> I have no doubt that they totally f**ked it up. >> >> My first glance at the Events; the first thing you're directing me to: >> http://ie.microsoft.com/testdrive/HTML5/13DOM_Events/Default.html > >> I reformatted their example code. They posted a mix of tabs spaces. I >> reformatted it to use space indentation. Have a look: > > That's not sample code. It's filler text. > >> | var addSummaryListeners = function () { >> | >> | >> | // Call "showSummary" on mouseover >> | addEventListener("mouseover", showSummary, >> | false); >> | >> | // Call "hideSummary" on mouseout >> | addEventListener("mouseout", showSummary, >> | false); >> | } >> | } >> | } >> >> The first most obvious things are: >> 1) Why is the EventTarget the global object? >> 2) Do they think that global object implements MouseEvents? >> 3) Why are there three closing curly braces for the function? >> 4) Why is the ExpressionStatement, a FunctionExpression not terminated >> by a semicolon? >> 5) What is "..." in the function body? >> >> The answer to all of these questions can be explained by the fact that >> Microsoft does not hire competent individuals. >> >> The extra semicolons and "..." can be explained as a formatting errors. >> Relying on ASI (automatic semicolon insertion) is a beginner mistake or >> careless mistake; it can taken be a sign of being under qualified. >> Suggesting that the global object implements MouseEvents is >> demonstration of a nonstandard feature. > > You're analyzing fillertext -- it wasn't intended to be a tutorial. Just > some text they stuck up there - a snip of part of their code. It could > have been the Gettysburg address or some 'ipsum lorem'. Probably just > looked more appropriate to through some code'y looking text on screen > when giving a presentation to a techie audience. > > Here's the actual code -- maybe it'll calm at least some of your wrath? > -------------------------------- > var init = function () { > preventSelection(); > hideSummaries(); > addSummaryListeners(); > } > > // Abstraction layer for event registration differences > var addListener = function (obj, event, handler) { > if (obj.addEventListener) { > obj.addEventListener(event, handler, false); > } else { > obj.attachEvent("on" + event, handler); > } > } > > // Call "init" on page load > addListener(window, "load", init); > > // > // Initialization Methods > // > > // Add listeners to show/hide summaries when needed > var addSummaryListeners = function () { > var links = document.getElementsByTagName("a"); > for (var i = 0; i < links.length; i++) { > var next = links[i].nextSibling; > if (next && next.className == "summary") { > links[i].summary = next; > // Call "showSummary" on mouseover > addListener(links[i], "mouseover", showSummary); > // Call "hideSummary" on mouseout > addListener(links[i], "mouseout", hideSummary); > } > } > } > --------------------------- > ... and a couple more functions called in the init() > > > I mean... sheesh!! It's a basic demo site intended for a presentation > and posted online. They probably weren't too worried about being > cross-browser since it's a site specifically targeted for people to test > with an IE9 preview release. When you open the preview release, it's the > site you end up on and it's purposefully inconvenient to move elsewhere. > > Having actually tried the preview release, I was quite impressed. Though > no indication of the UI, the js performance in my stuff seems at least > as 'peppy' as Chrome and faster than Firefox. Substantially faster than > IE8. Its 'flying images' demo showed far better performance than > anything else on my system (both FPS and image quality while moving). > And the only thing readily obvious that breaks on my sites (even when > forcing IE9 rendering) is some jQueryUI autocomplete stuff on an > intranet app -- which is beta itself and I know it's buggy. > What would possess you to use code written by a jQuery maven to implement something as simple as an auto-complete feature? Of course it is buggy. It can't not be buggy. All you have to do is look at the code it is built on (the actual code, not what you can see it doing in a handful of browsers). And a year from now they'll announce they've stopped "caring" about IE < 9 anyway (and then all of that stuff will go to hell in a hurry) and you'll have to upgrade to get it work with some newer browser. All of that against spending a couple of hours slapping together an auto-complete? That's something that you should already have in your arsenal (or at least the few pieces required to build one). And no, the answer is not to switch to some other clods' (e.g. Dojo) widget(s) either.
From: Richard Cornford on 16 Mar 2010 20:40
Garrett Smith wrote: <snip> > | var addSummaryListeners = function () { > | > | > | // Call "showSummary" on mouseover > | addEventListener("mouseover", showSummary, > | false); > | > | // Call "hideSummary" on mouseout ^^^^^^^^^^^ > | addEventListener("mouseout", showSummary, ^^^^^^^^^^^ ? > | false); > | } > | } > | } > > The first most obvious things are: <snip> This is not something that has ever been tested. Richard. |