panic blog » top 20 secrets of coda 2
TRANSCRIPT
-
7/30/2019 Panic Blog Top 20 Secrets of Coda 2
1/1
65 Comments
Top 20 Secrets of Coda 2
Coda 2 is, as you probably know by now, a surprisingly capable app, and Im here to help you get the most of it.My promise: give this post a few minutes of your time, and youll learn something you didnt know about Coda 2!
(If you dont, Ill send you a free tweet.)
1. Open A New File in a Split
After splitting your view in via the New Split button , there are three ways to open a new file in a fresh split.
You can:
1. Option-Double-Click a file in the sidebar, pathbar, or Files tab
2. Drag any file to the pathbar of your freshly opened split
3. Right click a file and say Open in Split
Done!
Bonus Tip: Hold Option while clicking the New Split button to change the split direction to vertical. Or, change
your default direction in the Prefs.
2. Use the Golden HTML + CSS + Live Preview Setup
Its the dream view, easy as pie. First, open your HTML file. Second, click the New Split button, and choose New
Untitled to get a blank split. Now, using Tip #1, open your CSS file in this new split (we like dragging files to the
pathbar). Finally, click back in your first HTML split, click the New Split button again, and choose Preview.
Thats it. The best part: as you tweak your CSS, your changes will be applied live in the Preview!
3. Explore the Preferences
That reminds us and, ok, this is a pretty lame tip but we really recommend it: take a few minutes to check
out each of the Preferences panels. Youll likely find something you didnt know you could do!
4. Create Site Groups
Just covering the basics: you do know that you can make Site Groups, right? To do so, simply drag a site onto
another site. Thats it just like in iOS, you can now open up the Site Group, re-arrange the members of that
group, drag new items in, etc. Great for organizing jobs per client!
5. Use Text Tabs
First, did you know the tab bar was resizable? Just drag the bottom. Second, did you know that if you keep
resizing the tab bar all the way down, Coda switches to space-saving Text Tabs?
6. Hide or Show Specific File Types
You dont want to see all the hidden files littering your server. But you do want to see .htaccess files. Sure, you
can turn on Show Invisible Files, but then its all or nothing, right?
Wrong! Click the Rules tab in Preferences, and you can have Coda show or hide certain types!
7. Preview in a Simulated iPhone/iPad
What happens when you change the User Agent in Preview to something iPhone/iPad related? Unbelievably,
this happens:
Its just an approximation and its comical if you try to use the web inspector in this view but for mobile
developers, it gives you a nice head start on layout.
To change the User Agent, just click the Preview gear menu in the bottom bar.
8. Access the Code Navigator in the Path Bar
You might already know about the Navigator, the handy Sidebar tool that lets you easily jump to pieces of your
code.
But did you know that if you click the document name in the Path Bar, you can access the Navigator right then
and there?
9. Add Custom Bookmarks to the Navigator
Its fine and dandy to have your named HTML elements show up in the navigator, but what if you could add any
line to it, like a bookmark? You totally can. In any syntax mode, just type a comment and prefix its contents with a
!, like so:
/* !Page start */
Or, single-line-comment style:
// !Bookmark
Itll then show up as a bookmark in the Code Navigator:
10. Quickly Jump to Line
Heres a little one: double click the line number in the bottom bar, and you get a handy jump to line pop-up.
(You can also hitL.)
11. Discover the Books
Ok, so our built-in Books arent quite a Secret, but theyre so dramatically overhauled in
Coda 2 that I really dont want you to miss them.
To add a book to your tabs, click the Tab Plus, then Book. Try the HTML book its an
extremely efficient and fast way to quickly get reference.
Bonus Tip: our docs are available online, anywhere. Check out HTML, CSS, PHP, and
Javascript.
12. Browse CSS Styles Inline
If youre like me, you often forget a lot of CSS rules. The solution? When starting a new, blank line in a CSS style
declaration, open the autocomplete menu by hitting esc and choose the Styles pop, and you get this:
Handy!
13. Preview in a New Window
Got a huge screen? Click the Preview gear menu, and choose Preview In New Window .
14. Quickly Wrap Text in a Tag
Type some text. Select it. Then choose Text Wrap in Tag or hit< and behold: an instant tag. But its just
a tag, right? Wrong. Notice that the div is already selected. Now, whatever you type will be inserted into
the opening and closing tag, simultaneously, automatically!
15. Blockedit Multiple Lines at Once
Quickly make changes to multiple lines at once. To do so, hold Option while dragging a text selection. Now, type
within that selection. Any text is applied to all lines!
Hit Escape to clear your blockedit selection. In the future, theres even more we hope to do here.
16. Use Quick Open
If youre working locally, quickly open any file by clicking the Quick Open button on the left of the Path Bar. Type
a few letters, and bam: there are your relevant files. You can also open this window with Control-Q. Repeat,
Control-Q.
17. Discover the Text Processing Menu
Need to quickly encode accents? Remove line breaks? Dont miss the Text Processing menu!
18. Drag Your Favorite Folders to Places
Have a folder you use a lot in a certain Site? Open Places in the sidebar, and just drag it in. Places acts as a
per-site favorites for your most-used folders.
19. Quickly Jump to CSS in Preview
(Note: this tip requires Coda 2.0.2 or newer, which is coming soon.)
You can now instantly jump from Preview to a relevant piece of your CSS with a simple right click.
Best of all: if you dont have the relevant CSS file open, well even open it for you!
20. Bonus Tip: Customize Keyboard Shortcuts
Its possibly one of the greatest hidden features in Mac OS X, and works for almost all apps.
First, open System Preferences Keyboard , and click Keyboard Shortcuts.
Now, select Application Shortcuts on the left, and click the Plus .
From the pop-up menu, choose Coda 2. Now, lets type in Something, and give it the shortcut of our
choosing!
(If the menu item uses an ellipsis, its important that you use one here! Hit Option-Semicolon to type it.)
Thats it! Without even having to relaunch Coda, your shortcut has been added.
Enjoy the hot tips!
We're so busy replying to folks on Twitter, we haven't said anything unique lately! Hopefully this should shame us into
Tweeting.
Follow us on Twitter!
http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15537http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15530http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15399http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15363http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15311http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15108http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15097http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15097http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15097http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15085http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15077http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15077http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15065http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15041http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comment-15037http://www.panic.com/http://twitter.com/panichttp://www.panic.com/bloghttp://www.panic.com/blog/wp-content/uploads/2010/11/list-plus.pnghttp://books.panic.com/#javascripthttp://docs.panic.com/#phphttp://docs.panic.com/#csshttp://docs.panic.com/#htmlhttp://www.panic.com/blog/wp-content/uploads/2012/07/group.pnghttp://www.panic.com/blog/wp-content/uploads/2012/06/splits.pnghttp://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/http://www.panic.com/blog/2012/07/top-20-secrets-of-coda-2/#comments