What’s so Neue about Helvetica?

fonts
So, I was just reading Rani Molla’s post on GigaOM called What’s all the fuss about Apple and Helvetica Neue? and I felt compelled (as I so often do, about so many things) to comment on the issue here.

Contrary to how the GigaOM article seems to frame it, the controversy — the, if you will, fontroversy (I regret it already) — when Apple demoed iOS 7 at WWDC last month was not that they were switching to Helvetica Neue as the iOS 7 system font. It’s that they were switching to Helvetica Neue Ultra Light, a particularly delicate weight of the general Helvetica Neue font family. (I’ve read some things that suggest they’re reversing course on that decision based on developer feedback, but the GigaOM post doesn’t even touch that.)

The fact is, Helvetica Neue has been the iOS system font ever since the introduction of the iPhone 4. When the iPhone was first introduced, it used plain old Helvetica as the system font. But with the introduction of the Retina Display, Apple switched to the slightly more refined Helvetica Neue.

So the concern with iOS 7 is not Helvetica Neue itself — that’s been working out just fine. It’s this extra thin weight of the font, which becomes difficult to read at smaller sizes.

Personally I like Helvetica Neue Ultra Light. I think it continues the trend towards refinement Apple began with the switch to Helvetica Neue itself, and is demonstrated effectively in Cabel Sasser’s animated GIF featured in the GigaOM article. The version using Helvetica Neue Regular feels heavier and clunkier to me. That said, I do understand and appreciate the legibility concerns with Ultra Light at very small sizes.

I’m not sure how this will work itself out. I doubt Apple will switch to a different typeface, though they may increase the weight of the font in the final version of iOS 7. But part of the reason Apple went with Helvetica in the first place is that it’s neutral (at least in principle). It gets out of the way and isn’t distracting. It doesn’t convey any particular personality. It’s a “blank canvas” of a font, which makes it a perfect fit for iOS devices, where the device itself disappears and becomes the app you’re using. Developers don’t have to use the system font in their apps, but a lot of them do, and by keeping the system font as neutral as possible, Apple avoids predisposing apps to a certain personality or style.

This is exactly the opposite of the opinions expressed in the closing of the GigaOM article, and is I think the opposite of Apple’s intentions with the iOS experience. Using a custom font that “reinforces a more distinctive brand voice” would be the equivalent of sticking a big Apple logo on the front of the iPhone. Apple’s branding goes on the back (where it can be an effective marketing tool). It’s never a part of the user experience.

Maintaining session between SSL and non-SSL pages in CakePHP

It’s funny, in a way, that cms34 has been around for nearly five years now, and it’s only just become a real issue that we were not maintaining sessions between SSL and non-SSL pages. This is somewhat understandable: practically speaking, the only time it really matters to carry over the session between the two is when a user is logged in. (This might not be the case with all web applications, but for us, at least, there’s rarely enough happening in the session when a user is not logged in for it to matter.)

As it happens, not that many cms34 sites use SSL; not that many cms34 sites use the user login capability on the front end. And very few use both. But we’ve had a couple of new sites come online lately that do use both, and it’s become a bit of an issue.

The issue was exacerbated by the fact that I recently modified the Users controller to require SSL on the login page, if the site has an SSL certificate. Consequently there were issues with trying to access login-restricted, but non-SSL pages… redirect loops and other such fun.

What’s the problem?

The problem is simple: for obvious security reasons, sessions and cookies cannot be shared directly between two different domains. It’s possible (although less secure) to share them between both SSL and non-SSL on the same domain, and it’s also relatively easy to set them up to work between different subdomains. But if your SSL pages use a different domain name than the non-SSL pages, even if they’re on the same server, there’s no way to get them to automatically use the same session.

The solution (though still not ideal, as it can introduce the risk of session hijacking), as you’ll find in lots of places, is to pass the session ID as a query string variable. Then you can use that to restore the same session ID, even if it’s on another domain — as long as it’s on the same physical server.

Some improvements

There are two key improvements I made to the basic “pass the session ID in the query string” scenario.

First, when the session is created I am writing the user’s IP address (using $_SERVER['REMOTE_ADDR']) as a session variable. Then, when I am attempting to restore the session with the ID passed as a query string variable, I read the session file on the server first, and make sure the IP address in the file matches still matches the user’s current IP address. Only then do I restore the session.

Second, and this is an aesthetic issue almost as much as a security one, once the session has been re-established, and before any response has been sent, I strip the session ID out of the requested URL and redirect to that new URL. It’s all invisible to the user, and the session ID never actually appears in the browser’s address bar.

A look at the code

There’s a lot going on in the cms34 code, much of which is highly specific to this application. But in short the keys to making this work happen in two places:

UsersController::login()

I have a login() action in UsersController that handles all of the special functionality that needs to happen when a user logs in. The actual login itself happens “automagically” via AuthComponent, but Auth doesn’t know everything I need to have happen when a user logs in, so after Auth does its work, my login() action takes it from there.

Honestly not a lot needs to happen here to make this work. Just two things: you have to write the user’s IP address to the session as I noted above, and you have to pass the session ID in a query string variable on the redirect that happens when login is successful. My code looks a little something like this (note that I have an array in the session called Misc that I use for… miscellaneous stuff like this):

class UsersController extends AppController {

  var $name = 'Users'
  // Other controller variables go here, of course.

  function login() {

    // All of this should only run if AuthComponent has already logged the user in.
    // Your session variable names may vary.
    if ($this->Session->read('Auth.User')) {

      // Various session prep stuff happens here.

      // Write IP address to session (used to verify user when restoring session).
      $this->Session->write('Misc.remote_addr(',$_SERVER['REMOTE_ADDR']);

      // Some conditionals for special redirects come here but we'll skip that.

      // Redirect user to home page, with session ID in query string.
      // Make up a query string variable that makes sense for you.
      $this->redirect('/?cms34sid=' . session_id());

    }
  }
}

So far, so good. The rest of the excitement happens in…

AppController::beforeFilter()

Ah yes, the magical beforeFilter() method. There’s a whole lot of stuff going on in AppController::beforeFilter() in cms34, most of which is highly specific to our application. But this is where you will need to put your code to retrieve the session ID from the query string and restore the session… this function runs at the beginning of every page load on your site.

I’ve put this logic almost at the beginning of beforeFilter(), because we really do want that session restored as soon as possible.

Here’s a look…

class AppController extends Controller {

  function beforeFilter() {

    // Additional code specific to your app will likely come before and after this.

    // Only run if session ID query string variable is passed and different from the existing ID.
    // Be sure to replace cms34sid with your actual query string variable name.
    if (!empty($this->params['url']['cms34sid']) && $this->params['url']['cms34sid'] != session_id()) {

      // Verify session file exists.
      // I am using CakeSession; your session files may be elsewhere.
      $session_file = TMP.DS.'sessions'.DS.'sess_'.$this->params['url']['cms34sid'];

      if (file_exists($session_file)) {
        $session_contents = file_get_contents($session_file);

        // Find user's IP address in session file data (to verify identity).
        // The CakePHP session file stores a set of serialized arrays; we're reading raw serialized data.
        // If you used a different session variable name than remote_addr, change it AND the 11 to its string length.
        $session_match = 's:11:"remote_addr";s:'.strlen($_SERVER['REMOTE_ADDR']).':"'.$_SERVER['REMOTE_ADDR'] .'";';

        // User's IP address is in session file; so we can continue.
        if (strpos($session_contents,$session_match) !== false) {

          // Set session ID to restore session
          $this->Session->id($this->params['url']['cms34sid']);

          // Redirect to this same URL without session ID in query string
          $current_url = rtrim(preg_replace('/cms34sid=[^&]+[&]?/','',current_url()),'?&');
          $this->redirect($current_url);
        }
      }
    }
  }
}

A few final thoughts

I didn’t really discuss cookies at all here, but suffice to say there’s a cookie containing the session ID that gets written. If you’re only using cookies for the session ID (which is probably a good idea), then you don’t really need to do anything else with them. But if you’re writing certain cookies when a user logs in (like I do), you’ll need to write additional logic to restore them in AppController::beforeFilter(). In my case, the relevant cookies are all duplicates of session data, but are intended for a few edge cases where I need to access that information through JavaScript or in .htaccess files that are protecting login-restricted downloadable files — in other words, places where I can’t use PHP to look at session data.

You may also notice near the end of the code in the AppController::beforeFilter() example above that I am calling a function called current_url(). This is not a built-in part of PHP or CakePHP; it’s a simple little function I have in my config/functions.php file. Here it is:

function current_url() {
  return (!empty($_SERVER['HTTPS']) ? 'https://' : 'http://') . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
}

The Raspberry Pi Arcade Project: An Interlude

I’m currently at Part 8 of my Raspberry Pi Arcade project. That is, my own Raspberry Pi Arcade project is at the point of what I have planned as part 8 in the blog series. The blog series itself is stalled out after Part 3. And while the risk of getting too far ahead of myself is there — I don’t keep copious notes, so by the time I write a blog post my own project is so far removed from the topic of that post that I may forget key details — the real threat to the project is coming from what I’m experiencing around my own “Part 8″: polishing the user experience.

I’ve come to realize that while the Raspberry Pi is unequivocally an awesome piece of technology — a complete computer that fits in an Altoids tin, runs on a cellphone charger, plugs into your TV and costs less than $50 — it’s not a powerful computer.

Yes, I always knew it was not a powerful computer. And for a lot of applications it doesn’t need to be. But the main thing you gain by sacrificing that power is its diminutive size. It fits anywhere.

The thing is… for some applications you don’t need a computer to be tiny. And if there’s any application where you can afford for your computer to be huge, it’s a full-size arcade cabinet. I originally had visions of opening up my X-Arcade Tankstick and mounting the Raspberry Pi inside it. That would be cool — amazing, in fact — if I weren’t also mounting the Tankstick onto a full-size cabinet.

So… as I struggle with tweaking settings in my advmame.rc configuration file at the command line, trying to eke every last bit of processing power out of the Pi just so it can render simple early ’80s video games at full screen, I begin to wonder why, and whether or not it’s worth it.

Clearly my emulation dreams would be better served by powering my cabinet with a more robust PC. And the whole thing would probably be a lot easier to set up.

But as I stayed awake last night until well past 1 AM, sitting in front of my living room television, typing arcane commands on a black screen in that classic ’80s DOS font, I realized that this experience is part of what it’s all about. Not just having an arcade cabinet, but hardcore geeking out on Linux. Using a computer the way I used my first computer back in the 1980s.

As much as I’ve embraced the “it (usually) just works” ethos of iOS and modern mobile computing devices, app stores and touchscreens and nary a file system or command line in sight, sometimes I miss computing the old way, when it was a tinkerer’s hobby.

That’s what the Raspberry Pi Arcade project is really about. And maybe it will be the stepping stone to even more creative electronics projects with the Raspberry Pi as their brain. I could see, at some point in the future, replacing the Raspberry Pi in my arcade cabinet with a more powerful PC running Ubuntu Linux, and finding a new, even crazier project where the Pi would be right at home.

The Raspberry Pi Arcade Project, Part 3: Get Raspbian

Now that you have your Raspberry Pi and assorted accessories, it’s time to get it up and running. The Raspberry Pi doesn’t have a hard drive… that’s what the SD card is for. The Raspberry Pi includes an ARM CPU, so in principle any operating system that has been ported to the ARM architecture should be able to run on it.

In practice… I’m already in over my head trying to explain CPU architectures. But you don’t need to know anything about that to get your Raspberry Pi running. Several “flavors” of Linux have been ported and modified specifically to work well with the Raspberry Pi but the gold standard is Raspbian, a variant of the popular Debian distro, and the preferred choice for starting out on the Raspberry Pi. If you really know what you’re doing and have very specific requirements, other OSes may be preferable over Raspbian, but if you just want to get your Raspberry Pi up and running with a stable, easy-to-use Linux, Raspbian is the way to go.

Get Raspbian

The first step in setting up Raspbian is to download it. This of course assumes you have another computer to download the disk image to. Any Windows, Mac or Linux PC should do. The key is having a PC with an SD card slot, because you’ll need to use it to get Raspbian onto the SD card.

If you don’t have a PC with an SD card slot, or you just don’t want to mess around with it, you can buy an SD card preloaded with Raspbian for not much more than the cost of the card itself. Note that the preloaded SD cards are probably only going to be 4 GB however, not the 16 GB card I recommended in Part 2 of this series.

Assuming you’re going to install Raspbian yourself, the first thing you need to do is download it. This download link includes a few other options for different OSes that will also work on the Raspberry Pi, so if you are inclined to ignore my advice, check them out!

Install Raspbian on Your SD Card

Once you have Raspbian downloaded, you’ll need to install it on your SD card. The process for doing this varies depending on whether you’re on Windows, or using a UNIX-based OS like Mac OS X or Linux. More detailed Windows instructions are available on the download page I linked to above. Being a die-hard Mac user, I am going to describe the Mac/Linux process, which I recommend doing at the command line.

1. Insert the SD card into your SD card slot.
This should be fairly self-explanatory. On most MacBook Pro’s the SD card slot is on the side near all of the other ports; on other Macs like my Mac mini, it’s in the back. Not all Macs have an SD card slot, e.g. the MacBook Air. If your computer doesn’t have an SD card reader, USB add-ons are available.

2. Open Terminal and become a superuser.
If you’ve never used Terminal before… well, to be honest, if you’ve never used Terminal before, this whole project is going to be a bit of a challenge. But solider on! Terminal is located in your /Applications/Utilities folder. It’s your way to access the command line on the Mac. You’re going to be doing some things that require root (“superuser”) access. The “safer” way to do this is to prepend any of those commands with sudo but I prefer not to mess around with that. Type sudo -s Enter to enter superuser mode. Note the command prompt will change from $ to #. Now you can do some real damage. Consider yourself warned. (And do not, under any circumstances, type rm -Rf / ever. For real.) Proceed at your own risk, or just prepend commands with sudo along the way if the system says you don’t have permission.

3. Identify your SD card in the filesystem.
In Terminal, type df Enter. You’ll get a list of all of the disks (“volumes”) on your Mac. You’re looking for the SD card. The name it displays in the Finder will be shown in the far right column, “Mounted on”. But you need to know what its name is in the “Filesystem”, the far left column. On my Mac mini it comes up as /dev/disk2s1. You don’t need to worry about the s1 part; that’s the partition. We just need the disk number, e.g. /dev/disk2. Make note of this for future reference. Now you need to unmount the volume so you’ll be able to write to it. Take a look at the disk name under “Mounted on” (starting with /Volumes/). Type umount -f [disk name] Enter, replacing [disk name] with exactly what was listed under “Mounted on.” Important: if there are any spaces, you’ll need to edit the name and put that portion, between slashes, in quotation marks. For example, if the name is /Volumes/My Awesome SD Card you’ll need to type umount -f /Volumes/"My Awesome SD Card" instead. And if this doesn’t work, check here for another tip on unmounting the volume.

4. Identify your Raspbian disk image.
Now you want to switch to the directory where your downloaded Raspbian disk image is. This is likely to be the Downloads folder in your home directory. If so, then in Terminal you’ll type cd ~/Downloads Enter. Then type ls -al Enter to see a list of the files in this directory. You’re looking for one with a .img file extension. In my case it’s 2013-02-09-wheezy-raspbian.img. If you don’t see that, but you see something similar with a .zip extension, you just need to unzip it. Type unzip [filename] Enter (using the real filename, of course) and then type ls -al Enter again, and you should see another file with the same name but ending in .img. That’s the one.

5. Write the image to the SD card.
Now that you know the name of your Raspbian disk image and the disk you’re writing to, you can run the dd command to copy the image over. This command includes a lot of different options for setting the block size, etc. The kinds of technical details about computers most of us haven’t thought about since the early days of MS-DOS, if ever. In my experience these settings don’t appear to matter here, however, as I was able to prepare my SD cards with only the basic parameters of if (input file) and of (output file). Here’s the command I would use in my exact situation. Adjust your if and of according to your results of steps 3 and 4 above.

dd if=2013-02-09-wheezy-raspbian.img of=/dev/disk2

Then hit Enter and… wait.

And wait.

And wait.

This is the command line. You will get no feedback that any progress has been made, or that anything is happening at all. So just leave Terminal open and go about your business. Some substantial amount of time later (in the realm of a half hour, in my experience), the process will have completed, and you’ll get your command prompt again. That’s how you know it’s done. Now, go back to the comfortable confines of the Finder and see if the SD card is showing up as a mounted volume. If it is, eject it. Now you can take out the SD card and insert it into your Raspberry Pi. You’re ready to power up!

Next time… powering up your Raspberry Pi with Raspbian for the first time.

The Raspberry Pi Arcade Project, Part 1: Introduction

If you’re bothering to read this, I probably don’t need to explain either the Raspberry Pi or emulators (specifically, MAME and Stella), but for the sake of completeness, I will.

Raspberry Pi

The Raspberry Pi is a tiny, inexpensive Linux-based computer that, after years of anticipation, was finally released to the public last year. It’s designed to be versatile and to encourage creative, educational programming and electronics projects.

Emulation Software

Emulators are software programs designed to run on modern computers that emulate the physical hardware of older, simpler video game and computer systems. When combined with ROM files, the programs that ran on those old systems, it is possible to play near-perfect recreations of those classic games on modern equipment.

Of course, while the emulators themselves are (usually) perfectly legal, there is a (charcoal) gray area of legality regarding the distribution and even the possession of these ROM files. Legally, you should only possess ROM files for games you physically own. In the case of home video game consoles, that would be the original cartridges or disks. For arcade games, that would be the actual hardware cabinet with all of its electronic guts… or, at least, the ROM chip from said cabinet that contains the actual game program. (I do actually own an original Asteroids arcade cocktail table, and a very large collection of original game cartridges for the Atari 2600, 5200 and 7800; the Intellivision; the Nintendo Entertainment System [NES] and others. These will be the focus of my efforts with this project.)

There are numerous emulation programs, representing dozens of arcade and home video game systems, and most have been ported to a variety of different modern platforms, including Windows, Mac OS X and Linux. My interest primarily lies with the classic games of the late 1970s and early 1980s; specifically, arcade coin-op games which are emulated by the Multiple Arcade Machine Emulator (MAME) project, and the Atari 2600 which is emulated by the Stella project.

One of the dreams of many aficionados of early arcade games is to own a “MAME cabinet” — a real arcade game cabinet (or modern recreation thereof) with a modern PC and display inside, programmed to work with an arcade-style control panel, and loaded with emulation software.

The Project

I’ve wanted to build a MAME cabinet for years. The biggest hurdle for me has been a willingness to dedicate an expensive (or even semi-expensive) and significantly overpowered PC to use solely as the “brains” of such a cabinet.

I’ve also been interested in the Raspberry Pi ever since I first heard of it. The idea of a credit card-sized Linux computer that could be embedded in a creative electronics project sounded amazing! But possessing a woeful lack of knowledge of the circuit board-level details about electronics, and being equally woefully inept at either soldering or construction, I wasn’t sure what I could really do with it.

But then it hit me… I could build a MAME cabinet! What’s really great about attempting a project like this today is that you don’t really need to solder or build anything. The X-Arcade Tankstick is an (almost) plug-and-play, arcade-quality control panel, and the Xtension Arcade Cabinet is a prefabricated arcade-style cabinet designed to work perfectly with the Tankstick, the PC of your choice, and a 22-inch TV or LCD monitor to create a MAME cabinet that’s still a fun DIY project without requiring the same levels of skill that have previously made this kind of thing unapproachable for me.

The Road Map

I am already well underway with this project, but from the beginning it has been my intention to create a series of blog posts detailing the process, so others who, like me, have an intermediate-or-better level of knowledge of command line Linux; a rudimentary understanding of electronics — at least, which plugs go into which ports; and above all a deep and abiding love of classic ’80s video games, can make this kind of thing happen.

I owe a huge debt of gratitude to Shea Silverman, who is several steps ahead of me in working with and blogging about using the Raspberry Pi for emulation, but whose blog posts come with a tad steeper of a learning curve than what I am hoping to lay out for the readers of these posts. I’ll tell you what I think you need to know to make this stuff work, but for a more in-depth exploration of the details, please check out his blog.

Now then, here’s an outline of the posts I intend to include in this series. (I’ll update this page to make each a clickable link as the posts get published.)

Part 1: Introduction
Part 2: The Essential Gear
Part 3: Get Raspian
An Interlude
Part 4: Up and Running with Raspbian
Part 5: Emulator Set-up — Stella
Part 6: Emulator Set-up — MAME
Part 7: Configuring the X-Arcade Tankstick
Part 8: Polishing Your User Experience
Part 9: Preparing the Cabinet
Part 10: The Finished Product