Error in HTML5 Programming with JavaScript for Dummies

A reader recently wrote to tell me of an error on Page 118 of HTML5 Programming with JavaScript for Dummies. The problem appears in the source code for the SearchString.HTML example. As written, the code will currently work in most cases, except if you type This as the input value. The problem is this bit of code:

if (Result == 0)
{
   document.getElementById("Result").innerHTML =
   "You must provide an input value!";
}

The value of Result can equal 0 in a number of situations, but the problem is that one of those situations, typing This as the search term, is actually a correct input. In order to fix this problem, you must change the comparison condition to look at the text input, rather than the result of the search. The following code works as anticipated.

if (FindValue == "")
{
   document.getElementById("Result").innerHTML =
   "You must provide an input value!";
}

As always, I want to hear about any problems you experience using my books. Please contact me at [email protected] if you encounter any other problems with this example or have questions about the change in comparisons.

 

Adjusting to Web Development

Web applications require a different mindset than the desktop applications of old. Two of my books, HTML5 Programming with JavaScript for Dummies and CSS3 for Dummies, provide techniques for focusing on content, rather than application structure. However, both books contain this information across a number of chapters and some readers might like something a bit more succinct. I recently wrote A Short Guide for Desktop Developers Making the Transition to Web Applications with this need in mind. In a single article you can find the essential information needed to create better sites. The crux of the problem is that a desktop application resides on a device with known capabilities-a Web-based application can run on any device and you won’t necessarily know what that device is at any point during application execution.

The new focus in application design is flexible content. You make the content fit whatever device requires it. The reason that many Web-based applications currently fail is not that they’re poorly coded, but rather that they’re designed for the wrong environment. To ensure applications are designed for the right environment, some businesses may use Jackrabbit Mobile and other companies alike. It’s often for businesses to bring experts on board to make sure everything is done correctly, rather than having inexperienced developers working on their products and not having things working how they would like. You see many examples of desktop-like applications on the Internet today. These applications don’t work because the developer has become fixated on creating a neat appearance for the content based on the desktop environment, rather than designing a flexible environment in which to present the content. The environment can’t assume anything because the user device could be anything. This is why understanding how Web Development works is so important.

Although my article will provide you with a great overview and provides you with the essentials you need to create a phenomenal Web-based application, you’ll still want to visit other resources and websites, and review my books as well. It’s in the books where you see the details of using a particular technology to create your application. The books also provide details that an article simply can’t provide. Of course, this additional information includes specific coding examples so you can see examples of how to implement a good design. So, start with the article. If you find what you need in it, turn to the books for the additional details.

Designing for the web requires a different mindset. There are no doubts about it, if you want to stand out from the competition, then your website needs to be professional and eye catching and you need to be producing high quality content on a regular basis. Designing websites is not always easy though. I was speaking to a friend of mine about this just the other day. She lives in Australia and is in the process of launching a website for her small business. My friend has decided that some things are definitely best left to the experts and so she has decided to work with one of the best web designers melbourne has to offer to get her new website launched. She has a great eye for detail so I cannot wait to see how it all comes together and I am sure that her website is going to be incredibly well designed.

Ultimately, there is a lot to think about when designing for the web. Moreover, new device types require different design strategies. What are the biggest problems you face when making the transition from the desktop environment to the Web? Let me know at [email protected].

HTML5 and CSS3 Bugs in iOS 7

Several readers have written to ask about an article that appeared in InfoWorld entitled, “Bad news: iOS 7’s HTML5 is full of bugs.” In reading about the bugs, it doesn’t appear that any of them will affect the examples found in either HTML5 Programming with JavaScript for Dummies or CSS3 for Dummies. Unfortunately, I don’t personally own a copy of iOS 7 to perform any testing to verify that there aren’t any problems. A helpful reader did test a few examples for me and didn’t report any errors. If you find that you’re having problems with any of the examples in either book, please let me know at [email protected].

This issue does serve to point out a problem that I’ve encountered more than a few times in supporting my books. A vendor can release a faulty version of a library, operating system, or other support software required for my books and it will appear that the examples are buggy to the reader. If you read about these sorts of issues, please let me know about them so that I can test the book examples and report back to you here.

 

Continuing Education

I don’t know if you’ve noticed, but I’m continually asking questions in my blog posts. In fact, you can find questions in a few of my books and more than a few readers have commented when I ask them questions as part of my correspondence with them. I often get the feeling that people think I should know everything simply because I write books of various sorts. In fact, I had to write a post not long ago entitled No, I Don’t Know Everything to address the issue. Experts become experts by asking questions and finding the answers. They remain experts by asking yet more questions and finding yet more answers. Often, these answers come from the strangest sources, which means that true experts look in every nook and cranny for answers that could easily elude someone else. Good authors snoop more than even the typical expert—yes, we’re just plain nosy. So, here I am today asking still more questions.

This year my continuing education has involved working with the latest version of the Entity Framework. The results of some of my efforts can be found in Microsoft ADO.NET Entity Framework Step by Step. You can also find some of my thoughts in the Entity Framework Development Step-by-Step category. I’ve been using some of my new found knowledge to build some applications for personal use. They may eventually appear as part of a book or on this blog (or I might simply choose to keep them to myself).

However, my main technical focus has been on browser-based application technology. I think the use of browser-based application technology will make it possible for the next revolution in computing to occur. It certainly makes it easier for a developer to create applications that run anywhere and on any device. You can find some of what I have learned in two new books HTML5 Programming with JavaScript for Dummies and CSS3 for Dummies. Of course, there are blog categories for these two books as well: HTML5 Programming with JavaScript for Dummies and Developing with CSS3 for Dummies. A current learning focus is on the SCAlable LAnguage (SCALA), which is a functional language (akin to F# and many other languages of the same type) based on Java.

Anyone who knows me very well realizes that my life doesn’t center on technology. I have a great number of other interests. When it comes to being outdoors, I’ve explored a number of new techniques this year as I planted some new trees. In fact, I’ll eventually share a technique I learned for removing small tree stumps. I needed a method for removing stumps of older fruit trees in order to plant new trees in the same location.

I’ve also shared a number of building projects with you, including the shelving in our larder and a special type of dolly you can use for moving chicken tractors safely. Self-sufficiency often involves building your own tools. In some cases, a suitable tool doesn’t exist, but more often the problem is one of cost. Buying a tool from the store or having someone else build it for you might be too expensive.

The point I’m trying to make is that life should be a continual learning process. There isn’t any way that you can learn everything there is to learn. Even the most active mind picks and chooses from the vast array of available learning materials. No matter what your interests might be, I encourage you to continue learning—to continue building your arsenal of knowledge. Let me know your thoughts on the learning process at [email protected].

 

Death of the Heading Group (hgroup) Tag

In the “Working with the new elements” section of Chapter 14 of HTML5 Programming with JavaScript For Dummies I briefly mention the <hgroup> tag. The purpose of this tag is good enough; it lets you group content together to form a heading from multiple elements. I had noted during my research that the tag is supported by a number of browsers but no one seems very enthusiastic about it. In fact, the tag is now dead and you should avoid using it.

Fortunately, there are some methods to work around the support the <hgroup> tag. The main workaround is to use the <header> tag instead. In fact, the presence of the <header> tag makes me wonder why anyone thought the <hgroup> tag was needed in the first place. In order to group elements using the <header> tag, you simply place them inside the tag like this:

<header>
   <h1>Section Title</h1>
   <p>Last Modified:
      <time datetime="2013-07-31">31 March 2013</time>
   </p>
</header>

In this case, you see a section title that also provides a date of last modification. The two items are obviously related (even though you may want to format them differently), so you want to group them on the page. Creating a group will help users interact with the page more easily and also reduce the work required to render the page for those with special needs. The <header> tag performs this task quite easily. You can then use CSS to format the information in any way needed so the viewer can easily distinguish the various kind so information.

The bottom line is that the <hgroup> tag is gone and you should forget it even appears in my book. Let me know your thoughts out repetitive or unneeded tags at [email protected]. You should also contact me if you have any questions about using the <header> tag.

 

The Role of APIs in Application Development

More people are coming to understand that the PC will constitute just one of several devices that users will rely upon to perform daily computing tasks in the future. Articles such as, “Life in the Post-PC Era” are appearing more and more often because the trend is clear. However, unlike many people, I don’t see the PC going away completely. There really are situations where you need to size and comfort of a larger system. I can’t imagine myself trying to write an entire book on a tablet. If I did, the resulting Repetitive Stress Injury (RSI) would be my own fault. However, the higher reliability and slow rate of technological change also means that my systems will last longer and I won’t be buying them as often. In other words, I’ll continue to use my PC every day, but people won’t be making as much money off of me as I do it. This said, a tablet will figure into my future in performing research and reading technical materials that I would have used a PC to accomplish in the past.

The nature of computing today means that any application you write will need to work on multiple platforms. Users won’t want a unique application for each platform used. Unfortunately, new platforms arrive relatively fast today, so developers of most applications need some method of keeping their applications relevant and useful. Web-based applications are perfect for this use. These applications are the reason I chose to write CSS3 for Dummies and HTML5 Programming with JavaScript For Dummies. These books represent the future of common applications-those used by users every day to perform the mundane tasks of living and business.

When reading these two books, you’ll find a strong emphasis on not reinventing the wheel. In fact, a lot of developers are now finding that their work is greatly simplified when they rely on third party Application Programming Interfaces (APIs) to perform at least some of their work. The stronger emphasis on APIs hasn’t gone unnoticed by the media either. Articles such as, “How the API Movement is Transforming the Telecom Industry” describe how APIs have become central to creating applications for specific industries. In fact, you’ll find targeted articles for API use all over the Internet because APIs have become a really big deal.

Now, at this point, I’m sure many of you will be asking what is an api? I would recommend those of you who aren’t sure do some research to learn more about them, as they are only becoming more and more important. I plan to write quite a lot more about APIs because I see them as a way of standardizing application developing, creating more reliable applications, and reducing developer effort in creating the mundane parts of an application. What will eventually happen is that developers will become more creative and APIs will put the art back into the science of creating applications. However, I’d like your input too. What do you see as the role of APIs in the future? What questions do you have about them? Let me know at [email protected].

 

Sometimes Newer Really Isn’t Better

I normally spend a good deal of time telling readers to use the latest versions of libraries because the newer versions will have additional functionality and contain bug fixes for issues that have surfaced since the library was released. There are some situations where this tactic doesn’t work and one of them appears in Chapter 2 of HTML5 Programming with JavaScript For Dummies. The example originally displayed information about the host browser, but the property used to perform that task, browser, has been deprecated in jQuery 1.9.

The easiest way to fix this problem is to use a version of jQuery that does support this property. The change is relatively small. All you need to do is change the line that reads

to read

The change will force the application to use an older version of the jQuery library. As an alternative, you can also add a call to the jQuery migrate library so that the code looks like this:

<head>
   <title>Detect a Browser</title>
   <script
   </script>
   <script
   </script>
</head>

The jQuery site recommends using feature detection instead. Although this feature is directly supported in the latest version of jQuery, there are problems with it as well. The most important issue to consider is that the site tells you outright that the library might have certain features pulled without notice or with a long deprecation cycle, which means that you code could simply stop working at some point. It’s a poor way to detect the kind of browser that you’re using because it’s unreliable. The technique shown in Chapter 2 of the book is far more reliable at the moment.

The point of this post is that there aren’t any absolutes when it comes to coding practice. You need to know when to break the rules. Let me know if you encounter any difficulties with my solution to the problem at [email protected]. If someone has a better jQuery-oriented solution to share, contact me because I’d love to hear about it.

 

Working with the HTML5 Canvas

HTML5 has a considerable number of new features to offer. In fact, I discuss many of the new tags that HTML5 has to offer on page 228 of HTML5 Programming with JavaScript For Dummies. In fact, my book demonstrates a number of these tags as part of showing you how to use JavaScript to create applications that run anywhere and on most devices that support HTML5.

One of the more amazing (and least talked about) features of HTML5 is the concept of a canvas that you can draw on, much as an artist uses a canvas to create interesting pictures. I encountered an article about the HTML5 canvas the other day entitled, “All About HTML5 <canvas>” by Molly Holzschlag. In this article you get a great general overview of precisely what a canvas can do for you. I think you’ll find it quite useful, especially if your artistic skills are at the same level as mine are (nearly non-existent). The <canvas> tag makes it possible to create useful graphics in a way that most developers can understand quite easily.

This is one tag that I wish I had explored more fully in my book, but picking topics carefully is part of being a good author. Instead of providing an overview like the one that Molly provided, I chose to include a more specific example that also employs the Google API. My Working with Data Using Maps post describes just one method of working with the Google APIs. Chapters 18 and 20 both discuss methods of working with the Google API and the example in Chapter 20 combines the Google API with the <canvas> to create an interesting example.

If you’re working with HTML5 for the first time, make sure you spend time working with the <canvas> tag. It makes data presentation considerably easier, even if you lack artistic skills. Let me know about the projects you’ve created using the <canvas> tag at [email protected].

 

More Goodies for HTML Programming with Javascript For Dummies

During the last few weeks I’ve mentioned some of the extras you can get for HTML5 Programming with JavaScript For Dummies. There are even more goodies and you can access them through the Extras page. All new Dummies books will likely include this special page where you can obtain access to the Cheat Sheet and a number of other items that will vary by book. Of course, I’ve already told you about the article on using tooltips to make your pages more accessible.

While I wrote this book, I tried to avoid too many specific references to particular products. My goal was to provide a book that anyone could use on the Mac, Linux, or Windows platforms without modification. The examples were designed to work with just about any major browser; although, I did focus on Chrome, Firefox, and Internet Explorer during testing. Even though I did follow these guideline rigorously while writing, I also used some specific tools to write my code. You can read about one of these tools in the article entitled, How to Create a New JavaScript File in Komodo Edit. Make sure you let me know whether you’d like to see more articles on this exciting editor. I’ll post them along with the other blog posts for this book.

If you have already performed some programming with JavaScript, you know that the prototype can be particularly difficult to understand. In fact, while researching this book, I noted an inordinate number of questions about this particular JavaScript element. The book does address the prototype property to some degree, but you may want a little more information. I provide it as part of the article entitled, How to Use the JavaScript Prototype Property.

Some developers make working with CSS mysterious and difficult. Fortunately, there is a way to make things simple. No, you won’t use every feature that CSS has to offer using my technique, but you’ll get an excellent start on organizing information on your site. The article entitled, How to Create Cascading Style Sheets (CSS) Simply and Easily, describes this technique in detail.

A final article for the Extras page considers the idea that many people learn by viewing what other people have done. Mimicking the actions of others is an excellent way to learn. That’s why I created Ten Really Cool Sites You Can Emulate. This is a simple list of ten sites you can use to learn by seeing what other people have done for their sites. I chose each site in the list for a specific reason and the article tells you why.

The Extras page is a good way to discover whether you’ll like my book and whether my style of writing suits your needs. I encourage you to check out the Extras page, along with the extensive list of blog posts you find here. Of course, I’m always happy to answer your questions. If you find that you need additional information before buying my book or after you start reading it, please be sure to contact me at [email protected].

 

Using Tooltips on a Web Page

Some developers focus on functionality, rather the usability, when designing their Web pages. The tradeoff is usually a bad one because users favor usability—they want things simple. One of the issues that I find most annoying on some sites is the lack of tooltips—little balloons that pop up and give you more information about a particular item. Adding tooltips requires little extra time, yet provides several important benefits to the end user:

  • Less experienced users obtain useful information for performing tasks such as filling out a form.
  • More experienced users obtain additional information about a given topic or the endpoint of a link.
  • Special needs users gain additional information required to make their screen readers functional.
  • Developers are reminded precisely why an object is included on the page in the first place.

In short, there are several good reasons to include tooltips. The only reason not to include them is that you feel they take too much time to add. One of the added articles for HTML5 Programming with JavaScript For Dummies is entitled, “How to Create Friendlier Pages Using Tooltips.” This free extra for your book tells you precisely how to add tooltips (it demonstrates two methods, in fact) and shows how they appear on screen. The article is provided to help you obtain a better understanding of what my book is about and also helps you discover whether you like my writing style and manner of presenting information.

If you already have my book and find that you want additional information on making your site more accessible so that everyone can use it, check out another one of my books, Accessibility for Everybody: Understanding the Section 508 Accessibility Requirements. This book contains all of the information you’ll ever need to address every accessibility issue for any kind of application you want to create.

Accessibility is becoming more and more of a concern as the world’s population ages. In fact, everyone will eventually need some type of accessibility assistance if they live long enough. If you’re a developer, adding something as simple as tooltips to your pages can make them significantly easier to use. Users should request the addition of accessibility aids when sites lack them (and vote with their pocketbook when site owners refuse to add them). Let me know your thoughts about accessibility in general and tooltips in specific at [email protected].