{"id":2505,"date":"2009-11-18T02:56:46","date_gmt":"2009-11-18T01:56:46","guid":{"rendered":"http:\/\/www.chipwreck.de\/blog\/?page_id=2505"},"modified":"2016-12-31T01:25:13","modified_gmt":"2016-12-31T00:25:13","slug":"coda-tips","status":"publish","type":"page","link":"https:\/\/www.chipwreck.de\/blog\/software\/coda-php\/coda-tips\/","title":{"rendered":"Coda Tips &#038; Tricks"},"content":{"rendered":"<div class=\"contentnavi\">\n<ol class=\"contentnav1 center\">\n<li><a href=\"\/blog\/software\/coda-php\/\">Download \/ Feedback<\/a> &bull;<\/li>\n<li><a href=\"\/blog\/software\/coda-php\/help\">Help<\/a> &bull;<\/li>\n<li><span class=\"pink\">Coda Tips<\/span><\/li>\n<\/ol>\n<p class=\"contentnav2 center\"><a href=\"#tips0\">Overview<\/a> &bull; <a href=\"#tips1\">Tips &amp; Tricks<\/a> &bull; <a href=\"#tips2\">Shortcuts<\/a> &bull; <a href=\"#tips3\">Bookmarks<\/a> &bull; <a href=\"#tips4\">Plugins<\/a><\/p>\n<\/div>\n<p><a name=\"tips0\"><\/a><\/p>\n<h4 class=\"desc\">My collected bag of tips &amp; tricks &amp; stuff for Coda<\/h4>\n<p>The selection is a bit subjective, especially the shortcuts &#8211; but nevertheless you may find some things you didn&#8217;t know yet.. Something wrong? Leave a comment.<\/p>\n<div class=\"excerpt\">\n<p>This page is updated from time to time, so come back to see if there&#8217;s something new.<\/p>\n<\/div>\n<p>For some Coda 2 tips, panic itself has a nice and useful <a href=\"http:\/\/www.panic.com\/blog\/2012\/07\/top-20-secrets-of-coda-2\/\">blog post<\/a><\/p>\n<p class=\"toplink\"><a href=\"#top\">&#x21e7; top<\/a><\/p>\n<p><a name=\"tips1\"><\/a><\/p>\n<h3>Tips &amp; Tricks<\/h3>\n<h4>Split view<\/h4>\n<ul>\n<li>&#x2325;-click split button: Split in opposite direction (of your default setting).<\/li>\n<li>&#x2318;-click split button: Create a new split with an empty text file.<\/li>\n<\/ul>\n<h4>Files and tabs<\/h4>\n<ul>\n<li>&#x2325;-click on the close icon of a file tab: Close all other tabs.<\/li>\n<li>&#x2325;-click toolbar button (Editor, CSS,..): Create a new tab in the given mode.<\/li>\n<\/ul>\n<h4>Path popup for files<\/h4>\n<ul>\n<li>&#x2318;-click on file tab show a popup with the path of the file:<br \/>\n\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/File-Path-Popup.png\" alt=\"File Path Popup\" title=\"File Path Popup\" width=\"313\" height=\"128\" class=\"imgshadow screenshot alignnone size-full wp-image-2612\" srcset=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/File-Path-Popup.png 313w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/File-Path-Popup-120x49.png 120w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/File-Path-Popup-300x122.png 300w\" sizes=\"auto, (max-width: 313px) 100vw, 313px\" \/>\n\t\t<\/li>\n<\/ul>\n<h4>Create a new folder quickly<\/h4>\n<ul>\n<li>&#x2325;-click the new file button under the file list (&#8220;+&#8221;): create a new folder instead of a new file.<\/li>\n<\/ul>\n<h4>Drag &amp; drop files<\/h4>\n<ul>\n<li>Drag files into an editor to insert a relative path to this file<\/li>\n<li>&#x2325;-drag files from the Coda File Browser<\/li>\n<\/ul>\n<h4>Viewing images\/PDFs in Coda<\/h4>\n<ul>\n<li>Coda can open images and PDF files.<\/li>\n<li>Image (or PDF) dimensions are visible in the status bar.<\/li>\n<li>You can also set the zoom level and fit the image to the window there:<br \/>\n\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/View-images-in-Coda.png\" alt=\"View images in Coda\" title=\"View images in Coda\" width=\"349\" height=\"339\" class=\"imgshadow screenshot alignnone size-full wp-image-2594\" srcset=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/View-images-in-Coda.png 349w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/View-images-in-Coda-119x116.png 119w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/View-images-in-Coda-300x291.png 300w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/>\n\t\t<\/li>\n<\/ul>\n<h4>Clips<\/h4>\n<ul>\n<li>Drag &amp; drop text onto the Clips Panel to create a new clip.<\/li>\n<\/ul>\n<h4>Browser preview<\/h4>\n<ul>\n<li>The page source in the preview browser is editable<\/li>\n<li>Double-click on an element in the Coda DOM Inspector to highlight it in the split source code (if possible).<\/li>\n<\/ul>\n<h4>CSS editor<\/h4>\n<ul>\n<li>Right click on the styles to access advanced functions (copy, duplicate etc.):<br \/>\n\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/CSS-Editor-Right-Click-Styles.png\" alt=\"CSS Editor - Right Click Styles\" title=\"CSS Editor - Right Click Styles\" width=\"423\" height=\"225\" class=\"imgshadow screenshot alignnone size-full wp-image-2614\" srcset=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/CSS-Editor-Right-Click-Styles.png 423w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/CSS-Editor-Right-Click-Styles-120x63.png 120w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/CSS-Editor-Right-Click-Styles-300x159.png 300w\" sizes=\"auto, (max-width: 423px) 100vw, 423px\" \/>\n\t\t<\/li>\n<\/ul>\n<h4>Edit .htaccess-files with syntax highlighting<\/h4>\n<ul>\n<li><a href=\"http:\/\/www.codingmonkeys.de\/subethaedit\/modes.html\" class=\"external\">Download &#8220;Apache config files&#8221; here &raquo;<\/a> <a href=\"https:\/\/www.dropbox.com\/s\/5lkh9niqf7p2l26\/ApacheConf.mode.zip\">(Coda 2 file, thanks Ross!)<\/a><\/li>\n<li>Save the unpacked file to ~\/Library\/Application Support\/Coda\/Modes\/<\/li>\n<li>Assign the Apache mode to the &#8220;htaccess&#8221;-extension in the Preferences:<br \/>\n\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/Coda-Apache-Syntax-Mode.png\" alt=\"Coda-Apache Syntax Mode\" title=\"Coda-Apache Syntax Mode\" width=\"399\" height=\"136\" class=\"imgshadow screenshot alignnone size-full wp-image-2559\" srcset=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/Coda-Apache-Syntax-Mode.png 399w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/Coda-Apache-Syntax-Mode-120x40.png 120w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/Coda-Apache-Syntax-Mode-300x102.png 300w\" sizes=\"auto, (max-width: 399px) 100vw, 399px\" \/>\n\t\t<\/li>\n<\/ul>\n<h4>About Syntax Modes in Coda 2<\/h4>\n<ul>\n<li>A good article is here: <a href=\"http:\/\/justinhileman.info\/article\/coda-2-modes-scopes-and-you\/\">justinhileman.info\/article\/coda-2-modes-scopes-and-you\/<\/a><\/li>\n<\/ul>\n<h4>Jump to Javascript errors<\/h4>\n<ul>\n<li>Enable the javascript error log in the preview window<\/li>\n<li>Double-click on a javascript error to jump to the error line (if possible):<br \/>\n\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/js-error-doubleclick-in-coda-preview.png\" alt=\"Javascript error - Doubleclick in coda preview\" title=\"js error - doubleclick in coda preview\" width=\"302\" height=\"79\" class=\"imgshadow screenshot alignnone size-full wp-image-2567\" srcset=\"https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/js-error-doubleclick-in-coda-preview.png 302w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/js-error-doubleclick-in-coda-preview-119x31.png 119w, https:\/\/www.chipwreck.de\/blog\/wp-content\/uploads\/2009\/11\/js-error-doubleclick-in-coda-preview-300x78.png 300w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/>\n\t\t<\/li>\n<\/ul>\n<h4>Misc<\/h4>\n<ul>\n<li>Often overlooked but useful: Edit&gt;Copy as XHTML and Text&gt;Entab\/Detab.<\/li>\n<li>You can use Finder Smart Folders in the File Browser.<\/li>\n<\/ul>\n<p class=\"toplink\"><a href=\"#top\">&#x21e7; top<\/a><\/p>\n<p><a name=\"tips2\"><\/a><\/p>\n<h3>Assorted Keyboard Shortcuts<\/h3>\n<h4>Windows &amp; General<\/h4>\n<table class=\"shortcuts\">\n<tr>\n<td>Sites\/Editor\/Preview\/CSS\/Terminal\/Books<\/td>\n<td>&#x2318;1 .. &#x2318;6<\/td>\n<\/tr>\n<tr>\n<td>Go To Folder&#8230;<\/td>\n<td>&#x2325;&#x2318;G<\/td>\n<\/tr>\n<tr>\n<td>Preview in Default External Browser<\/td>\n<td>&#x2325;&#x2318;B<\/td>\n<\/tr>\n<tr>\n<td>Show\/Hide Clips<\/td>\n<td>^&#x2318;C<\/td>\n<\/tr>\n<tr>\n<td>Show\/Hide Colors<\/td>\n<td>&#x21E7;&#x2318;C<\/td>\n<\/tr>\n<tr>\n<td>Show\/Hide File Browser<\/td>\n<td>^&#x2318;B<\/td>\n<\/tr>\n<tr>\n<td>Show\/Hide Fonts<\/td>\n<td>&#x21E7;&#x2318;T<\/td>\n<\/tr>\n<tr>\n<td>Show Special Characters&#8230;<\/td>\n<td>&#x2325;&#x2318;T<\/td>\n<\/tr>\n<tr>\n<td>Show Transcript<\/td>\n<td>^&#x2318;T<\/td>\n<\/tr>\n<tr>\n<td>Split Horizontally\/Vertically<\/td>\n<td>^&#x2318;L \/ ^&#x2325;&#x2318;L<\/td>\n<\/tr>\n<\/table>\n<h4>In the File Browser<\/h4>\n<table class=\"shortcuts\">\n<tr>\n<td>Back\/Forward<\/td>\n<td>&#x2325;&#x2318;&#x2190; \/ &#x2325;&#x2318;&#x2192;<\/td>\n<\/tr>\n<tr>\n<td>Parent <\/td>\n<td>&#x2325;&#x2318;\u2191<\/td>\n<\/tr>\n<tr>\n<td>New Folder<\/td>\n<td>&#x21E7;&#x2318;N<\/td>\n<\/tr>\n<tr>\n<td>New File<\/td>\n<td>&#x2325;&#x2318;N<\/td>\n<\/tr>\n<tr>\n<td>New File (Default type)<\/td>\n<td>&#x2318;N<\/td>\n<\/tr>\n<\/table>\n<h4>In the Web-Browser (Preview)<\/h4>\n<table class=\"shortcuts\">\n<tr>\n<td>Back\/Forward <\/td>\n<td>&#x2325;&#x2318;&#x2190; \/ &#x2325;&#x2318;&#x2192;<\/td>\n<\/tr>\n<tr>\n<td>Go To Location<\/td>\n<td>&#x2318;L<\/td>\n<\/tr>\n<tr>\n<td>Reload<\/td>\n<td>&#x2318;R<\/td>\n<\/tr>\n<tr>\n<td>View Source<\/td>\n<td>&#x2325;&#x2318;U<\/td>\n<\/tr>\n<\/table>\n<h4>While Editing<\/h4>\n<table class=\"shortcuts\">\n<tr>\n<td>Balance (Select Enclosing Block)<\/td>\n<td>&#x2318;B<\/td>\n<\/tr>\n<tr>\n<td>Blockedit Selection<\/td>\n<td>&#x21E7;&#x2318;B \/ hold &#x2325;<\/td>\n<\/tr>\n<tr>\n<td>Close HTML Tag<\/td>\n<td>&#x2325;&#x2318;.<\/td>\n<\/tr>\n<tr>\n<td>Look Up Selected Word in Reference Books<\/td>\n<td>&#x2318;\u2019<\/td>\n<\/tr>\n<tr>\n<td>Go to (Jump) Selection (and highlight it)<\/td>\n<td>&#x2318;J<\/td>\n<\/tr>\n<tr>\n<td>Go to Beginning\/End of Line<\/td>\n<td>&#x2318;&#x2190; \/ &#x2318;&#x2192;<\/td>\n<\/tr>\n<tr>\n<td>Go To Line Number&#8230;<\/td>\n<td>&#x21E7;&#x2318;L<\/td>\n<\/tr>\n<tr>\n<td>Go to Previous\/Next Symbol<\/td>\n<td>&#x21E7;&#x2318;D \/ &#x2318;D<\/td>\n<\/tr>\n<tr>\n<td>Go to Previous\/Next Word<\/td>\n<td>&#x2325;&#x2190; \/ &#x2325;&#x2192;<\/td>\n<\/tr>\n<tr>\n<td>Shift Text Left\/Right<\/td>\n<td>&#x2318;[ \/ &#x2318;]<\/td>\n<\/tr>\n<tr>\n<td>Show\/Hide Invisible Characters<\/td>\n<td>&#x2325;&#x2318;I<\/td>\n<\/tr>\n<tr>\n<td>Show\/Hide Line Numbers<\/td>\n<td>&#x2325;&#x2318;L<\/td>\n<\/tr>\n<tr>\n<td>Show Validation Errors (HTML Mode only)<\/td>\n<td>&#x2325;&#x2318;V<\/td>\n<\/tr>\n<tr>\n<td>Smaller\/Bigger Font<\/td>\n<td>&#x2318;- \/ &#x2318;+<\/td>\n<\/tr>\n<tr>\n<td>Un\/Comment Selection<\/td>\n<td>&#x2318;\/<\/td>\n<\/tr>\n<tr>\n<td>Wrap Lines (toggle)<\/td>\n<td>&#x2325;&#x2318;W<\/td>\n<\/tr>\n<\/table>\n<h4>Find &amp; Replace<\/h4>\n<table class=\"shortcuts\">\n<tr>\n<td>Find (in current document)<\/td>\n<td>&#x2318;F<\/td>\n<\/tr>\n<tr>\n<td>Find in Files&#8230;<\/td>\n<td>^&#x2318;F<\/td>\n<\/tr>\n<tr>\n<td>Find Previous\/Next<\/td>\n<td>&#x21E7;&#x2318;G \/ &#x2318;G<\/td>\n<\/tr>\n<tr>\n<td>Find &amp; Replace Next<\/td>\n<td>^&#x2318;G<\/td>\n<\/tr>\n<tr>\n<td>Use Selection for Find\/Replace<\/td>\n<td>&#x2318;E \/ &#x2325;&#x2318;E<\/td>\n<\/tr>\n<tr>\n<td>Hide Find Banner<\/td>\n<td>&#x21E7;&#x2318;F<\/td>\n<\/tr>\n<tr>\n<td>Jump to Searchbar<\/td>\n<td>&#x2325;&#x2318;F<\/td>\n<\/tr>\n<\/table>\n<p class=\"toplink\"><a href=\"#top\">&#x21e7; top<\/a><\/p>\n<p><a name=\"tips3\"><\/a><\/p>\n<h3>Comments\/Bookmarks<\/h3>\n<p><em>From Panic:<\/em> Coda recognizes specially formatted comments in your code as &#8220;bookmarks&#8221;. These bookmarks appear in the Code Navigator pane, and allow you to jump to the corresponsing line of text with a single click.<\/p>\n<h4>CSS<\/h4>\n<p>\t<code>\/* !bookmark *\/<\/code><\/p>\n<h4>HTML\/XML<\/h4>\n<p>\t<code escaped=\"true\">&lt;!-- !bookmark --&gt;<\/code><\/p>\n<h4>PHP-HTML\/Javascript<\/h4>\n<p>\t<code>\/* !bookmark *\/<\/code> <em>or<\/em> <code>\/\/ !bookmark<\/code><\/p>\n<h4>SQL<\/h4>\n<p>\t<code>\/* !bookmark *\/<\/code><\/p>\n<h3>Codaclips URL syntax<\/h3>\n<p>\t<code escaped=\"true\">codaclips:\/\/&lt;&lt;**Title:<strong><em>title<\/em><\/strong>**&gt;&gt;<strong><em>content<\/em><\/strong><\/code><br \/>\n\t<\/p>\n<p class=\"toplink\"><a href=\"#top\">&#x21e7; top<\/a><\/p>\n<p><a name=\"tips4\"><\/a><\/p>\n<h3>Plugins (recommended ones)<\/h3>\n<p>Git integration (for GitX\/Gity): <a href=\"http:\/\/justinhileman.info\/git-for-coda\/\" class=\"external\">http:\/\/justinhileman.info\/git-for-coda\/<\/a><\/p>\n<p>Zen Coding (*): <a href=\"http:\/\/onecrayon.com\/tea\/coda\/\" class=\"external\">http:\/\/onecrayon.com\/tea\/coda\/<\/a>, and here: <a href=\"https:\/\/github.com\/sergeche\/tea-for-coda\" class=\"external\">https:\/\/github.com\/sergeche\/tea-for-coda<\/a>\n<\/p>\n<p>White Out (Remove trailing whitespaces): <a href=\"http:\/\/erikhinterbichler.com\/software\/white-out\/\" class=\"external\">http:\/\/erikhinterbichler.com\/software\/white-out\/<\/a><\/p>\n<p>Line Commands (Move and duplicate lines): <a href=\"http:\/\/code.google.com\/p\/codaplugins\/downloads\/list\" class=\"external\">http:\/\/code.google.com\/p\/codaplugins\/downloads\/list<\/a><\/p>\n<p class=\"small\">(*) What is Zen Coding? A very cool code completion method, see more details here: <a href=\"http:\/\/code.google.com\/p\/zen-coding\/\" class=\"external\">http:\/\/code.google.com\/p\/zen-coding\/<\/a><\/p>\n<p class=\"toplink\"><a href=\"#top\">&#x21e7; top<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Download \/ Feedback &bull; Help &bull; Coda Tips Overview &bull; Tips &amp; Tricks &bull; Shortcuts &bull; Bookmarks &bull; Plugins My collected bag of tips &amp; tricks &amp; stuff for Coda The selection is a bit subjective, especially the shortcuts &#8211; but nevertheless you may find some things you didn&#8217;t know yet.. Something wrong? Leave a &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.chipwreck.de\/blog\/software\/coda-php\/coda-tips\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Coda Tips &#038; Tricks&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":723,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2505","page","type-page","status-publish","hentry"],"jetpack_shortlink":"https:\/\/wp.me\/PaPEN-Ep","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/2505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/comments?post=2505"}],"version-history":[{"count":0,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/2505\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/pages\/723"}],"wp:attachment":[{"href":"https:\/\/www.chipwreck.de\/blog\/wp-json\/wp\/v2\/media?parent=2505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}