Solved

best tools for front end development HTML,CSS, JavaScript, cross browser compatibility, W3C compliance

Posted on 2010-08-23
7
556 Views
Last Modified: 2012-05-10
I would like to know what tools do you recommend for front end web development/debugging?

I.e. HTML,CSS, JavaScript, cross browser compatibility, W3C compliance, front end web development

The main ones I use are:
- Firebug
- IE Tab (for cross browser compatibility)
- IE Web developer toolbar
- Firefox Web developer toolbar
- Bobby (for checking W3C compliance)
- W3C's own HTML and CSS validators

Any others?






0
Comment
Question by:jeremyll
7 Comments
 
LVL 21

Accepted Solution

by:
chapmanjw earned 125 total points
ID: 33507917
That is about all that I use.  I would also add YSlow or the Google Page Speed Analyzer for FireFox.  They help you identify slow loading components.  Also, http://www.websiteoptimization.com/services/analyze/ can be used to help you identify how many objects are being loaded, what can be consolidated, etc.
0
 
LVL 27

Expert Comment

by:yodercm
ID: 33507923
PHP & MySQL For Dummies, Valde, Janet, Wiley Publishing, ISBN 0-470-09600
http://www.amazon.com/PHP-MySQL-Dummies-Computer-Tech/dp/0470096004/ref=pd_bbs_sr_1?ie=UTF8&s=books&qid=1209218475&sr=8-1

PHP Bible, Converse, Tim and Park, Joyce, Wiley Publishing, ISBN #0-7645-4955
http://www.amazon.com/PHP-Bible-2nd-Tim-Converse/dp/0764549553/ref=sr_1_1?ie=UTF8&s=books&qid=1209218851&sr=1-1

SAMS Teach Yourself MySQL in 21 Days, Butcher, Anthony, SAMS Publishing, ISBN# 0-672-32392
http://www.amazon.com/Sams-Teach-Yourself-MySQL-Days/dp/0672323923/ref=sr_1_1?ie=UTF8&s=books&qid=1209218887&sr=1-1

PHP and MySQL Web Development, Welling, Luke and Thomson, Laura, SAMS Publishing, ISBN# 0-672-32672
http://www.amazon.com/PHP-MySQL-Development-Developers-Library/dp/0672326728/ref=sr_1_1?ie=UTF8&s=books&qid=1209218925&sr=1-1

Build Your Own Database Driven Website Using PHP & MySQL, Kevin Yank
http://www.sitepoint.com/books/phpmysql1/
0
 
LVL 21

Expert Comment

by:chapmanjw
ID: 33507925
Ahh, almost forgot, it is important that your page renders without any images or CSS.  I usually test this with a text-based browser, like Lynx.  This ensures your page is well organized so that it can be viewed by any browser (whether or not they support images, CSS, javascript, etc) and can be read by a screen reader.
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 125 total points
ID: 33508630
Every browser you can run on your computer.  The 3 basic varieties are Microsoft/IE, Gecko/Firefox, and Webkit which is Safari and Chrome.  And of course the IE6/7/8 problems soon to include IE9.  IE8, Safari and Chrome also have web development tools in them.  The biggest advantage of them is that they look at the page thru the DOM, not from the source code.  A couple of times I've opened the Developer Tools in IE8 only to see that there was no body tag on the page.  Once was a comment tag that wasn't closed.  The page displayed in Firefox but not in IE, Safari and Chrome.
0
 
LVL 4

Assisted Solution

by:Morrisproject
Morrisproject earned 125 total points
ID: 33509672
Adobe Browser Lab, a great addition for cross browser compatibility. It comes with an onion skin view so you can see how different browsers display the website and on different OS.

I also use IE tester: http://www.my-debugbar.com/wiki/IETester/HomePage
For testing the awkwardness that IE continues to bring to us.

I use page speed addon to firebug : http://code.google.com/speed/page-speed/

I use Xenu for link checking : http://home.snafu.de/tilman/xenulink.html

Also Acunetix Web Vulnerability Scanner 6 for scanning for flawls, hackable areas, links etc : http://www.acunetix.com/cross-site-scripting/scanner-download.htm?gclid=CLWEp6iC0qMCFeFc4wodsH8swA

Thats about it I reckon

0
 
LVL 1

Expert Comment

by:alirezasaberi
ID: 33512577
IE tester.Great tool for check your page in all version of Internet Explorer
0
 

Assisted Solution

by:coolminds77
coolminds77 earned 125 total points
ID: 33519834
HTML Tidy for firefox, IE tester for multiple Internet Explorer versions
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now