Unsupported browsers – introducting HTML4CSS and legacypicturefill.js

As a web developer, over the years I’ve asked the producers/project managers I’ve worked with “and what browsers are we supporting?” more than once, for every project I have worked on as though its fine to think there are some browsers we just don’t support. We understood that the internet is accessed by a wide range of browsers, it should be accessible and inclusive and project’s content should be viewable for as many people as possible. But, we have a limited about of time and resources and there was only so much graceful degradation and progressive enhancement we could do.

More


Choosing a 3rd party service without losing your shirt

Choosing a 3rd party service without losing your shirt

Segment enables you to collect customer data with one API and send it to hundreds of tools for analytics, marketing, and data warehousing.

As digital product engineers, there are a few over-riding principles that govern our work. As an agency, one of the most critical of these is “build once, use many times.” Using existing building blocks for standard features allows us to develop rapidly while leaving budget for the innovative features that will actually differentiate our clients’ product.

In many cases, these building blocks are part of our own arsenal of code, standardized for reuse. In other cases, we evaluate 3rd party services that allow us to introduce production-ready features without the expense of developing and maintaining them.

More


Peter-Paul Koch and the browser dilemma

In July of this year, mobile platform strategist, consultant, and trainer, Peter-Paul Koch (PPK), published an article on his blog, Quirksmode, called “Stop pushing the web forward.” When PPK publishes, people tend to listen and at AREA 17, we’re no different.

Peter-Paul Koch and the browser dilemma

PPK always sparks debate

More


Markdown blockquote attribution with Redcarpet

For a recent Facebook Stories post, we were asked to allow quotes to be attributed to a person. The Stories site uses Markdown for text formatting which does not have a method for blockquote attribution within its syntax. To add support I mixed some regex and Ruby on Rails together.

More


Improving user experience without design

“[Web] Performance is a lot like plumbing. It’s hard to get people to pay attention to it until something is wrong.” — Tim Kadlec

Performance is an often invisible part of our online experience. As Tim Kadlec notes, most people don’t notice it until something’s wrong. Performance is, in fact, the cornerstone of any successful user experience.

More


A17 Timezones

A17 Timezones

AREA 17 operates primarily out of studios in New York and Paris. But we also have satellite offices in several other parts of the world. At times there can be a nine hour time differential between staff members. Thankfully email, Hipchat, Google Hangouts, Skype, and a few years of practice means this isn’t much of a problem for us. However, I sometimes still have problems with doing the mental arithmetic necessary to calculate what time it is for everyone everywhere else—especially when organising meetings. To try and alleviate this, I built a web app over the holidays that displays all of the primary timezones in which AREA 17 operates so with quick glance you can see what time it is in those places.

A17 Timezones

More


Auto populating code/pre tags with HTML content using JavaScript

On a recent static style guide build I got tired of manually inserting sample code content into <code> tags; especially as I hadn’t fully made up my mind on exactly what the markup should be. Each change meant I was copy and pasting the new markup into a new window in my text editor and search and replacing the < and > so that it would render as expected in the browser. I see most problems as a Front End problem so I wrote a quick function to do this for me. I’m writing this down and sharing because a quick Google search didn’t reveal any similar functions.

More


Alternatives to Compass in a Rails project

For years we were using Compass with Sass with our product, Krrb, to make our lives (mine at least) a bit easier:

  • no browser prefixes to take care off
  • cool shortcuts
  • easy image sprites generation

However, there were still performance issues.

Compass is huge and take lots of time to compile—from five to eight seconds for each deploy. So I decided to get rid of it completely.

More


Segment.io — a standardized interface for
web analytics

Implementing an analytics tool for analyzing site traffic and basic user behavior is pretty easy these days. For most people Google Analytics will work just fine — it’s free, it has a great interface, and it’s trivial to implement.

At Krrb our needs are slightly more complex. While Google Analytics supports the majority of our traffic analysis, it doesn’t give us everything we need.

More


Not built with jQuery

Not built with jQuery

The first time I used jQuery on a website was June 2007; I used it for an image carousel that faded between sponsor logos. During the rest of 2007 and 2008 I used jQuery, MooTools and Prototype.js until settling on jQuery for everything in 2009. And I’ve been using jQuery on every site since. Until now.

More


Data Behaviors — jQuery vs. querySelectorAll

Data Behaviors — jQuery vs. querySelectorAll

In October 2012 I wrote an article for .Net magazine, “Get your JavaScript in order,” in which I detailed how I organise my JavaScript files and fire functions linked to DOM elements. The peer reviewer of my article, Ross Bruniges’, main concern was how the JavaScript searched the DOM because I had used the well known slowest method of searching through the page. Now I have an updated version that should put any doubts to rest: querySelectorAll.

More


Instagram statistics

Instagram statistics

Instagram: @inthefrow

Recently a friend of mine and fashion blogger, @inthefrow, asked me if I’d help her determine who her most popular Instagram followers are. I knew Instagram had an API so I assumed the task would be trivial. Of course, it wasn’t as straight forward as I first assumed…

TL:DR

From a sample of 21,239 Instagram users:

  • 6133 had protected accounts – thats 28%
  • Average number of followers: 843
  • Median number of followers: 194
  • Average number of people followed: 822
  • Median number of people followed: 265
  • Average follower/follows ratio: 1:1.76
  • 533 or 2.5% are disabled or other wise invalid accounts

More


The end of sprites; the rise of SVG

The end of sprites; the rise of SVG

SVG markup

About a year ago, Ned proposed the idea of switching our method of displaying icons and other small graphics in websites that didn’t use sprites. He suggested we used individual SVGs instead.

At the time we were making sprites and had become become quite adept at building them; though they were a constant source of frustration. In the middle of 2012 Apple released the Mac Book Pro with a Retina screen, which added new impetus to seek out ways of making sprites appear sharp on high resolution screens. Our first solution was to make double size sprite files and resize them with CSS for high resolution screens. This solved the problem; but gave us more problems. Now we had two sprites to maintain and more frustration.

So an SVG solution was worth seeking out.

More


Ajax Pinterest Buttons

It turns out re-rendering or rendering ajax’d into place Pinterest buttons is quite straight forward. Not that you can find this in the Pinterest docs…

Update the way you include the Pinterest js:

<script defer="defer" src="//assets.pinterest.com/js/pinit.js" data-pin-build="parsePins"></script>

The defer defers loading of the script until after the page has loaded. The important bit is the data-pin-build attribute. This makes the pinit.js expose its internal build function as parsePins on the global window object.

And then to use:

// parse a DOM element
window.parsePins($("#element")[0]);

// parse the whole page
window.parsePins();

The function is looking for a DOM node and not a jQuery object which is an array like object; so selecting the DOM node the jQuery object wraps is needed.

And thats it.


Kohana workaround to side-step debug information in production

Kohana provides a nice exception handler (and an error handler that transforms errors into exceptions using PHP’s ErrorException class) which displays all kind of useful information in a development environment.
In addition to the error/exception related information, you also get environment-specific information that can help you troubleshoot your application : path of your application, php extensions, server software, and so on. Of course, it is always bad to display this kind of information on a live website.

More


Demo: Dynamic Device Wrapper

Playing around with some marketing page concepts and came up with an interesting way to display content on multiple devices with one element in the markup. Check the demo here.

Inspired by device-loop from slid.es.


To lightbox, or not to lightbox

Much to my annoyance, lightboxes have become pretty ubiquitous on the internet. I’m bored of seeing them and bored of making them. And the more I use my phone for viewing websites, I’m frustrated that the vast majority of sites use them regardless of the device accessing the site.

For Facebook Stories I decided I would act upon my frustrations. When building the site I included simple conditionals in the JavaScript that enabled the lightbox, based on screen size and if the device was a touch screen.

More


Syncing Data Between Web Services

Why build something when their is a web services for it? Over the years, more and more web services have offered the ability to add functionalities to the apps we create so that we can focus on the core business. But in doing so, we often find ourselves in a situation where our data is spread across multiple services.

Syncing data manual is tedious and doing direct API integration takes time away from working on the core services of the apps we create. And when we want to sync data between two web services, direct integration is not an option. Until now….

More


Testing retina graphics on non-HiDPI displays

If you have OS X Lion installed, there’s a small trick that will allow you to switch to HiDPI resolution display modes. It doesn’t work on the MacBookAir because the screen is too small and the resolution will drop below the minimum required resolution for HiDPI. It works on a MacBook Pro but the maximum HiDPI resolution you can get is 720×450. However if you are on an iMac or have a display with higher resolutions, then this trick should do the trick.

More


I need to learn more: RegEx

I need to learn more: RegEx

I’m currently working on a new feature for Facebook Stories which involves using the Facebook Graph API to search content on Facebook. The results of a search are going to be displayed, with the search query highlighted in the results using the HTML5 tag.

More