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.

 

Scoring Your JavaScript Library

Choosing a library for your Web application can be difficult. Both HTML5 Programming with JavaScript for Dummies and CSS3 for Dummies emphasize the need to choose libraries with care. There are all sorts of considerations, such as whether the library enjoys popular support and has a good upgrade policy. You also need to know whether the library is secure and performs all the tasks you require of it in the manner you want them performed. These books do a great job of helping you understand the requirements for choosing a library.

At the time I wrote these books, jQuery was the most popular library available. In fact, both books emphasize use of jQuery for programming needs. It turns out that jQuery is still the most popular library around and for good reason, the producers of jQuery have done just about everything right, so developers continue to support them. If you need general interface and low level programming support, jQuery and jQuery UI are good places to start. What it really comes down to is reducing costs and getting work done faster. Money drives everything on the Internet, including your next project.

Two libraries simply can’t meet every need. Developers often use a wide variety of libraries to get the job done. Choosing the right library can be difficult. There are literally hundreds of them, all purporting to do the job faster, better, and for less money (when money is directly involved in the equation). Choosing the wrong library can incur huge penalties. That’s why a site such as Libscore is so important. You can use Libscore to find the top:

  • JavaScript Library
  • Script
  • Site Using JavaScript

The last option is the most important because it tells you what the top sites are and which libraries they use to achieve their goals. By viewing the site and seeing how it uses a library, you can make intelligent decisions for your own site. Exploring Libscore doesn’t take long, but can net you huge gains in productivity that translate into reduced costs and fewer errors.

I receive more than a few e-mails each week about JavaScript, HTML5, and CSS3. Readers really do want to know my opinion about this library or that. Unfortunately, my ability to test every library out there is limited. In fact, let’s be practical—even if I were to attempt to perform the task full time, I still wouldn’t have time as an individual to test all the options. So, using a site such as Libscore is the best option that I can offer you. I’d love to hear your opinions about Libscore or any other site offering the same functionality at [email protected]. If you send me information about another library scoring site, please make sure it actually works with JavaScript or another viable Web technology.

 

Considering Perception in User Interface Design

I read a couple of articles recently that reminded me of a user interface design discussion I once had with a friend of mine. First, let’s discuss the articles. The first, New Record for Human Brain: Fastest Time to See an Image, says that humans can actually see something in as little as 13 ms. That short time frame provides the information the brain needs to target a point of visual focus. This article leads into the second, ‘Sixth Sense’ Can Be Explained by Science. In this case, the author explains how the sixth sense that many people relate as being supernatural in origin is actually explainable through scientific means. The brain detects a change-probably as a result of that 13 ms view-and informs the rest of the mind about it. However, the change hasn’t been targeted for closer inspection, so the viewer can’t articulate the change. In short, you know the change is there, but you can’t say what has actually changed.

So, you might wonder what this has to do with site design. It turns out that you can use these facts to help focus user attention on specific locations on your site. Now, I’m not talking here about the use of subliminal perception, which is clearly illegal in many locations. Rather, it’s possible to do as a friend suggested in designing a site and change a small, but noticeable, element each time a page is reloaded. Of course, you need not reload the entire page. Technologies such as Asynchronous JavaScript And XML (AJAX) make it possible to reload just a single element as needed. (Of course, changing a single element in a desktop application is incredibly easy because nothing special is needed to do it.) The point of making this change is to cause the viewer to look harder at the element you most want them to focus on. It’s just another method for ensuring that the right area of a page or other user interface element gets viewed.

However, the articles also make for interesting thoughts about the whole issue of user interface design. Presentation is an important part of design. Your application must use good design principles to attract attention. However, these articles also present the idea of time as a factor in designing the user interface. For example, the order in which application elements load is important because the brain can perceive the difference. You might not consciously register that element A loaded some number of milliseconds sooner than element B, but subconsciously, element A attracts more attention because it registered first and your brain targeted it first. This essentially explains the difference between UX and UI, since the two are eternally intermingled in the world of development.

As science continues to probe the depths of perception, it helps developers come up with more effective ways in which to present information in a way that enhances the user experience and the benefit of any given application to the user. However, in order to make any user interface change effective, you must apply it consistently across the entire application and ensure that the technique isn’t used to an extreme. Choosing just one element per display (whether a page, window, or dialog box) to change is important. Otherwise, the effectiveness of the technique is diluted and the user might not notice it at all.

What is your take on the use of perception as a means of controlling the user interface? Do you feel that subtle techniques like the ones described in this post are helpful? Let me know your thoughts at [email protected].

 

JavaScript Updates in the Offing

Readers of both HTML5 Programming with JavaScript for Dummies and CSS3 for Dummies need to know about updates in JavaScript because both books rely on JavaScript to demonstrate programming concepts. The current version of JavaScript works exceptionally well for Web-based applications. You see such applications all the time. In fact, many people now use more Web-based applications than desktop applications to perform their work. For example, I’m using a Web-based application to create this post. I also envision a day when I won’t use Word to write my books any longer and will instead rely on a Web-based application to perform the task. However, the current version of JavaScript could use some improvements to make it easier to use and more bulletproof as well.

There are currently discussions for both JavaScript 6 and 7. (In fact, you can find some early discussions for JavaScript 8 as well.) The discussions are taking place in parallel to ensure that JavaScript 6 coordinates well with JavaScript 7 and to allow one version to naturally flow into the next. JavaScript 6 should appear by the end of next year (2014). Given the complexity of language upgrades, however, it wouldn’t surprise me if there were a delay or two. It’s important to get the changes right and obtaining consensus on the changes is going to be difficult because of the complexity of the changes.

With this in mind, I’ll probably ignore JavaScript 7 for right now and focus my attention on the JavaScript 6 changes. Obviously, if someone wants to talk about JavaScript 7 (or even version 8), I’m all ears. I always want to hear your viewpoint on looming upgrades. However, the focus for me now is on using JavaScript 6 to make the coding examples in my books better.

The big news for JavaScript 6 as far as I’m concerned is the implementation of modules. Using modules will make it a lot easier for developers to share code. The specification contains a good deal more than modules, but the feature most developers are focusing on is the use of modules for sharing code in ways that the current use of APIs and other code sharing techniques won’t address. In fact, the essential goals for modules are:

 


  • Get rid of the need for global variables
  • Make it possible to refactor global code as modular code
  • Reduce the effort required to use JavaScript module systems
  • Speed compilation
  • Simplify JavaScript applications
  • Improve JavaScript usability
  • Define a standard protocol for creating and using libraries
  • Make browser and non-browser environments more compatible
  • Reduce the work required to load external modules asynchronously


Some of these goals are pretty hard to understand right now and a few of them are only in the discussion stage. However, some browser vendors, such as Mozilla, are already discussing how JavaScript will work in their applications. It won’t be long and you’ll want to start thinking about the functionality that JavaScript 6 could add to your applications, even if you don’t implement this functionality immediately.

I’m convinced that the future of development lies with environments that allow you to create one application that runs everywhere. No, desktop applications won’t go away for quite some time (or possibly ever), but if you want to be involved in the technology that will dictate future application requirements, then you need to start considering releases such as JavaScript 6. Let me know your thoughts on this upgrade. I’d also love to hear your questions about it at [email protected]. I’ll use any really good ideas/questions for future blog posts.

 

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

 

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