dabbler.org is collaborative learning-to-program site for HTML, Javascript, jQuery, Turtle graphics, and CoffeeScript.
Check out the latest, feature-rich version on pencilcode.net. You can put arbitrary HTML pages and other content on Pencil Code just like you can on dabbler - just rename your files to end in .html etc.
There is also another old version at js.dabbler.org.
You can edit any page by changing the "/home/" in the URL to "/edit/". For example the file you are reading can be edited here.
To make a new file, visit the URL that you would like to use. If the file does not yet exist, you will be given a link to create it.
To delete a file, just use the editor to delete all its contents.
You can work on whatever file you like, but to start with, you should work inside your own directory.
Pick a filename like this (fill in your name and your filename below):
/home// make your own file
There are no access controls, so please be polite:
Each night changes on dabbler.org are checked into an svn repository, here.
Files can be written as templates so that the editor will just focus on just the interesting parts. A simple example is /edit/guest/turtle.html. The raw code, which can be edited using /edit_raw/..., is an XHTML file that has "data-editable" attributes on any script to be edited.
The site was created by David Bau in 2010 as a tool to use while teaching kids how to program in Javascript. One of the main hurdles has been getting a suitable text editor installed on kids computers. Another hurdle has been finding a place on the internet to host a bit of Javascript. This website provides the simplest possible solutions to both problems.
Some short AJAX examples for kids can be found in the 01-example directory. The idea is to illustrate ideas in less than 100 lines of HTML. Please feel free to add some more examples.
Most of the examples use jQuery and some use Raphael. You can <script src="/jquery.js"></script> to include jQuery. Same with "/raphael.js".
Add <script src="/editlink.js"></script> to automatically add nice "edit" hyperlink in the corner of your page.
Now, some advanced things. How does the online editor work? There are two json URLs that let you modify and inspect dabbler.org state directly from javascript.
For example try viewing http://dabbler.org/load/guest/tryit.html?callback=alert.
There is a script that you can use via <script src="/dabbler.js"></script> that defines several functions that make using these json URLs easier:
dabbler.load('/guest/datafile', function(data) {
alert('loaded data ' + data);
});
dabbler.save('/guest/datafile', 'new-data-here', function() {
alert('done saving new data');
});
dabbler.directory('/guest/', function(list) {
for (var j = 0; j < list.length; ++j) {
console.log(list[j].name);
}
});
dabbler.tail('/guest/datafile', 3, function(lastlines) {
alert('loaded last 3 lines:\n' + lastlines);
});
dabbler.append('/guest/datafile', 'new-line\n', function() {
alert('appended a line');
});
These can also be used with jQuery as follows:
$.post('/save/' + filename + '?callback=?', { data: yourdata }, function() {
alert("saved!");
}, "json");
$.getJSON('/load/' + filename + '?callback=?', function(msg) {
alert("loaded " + msg.data);
});
The online editor uses the Ace Editor to let you edit the text, and it loads and saves the text for any page using the jQuery AJAX calls above.
Your javascript can load and save pages using the same AJAX urls. If you want to write your own code editor, you can do it. Or if you want to do something else that requires saving and loading server-side state, you can do that also.
Go to the homepage and start browsing people's programs. What are you waiting for? Dive in!