CSS Conf US 2014 — Part Two
More Thoughts on Getting Vertical, Testing and Icon Fonts
Without further ado I’ve written up another batch of my notes about three more great talks at CSS Conf US in Amelia Island, Florida last week.
Antoine Butler — Embrace the Vertical
Antoine shared his observation that vertical media queries are available to CSS developers but not often used. With the vast array of devices accessing the web today vertical media queries can be a useful tool to adapt your content effectively. Antoine walked us through a couple examples of how he applied this technique in a couple of his projects. The first was a prototype of WikiPedia. While they have gone with a separated mobile site (e.g. en.m.wikipedia.org/), he started with the HTML from the desktop site and applied some vertical media queries to make the content much more digestible. Take a look at his code to see how it works.
The second example Antoine demonstrated was for the navigation at Volkswagen. The client wanted to display an unlimited number of items in the secondary navigation. Once again Antoine applied vertical media queries to handle the varying number of navigation elements based on the device height. Check out his adaptive …
accessibility android chrome conference css html
vim-airline: A lightweight status/tabline for Vim
My standard Vim configuration makes use of around 30 different plugins and I consider vim-airline to be one of the most indispensable because of its built-in functionality and superb integration with a variety of other Vim plugins. It’s a great starting point for anyone looking to extend their Vim setup with additional plugins.
I became interested in vim-airline the first time I saw screenshots of it; the color schemes, custom glyphs[1] and indicators immediately revealed value beyond the basic status bar that a stock Vim installation provides. After installing and spending some time using vim-airline I discovered additional benefits due to its integration with other plugins such as Fugitive, Syntastic and CtrlP. vim-airline provides a common platform for integrating the display indicators of plugins from various authors into one view and presents them all with consistent a consistent style.
A quick comparison of Vim with vim-airline installed:
vs. a standard Vim installation:
reveals new indicators for the current Vim mode, git branch, open buffers, and line endings. Integrating other plugins can add additional indicators for syntax errors, trailing whitespace, and more.
Using …
vim
CSSConf US 2014 — Part One
Geeks in Paradise
Today I was very lucky to once again attend CSSConf US here in Amelia Island, Florida. Nicole Sullivan and crew did an excellent job of organizing and curating a wide range of talks specifically geared toward CSS developers. Although I work daily on many aspects of the web stack, I feel like I’m one of the (seemingly) rare few who actually enjoy writing CSS so it was a real treat to spend the day with many like-minded folks.
Styleguide Driven Development
Nicole Sullivan started things off with her talk on Style Guide Driven Development (SGDD). She talked about the process and challenges she and the team at Pivotal Labs went through when they redesigned the Cloud Foundry Developer Console and how they overcame many of them with the SGDD approach. The idea behind SGDD is to catalog all of the reusable components used in a web project so developers use what’s already there rather than reinventing the wheel for each new feature. The components are displayed in the style guide next to examples of the view code and CSS which makes up each component. The benefits of this approach include enabling a short feedback loop for project managers and designers and encouraging …
browsers conference css design html
Supporting Apple Retina displays on the Web
Apple’s Retina displays (on Mac desktop & laptop computers, and on iPhones and iPads) have around twice the pixel density of traditional displays. Most recent Android phones and tablets have higher-resolution screens as well.
I was recently given the task of adding support for these higher-resolution displays to our End Point company website. Our imagery had been created prior to Retina displays being commonly used, but even now many web developers still overlook supporting high-resolution screens because it hasn’t been part of the website workflow before, because they aren’t simple to cope with, and since most people don’t notice any lack of sharpness without comparing low & high-resolution images side by side.
Most images which are not designed for Retina displays look blurry on them, like this:
The higher-resolution image is on the left, and the lower-resolution image is on the right.
Now, to solve this problem, you need to serve a larger, higher quality image to Retina displays. There are several different ways to do this. I’ll cover a few ways to do it, and explain how I implemented it for our site.
Retina.js
As I was researching ways to implement support for Retina …
graphics browsers compression
DBD::Pg, array slices, and pg_placeholder_nocolons
New versions of DBD::Pg, the Perl driver for PostgreSQL, have been recently released. In addition to some bug fixes, the handling of colons inside SQL statements has been improved in version 3.2.1, and a new attribute named pg_placeholder_nocolons was added by Graham Ollis in version 3.2.0. Before seeing it in action, let’s review the concept of placeholders in DBI and DBD::Pg.
Placeholders allow you store a dummy representation of a value inside your SQL statement. This means you can prepare a SQL statement in advance without specific values, and fill in the values later when it is executed. The two main advantages to doing it this way are to avoid worrying about quoting, and to re-use the same statement with different values. DBD::Pg allows for three styles of placeholders: question mark, dollar sign, and named parameters (aka colons). Here’s an example of each:
$SQL = 'SELECT tbalance FROM pgbench_tellers WHERE tid = ? AND bid = ?';
$sth = $dbh->prepare($SQL);
$sth->execute(12,33);
$SQL = 'SELECT tbalance FROM pgbench_tellers WHERE tid = $1 AND bid = $2';
$sth = $dbh->prepare($SQL);
$sth->execute(12,33);
$SQL = …database dbdpg postgres
Kamelopard version 0.0.15 released

The Camelopardalis constellation, as shown in Urania’s Mirror
I’ve just pushed version 0.0.15 of Kamelopard to RubyGems. As described in several previous blog posts, Kamelopard is a Ruby gem designed to create KML documents quickly and easily. We use it to create content for our Liquid Galaxy customers. This release doesn’t include any major new features, rather it provides a number of small but very helpful modifications that taken together make life much easier.
New Spline Types
Perhaps the most useful of these new features relate to spline functions, introduced in Kamelopard version 0.0.12. The original spline function interface described here accepts a series of equi-dimensional vectors as control points, and returns vectors as results, but there’s no indication of what each dimension in the vector means. This is convenient in that you can use splines to make nice paths through any number of dimensions and use them however you’d like, but in practice we most commonly want to make tours which fly through sets of either KML Points or AbstractViews (Points include just a latitude, longitude, and altitude, but AbstractViews include a direction vector, so they describe cameras and …
gis google-earth kamelopard visionport open-source kml
Liquid Galaxy at MundoGeo in Brazil
End Point reached another milestone last week when we hosted one of our own Liquid Galaxies at a conference in Brazil for the first time. End Point brought our new Brazilian Liquid Galaxy to MundoGeo Connect in São Paulo, which ran from May 7th to 9th, 2014. MundoGeo Connect is the largest geospatial solutions event in Latin America, which this year drew almost five thousand visitors, among them businessmen, specialists, and government agencies from all over the continent. It was the perfect opportunity to showcase the Liquid Galaxy as the powerful and immersive GIS interaction tool that it is.
Similar to last year, Liquid Galaxy was the runaway hit of the show, and no one in the building left without coming around for a test flight in the Google Earth spaceship. But it was when we started showcasing the GIS functionality, the KML layers, along with other applications like panoramic imagery, embedded video, and live streaming video, that visitors really started understanding its potential for data visualizations, corporate marketing, public outreach, conference communications, and sheer immersive entertainment.
As the Latin American market continues to grow with commodities such …
visionport
git checkout at a specific date
There are times when you need to view a git repository as it was at a certain point in time. For example, someone sends your project an error report and says they were using the git head version from around January 17, 2014. The short (and wrong!) way to do it is to pass the date to the checkout command like so:
$ git checkout 'HEAD@{Jan 17 2014}' ## do not do thisWhile I used to rely on this, I no longer do so, as I consider it somewhat of a footgun. To understand why, you first have to know that the ability to checkout using the format above only works for a short window of time, as defined by the git parameter gc.reflogExpire. This defaults to a measly 90 days. You can view yours with git config gc.reflogExpire. The problem is that when you go over the 90 day limit, git outputs a warning, but them spews a mountain of output as it performs the checkout anyway! It uses the latest entry it has in the reflog (e.g. 90 days ago). This commit has no relation at all with the date you requested, so unless you catch the warning, you have checked out a repository that is useless to your efforts.
For example, the Bucardo project can be …
git






