A horrible “HTML5” textbook

As I have said many times, I am a very technical and analytical thinker. While studying homework, programming, or writing a blog post or tutorial, I am always thinking ahead in the task and choosing the best route I need to take. I am also a man of high standards; if something does not pass my checklist, then I will not publish or partake in such. Even my own programming and writings are subject to the same scrutiny.

Write tutorials is something I enjoy very much. In my writings, I strive to give my best, clearest, and most accurate explanations and examples. Of course, giving you the best means I already need to know the best, and that requires a lot of studying, learning, and analyzing. Thus when I read a tutorial that is not the best quality around, almost out of automatic reaction I start mentality constructing the best way to explain what it is trying to explain.

When my quest for the best and poorly-written guides cross paths, things are not always going to end well. πŸ˜› Case in point: As of this writing I am enrolled in summer semester classes at college, and one of my classes in these nine weeks is basic HTML, CSS, XML, and JavaScript. Let me straight up say that this is not the best book around. I often describe this book as teaching 1990s Web with early 2000s icing with HTML5 sprinkles on top. There have been many moments I have cringed while reading the chapters and thrown into total surprise when completing the chapter works. The concepts taught, “facts” presented, errors present, and code written is absolutely atrocious. Yet three items in this book, with one in particular, that has irked me like none of the others.They have bugged me to the point I have made them the topic for today’s post. I am setting the record straight by providing correct and accurate information, and hopefully preventing others from these same mistakes and flawed thinking.

For a short bit of background, the textbook in scrutiny is HTML5 and CSS: Comprehensive, 7th Edition. This particular edition was copyrighted in 2013, so it would have been published that same year or very late 2012. One may think books this new with this many editions should not exhibit the following issues plus more, yet this one does.

Are you scared enough about what could possibly be wrong? If not (and even if you are), read on, and prepared to be scared to even more. 😈

Issue #1 – IE and linked images

Recently I wrote about a sometimes significant Internet Explorer bug, and I had hoped I was through with that topic for a while. I was wrong, and I wish I was not wrong.

It is a known fact: when a linked image (<a><img /></a>) is used on a site, which happens quite often, Internet Explorer 10 and older will render a border of the color of the link around the image. Internet Explorer 11 and all other browsers do not exhibit this bug, and even Microsoft acknowledges this Fact of IE Life in one of their blogs (“Borders around hyperlinked images” header). The following image may help explain this more clearly.

awdd-6-26-14-linked-image

However, that post seems to take the “It’s a feature, not a bug” route while I consider it a bug (and it seems internally MS did too, as IE 11 now complies in this area). The fix is not all that hard, just a bit annoying.

a img { border: none; }

If you would rather apply the fix to the link itself, you would use

#my-linked-image { color: transparent; }

although this link has unwanted side effects if the link is composed of an image and text (I will let you guess what it is πŸ˜‰ ).

So what about this common annoyance has ruffled my feather, and how on earth does it relate to a seemingly bad textbook? Easy. Just demonstrate it as part of a lesson without explaining how to disable it until the next chapter, then stating the only reason you would ever want to fix this is so “no border will display around any images.” Now, you are probably thinking to yourself:

le717, you are making no sense. This is simply a part of support excuses made in old Internet Explorer version. Why do you even bring it up?

My point here is not about this IE bug, but how this textbook has treated it. Any reputable book teaching the basics of website creation would treat matter how it really is as part of stressing the importance of cross-browser testing. This college textbook, in every chapter, has a reminder to perform cross-browser and W3C validation checks (the latter mentioned much more often), but all the tests and checks in the world does nothing if the is taught incorrectly to begin with. This book’s seeming demographic is toward students who have no background or experience in website design and development. While authors and teachers must take that into consideration when writing material, they also have a responsibility to present the information accurately and not so watered down that there is no consideration that what is being presented might just be an actual bug rather than a feature. This textbook has fully skirted this responsibility, and that is what irks me here.

Things are about to get a lot worse from here on out. Prepare yourself.

Issue #2 – “Hiding” CSS and JavaScript

If there was a bad practice in this book I had to single out, it would be leaving the semicolons off the end… of your JavaScript… statements… but the second bad practice would be wrapping your CSS and JavaScript with HTML comments then placing it in the respective <style> and <script> elements, as seen here:

This practice was only done back in the Netscape Navigator 2 era (released in 1995) for pre-HTML 3.2 (1997) browsers that did not recognize the <style> element[1]:

CSS also allows the SGML comment delimiters (“<!- -” and “- ->”) in certain places defined by the grammar, but they do not delimit CSS comments. They are permitted so that style rules appearing in an HTML source document (in the STYLE element) may be hidden from pre-HTML 3.2 user agents.
(CSS2 – 4.1.9 Comments)

Some style sheet languages support syntax intended to allow authors to hide the content of STYLE elements from nonconforming user agents.

This example illustrates for CSS how to comment out the content of STYLE elements to ensure that older, nonconforming user agents will not render them as text.

<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue }
-->
</STYLE>

(HTML 4 – 14.5 Hiding style data from user agents)

Every time this textbook directs the reader to write CSS/JS using a style/script element, it further instructs to write within an HTML comment, with neither reason nor background about it given. It just says “do it”. I’ve also seen WYSIWYG website editors do this. While the latter is somewhat forgivable unless released in the last 2-3 years (older ones do not “know better”; that is how it was programmed it and cannot be changed), writing new code like this in 2014 is completely unacceptable.

While admittedly half-decent and required in the 90s Web, surrounding your CSS/JS with HTML comments is an archaic practice and no longer applies to any browser. You could not even browse the Web on your laptop, phone, or tablet if the <style> or <script> elements were not supported! In that light, eliminate from any code you have all HTML comments within those elements. Having them makes no sense on the modern Web, just as supporting Internet Explorer 6 no longer makes any sense.

For a more textual example, consult the following Gist, which shows the wrong and right way to write CSS in a <style> tag.

Issue #3 – Sloppy, poorly conceived assignments

Homework assignments are arguably where the student learns and retains the most material, as they get to actually write the markup and code rather than just read or hear about it. Homework is thus a delicate area that must be done right. Messing this area up could mean the difference of passing or failing an important test.

Later on in the textbook, students are introduced to JavaScript, and swiftly proceed to write a countdown timer for a fictional event called the Midwest Bridal Expo, to be held on February 12, 2014, with the number of days displayed on the homepage. After performing the bad HTML comment practice as explained in the previous section, the follow code, plus more not shown here, would be written. Let me show the code for you to look over, and afterward we will discuss the errors.

There are so many errors in this I have no clue where to begin.

  • Missing highly recommended "use strict"; directive
  • No EOL (End of Line) semicolons
  • Uninitialized variables (the ones with missing var keywords)
  • Multiple hardcoded years
  • No spaces around any plus or multiplication signs (this is a subjective styling practice)
  • Does not produce proper date format (should be Date, Month Day, Year; is really M/DD/YYYY, YYYY)
  • Is a negative countdown (-134 days as of this writing)

I should point out the code does not output the message like that. It actually uses innerHTML to inject the paragraphed-wrapped message into another element, but I made it output to the console in case you wanted to run it. πŸ˜‰

The biggest issues here are

  1. The improper date format, caused by IE 10’s different implementation of toLocaleString()
  2. Hardcoded year value
  3. Negative value for “days until”

When writing tutorials or lesson plans that involve dates, it is never permissible unless absolutely necessary to hardcode a date, especially a year. They address this excuse for hardcoding in the text by stating it will display a negative countdown, with no more said on the matter. Did they think nobody would be using this early 2013 publication such a long time later in 2014 because they thought an 8th edition would be published by 12 February, 2014? If they knew students would be using it after 11 February,  2014, and I am sure they did, why not even add a one to the year to keep the date always in the future? The improper date format could be overlooked by some, but when you consider there are ways to get a consistent date format from multiple browsers, overlooking it is impossible.

If the writers thought the homework would be “too complicated” for the target students so they dumbed it down to a lazy, poorly constructed assignment, my, how sorely mistaken they were! By the time students reach this section, they will have completed homework much more complicated than this! This exact same homework assignment can be completed much more cleanly and uniformly across browsers.

See how much better that is? There are absolutely no excuses to be made here.


In this age of the Internet, it is vital to be up-to-date when teaching anything technology related, especially Web design and development. Sure, text books are limited to the information available when they were published, but claiming this 7th edition was updated and revised with new information, then proceeding to teach such outdated information, provide bad examples and lazy excuses, and have even more strikes on it I have not mentioned here does not make sense, even more when at anytime the most up-to-date information is a search engine away. As much experience and trust the Shelly Cashman Series supposedly has in teaching technology, they can perform much better than this, one line of HTML, CSS, and JavaScript at a time.

-le717

Advertisements

Triangular Reactions

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s