"Spot the Error" Competition 2: Olympic Edition

Actually you aren’t doing too bad Chris and I see in #17 you got one of those I was thinking of in #18 but you bet me to the post my browser wasn’t refreshed. :slight_smile:

The fact that there are any I’ve missed is annoying me :stuck_out_tongue: (Apart from anything to do with absolute vs relative paths… I discounted those because they all depend on the environment it’s set up in) Ah well, will have to wait till the answers come out and see what I missed!

Part I - THE TEXT

There seems to be [a] problem with this code, but I cannot see what. I’d be grateful to whomever is able [to] help [me] with this. I’m not much[so] good with java[script].

Will tackle the code a little later. :wink:

EDIT: I should mention that whomever vs. whoever goes a little (more) above my ESL head…:cool:

Part II - THE CODE

Others have covered very well this part. I have one or two comments to add:

  1. The </head> tag is missing. Not an error though in HTML5, so I don’t know if it counts. But they recommend that if you use the start tag for one of the optional elements, you should use the corresponding close tag too.

  2. You’re not allowed consecutive hyphens inside HTML comments,


[COLOR="#FF0000"]<!-[/COLOR] -start slideshow[COLOR="#FF0000"]--[/COLOR] -->

should be


<!-- start slideshow -->

or something similar, just without any other consecutive hyphens inside, beside those at the start and at the end of the HTML comment.

EDIT: I just saw that Stormrider already covered the consecutive hyphens part. So I guess it’s just one point, the missing closing tag on the optional head element.

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. :slight_smile:

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. :slight_smile:

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

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

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

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.

Yeh, it’s probably recommended I guess.

• <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 <!-- start slideshow –>
• <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>

While I’m declaring myself ineligible for any prizes (though if you want to say I’d win a medal, that’d be cool :D), I wanted to play and see how many I could find (I didn’t peek at anyone else either)…

Grammar in opening text

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

Code errors

  1. <DOCTYPE html> should be <!DOCTYPE html> (case doesn’t matter)
  2. 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
  3. charset=“utf8” should be charset=“UTF-8”
  4. In title, Eror should be Error
  5. media should be media=“screen,projection,tv” instead of media=“screen projection tv”
  6. Comment needs correct start <!-- instead of <!-
  7. missing closing > on first img tag
  8. href= on img tags should be src=
  9. <script type=“text/java” should be <script type=“text/javascript”
  10. <script type=“text/script” should be <script type=“text/javascript”
  11. script tags should be in head, not in body.
  12. 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

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

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! :lol:

Part II - The Code

  1. BBCode should be
 instead of 

. 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!

  1. 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>

  2. 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

  3. 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? :slight_smile:

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. :eek:

I disagree.

The short version of


<meta charset="utf-8">

stands for this


<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 “/>”.

  • DOCTYPE without an exclamation mark at the beggining… tut tut tut… naughty boy :stuck_out_tongue:
  • 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

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 :frowning:

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

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”.
  3. I dont think “screen projection tv” is a media type… lol
  4. head tag is not closed. (it’s just good practice to do so, even in HTML5)
  5. consecutive hyphens are not allowed in html comments
    6a. Presumed typo, html comments must start with “<!–” and end 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

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.