Open Source Resources for Web Application Developers

Dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won’t have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others.

It currently only supports modern versions of Chrome, Safari and Firefox. All posted code belongs to the poster and no license is enforced. Dabblet itself is open source software and is distributed under a NPOSL-3.0 license. you can fork dabblet on github as well.

Requirements: -
Demo: http://dabblet.com/
License: NPOSL-3.0 License

Try jQuery is a combination of videos, interactive console challenges, and writing code in the browser. You’ll need about 2 hours of time to make it through everything. There is a gentle introduction to what jQuery is, and what it can do.

It tells you how to search and walk through the DOM with selectors and traversing. Add & remove from the DOM, more traversing, and user events. Listen for events, handle them, and change the default event behavior of web browsers. Before landing, tame CSS with jQuery and animate elements on the page.

Requirements: jQuery Framework
Demo: http://try.jquery.com/
License: License Free

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer. It is authorized to publish on WebAppers.

At Bocoup, my colleagues and I often laze about in antique leather armchairs, sipping Mai Tais, waxing rhetoric about important issues-of-the-day including international politics and automatic semicolon insertion. One thing I find fascinating is how people working on different types of projects have different wisdom to share: best practices for jQuery plugins are different than those for Facebook apps, and tips for Backbone.js ecommerce sites may not be useful when developing real-time strategy games.

What I’d like to share in this article is some code organization tips and tricks I’ve learned while making HTML5 games. I’ve tried to keep them as generally useful as possible, but you’ll definitely get the most out of this if you make games like I do.

First I’ll discuss organizing JavaScript code into files and modules. Then I’ll talk about code sharing approaches such as component systems. Lastly I’ll share some ideas for writing data-driven code in games.

(more…)

HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own “sniffs”.

HTML_CodeSniffer will provide a list of known and potential violations to the calling script. It also comes with a pop-up auditor interface, accessible via a bookmarklet, letting you browse through messages emitted from one of the defined standards. Where possible, the auditor also points you to the HTML element causing the problem. HTML_CodeSniffer is released under a BSD-style licence.

Requirements: -
Demo: http://squizlabs.github.com/HTML_CodeSniffer/
License: BSD License

CSSDesk is an Online CSS Sandbox. It allows people to quickly test snippets of CSS code, and watch the result appear live. I had very high ambitions for the project. There are line numbers and syntax highlighting appear live in the text box as you type. One of the greatest things is that it allows users to share their code with others as well.

And also, if you haven’t heard about Google’s Code Playground, it’s a web-based tool that lets web developers try out all of the APIs that Google provides, tweak the code, and see the results. Google’s Code Playground lets you play around without opening an external editor, and all of the APIs are loaded for you in the Pick an API box.

Requirements: -
CSS Desk: http://cssdesk.com/
Google Code Playground: http://code.google.com/apis/ajax/playground/
License: License Free

Repo.js is a jQuery plugin that lets you easily embed a Github repo onto your site. This is great for other plugin or library authors that want to showcase the contents of a repo on their project pages.

Repo.js uses Markus Ekwall’s jQuery Vangogh plugin for styling of file contents. Vangogh, subsequently, utilizes highlight.js, written by Ivan Sagalaev for syntax highlighting.

Requirements: jQuery Framework
Demo: http://darcyclarke.me/dev/repojs/
License: License Free

Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License. What makes Brackets different from other web code editors?

Instead of cluttering up your coding environment with lots of panels and icons, the Quick Edit UI in Brackets puts context-specific code and tools inline. With Live Development, Brackets works directly with your browser to push code edits instantly, set breakpoints, and jump back and forth between your real source code and the browser view.

Requirements: -
Demo: http://brackets.io/
License: MIT License

Mocha is a feature-rich JavaScript test framework running on node and the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

When testing synchronous code, omit the callback and Mocha will automatically continue on to the next test. Testing asynchronous code with Mocha could not be simpler. Simply invoke the callback when your test is complete.

Requirements: Node.js
Demo: http://visionmedia.github.com/mocha/
License: MIT License

CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content – computer programs, HTML markup, and similar. If a mode has been written for the language you are editing, the code will be coloured, and the editor will optionally help you with indentation.

CodeMirror supports Autocompletion, Mode overlays, Search/replace, Code folding, HTML editor with preview, Auto-resizing editor, Setting breakpoints, Highlighting the current line, Highlighting selection matches, Theming, Stand-alone highlighting, Full-screen editing, Mode auto-changing, Visible tabs, Autoformatting of code, Emacs keybindings and Vim keybindings.

All of CodeMirror is released under a MIT-style license. To get it, you can download the latest release or the current development snapshot as zip files on GitHub.

Requirements: JavaScript Enabled
Demo: http://codemirror.net/
License: MIT License