When Panic Software released Coda, most reactions were mildly to enthusiastically positive. Here and there were some points of criticism, but most of the comments were that Panic’s Cabel Sasser has made the web site editing application everybody has been waiting for. After he had ironed out the first-version wrinkles, I asked Cabel for a review copy, and used Coda for a couple of weeks to see what all the fuss is about.
Coda is a hybrid between Dreamweaver and TextMate or BBEdit. And it has a couple of unique features that set it apart from the crowd. Coda is not a WYSIWYG web design application such as Freeway or Dreamweaver. Instead, it relies on your coding skills and offers a complete and pampering environment for those who write their web pages in HTML, Javascript, and PHP, using CSS in the process.
Coda comes with auto-completion, a unified window approach, a lickable GUI-based CSS editing panel, a built-in Terminal, a built-in and blazingly fast FTP client, access control, and last but not least, a set of online reference books for HTML, CSS, Javascript and PHP.
Sharing Web Design EffortsCoda has management functionality built-in as well. You most probably will start a project by setting up a web site on a server and entering the server details in Coda’s web site form. This form has all the fields that are required to access the remote web server and to create your local files. When you have filled in all the blanks, you are ready to synchronise what you’re doing locally with what is on the server—in the background, and fully automatic.
Writing a page with Coda is done in the Edit panel. Using the Clips HUD (Heads Up Display), you can start the easy way and insert commonly used code snippets, such as for the document header in an XHTML page. The Clip HUD can be accessed from a toolbar at the bottom, where you’ll find other goodies as well: a Share icon, for example. Coda isn’t an island, and so sharing is made easy. You can invite others to work on a project with you and look for invited coders via Bonjour.
Coda also supports continuous code validation as you type. When you’re making errors, yellow triangles appear in the left margin, with an error count at the bottom. Hovering over an error with the mouse, makes a window pop up, telling you exactly what you’ve done wrong. Very handy, especially when you’re becoming tired and start having difficulties staying alert.
One of the most compelling features of Coda, in my experience, is that it has a well-balanced feature set that really pampers web coders. But at first I had a problem with understanding some behaviours. For example, you can’t just drag a file to a hyperlink tag (a href). I guess the reason is that Coda doesn’t know how you want to reference the file. I can live with that. But when you drag an image file to the Edit panel, an img tag is auto-created, with the image referenced as a local file. If you drag slowly, or hold the image above the Edit panel, a new tab opens, showing the image.
Drag-and-drop LinkingDragging a HTML page from the resources list also doesn’t automatically create an anchor tag. Instead, the file gets overwritten—after ample warning—with the content of the file you dragged. The manual doesn’t tell you how to do it right, and that’s a pity because I found out you can create page references very fast by dragging.
What you have to do is drag the page to the Edit window, and when the mouse is in the Edit window, press and hold the Alt key on the keyboard before you drop the file in its right place. You’ll see the cursor change from a “Plus” sign into an “Alias” sign. The exact location—on the web server!—based on your settings will be placed where you let the mouse go. So, if you want to create a link to page 1.html that is in the list of pages at left, all you have to do is drag that page to the Edit window, press and hold Alt when the page ghost is over the Edit window, and drop it between the quote marks in the “a href=” code.
Coda’s CSS panel is spectacular to say the least. It works just as good as CSSEdit and believe me when I say that is a compliment. I don’t know what I would choose if I would have to, but even that dilemma is taken care of by Coda: you can open every file type in external applications if you really want to. Personally, I found myself using Coda for all HTML, PHP, and CSS needs, but when I had to fine-tune my CSS, I chose to do it with CSSEdit, because CSSEdit gives me the option of overriding a style sheet of an online page.
When you’ve changed and saved a page, Coda will show a discrete up arrow in the resources list. At the bottom of the list are a couple of buttons, one of which lets you upload or “Publish” all of your pages at once. Uploading finished files is amazingly fast, especially when you consider Panic’s Transmit—which I use for my normal FTP needs—is no slouch either. Yet, Coda’s built-in FTP client seems to be faster.
Preview Web Pages in Split PanelsYou can preview your pages in separate panels, but as each panel can be split in additional (horizontal) panels, you can easily have your code in the top panel and the preview in the lower one. With each new tag, you see your changes being applied in real time. One thing that I found a bit less efficient was that, if you try previewing your CSS this way, it will not work when the CSS code is in a separate file. Instead, the preview window will show you a preview of the CSS file itself.
Coda apparently also has an open architecture. unMarked Software recently released an update to TextSoap that included a plug-in for Coda. When you install that plug-in, a new menu item (very appropriately called “Plug-ins”) appears. TextSoap is readily available from that menu to Coda users!
With its Local and Remote pages in tabs side by side in the resources list, its tabbed working window with split-capable panels, and all its other features (hidden or not), I believe Coda is the answer to many hand coders’ requirements. The Coda environment—because that is what describes it the most accurate—supports web hand coding designers the best of all web design applications I’ve ever tested, including the venerable Dreamweaver.
When closing Coda with multiple windows open, the application will even list the open files and give you the option of saving only selected ones before quitting, instead of the all-or-nothing approach that most applications apply. Of course Coda isn’t perfect. The Help files could be a bit more elaborate, and I’m sure experienced PHP, SQL, and other higher-level programmers and scripters than myself will have their own grudges with some of the program’s approaches.
But I’m also certain that Coda meets most of hand coders’ needs now. Imagine what it will be like when this application evolves.
Bookmark to:
This entry was posted in Tutorials. Bookmark the permalink. Both comments and trackbacks are currently closed.
Coda 1.0.5, The Web Designer’s Best Friend
When Panic Software released Coda, most reactions were mildly to enthusiastically positive. Here and there were some points of criticism, but most of the comments were that Panic’s Cabel Sasser has made the web site editing application everybody has been waiting for. After he had ironed out the first-version wrinkles, I asked Cabel for a review copy, and used Coda for a couple of weeks to see what all the fuss is about.
Coda is a hybrid between Dreamweaver and TextMate or BBEdit. And it has a couple of unique features that set it apart from the crowd. Coda is not a WYSIWYG web design application such as Freeway or Dreamweaver. Instead, it relies on your coding skills and offers a complete and pampering environment for those who write their web pages in HTML, Javascript, and PHP, using CSS in the process.
Coda comes with auto-completion, a unified window approach, a lickable GUI-based CSS editing panel, a built-in Terminal, a built-in and blazingly fast FTP client, access control, and last but not least, a set of online reference books for HTML, CSS, Javascript and PHP.
Sharing Web Design EffortsCoda has management functionality built-in as well. You most probably will start a project by setting up a web site on a server and entering the server details in Coda’s web site form. This form has all the fields that are required to access the remote web server and to create your local files. When you have filled in all the blanks, you are ready to synchronise what you’re doing locally with what is on the server—in the background, and fully automatic.
Writing a page with Coda is done in the Edit panel. Using the Clips HUD (Heads Up Display), you can start the easy way and insert commonly used code snippets, such as for the document header in an XHTML page. The Clip HUD can be accessed from a toolbar at the bottom, where you’ll find other goodies as well: a Share icon, for example. Coda isn’t an island, and so sharing is made easy. You can invite others to work on a project with you and look for invited coders via Bonjour.
Coda also supports continuous code validation as you type. When you’re making errors, yellow triangles appear in the left margin, with an error count at the bottom. Hovering over an error with the mouse, makes a window pop up, telling you exactly what you’ve done wrong. Very handy, especially when you’re becoming tired and start having difficulties staying alert.
One of the most compelling features of Coda, in my experience, is that it has a well-balanced feature set that really pampers web coders. But at first I had a problem with understanding some behaviours. For example, you can’t just drag a file to a hyperlink tag (a href). I guess the reason is that Coda doesn’t know how you want to reference the file. I can live with that. But when you drag an image file to the Edit panel, an img tag is auto-created, with the image referenced as a local file. If you drag slowly, or hold the image above the Edit panel, a new tab opens, showing the image.
Drag-and-drop LinkingDragging a HTML page from the resources list also doesn’t automatically create an anchor tag. Instead, the file gets overwritten—after ample warning—with the content of the file you dragged. The manual doesn’t tell you how to do it right, and that’s a pity because I found out you can create page references very fast by dragging.
What you have to do is drag the page to the Edit window, and when the mouse is in the Edit window, press and hold the Alt key on the keyboard before you drop the file in its right place. You’ll see the cursor change from a “Plus” sign into an “Alias” sign. The exact location—on the web server!—based on your settings will be placed where you let the mouse go. So, if you want to create a link to page 1.html that is in the list of pages at left, all you have to do is drag that page to the Edit window, press and hold Alt when the page ghost is over the Edit window, and drop it between the quote marks in the “a href=” code.
Coda’s CSS panel is spectacular to say the least. It works just as good as CSSEdit and believe me when I say that is a compliment. I don’t know what I would choose if I would have to, but even that dilemma is taken care of by Coda: you can open every file type in external applications if you really want to. Personally, I found myself using Coda for all HTML, PHP, and CSS needs, but when I had to fine-tune my CSS, I chose to do it with CSSEdit, because CSSEdit gives me the option of overriding a style sheet of an online page.
When you’ve changed and saved a page, Coda will show a discrete up arrow in the resources list. At the bottom of the list are a couple of buttons, one of which lets you upload or “Publish” all of your pages at once. Uploading finished files is amazingly fast, especially when you consider Panic’s Transmit—which I use for my normal FTP needs—is no slouch either. Yet, Coda’s built-in FTP client seems to be faster.
Preview Web Pages in Split PanelsYou can preview your pages in separate panels, but as each panel can be split in additional (horizontal) panels, you can easily have your code in the top panel and the preview in the lower one. With each new tag, you see your changes being applied in real time. One thing that I found a bit less efficient was that, if you try previewing your CSS this way, it will not work when the CSS code is in a separate file. Instead, the preview window will show you a preview of the CSS file itself.
Coda apparently also has an open architecture. unMarked Software recently released an update to TextSoap that included a plug-in for Coda. When you install that plug-in, a new menu item (very appropriately called “Plug-ins”) appears. TextSoap is readily available from that menu to Coda users!
With its Local and Remote pages in tabs side by side in the resources list, its tabbed working window with split-capable panels, and all its other features (hidden or not), I believe Coda is the answer to many hand coders’ requirements. The Coda environment—because that is what describes it the most accurate—supports web hand coding designers the best of all web design applications I’ve ever tested, including the venerable Dreamweaver.
When closing Coda with multiple windows open, the application will even list the open files and give you the option of saving only selected ones before quitting, instead of the all-or-nothing approach that most applications apply. Of course Coda isn’t perfect. The Help files could be a bit more elaborate, and I’m sure experienced PHP, SQL, and other higher-level programmers and scripters than myself will have their own grudges with some of the program’s approaches.
But I’m also certain that Coda meets most of hand coders’ needs now. Imagine what it will be like when this application evolves.