dcsimg

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

  • HTML5 Javascript

  • Building Universal Vue.js Applications with Nuxt.js

    Universal JavaScript is a type of JavaScript code that can execute both on the client and the server. Rob Gravelle explains how to generate a Universal Vue.js app using the Nuxt.js starter template.

  • Build Better UIs with Vue.js

    Among the myriad of new web frameworks, Vue.js has been among the most popular amongst developers. We were first introduced to the Vue.js framework in the Getting Started with Vue.js article. Now, we're going to look at the structure of a Vue Component and build our own.

  • How to Access a Single HTML Element on a Web Page

    One of the quickest ways to get an element on a web page is by using the JavaScript getElementById() method found within the document object model.

  • Create a React Web App in Visual Studio Code

    There are a number of JavaScript frameworks that promise to make developing web apps for both browsers and mobile devices easier, faster, and with superior results. Rob Gravelle familiarizes you with the ReactJS library and Microsoft's Visual Studio Code IDE, which boasts React IntelliSense and code navigation out of the box!

  • Set Up Eclipse to Work with the Sencha Ext JS Web App Framework

    The Sencha Ext JS Web App Framework helps you build data-intensive, cross-platform web apps for desktops, tablets, and smartphones. Rob Gravelle provides a brief overview and shows us how to configure Eclipse to work with it.

  • Bind Data to Your Web Forms with EmberJS Models

    In the Working with Data Models and Routes in EmberJS article, we saw how to add Routes to our Sakila Video store app to link the pages of our app together. Then, in How to Link Between EmberJS App Pages, we created a navigation bar component to display site links at the top of every page. Now, it's time to bind a model to the rentals page in order to display available videos.

  • Getting Started with Vue.js

    Vue is a progressive framework for building user interfaces. Rob Gravelle examines the different ways to use Vue in your projects.

  • Creating Beautiful Customized Alerts with SweetAlert2

    Learn how to create beautiful and user-friendly alerts for your web applications.

  • Top Navigation Bar Widgets for 2018: Bootstrap and jQuery Mobile

    In this series, Rob Gravelle presents some good components that you can use to make your Navbars look and behave optimally in any size viewport. Bootstrap and jQuery Mobile are the subjects of today's installment.

  • JavaScript Prototypal Inheritance in 2018

    With somewhat lackluster browser support, it might be a tad premature to jump on the ES6 class syntax bandwagon. Instead, Rob Gravelle takes another look at Prototypal Inheritance, and explores its specific advantages and disadvantages.

  • Implementing the Blockchain in JavaScript

    Learn how to implement a simple Blockchain in JavaScript using crypto.js.

  • Using Built-in JavaScript Code with JavaScript Objects

    See how to use existing objects in JavaScript to reduce your coding time.

  • Duck Typing in JavaScript

    In Duck Typing, an object's suitability is determined by the presence of certain methods and properties, rather than according to its type. Rob Gravelle traces the evolution of Duck Typing in JavaScript and explores some situations where we can apply Duck Typing for our own objectives.

  • Top JavaScript Libraries and Trends for 2018

    Learn more about the tools that JavaScript developers use every day to make sites look professional, engage the audience and enhance the UX.

  • A Guide to Responsible Monkey Patching in JavaScript

    Learn about the basics of Monkey Patching in JavaScript, such as updating an existing function with new functionality that builds on the existing implementation. Rob Gravelle also offers a few tips on when, and how, to go about it.

  • Creating an Expandable List of Items in HTML with JavaScript

    See how to use standard JavaScript to hide and display items in a list.

  • Testing Asynchronous jQuery Event Code Using the Jasmine-jQuery Library

    In this tutorial, Rob Gravelle picks up from where he left off in the last article and presents a few ways to test jQuery Ajax Success handler code triggered by an anonymous button click handler.

  • 7 Ways to Start Learning JavaScript as a WordPress Developer

    See why, if you are looking to become a successful WordPress developer, you must learn how to use JavaScript.

  • Fetching jQuery Autocomplete Matches via Ajax

    Rob Gravelle shows us how to use the jQuery Autocomplete Widget's source event to perform a search of complex data via an Ajax request.

  • Cross-Browser JavaScript Tips

    Take advantage of these tips to make sure that your JavaScript code can be executed in multiple browsers, ensuring that your application is cross-browser compliant.

  • How to Link Between EmberJS App Pages

    EmberJS uses the {{link-to}} component for navigating from one route to another. The "Working with Data Models and Routes in EmberJS" tutorial described how to setup several routes. Today, we'll add a navigation bar to our app.

  • So You Want a Floating or Pop-up Window

    See how to dynamically display a new window from your current HTML Web page using JavaScript.

  • Testing HTML5 Web UIs with Jasmine-jQuery

    Wojciech Zawistowski's jasmine-jquery add-on library for the Jasmine JavaScript testing framework provides a set of custom jQuery matchers for DOM elements as well as a versatile fixture loader. Rob Gravelle describes how to use it to overcome UI testing challenges such as anonymous event handlers and asynchronous calls.

  • How to Search a JavaScript String Array Using a Binary Search

    The binary search algorithm is just the thing for searching through a long list of sorted items. Rob Gravelle describes two binary search functions that are well suited to a variety of applications, including String searches.

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

  • How to Animate Your Website Using the HTML5 Canvas

    With the Canvas HTML5 API, you can write JavaScript code that can access the canvas area through a set of drawing functions, resulting in dynamic generated graphics.

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

  • Build a Custom HTML5 Audio Player with a File Selector

    Explore how to create a custom HTML5 Audio player that loads music from the user's device using a file input control.

  • 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

  • JavaScript Framework Fundamentals

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

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

  • Create an HTML5 Initializr-based Subscription Page in Aptana Studio 3

    Initializr is an HTML5 templates generator that customizes HTML5 Boilerplate. In this tutorial, we'll employ Initializr to build a single page Web app that submits the user's email to a server-side PHP script for the purposes of subscribing to an email newsletter.

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

  • Build an HTML5 Image Uploader with DropzoneJS

    DropzoneJS is an open source library that provides drag n' drop file uploads with image previews. Rob Gravelle describes the steps to recreate the main page demo.

  • Create Custom Controls for your HTML5 Video Player

    In the Build an HTML5 Video Player tutorial, Rob Gravelle showed us how to build an HTML5 player. In today's follow-up, we will implement a slider volume control, seeking and full screen viewing capabilities, as well as Access Keys.

  • The Top HTML5 Canvas Game Engines

    The HTML5 canvas element brought many options to the table for game programming, combined with some JavaScript and 2D graphics and just about anyone could build games that run in any web browser. Lets take a look how to do it.

  • Drag Files Into the Browser From the Desktop using jQuery Event Binding

    The jQuery library manages browser inconsistencies so that we can focus on the problem at hand. With that in mind, Rob Gravelle presents a jQuery-enhanced version of the code from his Drag Files Into the Browser From the Desktop with HTML5 tutorial.

  • Augmented Reality APIs are Here

    That exciting new avenue of Augmented Reality (AR) and in today's article, we'll take a look at a couple of the most prolific JS libraries to help us implement this new technology.

  • A Guide to Online Address Parsers

    In the first installment of a guide to online address parsers, Rob Gravelle attempts to determine how address-parser.net and Texas A&M GeoServices fare against a list of varied but well-formatted addresses.

  • Build an HTML5 Video Player

    In this article, we'll design a couple HTML5 video players using nothing more than some basic HTML controls, a little CSS, and JavaScript.

  • Build an HTML5 Audio Player

    Before HTML5 arrived on the scene, there was no standard for playing audio files on a web page. Now, the HTML5 audio element specifies a standard way to embed audio in a web page.

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

  • Building a Better toString() Method

    The humble toString() method is widely implemented across numerous programming languages. It provides a simple and convenient mechanism for representing an object's state in readable form. Rob Gravelle shows you how to write a dynamic toString() in Java.

  • Automate Form Submissions using Bookmarklets

    There are a myriad of uses for Bookmarklets. Rob Gravelle explains what they are, how they work, and how to use them to automatically fill out and submit a form one time or a thousand times over!

  • Create a Java Enterprise Application Controller in Eclipse

    Rob Gravelle adds a Servlet Class to the Persistence in Java EE Applications "Exercises Catalog" application that will accept requests from the browser and invoke a DAO method accordingly.

  • Extending the Vaadin Mobile Application Framework's Built-in Themes

    Previously you saw how Vaadin uses Sass's ("Syntactically Awesome Style Sheets") CSS3 extension format to apply styling themes to its applications. Now Rob shows you how to employ a custom theme.

  • Getting Fancy with the JavaScript For Loop

    Rob Gravelle shows how to use the comma to extend each of the for loop statement's three evaluation parts - initialize, condition, and increment - to take your for loops to a whole new level.

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

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

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.

    By submitting your information, you agree that htmlgoodies.com may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with the Quinstreet Privacy Policy.

  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date