{Carrer web log} ←
Object Auto Documentation - JavaScript
Monday, June 13, 2011 { 0 Comments }
One particular thing that I like about backbone.js is how elegant and well organized is the documentation. Other project that caught my attention few days ago was selfDoc.js I liked the idea of self documentation.That trigger me to build simple function that will display all methods inside object (backbone style). Important thing was to potentiate code readability and clearness.
The object methods names are listed in alphabetical order on the left and the methods and the code on the right.
The logic that extracts the methods from the object is based on Object.keys. The object methods code formatting are not changed from the original code.
Basically how all this works is you download and put docJS.js and style.css and then include the library or object you want to auto document example docJS(jQuery,"jQuery");
Here is demo using jQuery object
You additionally use the browser console for further profiling. Example: open the previous demo and inside browser console write docJS(jQuery.prototype,"optional")
I build this project for auto document some of my JS libraries but surprise me how cool this tool can be for learning and disassembling other JS libraries.
Here are ten objects from ten different JS projects:
jQuery
dojo
Ext
fuse
Modernizr2
mootools
prototype.js
swfobject
webfont Google
YUI
Zepto
I think this demos show how easy you can profile and object anywhere on the web. Also you can use this tool for learning from other JavaScript libraries. Works in Safari, Chrome and FF4.
Download Watch Fork this project on GitHub
0 Responses to “Object Auto Documentation - JavaScript”
<< Home
About Me <<<
Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...
My projects <<<
- AI Prompt Directory
- Hand Drawn Icons
- Font Design Inspiration
- Font Pairings
- Free SVG Cut File
- Upcoming NFT projects
- Discord Tutorials
- Free Sublimation Designs
- Tech Feed
- MySQL Lite Administrator
- Quark Mini PHP CMS
- Formy - CSS Form Framework
- Emastic - CSS Framework
- Malo - CSS Library
- The Golden Grid
- 1 line CSS Grid Framework
- Two Lines CSS Framework
- Child Selector System - CSS Framework
- Better Web Readability Project
- Azbuka - CSS Typographical Base Rendering Library
- ClipR - bookmarklet for better reading
- CSS3 Action Framework
- CSS Mini Reset
- HTML5 Mini Template
- CSS Mobile Reset
- picoCSS - JavaScript Framework
- HTML Lorem Ipsum Crash Test
- Object Auto Documentation - JavaScript
- o - JS Library for Object Manipulation
- Foxy - CSS Framework
- Tumblr Free Theme - Better Readability Project
- Box - CSS Framework
- SMART CSS GRID
- nanoJS - Minimal JS DOM Library
- Flexy CSS Framework
- Katana is CSS Layout System made with Flexbox
- Micro CSS Reset
- 60 Grid System
- Simple CSS Button
- ramd.js JavaScript library for making web applications.
- Minimal Notes web app build with Vue.js
- Scribble Font for Prototyping & Wireframing
- Flex One - 1 CSS Class System
- Floaty - CSS Float Based Layout System
- Infinity CSS Grid
- CLI Convert websites into readable PDFs
- keywords-extract - CLI tool, extract keywords from any web page.
- screenshoteer - Make website screenshots and mobile emulations from the command line.
- Basic.css - Classless CSS Starter File
§§Previous Posts <<<
- HTML Lorem Ipsum Crash Test
- Write modern CSS - use class
- Event Delegation - JavaScript
- Baseline Grid patterns for Photoshop and CSS
- picoCSS - really small JavaScript Framework
- Svetlo - One Line JavaScript Selector Engine
- Child Selector System - CSS Framework
- About Repaint and Reflow in JavaScript
- Better Readability Project - Free Tumblr Theme
- CSS3 Chat Bubbles
Other Profiles <<<
Content is licensed under a Creative Commons Public Domain License