Wednesday, 30 May 2012
Team Soell is Ocean Isle, North Carolina for the week with Andy's family who has been visiting this beach for quite a few years now. Andy and I both have lovely memories of this part of the state. When we were first dating, we took a trip to Holden Beach (which is right next to Ocean Isle) with some friends and then two years ago while we were vacationing with Andy's family, we found out there was a little Lucy growing in my belly. It's so crazy to be here with her now, running around being crazy and chatterboxing to herself all the while. She really isn't a baby anymore. Nuts.
My sister-in-law, Lesley, found out she was pregnant with Will just a few weeks after us and the babies were born just four weeks apart. Wrangling the two of them is the closest I ever want to get to having twins. DO YOU HEAR THAT, UNIVERSE?!?! Andy on the other hand, is a natural. I think he was supposed to meet some lovely woman who wanted to do nothing but bear him adorable children. Instead, he met me. I am not that woman. Oh well :).
Miss Emma, the eldest cousin, is a big grown-up four-year-old now with a big heart and lots of sass, just the way we like them. Hanging with these three for the week is fun. Exhausting, but fun. I was not meant to be the mother of multiple children I don't think. Not without a little speed, anyway. But they are beautiful, sweet, lovely little things and I wouldn't trade one moment with them. Children (somewhat forcefully) remind you to simplify the things in your life...To stop along your walk to examine the slinky bug or admire the bright pink flowers. I'm grateful for that lesson right now.
I haven't been brave enough to venture out doors with my big camera yet. So much sand and water and flailing children just waiting to cost me (or my insurance company) thousands of dollars. I'll get there, but for now, here are some of the indoor activities of the Soell/Scholl cousins.
Wednesday, 23 May 2012
Coda 2 has, once again, streamlined the way I do my job. Earlier this week I went on a fairly in-depth review of this major new release and left off with a teaser about "Diet Coda." Today I want to show you the latest tool from the company that developed Coda 2 and talk about how it has also helped change way I do my job, both in tandem with Coda 2 and as a standalone application.
If you hadn't guessed already, Diet Coda is an iPad implementation of the Coda development platform. While it's not as feature-rich as the OS X version of Coda, it's a pretty respectible tool. I want to talk about the AirPreview tool first, and then I'll move on to the more meaty features Diet Coda supports.
AirPreview
One of the coolest features of Diet Coda, if you're already a Coda user, is the AirPreview functionality. You already know about the Preview feature in in Coda, and AirPreview moves this feature out of Coda and onto your iPad so that you can preview your sites on your iPad while you edit them on your desktop. Here's how it works.
First, fire up the Diet Coda app on your iPad. In the Coda 2 editor, click on the AirPreview button in the lower left. Coda will look for iPads on the same wireless network and once it finds the iPad running Diet Coda it will give you a four digit code to use to complete the connection in Coda 2. Once the connection has been made, Diet Coda will immediately give you a preview of the file you're currently editing, exactly like the Preview function of Coda does.
It's really that simple. There are no extra options on Diet Coda's end, just a simple preview that continually updates as you make changes to the site you're working on. It's a great feature that replicates the concept of dual monitors: One for editing, one for previewing.
Of course, that's not all Diet Coda does. It actually crams a full-fledged web development IDE into your iPad.
Sites
The Sites screen of Diet Coda looks just like the Sites tab of Coda 2. Here, you can create new sites for each web project you want to manage. You can also group your sites into folders if you have more than a handful of sites that you work on.
Files
Once you select a site to work on, it will connect in to the server and give you a list of folders and files. Navigating the filesystem is as easy as touching a folder to open or tapping a file that you want more information on. They did a really good job packing all of the remote file management features you would need into a touch interface, including creating new folders, moving individual and batches of files, duplicating and deleting files. Once you've found a file that you want to make changes to, you can tap the "Edit in Diet Coda" button to get into the Editor screen.
Editor
The Editor screen should look pretty familiar, with the exception of the dark background. It features the same syntax highlighting as Coda, although it only offers a subset of the syntaxes it recognizes. But as long as you're working with HTML, CSS, Javascript, PHP, or Ruby you should be well supported.
One place where the Editor screen really shines is in the area of cursor placement. Diet Coda overrides the default magnifying glass cursor placement mechanism with a whole-line "Super Loupe" magnfication system that works really well. Just tap and hold to get a full-width magnification bar you can use to place the cursor exactly where you want it.
Syntax highlighting isn't the only feature that made it along with the Editor. Diet Coda has a full-featured search and replace function that sports all of the features of its Coda 2 counterpart. Regular expressions, case sensitivity, and selection searches are all supported.
The Editor screen also offers quick access to programming lanuage clips, just like Coda 2. I actually like the Diet Coda clips implementation a little better than Coda 2, but that could be due to the touch factor.
Of course, it wouldn't be a very good development environment if we coudln't work on multiple files at a time. The upper left corner shows you how many files are open at any given time, and tapping it brings down the same Visual Tab bar that we saw in Coda 2.
Terminal
Diet Coda also packs in a very good Terminal / SSH window that you can use to make changes to your web server from right inside the application. I like the dark background with small text, but if you find it hard to read you can change it to white or bump up the font size.
Shortcomings
Diet Coda does miss the mark in a couple of key areas, and while overall I think it's a great tool I would be remiss in not mentioning a few areas where it could be improved. First, unlike its desktop counterpart, there is no MySQL component. Granted, if they had to cut something out of the desktop version, MySQL would definitely be what I would want to lose, but it's still something lacking. There is a severe lacking of quality MySQL apps for the iPad, and I know that if the developers of Coda did implement it into Diet Coda it would be top notch.
A huge issue, one that I know they are working to solve, is Site and Clip syncing over iCloud from Coda 2. It sounds like they weren't able to get that in for the initial launch, which means setting up your sites on Diet Coda will be a manual process. If you manage a large number of sites, it could be a bit of a pain keeping your site settings on Coda 2 and Diet Coda in sync.
Another area is the number of programming languages available for syntax highlighting. This doesn't affect me, personally, as 90% of my work is done in PHP, HTML, CSS, and JavaScript files, but that's pretty much the extent of the languages supported by Diet Coda. If you're writing in any other language, you may want to hold off until they expand this out a bit.
I would love to have some version of the Navigator sidebar available in the Diet Coda editor. I often work with very, very large files and if I can't jump straight to a function definition, finding a certain section of code can take a very long time.
It's also worth noting that Diet Coda does run moderately slowly on my original iPad. Granted, this is the original iPad and it's expected that it starts showing it's age more than two years later, but it's still worth noting.
Conclusion
Diet Coda doesn't do everything that Coda 2 does, but I think that asking it to would be a bit unreasonable. Every feature I've covered here works really well, but Diet Coda definitely wasn't designed to be a "Coda killer" or replacement for the desktop version. Rather, it's a very good pinch hitter if you need to make changes to a site quickly and don't have easy access to your desktop. I know that having a tool like Diet Coda on my iPad would make me feel a lot more comfortable about going out of town on vacation without my laptop, knowing I can still make emergency changes if the need arises. Bluetooth keyboards are fully supported, including common keyboard shortcuts like 'undo' and 'save,' so Diet Coda really comes close to replicating the desktop coding environment.
It's a great first-version, and I'm looking forward to seeing where it goes from here. If you use Coda as your primary development platform and are planning to upgrade to Coda 2, Diet Coda is definitely worth a look. For me, no longer needing to lug my laptop with me on family vacation more than justifies purchasing this very capabile development environment.
Diet Coda will be available tomorrow in the App Store for the introductory, half-off price of $9.99, which is kind of a steal in light of the fact that Panic's other iPad app -- Prompt -- does a fraction of what Diet Coda does and it's priced at $7.99. I know I'll definitely be picking up a copy before the price goes back up.
Tuesday, 22 May 2012
Monday, 21 May 2012
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
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:
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.
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
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
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
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
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
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...
...or an 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
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
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
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
The 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
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
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.
You can even arrange all of the Navigator items alphabetically which is very helpful when working with class definition files.
The 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
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
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
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.
