10+ Online coding tools for making social coding possible

Have you ever heard about online coding tools, browser based IDEs, social coding, collaborative development and pair programming? If not you need to sit tight and read on, this may very well be the future, and just as office tools moved to the cloud with Google Docs and Office 360, the traditional fat IDE desktop client may soon be history. Having said that, I have noticed there tend to be more solutions for front end web developers than for back end developers.

For decades, it has been the general view that hardcore programmers are isolated nerds, that like to sit alone in a dark room with an endless supply of chips and cola with fingers typing at light speed. This however, is an old and wrong perception. Software systems are the foundation that ties most businesses, their processes, employees, partners and customers together today, and in order to deliver value the systems must be perfectly aligned with the business requirements. Implementing highly complex and integrated applications require that programmers work seamlessly together and communicate efficiently with many other functions in IT. While IT architects may be used as brokers in many organizations, today programmers must learn to break the ice, and understand and talk to business people. Further many development teams today have members that are geographically separated making it impossible to look over the shoulder or solve a few important disagreements on a whiteboard.

As a response to the difficult and challenging work environment many developers face today, we have seen many new and innovative online tools on the scene lately. This includes online services for debugging, crowd-bug fixing, code sharing, and even fully featured IDEs. Working in the public cloud introduces concerns about security even if the services used provide featured to keep source code private. The big question is whether the majority of organizations currently are ready to accept the risks to collect the benefits. If core business applications are already in the cloud, giving programmers what they need, may be just around the corner!

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);echo $filestr;[/exec]

Cloud9

The developers of Cloud9 call it “Google Docs for code”. Cloud9 is an online development environment for Javascript and Node.js applications as well as HTML, CSS, PHP, Java, Ruby and 23 other languages. It makes it simple to share and collaborate on the same source code files. It supports SSH and FTP and comes with a small app for Mac and Linux, called Cloud9 Local, for local development.

cssdeck

CSSDeck Labs is a place where you can quickly find inspiration, learn advanced techniques form others and create your own experiments (or testcases) that involves HTML, CSS, JS code. The quality of the featured projects is high and it is certainly worth a visit! The code can be edited with the preview being updated in real time – really powerful. Sharing your code is simple using a share url! It is also possible to leave comments and discuss details of a project.

CodePen

The creators of CodePan say it all…“CodePen is all about front end code inspiration and education through sharing”. You can find amazing examples at CodePen of what is possible with HTML5, CSS3 and JavaScript. The idea is great and the repository of user generated code is high value and bleeding edge experimental! It is not only a great place to learn new stuff, for front end  developers CodePen works as a portfolio where they can showcase their creativity and raw coding skills.

Koding (is in public beta)

The idea behind Koding is to make the development process more social and collaborative and is expected to have a free base setup, which is cool. It is however still to ealy to tell if Koding will become the Facebook for coders. Projects are created in the browser and runs on a development server that supports Java, NodeJS, Perl, Python, Ruby, C, C++, Go, and other languages. At this stage Koding rely on the Ace code editor and as you can see here it may be useful for WordPress themes development.

JS Bin

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. The Consule makes it possible and easy to debug the code online. You can codecast your development just by sharing a URL. JS Bin was built by Remy Sharp and is completely open source.

Beanstalk

Beanstalk is an online repository service making your code available from anywhere and easy to share. Beanstalk allows you to create Subversion, Git and Mercurial repositories online and have a simple web based interface for managing code, users and access. You can also review, compare and share previous revisions of your HTML mockups and images as shown on the demo here. Besides version control Beanstalk have nice features for managing deplyments, collaborating on delivering code and it supports integration to various time and bug tracking tools.

CodePad

codepad.org is an online compiler/interpreter, and a simple collaboration tool. It’s a pastebin that executes code for you. You paste your code, and codepad runs it and gives you a short URL you can use to share it. Paste the URL into chat or email to get help or to show someone how to do something. Or just try things out when you don’t have an interpreter handy. It works well on many phones.

Compilr

“An online platform that allows developers to write and learn code all from the comfort of their web browser.” Compilr is a cool fully featured online IDE, compiler and runtime environment with console access. It supports various programming langurages. It is also a repository of user created projects and scripts. Unfortunately here are some “Test” projects that I beleive need to be cleaned up to make it easier to find useful code snippets in a snap. The community is a traditional forum and it is possible to rate and comment on project – it is not collaborative development though. The free version grants you 1GB of storage, but your projects are publicly listed.

Liveweave

Liveweave is a simple to use HTML, CSS and javaScript online IDE. You dont have to log in and can just start coding right away! You work in a single view, so your JavaScript and styles all appear alongside the HTML. This is not for final production code but it is a powerful tool for quick experiments and mockups. You can view code alone, split the screen or just marvel at your creation. There is not online collaboration or sharing included, but your code can be easily exported.

Progbuddy (beta, request invite is possible)

Progbuddy allows you to collaborate on code online by setting up shared sessions. It supports various programming languages such as PHP, Java, Ruby, C, C++,

Brackets (browser based and worth checking out, but not an online tool)

“Brackets is still in the oven and needs to bake a little longer before it’s a full-featured code editor.”.. but man there are some really cool and innovative features in this browser based editor. Brackets is open source, built with HTML, CSS and JavaScript, which means it is easy to contribute to the project and extend its functionality.

One of the features I really like in Brackets is the inline editing of CSS. When editing a HTML file the [Command/CTRL+E] command will open the relevant CSS for a CSS selector or a JavaScript function. There is not need to jump between files and it is a time saver! Another cool feature is the live preview feature that update the preview of the file you work whenever you change something, e.g. CSS properties. This almost WYSIWYG live CSS coding!

Lars

Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.