Get motion on your Web pages without using an applet

  • JavaScript

  • The Advantages of Backwards Iteration as Demonstrated in JavaScript

    There have been many of exchanges between JS developers on the efficacy of backwards looping versus the usual forward kind. The purpose of this tutorial is not to put every loop type to the test. Rather, Rob Gravelle describes what kind of scenario might logically benefit from backwards iteration and how to recognize such a situation should you come across one in the future.

  • Developing Web Apps with EmberJS

    Several commercial and open source Web frameworks have emerged based on the MVC pattern. One of the more ubiquitous frameworks is called Ember. Rob Gravelle explains what distinguishes a framework from a library, as well as how to get up-and-running with Ember.

  • Create a Dynamic Form in WordPress

    WordPress appeals both to the novice and expert developer, allowing him or her to create anything from simple static sites to large-scale eCommerce systems. Rob Gravelle describes how to construct a dynamic Import form in WordPress using jQuery.

  • AngularJS Component Frameworks: Introducing PrimeNG

    Learn how to create a simple "Hello HTMLGoodies" example using AngularJS 2 and PrimeNG UI components.

  • Tips for Improving JavaScript Performance

    Take advantage of the best practices and tips that can be adopted to improve JavaScript performance to help you build applications that are fast, responsive and can scale.

  • Making the Most of Components with Angular 2

    Understand Angular's support for a component-based architecture and how to leverage it in your applications.

  • 6 Things to Consider When Using jQuery with WordPress

    Get some tips on how to get the most out of using jQuery and WordPress together to build a great site.

  • Getting Started with ReactJS

    Take advantage of ReactJS, a declarative, efficient, and flexible JavaScript library for building composable user interfaces.

  • Create Custom CSS Selectors in jQuery

    jQuery's fully extendable pseudo-class selectors are considered to be one of its best features. Rob Gravelle shows us how to assign functions to the expr[':'] object to create our own custom selectors.

  • Implementing an HTTP Web Server in Node.js

    Take advantage of Node.js, an open source JavaScript environment, to build a minimalistic web server with ease.

  • Add Simple Search to Your Site with Quicksearch and Bootstrap

    Explore how to use Quicksearch, a plugin developed on top of the jQuery library, that allows querying functionalities in lists, tables, among other HTML elements.

  • Get an Element's Applied Styles

    Learn how to use Erhan Karakaya's MeJsX JavaScript Extension Functions library to retrieve an element's applied styles as defined in a variety of CSS rules.

  • Updating HTML Table Content Using JavaScript

    Query's outstanding DOM manipulation functions greatly simplifies working with HTML tables. Rob Gravelle explains how to get, set, and update a cell's content on the fly.

  • Take Advantage of New Features in AngularJS 2

    Take advantage of the updates in Angular 2 to build applications that are fast, responsive and can run seamlessly on Web and mobile browsers alike.

  • Best Practices for Combining JavaScript with HTML

    Discover some best practices for combining JavaScript with HTML

  • How to Create a Simple Notes Application with Vue.js

    Learn to develop a simple, yet fully functional, notes app, to showcase what Vue.js can do.

  • The Many Uses of the Bootstrap 3 Modal

    Rob Gravelle presents more uses for Modals, specifically a timed alert and video player.

  • JavaScript Framework Fundamentals

    Gain some insight into JavaScript frameworks and when to use them — or not.

  • Respond to Media Queries with the matchMedia API

    The matchMedia API provides an easy way to react to CSS @media queries using the exact same CSS expressions, Rob Gravelle shows us how to use it to create responsive content.

  • Implementing the Singleton Design Pattern in JavaScript

    Take advantage of the singleton design pattern to create and use one and only one instance of a class throughout the application's life-cycle

  • Gaming and the Web

    Explore this overview of gaming and the web and take a look at best practices, hardware requirements, necessary Internet bandwidth, and more.

  • Display Relevant MomentJS Date Validation Messages

    Learn how to use the Moment.js library's isValid() and parsingFlags() date validation methods to present contextualized validation information.

  • Customizing JsRender Output Using Helper and Converter Functions

    Learn how to take advantage of two JsRender features for processing data values, namely converter and helper functions.

  • Customizing Bootstrap Modals

    Explore how to customize Bootstrap Modals to position them, as well as change their appearance in a number of ways.

  • Learn JavaScript the OOP Way

    Take advantage of OOP to write JavaScript code that is maintainable, extendable and reusable.

  • JavaScript Function Arguments ES6 Style!

    In the ECMAScript 6 (ES6) spec, function arguments were enhanced with default values, rest parameters, and the spread operator. Rob Gravelle describes each of the new features and presents examples that illustrate their usage.

  • 10 Best JavaScript Data Grid Libraries

    Here are the top 10 JavaScript data grid libraries that will help you out support your customization endeavors. Let's learn more about them.

  • Date Validation Using Moment.js

    Since the HTML5 date type is still not widely supported by browsers, many site owners choose to accept dates via text input--a decision that places extra burden on date validation. Learn how to use Moment.js's constructor and date validation methods to ensure that user-input dates are legal and valid.

  • JavaScript Frameworks that will Rule 2017

    Without a doubt, 2017 is poised to be another year of exponential growth for JavaScript, along with its frameworks and libraries.

  • Working with Cropper.js Previews

    The fengyuanchen Cropper.js library can provide a preview of the cropped image, thus providing real-time updates of the cropping container area. Learn how to modify a preview's size using a combination of CSS and JavaScript.

  • Display JSON Data Using the JsRender Template Engine

    In the JavaScript Template Engines article, we learned how Template Engines help us separate HTML from JavaScript. In this tutorial, Rob Gravelle shows us how to insert a JSON array of names into our HTML document using only three lines of JS code.

  • Using JavaScript Task Runners

    Prepping your front-end Web files for deployment using a JavaScript Task Runner is a good practice to follow. Rob Gravelle presents an overview of how Task Runners work and provides some examples of the most popular choices right now.

  • Intro to JavaScript Template Engines

    Remember back in classic ASP how you were able to insert server data into the page using special <%= %> tags? JavaScript has gotten to the point now where it is capable of utilizing the same technique, using one of the many outstanding JavaScript templating libraries. Rob Gravelle explains how these libraries work and provides some code examples.

  • An Introduction to JavaScript Package Managers

    Java developers are no strangers to build tools such as Maven, Gradle, and Ant. As HTML5 web apps gain traction, so too has developers' need for similar tools in the realm of web development. Rob Gravelle explores one category build tools called Package Managers.

  • Top JS Libraries

    Once upon a time, there were a number of popular JavaScript libraries for accomplishing common JavaScript tasks in a browser-agnostic way. Nowadays, a lot of the newer libraries are targeting mobile app development. Rob Gravelle presents the top 10 JS libraries right now.

  • The 2017 Guide to Polyfills

    The Internet landscape changes in so many ways and with such rapidity that it seldom remains static for any length of time. So too with the world of Polyfills. Rob Gravelle presents specialized Polyfills for CSS and ECMAScript 2015, as well as libraries that tailor Polyfills to the browser.

  • Change Slideshow Ordering using jQuery

    Rob Gravelle updates the slideshow of the Create a Simple Automated Slideshow tutorial by adding option controls, button onclick handlers, as well as code to change the slide ordering.

  • Build a Birthday Countdown Calculator using Moment.js

    In this follow-up to the Formatting JavaScript Date Intervals into Years, Months, Weeks, and Days article, Rob Gravelle describes how to construct an HTML5 form that provides detailed information about a person's age and birthdays based on their date of birth.

  • Formatting JavaScript Date Intervals into Years, Months, Weeks, and Days

    Rob Gravelle describes how to express time intervals in terms of weeks, months, and years using the moment.js JavaScript library.

  • Code and Deploy a Simple Angular 2 Application in Eclipse

    The time has come to code our first Angular 2 app, all be it the ubiquitous Hello World app, it will provide a familiarity with the parts and steps required to create a full blown Angular 2 application.

  • Developing Angular 2 Apps In Eclipse

    Along with many new features, Angular 2 incorporates many changes that developers have been asking for. Rob Gravelle walks you through the steps to create a node.js-driven Angular 2 app in Eclipse.

  • Working with Large JSON Data Sets in Android

    Working with large JSON data sets in Android can be challenging because it only allocates so much memory to your applications. Rob Gravelle shows us how to parse a JSON-formatted stream without loading the entire JSON structure into memory using the Gson library.

  • Getting to Know Angular 2

    Angular 2 was released just months ago with updates every 2 weeks, in this story we take a look at all the best new features, their advantages and the innovations behind them.

  • What's New in Angular 2: Versioning, Features, and Components

    The recent release of Angular 2 includes quite a few changes. In an effort to smooth the transition, Rob Gravelle covers the most important changes, starting with Components and Directives.

  • Asynchronous Programming in ECMAScript 6

    Released in 2015, ECMAScript 6 standardizes the usage of promises. Rob Gravelle shows us how to use promises to have our functions return their results asynchronously.

  • Create a Simple Automated Slideshow

    In this article Rob Gravelle shows us how to create a simple slideshow using a simple stand alone solution in jQuery.

  • Ten Ways to Use Angular JS

    Check out the industries expert’s top picks for using Angular JS in your projects as we explore ten skilled and unique tips for your projects.

  • 6 Tips for Getting the Most Out of Angular JS

    As with many of my articles, instead of learning a process from scratch, I’ve decided to interview industry experts. That way you, as the reader, get to hear directly from these experts and learn their strategies. With that in mind I reached out for help and was contacted by John Donley, a Software Engineer at Charge, a San Francisco software company. Here’s what he had to say:

  • Creating Charts in React

    The odds are good that you’ve already heard of React - one of the hottest JavaScript frameworks at the moment. This tutorial will demonstrate how to build awesome charts using the React charts plugin.

  • How to Make a Pie Chart in Angular

    In this article we're going to show you how to create a pie chart using one of the most popular JavaScript frameworks right now - Angular.

  • Parsing Building and Street Fields from an Address using Regular Expressions

    One of the most challenging tasks that you're likely to encounter is the importing a comma separated values (CSV) file into a database. Rob Gravelle demonstrates how to use Regular Expressions to capture the building/house number from a simple and fixed address format.

  • Class Member Encapsulation in JavaScript: Method Hiding

    In a recent article we built on our Person class from the introduction article by adding a prototype interface, created a variable scope using a closure, as well as added constructor arguments and default values. Today we'll be moving on to method hiding, which comes with its own caveats and challenges.

  • Javascript Functors Explained

    A JavaScript functor is a sort of interface that defines a behavior. In this article, excerpted from Functional Programming in JavaScript, I will explain just what this means.

  • Implement a Dynamic toString() using JavaBeans Introspection

    In the Building a Better toString() Method tutorial, we utilized Java's powerful Reflection API to create a generic toString() that displayed an object's declared fields and their values. Rob Gravelle demonstrates another way to achieve the same result using the JavaBeans API.

  • Fine Tuning your RegEx Patterns

    There is nothing more frustrating than looking at a Regular Expression and trying to figure out why the heck it won't work. Rob Gravelle shows how to use the online tool to make writing RegExes painless and even fun!

  • Enhance Your Website’s Presentation with 15 Powerful jQuery Lightbox Plugins

    Convert dull web pages to be striking and appealing. These 15 jQuery Lightbox plugins will help you to take your sites to new levels.

  • Provide a JSON Feed from your WordPress Site using the JSON API Plugin

    There are a number of good plugins that allow you to very easily add the functionality to deliver your WordPress content as a JSON feed. Rob Gravelle shows you how to use the JSON API plugin right out of the box.

  • New ECMAScript 2015 Features: Object Literals to Destructuring Assignments

    In this second installment of a two-part series on ECMAScript 2015 (ES6), Rob Gravelle talks about the new-and-improved object literals as well as destructuring assignments.

  • New ECMAScript 2015 Features: Arrows to Tail Calls

    The General Assembly of Ecma International recently announced the approval of the ECMAScript 6 Language Specification. In part 1 of a two-part series, Rob Gravelle presents some of the exciting new additions to the JS language.

  • Mapping XML Feed Fields with jQuery

    In the Parsing XML Feeds with jQuery article, Rob Gravelle introduced a script that loaded an Atom feed from the current location and extracted each entry's address fields. In today's follow-up, he maps the address fields into a new format and displays a side-by-side comparison of the original and transformed fields.

  • A Look at the Newly Approved ECMAScript 2015 Features

    The General Assembly of ECMA International recently announced the approval of the ECMAScript 6 Language Specification, also known as ECMAScript 2015 and are considered to be a major improvement. In this two part series, Rob Gravelle takes a look at whats in store for us. 

  • Parsing XML Feeds with jQuery

    The jQuery JavaScript library's DOM parsing, traversing, and manipulating abilities, which play a large role in its enduring popularity, can be applied to XML documents as well. Rob Gravelle uses jQuery to parse address fields from an Atom feed.

  • Calculate the Distance between Two Points in your Web Apps

    As more and more Web apps are run on mobile devices, the more demand for geolocation capabilities increase. Rob Gravelle reveals the main obstacle to accurately calculating the distance between two locations and presents a practical solution.

  • Respond to DOM Changes with Mutation Observers

    Earlier this year, the World Wide Web Consortium (W3C) introduced the DOM4 specification, which includes DOM Mutation Observers. These replace the long-standing DOM Mutation Events, which never really caught on. Rob Gravelle explains how to create and configure DOM Mutation Observers as well as interpret their results.

  • Form Element Conversion Made Easy with jQuery

    In last month's Convert a List into a Select Dropdown using jQuery article, Rob Gravelle described how to create an in-place editor for an ordered or unordered list by converting it into a

  • Convert a List into a Select Dropdown using jQuery

    The select-in-place list is similar to in-place text editing, but allows the user to select from an ordered or unordered list by converting it into a <select> element.

  • A Guide to JavaScript Fuzzy Search Libraries

    Blame it on Google, but today's web surfers expect the search process to know what they mean even when they themselves aren't sure that they are looking for. That's where fuzzy searching comes in. Rob Gravelle reviews a few such libraries for JavaScript.

  • Using Handlebar Templates in Apache Cordova

    HTML templates have been around for a long time and are a great way to reuse page elements without a lot of (or even any) coding. Rob Gravelle whows how to streamline the Apache Cordova app code produced in the Using Views in Apache Cordova article using the Handlebars.js template library.

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

  • Removing Elements from an Array in JavaScript

  • Set the Font for All Document Elements at Runtime

    Rob Gravelle demonstrates how to set the font for all the elements in a web page from a listbox.

  • Drag & Drop List Items Between DIVS using jQuery

    If you've ever completed on online survey there's a good chance that you've encountered a question that asks you to choose some personality traits from a column and drag them over to a box. Rob Gravelle explains how it's done using a combination of Drag & Drop and element sorting.

  • Providing Feedback on Long-running Scripts in Older Browsers

    Before the advent of Server-sent Events (SSEs) and the HTML5 Progress Bar, users were kept in the dark while waiting for long-running tasks such as the uploading of image and video files to complete. Rob Gravelle shows a few ways to provide feedback to older browser that don't support SSEs or progress bar.

  • How to Use Babylon.js to Create 3D Rendering for the Web

    WebGL is clearly a hot topic nowadays. Apple has just announced the availability of WebGL for Safari (without having to struggle with options) and iOS 8. This allows web developers to create 3D web sites that can really be used everywhere. This article, written by David Catuhe, details some of the functionality behind the new Babylon.js

  • Displaying Feed Content using jQuery

    In version 1.5, jQuery introduced support for XML parsing, which makes it work with both Atom and RSS feeds without plugins or 3rd party services. Rob Gravelle explains how to display feed contents in the browser using jQuery as well as how CORS and JSONP may be employed to overcome browser cross-domain restrictions.

  • A Roundup of Popular JavaScript Date Parsing Libraries: Datejs

    In this second installment in a series on Date Parsing JavaScript libraries, Rob Gravelle provides an overview of the Datejs library and gauges its efficiency in parsing a date from a larger block of text.

  • A Roundup of Popular JavaScript Date Parsing Libraries: XDate

    In this third installment in a series on Date Parsing JavaScript libraries, Rob Gravelle continues his quest for a JS library that can parse dates from a block of text. Today's contender is the XDate library.

  • Testing for Empty Inherited JavaScript Object Properties

    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.

  • The IFRAME Technique for Testing Web Pages

    The new Jasmine 2.0 done() method replaces the runs() and waitsFor() methods of earlier versions to make it more similar to other testing frameworks. In today's article, Rob Gravelle covers how to use Jasmine 2.0's done() method to test DOM events without polluting the test page with test code.

  • Using Jasmine 2.0's New done() Function to Test Asynchronous Processes

    Jasmine 2.0's new done() method replaces the runs() and waitsFor() methods of earlier versions to make it more similar to other testing frameworks. Rob Gravelle shows how to use Jasmine 2.0's done() method to test DOM events without polluting the test subject page with test code.

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

  • Testing DOM Events Using jQuery and Jasmine 2.0

    Jasmine makes it possible to test that a given DOM event occurred and what the results of the event were. In today's article, Rob Gravelle demonstrates how to write tests for the button click event using Jasmine 2.0, jQuery, and an additional third-party library called jasmine-jquery.

  • The Word of the Day Is "Nonce"

    You may not have heard of nonces yet, but they can be of great use in securing Web applications. Rob Gravelle shows how they work and their usage in protecting against malicious or duplicate requests that could cause undesired consequences to your web site.

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

  • Using JavaScript's CSS3 Selectors

    The HTML5 selectors API has given Web developers unprecedented access to document elements. Developed by the W3C, the Selectors API provides a way of easily accessing elements in the DOM using a standardized syntax. Rob Gravelle shows how to use JavaScript to reference page elements using the new CSS selectors.

  • Making Promises With jQuery Deferred

    Ajax has the limitation of only supporting one callback function. jQuery introduced the Deferred object in version 1.5 to solve this problem. It can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function. Rob Gravelle shows how to use the Deferred object with Promises.

  • How Mocha Makes Testing Asynchronous JavaScript Processes Fun

    The Mocha Framework has simplified the testing of asynchronous methods as compared to Jasmine. In fact, Visionmedia, the makers of Mocha, promise to make "asynchronous testing simple and fun". Rob Gravelle gives it a try to see what's so fun (and not so fun) about the Mocha framework.

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

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

  • 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 Objects to Functions By Value

    Objects are passed to functions by reference in JavaScript, so that the function receives a pointer that references the original object. While you can't just flip a switch to pass objects by value, there are ways to produce a copy. Rob Gravelle shows how to do that in today's article.

  • A Quick Tour of Douglas Crockford's JSLint

    JSLint is a code quality tool for JavaScript developed by Douglas Crockford. Those unfamiliar with the tool tend to find a lot of the error messages a little on the cryptic side. The options can be equally intimidating to the uninitiated. Rob Gravelle helps you get better acquainted with some of JSLint's most important options and rules.

  • Three JavaScript Anti-Patterns and How To Avoid Them

    In programming, a pattern represents a best practice, while an anti-pattern represents a lesson that has been learned. An anti-pattern could be described as a bad solution to a particular problem which resulted in a bad situation occurring, which provide some degree of guidance on how to get out of said situation and get to a satisfactory solution. In today's article, Rob Gravelle presents three of the biggest anti-patterns in JavaScript as well as their solutions.

  • JavaScript Date Calculations for Months

    Under the best of circumstances, date calculations involving months can be an troublesome to nail down. As we'll see here today, month durations are not as fixed as one might initially presume. JavaScript doesn't offer much in this department, so Rob Gravelle offers some useful functions for most common calculations of month intervals.

  • Creating Custom Events with jQuery

    JS libraries like jQuery have made it easier than ever to utilize your own custom events in your scripts and even give you the option of having your events fired from a DOM element or from within a function. Rob Gravelle gives an overview to creating custom events using jQuery.

  • Accessing Private Functions in JavaScript

    JavaScript's support for nested functions allows developers to place a function within another so that it is only accessible by its parent. The downside to this feature is that it tends to result in many functions that cannot be tested directly. Luckily, there are ways to expose private functions for testing. Rob Gravelle demonstrates one of them.

  • Create a Win/Loss Chart with PlotKit: Conclusion

    In this conclusion to the Create a Win/Loss Chart with PlotKit article, Rob Gravelle shows the modifications that need to be made to the SweetCanvas.js code, as well as how to dynamically calculate your own yTicks so that they cross the zero Y point.

  • Don't Fear Sparse Arrays in JavaScript

    JavaScript arrays are not quite like those of more restrictive languages such as Java, in that they are sparse arrays. These sometimes require special handling as they can contain gaps between elements. Rob Gravelle explains some ways to bug-proof your code against sparse arrays in today's article.

  • Object.create(): the New Way to Create Objects in JavaScript

    Just when you thought that you've seen every possible way there was to create JavaScript objects, Rob Gravelle brings you yet another: the new Object create() method.  There are some pretty good reasons to use it. In today's article, Rob shows how to use it.

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date