Get motion on your Web pages without using an applet
JavaScript
-
Creating a Better Environment in Web-based VR Using A-Frame
Learn how you can create an entity and put it into a variety of virtual worlds using A-Frame, with about a dozen lines of code, The listing presented in this article can be run on most modern desktop browsers as well as on VR equipment.
-
Getting Started with Deno
Diogo Souza takes you on dive into the universe of Node.js competitor Deno.
-
5 Tips for Creating Cleaner JavaScript Code
Explore how you can improve the quality of your JavaScript code with these 5 tips.
-
Manage Server-Side Rendering Issues in JavaScript SEO
When it comes to JavaScript websites, search engines have not been able to quite advance the way they crawl and index JavaScript, including Google. See what you can do to work around this issue.
-
An Introduction to JSON Web Tokens (JWT)
Diogo Souza walks you through what JSON Web Tokens are and how JWTs work.
-
Working with Redux for State Management in Front-End Apps
Diogo Souza walks you through the use of Redux and how it can be used to power your front-end application's state.
-
Advanced Functional Programming: Monads in JavaScript
Functional programming has become very popular in the development community. If you want to deepen your understanding of the subject, Diogo Souza dives into the universe of Monads, viewed under the lens of JavaScript.
-
Explore Using Enzyme for React Testing
One of the biggest advantages of React is undoubtedly using Enzyme to test components, while taking full advantage of the virtual DOM. We can also explore Jest's powerful tools as a snapshot and create a mock test for external modules.
-
Current Big Trends in Web Development
There are a number of big trends that are impacting how you develop web sites. How many of these are you already doing?
-
Getting Started with Material Design and Vuetify
Diogo Souza explores how to use Vuetify and Vue.js to create a small application to read data from an account in GitHub.
-
Infinite Scrolling the Angular 6 and RxJS Way!
An infinite-scroll-list is one that loads content asynchronously when the user scrolls down to a certain point in the viewport. Rob Gravelle presents a solution that combines Angular's EventManager with RxJS's Observable and Subject classes.
-
Creating Animations on the Web with jQuery Animate
Diogo Souza shows you how to create animations for your web site using the .animate() method.
-
Dynamically Adding and Removing Event Handlers with jQuery
Rob Gravelle shows us how to easily bind and remove event handlers using a little jQuery.
-
Serve External Content from Your Express.js Apps
Rob Gravelle presents how to serve up weather information from a public API using Express.js and the request, fetch, and request-promise-native node libraries.
-
Google Chart API: First Steps
Diogo Souza shows you how to create charts using the Google Chart Tools library, a simple but very powerful library. Learn how to draw and interact with various types of charts.
-
So You Want Typed Arrays in JavaScript…
With Typed Arrays you can reduce the number of steps needed to work with typed data. This is helpful when using JavaScript with APIs. Get started with typed arrays now.
-
Creating Chained DropDownLists with AngularJS
Learn to load select nested elements via cascading load within AngularJS.
-
Web Page Scraping with Node.js
Having a browser engine at your disposal allows you to do just about anything that you can do yourself. Rob Gravelle walks you through the steps to find an article and download it as a screenshot using the Puppeteer Node.js library.
-
Working with Services in JavaScript
Learn how to create new services, as well as use factories, to spread functionalities alongside your JavaScript code.
-
Making D3.js Charts Interactive
The Generate a Bar Chart with D3.js tutorial showcased D3's SVG capabilities by producing a stunning bar chart with a relatively small amount of code. In today's article, we'll add custom tooltips to our chart.
-
5 Tips to Speed Up Your Website in 2019
Don't waste the time of your users. Learn how to speed up your web site and improve page views, customer satisfaction, etc.
-
File Operations with Node.js
Node.js provides an entire module dedicated to file system operations. Rob Gravelle introduces us to a few of them.
-
Navigating HTML5 Geolocation
Octavia Anghel shows you how to to use the HTML5 Geolocation API to determine the location of a user.
-
Ten Basic Things Every Web Developer Should Know
You should know these ten things if you plan to build a web site, no matter what your technical level is!
-
5 New jQuery Techniques for Creating a Better User Experience
Madan Pariyar focuses on five new jQuery techniques for creating a better user experience.
-
Explore TypeScript Fat Arrow!
Of all of TypeScript's many notable features, the fat arrow is arguably one of the most powerful, yet it is also the most confusing to newbies to the TypeScript language. In this tutorial, Rob Gravelle explores the fat arrow's role and usage.
-
Modifying CSS Width Attributes with jScript So It Works!
Many people to to dynamically change the width of HTML tags and fail to have it work. Learn the right way!
-
Manipulate DOM Elements Without Writing JavaScript Code
No.js is an extremely lightweight JavaScript library that allows you do DOM manipulations without writing any JavaScript whatsoever. If that idea appeals to you, then read on and let Rob Gravelle demontrate what No.js can do for you!
-
Generate a Bar Chart with D3.js
In the last article, we used the D3.js library to display the contents of a CSV data file within a dynamically generated HTML table. This time around, we're going to step things up a notch by producing a slick SVG bar chart from a JSON data set.
-
Getting Started with Grunt.js
Learn how to automate simple build tasks with the help of Grunt.js.
-
The Model-View-ViewModel Pattern and Angular Development
Rob Gravelle shows how Angular follows a component-oriented architecture, while sharing some of the concepts of both MVC and MVVM by presenting a couple of coding examples.
-
Bring Your Data to Life with D3.js
D3 is a JavaScript library for producing dynamic, interactive data visualizations in any web browser. Rob Gravelle shows us how to use D3 to display the contents of a CSV data file within an HTML table.
-
Web Scraping JavaScript Rendered Content
HTML parsers like jsoup only see the raw page source and are completely unaware of any content that is added to the DOM via JavaScript. Rob Gravelle shows us how to automate the Chrome headless browser from a Python script.
-
Manipulating CSS Using jQuery
See how you can dynamically change the CSS with jQuery to update the appearance of your Web pages.
-
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.
-
Getting Started with Google Closure
Learn how to use the Google JavaScript Closure resources to make your web pages more dynamic.
-
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.
-
Modify jQuery Autocomplete Widget Response Data
Rob Gravelle shows us how to customize the jQuery Autocomplete widget's menu content and appearance using the response event and _renderItem extension point.
-
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.
-
Accessing Anonymous Functions for Testing Using the Jasmine-jQuery Library
The jasmine-jquery JavaScript testing library provides a set of custom jQuery matchers for DOM elements as well as a versatile fixture loader. Rob Gravelle explains how to use the set() function to provide pre-initialized test fixtures.
-
Loading External Fixtures with the Jasmine-jQuery Library
Rob Gravelle shows us how to use the jasmine-jquery library's set() function to provide a pre-initialized fixture.
-
Bind Event Handlers to a Dynamic Form
Learn how to bind event handlers to the form and child elements in order to to allow users to upload Excel spreadsheets to the server.
-
Mastering Drag and Drop with jQuery UI
In this article, Diogo Souza shows you some practical examples of the use of jQuery UI with explanation about the code created.
-
Working with Data Models and Routes in EmberJS
Rob Gravelle guides you through the steps to build a web app for a fictional video store using Ember's outstanding routing generator.
-
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.
-
Tame Unwieldy Lists with the jQuery Autocomplete Widget
Rob Gravelle shows you how to employ the jQuery UI Autocomplete widget to choose from a list of restaurants that is fetched from the server at runtime.
-
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.
-
Continuous TDD in JavaScript with Node.js and Gulp
Learn some good practices to better understand how to apply continuous TDD in your JavaScript project along with Node and Gulp frameworks.
-
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.