7 Days with Coda 2

May 26, 2012 — Day 1:

Downloading Coda 2. The sting still lingers from having just spent almost a hundred bucks for an app I still have yet to experience. Judging from the screen shots and the reviews on the Mac App Store, Panic, Inc.’s sequel to one of the most famed and quintessential code editors looks like one of the best 2.0 redesigns of any app I’ve seen. Well, at least that’s what the screen shots show me.

Weighing in at over 113 megabytes, Coda 2 finished downloading. Not having enough time to fully appreciate and experience Coda 2, I decide to leave the rest for tomorrow. Time for a good night’s sleep.

May 27, 2012 — Day 2:

I hit up Espresso 2, one of many of my favorite apps and not to mention, my code editor of choice. I don’t know why I brought up Espresso instead of Coda, even though I downloaded it just a few moments ago, and this “wired-in” mood of creativity consumed me. To me, Espresso 2 is my preferred niche of a web development app, and the idea of having to use something unknown (I’ve never used Coda 1 before) to start something new felt both worrying, and exciting.

I might as well jump into it, I thought.

I CMD+Q’d Espresso, and set up Coda 2. The app has iCloud syncing. That’s a score one for Coda. I’m beginning to like Coda now. Coda looks good. To be clear, however, as I write this review, I have no server-side knowledge at all — at least any that I’m aware about, so I have to take Coda 2 from a front-end developer’s point of view. I feel as if I’m missing something because of that. This could probably be a half-review of Coda 2, as if I’m just reviewing the design part of it.

If anyone knew me well enough, they’d know I have a knack for recreating videos that I like — for example, as soon as I got Clear, I copied the exact list from the demo video. I mimicked the actor’s hand pose, and followed his style as he marked tasks as done with a swipe. It makes me feel like I’ve gotten exactly what I saw.

The same for Coda 2. Having watched the insanely great demo video up on Panic’s Coda 2 webpage, I tested everything. But before I did that, I set up my project.

As I set up my site, I find it more and more that Coda 2 feels like an app built for the type of people who build whole websites — the kind of people who know not only front-end development, but everything in between website building. Basically, people unlike me.

Coda was originally developed as an app dedicated to one-window website developing. Their first version of Coda won an Apple Design Award at the 2007 WWDC, and Coda 2, from my impressions, looks like an app that, even from the icon itself, deserves an Apple Design Award. The fact that Panic managed to combine the features needed by a professional (I’m stressing it here) web programmer, into a single navigable interface. As far as I know, design is all about planning aesthetically, and from what I see in Coda, Panic’s design was well thought out and executed accordingly. (As should any other app.)

I scramble to find the nearest server I could buy for the purpose of trying out Coda 2, until I then realise I don’t need one. Local editing for the win.

I then play around with Coda’s settings and tweak around with the looks a bit. I resize the window around, pull some toolbars and sidebars in and out, and every now and often, I stumble across something nifty. Particularly one where you resize the top toolbar, and the icon tabs fold into text. As well as the traffic lights that fold from vertically (circa iTunes 10.0) to horizontally.

Though, I really shouldn’t be fussing around with it much, as “a person only flails around with their rig when they don’t have a clear idea of their work.” That’s a Frank Chimero quote for you.

May 29, 2012 — Day 3:

I finally gave myself some time to do some serious work. I just read through Frank’s first chapter of The Shape of Design. It’s a good book. Inspired me to design my website. I need to code, and there’s an itching that needs scratching. (Man, that’s lame.)

I began by playing with some CSS a bit. Coda 2’s auto-tag-closing feels like Espresso’s. Same with the code snippets, but slightly more advanced. Don’t know how to implement it though. The HTML editing, however, feels great. It makes my single static page feel like a heavy website. Maybe it’s the UI. But whatever it is, it feels much more than lightweight.

Editing CSS in Coda 2 is a joy. Like Espresso 2, Coda 2 comes with a visual color picker that you can use with your CSS. Aside from that, it comes with a gradient composer. That’s really handy. Think Gradient app, but in-built (and without SASS).

I re-watched Coda’s tour video again to see some features I may have missed. Code folding looks interesting, yet I have no use for it, since most of what I mainly code is minimal and light. I have this rule of using no more than 8-letter names, and as less markup as I can. Or maybe it is useful. Having just copied and pasted a chunk of JS, looks terrible in the HTML. Code folding makes that look much better.

Now, the UI feels cluttered. But not too cluttered. I have a fancy for minimalism, and Coda’s full-on array of buttons, options and settings feel way too overloading for me. They should implement an option for the icons to fade out when you don’t need them, and fade back in when you hover over them. In other words, I want Coda 2’s sophistication and Espresso 2’s simplification combined.

P.S. The icons on the sidebar don’t feel as crisp as the other great icons within the app. Take a look below.

May 31, 2012 — Day 4

I literally just stared at the icon for almost 15 minutes. Panic’s icons look so great, and Coda’s in particular, looks so lifelike. Those water droplets look insane.

I head back to The Backlog, my personal site, adding an idea I’ve come up with in the past few days. I was thinking of making a website footer, making up something minimal (but not too minimal) and functional. I then decide to implement media queries, (y’know, to make the site responsive and all). I personally think the web is an active platform, it isn’t static akin to the pages of a book: it’s malleable, and having that responsiveness built into a webpage makes the content feel active and flowing.

I switch back and forth through the CSS marking up the code. Coda 2 has a webpage preview built-in, and having never used it before, I try it out for the first time. And, it’s terrible. The fact that I can’t pull the preview window out of Coda makes me have to use Safari all the time. Not so good, Panic. Did you design this for full-screen? If so, at least make it work for responsive designers and developers.

Or maybe they’re not against it? I then realise you can pull it out, but it’s hidden deep within the menu bar settings. That’s OK then, but it’s still hard to find.

June 3, 2012 — Day 5:

I’m staring at the AirPreview icon in Coda’s status bar. Looks promising, though as unfortunate as I am, I don’t have an iPad to test it on.

The AirPreview thing reminds me of Marc Edwards’ Skala Preview, to provide a 1:1 preview of what your content will be like on the iPad. It could be used for responsive testing, I thought. This made me proceed even further into deep thought.

Coda 2 can get crowded at times: the top path bar above the text editor annoys me. I have no need for it (I know heaps of other people do, though) and I wish I could just hide it. Though, there’s a feature in Coda in that path bar that I really like: it has a quick-search button that instantly searches through relevant files of your project. Much better than spotlight too, because it’s much quicker.

Tooltips look great in Coda.

June 4, 2012 — Day 6:

I’m finally warming up to Coda! There’s a hints feature in the sidebar that’s like a Wikipedia for code! It also changes as you type specific things, for example, if I type in “position” in the CSS, the hints cleverly shows a fact file about how and when to use it. What’s even better is that Coda comes with books. There’s a collection of very handy reference guides, great for any kind of developer. However, as I thought they’d be, they don’t literally teach you how each language works, and how to use it. I tried learning some Javascript reference, and found no luck.

In the sidebar, Coda 2 also comes with a validator, which is pretty handy. Thanks to it, I fixed up most of my code. I’ve never coded up a perfectly validated HTML file before. I feel like I’ve achieved something.

If I may have a basis of comparison, Coda 2 feels like Dreamweaver done right: It’s in as much more sophisticated, as it is well designed. Coda to me, however, feels much like Dreamweaver itself. Not negatively however, but positively. It has this extra bloat of features I’m not as inclined to use, however the fact that they’re there ready for me to implement at any given moment, is fine. That’s if I do get smarter and learn the rest someday.

Later, as I tweak around more, I find more things that prove to be really awesome. That can be explained by the screen shot below:

Epic. There’s so much I could say, but I’m speechless. Panic is full of surprises.

June 8, 2012 — Day 7, Conclusion.

I find Coda 2 much more of a joy to use than any other web editor now. Its sophistication mixed with simplicity, and its design mixed with complexity appeals to me, as it makes the work I create feel much more like it is, in contrast to lightweight apps and the rest.

So, was Coda 2 worth the $99 dollars? The proper question you should be asking is “what can I do with $99 dollars?” And the proper answer to that is determined by your knowledge, skill-set, and the motivation to do much more. Coda 2 is merely the combination of a palette, an abundant plenty of brushes and a canvas. Coda 2 is to a web developer as a paintbrush is to a painter. What you can do with it is determined by you. The tools are there for you to use.

In my days of using Coda, I’ve found how much more I could do. Panic’s great sense of aesthetics and design, and the combination of the culmination of months of interactive design, code and hard work, is the lovechild of what is Coda 2. Much more than its predecessor, the 2 is the suite for web developers.

And much more, if you think you can do better.

Get Coda 2 on the Mac App Store now for only — $99 $75!

* I took breaks in between. I’m sure you could tell.

Jumpstarting a Design Community

Understand Your Compensation

Designer Monoculture

The State of Design Leadership

The Science of Product Design

Interview with Michael Flarup: Co-Founder and Lead Designer at Robocat

The Importance of Design Conventions