WebDev

From Things and Stuff Wiki
Revision as of 14:29, 11 September 2012 by Milk (talk | contribs) (→‎Authoring)
Jump to navigation Jump to search


hmm.

Articles

Tools

See also Browsers

Validation

Authoring

Ninja

CodeMirror

  • CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation. A rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality.

jsFiddle

Control + Shift + ↑
  Toggle sidebar
Control + ↑ or Control + ↓
  Switch editor windows

Control + Return
   Run fiddle
Control + s
  Save fiddle (Save or Update)
Control + Shift + Return
  Load draft

jsBin

urls; 

/
  Show the full rendered output. This content will update in real time as it's updated from the /edit url.
/edit
  Edit the current bin
/watch
  Follow a Code Casting session
/embed
  Create an embeddable version of the bin
/milk/last
  View the last edited bin for this user
/milk/last/edit
  Edit the last edited bin for this user
/milk/last/watch
  Follow the Code Casting session for the latest bin for this user
/quiet
  Remove analytics and edit button from rendered output
.js
  Load only the JavaScript for a bin
.css
  Load only the CSS for a bin

http://jsbin.com/gist/271333

cssdesk

Bookmarklets

Overlay

div { outline:1px solid red; }

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';}}})();

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

Testing

Browsers available:

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

Plus Windows; Firefox, Chrome, IE.

To check

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.
  • 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

Dev folk

General

python2 

 python -m SimpleHTTPServer 8000

python3 

python -m http.server 5674

Analysis

Testing

Coding

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

Authoring

  • 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

Support

Scratchpad

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=WebDev&oldid=4450"