Peter Svensson is back in the online IDE business with a new interactive workbench called Bunkai.
Peter formerly created JDA Composer which he claimed “tried to do too many things at once, and so it was hard to understand at first glance.”
He setup apart things with a new goal:
My goal is to create a small, comprehensive editor which shows things from two mutually communicating perspectives; 1) the html/js code editor, 2) The ’screen’ area where dojo widgets show up.
What this means is that you’ll be able to write something in the editor, click save, and it will be rendered immediately. But it also means that the rendered widgets will be editable (according to what properties the widgets (OK, dijjits :) have defined, moved about (if not restricted to a layout container) and resized (again, if allowed by layout). All changes in the visual side will immediately be communicated back to html source code in the editor.
That way, I hope it will be simpler to understand, and as a programmer you’ll feel that you’re in control, even though there is an element of visual composition
iDesktop is an Ajax application that allows you to search and view YouTube videos.
The viewer uses a stripped down Prototype, and a whole bunch of script to give you sliders that automatically change the layout to allow more or less content on the screen, menus, pagination, inline popups, and a lot more.
Nick Bouton has released Protagonize, an
online writers’ community dedicated to the (nearly) lost art of the adventure, a type of collaborative fiction. Once an author writes a story, others can post branches to that story in different directions.
We chatted with Nick about the new site:
What was your inspiration?
Early forms of this on the web date back over a decade, when Snoot.com popularized a site called “Choose Your Own Schizophrenia”, an collaborative fiction site popular in the mid-to-late ’90s. Of course, this all dates back to the old Choose Your Own Adventureâ„¢ series that started back in 1979 and ran until 1998, published by Bantam Books.
I developed Protagonize as an attempt to modernize the collaborative creative writing arena a bit and inject a little Web 2.0 love to produce a better interface. So far, so good.
How did you use Ajax?
The site uses the Yahoo! User Interface (YUI) library quite extensively.
Here’s a brief overview of the features that use AJAX calls (thus far — still adding more):
Commenting (add/delete)
Add & remove favourites & page markers (like a bookshelf)
Story ratings
Modal dialogs (login)
Send to a friend
Contact author
Report an item
All of the AJAX calls I’ve written return JSON objects as results, so the transactions are quite lightweight. We also use JavaScript pretty heavily throughout the rest of the site — for example, branch previewing is all JS, and the YUI TabView control is used for managing your favourites / page markers / top rated listings; the lists are each loaded once and reformatted into different sorted views via JS.
The site also uses FCKEditor for content editing, which is a pretty JS-heavy component on its own.
What features are you proud of?
The ease of use of the interface. The TabViews were a lot of work to get working nicely and I’m pretty happy with those, too. My AJAX calls are pretty snappy (particularly managing your favourites and page markers), and I really liked using the YUI Animation effects to do fade-ins and fade-outs when showing/hiding dialogs and deleting items. Makes the whole app feel nice and smooth.
The toughest parts were probably securing the AJAX/JSON calls and dealing with user input validation gracefully (I can still work on that a bit — not very happy with the built-in ASP.NET client-side validation scripts). I’ve also had some minor layout problems with smaller-market
browsers (specifically Opera) that are a pain in butt to track down.
I’d also like to make user profiles feel a bit more personal; they’re a little cold right now without any way to put in your own image, but I think the profile blurb and quote helps people customize it a bit so far.
Future plans?
Future plans - the main large feature I’m I’m going to be adding in the next month or two is user-created and controlled group functionality. Groups will be either be open or closed membership, where closed groups would require an invitation and optionally not be displayed on the front end of the site (i.e. public/private), and open groups would allow people to join in at will. That way we could cater to your usage, private & closed groups, and allow others to use the feature in a different way, maybe for close circles of friends who don’t want other people participating in their stories.
Nick has some more cool projects coming over at Taunt Media too.
Ajatus is a new distributed CRM that “runs as a local Ajax web application on your own computer. It uses the CouchDb object database for data storage and enjoys a wide range of plug-in and replication possibilities.”
The Ajax side of the house uses jQuery for fun and profit.
It is a lot of fun to see people get excited and creative around CouchDb, which recently had the first major release featuring:
a REST API using JSON instead of XML for data transport,
a JavaScript view engine based on Mozilla Spidermonkey,
a GNU Autotools build system supporting most POSIX systems (Noah Slater) ,
a built-in administration interface (Christopher Lenz),
experimental fulltext search with Lucene (Jan Lehnardt) and
countless tweeks, enhancements and other small refinements.
You setup your HTML with a body tag with the class of "portrait" or "landscape" and most of the CSS goes from that. You also put an empty div with the id of currentOrientation that is used for some of the magic.
/*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
left, or landscape mode with the screen turned to the right. */
var orientation = window.orientation;
switch(orientation){
case0:
/* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class","portrait");
/* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */
document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom).";
break;
case90:
/* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the
body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";
break;
case -90:
/* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the
body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";
break;
}
}
And, since it is Christmas/insert your winter holiday here, there is a nice sample snow globe that you can shake by changing the orientation of your iPhone.
Have a great holiday period, and try to stay off of your phones and spend some time with the family ;)
It's probably a touch too late for this xmas, but Unique Skins is a nice showcase of blending Flex and traditional Ajax. The site allows you to skin a device such as a Wii or an iPhone, and it gives you a visual way to get creative.
The editor for the site is made using Activa Canvas from the team at Active Media Architects, and is done in Flex and Ajax. First you select the device from their list of template, so you can see what the end product is going to look like. Then, you select an image from the right hand side of the screen to add to your custom skin. They have categories such as Holidays, Nature, Abstract, Sports, Flags which each contain a dozen or so images. If you don't like what they provide, you can easily upload your own photo and use that for your skin. You can add custom text to your skin, with support for different colours and text styles.
I had an 11 hour flight from London to SFO. What was I going to do? I had a couple of books with me. The in-flight movies were average, and even in business class they didn't have the on-demand system, so if you missed the start you had to wait for the next go around. I poked around in a DVD store and couldn't find anything to interest me, so I ended up grabbing 'Heroes' since I had never seen it. I was put off by the "Save the cheerleader, save the world" commercials, but figured if it was half decent then there was a lot of material (e.g. time) to cover.
So, I popped in the DVD, and whilst I watched, I opened up Firefox and Textmate.
I have been wanting to play around with the new Ext 2.0 release, and also with the GWT-Ext package. Unfortunately, that module isn't using Ext 2.0 quite yet (almost!), so I decided to do a first rev of the tool with straight Ext 2.
I found the new Google Chart API to be a little addicting, and some people have asked if there was a tool for people to create charts, instead of having to munge with URLs.
A common use case is to dynamically generate the charts on the fly, and then it makes sense to just build the URls and you are done. But, what if you wanted to sit back and just throw out a chart or two?
The tool has you fill out core information about the graph or chart that you want to create (e.g. size and title), you then choose the type of chart in the tabs, and you fill out the data needed for that type of chart. You can click on the "seed data" button to see sample data, and when you are done tweaking it, you click on "GET CHART". That action causes a preview to be loaded below, and you get given the URL in a text box that you can copy and paste.
It is a little rough around the edges in that I wanted to let you tab though fields and have an easy way to add rows of data (instead of just using a crude textarea). I also need to make it so that all of the data can be expressed through the UI (e.g. marker types, colors, fills, etc) which isn't the case now.
I really enjoyed Ext 2. They did a great job, and with more documentation and such to come, I think it is a great library for building these desktop-like environments.
Then each section used the "region" metadata to tell the system where to place it. You are also able to do things like tell the system you can be moved around, collapsible, and more.
So, the result of a few hours with Ext 2 with no access to the online docs and you get this:
Yup, that's RTM in there! Remember The Milk for Gmail is a Firefox extension that lets you do all kinds of crazy cool things with your tasks (and interacts with your mail, contacts, and calendar too).
It goes beyond letting you manage your tasks, as you can connect tasks with your mail, google calendar, and contacts.
Simon Gilligan has created Applebox, a consumer storefront that looks just like iTunes, but instead of Cocoa, it is a serverless Ajax application:
Ok, time to geek out and talk about the technology behind APPLEBOX. Whilst we think our model for the local DVD store is a winner (we’ve reduced store overheads, embraced the Internet and kept a strong sense of local community even from the web) we also completely love the technology! Forget Rails, we’ve got a J2EE web stack that we think is second to none. Check it out:
Our architecture is SOA (Service Oriented)
All our application calls are SOAP, which from the ground up creates an API we will give public exposure to at a later date. For example this call returns a movie profile.
Our storefront is Serverless AJAX
The Web 2.0 movement has swept AJAX into the mainstream. We take that one step further and deliver our complete application as Serverless AJAX that makes stateless SOAP calls to our backend.
Our development process is Model Driven (MDA)
Rails gives the Ruby community productivity. For us, MDA gives J2EE a similar shot in the arm. Our complete stack with stubs for all business methods and web services, a default CRUD service layer, and all the J2EE XML config files are generated from a UML model. We can iterate from UML through to database and service layers in a matter of minutes. The MDA generator we we use is AndroMDA.
Our J2EE components are
Axis (Web Services), Acegi (Security), Spring (Transactions), Hibernate (ORM), MySQL (Database) and JBoss (App Server).
NASA has relaunched their site tonight as NASA 5.0, in celebration of their 50th anniversary next year. It is the beginning of many web 2.0 features to come for NASA.
Sep Seyedi of Critical Mass told us that "of interest to you is the fact that the new interface fully uses the script.aculo.us and prototype Javascript frameworks for its implementation. It was a pretty challenging implementation but got through it."
The new site features:
Transitions: Lots of animations in drop downs and trees
Accordion: Rollover news items
New topic based navigation
Calendar component
Tag cloud (now that IS Web 2.0
Bookmarking: My NASA and support for Digg, Del.icio.us, and more
Andre Lewis has a new site out there, Placeshout which offers a way to quickly call out your favourites place in various locations.
You could argue that we have other places for this... Yelp for example, or My Maps themselves. So, why Placeshout?
Sometimes, you just want a quick suggestion
When Andre and I are looking for a hole-in-the-wall Mexican restaurant or a park with a softball field, we usually just want a quick suggestion, not a lengthy review. We want to know if a place is worth visiting in 30 seconds.
Placeshout isn't about volume - it's about trying to express the positives and negatives of a destination in as few of words as possible. If people agree, that "shoutout" moves up...if they don't, the shoutout moves down and begins to disappear.
We hope Placeshout makes it easier for you to find local destinations.
There are some interesting features in this, very Web 2.0-looking, site. One that stands out is the enhanced mapping experience on top of Google Maps. As you move around, directional arrows tell you how far various other cities are away. It is kinda fun to watch:
