Open Source Resources for Web Application Developers

Giving one-off feedback on coding errors is a pain. You just want to share a quick, contextual note with someone, but there aren’t any good tools out there to help you do it.

Chop is a simple way to add notes to a code snippet and share them. Chop is a quick and easy way to let the offending engineer know the error of their ways. Just copy and paste the lines in question, add your notes and share them with a unique URL.

The person you share with will have the chance to pull out their Chopper and comment right back. You can keep the conversation going and even add more people to the mix if need be.

Requirements: -
Demo: http://chopapp.com/
License: License Free

• 1 Comment

Git is a free & open source, distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Every Git clone is a full-fledged repository with complete history and full revision tracking capabilities, not dependent on network access or a central server. Branching and merging are fast and easy to do.

Anthony Feint has written a great article explaining Why and How Did He Learn Git. And you should also check out Git Immersion, which is a guided tour that walks through the fundamentals of Git, inspired by the premise that to know a thing is to do it.

Requirements: -
Demo: http://git-scm.com/
License: GPL License

• 2 Comments

The HEAD section is the worst place to load scripts. It’s painfully slow. The more and the bigger the worse it gets. Move the scrips to the bottom of the page and you cannot use HTML5 and CSS3 safely.

The single best solution to this universal problem is to include Head JS on top of the page and load rest of the scripts with it. Head JS speeds up, simplifies and modernizes your site. Head JS loads scripts in parallel without blocking the page. The performance will be improved even with a single minified script.

Requirements: Javascript Enabled
Demo: http://headjs.com/
License: MIT License

• 9 Comments

Snippet jQuery Syntax Highlighter is built on top of the SHJS script found on SourceForge. Snippet provides a quick and easy way of highlighting source code passages in HTML documents. There are 39 unique color schemes to choose from.

It has been tested compatible in IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62. This script is released under the MIT license and is completely open to modification and redistribution.

Requirements: jQuery Framework
Demo: http://steamdev.com/snippet/
License: MIT License

• 0 Comments

Would you like to Make a ‘View Source’ Button on your website? Click it, and you see the entire source code for the page you are looking at. It’s not a popup or a new tab, it just shows the source right there on the page. It works on pretty much all modern browsers, as long as it supports CSS3 :target. Breaks in IE 8 and down, but OK in IE 9.

Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/ViewSourceButton/
License: Apache License

• 1 Comment

Brosho ‘Design in the Browser’ jQuery Plugin allows you to style your markup right in your browser with a build-in element selector and CSS editor. Generate the CSS code of altered elements with one click and use it in your own stylesheet.

You can stop switching between your Editor and the Browser and changes will occur immediately without reloading the page. Once you are done designing your mockup you can generate the CSS code, copy and paste it to your stylesheet and tweak it to your likings. Much faster and better!

Requirements: jQuery Framework
Demo: http://demos.usejquery.com/brosho-plugin/
License: MIT, GPL License

• 3 Comments

RegExr is an online tool for editing and testing Regular Expressions (RegExp / RegEx). It provides a simple interface to enter RegEx expressions, and visualize matches in real-time editable source text. It also provides a handy RegExp snippet sidebar with descriptions and usage examples to make it easier to learn Regular Expressions through trial and error.

RegExr is built with Flex 3, and uses ActionScript 3’s built in RegExp engine. It isn’t as powerful as a product like RegExBuddy, but it has the advantage of being online and free. You are able to save your patterns locally, and to share patterns on a searchable community database of regular expressions as well.

Requirements: Flex 3, ActionScript 3
Demo: http://gskinner.com/RegExr/
License: License Free

• 5 Comments

CodeRun Studio is a free, cross-platform Integrated Development Environment (IDE), designed for the cloud. It enables you to easily develop, debug and deploy web applications using your browser. CodeRun Studio can be used instead or alongside your existing desktop IDE. You can upload existing code in order to test it in the cloud or for sharing with your peers.

CodeRun features native support for C#/.NET (3.5), PHP (5.1), JavaScript, HTML and CSS. C# support includes ASP.NET, WCF, Silverlight and WPF browser application development and deployment. Database support includes SQL Server 2005 and Amazon SimpleDB. This means you do not have to learn anything new in order to begin working with CodeRun. Simply upload you existing code, or start from one of the built-in templates.

Requirements: -
Demo: http://www.coderun.com/ide/
License: License Free

• 4 Comments

Ymacs is an Emacs-like editor that works in your browser. Which applies, at this state of affairs, only if your browser is Firefox. It looks pretty good with other browsers, but it is unable to catch all the required key bindings at the moment.

If you are an Emacs user, then you should feel like home with Ymacs. By default Ymacs uses Emacs idioms and key bindings. It should be easy to customize it, however, to mimic other editors.

Requirements: -
Demo: http://www.ymacs.org/
License: BSD License

• 3 Comments

We have featured JS Bin 2 days ago. And our lovely readers have pointed out MooShell, which helps us writing and testing HTML, CSS and Javascript too. You can easily debug your Mootools code online with MooShell. Just load the page, edit relevant fields and load the result into an iframe. Also, it does allow to save results for further usage like this example.

However, MooShell is still in an early stage of development and definitely lacks some features. Plans are to implement logging, choice of javascript libraries (currently works with MooTools 1.2.3 only), and more.

Requirements: -
Demo: http://mooshell.net/
License: License Free

• 4 Comments