Essential web-dev tools, tips and sites for Mac

[mrjamin]

Ok, here it is. Can someone sticky this thread? Figured it'd be good to get a definitive list of useful sites and apps for web-dev on the mac.

I'll start:
http://www.danvine.com/iecapture/

real-time screen shots of websites in various Windows browsers - just submit your site and it'll bring up screenshots of how it looks in IE5, IE5.5, IE6, Opera and FireFox

http://www.danvine.com/icapture/

...does the same, but for windows users wanting to check how Safari behaves

MrJ

[Benjamin]

wow that is really neat, hehe i tired it with the site i just revamped.

[Rower_CPU]

Good thread idea, mrjamin.

Here's a couple more good ones:
MOZiE - compare Mozilla and IE rendering side-by-side (PC app)
Multi-IE - Run IE5, IE5.5 and IE6 side-by-side (PC only)

And of course the validators...always validate your pages! ALWAYS!!!
(X)HTML
CSS

edit - Just found a decent primer on CSS-based designs:
http://www.wpdfd.com/editorial/basics/index.html

[mrjamin]

Cynthia 508/WAI Accessibility Checker

W3 Link Checker

[aus_dave]

Here's a nice little script from Patrick Gibson that makes setting up virtual hosting on OSX extremely easy:

http://patrickgibson.com/news/andsuch/000091.php

Combine this with Apache/MySQL/PHP running locally and you are set . I set up client sites as virtual hosts under 'Sites' and then access them by pointing a browser at http://clientsite/.

[kgarner]

These are great for quick starting points for navigation and layout.

List-O-Matic

Layout-O-Matic

I have used these on all of my sites as a basic starting point and then adding my own stuff to customize.

[pengu]

Originally Posted by Rower_CPU

Good thread idea, mrjamin.

Multi-IE - Run IE5, IE5.5 and IE6 side-by-side (PC only)

sorry to rain on your parade but MultiIE is not a "complete" version of each of the MSIE's. the non-native ones (the ones it installs) do not function 100%.

instead (on windows) get VMWare server (its the free version with a few less features than Workstation) and run a VM with different browsers if you need to.

[snkTab]

Safari - O'reilly
Digital version of (complete)books by O'reilly press, macromedia press, microsoft press, cisco press, sun, que, sams.

it cost money but there is a free trial. i'm using it now. really good content wise. i don't really like reading on the screen a lot though.

[atari1356]

css Zen Garden - I find this site pretty inspirational. It's an amazing gallery of designs all using the same HTML, but different CSS... basically shows you how much you can control with CSS.

enkoder - a Mac OS X app that takes an email address (or some other text/html) and converts it to a javascript - preventing the email address from being harvested by spammer robots/spiders. Their Dimensionizer contextual menu plugin also seems like it would be useful but I haven't tried it.

Apple's Web Page Development: Best Practices has some good info.

[HeWhoSpitsFire]

http://www.thenoodleincident.com/

Links and ideas primarily dealing with css. Great for layout ideas and developing technique.

[davecuse]

I just wanted to add a few more helpful tools that I've been using lately. I've become a huge fan of Drupal as a CMS, especially when used in conjunction with FCK Editor. They make a great combination.

Drupal
http://drupal.org

FCK Editor
http://fckeditor.com

And I just stumbled across a great resource for creating favicon.ico files from pretty much any image format, from a web based interface (for free). I just tried from a .png file that I neglected to reduce in size first, and it turned out well.

http://www.chami.com/html-kit/services/favicon/

[Scooby_Doo]

Taco HTML Edit

http://tacosw.com/

[steveedge]

Someone will thank me for this link.
http://maclab.guhsd.net/flash/intro.html

[harveypooka]

HTMLdog

http://www.htmldog.com/

Really brought me up to speed on XHTML and CSS. Book is great too.

[tominated]

http://dean.edwards.name/IE7/ for using css that wont work in IE

[Mac In School]

Lynda.com is a tremendous learning resource. I've been a subscriber for years. I even used it to learn OS X and iLife before I ordered my first Mac.

[modesty]

would be cool if any of this software was mac specific

[eclipse]

Free coder for firefox

http://getfirebug.com/releases/

Hey, is there a moderator that can tidy up the OP to include a summary of the different tools? Firebug may have already been added to this thread, but I'm not one to read all 3 pages. The "learning web design" thread is brilliant this way, a summary of all the pages that followed it. I think some of the links on this thread might be a little old.

[emanprinting]

Textmate is one of the most popular of the text editors. It has a bevy of features, like file tabbing for having multiple files open in a project, works with xcode, and integrates with FTP clients. It also comes equipped with “bundles” that allows you to have multiple different configurable languages. (This post is actually being written and published in Textmate.)
BBEdit is another full-featured text editor that is very similar to Textmate in terms of features. The BBEdit product page even has a section for web developers to see the benefits of BBEdit

[Wheaty]

Originally Posted by atari1356

css Zen Garden - I find this site pretty inspirational. It's an amazing gallery of designs all using the same HTML, but different CSS... basically shows you how much you can control with CSS.

This is amazing! I've been using a bit of CSS for years, and I knew that I was almost scratching the surface, but I really had no idea how powerfull it really is.

I feel newly inspired to re-write my websites a bit more professinally.

[eclipse]

Yeah, good isn't it? Really shows the power of CSS and a few images. I wish I had more time to play with CSS... if I ever end up doing this professionally, I'll definitely be visiting zengarden frequently for inspiration.

[cookie1105]

Originally Posted by mrjamin

I'll start:
http://www.danvine.com/iecapture/

real-time screen shots of websites in various Windows browsers - just submit your site and it'll bring up screenshots of how it looks in IE5, IE5.5, IE6, Opera and FireFox

http://www.danvine.com/icapture/

...does the same, but for windows users wanting to check how Safari behaves

MrJ

I have been looking for a site like this for at least 6 months. Thank you so much. I am teaching myself, so a large part of my learning takes place online or in books

Apps:

Coding: Trying to decide between SKedit & BBedit. Used to use a warez DW MX 2004. But that's illegal!!

Images: PS CS ( I am saving up for CS2!)

Links:

This one is great link reference Web Developer's Handbook

Webdesign/standards Podcasts:

Paul Boag
Dustin Diaz

[Mitthrawnuruodo]

Originally Posted by cookie1105

Coding: Trying to decide between SKedit & BBedit.

Try TextWrangler, most the functions of BBEdit, but free...

I use that (sometimes along with Cyberduck for s/ftp) for all my coding. No need for anything else.

[cookie1105]

Thanks for the tip about textwrangler Mitthrawnuruodo. I have downloaded it, and am going to play with it.

I forgot to add to my previous post Fetch for all ftp. Intuitively easy to use.

[paulchen]

icomment