Filed under: coda, tech, web development

Icon.Coda2

Last December I got an email that made my inner geek squeal with delight: An invitation to join the Coda 2 alpha and beta test. If you have no idea what those words mean, let me fill you in.

I have spent my 14-year professional career developing web sites. Things have changed a lot in those 14 years, but one thing has not: Building web sites requires a lot of different tools. You need an editor to write the code, you need an FTP program to put the code on the server, you need a web browser to preview the site as you build it, you need a database administration tool to build and populate the content of the site, and oftentimes you need a terminal application to change the way the web server works. Up until five years ago, the workflow I used to work on web sites involved at least five different programs all running at the same time.

In 2007, the first version of Coda was released, and it changed the way I do my job. Coda rolled most of the tools I mentioned above into a single interface and streamlined the process of building sites in a major way. So when I was invited to help test out the upcoming major new version of Coda, I jumped at the chance.

The first time I cracked open the Coda 2 beta more than five months ago, I was somewhat taken aback. It's a pretty big change. Rest assured, though, that everything you love about Coda is still there -- the interface has just been streamlined in order to (hopefully) make your work easier and more efficient. Let's start at the "sites" tab.

Sites 

1.Sites.Expanded 

If you're already a Coda user, the Sites tab will look very familiar with one very welcome addition: Folders. Coda 2 allows you to group sites into folders, and they work exactly like you would expect if you've ever used the iPhone or iPad. The main screen shows you the collection of folders and when you click one, a panel slides down to show the sites contained within. A simple slider at the bottom allows you to change how big the folder and site icons are and, if you have a lot of sites, you can even drag the slider all the way to the left to get a simple Finder-style navigator and skip the iOS-style folders:

1.Sites.Expanded.Small 

Files

Once you've clicked into one of your defined sites, you'll be kicked over to the Files tab. The initial view is a split-view that shows you your local files as well as any remotely-defined FTP / SFTP filesystem. All of the sites I work on are hosted remotely, so I typically switch from this split-view to a remote-only view.

2.Files

You can see from the buttons at the bottom that this filesystem navigator is just as flexible as any Finder window. You can view your files in the List view that I'm using, or switch to Thumbnails, Columns or Cover Flow. The three buttons in the center allow you to choose whether to view your local files, remote files, or split the window to see both at once. A breadcrumb trail at the top shows you your current directory, and simply clicking on any part of the breadcrumb trail will jump you up to that folder. The Files tab runs on the same FTP engine that powers Panic's Transmit app, so you can do nearly anything here that you can do in Transmit including uploading, downloading, renaming and moving files around. As you would expect, you can double click a file to open it up in the editor view, or right-click to get a choince of options for working with the files in other applications.

Editor

3.Editor

On first glance, the Coda 2 Editor tab is largely unchanged. And for good reason -- it worked fine in the original version of Coda, so why mess with a good thing? Once you start using it, though, you'll find a lot of little tweaks that make it even more useful than it already was. The first thing you will notice is the visual file tabs at the top of the application. They not only show you the name of the files you have open, but even show you tiny screenshots of the files. This may not be entirely helpful for PHP or other scripting languages, but if you're working with straight HTML files you will actually see small thumbnails of the rendered pages. 

Apart from these new visual tabs, the Coda 2's editor has added quite a few other changes.

Code Folding

3.Editor.Folding 

When people talk about the shortcomings of the original Coda, code folding is almost always the first thing mentioned. It's finally been added to Coda 2, and it works great. You can select any block of text you want and hide it from view. They've added a nice selection of keyboard shortcuts to make it super-simple to fold the code you want, including a "Fold Current Block," "Fold All Blocks at Current Level," "Fold All Level 1 Blocks," and several others. Of course, you can also just select any arbitrary code you want and fold it with another shortcut. I've never been a big user of code folding, but in my time working with Coda 2 it's become a regular part of my workflow and it works really well in Coda 2.

Active Path Bar

3.Editor.Quick.Pick

The other major addition to the editor that has really helped increase my productivity is the Active Path Bar. It not only shows you the full path to the file you're working on, just like the breadcrumb trail in the Files tab, but you can also click on any of the crumbs to get a quick file picker. Rather than going back to the Files tab to find and open up another file that you want to work with, you can just click on the folder that contains the file you need to edit and select it from the inline list of files. Very smart feature, and immensely helpful.

Search and Replace

3.Editor.Search

This isn't really anything new, but it works so well that it's worth looking at again. I love the search and replace tool in the original Coda, and it's still here in Coda 2. At its simplest, it can search for strings of text and replace them with other pieces of text. It also has a powerful regular expression engine built in to allow you to search for patterns and replace them with other patterns. If you don't know more complicated regular expression syntax, you can use the wildcard buttons to make it a little easier. And of course, it has a ton of options including case sensitivity, searching selections, constraining wildcards to single lines, as well as storing recently used searches. I don't believe anything has changed here, because it worked so well already.

Variable Autocomplete 

3.Editor.Variable.Autocomplete

The original Coda had pretty good support for code autocompletion, but it was pretty well constrained to language keywords. When typing custom-defined variable names, it wasn't a lot of help. Coda 2 has added autocompletion of custom variables, and it works really well. I've never relied much on autocompletion in general, but I have definitely used it a time or two while working with Coda 2 and it's been a welcome addition.

Preview

Preview mode from the original Coda is still here, and they've added some very helpful features for cross-platform developers, including a variety of user agent string options. With a click of the mouse you can preview how your site will look on an iPhone...

4.Preview.iPhone

...or an iPad.

4.Preview.iPad

The Preview pane has gotten smarter too: No more manual refreshing. If you have a split window set up, changes you make in your code are reflected in realtime in the Preview window. 

The Sidebar

3.Sidebar

One of the features of the Coda 2 Editor that is sure to be touted and featured most prominently is the flexible sidebar. It's very similar in concept to Coda's original sidebar, but it is -- in some ways -- far more flexible than its predecessor. Clicking on the Home tab of the Sidebar brings up a list of all of the modules that the sidebar contains. You can click them directly from here, but what is really helpful is that you can drag any of them up to the top and arrange the tabs however you need. You'll see from my editor above that I put my most frequently used tools -- Navigator, Hints, Clips, and Validate -- right at the top for easy access. Most of them are pretty self explanatory, but I'll give each one a quick rundown.

The Sidebar - Clips

3.Sidebar.Clips

Clips was one feature from Coda that I always loved the idea of, but hated the implementation. It always felt like an afterthought: Clicking the 'clips' button brought up this strange modal floating window that allowed you to drag static clips of code to your editor. The problem -- apart from the awkwardness of the floating window -- was that these clips were very rigid. You could define a place for it to leave your cursor after inserting the clip, but little else. The biggest improvements of the Clips implementation in Coda 2 are the fact that you can define multiple placeholders in your clips to tab through after you've added the clip to your code, and you can trigger the inclusion of a clip with any keyword plus the "tab" key. If you have a custom function with multiple parameters, can you can never remember the order of those parameters, you can just define a clip to make it easier. And the fact that your clips are accessible in this built-in sidebar is infinitely more helpful than the awkward floating window from the original Coda

The Sidebar - Files

3.Sidebar.Files

OK, so not all of the sidebar modules are all that helpful. The Files module really just duplicates the functionality of the Files tab, and I'm not really sure why you would use it. But there it is.

The Sidebar - Find In 

3.Sidebar.FindThe Find In sidebar module brings the power of Coda's search feature to a side-wide scale. Perform search-and-replace operations on every file in your site with ease. The one caveat here is that it only works on local files. If you're like me and develop almost entirely on a remote server, this feature won't be much help, atlhough it can search through all of your open files. But if you work on a local MAMP installation, this is sure to be a useful feature.

The Sidebar - Hints

3.Sidebar.Hints

The Hints sidebar module replaces the hints panel in the original Coda, and gives a lot more helpful information. This is one of my top-two most used sidebar modules, as it gives a really easy way to remind yourself of the syntax of certain language functions while you're working. Either leave it up while you write and let it show you hints based on what you're typing at the moment, or use a simple keyboard shortcut to get a crosshair icon you can use to select specific functions you need help with.

The Sidebar - Navigator

3.Sidebar.Navigator

 My other most-used sidebar module, Navigator shows you a quick overview of the file you're actively working on. Coda scans your code and gives you quick links to important parts of your code depending on what kind of code it is. If you're working on a PHP script, it will show you links to all defined functions and includes. If it's a CSS document, it shows you all of your defined styles actually rendered in the style you have defined. 

3.Editor.CSS

 You can even arrange all of the Navigator items alphabetically which is very helpful when working with class definition files.

The Sidebar - Validate

3.Sidebar.Validate

The Validate sidebar module is primarily for HTML / CSS junkies, as it doesn't really work with any other languages. It scans through your code and alerts you to places where your code isn't defined properly. As you can see from the screenshot above, I desperately need this tool.

The rest of the sidebar tools --Places, Publish, SCM, and Shared -- are ones that I don't have a lot of experience with, so I don't really feel qualified to comment on them. It's also worth noting one more great feature of the Sidebar: It's easily dismissed. I do use the Navigator and Hints panels quite frequently, but it's very easy to hide the Sidebar entirely with a simple keystroke when I don't need it, in order to get a little extra horizontal editor space. The Sidebar can also be placed on the left side of the editor window, if that's your preference.

 At this point, given the length of this review, I feel like I must have exhausted all there is to say about Coda 2, but we're really just scratching the surface. What we've covered so far -- the Sites and Editor tabs -- are really only two fifths of the tools Coda 2 gives developers. The final three aren't nearly as complex, though, so we'll take a brief look at each of them before I wrap this up.

The Terminal

3.Terminal

Coda 2 brings back the Terminal feature of the original version, and it works pretty much as you would expect. If you're a UNIX / Linux developer and have shell access to your web server, Coda 2 makes it very easy to jump straight into the server to do whatever command line tasks you need to do.

Books

3.Books

If you need more than the Hints Sidebar tab gives you, Coda 2 comes with an in-depth reference guide for many, many programming languages. This feature did exist in the original version of Coda, but was little more than a frontend to online documentation. Some of the languages that have been added in Coda 2 include jQuery, MySQL, Subversion, and Git.

MySQL

3.MySQL.Editor

Speaking of MySQL, Coda 2 now includes a full-featured MySQL editor. This is a major new feature, as it means one less piece of extra software I have to run. You can browse through your databases, make changes, define tables, and run custom queries, all from within Coda 2. It's a little rough around the edges, and if you're a heavy-duty MySQL power user you will probably find yourself returning to CocoaMySQL or Sequel Pro from time to time, but the MySQL implementation in Coda 2 meets around 80% of the needs that will come up when you're developing.

Shortcomings

While Coda 2 is overall a fantastic improvement on the original, there are a few areas where it comes up short. One of its biggest shortcomings is also one of its biggest new featuers: The Sidebar. It's flexibility is great, in that you can re-order the modules however best fits your needs, but at the same time there is no way to use multiple sidebar modules at once. Personally, I would love to be able to split the Sidbar horizontally and use the top two thirds for the Navigator module and the lower third for Hints. As Coda 2 currently stands, this isn't possible. Sure, switching between the Navigator and Hints is as simple as a hotkey combination, but it would be nice to not have that extra step.

The addition of the MySQL editor to Coda 2 is welcomed, but in a lot of ways it feels just "tacked on" to Coda. The Editor tab has a lot of great keyboard shortcuts to make working with it easier, like wrapping selected text in tags, and commenting a selected block of text. The MySQL tool lacks this level of polish. There are a few keyboard shortcust available, but you can really only find them by accident, as they don't appear in the menu structure anywhere. Additionally, the Custom Query tab does support running a batch of queries, but it lacks the standard "run everything" and "run selected query" buttons that more full-featured MySQL tools have.

Conclusion

Coda 2 is big. Really big. It's been five years since the original version of Coda launched, and this new major release brings a lot of features that Coda users have been clamoring for, including code folding, MySQL integration, and more comprehensive books. There are even more features that I haven't touched on, like Git support, full-screen support, and the promise of iCloud syncing (coming in a later version, from what I understand). If you're a Coda user, you're going to want this. If you were a Coda user and have since switched to other tools, you're going to want to at least check this out.

Coda 2 goes on sale this Thursday, May 24. Introductory pricing will be $75, but it sounds like it will be on super-discounted sale for $49 the day it launches. If you're interested in buying, you'll want to jump during that first 24 hours. And while it will be offered through the Mac App Store as well as directly from Panic's website, I would recommend going through the Mac App Store, as it's a pretty safe bet that iCloud support will only be offered in the App Store version.

Finally, one more major feature that could change the way you use Coda, and a little teaser for my next article: AirPreview and Diet Coda.

3.Editor.Diet.Coda

Comments

Filed under: birchbox, reviews

When they announced last month that they were going to begin offering a Birchbox Man subscription, I knew January would want to sign me up. This presented me with a conundrum. On the one hand, the amount of time I have spent thinking about toiletries is far less than the amount of time I spend thinking about almost anything else. On the other hand, I love getting stuff in the mail. So when January offered to buy me a three-month subscription for my birthday, it seemed like a good enough reason to give it a shot.

Coincidently enough, my first box arrived on my actual birthday. I know it took all the strength she could muster for January to not open up the box herself when it arrived, but she did wait patiently for me to get back from breakfast that morning. Regardless of what your thoughts are on "grooming and lifestyle products for men," you have to give Birchbox credit for their packaging.

maybirchboxman 01

As for the contents, here's a quick rundown of what came in this month's box.

maybirchboxman 02

Billy Jealousy LiquidSand Exfoliating Facial Cleanser - I have this thing about water on my face. I don't like it. Ever since I was a little kid taking showers on my own, my face has always been largely neglected. I don't know what it is, but I just hate sticking my face directly in the shower stream, and splashing water on with my hands isn't that much better. Getting out of my comfort zone, though, I gave this facial cleanser an honest shot over the past few weeks. While it felt a bit like rubbing very wet sand on my face, I did like the results: Much smoother skin, and many compliments from January. I'll definitely keep using this, at least as long as the sample lasts.

Kiehl's Ultimate Man Body Scrub Soap - Before marrying January, I was pretty brand loyal when it came to bath soap: I generally bought a superpack of Irish Spring, because it was cheap and I didn't really care. After we were married, I promptly switched my loyalties to whatever she happened to have in the shower at the time, which for the past few years has meant some sort of body wash on a poof. Pretty manly, huh? I've been using this bar for the past few weeks, though, and I have no complaints. I've always preferred bars over body washes, because I somehow feel less greasy afterwards, so this gets a thumbs-up from me as well.

ZIRH Shave Gel - I'm fairly certain that the last razor I purchased was sometime in 2005, so this product is of pretty little use to me. January keeps telling me that I should probably get a razor to keep the neck of my beard a little tidier, which would give me good use for this shave gel. But you can't change a man overnight, so my bathroom remains razor-free for the time being. I'll scuttle this away, though, and maybe give it a shot at some later date.

Richer Poorer Socks - I treat my socks poorly. Very poorly. I typically buy them in a bulk pack from Target and wear them until they are barely recognizable as socks anymore. You see, I'm a shuffler and a pivoter; I don't always feel the need to pick up my foot completely when walking or turning a corner, and as a result the lifespan of one of my socks is pretty short. Over the past couple of weeks, I've treated these socks from Richer Poorer exactly the same way, and they've held up fairly well. They also do good job of staying up while not cutting off circulation in my legs, so bonus points for that. I'm not sure I'm totally down with spending $12 on a single pair of socks, but I'm admittedly pretty stingy with my wardrobe budget. I'll keep wearing these and maybe one day, when I've learned to walk properly, invest in a few pairs of these.

maybirchboxman o1b

All in all, I was three-for-four on this month's Birchbox Man. They picked out some pretty solid products for me this time, so I'll look forward to seeing what they offer next month. If you want to give it a shot, go ahead and sign up. It's only $20 each month, and each box is customized to your tastes. What else were you going to spend that money on? An 18-pack of Irish Spring?

Comments

I celebrated my second year as a mother last weekend with my two cuties.  It was a lovely rainy day, perfect for coffee, donuts, and reading on the couch while the baby bear napped.  

We had breakfast at Grandview's DK Diner and Lucy made a little friend.  He gave her his best bashful eyes and she offered him her (pre chewed) toast.  C'est l'amour. 

 33wk11 01

33wk11 02

33wk11 03

33wk11 05

33wk11 06

33wk11 07

33wk11 08

33wk11 04

Comments

Filed under: dear lucy, lucy

"Hi Lucy!"

That's the first thing I say to you every morning when I pop into your room to get you up. And while I wish I could report that you respond with a chipper "Hi Papa!" it's much more likely to be either "bup!" -- which means that you want to be picked up -- "numanumanum?!" -- which means that you want to know if it's time to eat yet -- or "puppy!" -- which is pretty self explanatory. Up until a couple of months ago, your vocabulary was pretty much limited to "mama," "papa," "hi," "bye," and, of course, "puppy." In just a few short weeks, though, this list has nearly doubled. In addition to the already mentioned "up," you've been known to specifically ask for cheese, milk, and balloons. The balloons from your first birthday party must have been a major hit, because you could play with balloons for hours. I'm pretty sure I also heard you call me a "butthead" once, but I'm going to just assume that was a fluke.

You know what wasn't a fluke, though? That first day you strung a few steps together and started walking. Man, you really mastered that quickly! 

Just walking apparently weren't enough for you, so you have since moved on to stairs. "Mastered" might be too strong of a word for how you handle the stairs, but you have absolutely no fear in working toward it. One Sunday when we were visiting Gramps and Mimi, you spent a solid hour ascending and descending the stairs. I'm pretty sure you will have moved on to learning to ride a bike by the end of the month.

luinchair

luinchair2

In an effort to avoid what was beginning to be a babymullet, you had your first haircut a few months ago, and you handled it like a champ. Of course, we did have to ply you with Goldfish and Wonderpets, but you were very patient.

haircut1

haircut2

haircut3

We've also managed to get you off of your bottle and onto sippy / straw cups. Bedtime was a little tricky that first week, but once you got the hang of things we were able to establish a really fun bedtime routine with you: First you get your last cup of milk for the day while we hang out in your room and read books. Once your milk is all gone, I get to chase you around with your tiny toothbrush as you laugh maniacally. After your teeth are all clean we turn off the lights, turn on your ladybug nightlight, and sing you a couple of songs as you interrupt us with a dozen or so bedtime kisses. After shutting your door we continue to listen in on the monitor as you babble for about 30-40 minutes. We're not entirely sure what you're talking about, but if we had to guess it would be that you're telling your good friend Donkey about your day.

aprillu

Speaking of Donkey, you very clearly have it in your head that all animals are divided into two camps: There are the animals that roar -- such as tigers and bears -- that you refer to as "rowies," and everything else. This category of "everything else" is the "puppy" category. If we're walking down the street and you see any sort of dog, you point and say "puppy!" Kitty crosses your path? "Puppy!" See an elephant at the zoo? "Puppy!" Watching a video of JLo wearing a fur coat? "Puppy!" It's really one of the most adorable things you do these days.

Now that summer is here, I can't wait to see all the fun adventures you're going to have as we're able to do more and more things with you outside. The next three months will see your first beach vacation, first time in a swimming pool, and one of your longest road trips. Your mama and I are looking forward to all of it.

All my love,

Papa

 

Comments

Search