#macrabbit

Recently we have been doing a big css clean-up at work, and I don’t think we would have gotten so much done had it not been for Espresso by MacRabbit. The navigator tool is indispensable when dealing with large css files.

Slicy truly reinvents Photoshop slicing. To export PSD elements as assets for your website or app, rename your layer groups once and let Slicy do everything else. Designers and developers, rejoice!

I love designing. It's my happy place. It allows me to get into a zen state and play work for hours. Lately, I've been using a few apps that make designing even better. So, I thought I would share them with y'all.

Slicy

This app will change your life —it certainly changed the way I design. Basically, Slicy takes your PSDs and automatically slices up the layers you name as filenames (e.g., "[email protected]"). You can even set it up to auto-export slices on save. This is extremely useful when designing mobile apps since it handles all the asset exporting for you and it forces you to be pixel-perfect in your PSD. I ♥ MacRabbit for this. 

Skala Preview

The awesome folks at Bjango not only write amazing articles about design, but also make really, really useful apps like Skala. I use Skala for size reference when designing mobile apps. It syncs with Photoshop to mirror your window on your phone or tablet. This app, combined with the iPhone stand of your choice makes for a great dual display workflow.

Hazel

Noodlesoft's Hazel is one of the best productivity tools out there. It basically watches over a folder(s) of your choice and it can trigger automated actions for the files in that folder. For example, at Automatic we don't support @1x assets for the iPhone app (since it's only available for iPhone 4S and later) so, after saving a PSD, Slicy exports both @1x and @2x assets automatically, then Hazel watches that folder and deletes all files without "@2x" in the name. Magic!

A few early thoughts on Coda 2:

Good snippets for HTML files – though not really needed for Rails.

Very nice auto complete for HMTL.

Doesn’t seem to do auto indent.

The Navigator feature is a nice way to jump around an HTML or CSS document, but it is unaware of JS, and got lost in an ERB file.

The hints side bar is great for HTML, and CSS.  The perfect documentation that is always visible, and context aware.  I just wish it worked with more than HTML and CSS.

Documentation/hints did not work for jQuery, though it id did do documentation for pure JS. There is likely a way to make this work, but given the prevalence of jQuery, it would have been nice to have out of the box.

Excellent auto-complete for CSS, but if you really know CSS I think it would get in the way.  The CSS editor also requires you to know what you are looking for before it will make suggestions.  It is not a CSS builder like Espresso, or visual studio.

The file panel for navigating projects is nice, but there is no way to open a file from it without the mouse. The navigation strip at the top of the file browser is a nice touch.

I didn’t get a chance to use the preview in Diet Coda feature, where your page is previewed on an iPad running Coda, but this is a great feature.

The vertical OS X buttons (ala iTunes), were not welcomed by me.

Others around the web have commented on the slick FTP and source control integration, but these are features I do not normally use, and thus do not have an opinion on them.

I did like the ‘Clips’ feature, made famous by TextMate. It seems to be the most transparent  snips implementation I have used.  No wondering where the snips came from, how to edit them, or how you can add your own.  It is very self explanatory.

There does not seem to be an easy way to preview an ERB file from a running rails sever.  I know I can navigate to the page in the preview windows, but it is just as easy to use Safari if I have to do that.

Web Inspector integration was nice.

I did not use the MySQL tool, though it did seem like an odd addition considering that that the preview does not handle dynamically generated pages. I am sure it is nice to have in a pinch, but I have already paid for Navicat, so I’ll stick with it.

In summary, it is a nice all in one tool. The built in documentation is great, and the css auto-complete is nice. At the end of the day, it’s lack of ERB file support, and not having a CSS builder made me decide to pass. I would strictly be using the tool for a CSS editor, and I did not feel it was $50 worth of CSS editor. What Coda 2 is though is a nice, more technical replacement for iWeb, and it's worth all of it’s full price of $100 if you need that.

  I fell in love with the CSS editor in it.  It is a CSS editor and builder rolled into one.

The javascript editor was quite good as well, as the navigation panel even picked up the various javascript features and allowed me to navigate the JS file. The auto complete for JS worked better than in Coda as well.

The HTML editor was ok, though it had even less support for ERB files than Coda 2. e.g., Coda 2 could auto-complete ‘link_to’, while Espresso could not.

The preview works great, you don’t even have to save your files to view the preview, for CSS, HTML, and even JS. I found the preview in Coda 2 to be clunky, and required me to use the mouse more.

The layout of Espresso is simpler than Coda 2, and I found myself comfortable with it quicker, though I suspect the people at Panic have put a lot of thought into Coda 2′s layout, and with a little more time, I would love it.

Espresso offers ‘sugars’ which are essentially plugins, and their site had quite a few, but ironically there were none for rails.

As I was testing these two tools it became apparent to me that they could never supplant Vim or ST2 as my coding editor.  But when it comes time to fine tune the look and feel of my web apps, I could see myself using a tool like this.

  As a CSS editor, Espresso was tempting, but at $80 that is just too much for a CSS editor. Considering it was useless with ERB files, a CSS editor would be it’s only use.  Apparently, MacRabbit (the makers of Espresso) used to make just a CSS editor aptly named CSSEdit, but it was discontinued with the dawn of Espresso. Given that CSSEdit was $40, I find myself thinking that I would have gladly paid $40 for CSSEdit 3, unfortunately it is no longer for sale. I would likely also pay $80 for Espresso if it supported ERB files/rails.

By Lex Friedman, Macworld

I’ve done a lot of Web coding in my day. It used to be my fulltime job; now I code an in-house tool for Macworld, and I do some side Web development projects after hours. For years, my software of choice as a Web coder has remained Panic’s Coda.

Coda dates back to 2007, and it aimed to simplify the life of the average Web developer. And it succeeded. It combined, in a single tabbed window, your code editor, your FTP client, your web browser, and the Terminal. That’s a lot less Command-tabbing.

When Panic formally announced Coda 2, I was thrilled. Because as much as I liked the original Coda, I didn’t love it: It was missing a couple key features, and I longed for some of those features literally every time I used the app. Coda 2 adds the bulk of the features I’ve craved, and also adds impressive layers of visual and functional polish.

Don't be surprised if Coda 2's visual tab previews become a de facto OS X standard.

Coda 2 lets you organize the different projects you work on as sites. The app started using my old Coda sites seamlessly. When you start working on site, original Coda users will very quickly spot some obvious differences. The app now uses a very cleverly implemented, resizable, visual tab bar: Your open tabs each get dynamic thumbnails and text labels, along with small identifiers that indicate file extensions when appropriate. It works very well. If you prefer, you can make the tabs text only, which works fine, but the visual tab thumbnails actually make a much better use of space and feel far quicker to navigate.

Another immediately obvious change is the redesigned sidebar, which still offers quick access to local or remote files, clips, and in-page elements, but adds numerous other options - including the ability to configure which of those options are always visible in the toolbar header. Among the options the sidebar offers quick access to are Validate, Publish, Source Control Management, Places, and Hints.

Coda 2 can autocomplete your custom functions, and it supports code-folding for easier reading.

One of the key places Coda 2 really shines is in its upgraded code editor. Beyond the aesthetic improvements, like better default syntax colors, the app is now functionally better at helping you write clean code faster. It (finally!) supports autocompletion for custom variables and function names. Currently, that custom autocompletion only works on a per-file basis, so functions you defined elsewhere won’t autocomplete; a Panic representative says that site-wide autocompletion will come eventually.

Coda 2 also now supports code folding, which lets you tuck away sections of code that take up valuable screen real estate, but that you don’t need constant visibility into. The code folding is particularly powerful; you can fold individual blocks, all blocks at a specific level, all comment blocks, and so on. And you can unfold blocks by clicking on them or with a menu command or keyboard shortcut.

General coding is improved in Coda 2, too. Bracketing, closing tags, and indentation all work much more naturally. Original Coda users may need to unlearn some tics they developed for working around weaknesses in the original version, since Coda 2 generally behaves far more sanely when composing and editing code.

Coda 2's MySQL editor is spartan, but it gets the job done.

Coda 2 integrates other new features as well. There’s a fully integrated file browser = basically a complete embedding of Panic’s Transmit - which allows you to connect to and browse FTP, SFTP, WebDAV, and Amazon S3 servers. A new integrated MySQL editor is fairly barebones, but it makes quick work of browsing or modifying tables and running queries. And the inline CSS editor, which combines the flexibility of hand-coded CSS with the power of contextual visual editing options, is remarkable.

Other niceties built into Coda 2 include an integrated version of the WebKit Web Inspector, along with the ability to view the fully rendered HTML source of a previewed page. When you’re previewing Web content, you can tweak the user agent to see your webpage as if you were on an iPhone or iPad; I saw a little bugginess in the implementation of this feature (where the Web preview was rendered beside the mock iOS device frame, and not inside of it), but it still saved me an awful lot of refreshing on my iPhone in my testing.

You can also send Coda 2 previews directly to an iPad running Diet Coda. Coda 2 finds iPads running Diet Coda on the same Wi-Fi network; you sync the iPad by pointing its camera at a flashing graphic on your Mac’s screen. It just works.

The list of features that I wish Coda 2 included is quite small. I wish PHP syntax checking were built-in; that existed in the Zend Development Environment a decade ago. Third-party plug-ins can add similar functionality to Coda, but those plug-ins will need updating to work with Coda 2. (I dragged an older one in, and it caused Coda 2 to get stuck in a crashing loop until I manually removed the plug-in file.) I look forward to when that site-wide code autocompletion feature gets introduced. And when that arrives, I’d love to be able to click on a custom function call and jump to its definition elsewhere within a site.

But the list of features Coda 2 is missing is dwarfed by the far more impressive list of what it offers. It’s an excellent upgrade, making significant improvements upon what was already a very good coding environment.

SugarDev.sugar | Espresso Wiki

Espresso now has sugar to help you make sugar, a bit obvious but handy.

Espresso 2 just went stable. Great static web development editor. Pretty fantastic CSS tools too.