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…)

A Simple gulp Plugin

Photo of Elephant by James Hammond on Unsplash

gulp is the new black. It’s quickly supplanting Grunt for JavaScript builds because it’s faster and simpler. When we replaced our Gruntfile with a gulpfile on one of our projects, our build script sped up by an order of magnitude and became much more comprehensible.

Because gulp is so new, its suite of plugins is much smaller.  Granted it’s easy to use many basic node modules without a gulp plugin, like:

var rimraf = require('rimraf');
gulp.task('clean', function (cb) {
    rimraf('./build', cb);

But in many other cases a plugin either saves code duplication between projects or makes it simpler to perform a conventional action. How hard is it to create a gulp plugin?


Popcorn, Popup, Popup Videos, Video Annotations, Bring Me Back to Data

Photo of popcorn by Martin Abegglen on Flickr

Thanks to Jimmy Fallon and the Mets bucket hat guy, I’ve found myself stringing together random word associations like this, which is where this title came from.  But honestly, the last thing I would associate with popcorn is a javascript media library.  So I guess random associations is the thing to do.  To be clear, this is not the kind of popcorning made famous by Rob Drydek (MTV’s Ridiculousness) which describes hiding an airbag under an unsuspecting person’s seat and deploying it, sending the poor victim on a quick ride skyward.  This is the kind of popcorn that allows making video annotations (ala VH1’s Popup Videos circa 1980) easy to do.   That’s popcorn.js.


jQuery Mobile Transitions: Static vs Dynamic Content. Part II

jQuery MobilejQuery Mobile is a web application framework designed primarily for making sites interact well on smartphones and tablets. However, many of the features are useful for interaction across all devices. This series is focusing on the page transition effects included with jQuery Mobile.

In Part I of this series, I introduced a basic two page site and then integrated jQuery Mobile to create a sliding transition between the two pages. The first step was to include all page elements in the transition. The next step, which is covered in this post, is to perform the transition with some static content; some specific elements not included in the transition effect.


jQuery Mobile Transitions: Static vs Dynamic Content. Part I

On a recent project I was working on, the client had a web-site structure in mind where the user would navigate using a page swipe (on touch-based devices) and the pages would transition using a slide transition effect. It was pretty clear that jQuery Mobile already offered a lot of the functionality that we were trying to accomplish…both swipe handling (which isn’t discussed here) and sliding page transitions.

jQuery mobile greenAs usually happens when finding a “perfect” technology to fit into a project, the implementation details didn’t quite fall into line “perfectly”. The primary issue was that, while the page transitions should slide from page to page, depending on the context, not everything on each page should transition. For example, transitioning between some pages might require the background to slide with the transition while others might require that the background stay static. The solutions for these different sliding approaches weren’t always completely intuitive.

I’m going to describe each the different combinations of transitions that we needed to accommodate and then provide details on how to achieve each one. Part I will cover the initial base source, how to massage the code to accommodate jQuery Mobile, and how to do a slide transition between pages.