javascript – the reality tunnel

Custom formatting of date and time for events in in Squarespace blocks

I’ve recently done a little bit of front-end development work on a Squarespace website. This is my first experience with the platform, and it’s been generally positive. It starts out with a sane content model and makes all the content available as JSON.

The system provides a number of predefined blocks that let you expose content from collections on other pages in the site. Unfortunately, as of January 2014, you can’t customize the markup of items in a block.

This was a problem for us because the default summary block for event content only showed the event date and we wanted to also show the start time. Luckily, the JSON feed of the events collection provided timestamps for the start and end date/time.

I wrote Squarespace Event List, a YUI3 plugin that fetches the event collection JSON with AJAX and overwrites a block’s content with a custom-formatted event list. You can find the JavaScript and some brief documentation on GitHub.

Illinois in the ICE Age

Illinois in the ICE Age is a data visualization project that I made along with Jimmie Glover, Ruth Lopez and @taratc for Chicago MigraHack. The visualization is based on a data set provided by the Transactional Records Access Clearinghouse that describes the trajectory of 915 migrants detained in Illinois from the time they were taken into custody until they left ICE custody in November and December 2012.

We used Google Spreadsheets’ pivot tables feature to explore the data and develop questions and insights. This also provided a good way to double check programatically computed statistics. The map animation is built using D3. I sucked the data set into a local SQLite database using the Peewee ORM and wrote some Python scripts to transform the data and export it as JSON to make it easier to visualize (especially the day-by-day updates).

The project won the “Best data visualization team project” and “Audience Favorite” awards.

Floodlight

Floodlight is a web-based platform for telling community stories from people, places and organizations around the Denver metropolitan area. The project was originally supported by The Piton Foundation and funded in part by a grant received as part of the Knight Foundation Community Information Challenge.

Role

Lead developer

Details

Since many of the stories told on Floodlight are about work being done in particular Denver, Colorado neighborhoods, authors needed to be able to tag their stories with boundary geographies (cities, neighborhoods, zip codes) or provide addresses of specific places, which are automatically geocoded and associated with boundary geographies.

For this project, I relied on the excellent spatial data support of the PostGIS database and abstractions offered by the Django Frameworks ORM to implement a data model and create scripts to easily load new boundary geographies from shapefiles and define their relationships with other boundaries.

Users searching for stories in their community can use a faceted browsing interface that not only filters based on address and boundary geography, but also other taxonomies. In order to integrate these different types of filters, I used the Solr search server. On the front end, the Backbone framework provides an interface to the faceted browse and the Leaflet mapping library is used to display boundary geographies and story markers based on the user’s filters.

The application is powered by a RESTful API that is consumed by a Backbone-based story builder.

In addition to the web platform, the project also included a great capacity-building component. Team members conducted “story raising” events that trained community members in different digital storytelling skills and a “story navigator” worked with community groups to discover and tell stories using the platform.

More Information

GitHub repository
Floodlight: New digital tool helps Colorado organizations tell their stories (Knight Foundation write-up of project)

Screenshots

Bookmarklet to generate Flickr image attribution text and link

This is a jQuery bookmarklet to extract an attribution string and link from a Flickr photo page.

To use the bookmarklet bookmark this link or drag it to your browser’s bookmarks bar: Flickr Attribution

The code is available at github.

At the time that I wrote this bookmarklet, I was using the the Monochrome Author theme (similar to the Monochrome Pro theme) by Graph Paper Press. It requires that you have an image associated with each post, so I frequently grab Creative Commons licensed photos for posts where I didn’t take a photo. I got tired of building the photo attribution string and link back to the photo by hand, so I made the bookmarklet to generate it with one click.

This is my first attempt at writing a bookmarklet and using jQuery.

I make use of the very helpful jQuery Bookmarklet by Brett Barros with modifications by Paul Irish as well as the zeroclipboard library for copying the text to the system clipboard.

There are probably some bugs with this code as well as lots of room for improvement. In particular, it would be nice to have the z-index of the bar displayed by the widget set so it covers all the FLickr page elements, but I couldn’t set a high z-index without messing up the zeroclipboard functionality.