Go Fetch! (JavaScript Fetch API)

Courtesy of publicdomainpictures.net

Long ago, we briefly brushed upon the topic of what has made jQuery such a valuable part of the web developer’s toolset for such a long time – namely, a cleaner interface for interacting with the DOM, and the $.ajax abstraction over XMLHttpRequest.

These days, I would go a step farther and discuss how it has positively influenced browser APIs. jQuery offered a way to find elements using their css selectors, and this eventually gave us document.querySelector and document.querySelectorAll. More recently, browser developers have taken another page from jQuery’s playbook and introduced a new, Promise-based API for making asynchronous requests, and so much more – Fetch.

Why go Fetch? Let’s take a look.


Interactive SVG Charts With D3 – Part 2

Adding tool-tips to an interactive chart.

Adding tool-tips to an interactive chart.

This is Part 2 of a three part tutorial exploring building interactive charts with D3. Part 1 can be found here.

Other blog posts which can be used as introductory material to this series:

This tutorial is Part 2 in a multi-part tutorial exploring interactive SVG charts. We will pick up where we left off in Part 1 by adding tool-tips to each data point in the chart which become activated when a mouse hovers over a point. (more…)

Bootstrap Radio Buttons as DataTable Filters

bootstrap image

This is the first of a series of tutorials on using Bootstrap radio buttons in the wild to filter real datasets in concert with other commonly-used UI components like DataTables and jQuery UI.

Part 1: Converting a classic input radio to the Bootstrap label

Photo by Dawid Zawiła on UnsplashFiltering tables of data is the central task of many a business web-app. DataTables are searchable by default, but records often beg to be batch-filtered into several status modes like: current | archived | all.

Bootstrap Radio Buttons provide a nice, clean look, but many developers shy away from them due to unfamiliarity with their CSS label-based class manipulation and/or compatibility issues with other component libraries like jQuery UI.

Bootstrap checkbox and radio btn-groups work ‘out of the box’, but the simple activation of a default button decouples active button highlighting from the input tag checked state. In this case, the active label class must be handled manually, but the docs don’t explain how, so a stack-overflow of posts for dev-help ensues. (more…)

Interactive SVG Charts With D3 – Part 1



This is my fourth blog post in a series on using D3. Previous posts include:

This tutorial is Part 1 in a multi-part tutorial exploring interactive SVG charts. Herein we will explore zooming in on detail within a chart and, indirectly, how one might organize their charting code in a single javascript object.

We’ll progress over a series of "slides," each showing an active SVG element with narrative text describing the key points of the slide, along with the javascript code that generated the SVG. As this is a tutorial on user interaction with SVG, you get to play along as we go.

This tutorial is a single-page app requiring a modern browser (tested on recent chrome, firefox, IE). Because this tutorial explores zooming, you will need to be using a computer with a wheel mouse. This tutorial can be run live in your browser at the wonderful bl.ocks.org site. If so inclined, you can also clone the tutorial from gist and run it locally on your computer.

Regardless of how you view the tutorial, you can leave comments about it here.


Payment Processing with Braintree

CC-BY licensed, via https://www.flickr.com/photos/53911972@N03/

You’ve built the web application of the century, and the users have rightly flooded to it. Cat pictures for everyone!

But alas, while your users indulge in cat-induced bliss, the cold hard reality of server costs cannot help but harsh your mellow. What is to be done?

Maybe, you could get the users to… pay for access to your incredible web application in all its multivarious splendour?

Braintree is a payment processor (now a subsidiary of PayPal), which boasts of a "simple, robust way to accept payments", and with features like a drop-in payment ui and libraries for various programming languages enabling fairly easy integration, is a solid choice for accepting payments via credit card or PayPal.

While Braintree’s developer documentation is blessedly detailed, it’s possessed of a potentially confusing bevy of options, and its various implementation examples are spread out amongst a number of pages and platforms. So today, rather than reiterate any particular section of the docs, we’re going to take a look at an end-to-end example of a specific, straightforward scenario – accepting and processing a one-time, immediately settled payment in a web application.