Using an SSH Config File to Ease Connections Between Servers

Tuesday, 09 June 2009

Fabien Potencier, (founder and lead developer of the Symfony Framework) shares a Quick SSH Tip:

Some time ago, I re-discover a neat trick to simplify the connection by using the .ssh/config file. I don’t know why I forgot about it, but as it seems that a lot of people around me do not know about this file either, here is a small post on how it can be used to your advantage.

Most SSH applications (like Terminal or iTerm for Mac OS X) allow you to save connection info, so this might not seem immediately useful compared to that. This differs in that it isn’t limited to one specific application. Every app will use the same SSH config file for the same user, so it won’t matter which app you’re using… you’ll still have access to these handy shortcuts. Neat.


Cross-Domain Ajax/XHR for Embedded Javascript Widgets

Wednesday, 03 June 2009

I’ve been looking for a solution to the problem of cross-domain XHR restrictions. Cross domain Ajax/HXR is necessary for creating a communications channel to and from embedded javascript widgets. The problem is simple: widgets embedded in a user’s site (blog, etc.) cannot instantiate Ajax/XHR requests because they do not reside on the same domain as the host serving the widget. This is an incredible bummer since it drastically limits what’s possible from an embedded javascript widget.

That’s where flXHR comes in:

flXHR [flĕkʹsər],(flex-er) is a client-based cross-browser, XHR-compatible tool for cross-domain Ajax (Flash) communication. It utilizes an invisible flXHR.swf instance that acts as sort of a client-side proxy for requests, combined with a Javascript object/module wrapper that exposes an identical interface to the native XMLHttpRequest (XHR) browser object, with a few helpful additions and a couple of minor limitations.

It’s an incredibly clever use for flash. (Apparently the concept has been around for a while.) I’ve used flash as a middle-man before with SWFUpload, but I’ve never thought to use it as a client-side proxy for cross-domain XHR. There’s also a jQuery plugin that allows you to replace jQuery’s standard ajax transport with a flXHR version. There are of course, some downsides, but in the end, it bridges the gap to richer widget interactions with minimal fuss.


Thrift vs Protocol Bufffers vs JSON

Monday, 01 June 2009

Note: This article a work in progress. If there is anything that needs correcting please let me know by leaving a comment.

Originally this comparison included a look at JSON. Although JSON is small, lightweight, fast to transmit and easily serialized/de-serialized, it is disqualified simply on the basis that there is no built-in way to allow versioning of objects. Both Protobuf and Thrift allow some type of data versioning so that both clients and servers can continue to work without being upgraded, even if the protocol has changed. This is handy when rolling out a new protocol since there’s no need to orchestrate a massive protocol update across services before flipping the switch on a new protocol. Existing services will simply act on the parts of the data they understand while retaining and passing-through whatever other data is associated with the object they’re manipulating. Eishay Smith has a great demo of this functionality using Protobuf.

The Comparison

  Thrift Protobuf
Language Bindings Java, C++, Python, C#, Cocoa, Erlang, Haskell, OCaml, Perl, PHP, Ruby, Smalltalk Java, C++, Python
Primitive Types bool, byte, 16/32/64-bit integers, double, string, byte sequence, map<t1,t2>, list<t>, set<t> bool, 32/64-bit integers, float, double, string, byte sequence, “repeated” properties act like lists
Enumerations Yes Yes
Constants Yes No
Composite Type Struct Message
Exception Handling Yes No
Documentation Lacking Good
License Apache BSD-style
Compiler C++ C++
RPC Interfaces Yes Yes
RPC Implementation Yes No
Composite Type Extensions No Yes
Data Versioning Yes Yes
Pros - More languages supported out of the box
- Richer data structures than Protobuf (e.g.: Map and Set)
- Includes RPC implementation for services
- Slightly faster than Thrift when using "optimize_for = SPEED"
- Serialized objects slightly smaller than Thrift due to more aggressive data compression
- Better documentation
- API a bit cleaner than Thrift
Cons - Good examples are hard to find
- Missing/incomplete documentation
- .proto can define services, but no RPC implementation is defined (although stubs are generated for you).

Much of this table was originally compiled by Stuart Sierra but has been edited to include additional information relevant to my own requirements.

Thrift and Protocol Buffers are both great choices and there seems like no clear winner between them. Since they seem to have more in common than they do in conflict, it really comes down to real-world application-specific needs.

I’d choose Protocol Buffers over Thrift if:

  • You’re only using Java, C++ or Python. Experimental support for other languages is being developed by third parties but are generally not considered ready for production use
  • You already have an RPC implementation
  • On-the-wire data size is crucial
  • The lack of any real documentation is scary to you

I’d choose Thrift over Protocol Buffers if:

  • Your language requirements are anything but Java, C++ or Python. See above.
  • You need additional data structures like Map and Set
  • You want a full client/server RPC implementation built-in
  • You’re a Rock Star programmer that doesn’t need documentation or examples

Royalty Free Wireframe Icons

Wednesday, 27 May 2009

Royalty free EPS and PNG wireframe icons:

This is a version of the Konigi Wireframe Icons which may be used in wireframes, on personal and commercial web sites, and in print publications. The product includes EPS and PNG versions of the original Konigi Wireframe Icon Set, and are suitable for use in vector drawing applications such as Adobe Illustrator, as well as for use in Microsoft Visio.


Hivelogic's Top 10 Programming Fonts

Monday, 18 May 2009

Dan Benjamin lists his Top 10 Programming Fonts:

In the past, we’ve had to decide between tiny monospace fonts or jagged edges. But today, modern operating systems do a great job of anti-aliasing, making monospace fonts look great at any size.

Here’s a round-up of the top 10 readily-available monospace fonts for your coding enjoyment, with descriptions, visual examples and samples, and download links for each.

A few years ago when I switched from BBEdit to TextMate I spent a good deal of time trying to find the right combination of theme, font and font size. I ended up pretty heavily tweaking an existing dark theme (Twilight) along with Monaco at 12-points with anti-aliasing. When Panic released Coda with a custom derivative of Bitstream Vera Sans Mono called Panic Sans, I ended up switching to Panic Sans. It’s just simply, subtly better. When you’re staring at something for hours at a time, you tend to notice the little elegant subtleties like crisper punctuation and cleaner character glyphs.

So now I’m trying out Inconsolata per Dan’s advice. A couple of initial observations versus Panic Sans:

  1. It’s much smaller at the same point sizes so I had to bump up the font size 2-points in order to get it around the size I’m used to.
  2. The glyphs have a tiny bit more flair to them… take a look at the lowercase “g” and “l” in Dan’s screenshots.
  3. So far, my only niggle is that this font wasn’t meant to be used without anti-aliasing. For some reason I just can’t bring myself to use an anti-aliased font in the terminal.

Macworld Interviews Tweetie Creator Loren Brichter

Friday, 24 April 2009

Macworld’s interview with Tweetie creator Loren Brichter reveals a glimpse into the reasoning behind Tweetie’s departure from a standard UI:

Macworld: How did you approach designing Tweetie for the Mac? It almost looks like a radical departure from the standard Mac app.

Loren Brichter: Radical, yet not. It’s an evolution of UI concepts, many borrowed and extended from the iPhone. It fits in as a Mac app, looks and feels like one, but the navigation and functionality is next-generation. The drill-down is inspired by iPhone, it was important to be able to make it easy to delve into tons of information without requiring the app to sprawl across your entire monitor. The sidebar was particularly interesting to design. I needed a UI that worked well with exactly one account but also scaled to many accounts. Old school Mac implementations might have had a double set of tabs, or a Mail-style sidebar, or a tab bar with an account dropdown box. All of these are flawed. Some take up too much screen real estate, some aren’t good enough at providing at-a-glance badge notifications on a per-account-subsection basis. The sidebar design in Tweetie for Mac solves these problems in an extremely elegant and scalable way. It’s new and different, which is hard for some people to swallow, but somebody needs to push the envelope and try new things or we’re all going to rot in UI hell.


Smooth Image Scaling in IE Via CSS

Wednesday, 22 April 2009

I came across this clever little CSS snippet for the first time today:

img { -ms-interpolation-mode: bicubic; }

If you’ve ever had to use client-side image resizing you’ve almost certainly run into this issue: IE completely mangles images resized via CSS or height and width attributes. As a general rule you’ll probably want to stay away from resizing images from within the browser, but there are cases where it just makes sense. For example, often times I’ll have to reuse a user’s avatar but at a slightly smaller size for a list or grid. It doesn’t make sense to resize the image and save (and manage!) another copy, so I’ll just resize it from within the browser itself. Up until now this was done with the knowledge that IE’s resizing of said image would result in a horribly pixelated version of the image but it was an annoyance that I was willing to live with since it’s just so convenient. And well, I don’t use IE, so it was out-of-site, out-of-mind.

Luckily this little snippet is easy to implement and brings quality in-browser image resizing to IE. Be sure to check out the example images at CSS Tricks to see why this seemingly minute detail is important to the overall feeling of quality for a site.


How to Spot Quality within Web Design

Monday, 20 April 2009

The Function blog has a great article on How to Spot Quality within Web Design:

Quality is a word that a lot of people like to use when describing their web design services. But what is quality, how do you know if a design is quality or not. Well, I think that there’s quite a few ways to spot quality within web designs. Once you can see just what goes into making a quality web design, you can use the techniques to perfect your own style.

I’ve put together a few pointers, and collected some examples to explain just how I look for quality within a website design.

There are some excellent, in-depth examples accompanying the post. Worth a look.


Tweetie for Mac: A Fresh Take on Desktop User Interface

Monday, 20 April 2009

Tweetie for iPhone has long-been my iPhone-native Twitter client of choice; it’s feature-packed and powerful, yet incredibly easy to use and beautifully designed. So, when I heard that Tweetie for Mac was in development, I was hopeful. The problem (I thought) would be the “lost in translation” effect of going from a mobile application to a desktop app. All too often I find that developers aren’t able to bridge the gap between platforms and an app that is successful on one platform seems to fall short on another. Thankfully, that seems not to be the case with Tweetie. On the contrary actually… Tweetie for Mac seems to have leveraged many of the (until now) mobile-specific idioms that are so prevalent in Cocoa Touch and integrated them into a well thought out desktop app.

This is the first successful iPhone-to-Mac transition for a software title I’ve seen and Tweetie for Mac definitely shows its iPhone roots. There is something decidedly iPhone-esque about the user interface with its horizontal sliding transitions and hierarchical navigation. Without having used the iPhone version first, Tweetie for Mac might seem a bit… well, radical in its design. It’s really unlike anything else on the desktop and it’s incredibly refreshing.

I’m sure this is just the beginning of the iPhone’s influence on desktop computing and we’ll soon be seeing more desktop applications leveraging iPhone-esque UI patterns. It might just be what we need to get past the dated “Desktop” metaphor rut we’ve been in for the last two decades.

Tweetie for Mac is priced at $19.95 but is on sale for $14.95 until May 4th. You can also use it in ad-supported mode for free or even buy a copy and choose to see the ads anyway.


Degradable and Unobtrusive Gauges Using gauge.js

Wednesday, 08 April 2009

I just came across gauge.js:

Gauge.js 1.0 allows you to add gauges (with shading and reflection) to your webpages. It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it’ll degrade and your visitors won’t notice a thing.

These gauges might look familiar if you’re an iTunes user as they mimic those found when filling up your iPhone or iPod.