Open Source Resources for Web Application Developers

JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively.

JS Bin allows you to edit and test JavaScript and HTML. Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required. JS Bin was built by Remy Sharp and is completely open source and available on http://github.com/remy/jsbin.

You can also check out JSFiddle, which is a handy online editor for JavaScript too.

Requirements: -
Demo: http://jsbin.com
License: MIT License

• 2 Comments

WebPutty is a simple CSS editing and hosting service, which gives you a syntax-highlighting CSS editor you can use from anywhere, the power of SCSS and Compass, a side-by-side preview pane, and instant publishing with minification, compression, and automatic cache control.

You can see your changes instantly with the side-by-side preview pane, so there’s no need for the traditional back-and-forth between your editor and refreshing a browser to see your changes.

WebPutty also allows you to take advantage of SCSS and Compass. SCSS gives you expanded functionality and ease-of-use features like nested selectors, variables, and mixins, while Compass makes CSS3 features like box-shadow, border-radius, gradients, transforms, and transitions easier to implement by handling all the browser-specific prefixes for you.

Requirements: -
Demo: http://www.webputty.net/
License: License Free

• 1 Comment

LESS extends CSS with dynamic behavior such as varibles, mixins, operations and functions. As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning LESS a breeze, and if in doubt, lets you fall back to CSS.

Writing LESS is cool and lightning fast if you compare it to good old CSS and besides, it trains your thinking in solving functional problems. So far so good, but in the end the web needs a CSS file to show your website as it is. Either you embed a javascript file to live-transform your LESS-Code into CSS in your browser or you find out how to precompile your files into standard CSS.

The most powerful thing SimpLESS does: Save your *.less file and, BOOOM, SimpLESS generates a 100% valid standard CSS document out of it. No further steps, it’s that simple.

Requirements: LESS Framework
Demo: http://wearekiss.com/simpless
License: Creative Commons 3.0 License

• 1 Comment

Tilt represents a new way of visualizing a web page. This tool creates a 3D representation of the document, with the purpose of displaying, understanding and easily analyzing the DOM.

It will take advantage of the great tools Firefox has to offer, as it is an extension which contains a WebGL implementation, providing rich user-experience, fun interaction and useful information, while taking full advantage of 3D hardware acceleration, GLSL shaders and what OpenGL ES 2.0 has to offer.

The implementation consists of a Firefox extension containing a 3D representation of a web page, as both a fun visualization tool and a developer-friendly environment for debugging the document’s structure, contents and nesting of the DOM tree. Various information besides the actual contents will be displayed on request, regarding each node’s type, class, id, and other attributes if available. The rendering will be dynamic, in-browser, using WebGL and GLSL shaders.

Requirements: Firefox
Demo: https://github.com/victorporof/Tilt
License: Mozilla Public License

• 5 Comments

At Browserling, they are huge open-source fans and they have open-sourced 90 node.js modules! All written from scratch. You will find the complete list of all the modules together with their brief descriptions.

They have also published all the modules on GitHub, so that you can keep track of them easily. All of them are greatly documented so just click the ones you’re interested in to read more and see examples.

Requirements: Node.js
Demo: http://www.catonmat.net/blog/browserling-open-sources…
License: License Free

• 0 Comments

Codecademy was created when Zach got frustrated with learning how to program. For years, Ryan taught Zach the basics of HTML and CSS, but books and videos didn’t help. Ryan and Zach teamed up to create Codecademy, a better, more interactive way to learn how to program.

Learning with Codecademy will put you on the path to building great websites, games, and apps. You can also Keep track on your friends’ progress and make sure you’re learning more – faster!

Requirements: -
Demo: http://www.codecademy.com
License: License Free

This post presented by the leading printing services provider, Next Day Flyers. They offer an array of products including, brochures, posters, and flyers.

• 0 Comments

Ace is a standalone code editor written in JavaScript. The 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.

The Ace source code is hosted on GitHub. It is released under the Mozilla tri-license (MPL/GPL/LGPL). This is the same license used by Firefox. This license is friendly to all kinds of projects, whether open source or not. Take charge of your editor and add your favorite language highlighting and keybindings!

Requirements: Javascript Framework
Demo: http://ace.ajax.org/build/kitchen-sink.html
License: MPL/GPL/LGPL License

• 0 Comments

Sinon.JS is a Standalone test spies, stubs and mocks for JavaScript. No dependencies, works with any unit testing framework. A test spy is a function that records arguments, return value, the value of this and exception thrown (if any) for all its calls.

Test spies are useful to test both callbacks and how certain functions/methods are used throughout the system under test. Use a stub when you want to control a method’s behavior from a test to force the code down a specific path. Mocks are fake methods (like spies) with pre-programmed behavior (like stubs) as well as pre-programmed expectations.

Requirements: -
Demo: http://sinonjs.org/
License: BSD License

• 0 Comments

Mobile Application Developers, while able to produce amazing applications, are limited by the native browsers own limited functionality. Basic features available on desktop browsers are completely absent from mobile browsers. The ability to view source code, debug javascript, or even execute a javascript command from a console are all tools developers have come to expect while developing websites.

This is where Socketbug fills the gap! Socketbug is a Remote Debugging Utility built using Socket.IO. This means you can now use modern browsers ( both mobile and desktop ) to work together to allow you to remotely debug you mobile web applications.

Requirements: -
Demo: http://www.socketbug.com/
License: LGPL License

• 0 Comments

GitHub for Mac has just launched recently. Now you can Clone repositories, Browse history, Commit changes, Branch code, and Share code on github.com as simple as possible. The sync button pushes your changes to GitHub and pulls down other’s changes in one operation.

You can add a repository by dragging a folder to the application. When you add repositories to GitHub for Mac, they automatically match them up with any organizations you belong to.

Requirements: Mac
Demo: http://mac.github.com/
License: -

• 2 Comments