Wednesday, August 31st, 2005
Category: Dojo
, Showcase
“OMG! So awesome my head exploded”
That is the subtitle at Turbo Ajax, and it certainly is very cool.
Turbo DB Admin is Online database administration, Ajax style.
If you check out the demo you will see something that feels like other db tools, but is of course right there in the web.
turboDbAdmin Features
- One-page solution for monitoring, editing, and updating a database server with a standard browser.
- Easily edit your rows just like you would in a desktop application. No hassles, submit buttons, or page refreshes: the database server records your changes automatically.
- Cutting-edge TurboAjax components deliver a rich interface and will be commercially available soon.
This tool is built on top of Dojo Toolkit, with Turbo creating Dojo-ian widgets to build the app with. Very slick indeed!
Category: Editorial, Firefox
Bar Camp showed off Flock:
We’re introducing the world’s most innovative social browsing experience. We call it the two-way web.
Over the next few weeks, we’ll be seeding invites to a few lucky folks. Sign up to find out when invites are available
Flock - Social Browsing is Cool
By Techcrunch
Flock was originally called Round Two and raised money (reportedly around $1 million) from Bessemer Venture Partners. For more on the fundraising and early reports, see Om Malik and SiliconBeat.
We got our first look at Flock at Bar Camp last weekend - Andy Smith and Chris Messina gave a great demo. Our beta invitation came that weekend as well.
Flock should be launching publicly sometime in September. They have windows, mac and linux versions of their browser already.
Social Bookmarking
Flock has integrated del.icio.us-type features right into the browser. When you are on a page you would like to bookmark, simply press a “+” button on the top left of the toolbar and the page is automatically included in your bookmark area (called your “breadcrumbs”). You can also tag bookmarks, of course.
Additional features include your “watchlist” (people who’s bookmarks you would like to monitor), and “groups” (basically, defined groups of flockers linking to this category).
Breadcrumbs, Watchlists and Groups all have RSS feeds (of course).
Blogging Tool
This is pure magic. We’ve tested most blogging tools out there, including qumana (the best in our opinion - profiled here and here), blogjet (Jeff Clavier likes this one) and others. All of these requre a download and allow offline drafting and wysiwyg functionality.
I have to say I think Flock blows them all away. I’m dying to show a screen shot, but Flock has asked it’s beta testers not to (so ignore the very, very small screen shot above). To show this right now would be pushing the limits of their trust, so I won’t.
But it rocks. Setup was very easy (I tested it with my personal blog). It has functionality for editing posts (even posts not created with Flock), quick toggle between preview and viewing the actual code, and, the best feature in my opinion, the ability to simply drag flickr photos direclty into the post and manipulate them. They also allow quick and easy technorati tagging. Wow. I mean, really, wow. This stuff is not trivial to build. The ajax funtionality is stunning.
Category: Editorial
Every javascript coder, in almost every script, has encountered the onload limits. In this article we’ll present them briefly, together with some solutions.
The window.onload event handler has two main limits:
- You can attach just one function to it
- The script will wait until the page is fully loaded before running
Alessandro continues to discuss the onload limits and gets some interesting comments from the community:
- Mozilla has a DOMContentLoaded event
- Cameron Adams: Page flicker for CSS adjusting JavaScript can be greatly reduced by implementing a JavaScript-only stylesheet. This can be implemented before the tag has been closed (so well before the content has loaded), and can be simply done by switching on a linked stylesheet using JavaScript.
- Mark Wubben: Unfortunately sometimes you do need to wait until `onload`. Safari for instance won’t lay out the page correctly until it’s been fully loaded, which means that for sIFR we had to do a special check for Safari so we could replace the elements earlier in other browsers. This problem is comparable to the non-incremental rendering of XHTML pages by Safari and Mozilla.
Tuesday, August 30th, 2005
Category: Editorial
Somehow I also missed the blog about 37signals Writeboard, but found it thanks to Russell Beattie.
What makes a web-app an app? I’d argue it’s not the functionality — there’s a lot of functionality on the web that we wouldn’t explicitly consider a “web-app.� I’d argue it’s the account, the infrastructure, the multi-page UI, the navigation between elements, the billing, the overview pages, etc. That’s the stuff that makes a web-app an app.
Now, what if we removed all of that? What if a web-application looked more like a web-document? What if the whole “application� was a single document, a single URL? What if the interface was one page? No account, no preferences, no settings, no “navigation� in the traditional sense. What if you could email it around just as you do a photo or a file attachment?
TrimPath has been doing this for awhile via TrimJunction, and they even use the technique named: SPADE: Single Page Application and Development Environment. The difference there is that with SPADE you can change the app itself.
An example is Next Action.
Notice the ’show me the code’ link at the bottom. Play around with that.
Anyway, looking forward to what 37 Signals come up with in Writeboard.
Category: Showcase
Andrew Sutherland created a nice, clean, simple Periodic Table of the Elements that uses ajaxian techniques to grab information as you click on various areas.
There are some interesting UI choices:
- You click on the element, not mouseover. This is nice in one way, as the popup is quite large, and Andrew changes the background and cursor when you mouseover an element… hinting to the click
- When you click on the element the table gets greyed out, and a new popup appears. Often you have a “close” link/button on a popup to get rid of it, but in this world you need to click outside of the popup. It may be nice to have a small “Howto” area that explains these things.
- Toggle details is cool :)
Category: Library, Dojo
First DWR 1.0, and now the Dojo Toolkit 0.1.0 release.
People have been chomping at the bit for a real release, and now we have it.
The Dojo Download is located here, and you can grab different editions where you choose a package that has the elements that you want to use, as well as the Kitchen Sink for everything:
Getting Started Guides
Monday, August 29th, 2005
Category: Java
Joe Walker has released the 1.0 version of DWR, which is a popular Java Ajax binding framework.
In this release…
- AJAX remoting of JavaScript calls to Java
- Automatic generation of JavaScript stubs to match Java code.
- Test pages allowing you to test and debug your server code.
- Access controls through:
- J2EE security including role based authorization
- Declarative access rights at a method and parameter level
- Automatic conversion of the following types:
- All primitive types, String, Date (including SQL variants)
- Arrays, Collections, Maps, Iterators
- Document, Element etc from DOM, DOM4J, JDOM, and XOM
- JavaBeans (nested and recursive trees supported) including beans from Hibernate
- A large array of remoting options:
- Batch sending of remote calls
- Support for XMLHttpRequest & iframe with POST & GET
- Optional call ordering guarantees
- JavaScript library for HTML manipulation including:
- Tables, ul, ol and select lists
- Form fields including automatic form / JavaBean mapping
- All general content types like p, h*, div, span, etc.
- Spring integration:
- Remote Spring beans
- Configure DWR using Spring config files
- Open Source (ASL Version 2)
Upcoming Releases
- Conversion of any Java object (not just beans)
- Tighter integration with Spring
- Enhancements to the Javascript library that helps you build pages with remoted data
What would you like to see? Let Joe know!
Category: Ruby, IE
Thomas Fuchs (script.aculo.us / Rails fame) talks of his Internet Explorer and Ajax image caching woes.
Inserting chunks of HTML via Ajax is cool stuff, and speeds things up quite a bit. As long as you don’t happen to insert some images and you’re using Internet Explorer 6, that is.
Here’s the problem: Internet Explorer forgets to look into its own cache when inserting HTML via JavaScript DOM manipulation (read: if you use img tags or any tags with CSS background images, Internet Explorer will always try to redownload these images). Read the detailed account on this.
Microsoft says it’s designed that way. Well. Sure.
Also, the Cache-Control header, if set to something like private, max-age=86400
is not handled too well, as Internet Explorer will always try to revalidate the file (Safari and Firefox don’t, they will use their cached copy until the time given by max-age has elapsed, and only then will do the cache revalidation).
A workaround for this (not perfect, but as good as it gets) is to send proper Last-Modified, Cache-Control, and ETag HTTP headers, so Internet Explorer sends back an If-Modified-Since header trying to find out if it should refresh its cache. We can then just answer with a 304 Not Modified HTTP status, and IE will use the cached image anyway. (Note that IE suddenly seems to “remember” it has the image in the cache here!).
And then continues to show us code to help out the situation.
Category: IE, Articles
Brad Neuberg has written up a lot on the state of state in the browser :)
This is a mini-tutorial on saving state across page loads on the client side, without using cookies so as to save large amounts of data beyond cookies size limits.
He discusses two ways to deal with session state in the client:
- Method number one is to use an iframe in some special ways. First, this iframe must exist on page load, Then, whenever you wish to record state that you want to save, you must write that state into the iframe
- The other session approach I’ve found is a crazy hack that I saw used for something else, in Danny Goodman’s book JavaScript and DHTML Cookbook. Danny was looking for a way to pass data between frames, and he found that you could persist data by saving them into hidden text fields. This is a beautiful (and scary) hack that is a solution to our session state. All the browsers I have tried (IE, Firefox, and Safari) persist any text you put into a form field, even if they are hidden. To save state, then, we can simply write it into hidden form fields!
Run a demo
How the heck did I miss the existence of non-cookie persistence features in Internet Explorer since IE 5? This is from MSDN:
“Persistence enables authors to specify an object to persist on the client during the current and later sessions using Dynamic HTML (DHTML) behaviors. Persistence allows Microsoft Internet Explorer 5 and later to retain Web page information, styles, variables, and state. For example, a collapsible list of links within a table of contents can remain expanded to the user’s choice upon leaving and later returning to the page. Or, a search engine query form can retain the last-used searchstring.
Category: Flash
The Midnight Coders have announced immediate availability of the ActionScript Development Kit 1.0.
This ActionScript Dev Kit is a top data collection library, that contains a nice XML parser:
The goal for the XML parser was ease-of-use as we got really tired of creating bad looking code with the Macromedia’s XML object. The era of firstChild.firstChild.firstChild.firstChild.nodeValue is over!
The guys will be posting articles about the best practices with ASDK soon.
Download ActionScript Development Kit 1.0
Category: Showcase, Firefox
Vivek Jishtu has written a Firefox extension that adds Ajax support to Yahoo! Mail:
Adds AJAX support to the current Yahoo! mail and makes it a little more friendly. You can preview your messages without leaving your inbox. It adds a small arrow next to your email list. Click on the arrow to preview the message.
Currently the Instant Reply is being developed. I will update it as soon as possible or if I get enough people who want it.
Here you can see it in action:
( via Guillaume )
Category: Java, Examples
The BluePrints Solutions Catalog has been updated this week. In it are many solutions on AJAX that cover show the programming model we are proposing for AJAX applications that run on the Java Enterprise Edition platform.
Download or view the BluePrints Solutions Catalog at http://blueprints.dev.java.net/bpcatalog/
Check out the live solutions below:
Autocomplete
Basic Progress Bar
Realtime Form Validation
Refreshing Data
Missing online are the next generation AJAX + JSF components which I see as the future for AJAX development on the Java Enterprise Edition platform. We are working to get those online as well. The JSF based AJAX components are part of the BluePrints Solutions Catalog that you can download and run today.
Realtime form validation is a no-brainer with Ajax. It is so nice to input data into a field and have it tell you immediately if there is an issue (such as “this userid is taken”).
Saturday, August 27th, 2005
Category: Ruby, Examples, Articles
Jarkko Laine discusses Using Rails Ajax helpers to create safe state-changing links:
A few months ago there was a heated discussion going on about Google Web Accelerator prefetching links and at the same time wreaking havoc in web apps that used plain GET links to change the state of an application. A few tricks came up on how one could block GWA from accessing given pages, but in the end, using GET requests for operations such as deleting records in your app remained dangerous.
The traditional means to avoid the perils of GWA and friends are two-fold: either use only form buttons (and thus POST requests) to commit these mission-critical actions, or link to a confirmation page that does the same.
Unfortunately, these solutions are less than optimal.
Jarkko goes on to give an example of how you can take Rails’ link_to_remote magic to help out, even giving you graceful failback:
<%= link_to_remote \"Delete\",
{:url => {:controller => \"monkey\",
:action => \"delete\",
:id => monkey.id},
:update => \"monkeys\"},
{:href => url_for(:controller => \"monkey\",
:action => \"delete\",
:id => monkey.id)} %>
It would be nice to be able to <a href=”….” method=”POST”> of course.
Friday, August 26th, 2005
Category: Podcast
We decided to bite the bullet, and try a new medium. Thus started the fun and games required in getting a Podcast up and running.
Our first opening podcast focuses on:
- Introducing what we want to do with the podcast
- Having Dion and Ben discussing Ajaxian issues
- Going through recent items discussed in the Ajax community, from DWR, to Prototype, to CPAINT, and more
The RSS feed is located at: http://media.ajaxian.com
Our ODEO channel
Feedback
We are looking for YOUR feedback and participation. Ajaxian.com is a community, and we love your ongoing input.
- What would you like us to cover in the podcast?
- Who would you like us to interview? (we have some exciting interviews in the pipeline)
Thanks for the help, give us a listen!
Update: Direct Link
Direct Link to MP3
We certainly had fun with GarageBand.
Category: Component, Showcase
ObjectGraph has put up a very cool Ajaxian Dictionary that does a live dictionary search, allowing you to choose the particular dictionary…
ObjectGraph also put together a nice Howto, showing the ASP.NET approach that they took to building this dictionary component.
Thursday, August 25th, 2005
Category: Articles
java.net have just published a step-by-step tutorial on writing a web chat app using DWR.
The final result is a web-chat app, in about 100 lines of code - client and server. The point being how easy it is to get started with DWR.
We could have gone into detail about using Scriptaculous for fancy effects, or created more server side features like one-to-one messages and so on. The point however is to demonstrate how easily DWR can take data in Java on the server and transparently turn it into Javascript arrays and lists and then put that data in the browser.
The article walks through the various pieces of putting together this chat application:
- Chat HTML
- Server-Side Java Code
- Configuring DWR
- Client-Side JavaScript Code
( via Joe Walker )
—
Next Page »
