Author Archives: Steve Barnett

Some quick thoughts about the new(ish) Foursquare

Naga IT Services
Filed under: Industry

When Foursquare did its big update, splitting it into Foursquare and Swarm, I felt a bit meh about it and stopped using it. I had enjoyed using Foursquare because it had changed from being just Check-ins to a pretty good recommendation engine, but the split felt unnecessary to me. Recently I decided to give them a go anyway, and after a couple of days playing with the new apps, here are a few quick thoughts.

The most interesting thing for me is that the new apps embrace a mobile first mindset much more aggressively that the previous iterations: single task focus, smart defaults, and just-in-time interactions.

The cherry on top is that the motion and animation of the interface is generally much improved. The interface feels more alive for it, and more fun to use.

Task-focused

They’ve switched to large text for input. This works well because the text you enter is short. On the previous version, it felt like lots of screen space was taken up by irrelevant stuff, forcing the text size smaller because of the limited space. Now it’s focused on the one task you’re doing: pecking out a quick bit of text.

Smart defaults

Location-based searching is now much cuter and feels much smoother. It makes a (usually good) guess at where you are, but let’s you change it easily. Using smart defaults means less work for the user: just a confirmation of the best guess rather than searching and selecting.

Just-in-time information

There are quite a few tutorial bits, but they are well placed and judged: short bursts of information that pop up as you need them. This method of just in time teaching works much better than front-loading it all and making the user wade through pages of information that isn’t immediately relevant.

More Opera Mini more of the time

Naga IT Services
Filed under: Industry, Reading

When I tweeted about the Opera / Microsoft agreement last week (saying that Opera Mini will become the default browser on Nokia’s Asha and feature phone ranges), I felt like I wanted to say more about it.

The article came back up on my radar a few days ago, courtesy of Jeremy Keith’s link log, which reminded me of why it’s important:

You might want to think about how your Angular-powered JavaScript-required web thang works in one of the world’s most popular web browsers

You might think it’s hyperbole to call it that, but let’s look at some stats. A press release from Opera the other day states that there are 100 million active users of Opera mini, just on Android, which is twice as many as a year ago. Their stats from their State of the Mobile Web report for April 2014 show 267 million unique users of Opera mobile browsers, and their more recent article “How to get the next billion online” talks about these stats in a wider context.

One key factor to consider is that people in developing countries are big users of Opera browsers because of the cost savings that they offer. When you combine this with the fact that many users, especially in developing countries, are mobile-only, you start to see why building with Progressive Enhancement, and not relying on JavaScript for key functionality is so important: you’ll be blocking huge portions of the world from using your stuff.

My own experience with Style Guides

Naga IT Services
Filed under: Industry, Process

Writing up my thoughts on Justin’s talk made me think about what I’ve been doing with style guides on client projects. Here’s a quick run-down.

I’ve used Jekyll to build a style guide before, and was quite happy with it. I did have a lot of tiny files by the end, though, and it did become a bit slow and frustrating. It was also a bit fiddly getting it to play nice with Grunt and a live reload tool.

Hologram

Most recently, I’ve used Hologram, and am pretty happy with it. It’s a Ruby gem that parses comments in your CSS and generates a Style Guide based on a template that you set up. I struggled a little with the set up, but once it’s going it’s a pleasure to use. Having the documentation and code samples right next to the relevant styles is very handy.

I find that it’s very well suited to small snippets (atoms and molecules kind of sizes, to use Brad Frost’s terminology), but it’s not so great with larger snippets of HTML.

One worry is that it can make your stylesheets noisy. The comments are removed when compiling and minifying the SASS or Less files into regular CSS, so there’s no worries about extra size for production CSS. The development stylesheets become much larger and can become more difficult to read, though, due to the large comment blocks.

A living style guide

Lonely Planet’s Rizzo is the best example of a style guide that I’ve seen, and I want to aim for something like that for the next style guide I make. It’s the only truly living style guide I’ve seen: it uses the Views (templates) directly from the application rather than separate, manual, snippets of HTML.

One of the problems of working in an agency environment is that I don’t, or can’t, always get direct access to the application code: my work runs in parallel to the main application, but doesn’t touch it directly. This mean that something like Rizzo can’t be done anyway, so a separate Front-end style guide using Jekyll or Hologram is he way to go.

Building a front-end style guide with Jekyll

Naga IT Services
Filed under: Talk notes

A few weeks ago Justin Slack of New Media Labs gave a talk about Front-end Style Guides (FESGs) for the Cape Town Front-end developers meetup. Below are my notes from his talk.

Justin talked about how FESGs are good for modular development, testing code early, and how they set a good precedent. They use real code and run in the browser, making them unlike regular style guides: they’re a living document. The Lonely Planet style guide is particularly impressive because it’s truly living: it uses an API to call view partials.

The options

There are a lot of generation options across a variety of languages: Rails, Ruby, PHP, JavaScript. Jekyll, a static site generator, is one option. A Style Guide needs to start incorporating content, so the fact that Jekyll uses Markdown is great because many content people use it.

Justin gave a short demo of setting up Jekyll and an explanation of how it works. It was great to see it in action. He noted that the built-in syntax highlighting is another good reason to use Jekyll. And, since it generates static web pages, it also has a very small footprint.

The demo

My favourite bit of his presentation was the demonstration of a real world example. Justin talked us through the set up, the thinking behind it, and the continued work on it. It was also great to hear about the bad sides of using Jekyll. Nothing is without its problems, and it was good to hear an honest discussion of the ups and downs. Some of the problems include the fact that it can be slow to use once you have a lot of files.

The next meetup

If we managed to get our skates on, we should be having another meetup next week: keep an eye on the meetup group for details!