Our Blog

Creating a Symbol Web Font

By Zed Jensen
July 17, 2014

Creating a custom font that only includes a few characters can be very useful. I was looking for a good way to display left and right arrows for navigating between clients and also between team members on our site and after doing some research, creating a custom font seemed like a good way that would be small and that would support all kinds of screens and browsers. So, here I’ll show how to create a web font with a few custom characters in it that you can use on your website.

You’ll need to get the free, open source vector graphics editor Inkscape and familiarize yourself with its drawing tools.

To start, open Inkscape and open the SVG font editor by clicking Text -> SVG Font Editor. Under the font column, click “New” and then name your new font.

Now you can start adding characters. Begin by adding as many glyphs as you need and choosing letters for your character to be represented by. Only use characters that you can find on a standard QWERTY keyboard, as FontSquirrel (which we’ll use to convert this to a web font) won’t work with, for instance, Unicode special characters.

Now, for each symbol, draw it using Inkscape’s tools and make sure that its dimensions are …

Runaway Rewrite Rule

By Jeff Boes
July 16, 2014

I am not an expert in Apache configuration. When I have to delve into a *.conf file for more than five minutes, I come out needing an aspirin, or at least a nerve-soothing cupcake. But necessity is the mother of contention, or something like that.

My application recently had added some new URLs, which were being parsed by your typical MVC route handler (although in Perl, because that’s how I roll, and not in Dancer, because … well, I don’t think it had been invented yet when this application first drew breath). 99.9% of the URLs worked just fine:

/browse/:brand/:category (the pattern)
/browse/acme/widget
/browse/ben-n-jerry/ice-cream

and so on. Suddenly a report reached me that one particular brand was failing:

/browse/unseen-images/stuff

(“unseen-images” has been changed to protect the innocent. The key here is the word “images”; put a pin in that and hang on.)

/browse/unseen-images

worked just fine. What’s worse, instrumenting the route handler code proved that it wasn’t even being called for /browse/unseen-images/foo or any of its siblings, whether :category was valid or not.

Making sure my bottle of aspirin was at hand, I dove into the Apache configuration. I added – …

Interactive Highlighting and Annotations with Annotator

By Steph Skardal
July 15, 2014

Over a year ago, I wrote about JavaScript-driven interactive highlighting that emulates the behavior of physical highlighting and annotating text. It’s interesting how much technology can change in a short time. This spring, I’ve been busy at work for on a major upgrade of both Rails (2.3 to 4.1) and of the annotation capabilities for H2O. As I explained in the original post, this highlighting functionality is one of the most interesting and core features of the platform. Here I’ll go through a brief history and the latest round of changes.

Example digital highlighting of sample content.

History

My original post explains the challenges associated with highlighting content on a per-word basis, as well as determining color combinations for those highlights. In the past implementations, each word was wrapped in a single DOM element and that element would have its own background color based on the highlighting (or a white background for no highlighting). In the first iteration of the project, we didn’t do allow for color combinations at all – instead we tracked history of highlights per word and always highlighted with the most recent color if it applied. In the second iteration of …

Liquid Galaxy installation at Sparkassen-Finanzportal Forum 2014

By Szymon Lipiński
July 11, 2014

In May, End Point and Google organized a Liquid Galaxy installation at Sparkassen-Finanzportal Forum 2014 in Düsseldorf, Germany.

For this event End Point installed the Liquid Galaxy and also prepared custom tours for the Liquid Galaxy showing different Sparkasse localizations across Germany.

We arrived at Düsseldorf a day before the event, and assembled the whole Liquid Galaxy without any problems. The system consists of 7 displays and 6 computers, so the potential for issues is pretty great, but we’ve done this a number of times, and have worked out a good stable build. After assembly, the system worked pretty well. Our US-based team then finalized the custom tours and uploaded the most recent software and content.

The next morning when we arrived at the event place, everything was working great, and the system was ready for people to explore and discover. As per usual, people were interested not only in the prepared tours, but also were looking for the places they know (usually, their house!). The overall user experience is great, especially when people were able to see places they hadn’t seen for quite a long time, like the places where they grew up.

This is another successful …

Facebook, Twitter, Google+ sharing with the URL

By Marina Lohova
July 10, 2014

This blog post is intended for the folks who spent way more time displaying social sharing buttons on their websites than originally planned. My buttons were supposed to bring up the Share Dialog for Facebook, Twitter and Google+ platforms. I had the requirement to display a custom logo and a custom description. It seemed easy… until it turned out to be rather difficult.

The appropriate format for Twitter is:

<a href="http://twitter.com/share?text=<%= desc %>&url=<%= url %>">Twitter</a>

Note that Twitter dialog does not include the picture, only the description.

Trouble started with Facebook when I learned that custom parameters in Facebook’s sharer.php url are officially not supported anymore: https://developers.facebook.com/bugs/357750474364812. I tried the format widely suggested on forums, and while custom image was successfully displayed, neither title, not description showed.

<a href="http://www.facebook.com/sharer.php?u=<%= url %>&p[images][0]=<%= img  %>&description=<%= desc %>">Facebook</a>

Facebook documentation hinted that addition of the OpenGraph Protocol standard tags to the of …

Interchange 5.8.2 Release with Bcrypt Encryption Support

By Mark Johnson
July 9, 2014

The most recent release of Interchange contains support for adding encryption to user passwords with bcrypt. This provides for a significant improvement over the previously supported encryption options. Whether you are starting with a new user table, or have a long-established user table with any of the other supported encryption types, you can take advantage of this enhancement to Vend::UserDB.

In order to utilize bcrypt, you will need to have successfully installed the Digest::Bcrypt and Crypt::Random modules. Once installed, it is recommended (though not required, ironically) you add these as Required modules to interchange.cfg to ensure Interchange can find them and will report back immediately if not:

Require module Digest::Bcrypt
Require module Crypt::Random

To use bcrypt, configure your UserDB directive with the following options:

• bcrypt—​set to 1
• cost—​desired cost between 1 and 31 (optional; current default is 13)
• bcrypt_pepper—​random string used to apply a unique padding pattern (also optional, but strongly recommended)

To encourage adoption of bcrypt, there are two mechanisms available that allow a user table already using another encryption type to convert to using …

Version differences via GitHub from the command line

By Greg Sabino Mullane
July 9, 2014

Photo by Benson Kua

I work with a lot of open source projects, and I use the command-line for almost everything. It often happens that I need to examine a file from a project, and thanks to bash, Github, and curl, I can do so easily, without even needing to have the repo handy. One of the things I do sometimes is compare a file across versions to see what has changed. For example, I needed to see what changes were made between versions 1.22 and 1.23 to the file includes/UserMailer.php which is part of the MediaWiki project. For this trick to work, the project must be on Github, and must label their versions in a consistent manner, either via git branches or git tags.

MediaWiki exists on Github as wikimedia/mediawiki-core. The MediaWiki project tags all of their releases in the format X.Y.Z, so in this example we can use the git tags 1.22.0 and 1.23.0. Github is very nice because you can view a specific file at a certain commit (aka a tag), and even grab it over the web as a plain text file. The format is:

https://raw.githubusercontent.com/PROJECTNAME/BRANCH-OR-TAG/FILE

Note that you can use a tag OR a branch! So to compare these two files, we can use one of these pairs: …

Class is in Session: CartoDB

By Bianca Rodrigues
June 30, 2014

A few weeks ago, some members of our Liquid Galaxy content team headed to Gilt which hosted a class on CartoDB.

Since we deal with location-based data for our work with Liquid Galaxy, it seemed like the ideal class to learn more about this popular geospatial mapping tool. CartoDB is a cloud-based solution for mapping where users can easily manage data and create maps with them. The true allure of CartoDB is its ability to produce beautiful visualizations, which is why it’s often referred to as the “Instagram of mapping”.

The platform is built on open source software including PostGIS and PostgreSQL. There is extensive use of JavaScript in the front end, and Node.js for the back-end APIs. CartoDB is packaged in a way where the user doesn’t need to have much coding experience, yet options still exist for those who want to go further with it using SQL and CSS.

Andrew Hill from CartoDB led the 4-hour class and provided us with a detailed summary of CartoDB’s origins, and its current wide use among companies like Twitter, the New York Times, and several nonprofit organizations. Every dataset uploaded becomes an API endpoint, and SQL processes and packages data any way you want and …