Thread

Hey guys,

Ok thats me now macified if only a 13” MBP. Fallen in love with OSX already and now wondering how i got by on Windows for all those years.

Most of my work is PS > CSS then putting that into EE or Magento.

Whats the best bit of kit for the job?

Thanks.

Hiya,

Really depends on the way you work I suppose. Myself personally I design (usually) in Photoshop and then hand-code everything in Coda. Although I could easily do it in something like Textwrangler (free) it is nice to have the code completion in Coda and nice to see an instant preview.

Best wishes,

Mark

I’ve been a BBEdit fan for years. You can program so many keyboard shortcuts and integrate Applescript for those troublesome, repetitive tasks, it really makes life easier.

For me, the Coda interface is fantastic. It makes editing template files a breeze, locally or remotely. It’s the most “Mac-like” application out of them all in my opinion. Unfortunately it’s around $90 for a license but well worth it!

Welcome to the mac world.

In regards to your question:
My workflow is similar, PS for design and then I personally use TextMate with a bunch of add-ons for coding HTML/EE/CSS.

I like the TextMate snippet feature just too much to consider using Coda again, having said that Coda’s Clips feature is quite okay, just not as good as Espresso’s (http://macrabbit.com/espresso/ <- very nice app too ) and TextMates.

If you don’t want/need/care for any live previews or overly pretty interface then I would recommend TextMate strongly.
If you do like the fancy addons 😉 then try out Espresso first, followed by Coda.

PS: I own licenses for all the mentioned apps, so this is said with the least bit of bias 😊

Whats the best bit of kit for the job?

As always, it depends.

There needs to be consideration for experience level, workload, knowledge, and so on.

For me, it’s a combination of tools that range from old school to cutting edge, and a litter of popular apps in between. Most of my coding—XHTML, CSS, Javascript—is set up initially in Coda (love that three pane interface), then dropped into EE for framing. Tweaks are done by hand directly in EE (love the versioning feature). Also used is BBEdit and CSSEdit (best way to tweak CSS on a site without going live). Elsewhere, Fireworks for graphic elements (if there’s a better web graphics tool, I don’t know what it is—and why can’t Adobe stop the Quit crashes?).

+1 for Coda. I used Uedit32 for Windows for years and Coda provides that same immediacy, although I usually run new code through a local subversion client rather than directly into the live site.

Also, I work in a very wide viewport which means that most of my CSS declarations fit in their own horizontal lines. For CSS, I prefer working with a wide, short stack that I can take in visually at a glance to code-folding and scrolling prettified code.

So those of you who use CSSEdit: I’m looking at that program (I’ve been using Style Master, but not all that happy with it). So how do you actually use CSSEdit? I see that I can’t save a file with a PHP extension, so do you copy-paste back and forth? Or what? Just curious about the best way to integrate it into my workflow.

Ah, interesting. I hadn’t thought of doing that. So your CSS file is actually just a traditional styles.css thing then?

In Coda, you can edit a file using CSS Syntax mode even though the file is saved with a .php extension. Like Mandarax, I prefer managing CSS and javaScripts outside of the EE nutshell, but would give up none of Coda’s syntax support if I edited them as text files stored in the database as PHP.

Prior to EE2.0, it’s been such a nuisance initiating templates in the CP before you can work on them, so outboard CSS and JS was a real convenience. I’ve only played around with a single instance of PB2.0, but the new method for allocating Template Groups and Templates eliminates a lot of that scut-work.

Ah, interesting. I hadn’t thought of doing that. So your CSS file is actually just a traditional styles.css thing then?

Yes. Using Transmit I open the css file on the server and work “live” each Save in CSS Edit actually uploads the file to the server which save a bit of time instead of manually dragging the file to copy it to the server.

The css files actual location are then saved in a global variable in case I need to alter the filename or location later.

I’m new to this stuff and not on top of Global Variables. Do you mean you would create a Global Variable that would be called {css} and the content of the variable would be something like “http://mydomain.com:8888/site_css.css” (if you’re developing on a local server)?

So those of you who use CSSEdit: I’m looking at that program (I’ve been using Style Master, but not all that happy with it). So how do you actually use CSSEdit? I see that I can’t save a file with a PHP extension, so do you copy-paste back and forth? Or what? Just curious about the best way to integrate it into my workflow.

I use Espresso for the html/php editing and CSSEdit for the CSS editing.  The two apps work hand-in-hand.  I save all of my EE templates and stylesheets as files off the server and download them into Espresso.  I edit the normal php templates in Espresso and the stylesheets in CSSEdit. You can certainly use Espresso to edit the CSS stylesheets but CSSEdit is much better due to its functionality and organizational ability.  Since the EE stylesheet has a .php extension in order for me to see it with all the CSSEdit coloring and formatting I’ll change the extension temporarily to .css in Espresso and then right click on the file to open it up in CSSEdit.  By doing it this way, you’re actually editing the same file so there’s no copying it back and forth. I’ll make the changes I need in CSSEdit and then when I’m ready to upload the file to the EE server, I’ll save and close it in CSSEdit and in my Espresso window I’ll change the file extension back to .php prior to uploading it.  I always have both editors open at the same time so it’s really easy to jump back and forth.  The CSSEdit Live Preview is incredible for troubleshooting styling errors or learning how other sites have achieved a certain style.

I highly recommend the two programs.

Lori

I also do design in Photoshop and then handcode everything in Coda. Livepreview for Coda with two monitors works really great when you’re coding up static templates before moving into EE integration.

I tried Espresso a couple of times, but the fact that it has no documentation whatsoever and seems to be updated infrequently made it really difficult to work with and I dropped it. Apparently there is an extension that auto-completes EE tags for you so I’m sure that would be nice, but wasn’t enough to make me switch.

Apparently there is an extension that auto-completes EE tags for you so I’m sure that would be nice, but wasn’t enough to make me switch.

Hi Tony,

I didn’t know that Espresso had an extension to complete the EE tags. Do you remember where you came across this extension?

Thanks.
Lori

I work in Coda mostly and still find a use for Transmit 4 which is super slick.

Espresso (now 1.1.2) is quite nice now, although its over complex FTP options lack the simple ‘upload modified’ which is so useful in Coda.

I take PSD artwork from designers (I am not) which causes loads of problems when a print mentality gets forced on to the digital media world, but that’s another story…