PDA

View Full Version : Essential web-dev tools, tips and sites for Mac




mrjamin
Apr 1, 2004, 07:27 PM
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
Apr 1, 2004, 10:22 PM
wow that is really neat, hehe :) i tired it with the site i just revamped.

Rower_CPU
Apr 1, 2004, 11:13 PM
Good thread idea, mrjamin. :)

Here's a couple more good ones:
MOZiE (http://www.zeit.ca/mozie/) - compare Mozilla and IE rendering side-by-side (PC app)
Multi-IE (http://www.insert-title.com/web_design/?page=articles/dev/multi_IE) - Run IE5, IE5.5 and IE6 side-by-side (PC only)

And of course the validators...always validate your pages! ALWAYS!!! :p
(X)HTML (http://validator.w3.org/)
CSS (http://jigsaw.w3.org/css-validator/)

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

mrjamin
Apr 2, 2004, 07:01 AM
Cynthia 508/WAI Accessibility Checker (http://www.contentquality.com/fulloptions.asp)

W3 Link Checker (http://validator.w3.org/checklink)

aus_dave
Apr 2, 2004, 07:38 AM
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
Apr 2, 2004, 11:11 AM
These are great for quick starting points for navigation and layout.

List-O-Matic (http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp)

Layout-O-Matic (http://www.inknoise.com/experimental/layoutomatic.php)

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

mrjamin
Apr 7, 2004, 04:07 PM
Here's some very handy code (used with the attached SQL file) which will work out an approximate "as the crow flies" distance between 2 UK postcodes. You need to configure your DB connection info a few lines in.


/*
<form name="form1" id="form1" method="post" action="">
Start:
<input type="text" name="start" /><br />
Finish:
<input type="text" name="finish" />
<br />
<input type="submit" name="Submit" value="Submit" />
</form>
*/
<?php
// if the Submit button's been pressed:
if(isset($_POST['Submit'])){
$db = mysql_connect("host","username","password"); // set your db host/username/password info here
mysql_select_db("dbname"); // your db Name
$pc[0] = strtoupper(strrev(substr(strrev(str_replace(" ","",$_POST['start'])),3))); // extract the first half of the first postcode
$pc[1] = strtoupper(strrev(substr(strrev(str_replace(" ","",$_POST['finish'])),3))); // extract the first half of the second postcode

$sql = "SELECT * FROM `postcodes` WHERE `postcode` = '$pc[0]' || `postcode` = '$pc[1]' LIMIT 2"; // select the postcodes and the X/Y info from the DB
$result = mysql_query($sql);
mysql_num_rows($result);
$i = 0;
// load the x/y stuff into an array
while($postcodes = mysql_fetch_array($result)){
$postcode[$i]['x'] = $postcodes['x'];
$postcode[$i]['y'] = $postcodes['y'];
$i++;
}
// work out the difference in X and Y for the postcodes
$xDiff = $postcode[0]['x'] - $postcode[1]['x'];
$yDiff = $postcode[0]['y'] - $postcode[1]['y'];
// do some pythagorus to work out the distance between the 2
$distance = ($xDiff * $xDiff) + ($yDiff * $yDiff);
$distance = sqrt($distance);
// convert the result of the above to KMs
$KMdistance = round(($distance / 1000));
// convert KM to miles
$Mdistance = round((0.621371 * $KMdistance));

print("<p>The distance between $pc[0] and $pc[1] is $Mdistance miles, or $KMdistance km</p>\n");
}

?>


The SQL file also contains relevant longitude and lattitude info for each postcode. I'm not sure how up to date they are, but there are around 3000 lines in it so its fairly comprehensive!

I wrote the PHP myself, I know it could be optimised but it was a quick script I wrote to use the postcode DB i found, just playing around for my own amusement!

MrJ

mrjamin
Apr 7, 2004, 04:13 PM
Looking for a free WYSIWYG Textarea element replacement? Check this out:

http://dynarch.com/mishoo/htmlarea.epl

Its awesome. Its in beta at time of writing, but still very good.

MrJ

mark-uk
Apr 13, 2004, 09:03 AM
www.hotscripts.com

Blackstealth
Apr 13, 2004, 01:43 PM
Lynx emulator. Great for checking general accessibility for people using text browsers and, more importantly, screen readers. If it still all makes sense in Lynx then you're doing good.

http://www.delorie.com/web/lynxview.html

--

Oh, almost forgot, A List Apart (http://www.alistapart.com). Should be required weekly reading for anyone who uses (or likes to tinker with) CSS :)

Knox
Apr 16, 2004, 04:47 AM
Here's some very handy code (used with the attached SQL file) which will work out an approximate "as the crow flies" distance between 2 UK postcodes. You need to configure your DB connection info a few lines in.

The SQL file also contains relevant longitude and lattitude info for each postcode. I'm not sure how up to date they are, but there are around 3000 lines in it so its fairly comprehensive!


Ooh cool - i've got a heavily geographical based UK site, so finding the closest city would be really handy. The SQL file you attached seems to be cut off though - it only goes down to row 110, postcode B9.

mrjamin
Apr 16, 2004, 06:10 AM
Ooh cool - i've got a heavily geographical based UK site, so finding the closest city would be really handy. The SQL file you attached seems to be cut off though - it only goes down to row 110, postcode B9.

strange - sorry. Have replaced it with a ZIP file containing the SQL query instead :) its back in the original post.

Hope that fixes it...

MrJ

Knox
Apr 16, 2004, 07:27 AM
strange - sorry. Have replaced it with a ZIP file containing the SQL query instead :) its back in the original post.

Hope that fixes it...

Yup, works now, thanks.

encro
Apr 22, 2004, 02:31 PM
I have found this OS X Finder contextual menu plugin extremely helpful:
The Dimentionizer (http://superfly-software.com/)

encro
Apr 22, 2004, 03:05 PM
W3 Schools (http://w3schools.org)

arson
May 12, 2004, 04:03 PM
.htaccess password generator (http://www.euronet.nl/~arnow/htpasswd/)
An easy way to create an encrypted password for your .htpasswd file.

Javascript Knowledge Base (http://developer.irt.org/script/script.htm)
Can answer just about any javascript question you might have, usually includes sample code.

link92
Aug 20, 2004, 05:37 PM
PHPmac (http://phpmac.com)

mms
Oct 19, 2004, 10:44 PM
http://www.alistapart.com/

Rower_CPU
Oct 19, 2004, 10:48 PM
http://www.alistapart.com/

I can't believe we missed that one. :eek:

davecuse
Oct 19, 2004, 11:03 PM
http://evolt.org

oaker
Nov 19, 2004, 04:32 PM
PHP, Apache, & MySQL packages for local development. Good instructions, and easy to do.

http://www.entropy.ch/software/macosx/welcome.html

snkTab
Jan 6, 2005, 12:06 AM
Safari - O'reilly (http://safari.oreilly.com/)
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
Jan 8, 2005, 11:53 PM
css Zen Garden (http://www.csszengarden.com/) - 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 (http://automaticlabs.com/products/enkoderapp/) - 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 (http://automaticlabs.com/products/dimensionizer) contextual menu plugin also seems like it would be useful but I haven't tried it.

Apple's Web Page Development: Best Practices (http://developer.apple.com/internet/webcontent/bestwebdev.html) has some good info.

HeWhoSpitsFire
Feb 7, 2005, 04:40 AM
http://www.thenoodleincident.com/

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

davecuse
Apr 19, 2005, 11:46 PM
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
Jul 14, 2005, 03:43 AM
Taco HTML Edit

http://tacosw.com/

rendezvouscp
Aug 14, 2005, 03:09 AM
Essential? Perhaps not. However, this is a really cool site that is great for straight coders. You can type your code in real time and have the site display your code. Try out the real time html editor (http://www.squarefree.com/htmledit/).
-Chase

steveedge
Nov 3, 2005, 06:09 PM
Someone will thank me for this link.
http://maclab.guhsd.net/flash/intro.html

radiantm3
Nov 3, 2005, 06:17 PM
Textmate (www.macromates.com) - The best text editor on the mac! (IMO) :cool:

http://www.slideshowpro.net/ - Really nice flash slideshow plugin. Tons of features.

http://www.haveamint.com/ - Beautiful Ajax web stats (with a dashboard widget too!)

http://www.mikeindustries.com/sifr/ - Flash text replacement (really cool)

http://www.daikini.com/photon/ - iPhoto plugin for blogs

http://stopdesign.com/templates/photos/ - beautiful MT photo gallery template

http://getvanilla.com/ - Lightweight CSS-based forums.

Patmian212
Dec 11, 2005, 11:56 AM
Check out rapidweaver, easiest web tool ever, not very powerfull but enough for simple bloggers and such. www.realmacsoftware.com/rapidweaver

MrSugar
Jan 3, 2006, 04:13 PM
This is a must have.

Interactively edit CSS of any website to check errors, bugs, or see how things work.

Firefox Extension:

http://chrispederick.com/work/webdeveloper/

janey
Jan 21, 2006, 04:46 PM
Essential? Perhaps not. However, this is a really cool site that is great for straight coders. You can type your code in real time and have the site display your code. Try out the real time html editor (http://www.squarefree.com/htmledit/).
-Chase
My favorite text editor has a real-time web preview feature powered by webkit (safari, shiira, et cetera) -

http://codingmonkeys.de/subethaedit

(i'm really surprised nobody's mentioned it before :eek: it's not a web-dev only tool, but it's like Notepad on steroids - syntax coloring, collaborative editing [very, very handy], regex find&replace and more - yummy!)

xelterran
Feb 9, 2006, 02:34 PM
http://www.colorschemer.com/osx_info.php - useful for creating matching color combinations

http://www.webwhirlers.com/colors/wizard.asp - similar to above

http://www.sxc.hu/ - royalty free stock photography

jonparadise
Feb 25, 2006, 12:11 PM
Skedit is my current object of lust.

It's so quick, flies along and has just been updated.

Skedit (http://www.skti.org/skEdit.php)

pimentoLoaf
Mar 9, 2006, 11:00 AM
Though I primarily use Adobe GoLive (http://www.adobe.com/products/golive/main.html), I tend to clean up the code and add CSS via BareBones TextWrangler (http://www.barebones.com/products/textwrangler/index.shtml) which is great FREE tool for all general purpose editing.

cookie1105
Mar 28, 2006, 04:59 PM
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.:D 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 :o 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 (http://www.alvit.de/handbook/)

Webdesign/standards Podcasts:

Paul Boag (www.boagworld.com)
Dustin Diaz (www.dustindiaz.com)

Mitthrawnuruodo
Mar 28, 2006, 05:26 PM
Coding: Trying to decide between SKedit & BBedit.Try TextWrangler (http://www.barebones.com/products/textwrangler/), most the functions of BBEdit, but free... :)

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

cookie1105
Mar 28, 2006, 06:21 PM
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 (www.fetchsoftworks.com) for all ftp. Intuitively easy to use.

paulchen
Apr 24, 2006, 01:39 PM
icomment

xelterran
Aug 9, 2006, 08:19 PM
http://www.designmeltdown.com/ - web design tips and trends.

fall3n
Sep 25, 2006, 02:26 AM
Omnigraffle (I use pro) great for sitemaps and IDDs. Transmit, pretty much the best mac FTP program out there.

nightelf
Nov 2, 2006, 10:46 PM
CSSEdit (http://www.macrabbit.com/cssedit/), great for CSS.

MySQL Administration (http://www.mysql.com/products/tools/administrator/), a free app from MySQL to administrate MySQL DBs in your Mac.

aussieNickuss
Dec 28, 2006, 06:01 PM
CSS Mania (http://cssmania.com) and CSS Drive (http://www.cssdrive.com). - A couple of great CSS galleries to get design ideas and tips. Some pretty beautiful sites get posted on both those sites.

Firefox Extensions

Web Developer Toolbar (https://addons.mozilla.org/firefox/60/) - lets you show/hide css styling, outline block elements, show hidden info......all sorts of stuff you can do with this.

XHTML Validator (http://users.skynet.be/mgueury/mozilla/) - automatically validates the current page right from within Firefox.....uses the same SGML validator that W3C uses and shows a green, yellow or red dot on the bottom right of the screen. Saves going to the W3C site to validate your code. (I think it only works on Windows tho :mad: ).

MatthewConnelly
Jan 14, 2007, 12:33 PM
MAMP (http://www.apple.com/downloads/macosx/unix_open_source/mamp.html)

Mac, Apache, MySQL, PHP.

Great all in one installation for all your local server needs. :)

LtRammstein
Mar 6, 2007, 10:52 AM
I'm surprised this hasn't been added, so I'll add it now.

http://www.w3schools.com

A great place to learn, HTML, XHTML, CSS, TCP/IP, XML, XSL, JavaScript, PHP, SQL... The list goes on!

I learned SQL, XML, XSL, PHP, and some JavaScript from the site. They even offer certification on some specific languages.

Definitely worth a look.

Steve

LBmtb
Mar 10, 2007, 10:23 PM
I'm surprised this hasn't been added, so I'll add it now.

http://www.w3schools.com

A great place to learn, HTML, XHTML, CSS, TCP/IP, XML, XSL, JavaScript, PHP, SQL... The list goes on!

I learned SQL, XML, XSL, PHP, and some JavaScript from the site. They even offer certification on some specific languages.

Definitely worth a look.

Steve
Yes it was. 15th post (http://forums.macrumors.com/showpost.php?p=809477&postcount=15). :)

Few more

Position Is Everything (http://www.positioniseverything.net/)
CSS tinderbox (http://csstinderbox.raykonline.com/)
CSS superdouche (http://isnoop.net/tools/css.php)

harveypooka
Mar 26, 2007, 10:45 AM
HTMLdog

http://www.htmldog.com/

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

pengu
Mar 26, 2007, 11:15 AM
Good thread idea, mrjamin. :)

Multi-IE (http://www.insert-title.com/web_design/?page=articles/dev/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.

pengu
Mar 26, 2007, 11:45 AM
Try TextWrangler (http://www.barebones.com/products/textwrangler/), most the functions of BBEdit, but free... :)

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

if you do site-based work and (like me) hate trying to use the finder to organise a site, i'd suggest either skEdit/textMate if its mostly static HTML, or if you do a lot of php/javascript/etc try Komodo Edit. it's the freebie version of Komodo IDE, and while it's not the prettiest (its not X11 or anything, looks very Firefoxish [i'll explain why soon]) it works really well and has good support for a lot of languages.

The app uses Mozilla XUL for presentation, and another (damn brain, remember it) mozilla tech. for the text-editing engine.

I'm a stickler for well-designed, beautiful Aqua apps, but this one has swayed me (well, i use the Freebie at work, IDE @ home), because of its functionality.. http://activestate.com/products/komodo_edit/

tominated
Mar 31, 2007, 05:28 AM
http://dean.edwards.name/IE7/ for using css that wont work in IE

Mal
Mar 31, 2007, 11:30 AM
Suprised this wasn't on here: Kuler. (http://kuler.adobe.com) Nice web-based color scheme generator/library. There's some great ideas on there, and it also lets you make and share your own.

jW

tominated
Apr 8, 2007, 05:45 AM
http://www.smashingmagazine.com/2007/03/10/web-20-tutorials-round-up/ - web 2.0 tutoorials. awesome.
http://www.modernlifeisrubbish.co.uk/article/the-biggest-mistakes-made-by-web-design-companies - biggest mistakes made by web-design companies. good read
EDIT: I forgot http://www.miniajax.com/ - great library of good looking ajax and web 2.0 scripts!

elppa
Apr 18, 2007, 05:38 PM
Getting mod_rewrite to work on Mac OS X. (http://www.deheus.net/petrik/blog/post/33/)

furcalchick
May 1, 2007, 06:32 PM
http://web.mac.com/will.englefield/iWeb/WillG4PB/Home.html - iweb tips and tricks.

Mantat
May 2, 2007, 06:57 AM
Is it me or you guys missed CSSEdit 2? Its a big improvement from the first version and now allow live preview of your page which is very nice.

Also, I dont understand why people keep talking about text editor while Textmate is so far ahead of the others. If you havent tried it, please do so and make sure you learn a few snippets else you will miss the good stuff. Best 50$ I have ever spent of an application!

Best pluggin for FireFox: FireBug, allow AJAX debug, inspect DOM, etc.. very complete.

furcalchick
May 2, 2007, 01:49 PM
iwebsites is a must for those on iweb wanting to manage multiple web sites. http://mistergregg.com/cocoadrillosoftware/iWebSites/ . i nearly published my site, along with the other four sites when i found out about my site publishing was going all wrong. good thing, as i have it all settled now (my sites weren't far into development).

mattscott306
May 24, 2007, 09:07 AM
www.tizag.com
It's a beginners web tutorial place that helped me a lot more than w3schools did.

phatphil
Jul 7, 2007, 04:19 PM
The Daily Slurp (http://www.dailyslurp.com/) is one of the best inspirational sites I've seen. Plenty of great CSS design shown here.

Mac In School
Jul 20, 2007, 12:01 AM
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.

NoOrdinary
Sep 3, 2007, 05:51 AM
I don't see anyone suggested this yet, but maybe I skip it. I use this on non-Intel machine to check the preview on IE/Win: IE NetRenderer (http://ipinfo.info/netrenderer/)

tominated
Sep 3, 2007, 06:17 AM
I don't see anyone suggested this yet, but maybe I skip it. I use this on non-Intel machine to check the preview on IE/Win: IE NetRenderer (http://ipinfo.info/netrenderer/)

i use that all the time!

cr2sh
Sep 4, 2007, 09:52 PM
Am I wrong or is this thread missing mention of the Firefox FireBug (https://addons.mozilla.org/en-US/firefox/addon/1843)add-on?

I consider it essential.

xelterran
Oct 8, 2007, 07:24 AM
http://www.twinhelix.com/css/iepngfix/

Lets you use png images on IE 5~6 (IE7 supports png images).

xelterran
Nov 29, 2007, 02:02 PM
Use ie 5, 5.5, 6 and 7 on OS X (intel):

http://www.kronenberg.org/ies4osx/

jerett
Jan 17, 2008, 03:12 PM
I will say that a lot of the info in this thread is slowly becoming out-dated so it might be good for people to begin posting to keep it alive with new and exciting tools. I for one love finding gems.

Just to let you know of two really good "free" programs to use that work hand-in-hand are:

FTP: http://cyberduck.ch/
and
Text Editor: http://smultron.sourceforge.net/

Does anyone have another suggestion of a great FTP program that comes with a built in text-editor (doesn't have to be free, just reasonable)

cr2sh
Jan 17, 2008, 03:27 PM
I think it's really important to have the latest in browser and web technology when you're developing a website. I highly recommend IE 5.1

http://www.pure-mac.com/webb.html#mie

:)

Mitthrawnuruodo
Jan 17, 2008, 03:31 PM
Does anyone have another suggestion of a great FTP program that comes with a built in text-editor (doesn't have to be free, just reasonable)Coda (http://www.panic.com/coda/). Most gorgeous program, ever. Uses Transmit's FTP engine and Webkit for previews. All you ever need.

MrSmith
Jan 23, 2008, 08:57 PM
browsershots.org (http://browsershots.org/). Test online how your site looks on umpteen browsers. It presents you with rows of (downloadable) screenshots from the browsers/platforms you selected. Whole page screenshots. Wait times vary from a minute to less than 30 (in my experience). Creating a free user account avoids number of screenshots limits.

modesty
Feb 5, 2008, 06:19 PM
would be cool if any of this software was mac specific

MrSmith
Feb 6, 2008, 06:07 AM
would be cool if any of this software was mac specific
Is platform-specific wed development/design software 'cooler' than cross-platform? How so?

xelterran
Feb 14, 2008, 06:43 PM
http://www.csstypeset.com - test out fonts line-height letter-spacing etc

angelwatt
Feb 24, 2008, 04:27 PM
Code by Dean Edwards that fixes numerous HTML and CSS issues in IE to make it look more like the rendering of IE7/8.

http://code.google.com/p/ie7-js/

Giovannino
Mar 2, 2008, 06:29 AM
Here's a good iWebFAQ site:

http://alyeska.altervista.org/en/iWeb_FAQ.html

With a lot of tips and tricks.

Hope it helps.

Regards,
Giovannino

mason.kramer
Mar 5, 2008, 02:55 PM
editor: TextMate http://macromates.com/
Language: Ruby http://www.ruby-lang.org/en/ (code is free and included on x-tools dev install)
Framework: Rails http://rubyonrails.com/ (also included in the web dev).
Browser: Firefox 2http://www.mozilla.com/en-US/firefox/ (the greatest web browser ever wrought by mortal hands. I can't believe I'm the first to post this!)
HTML, JS, CSS debugging and validation: https://addons.mozilla.org/en-US/firefox/addon/1843
versioning: subversion http://subversion.tigris.org/project_packages.html (if you install it with apt-get, make sure to include the --with-ssl option).
ftp: cyberduck http://cyberduck.ch/ (this is a perfect example of an application that NAILED the Mac Way in its design philosophy) (edit: for Does anyone have another suggestion of a great FTP program that comes with a built in text-editor (doesn't have to be free, just reasonable) . Cyberduck leaves you with no compromises in your editor. In cyberduck, edit your preferences to link to your favorite editor. Then, in the cyberduck file browser, cmd-k or rgtclick->edit with-> will seamlessly allow you to "edit in place" with your favored editor. It's fabulous)

This ware I've linked, combined with the optional developer's toolkit install on the OS CD, sets up a completely functional web development environment with versioning and a versioning server, a database (Mac OS ships with SQLite 3 working out of the box, and Rails is preconfigured to connect to an SQLite database - not a single line needs to be configured), a web server, a truly fine coding environment in TextMate, and a truly fine language and framework in Ruby and Rails, respectively.

(Rails includes a web server which is ok for single person development, but very slow. Mongrel is better and is ported for darwin - you can find out about that if you need it, and if you're looking here, you probably either don't need it, or already have it)

This is why I switched to Mac last year: Mac has all the goods and none of the hassle. There is no compromise here, this is the best of the best.

macsrules
Mar 22, 2008, 07:05 PM
Two Really Good Editors.


1. This one has all the bells and whistles that you could possibly want, they have a free version unless that has changed http://www.aptana.com/


2. Komodo - They have an open source version now, more of a stripped down version of Aptana. Both are really good products, just depends on how much you are building with your website http://www.activestate.com/Products/komodo_ide/komodo_edit.mhtml

3. I know some already mentioned Kuler but that application rocks http://labs.adobe.com/technologies/kuler/

Alida
May 17, 2008, 06:51 PM
www.hotscripts.com

Just call me clueless, because I am...just learning to try to do my own website. But isn't hotscript.com for Windows? Is there something I am not understanding here? Is this not a mac forum or is everyone running windows on their Macs now?

angelwatt
May 17, 2008, 09:33 PM
Just call me clueless, because I am...just learning to try to do my own website. But isn't hotscript.com for Windows? Is there something I am not understanding here? Is this not a mac forum or is everyone running windows on their Macs now?

No, not just for Windows. Most of the programming languages it host scripts for are OS independent so they apply to people running Windows, Mac, or Linux.

&Ingonyama
May 24, 2008, 08:23 PM
http://www.gskinner.com/RegExr/desktop/

Build/test regular expressions (requires Adobe Air (http://www.adobe.com/products/air/))

eclipse
Nov 30, 2008, 10:48 PM
This website can be helpful if someone isn't confident with CSS and wants to play with type, or even if someone IS confident with CSS and wants to compare their type with other formats.

http://www.typetester.org/

Just make your type changes and it does the CSS for you.

eclipse
Dec 2, 2008, 05:32 PM
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.

Scooby_Doo
Dec 7, 2008, 09:27 PM
I use ColorJack Studio (http://www.google.com/url?q=http://www.colorjack.com/studio/&sa=X&oi=smap&resnum=1&ct=result&cd=2&usg=AFQjCNEErK548jAUewEWE2MB1-thS415ig) and ColorJack Sphere a lot for color designs. Nice interfaces and tons of options, and some Dashboard widgets to boot.

ObaMaciden
Dec 16, 2008, 06:56 AM
Let me add www.screencastsonline.com to the list.

Though it's not specifically tailored for web-dev, every week this paid podcast introduce cool software intros that help many aspects of web-dev processes.;)

RoninXI
Feb 3, 2009, 03:05 AM
I can't add anything really but I can tell you my setup.

I use MAMP it is so easy I never messed with it after setup.

For editing I used to code in Coda but php coding is very poor. I switched back to what I had used before,Taco HTML Edit. It has on-key-up live preview including edits in an unsaved external CSS file and live changes in php.

FTP was a no brainer for me because I was already used to Cyberduck.

Hopefully that helps someone :)

emanprinting
Feb 3, 2009, 06:33 AM
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
Apr 28, 2009, 05:39 AM
css Zen Garden (http://www.csszengarden.com/) - 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
Sep 22, 2009, 08:23 PM
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.

poisenedapple
Sep 30, 2009, 05:47 AM
Some of the sites / tips/etc already posted I agree with...but here's a few more tips/sites/tutorials etc
-webmonkey
-praystation
-flashmo
-actionscript d0t org
-flash village
-apache server tutorials come in handy
-50webs
- dot tk
- adobe dev. site
- apple dev. site
- generators are useful
- javascript diretories
- stanford materials
-art dir. bureau

elppa
Nov 14, 2009, 03:18 PM
If you use the MySQL preference pane, then you may be familiar with this:

http://att.macrumors.com/attachment.php?attachmentid=203199&stc=1&thumb=1&d=1258233471

Well, not anymore.

64 bit version available (scroll down) (http://www.swoon.net/site/software.html). Works great for me.

alexk82
Dec 7, 2009, 05:08 PM
Am I wrong or is this thread missing mention of the Firefox FireBug (https://addons.mozilla.org/en-US/firefox/addon/1843)add-on?

I consider it essential.

don't forget YSlow for firebug from the YUI guys at Yahoo. plus YUI http://developer.yahoo.com/yui/

for the mac dev, since we live in a IE world http://getfirebug.com/lite.html

for those who love firebug this is firebug lite for help in safari and IE

design-is
Dec 23, 2009, 10:21 AM
Here's another useful tool from Google: Google's Browser Size (http://browsersize.googlelabs.com/)site.

It lets you view a visual percentage guide associated with users' browser viewport size in pixels. It will even let you overlay this guide on a website of your choosing by entering the URL in the box provided.

Very useful in my humble opinion :)

/Doug

cyberdesignz
May 17, 2010, 01:56 AM
I have used Komodo Edit 5.2.4 on Mac it is very good editor tool which I want to share with you. Komodo Edit, based on the award-winning Komodo IDE, offers sophisticated support for all major scripting languages, it has in depth multi-language file support. Syntax style and coloring of Komodo Edit makes the code very easy to read. These are some features due to which I like it. Komodo Edit is also available for the windows OS.

aaroncavano
Nov 29, 2010, 12:35 PM
For learning beginner to advanced http://css-tricks.com

For what to learn (in order):

XHTML (content tags only)
CSS (all the styling)
Javascipt library like Jquery (functionality)
PHP/SQL or Ruby on Rails (for server development)

For up-to-date training that is something fresh weekly http://preekly.com

For software:

Coding = textmate, coda, dreamweaver, Espresso
For coding CSS = CSSedit
Browser and testing = Firefox and Firebug
FTP = CyberDuck, Transmit, FileZilla (Transmit rocks and the rest are free)
Hosting = Media Temple, Rackspace cloud, Host monster, host gator
MAMP = local testing of php and sql
Wordpress = CMS, blogging

harpster
Nov 29, 2010, 02:07 PM
Could be mentioned already but Nettuts has some very good web development tutorials. I watched all the Code Ignitor videos and they helped.

http://net.tutsplus.com

Evoken
Dec 2, 2010, 06:22 PM
Some recommendations based on what I use...

Web Design: Fireworks CS5
HTML/Javascript/etc: Espresso
CSS coding: CSSEdit
Browser testing: Google Chrome + included dev tools + extensions
FTP: Transmit
PHP/SQL Local testing: MAMP
CMS: CMS Made Simple
IE testing: VMWare Fusion with Windows XP/7 and IE 9/8/6
File sharing: Dropbox
Misc: Loremify Dashboard Widget

Some other alternatives which are good but that I don't personally use:

- TextMate and Coda for coding
- Firefox + Firebug and Web Developer Toolbar
- Parallels Desktop and WineBottler for IE testing

Some cool websites:

http://css-tricks.com/
http://www.smashingmagazine.com/
http://www.alistapart.com/
http://www.zeldman.com/
http://webdesignernotebook.com/
http://stuffandnonsense.co.uk/

AFPoster
May 4, 2012, 09:50 AM
Teamtreehouse.com is a great resource for Web Design / Development and iOS Development.

Coda application for Mac is by far the best I've used as well.

olup
Oct 6, 2012, 04:04 PM
I came across this responsive design testing tool a couple of days ago: http://screenqueri.es/

It supports various devices from Iphone(only one option, I guess it is the retina display) to various android screen and the lumia. Not only can you test already uploaded stuff, but also stuff on localhost and you can toggle trueview, which is the phone's navigation menus in some phones/devices.
So far I found it to be very useful and I hope it helps someone out there, who's doing responsive design

Evoken
Oct 6, 2012, 05:11 PM
I came across this responsive design testing tool a couple of days ago: http://screenqueri.es/

It supports various devices from Iphone(only one option, I guess it is the retina display) to various android screen and the lumia. Not only can you test already uploaded stuff, but also stuff on localhost and you can toggle trueview, which is the phone's navigation menus in some phones/devices.
So far I found it to be very useful and I hope it helps someone out there, who's doing responsive design

Interesting. Thanks for sharing :)

Lambros
Oct 30, 2012, 04:12 PM
I cannot live without Coda 2...that program does everything I need it to (obviously I'm a developer, not designer).

bronxred
Nov 29, 2012, 11:14 AM
Great resources on here. I personally don't have the patience for website building from scratch anymore (I like the CMSs plus Tumblr and similar), but it's still useful to have your own domain/email (NOT from gmail, hotmail, etc.), I think, for those who place a high value on privacy.

:o

olup
Jan 16, 2013, 06:34 AM
This site from Brad Frost has a lot of responsive layout options, from navigation to fluid grids and fluid images, forms and whatnot. The Resources page seems really informative and has a ton of infos about RWD

http://bradfrost.github.com/this-is-responsive/patterns.html

markmiller988
May 6, 2013, 07:21 AM
found this thread really helpful. thanks.