A word of caution: you might want to check which ones are available to you. It will depend on your browser support requirements… And if you don’t know selectivizr, check it out. It will help.

The pseudo-snippets (just made that up) are triggered the same way as the CSS properties, but with the addition of a colon. The only exception to that rule is “of” which is not part of the trigger, so for instance :nth-last-of-type() is triggered with :nlt and not:nlot while :h will get you :hover.

There are actually some other CSS3 additions in the bundle, but I need to clean it up and add more stuff before I talk about it… In the meantime, feel free to poke around in the bundle editor.

I updated the download on here but I recommend you get the latest version via github which will eventually be the official download.

]]>
Sun, 11 Dec 2011 00:00:00 -0500Get jQuery Validation plugin to work with HTML5 field typeshttp://minimaldesign.net/articles/read/Get-jQuery-Validation-plugin-to-work-with-HTML5-field-types
http://minimaldesign.net/articles/read/Get-jQuery-Validation-plugin-to-work-with-HTML5-field-types
I’m starting to incorporate HTML5 stuff into the sites I code more and more and I ran into an odd problem with the popular jQuery form validation plugin. The “eager validation” (as soon as user input is valid, the error message is removed) would not work with HTML5 field types such as type="email" or type="tel" for instance.

Until the author updates his plugin, here’s a manual fix: in the plugin code, you’ll find a delegate() function (line 302 as of this writing). Inside the function, you’ll find something that look like that:

You can also do the search and replace directly in the minified version or use jsmin to minify the updated version yourself…

]]>
Fri, 01 Oct 2010 00:00:00 -0400New mHTML snippet for placehold.ithttp://minimaldesign.net/articles/read/New-mHTML-snippet-for-placeholdit
http://minimaldesign.net/articles/read/New-mHTML-snippet-for-placeholdit
I just added a snippet integrating the cool new service placehold.it. Check out their site and the video below for more info.

Grab the latest version of my HTML bundle on github (I’m eventually going to discontinue the download on my site when I get the time to update it) or use the “Update Bundle via Git” option in the mHTML menu (make sure you have a document open if the option is grayed out, TextMate is funny that way…).

Enjoy!

]]>
Mon, 12 Jul 2010 00:00:00 -0400Is the iPad a game changer? Should I care?http://minimaldesign.net/articles/read/Is-the-iPad-a-game-changer-Should-I-care
http://minimaldesign.net/articles/read/Is-the-iPad-a-game-changer-Should-I-care
Before we know what type of repercussions the iPad will have on web design, we first need to figure out if the iPad lives up to the hype.

A game changer?

When Jobs unveiled the iPad, I was in the “That’s it? Just a giant iPod?” camp. Yet, I bought one on its launch date. Why? Because during the few weeks between the announcement and the launch, I realized I should have thought the other way around: “Damn! the iPhone was a mini iPad the whole time!” Nicely done Mr. Jobs…

If you look at it this way, it all makes sense: Apple’s foray into the cellphone market was first met with a lot of skepticism, mainly because it was quite a drastic departure from their core business (ie. “Apple should stick to computers, they don’t know how to make phones”). But what if they’ve been making mini iPads all along? What seemed odd then seems freaking genius in retrospective.

Some smart people like Dave Winer or Shea Bennett don’t believe the iPad is a game changer, some even think you’re a tool if you believe so. Well, I guess I’m a tool… Because I’m certain the iPad is a game changer. But to see that, you have to go passed the hardware though. The game changer is not the hardware. What makes the iPad special is that it creates a new interaction model between the user and the device, and it redefines what a computers is supposed to be for.

A lot of very opinionated people seem to be concerned about the openness of the platform and its bias towards consumption as opposed to content creation. I think it’s bullshit. I never expected to stop using Photoshop and TextMate on my Mac Pro comes April 4th, and I don’t think the iPad can brainwash users into docile passive consumers all by itself. The iPad is just a tacit acknowledgment from Apple that most people don’t care that much about computers in the first place and just need a giant iPod. Apple went after consumers with music players and phones, and they just moved on to the next logical (and last) piece of the puzzle: computers.

That fact alone is a game changer.

Most angry geeks are just disappointed that Apple is shifting its focus further away from their own needs. Their anger comes from denial. They refuse to admit that Apple has moved on. They don’t like to be relegated to the role of second class citizen.

Personally, as long as Apple doesn’t stop making Macs (knock on wood…), I’m ok. Plus, I think creative people will find new ways to create with the iPad, some really cool apps like SketchBook Pro (first app I bought) or Mixr are already popping left and right…

So yeah… I believe the iPad is a game changer, so I bought one on the day it came out and started playing with it to experience first hand how iPad users are going to interact with the websites I build.

Should we build iPad specific websites?

Some of the implications are obvious: no Flash, no hover state, both portrait and landscape orientation, etc… Some others are only obvious once you hold the iPad in you hands… For instance, the fact that the iPad resizes websites on the fly to make them fit on the screen (that freaked me out when I first found out, but I haven’t read anyone complaining about it. Am I the only one so anal about pixel perfection?). What became really obvious to me after a few days of use though was that the iPad really does introduce a new interaction model. And as web designer, I just can’t ignore that. It’s not hard to notice how some iPad apps provide a vastly more enjoyable experience than their website counterparts. But I don’t think it’s a native app vs. web app issue though. The superior experience comes from the fact that the iPad’s user interaction model was taken into account during the native apps design process, not their website counterparts.

We need to think forward and start adding to our sites enhancements that emulate the functionality found in those native apps. The key though is to think further than “iPad specific” enhancements. Something like “touchscreen specific” enhancements. It’s not about hardware, it’s about software. For now (and probably quite a while), the end result is the same, but by thinking in terms of user interaction, we’ll future proof the enhancements we implement.

Hopefully, we’ll eventually get a new media type for this type of device… in 10 years ;) For now, I’m just going to use an updated version of CSS Overdrive (not publicly available yet, I’ll update this post when it is, and you can subscribe to the mailing list if you want to be notified).

]]>
Sat, 01 May 2010 00:00:00 -0400 Going from Print Design to Web Designhttp://minimaldesign.net/articles/read/Going-from-Print-Design-to-Web-Design
http://minimaldesign.net/articles/read/Going-from-Print-Design-to-Web-Design
Because of my job, I have a lot of designer friends. Most of them went to college for design, but didn’t study web/interactive design there, and I often get that question: “Where do I start?”

I usually end up writing a huge email explaining everything. This is how this article started, as a huge email…

Before You Start

The first thing to know: this is real life advice, I’m not selling anything, so I’m not going to tell you that web design is easy, or that anyone can do it… But, if you’re willing to put the time and effort into it, most of the knowledge you need is available online and in books. No need to go back to college…

Second thing to know: yourself. You got to sit down and take an honest look at your motivation and your goals. If the only reason you want to get into it is because “everyone wants a website” and that you feel you have to get into it, but deep down you real love is print design (you might even consider web design as a lesser form of design), then you probably shouldn’t get into web design, because you’ll suck at it. If you’re curious and interested about it though, it can be very fun and rewarding.

With that out of the way, which way to go from there really comes down to what you like and feel comfortable with. In terms of money, the more you go on the programming side, the easier it gets to make some… BUT, there’s no cutting corners… You really have to sit down and learn the actual language. Some people (like me) find it fun, but most designers don’t… I was lucky enough to be introduced to coding when I was about 11 years old, hacking in BASIC on a TI-99/4A and backing up to… audio cassettes! So I knew very early on I liked it. If you’re not sure, there’s really only one way to find out… Try it. The best way to go about it in my opinion is to build something. For instance, when I decided to lear PHP, I coded minimal gallery. It took me a while, and the end result was definitely not the most elegant code ever, but it got the job done and I knew enough PHP to get most common tasks done after that. You don’t have to start with something that complicated, the important thing is to make something that you can use for yourself and to finish it so it actually works in practice, not just in theory. It’s kind of like sports… You can read about tennis all day, you won’t really get it until you play.

Here are the basic different areas you can specialize in (you could break it down further or combined some of those to):

Your Options

UI design/Usability: no programming needed, but still very different from print design. You will need to familiarize yourself with many skills that just don’t exist in print design. And to some extent, you’ll have to go through the whole Jedi thing of unlearning what you know…

Front end (HTML/CSS): this is probably where you’ll be inclined to start, and you can’t go wrong learning this. It will help you being better at any of the other options described here. The good news is: in terms of programming, HTML is the easiest (it’s not technically programming, it looks like code, but it’s really just presentational markup). As for CSS, it’s both simple and deceptively hard because of its idiosyncrasies (and unfortunately, also because of Internet Explorer’s infamous buggy support for it). There are actually few people who understand CSS well. I do get a lot of front-end consulting work because of that. The HTML part is rarely a problem for anyone, but CSS drives quite a few people a little crazy. If you can become a CSS specialist, you’ll get a lot of work.

Back end: That’s the real programming… As a designer, you’re probably better off collaborating with a a developer who takes care of the back end for you. But if you enjoy coding, nothing stops you from learning that too. You’ll probably want to learn PHP/MySQL because it’s used everywhere and available on most servers. Another popular option, but not nearly as ubiquitous (at least for now) is Ruby and Ruby on Rails. the thing to keep in mind though: if hacking your own little programs doesn’t excite you, I’d recommend you don’t waste your time and just collaborate with a developer… Learning a programming language is an involved process.

Flash: it’s its own little ecosystem. You can do some really cool stuff in Flash, but for that, you’ll need to learn ActionScript, which is serious programming too. Another thing to consider is that most people tend to agree Flash is on its way out… I can’t predict the future, but I’d tend to agree. If you’re hoping to future proof your skill set with web design, you might be better off learning any of the other options I’ve outlined here. And, as a Standards advocate myself, I can’t really recommend proprietary technologies like Flash or Flex.

The Start

Ok, so… you ‘re interested in web design, you got a pretty good idea on what you want to focus on… then what?

As a print designer, you must first understand the fundamental differences between the two media. The quickest way to do that is to read A Dao of Web Design.

When that’s done, you should understand what Standards are all about. the reference in that department would have to be Zeldman’s book: Designing With Web Standards.

Once you got the basics roughly covered, you want to start building stuff as soon as possible. Keep creating. That’s how you’ll learn. However, there’s a right way and a wrong way to go about it. In a nutshell: taking a “shortcut” and using something like Dreamweaver or any other app that makes it “easy” to build a website will get you nowhere. You might be thinking: “but I’m just a beginner, I’ll start with that, and move on to more advanced tools later on.” But it doesn’t work that way. It’s as if you decided to become a Chef and the first thing you did was to buy a microwave and a bunch of frozen food. You’ll get to eat… But it won’t get you anywhere closer to your initial goal.

So, forget about Dreamweaver and all those apps. The only “visual” tool you’ll need is Photoshop (or Fireworks… some people swear by it, I just could never get used to the fugly Macromedia feel of the app, even after Adobe bought it).
Get yourself a good text editor (I’d recommend TextMate on OS X, and if I used a PC, I would probably check out Sublime Text or E-TextEditor), and oneofthosebooks and build something! It might take a little while before it all comes together, but just keep building… If you want to be a pro, you’ll need to learn how to code by hand. Period.

Once you get more comfortable, you might want to check out my Ultimate Web Dev Setup article. It outlines everything I use for day to day work. Some of it might go above your head for now, but it should be enough to get you started.

I terms of general info, tutorials, etc… The best resource out there is without a doubt A List Apart, you can pretty much read everything on there and you’ll be set, there isn’t one bad article on there (well, besides that one which I wrote about before). You’ll probably also want to become a member of a good forum where you can ask for help. sitepoint forum are pretty beginner friendly, cover most topics, and are very active. I would personally recommend staying away from the “33 Must Read CSS Tips!” type blogs who’s owners are a lot more interested in catchy headlines and adsense revenue than in the quality of the articles…

Your first site probably won’t be great… The key is not to make it perfect, but to finish it. Don’t waste too much time on tutorials… Build, build, build!

Hope that helps!

]]>
Sat, 12 Dec 2009 00:00:00 -0500Moving to the cloudhttp://minimaldesign.net/articles/read/Moving-to-the-cloud
http://minimaldesign.net/articles/read/Moving-to-the-cloud
I have contemplated moving to the cloud a few times before in the past. But I had concerns about the usual suspects: privacy, security, dependency, and with my own servers hosted in a state of the art facility (needed for some of my clients who require professional quality hosting), I didn’t think I really had a need for it. Yet, I finally made the jump… Why? In a nutshell: convenience & ubiquity.

The starting point though was email: I’ve never been satisfied with any email client I’ve ever used. I’ve tried them all, from Alpine to Gyazmail… I’d reticently settle for Apple Mail for a few months. The addition of MailTags made it tolerable. But every so often, I’d inadvertently venture on google and try to find something better.

I’m sure there’s an old Chinese proverb stating that adversity can be an opportunity in disguise… That’s what happened for me. AT&T in NYC is a joke: they’re ripping people off completely overselling their 3G network. After the 3G S came out, it got to the point that every single one of my calls were dropped after a few minutes. So, as much as I like my iPhone, I switched to Sprint and got a Palm Pre. Since the Pre works best with Gmail, I gave it another go as my main email client and… had an epiphany of sorts.

Gmail

I had a gmail account since the “invite only” times… I used it mostly as a “spam catcher” for online signups and never really delve into it. This time I finally looked into the settings menu, and more importantly, into the “Labs” tab of the settings. Gmail out of the box is ok, but turning on some of the settings and “labs” features turns gmail into the best email client out there. So the first thing you do, turn on:

Settings > General > Keyboard shortcuts

Settings > Labs > Canned Responses

Settings > Labs > Custom Label Colors

Settings > Labs > Go to label

There are some other cool features in there, but those are the ones that will really boost your gmail productivity.

Gmail is all about shortcuts… You can pretty much do everything without leaving your keyboard. There’s a little learning curve associated with that workflow, but once you got it down, you’ll be blazing through your emails… The most important shortcut to remember is: ? (as in shift + /) which will open a popup detailing all the keyboard shortcuts available to you. To give you real life example, here’s one way to check you inbox:

shortcut

action

g → i

Go to inbox

j or k

move to older or newer thread

x

select message/thread

enter or o

open message

u

return to list

x

select message/thread

v

move to…

v will open the label drop down and you can start typing the label’s first letters and it will autocomplete, just type enter to move your message/thread there. This is just an example… There’s a lot more you can do. One detail that caused me a little trouble at first was that I kept on typing m for “move to” instead of v and m actually “mutes” the conversation, which is very useful, but there’s no “un-mute” command so it was a little confusing at first. Turns out, you just have to move the muted conversation back to inbox to un-mute it (there will be a “move to inbox” button available when you open a muted message).

The other thing you need to do is work out a good label system for yourself, with custom colors, you can really set it up so that you know a lot about a conversation just by glancing at its labels. Here’s a screenshot of my setup to give you some ideas:

Use labels as metadata for emails

The @name labels are added to incoming message from other email accounts. So @work is added to all the emails sent to my business email, etc… The blue labels are the name of the clients, and the bright orange tells me I have to respond. So in that example, I know right away (and even when the text is blurred for privacy reasons here…) that the second and fifth emails in this list are the ones I need to get to first because they’re emails from clients that require a response.

There’s one thing you should know about this setup though: when you add external email accounts to gmail, they’re checked once every hour, you cannot customize the interval’s duration. If you’re compulsive about checking your email every 30 sec. This might not work for you ;)

There are many other good things about gmail: you can attach up to 25MB files per email and view most attachments you receive directly in your browser, you get about 8GB or storage, filtering options are easy to setup and flexible, and obviously, it integrates very well with the other google services…

Google Calendar

I don’t have much to say about Google Calendar besides the fact that it’s super easy to import your current calendar from most popular application, that it sports most usual features like reminders via email/SMS, public/private calendars, event invitations, etc… And it all syncs perfectly on my Palm Pre.

News Reader

I know this post is staring to look like a google advertisement… But once you start using Gmail and Calendar, you’ll be tempted to try everything else they’ve got to offer. I’ve used NetNewsWire for many years. They have a beautiful OS X and iPhone app and they recently discontinued their own synch option and replaced it with… Google Reader! I doesn’t synch perfectly though. And I just got hooked on being able to see the same thing from anywhere as opposed to synching my stuff to multiple places. Google Reader will import regular OPML files so it’s a breeze to move from any other RSS app. And after using Reader for a while, I realized that it’s actually faster for me because I don’t have to go back and forth between an app and a browser (yes, NetNewsWire has an integrated browser but it’s just not the same).

I have to say though, Reader is the weakest of the 3 apps. It’s ugly, and the “manage subscription” functionality is Web 1.0 all the way… But once it’s setup, it’s a very efficient reader, and I guess that’s what matters to me.

Git & Github

What about code? Yep, moving that to the cloud too… I’ve already created git repositories for my TextMate bundles. For my client’s work, I’ve setup a private server with protected directories where I can push my local dev repositories. You could pay for private repositories on Github, they have good inexpensive plans. But I have a “free for life” joyent account which comes with Git so I just set it up on there. I’ve written detailed instructions on how to setup Git for web development.

Pinboard

For bookmarks, I used to use delicious, until I discovered this relatively newcomer: pinboard.in. It’s basically a minimal version of delicious. There’s only what you need, no bells and whistles all over the place, just links, tags, and speed… It’s really super fast. The tag cloud looks like a tag cloud, not that ugly excuse of a tag cloud on delicious where you can’t find anything, and the minimalist design is spot on. Love it. There’s a one time fee to get an account but it’s definitely wort it for me.

Posterous

I’ll keep on posting my articles on here, but for everything else, I’ll be using Posterous from now on. This is the swiss army knife of social media management. You post on your Posterous account, and Posterous will post to pretty much any social website known to mankind on your behalf. You can post to Twitter, Vimeo, Flickr, Facebook, etc… All at the same time. And the best part of it is that you can post everything via email and the email scheme they use is brilliant: it gives you granular control of where your post will be re-posted. Last time I got so anthousiatic about something new was back in the days when this unknow little PHP blogging system call WordPress came out… Now, WordPress suddenly feels like a dinosaur.

GTD

That’s the last piece of the puzzle I haven’t figure out yet. Currently I use OmniFocus, and I love it. But I need to find a cloud replacement. Right now I’m looking at 2 promising offerings: Todoist which is not free, and I don’t really feel like paying for something that would not be too hard to build myself. And Tasck which looks very promising but it’s pretty new and missing too many features at this point to be really usable. Might have to build that one for myself… We’ll see!

Final Thoughts

What about privacy, security, dependance? Well…

Privacy: If something is really private, you shouldn’t put it online. Period. There’s nothing in my emails that would really cause me or my interlocutors any arm if it became public. And that’s the same for any piece of content I have online.

Security: I already shop online; My credit card info is all over the place. Having my emails online is benign compared to that. I’ve made my choice a long time ago, and I don’t even think it’s really possible to function normally in our current society without giving up on this illusion of security.

Dependence: there’s a chance that the company hosting your stuff goes out of business or looses all your stuff by accident. In Google’s case, either one is very unlikely… But ultimately, I think moving to the cloud requires a certain amount of zen non-attachment: you should be mentally ready to accept the loss of everything you have online at anytime and be ok with it. If not, you’re living dangerously. Also worth mentioning: I don’t keep ANY of my business related work in the cloud in one place… I have a pretty sound back up strategy for all my work stuff (even for email, I still download Gmail via Mail once a month and back it up with MailSteward which is itself mirrored on 2 different servers via SSH automatically).

For a more “philosophical” take on the subject, check out this NY Times article. I’m being a little sarcastic when I call it philosophical because in my opinion, it’s rather naive to think that the issues raised in that article are only pertinent to cloud computing… Still an interesting read though.

If you have any suggestions for cloud GTDing, please leave them in the comments, thanks!

]]>
Mon, 07 Sep 2009 00:00:00 -0400Git workflow for web developmenthttp://minimaldesign.net/articles/read/Git-workflow-for-web-development
http://minimaldesign.net/articles/read/Git-workflow-for-web-development
First off, I should point out that this is not a Git tutorial. If that’s what you’re looking for, I can’t recommend enough the PeepCode Git Screencast. You’ll be up and running in a couple of hours.

This article is more of bullet point type step-by-step on how to integrate Git within your web development workflow. The basic idea is to have a bare repository hosted remotely that serves as a “hub” you clone from. First you start working locally; when you got some work done, you create the bare repo on the remote server and push all your local work there; when you’re ready to let your client review it, you clone the bare repo one more time to a protected directory only your client has access to. Ideally you’d also want the live site to be a Git clone, but often enough clients already have their own hosting and it’s not always practical.

I have a life account with joyent from back in the days when it was TextDrive, so that’s where I host my Git stuff. Some of the details below are pertinent to their specific setup, but most of it should be relevant regardless of where you’re hosting your stuff.

Hooks

To setup a hook to push changes directly performed on the live server (for those last minute minor tweaks) to the bare repo, go into the live site’s Git repo hook folder, and add this to the post-commit hook (make sure the file’s permissions is executable (755) with something like chmod +x hooks/post-commit):

git push

Pass Protect your directpries

To pass protect the directory your client will access via HTTP with webmin, go to: Virtualmin > Services > Protected Directories > Edit Mail and FTP Users (this is for webmin, but cPanel, Plesk, etc… all have a way of doing the same thing).

For Joyent users

A couple of Joyent’s hosting specific settings (and maybe other Solaris setups in general, I don’t know). You need to change the shebang in the commit-msg hook (in “live” repo) from #!/bin/sh to #!/usr/bin/bash and also, if you get an error that says something like “hooks/update: syntax error at line 40: allowunannotated=$ unexpected” you should “turn off” the hooks (in the “hub” bare repo), setting them to 644 with something like chmod -x ~/git/*/hooks/* (thank Andy for the fix).

Conclusion

That’s it! You can now push, pull, and commit as much as you want from your local dev server to your “hub” and pull the changes on the remote “live” clone when you’re ready to let your client see the changes. And when your client needs a quick edit directly on the live server, it gets pushed automatically to the bare repo so it’s really smooth to stay in synch locally.

It’s a little bit of work to setup, but once it’s done. You’ve got yourself a smooth workflow with all that Git has to offer built right in. Once you go passed the initial learning curve, you’ll love it. Guarantied!

Just like my recently updated mHTML bundle, my TextMate CSS bundle does not replace the default CSS bundle anymore, it is now a separate bundle that works as an addition to the default bundle. The advantage is that the original CSS Language and Preferences files are left untouched and it eliminates any potential conflicts with future TextMate updates.

Installation & Update

Because of the way TextMate works, to make sure you get a clean default CSS bundle and mCSS bundle, you’ll need to backup and delete any CSS bundle present in ~/Library/Application Support/TextMate/Bundles/ and/or ~/Library/Application Support/TextMate/Pristine Copy/Bundles/ first. Then install the mCSS bundle (double click it after unzipping).

What’s new

mCSS is its own bundle that works as an addition to the default CSS bundle

Changed some tab triggers to minimize typing even more. See download page for details

Added more properties and corresponding values as tab triggers.

What’s next?

If you’d like to see something added, or if you find a bug, let me know in the comments. Thanks!

I just updated my TextMate HTML bundle to v.1.5. The main difference here is that it does not replace the default HTML bundle anymore, it is now a separate bundle that works as an addition to the default bundle. The advantage is that the original HTML Language and Preferences files are left untouched and it eliminates any potential conflicts with future TextMate updates.

Installation & Update

Because of the way TextMate works, to make sure you get a clean default HTML bundle and mHTML bundle, you’ll need to backup and delete any HTML bundle present in ~/Library/Application Support/TextMate/Bundles/ and/or ~/Library/Application Support/TextMate/Pristine Copy/Bundles/ first. Then install the mHTML bundle (double click it after unzipping).

How it works

Because it’s now its own bundle, I had to rework some of the tab triggers so they don’t trigger both snippets from the default HTML bundle and the mHTML bundle. The basic rule for the mHTML bundle is: all snippets are triggered with the 3 first letters of the element’s name. With one exception <table> (tab triggers the character code for a tab in the default HTML bundle)

What’s new

I rewrote all the commands in Ruby so they should be much easier to decipher and customize.

The table command will ignore multiple tabs, so each cell can be delimited by one or more tabs now. You can also have th added to first row or column.

The “navbar” command regex is a little smarter and will strip most punctuation from classes and URLs (not smart enough for accents though, it will strip those too).

The “clean up” command will remove most of the annoying invisible characters in Words documents that come out garbled in a browser, it will also strip multiple new lines and wrap paragraphs in <p> tags.

All snippets should be more consistent and I included the phrase and inline elements I arbitrarily previously left out…

What’s next?

If you’d like to see something added, or if you find a bug, let me know in the comments. Thanks!

Download

]]>
Sun, 03 May 2009 00:00:00 -0400Yojimbo vs. Evernote vs. Together vs. Journler vs. EagleFilerhttp://minimaldesign.net/articles/read/Yojimbo-vs-Evernote-vs-Together-vs-Journler-vs-EagleFiler
http://minimaldesign.net/articles/read/Yojimbo-vs-Evernote-vs-Together-vs-Journler-vs-EagleFiler
Finding the perfect OS X information/resource organizer can be daunting. I’d been using Yojimbo myself for a while but its lack of significant updates since its initial release compelled me to start looking around for alternatives.

Clearly, the final decision on what to use depends on your needs and personal taste, and some people would probably want to see a couple more apps added to this list: MacJournal, but I found it too specialized in journaling to be practical as a data organizer, and DevonThink which is the most powerful of them all, but it’s so powerful that I don’t think it belongs here, and it didn’t fit my requirements. Here’s what I considered while narrowing it down to my final choice:

User Interface (UI)

Yojimbo: clean and minimal. The rock solid UI demonstrates the Bare Bones team’s mastery of OS X development and Cocoa.Evernote: the opposite of what I wrote about Yojimbo… Check out the video below for some examples of the glitchy behaviors you get throughout the UI. Some of them are serious enough to be a deal breaker for me.Together: one of the best UI in this list. Very pretty and great use of Cocoa. Unfortunately, a few UI errors (at the code logic level) make me cautious about the long term viability of using this app.Journler: as pretty as Together, but cleaner, with great attention to detail and ingenuous touches spread throughout.EagleFiler: it’s fast, functional, pragmatic, clean, but somehow manages to make OS X ugly… Easy to use, but definitely not sexy.

Winner:Journler

Examples of Evernote’s glitches in OS X

Data Entry

Yojimbo: between the “Drop Dock” and “Quick Input Panel” you got plenty of options to get your stuff in, as well as its metadata, without having to go to the app itself.Evernote: as everything else in Evernote, the web “Clipper” is buggy. The OCR feature is intriguing though (I haven’t tested it myself). The menubar item is somewhat convenient. But Evernote’s main advantage is its iPhone app which can be great if that fits your workflow.Together: the “Shelf” is pretty efficientl to get stuff in and out of the library swiftly. It’s almost as good as (and clearly “inspired” by) Yojimbo, but the shortcut brings up the main app windows if it’s open… And I generaly don’t like to have an extra tab allways present on my screen.Journler: it doesn’t have a cool shelf or drop dock, but it provides similar functionality through the service menu and an actual drop box folder in its library. Not as cool looking as Yojimbo or Together, but since the drop box is an actual folder, you can add stuff in it even if the app is not running… So if that drop box is in a Drobbox… You can actually drop stuff in there from anywhere in the world for later review! And there’s a Quicksilver Applescript (I can’t find where I got it from anymore! I’m putting it for download here, if you know where the original is, let me know and I’ll update my post) for quick text entry too.EagleFiler: similar to all the other apps here, there’s a dedicated shortcut to import the current selection in the database.

Winner: they’re all roughly equivalent, but Journler takes the edge because of its additional physical drop box folder option.

Data Access (Browsing & Search)

Yojimbo: it’s the only app that does not have smart folders, but “tag collections” instead. That’s one of the main reasons I looked into an alternative in the first place. The search is very fast though since its data is stored in a SQLite database.Evernote: as I was writing this, I went back to Evernote to give it another look and clicked on a few tags in the sidebar, nothing would show up… I restarted the app and now it works… deal breaker again. Done with Evernote.Together: even with the limited amount of stuff I entered for testing, I already noticed a slight lag in search results. And I’ve read in a few places that Together gets slow as its content grows…Journler: because it’s a journaling app at its core, it’s organized around entries instead of files. You can add WIKI style links anywhere to other resources in its library. This approach turns the “file + comment” paradigm into “entry + attachment.” But you can set it to show the resource file instead of the entry when you first view it and get the best of both worlds (see video if you’re like “huh?”).EagleFiler: just like everything else about this app, it performs respectably well and reliably, but in a very uninspiring way.

Winner: Journler, by far. It provides all the same features as the other apps in terms of search, tagging, etc… but its WIKI style behavior makes it possible to add not just comments to files, but sophisticated contextual relationships between them.

Data Portability (Export and Sync)

Yojimbo: it stores everything in a SQLite database, but it’s a breeze to export everything in separate files. Unfortunately, you can’t move the database from it’s default location, so if you want to sync, you’ll have to spend $99 for mobileme or $30 for Webjimbo.Evernote: exporting your data will create an Evernote file, whatever that is… Not ideal. The sync of course is its one (and only) killer feature, with its iPhone app, website access, and synchronization between all your computers.Together: it stores all the files in neatly arranged folders. You can easily browse them in the Finder. And it exports all files without any problem. Using Dropbox to store your library will provide basic sync capability. As long as you don’t run the app on 2 computers at the same time, they can share the same database. Moving the database is flaky though. And you can’t actually move it, you have to create a new one and replace it with a backup of the one you want to move. As long as they named identically it will work.Journler: it has the same synch capability as Together available using Dropbox (I love Dropbox… can you tell? ;). Moving your data is easy: just make sure the app is closed, move the Journler folder, then restart Journler. It will ask you to locate you “journal” when it can’t find it in the previous location. There’s no native function to export files but there’s a great applescript available that makes it a breeze and which is actually more flexible than the native options in the other apps.EagleFiler: this is where this otherwise underwhelming application shines. It stores the info in a SQL database but keeps the files in a separate folder, so you get blazing fast access to info but a clean archive easily accessible through the Finder. Exporting is also very easy and you can store multiple databases anywhere you want so the Dropbox trick should work (haven’t tried though).

Winner:Evernote for synching, EagleFiler for data storage and exporting.

File Type Handling

Yojimbo: doesn’t handle audio or video. The Image viewer and PDF browser are very basic. Control clicking on JPG lets you open in Preview, regardless of the default set in your preferences.Evernote: actually not too bad compared to the rest of the app. It lets you open imported files in any app you want and the different viewers are decent.Together: the PDF viewer is very good. You can open the files in there default app when control clicking in the list view, not the preview.Journler: it has the best PDF viewer out of all of them, with outline and dedicated search field. It has convenient shortcuts right above the file preview that let you open the file in the Finder or your default app. You can also record audio and video straight from the app (if you have a cam or a mic).EagleFiler: very basic handling of all file types, barely better than Yojimbo.

Winner:Journler.

And The Winner Is…

The Showdown Winner: Journler

I realize I only scratched the surface here, a feature per feature comparison would take too long to write… and read… So I opted to stick to the major flaws and qualities I came across while testing each app. Feel free to let me know if you think I missed something major.

DISCLAIMER: here’s a potential deal breaker regarding Journler: the developer might stop working on this app in the futur. Make sure you’re ok with that before you spend dollars on it… I personally don’t mind since it should remain compatible all the way through Snow Leopard. By then, it’ll be time for another showdown. If you’re uncomfortable with that, I’d recommend Together as a second choice.

UPDATE: Journler development has officially ended… Since I’m already using it, I don’t really have an incentive to start using something else quite yet, but if you’re shopping for a brand new system you might want to check out Yojimbo 2.0 or EagleFiler. Both of them are pretty solid options.