Entries Tagged as 'Web development'

Sometimes projects take on a life of their own, and you end up with something unexpected.

I set out to create an template for CRUD-focused single page
AngularJS web applications, something I and perhaps my colleagues could
use as a foundation for writing new applications. But under the
momentum of self-applied scope creep, what I ended up creating was a
Grunt-powered codebase library management tool, with my original
template concept as the first codebase of potentially multiple
foundational codebases.

One of the most common uses of the Grunt
task runner is to build a deployment package out of your development
code for your website or web application, and part of that build process
is usually a task that concatenates the CSS and JavaScript files into
singular (or at least fewer) files for optimal download.

The grunt-contrib-concat Grunt plugin allows you to configure a concatenation task to target individual files or entire directories, like so:

The only drawback is that you have to update the task's "src"
property as you add or remove CSS and JavaScript assets from your web
application.

As I was playing around with Grunt on a personal project, I came to
wonder: could I create a Grunt task or set of tasks that could figure
out which files to concatenate based on the <link> and
<script> tags in my code? Here's what I came up with.

I started learning AngularJS a few weeks back because I thought it would work well for an internal tool I was building (more on that in a later post).

Many AngularJS examples, including those in the current AngularJS tutorial (like this one), illustrate how to use the ng-repeat and ng-options directives using a typical Javascript array of objects. So given such an array in the model:

But, as noted in the AngularJS API, you can also use ng-repeat and ng-options to loop through a set of properties/keys in an object, and that works even if each property references another object. So you can accomplish the same thing with this model object:

The advantage to using the latter technique comes into play when you want to relate something in the part of the model you want to preserve / process with a part of the model that provides metadata.

Taking the above examples a step further, say you wanted to create a short conference registration form. The user has to select a conference package, and you want to provide information about each package (what it entails and the cost) but you don't want that information to be part of the form submission. You can do this by having the user's conference selection pull the related data from the plan metadata.

...The user's selection of plan determines which plan object data is pulled from the "plans" part of the model for display in that div block, yet the data sent as the form submission (the "reg" object) only includes the plan name.

In case you missed it, last week the jQuery team announced the launch of the long-awaited jQuery Plugin Registry (http://plugins.jquery.com/). This new site is designed to address the issues that were present in the old jQuery plugins site and make it easier for plugin authors to share their creations via an authoritative listing.

I like what they ended up doing with the registry. Instead of hosting copies of the plugins, it leverages GitHub. Plugin authors put their plugins up on GitHub, add a manifest JSON file to their project that provides descriptive metadata about the plugin, and then add a webhook for the registry to the GitHub project (all of these steps are well-documented on the registry site). Once all that is set up, every time someone creates a new GitHub tag for the plugin and pushes it up to the repo, GitHub will notify the plugin registry of the change and the registry will be automatically updated. In other words, updating the project on GitHub updates the plugin registry as well.

Finally having a robust centralized, official listing of jQuery plugins is really going to help the plugin ecosystem. It'll hopefully give lesser-known plugin authors more exposure and give plugin users a central place to search for plugins that returns results with quality, up-to-date information.

I've already added my recently updated dirtyFields plugin to the registry. Not sure if I'll add my older, simpler plugin for counting characters/words in a textarea; I'll have to look and see what's already out there in that regard to see if my implementation fills a niche need for that sort of thing.

One of the functional requirements for the voter registration application I blogged about recently was that the application should not allow further registrations between the registration deadline (October 16 at 9pm) and a date after the election specified by the state Board of Elections. For the initial run of the application, I simply hard-coded the deadline and restart date into the application logic, knowing full well I couldn't leave it that way unless I wanted to personally change the code year after year....which I don't.

So this week I set out to write a tool within the administrative interface of the application that would allow a non-programmer to update the deadline and restart date every year. The jQuery UI Datepicker widget is my tool of choice when it comes to having users enter or edit a date, but I've used a few different approaches to having users enter a time of day. This time around, I decided to see I if could find something comparable to the Datepicker widget for setting the time.

What I found was a rather sweet plugin called the Timepicker Addon that adds a set of time controls to the jQuery UI Datepicker. If you customize your jQuery UI download to include both the Slider and Datepicker widgets, you can present the time controls as sliders, like so (without the Slider widget, you get select boxes):

The plugin comes with a number of configuration settings so you can do things like adjust the time increments, change how the time is displayed, and allow the user to denote the time zone associated with the time value. Once I had the plugin configured the way I wanted, I simply had to write some code to validate the date and time string submitted from the form field, and I was done. Very cool.