HTML5 shines when you add JavaScript or Jscript. You'll be able to create dynamic HTML5 web pages that are more engaging.

  • HTML5 Javascript

  • Apache Cordova Persistence Options

    The Apache Cordova Mobile Framework relies entirely on web technologies such as HTML, CSS, and JavaScript to create cross-platform mobile apps. Rob Gravelle explains how Apache Cordova's use of client-side technologies opens up a wealth of storage possibilities.

  • Display Array Data in an a Tabular Format

    Presenting information in a table is a great way to separate categories, sort elements, as well as maximize screen real estate. In today's article, Rob Gravelle shows how to dynamically transform the contents of a one-dimension array into an HTML table on both the server and client, using PHP and JavaScript respectively.

  • Understanding How HTML5 Validation Works

    In this article, we take a look at how and when the data validation process works in the with HTML5 and JavaScript, and will learn about support for validation in HTML5 powered web pages.

  • Moving Meta Boxes in the WordPress Editor

    Using a combination of Wordpress filters and action hooks, it is possible to set the number of columns on an editor screen, as well as arrange the order of meta boxes within a column. Rob Gravelle builds on the Intro to WordPress Meta Boxes article and demonstrates how to force a single column layout as well as position the meta boxes within the column.

  • Working with Inline Event Handlers

    There is a distinct possibility that you will have to deal with inline event handlers at some point. In today's article, Rob Gravelle explains how to add, modify, and remove inline event handlers using jQuery-assisted JavaScript.

  • Adding Patterns and Animations to HTML5 Progress Bars

    The addition of the Progress element to the HTML5 spec has opened a whole new avenue for providing visual feedback on long-running tasks. Rob Gravelle show how to employ advanced CSS3 properties to do things that Web developers could once only dream of.

  • Let’s Get Started Building JavaScript and HTML5 Powered Windows 8 Apps

    This article walks web developers through building HTML5 and JavaScript powered applications that can run on Windows 8, Microsoft touch oriented operating system.

  • A Roundup of Popular JavaScript Date Parsing Libraries: Moment.js

    Rob Gravelle demonstrates how to use the Moment.js library to parse dates from a string while highlighting potential gotchas with regards to GMT offsets.

  • Testing For Variable Emptiness In JavaScript

    In general terms, a variable is said to be empty when it has been declared, but not assigned a value. In most languages, that equates to having a value of null. In JavaScript, unset variables are assigned a default value of undefined. Rob Gravelle presents a few functions that test a variable for emptiness using various approaches.

  • Date Parsing using JavaScript and Regular Expressions

    Rob Gravelle describes what JavaScript's Date constructor and parse() methods look for in a date string and presents some regular expressions that can be utilized to convert a date string into a suitable format.

  • Programmatically Trigger an Application Cache Download

    Rob Gravelle shows how to dynamically kick off an Application Cache download via a user action such as a button click.

  • A Few of My Favorite Things About Chrome's JavaScript Debugger

    All of the major browsers come with built-in JavaScript debuggers, but they vary in quality. Rob Gravelle highlights some of the Chrome JavaScript Debugger features that make the Chrome browser tops in the area of page testing and debugging.

  • Handling Page Not Found Errors When Using Offline Caching

    Using a slash (/) in the Manifest files' FALLBACK section has the unfortunate side effect that typos in the URL path will cause the fallback resource to appear, instead of the 404/500 HTTP errors that should happen when online. Rob Gravelle presents one way of dealing with this issue so that the fallback resource does not come up when the user is in fact online.

  • Referencing Wordpress's Native Ajax Handler in JavaScript

    In WordPress, AJAX requests go through wp-admin/admin-ajax.php. Despite the name, you don't have to have administrator privileges to use it. Rob Gravelle describes how to add our JavaScript files to the page in such a way that we can reference the path to admin-ajax.php on the server.

  • Working with Web Workers in HTML5 Powered Web Pages

    This article walks web developers through the support for performing background tasks in HTML5 web applications.

  • Add Scripting an HTML5 Web Application Using the Maqetta Editor

    In this follow up to the Implement the Dojo DateTextBox Control In an HTML5 Web Application Using the Maqetta Editor tutorial, Rob Gravelle presents the code to calculate the years of service based on the start and end dates, as well as how to control the visual aspects of the web app, including the form layout and theme.

  • Responding to Ajax Calls Using Servlets

    In the Calling Servlets Using Ajax article, we learned how easy it is to bind an Ajax call to a Java Servlet to a button. In today's follow-up, we'll be writing the Java code, modifying the web.xml, and trying out our new Web app.

  • Detecting Browser Event Support

    With so many vendor-specific and partially supported native event types available nowadays, it helps to be able to tell which browsers supports a given event. Rob Gravelle demonstrates a few such techniques, without resorting to inconsistent browser sniffing.

  • Implement the Dojo DateTextBox Control In an HTML5 Web Application Using the Maqetta Editor

    In this follow up to the Create an HTML5 Desktop Application in the Maqetta Editor article, Rob Gravelle explains how to work with Dojo DateTextBox control properties to change the date display format as well as perform various validation checks. You'll also get better acquainted with the Palette and Property tabs of the Maqetta editor.

  • A 5 Minute Overview of All New JavaScript APIs in HTML5

    A lot has changed over the years in the HTML space in terms of supported markups. This article walks readers through all the new JavaScript APIs referenced in the HTML5 specification.

  • Introducing the Maqetta HTML5 Editor

    Maqetta is an open source initiative of the Dojo Foundation that provides WYSIWYG web development in the cloud or locally. Moreover, it supports drag & drop assembly of live UI mockups, including HTML5 components. In today's article, Rob Gravelle gives Maqetta a once-over to test its design capabilities.

  • Using the done() Method in Your Jasmine-driven Asynchronous JavaScript Tests

    Jasmine.Async is an add-on library for Jasmine that provides additional functionality to do asynchronous testing. Modeled after Mocha's async test support, it brings the done() function to the Jasmine unit testing environment. Rob Gravelle shows how the Jasmine.Async library makes your asynchronous process tests easier to write.

  • Add External JS Libraries to Eclipse JSDT-driven Projects

    In the Scripting Made Easier with the Eclipse JavaScript Development Tools (JSDT) article, Rob Gravelle demonstrated how to utilize the Eclipse JSDT plugin to enhance the development of a Static Web Project. In today's follow-up, Rob explores a couple of strategies for integrating third party JS libraries into your project, such as jQuery and qooxdoo.

  • Scripting Made Easier with the Eclipse JavaScript Development Tools (JSDT)

    The JavaScript Development Tools (JSDT) plug-in supports the development of JavaScript-powered applications as well as JavaScript within traditional web applications. In today's article, Rob Gravelle demonstrates how use the JSDT plugin to enhance the development of a static web project.

  • Test Asynchronous Methods Using the Jasmine runs() and waitFor() Methods

    In the Testing Ajax Event Handlers using Jasmine Spies article, we saw how the use of Jasmine spies for testing Asynchronous processes. In today's article, Rob Gravelle demonstrates how to use the Jasmine runs() and waitFor() methods, which were both created to test asynchronous Ajax calls where the practical implementations of the HttpXmlRequest and/or the network connection need to be included.

  • Testing Ajax Event Handlers using Jasmine Spies

    JavaScript has several methods that execute asynchronously, such as setTimeout(), Ajax calls, as well as event-driven processes. These examples all have to wait until the current execution thread comes to an end and surrenders to the next event, making asynchronous processes hard to test. Fortunately, the Jasmine JS testing library comes equipped with a couple of tools for handling callbacks.

  • JSLint Errors and Options Described

    In the A Quick Tour of Douglas Crockford's JSLint article, Rob Gravelle described a few common error messages and their solutions. Today's article will present several other coding no-nos that developers commonly perpetrate.

  • Spy on JavaScript Methods Using the Jasmine Testing Framework

    In the Testing JavaScript Using the Jasmine Framework article, we learned how to test our JavaScript code using a JavaScript enabled browser and the Jasmine Testing Framework. In this article, we're going to move on to spying on our methods using mocks.

  • Back by Popular Demand: More on JavaScript Variable Naming Conventions

    The Variable Naming Conventions in JavaScript article only scratched the surface of Variable Naming conventions in JavaScript. In this article, Rob Gravelle introduces more in-depth info on how to make your code both more readable and maintainable.

  • Accessing Private Functions in JavaScript: Nested Functions

    In the Accessing Private Functions in JavaScript article, Rob Gravelle presented a means of gaining access to an object or method's inner helper functions in order to be able to test them using a framework such as Jasmine. In today's follow up, Rob shows how to fetch nested functions using an iterative solution.

  • Some Useful JavaScript Object Creation Patterns

    Following in the footsteps of Three JavaScript Anti-Patterns and How To Avoid Them, Rob Gravelle presents some useful patterns that are specifically aimed at aiding in the creation of Objects. The specific patterns covered are the enforcing the new keyword, the Factory pattern, as well as the method borrowing technique.

  • Passing JavaScript Function Arguments by Reference

    There are two ways that a function argument, or parameter, can be passed to it: by value or by reference. In this article, Rob Gravelle shows how to pass primitive data to a function by reference. The next installment will cover passing objects by value.

  • Write a Statement Parser in JavaScript

    They say that necessity is the mother of all inventions. This article will explore my necessity to run unit tests on functionality for private larger objects in order to validate that they were error free. This is the story of my trials to create my very own reflection mechanism and hopefully, provide you with means of leveraging my findings during your own JavaScript testing in the future.  

  • Handling JavaScript Errors by Type

    There are four major error types in programming: compile errors, logic errors, input/validation errors, and runtime errors. Error catching in code is usually limited to the latter two types. Today's article will cover three JavaScript runtime error subtypes.

  • Up close and personal with HTML5 IndexedDB

    Over the years, the web has increasingly transformed from being a repository of content to a marketplace of full-fledged functional apps.  The suite of technologies that fall under the “HTML5” banner have, as a fundamental goal, the capabilities to build within this new breed of software.  In this article, I’ll review a technology that solves an important piece of the application puzzle—managing storage and retrieval of user-specific data on the client side—called “IndexedDB.”

  • Display Images in Black & White Using the HTML5 Canvas

    The HTML5 canvas is a bitmap element for rendering graphics, drawings, and images on the fly using JavaScript. The canvas 2D API contains an arsenal of functions that give you the ability to draw pretty much anything you like on the canvas and there is a lot to be said about black & white photography. It can capture images in a way that color simply can't. If you want to display images in black and white, but don't want to mess with your original color photos, then this is the ideal way to go about it. Read on!

  • Calling Parent Methods in JavaScript

    One of the big differences between Classical (Object-Oriented) and Prototypal inheritance is that the former has an elegant mechanism for referring to the parent using the super keyword. It's often used in constructors to initialize the parent class with the supplied input parameters. Another common usage is to extend parent functionality in the child class. In today's article we'll establish how to accomplish the same thing in JavaScript.

  • An Intro to Node.js

    Node.js is part runtime environment and part library for building network applications using server-side JavaScript. It uses Chrome's JavaScript runtime engine to execute JS code directly without the need for the browser sandbox. This article will explain how to use node.js in order to help you decide whether or not it's a technology that you could see yourself embracing.

  • Extending JavaScript Objects in the Classical Inheritance Style

    Many authors of JS libraries have made some attempt to emulate familiar Object-Oriented (OO) constructs such as those found in C++ and even more so in Java. The goal is not so much to make JavaScript more Object-oriented, although that is a positive side effect. Rather, it's to make JavaScript objects more palatable to developers who grew up with OO languages. This article will discuss adding extensibility to the Class constructor function.

  • Drag Files Into the Browser From the Desktop with HTML5

    HTML5 Drag & Drop lets you do basic drag & drop operations with a lot less JavaScript code. Two additional advantages to HTML5 Drag & Drop are the ability to combine it with other JavaScript utilities such as Ajax and the HTML5 FileReader and that it allows you to drag files directly from the Desktop, as in folders and Windows Explorer.

  • HTML5 and Blueimp jQuery-File-Upload Plugin Event Handling

    In this code intensive article you'll be writing event handlers to display file information, image thumbnails, and individual file progress bars.

  • Browser-specific Error Catching in JavaScript

    In this installment on error handling in JavaScript, we'll be taking a look at how to code your exception handling in JavaScript in a way that takes browser discrepancies into account.

  • Learn How To Use JavaScript Dates and Leap Years

    Think that you can calculate date intervals without worrying about leap years? Think again. It's true that, as long as you follow the guidelines set out in my previous article, the leap years will be accounted for and handled correctly. This article will introduce a few useful functions that you can use to work with leap years if and when the need arises.

  • Calculating the Difference between Two Dates in JavaScript

    I've scoured the Internet for some of the very best JavaScript date interval calculation formulas so that I may present them to you today in easy-to-use static Date functions. I hope you find them useful!

  • Introduction to HTML5 Web Workers: the JavaScript Multi-threading Approach

    HTML5 applications are obviously written using JavaScript. But compared to other kinds of development environments (like native ones), JavaScript historically suffers from an important limitation: all its execution process remains inside a unique thread.

  • Date Creation in JavaScript

    There aren't very many native date calculation functions in JavaScript other than a lot of setters and getters. From date parsing to formatting to calculations, you're pretty much on your own. In today's article we're going to examine some date basics and how to create them in JavaScript.

  • JavaScript Error Handling: Why You Need it

    While error handling is not new to JavaScript, it seems that a lot of people aren't quite sure how to handle errors in the most productive way. The purpose of this article is to outline some of the major reasons why you need to consider error handling sooner rather than later in a Web application's development cycle.

  • Move Data and DOM Elements using Drag & Drop

    The dataTransfer object is a read-only Event property that holds data about the Drag & Drop operation and allows you to send data along with a dragged element. In this tutorial we're going to learn how the dataTransfer object can be used to shuttle data and move document elements from one part of the page to another.

  • How To Use HTML5, JavaScript and PHP To Create An Image Uploader

    One of the greatest issues with web development at the moment is how images can be uploaded to a website. Can we show the progress as we upload the image to let the user know how far along we are? Of course we can--and we're going to use HTML5, JavaScript, and a bit of PHP to do it! 

  • JavaScript Object Chaining using Prototypal Inheritance

    JavaScript implements its own hierarchy model using prototypes. In today's article, we're going to learn how to use the prototype and constructor properties to trace an object's ancestry up to the base Object. Highly useful!

  • Introducing HTML 5 Web Workers: Bringing Multi-threading to JavaScript

    HTML5 is bringing us true multi-threading capability via Web Workers. These little fellas are ideal for running scripts in background threads, so that they don't interfere with the user interface (UI). In this article we'll take a look at how to put Web Workers to good use.

  • How to Create Multi-columns in CSS3 and JavaScript

    This article will show the code that it takes to create CSS3 multi-columns, like those you find in a newspaper, and it will have a bonus: you’ll be able to change the number of columns and the gap in the columns with a click of the mouse.

  • Determine an Image's Type using the JavaScript FileReader

    Thanks to the JavaScript FileReader API's slice() method, it is possible to break large files down into chunks on the client-side, before uploading data to the server and taking up precious network bandwidth. In this article we are going to learn how to use the slice() function and determine an image type by using a process called the "magic number" technique.

  • JavaScript Prototypical Inheritance Explained

    In this tutorial, we're going to learn more about prototypical inheritance and its ramifications in writing OO code. The eventual goal is to note how it differs from classical inheritance to determine whether or not the two can't meet somewhere in the middle.

  • A Peek into Local Data Storage in HTML 5

    In this article I will be explaining one of the HTML 5 features which allow the storage of data on the client side. This feature certainly paves the way for developing data-driven applications which can work with data stored on the client even if the network connection is disconnected.

  • How To Create a CSS3 and jQuery Dashboard Menu

    In today's article, we will show you how to create a dashboard menu using CSS3 and jQuery. This particular approach to designing a website menu is ingenious and borrows heavily from the dashboard menu found on Apple machines.

  • Class Member Encapsulation in JavaScript: Advanced Data Hiding Techniques

    In a recent article, we saw a couple of ways to create private class member variable. Today we'll be building on our Person class from the last article by adding a prototype interface, use a closure to create a variable scope, as well as add constructor arguments and default values.

  • Learn How To Use the JSONP Data Format With jQuery

    In this article I will explain about the hurdles in performing cross-domain service calls from the client browser and the work required to do it using jQuery JSONP calls. I will also provide a step-by-step example of implementing JSONP calls to a .NET 4.0 WCF service.

  • Read Text Files Using the JavaScript FileReader

    Things are definitely looking up for the W3C's File API, a new JavaScript API that provides limited access to the local file system in Web applications, In this article we'll learn how to use the FileReader to retrieve file properties and the contents of text files.

  • Class Member Encapsulation in JavaScript: Data Hiding

    Encapsulation is the ability of an object to be a container (or capsule) for its member properties, including variables and methods. In the first part of this article we're going to discuss JavaScript Object Properties, Object Variables and Object Notation.

  • A Modernizr Primer: Getting Started

    Modernizr is a JavaScript library that helps you add HTML5 capabilities to your web sites. HTML5 is a combination of HTML, JavaScript, and CSS3. In the first article in this primer series, we will show you how to get started using Modernizr.

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •