WebTools
From Lost In Wonderlands
Contents
Web Tools
by paul.plaquette, Senior Software Engineer, Trilda Open Source
list of tools of interest when working on HTML5/CSS3/JavaScript web site or Web Applications
NeXT Steps
add more link on web tools of interest
coming soon :
Everything You Always Wanted on web Tools of interest... (But Were Afraid to Ask)
See Also
- HyperText
- HTML
- HTML5
- HTML5 Gaming
- HTML5 Demos
- HTML5 Tutorials
- xHTML
- XML
- JSON
- CSS
- CSS3
- JavaScript
- JavaScript Frameworks
- Cordova, a framework previously know as PhoneGap
- Web Blogs
- Web Browsers
- Web Hybrid Apps
- Web Native Extension and plugins
- Web Formats
- Web Technologies Reference
- Web APIs
- Web Tools
- Web Presentation Tools
- Semantic Web and Data Web
Cross-Platforms
- Code Mirror: http://codemirror.net/
- Chrome Extension — external download
- <textarea> (browser-based). See online demo.
- editArea (browser-based). See online demo.
- HTMLkit(commercial) : http://www.htmlkit.com/
- ShiftEdit — online IDE: http://shiftedit.net/
- RJ TextEd — http://www.rj-texted.se/
- git, source code repository system:
* http://git-scm.com/ * http://git-scm.com/book
IDE, Text Editors
- Eclipse: http://www.eclipse.org/
* Aptana/Zend Studio/Eclipse: https://github.com/sergeche/eclipse-zencoding
- Aptana Studio: http://www.aptana.com/
- NetBeans: http://netbeans.org/
- jEdit: http://www.jedit.org/
- Komodo-Edit, Open Komodo: http://www.openkomodo.com/
- Komodo-IDE: http://www.openkomodo.com/
HTML Text editor
- BlueGriffon: http://bluegriffon.org/
GUI builder
- Web HTML5 GUI editor: http://maqetta.org/
- RIB, Rapid Interface Builder, http://01.org/projects/rib/
Node.js tools
- Node.js: http://nodejs.org/
- Node.js: NPM packages
* https://npmjs.org/ * https://npmjs.org/package/
- NPM : https://npmjs.org/
- Jake node.js JavaScript build tool, https://github.com/mde/jake
- nodejitsu,a node cloud: https://nodejitsu.com/
- Mongo database:
* http://mongodb.github.com/node-mongodb-native/api-articles/nodekoarticle1.html * https://github.com/mongodb/node-mongodb-native
- Grunt.js
* http://gruntjs.com/
Nodesj's blogs
Testing tools
- Testacular , Spectaculer test Runner for JavaScript: http://vojtajina.github.com/testacular/
Debbugging tools
- FireBug, firefox Extension
Mac OS X
- textMate: http://macromates.com/
- Expresso: http://macrabbit.com/blog/
- Coda: http://panic.com/coda/
- xCode: https://developer.apple.com/technologies/tools/
- Blue Fish — http://bluefish.openoffice.nl/index.html
- Dreamweaver: http://success.adobe.com/en/na/sem/products/dreamweaver.html
- BBEdit and TextWrangler (Mac) — http://www.barebones.com/
- Smultron: http://www.peterborgapps.com/smultron/
GNU/Linux
- Geany: http://www.geany.org/
- BlueFish — built-in in v2.2.1
- GEdit — Franck Marcia's plugin, Mike Crittenden's plugin
- Quanta Plus : http://webdesign.about.com/od/freewebeditors/fr/quanta-plus-profile.htm
- E-TextEditor : http://e-texteditor.en.softonic.com/download
Ubuntu
installing oracle java 7 on 12.04
Windows
- Visual Studio (Windows) — at Visual Studio Gallery
- NotePad++: http://notepad-plus-plus.org/
- UltraEdit: http://www.ultraedit.com/
- file extractor : http://file-extractor.com/
- Dreamweaver: http://success.adobe.com/en/na/sem/products/dreamweaver.html
- EmEditor: http://www.emeditor.com/
- Sakura Editor: http://sakura-editor.sourceforge.net/
- EditPlus: http://www.editplus.com/
- TopStyle: http://topstyle4.com/tp://www.pspad.com/
- Sublime Text (Windows)
- AkelPad — http://akelpad.sourceforge.net/en/index.php
- Codelobster PHP Edition — http://www.codelobster.com/
Web
a selection of a few links to web site that are providing on line doc, help, tools, framework of interest for HTML5, CSS3, Web Colors, Web Font, HTML and CSS validation and generation, Browsers testing against standards, Web desing and so on...
Data filling
- text:
* http://lorempixel.com/ * http://www.html-ipsum.com/
Fonts
- http://html.adobe.com/edge/webfonts/
- http://www.google.com/webfonts
- http://www.dafont.com/
- free fonts to use on web sites/apps: http://www.fontsquirrel.com/
Features Compliance
Web Pages to test how your browser is following standards. And Also tells you what it does or does not support
- http://html5test.com/
- RingMark: http://rng.io/
- http://html5please.com/
- http://css3please.com/
- http://css3test.com/
- http://caniuse.com/
- http://mobilehtml5.org/
- http://findmebyip.com/litmus
Online Help
Doc hub is having everything on line (the point will be to see how often it will be updated with standards - for now it is)...
- All (HTML, CSS ...): http://dochub.io/#html/
- CSS3: http://meiert.com/en/indices/css-properties/
- HTML5: (French - very nice as a GUI) http://www.vectorskin.com/referentiels-standards-w3c/balises-html5/
- sitepoint references (HTML, CSS, JS): http://reference.sitepoint.com/css
- HTML5 and more: http://simon.html5.org/html-elements
templates
often cited websites to serve as good starting point
- http://html5boilerplate.com/
- http://html5reset.org/
- http://www.initializr.com/
- http://jqueryboilerplate.com/
- http://blueprintcss.org/
Coding Styles
- http://haml.info/
- http://sass-lang.com/
- https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS
Generators
- CSS3 editor: http://css3generator.com/
- CSS3 editor : http://css3maker.com/
- CSS3 Color Gradient Editor: http://www.colorzilla.com/gradient-editor/
- CSS3 Bezier curves editor: http://cubic-bezier.com/#.17,.67,.83,.67
- HTML5 Form Generator: http://www.reformedapp.com/#home
- Adobe Colors: https://kuler.adobe.com/#themes/rating?time=30
- CSS3 generator (exist as an iOS app): http://procssor.com/process
- CSS3 compressor & minifyer: http://minifycss.com/css-compressor/
- CSS3 beatifier: http://www.codebeautifier.com/
- CSS3 beautify: http://cssbeautify.com/
Articles:
Note:
these tools are generating source code, does not mean the source code is correct ! but you can check against validatorsbelow !
Validation
* W3C HTML5 validator: http://validator.w3.org/ * W3C CSS3 validator: http://jigsaw.w3.org/css-validator/ * CSS Lint: http://csslint.net/ * CSS lisible (french) : http://www.csslisible.com/ * jslint, (from books author javascript the doodparts): http://www.jslint.com/ * jshint (opensource version): http://www.jshint.com/
Performances
- web site performance testing: http://gtmetrix.com/
- web site performance testing: http://www.webpagetest.org/
- web site validation safari extension: http://zappatic.net/projects/safarivalidator
- google page analysis tool: https://developers.google.com/speed/pagespeed/
- google page analysis tool(french): https://developers.google.com/speed/pagespeed/?hl=fr-FR
