"Spot the Error" Competition 2: Olympic Edition

[Jeff Mott]

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

That's actually what we mean. The term is a derivative of "flash of unstyled content," which is the same kind of problem but manifests differently.

[Stormrider]

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.

The DOM ready event would ordinarily occur before the page is rendered though

[itmitică]

That's actually what we mean. The term is a derivative of "flash of unstyled content," which is the same kind of problem but manifests differently.

OK, now I feel FOUC-stupid...

[Jeff Mott]

The DOM ready event would ordinarily occur before the page is rendered though

The DOM ready event would occur before the onload event, but browsers render markup as it becomes available.

The demos I linked to earlier demonstrate this behavior.

http://stevesouders.com/cuzillion/?c...=1343940419181

The image and iframe are rendered even though the DOM ready event doesn't fire until 6 seconds later.

[itmitică]

The DOM ready event would occur before the onload event, but browsers render markup as it becomes available.

... but we don't know the exact moment when the DOM changes reflect in rendering... parsing starts immediately, rendering may come to a halt...

[Jeff Mott]

... but we don't know the exact moment when the DOM changes reflect in rendering... parsing starts immediately, rendering may come to a halt...

Of course. But if rendering halts, then the DOM ready event will also be delayed.

For example:

In the demo I linked to two posts up, click Edit, then drag one or both of the external scripts so that they are in between the image and the iframe, then click Create to run the page.

What happens is the image (but not the iframe) is rendered, then rendering halts while the scripts are being processed, and finally 6 seconds later, the iframe is rendered, followed shortly by the DOM ready event.

[ralph.m]

Off Topic:

"give a bitter reason/explanation" ... Is it another test or should I take that personal?

Ha ha, no, just another typo.

This is turning out to be quite a lethal sting.

Yes, I'm thinking I should have said I'd give points for good answers and deduct points for bad ones. Think I'll go that way. Feeling my way along here.

[itmitică]

In the demo I linked to two posts up

Nice examples, and nice page, never heard of Cuzillion before this. Not sure how accurate it is, but a nice tool.

[itmitică]

Off Topic:

Off Topic:


Ha ha, no, just another typo.

I'm sorry to inform you but Pandora's Box is open now: http://www.sitepoint.com/forums/show...=1#post5161731

[joseninogarcia]

Wow, code Olympics huh... This seems to be fun but it will take time before I finished to spot those errors haha

[coloradojaguar]

I was waiting for someone to point out the language error. en not em. Not an easy one really. Your eyes just pass right over it unless your are really watching.

[DaveMaxwell]

I was waiting for someone to point out the language error. en not em. Not an easy one really. Your eyes just pass right over it unless your are really watching.

psst. http://www.sitepoint.com/forums/show...=1#post5161729

(And others did notice it as well)

[ralph.m]

OK guys, we'll wrap this up in the next several hours, so if you have anything else to add, speak now ...

[Jeff Mott]

I'm not sure if you're targeting a particular audience for this competition, but I figured I'd throw my hat in the ring. Admittedly I had the benefit of working on this little by little over several days, and I had the benefit of seeing other poeple's answers. DaveMaxwell noticed that the slideshow was never initialized. I most likely would have missed that on my own. And nickyoung noticed that the plugin came before the library. I hadn't noticed that initially.


Errors

> There seems to be problems

When the subject of the sentence is plural (in this case, "problems") then you would write "seem" instead of "seems".

> Id be greatful to

"Id" should have an apostrophe, "I'd", and "greatful" is spelled "grateful".

> Id be greatful to whomever is able help with this.

"whomever" should be "whoever". I had to google myself a grammar lesson to make sure I got this one right.

> Im not much good with java.

"Im" should have an apostrophe, "I'm". Also, there's a whole other language called Java, so when you're talking about *JavaScript*, make sure you use the full name.

> <DOCTYPE html>

You're missing the "!". It should be <!DOCTYPE html>

> <html lang="em">

You almost certainly meant to type "en" for the language.

> <meta charset="utf8">

You're missing a hyphen in "utf8". It should be "utf-8".

> <title>Spot the Eror</title>

This looks like a typo. "Eror" should be "Error".

> <link rel="stylesheet" media="screen projection tv" href="/css/styles.css">

The media values should be separated by commas, "screen, projection, tv".

> <!- --start slideshow-- -->

A couple problems here. The comment start should look like "<!--", and you can't have two contiguous hyphens within the comment, or it will prematurely close.

> <img href="bird1.jpg" alt="Bird in flight"

You're missing the closing ">". Also, to set the image URL, you need to use the "src" attribute, not "href".

> <img href="bird2.jpg alt="Bird in cage">

Ditto about the "src" attribute. Also, you're missing the closing quote.

> <script type="text/java" src="/js/jquery.cycle.lite.min.js"></script>
> <script type="text/script" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Both values for the "type" attribute are wrong, but in different ways. They both should read "text/javascript". Optionally, you could even remove the type attribute altogether. Browsers will actually defer to the type in the HTTP response, and the spec allows it as of HTML5. Also, you need to load jQuery itself before you load any jQuery plugins.

It also looks like you never initialized the slideshow. After you load the library and the plugin, you'll need to do this:

<script>
	$('.slideshow').cycle();
</script>

Warnings (not errors)

> I can not see

"can not" is more commonly written as either one word, "cannot," or as a contraction, "can't."

> <link rel="stylesheet" media="screen projection tv" href="/css/styles.css">

It's common practice to set the type attribute to "text/css". Though, it isn't required in the spec, and browsers will defer to the type in the HTTP response. As I'm typing this, I'm realizing that, despite being common practice, the type attribute is actually redundant.

> <head> ... <body>

It's considered good practice to explictly close the head element. Most times it won't affect anything, but I think it's better for code clarity.


White flags of surrender (things I suspect are errors but I'm not confident enough to call them out as such)

> Im not much good with java.

"not much good" sounds wrong to my ear. It's usually phrased "not very good." Though, after sifting through Webster, I can't confirm whether it's actually an error.

[xhtmlcoder]

I wouldn't get too hung-up on the sentence grammar itself. I think Jeff has found a very obvious point of interest (none error), which everyone prior 'competing' missed I believe. Other than that between you all I think you've found 99% of them now. The only one I probably wouldn't have realised without study was (plugin and library order). The rest I certainly had even Dave's; I had mentioned to Ralph via PM prior, that it would probably need some script loader/initialisation code.

[Mael5trom]

There seems to be problems with this code, but I can not see what. Id be greatful to whomever is able help with this. Im not much good with java.

1. Id should be I'd
2. greatful should be grateful
3. whomever should be whoever
4. Im should be I'm
5. java should be JavaScript
   
   

   Code:
   <DOCTYPE html>

6. <DOCTYPE should be <!DOCTYPE
   
   

   <html lang="em">

7. "em" should be "en"
   
   

   <head>
   
   <meta charset="utf8">

8. "utf8" should be "utf-8"
   
   

   <title>Spot the Eror</title>

9. Eror should be Error
   
   

   <link rel="stylesheet" media="screen projection tv" href="/css/styles.css">

10. media="screen projection tv" should be media="screen, projection, tv"
    
    

    <body>
    
    <!- --start slideshow-- -->

11. <!- should be <!--
12. should not include -- inside of a comment as it will prematurely close the comment
    
    

    <div class="slideshow">
    <img href="bird1.jpg" alt="Bird in flight"
    <img href="bird2.jpg alt="Bird in cage">
    </div>

13. first img tag missing it's closing >
14. second img tag missing closing quote for href attribute
    
    

    <script type="text/java" src="/js/jquery.cycle.lite.min.js"></script>
    <script type="text/script" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    </body>
    </html>

15. type element in first script tag should be "text/javascript" or omitted (not required for HTML5)
16. type element in second script tag should be "text/javascript" or omitted (not required for HTML5)
17. tags are in the wrong order, jQuery needs to be included prior to plugins that require jQuery

--------------

Things I missed and noticed after looking at a few other posts:

1. img tags href should be src
2. Slideshow is never initialized, should include a <script>$(".slideshow").cycle();</script> before the closing </body> tag

Non-errors but bad practice

1. No closing </head> tag (optional, but bad practice to exclude)
2. https: explicitly declared in jquery CDN call, better to exclude and include based on page context
3. No local jQuery fallback included, so page will break if the CDN fails or is unavailable

[ralph.m]

OK guys, thanks everyone for participating in this. You are welcome to discuss the errors further, but the competition side of this thread is now over.

I was going to list everything I considered an error, but honestly, you guys have squeezed every bit of juice out of these errors, so there's not much for me to say! I'll just make a few comments:

- as was pointed out in post #40ff, it's OK to have the scripts before the closing body tag, even if there's some debate about whether or not this is best practice.
- because of the doctype used in this code sample, it's acceptable to have the shorter charset line.
- it's also fine to start paths with a slash.
- a special 'well done' to those who pointed out that a double dash (--) inside an HTML comment will cause it to break. Can't get anything past you guys!

The only other error I'd like to highlight was the use of "whomever" here:

I'd be gratful to whomever is able to help with this.

It should indeed be "whoever", so kudos to those who flagged this as an error. I would have given bonus points to anyone who had explained why that is an error, but because no one did, I'll attempt to do so myself.

It's a bit sad that "whom" has all but been lost from English, as the difference between "who" and "whom" is the same as that between "he" and "him". (Imagine if we lost "him", "her", "them" etc. from the language.) Unfortunately, when people do attempt to use "whom" they often get it wrong. A common idea is that "whom" should be used after "to", but that's not necessarily the case. A traditional use of "whom" occurs in the phrase

To whom it may concern

The question is, why does that sentence contain "whom" rather than "who"? It's often assumed that it's because of the "to", but that's not the case. For example, this is actually correct as well:

To whoever may be concerned

This demonstrates that it's sometimes what comes after the word that may determine the ending. In the first example, it's a question of "whom it may concern", while in the second example it's a question of "whoever may be concerned". In the first example, "who" is the object of the verb "concern", while in the second example, it's the subject.

In a way, both of these phrases are a shortened version of the full concept. For example, the first example could be extended to read

To him, whom it may concern

OK, enough blustering. On to the winners. After a rigorous scoring effort, congratulations to the following winners:

Gold: Jeff Mott
Silver: Stormrider
Bronze: dresden_phoenix

By the way, I realized it wasn't fair to disqualify someone for making a mistake, so instead I just deducted a point from the total points.

Thanks again for your contributions, everyone. I hope it was fun.

[itmitică]

Fun it was!

[molona]

I'm as bad as the Spanish Teams in the real Olympic Games... Congratulations to the winnes. Well, done *clap clap clap*

[Jeremy P. Reed]

I just thought of something. Maybe the prize should go to the person who did the worst. They would need the book most, right? Haha (it was probably me *hint hint*)

[Jeff Mott]

Maybe the prize should go to the person who did the worst. They would need the book most, right?

Good point!