Essential web-dev tools, tips and sites for Mac

hotscripts

mark-uk said:

http://www.hotscripts.com

Click to expand...

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?

Alida said:

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?

Click to expand...

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.

http://www.gskinner.com/RegExr/desktop/

Build/test regular expressions (requires Adobe Air)

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.

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.

Color theory support

I use ColorJack Studio and ColorJack Sphere a lot for color designs. Nice interfaces and tons of options, and some Dashboard widgets to boot.

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.

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

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

atari1356 said:

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.

Click to expand...

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.

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.

good resources on here...i'd like to add a few

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

If you use the MySQL preference pane, then you may be familiar with this:



Well, not anymore.

64 bit version available (scroll down). Works great for me.

cr2sh said:

Am I wrong or is this thread missing mention of the Firefox FireBug add-on?

I consider it essential.

Click to expand...

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

Here's another useful tool from Google: Google's Browser Size 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

Editor Tool for MAC OS.

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.

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

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

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/

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.

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

olup said:

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

Click to expand...

Interesting. Thanks for sharing

I cannot live without Coda 2...that program does everything I need it to (obviously I'm a developer, not designer).

Great Resources

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.

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