WebDev

Tools

See also Browsers

Validation

• Validator.nu - (X)HTML5 Validator (Living Validator)

• The W3C Markup Validation Service - older
• http://validator.aborla.net/ - older, uses HTML Tidy
• http://htmlhelp.com/tools/validator/ - html4

Authoring

• Ninja Ninja HTML5 Authoring Tool is a fully featured content authoring tool for creative professionals who need to deploy HTML5 web applications for desktop or mobile, and want to create content in a visual way.
  • Tetsubo forum: Ninja
  • Ninja power: open-source HTML5 toolset aims to enable richer Web apps - July 22 2012

Bookmarklets

• http://speckyboy.com/2009/02/16/32-indispensable-bookmarklets-for-web-developers-and-designers/

• Responsive Design bookmarklet
  • https://github.com/benkeen/responsive-design-bookmarklet-generator

• HTML5 outliner (h5o)
  • https://github.com/sideshowbarker/h5o-dymonaz

• http://yahoo.github.com/debugCSS/
  • https://github.com/yahoo/debugCSS

• http://marklets.com/Results.aspx

Overlay

div { outline:1px solid red; }

• http://aymanh.com/css-debugging-bookmarklets - outline is border not outline >_<

javascript:(function(){var t=['div','table','form','address','blockquote','h1','h2','h3','h4','h5','h6','p','pre','dd','dl','dt','ol','ul', 'li'];var c=['blue','blue','blue','red','red','red','red','red','red','red','red','red','red','green','green','green','green','green', 'yellow'];for (var i in t){var l=document.getElementsByTagName(t[i]);var j=0,e;while(e=l.item(j++)){e.style.outline='solid '+c[i]+' 1px';}}})();

• http://subtlegradient.com/articles/2009/07/23/subtle_hover_css_inspect_bookmarklet.html

Testing

• Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.
  • Helps by showing errors

• http://unused-css.com/
  • https://github.com/rflynn/css-tools

• http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling
  • https://github.com/andyedinborough/stress-css

Testing

Browsers available:

• Chromium 22 (Dev)
• Google Chrome 20
• Firefox 13
• Firefox 16 (Nightly)
• Opera 12

Plus Windows; Firefox, Chrome, IE.

To check

• http://www.webupd8.org/2011/09/test-websites-in-internet-explorer-9-8.html

Tools

• The Screening tool lets you automate testing of web-based applications. You can use it to; Create test scripts by recording actions that you perform on an application, Run automated tests applications, Script tests by using the Screening tool’s API

• Selenium is a portable software testing framework for web applications. Selenium provides a record/playback tool for authoring tests without learning a test scripting language (Selenium IDE). It also provides a test domain-specific language (Selenese) to write tests in a number of popular programming languages, including C#, Java, Groovy, Perl, PHP, Python and Ruby. The tests can then be run against most modern web browsers.
  • http://watirwebdriver.com/

• iMacros is an extension for the Mozilla Firefox, Google Chrome, and Internet Explorer web browsers which adds record and replay functionality similar to that found in web testing and form filler software. The macros can be combined and controlled via JavaScript. Demo macros and JavaScript code examples are included with the software. iMacros was developed by iOpus. First released in 2001, iMacros was the first macro recorder tool specifically designed and optimized for web browsers and form filling.

to sort

• Talk: Tooling & The Webapp Development Stack - Paul Irish, May 1st, 2012
  • Slides

Dev folk

• http://paulirish.com/
• http://codinghorror.com/blog/ - Jeff Atwood
• http://raganwald.posterous.com/

General

• http://www.webdesignshock.com/web-design-software - to check

python2

 python -m SimpleHTTPServer 8000

python3

python -m http.server 5674

Analysis

• http://ifconfig.me/ - client info via curl
• http://redbot.org/

• http://ismyblogworking.com/
• http://www.webpagetest.org/

• http://www.coderholic.com/invaluable-command-line-tools-for-web-developers/

• http://prettydiff.com/

• http://nwtools.com/
• http://urlspy.co.uk/

Testing

• http://seleniumhq.org/

Coding

• http://ted.mielczarek.org/code/mozilla/bookmarklet.html

• • EightPack consists of the following tools: JSLint, JSHint, JS Beautifier, JSMin, CSS Beautify, and cssmin.js. Uses V8 engine.

• http://code.google.com/p/minify/ - php css and js
  • http://code.google.com/p/minify/wiki/CommonProblems

• https://github.com/tedivm/JShrink - php js

• https://github.com/css/csso - nodejs

• http://code.google.com/p/collide/

• https://github.com/stubbornella/csslint

• http://www.initializr.com/

• http://www.yaml.de/

Authoring

• Maqetta is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads.
  • http://maqetta.org:55556/maqetta/app/docs/index.html#tutorials/tutorials

• BlueGriffon is a new WYSIWYG content editor for the World Wide Web. Powered by Gecko, the rendering engine of Firefox, it's a modern and robust solution to edit Web pages in conformance to the latest Web Standards.

• Aptana Studio 3 - Develop and test your entire web application using a single environment. With support for the latest browser technology specs such as HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python.

• Ace is a standalone code editor written in JavaScript. Our goal is to create a web based code editor that matches and extends the features, usability and performance of existing native editors such as TextMate, Vim or Eclipse. It can be easily embedded in any web page and JavaScript application. Ace is developed as the primary editor for Cloud9 IDE and the successor of the Mozilla Skywriter (Bespin) Project.
• Cloud9 IDE - Write, run, and debug your code with our powerful and flexible cloud IDE. Collaborate on your workspaces publicly, or keep them private. The choice is yours!

CSS 3

• http://www.layerstyles.org/ - box shadow, etc.
• http://www.css3d.net/ribbon-generator/
• Ceaser - CSS Easing Animation Tool

• http://www.patternify.com/ - CSS Pattern Generator

Support

• http://stackoverflow.com/privileges
  • http://meta.stackoverflow.com/
  • http://stackoverflow.com/badges

Scratchpad

• Sites