"Spot the Error" Competition 2: Olympic Edition

**ralph.m** · Aug 2, 2012 07:36

Originally Posted by xhtmlcoder

Mitică, I believe for Gold medal - if you are going for gold - you have to give a full in-depth explanation. Consider as if it were you own standalone analysis (as if you were the "first poster" to reply to the OP as if it were a real question in the SPF itself) so you might want to add your own full list of what you personally believe or see is wrong not just add to the previous posts, which may or may not be correct.

Yes indeed. Please list everything you see in full. Even if you flag something someone else has noted, you may be able to give a bitter reason/explanation for why it's an error. And that person may have made other mistakes, which would count against them.

**Stormrider** · Aug 2, 2012 07:46

I didn't include the closing head tag as I thought that was the honeytrap :P It's not an error

**itmitică** · Aug 2, 2012 07:51

Robert,
Ralph,
Fair enough asking for a complete list.

But it feels a little "copy-paste" and a steal taking advantage of the good observations Stevie D. and Stormrider have provided above.
Without the explanations they provided it's possible that I would've missed on some of the points. So it just doesn't seem fair.

Off Topic:

@ralph.m

Originally Posted by ralph.m

[...] you may be able to give a bitter reason/explanation for why it's an error.

Now, why would you say something like that? Is it another test or should I take that personal?

**itmitică** · Aug 2, 2012 07:55

Originally Posted by Stormrider

I didn't include the closing head tag as I thought that was the honeytrap :P It's not an error

Yes, it's more of a good practices error in this case, but, depending on the markup, selectively omitting opening or closing tags on some of the HTML5 optional elements, it may lead to broken, abnormal DOMs in certain UAs.

Good practice says: if you use one optional tag then use them all and close them all.

**Stormrider** · Aug 2, 2012 08:10

Yeh, it's probably recommended I guess.

**mtfitz** · Aug 2, 2012 08:28

• <DOCTYPE html> Missing ! after < and doctype can be lowercase
• <html lang="em"> Should read lang="en"
• <meta charset="utf8"> Should read charset="utf-8"
• <title>Spot the Eror</title> Spell check: Error
• <link rel="stylesheet" media="screen projection tv" href="/css/styles.css"> Should read media="screen, projection, tv" (comma delimiter) and the path for the href statement either needs to begin with two dots or no slash depending on the actual path
• Missing the closing </head> tag
• <!- --start slideshow-- --> Should read 
• <img href="bird1.jpg" alt="Bird in flight" Missing closing > at end of line and should read src="bird1.jpg" not href="bird1.jpg"

• <img href="bird2.jpg alt="Bird in cage"> Should read src="bird2.jpg" not href="bird2.jpg" and there is a missing double quote after bird2.jpg
• <script type="text/java" src="/js/jquery.cycle.lite.min.js"></script> If you are including the optional (in HTML5) type attribute should read type="text/javascript" and path for the src statement either needs to begin with two dots or no slash depending on the actual path
• <script type="text/script" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> If you are including the optional (in HTML5) type attribute should read type="text/javascript"
• The jQuery library should be loaded before the local .js file so reverse the order of the two script files: <script type="text/script" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> followed by <script type="text/java" src="/js/jquery.cycle.lite.min.js"></script>

**DaveMaxwell** · Aug 2, 2012 09:30

While I'm declaring myself ineligible for any prizes (though if you want to say I'd win a medal, that'd be cool

), I wanted to play and see how many I could find (I didn't peek at anyone else either)....

Grammar in opening text

"seems to be problems" - either needs to be "seems to be a problem" or "seem to be problem
"can not see what" - depending on 1, it would be "can not see what it is" or "can not find them".
Id - I'd
greatful - grateful
Im - I'm
"not much good with" - not very good at
java/javascript - marking it as wrong, though it could be valid depending on the newbienicity of the OP.

Code errors

<DOCTYPE html> should be <!DOCTYPE html> (case doesn't matter)
lang="em" -> em is not a valid language code. Valid possibilities could be: am, el, en (would be guess), eo, es, et, eu, km, om, rm, sm
charset="utf8" should be charset="UTF-8"
In title, Eror should be Error
media should be media="screen,projection,tv" instead of media="screen projection tv"
Comment needs correct start <!-- instead of <!-
missing closing > on first img tag
href= on img tags should be src=
<script type="text/java" should be <script type="text/javascript"
<script type="text/script" should be <script type="text/javascript"
script tags should be in head, not in body.
Unless it is in the cycle javascript file (and since it's the min version, I doubt it is), there's no call to start the slideshow

Valid according to spec, but looks wrong or may cause rendering issues

void elements to use self-closing to tag ( />)
the </head> tag is missing
While the version of jquery is technically valid, the current google apis version is 1.7.2

**itmitică** · Aug 2, 2012 09:35

I've realized there are a few things I have to add, so I decided I'd go for it.
For a bitter reason/explanation for why it's an error, that is!

Part II - The Code
============

1. BBCode should be [html] instead of [code]. They didn't just work on syntax highlighting for nothing you know, so get using the right BBCodes! And clean up and beautify that code of yours! Nobody's gonna want you looking so sloppy!!! Damn!

2. Do you even know what quirks mode does to a browser? Do ya'? Do ya'!!! Or do ya's believe HTML5 contracted DTD is something to laugh at! And you're wrong buddy, it's not the size, it's what you do with it. Get that "!" in there, and remember this for the rest of your miserable life: <!doctype html>

3. What's that em language I hear about?! This is what you understood by elastic design? Or are you trying to get FBI and MOSSAD to close down this site! You know very well that they only approve of web sites that they can read and intercept. Stop playing 007, you're just the one putting the 00 in the n00b!!! Pick a damn language that's actually in the list and get on with it!
http://www.loc.gov/standards/iso639-2/php/code_list.php

4. UTF8!? What do you think this is, some kind of "let's remember Mortal Combat combos" test! We're building international websites here!!! It's UTF-8! Read this 100 times:
http://www-01.ibm.com/software/globalization/ccsid/ccsid_registered.html
How do you like them languages now, huh!?

Should I go on?

**Jeff Mott** · Aug 2, 2012 09:40

Originally Posted by ralph.m

Beware, though, as there's a sting in the tail this time. If you flag something as an error that's not one, you'll be disqualified, so choose your errors carefully!

This is turning out to be quite a lethal sting. A list of errors might be 95% accurate... but one little misstep, and it's all for naught.

**itmitică** · Aug 2, 2012 10:04

Originally Posted by DaveMaxwell

Valid according to spec, but looks wrong or may cause rendering issues

void elements to use self-closing to tag ( />)

I disagree.

The short version of

HTML Code:

<meta charset="utf-8">

stands for this

HTML Code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

which clearly states the option for the HTML syntax, where void elements selfclose like this ">" and not the XHTML style like you're suggesting, like this "/>".

**molona** · Aug 2, 2012 10:37

* DOCTYPE without an exclamation mark at the beggining... tut tut tut... naughty boy

* lang attibute uses a... well, a language not known to me... maybe you wanted to say that you used ENglish istead of "EM" which is completely unknown
Even something a bit more specific such as "en-us"
* Your meta tag is a bit too short and bad written. Something like <meta http-equiv="Content-Type" content="html/text;charset: utf8"> looks better
* The media listed in the link attribute need to be separated by commas
* The head is not closed
* The first image tag is not closed. It needs a ">" character to do so.
the second image tag needs a doble quote at the end of the name of the file
* Img tags don't use href but src to specify the route and name of the file used.
script tags can use type attribute to specify the language but... if you used javascript you write "text/javascript" and not just a "java" or "script"
* I'd be surprised if the url for google apis includes a https protocol... plus I would include first the jquery library and after that the file that with the code with the animation, and not the other way around
* Also, although some scripts may benefit of being placed at the end of the page, these should go at the top, in the head area

**molona** · Aug 2, 2012 10:47

I'm going through the posts and I'm ashamed that I didn't include the opening text in my list of errors and there are 2-3 in the code that I haven't spotted at all

**Stormrider** · Aug 2, 2012 11:57

Originally Posted by DaveMaxwell

Unless it is in the cycle javascript file (and since it's the min version, I doubt it is), there's no call to start the slideshow

Damn, missed that one, and it's so obvious now!

**dresden_phoenix** · Aug 2, 2012 12:09

KELSY & TORI:

There seems to be problems with this code, but I can not ('cannot' is one word) see what.( I would have rephrased that whole sentence as:'This code seems to have some problems but I cannot see where they are.') Id (missing apostrophe, should be 'I'd') be greatful (spelling, should be: 'grateful') to whomever (this should be: 'whoever') is able (missing word:'to') help with this. Im (missing apostrophe, should be I'm) not much(should be:"very" instead of "much") good with java (Java should be capitalized).

CODE:
1. Presumed typo in DOCTYPE, should be: <!DOCTYPE html>
2. Presumed typo in HTML lang attribute, should be: <html lang="en">
3.Presumed typo in meta charset is missing a dash. It should be: "utf-8".
4. I dont think "screen projection tv" is a media type... lol
5. head tag is not closed. (it's just good practice to do so, even in HTML5)
6. consecutive hyphens are not allowed in html comments
6a. Presumed typo, html comments must start with ""
7, 8. the first IMG tag is not 'closed' (missing '>') ; ALSO The proper attribute should be SRC not HREF.
Should be : <img src="bird1.jpg" alt="Bird in flight">

9,10. the second IMG tag's href doesnt end in double quotes. Should be: href="bird2.jpg"; ALSO,again, The proper attribute should be SRC not HREF.
Should be : <img src="bird2.jpg" alt="Bird in cage">

11 The type attributes for both script tags should be "text/javascript"
12. It is good practice to load the jquesry plug-in first, preferably in the HEAD of the document and before any other scripts.

THOUGH ERROR:
The person mention s/he is not good at Java ( the standalone programming lang), presumably meaning javascript but (presumably) does NOT provide the .js. While my suggestions would cover most if not all of the grammatical and markup errors it wont help at all with the script errors s/he may have been concerned with (other than fixing the link, that is)

NOTE:
This is fun and am generally not this anal about things..lol

**Jeff Mott** · Aug 2, 2012 12:29

Originally Posted by dresden_phoenix

...load the [JavaScript] preferably in the HEAD of the document

I've been surprised to see this show up a few times as a recommendation. To my knowledge, performance research revealed that it's better to include scripts at the bottom of the body.

**molona** · Aug 2, 2012 12:37

Originally Posted by Jeff Mott

I've been surprised to see this show up a few times as a recommendation. To my knowledge, performance research revealed that it's better to include scripts at the bottom of the body.

For what I know, it depends on the script itself. And sometimes there's no proof where it is better.

**DaveMaxwell** · Aug 2, 2012 13:04

Originally Posted by Jeff Mott

I've been surprised to see this show up a few times as a recommendation. To my knowledge, performance research revealed that it's better to include scripts at the bottom of the body.

I've always gotten inconsistent results with loading it in the bottom of the body, and never found the performance gains touted, so I keep them in the head whenever possible.

**dresden_phoenix** · Aug 2, 2012 13:04

Jeff,
I was referring specially to the JQ lib (or any other lib) as the other scripts may or may not be dependent on it.
Also it is good practice to to put scripts at the end of your document simply because by then your entire DOM has been built so it wont affect the loading of content or script execution. Depending on the script and how it is used it may help organization to have it within the HEAD.

**Jeff Mott** · Aug 2, 2012 13:59

If moving scripts to the bottom is causing anyone's page to fail (or otherwise behave inconsistently), then that's worth starting a thread about so the community can help discover the problem. Otherwise, having scripts at the bottom improves loading times both perceptively and objectively.

Here's a concrete example:

Scripts loaded in the head: The page is blank for quite a while, then finally loads after about 7 - 7.5 seconds.
http://stevesouders.com/cuzillion/?c...f&t=1343940321

Scripts loaded at bottom of the body: The page content (the image and the iframe) is displayed comparatively quickly, and the total load time is down to 6 - 6.5 seconds.
http://stevesouders.com/cuzillion/?c...=1343940419181

In these examples, the download times were designed to take a long time (e.g., 2 seconds) in order to highlight the difference. In a real world site, the difference might be just a few hundred milliseconds, depending on how much JavaScript you use, but it's a benefit nonetheless.

**Stormrider** · Aug 2, 2012 14:04

It all depends though - having the scripts at the bottom can cause a flash of unscripted content, or users being able to interact with the page before the scripts have loaded. Could be undesirable in some circumstances - like I said in my post, it's arguable - it would depend on the circumstances a lot.

**itmitică** · Aug 2, 2012 14:27

https://developers.google.com/speed/...sBeforeScripts

Optimize the order of styles and scripts

Because JavaScript code can alter the content and layout of a web page, the browser delays rendering any content that follows a script tag until that script has been downloaded, parsed and executed. However, more importantly for round-trip times, many browsers block the downloading of resources referenced in the document after scripts until those scripts are downloaded and executed. On the other hand, if other files are already in the process of being downloaded when a JS file is referenced, the JS file is downloaded in parallel with them.

Therefore, since stylesheets should always be specified in the head of a document for better performance, it's important, where possible, that any external JS files that must be included in the head (such as those that write to the document) follow the stylesheets, to prevent delays in download time.

Another, more subtle, issue is caused by the presence of an inline script following a stylesheet.

In this case, the reverse problem occurs: the first stylesheet actually blocks the inline script from being executed, which then in turn blocks other resources from being downloaded. Again, the solution is to move the inline scripts to follow all other resources, if possible.

Recommendations

Put external scripts after external stylesheets if possible.

Put inline scripts after other resources if possible.

A hands on solution is deferring.

https://developers.google.com/speed/...DeferLoadingJS

[...] you should first identify all of the JavaScript functions that are not actually used by the document before the onload event.

Then, you insert a JavaScript event listener in the head of the containing document that forces the external file to be loaded after the onload event.

It's safe to say that meta comes first, CSS comes second, content comes third, and everything not critical goes from the head to the bottom of the page.

**Jeff Mott** · Aug 2, 2012 14:38

Originally Posted by itmitică

...such as those that write to the document...

Since this is the part you emphasized, I just want to make sure it's understood that this doesn't mean DOM manipulation. It means document.write, which is generally frowned upon and avoided anyway.

**itmitică** · Aug 2, 2012 14:53

One problem with the Google's approach of moving script at the bottom is visible in their Translate.

On slower connections, you'd have all the interface visible just not ready to action. The languages From and To lists won't be available at first immediate clicks and the switch between Translation and Original views is also not immediately available, but the buttons are already visible and styled. You may waste some clicks before the javascript code is fully loaded and the user experience may suffer from this.

**Jeff Mott** · Aug 2, 2012 15:18

Very true. That's the flash of unscripted content that Stormrider also mentioned. The usual fix for that is actually pretty simple. You can add a class to the <html> tag called "js-loading", then in your CSS, you can do .js-loading .some-widget-that-depends-on-js { display: none }, or you can choose to display a spinner instead, and either of those are only necessary if your content is useless without JavaScript. Then the very last action taken by your JavaScript would be to remove the "js-loading" class, revealing your fully functioning JS widgets.

Be aware, however, that even if your scripts were all in the head, you could still get a flash of unscripted content, because we're still forced to delay our script executions until the DOM ready event.

**itmitică** · Aug 2, 2012 15:33

I'm not getting the flash, I'm just getting the delayed usability.

Either way, it's a problem. But if Google, and Yahoo, and Bing, and Mozilla, and Microsoft (not Apple though, and not Opera!) chose this path, scripts at the bottom, there must be something to it.

As a side note, a spinner would give the wrong signal (meanwhile the impatient user wanders about the seriousness of the website: maybe something is not working, something is not right).

User Tag List

Thread: "Spot the Error" Competition 2: Olympic Edition

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions