Saturday, December 31st, 2005
Category: Security
Eric Pascarello suggests another risk of running Javascript from another domain: Using Javascript to fake a login page.
Spoofing of a web page to get your information is so common. I see in my inbox that your —(insert bank, shopping site, etc) account is going to be removed if you do not verify your information. You look at the link and it says something like ebay.someunknowcompanyVerificationService.com/securityApproval. Anyone stupid enough will click on the link sees the look and feel of ebay and fills out the form. Bye (sic.) to your account information. Now this same basic principal can be applied to site.
A malicious external script might produce a fake GMail login screen. In the story here, it adds GMail to a new frame:
How did they get his password? Well it ends up that the cheese page had some code sitting there that noticed if a user was not active for an extended period of time so it opened up a framed page with gmail in one of the frames. Since cross browser scripting was enabled. The cheese page changed the properties of the form to post to the cheese server logging the username and password. After the data was recorded, the user was redirected to gmail and the rest is history in this fake story.
Of course, most users would ask, “Why is there a GMail login page in my browser?”. In Eric’s story, the user is distracted by a phone call. Other times, it could possibly happen if the user returned to the background tab. It might not trick many users, but even if it catches one person out, that’s a serious problem. The scenario here is further evidence that people need to take care with cross-domain scripting.
Friday, December 30th, 2005
Category: Fun
4.4 rating from 116 votes
Category: Editorial
Scott Dietzen of Zimbra write a piece called Ajax Design Center in which he discusses the future of Ajax tooling, and how we should be building Ajax applications.
He recognizes that UI frameworks such as Zimbra AjaxTK may be a bit too much for the average designer, and that a bridge needs to be formed.
Ultimately, we hope to see higher-level, and more declarative languages that can more easily be authored by Web designers, but nevertheless provide much (but perhaps not all) of the rich interaction capabilities of Ajax. And when you need to finely tune the GUI, you still have the option to drop into full-on Ajax programming. The age old adage “simple things, simple; hard things, possible” remains the mantra of choice.
We believe the best way to get there is to continue building bottom up:
- Settle on a handful of Ajax widget toolkits and ensure they get to critical mass (Think SWT and Swing). We’re offering Zimbra AjaxTK as one such candidate, but the greater open source community is the final arbiter of winners.
- Provide rich integrated open source tooling targeted primarily at GUI/OO programmers.
- Define how to relatively easily augment existing HTML content (such as served by PHP, JSP, etc.) with Ajax subcomponents (that is, Ajax code would typically take over certain regions of the browser UI).
- Experiment with higher-level declarative languages for authoring Ajax and HTML.
Category: IE, Canvas
As soon as we saw SVG, Ben thought that it would be quite possible to take the VML support that IE has had for a long time, and make a converter that would make a subset of SVG work in IE.
Emil Eklund had the same thought, and acted on it.
In this case, his demo was actually in porting some of Canvas over to IE. You can check out the demo to see it in action, and see the JavaScript and HTC code.
Great work Emil!
Thursday, December 29th, 2005
Category: Examples
Here’s An Ajax school project that demonstrates Ajax for order tracking. Developer Matt Farley explains:
The project is for a senior level programming class at the local state university. The class is called “Web Database Programming” and is geared towards web based database applications. The language/database taught in the class was PHP/MySQL. The extent of the JavaScript taught was limited to client-side form validation.
Each student was to come up with a comprehensive project to implement everything we’d learned in class. I had some experience with AJAX at work, and we had a similar need for such an application, so I thought why not kill two birds with one stone. I went above and beyond the requirements of the class project and created something that not only helped at work, but stood as a solid example to others of possible AJAX replacements for traditional stand-alone applications.
The system is a data entry app. Google Maps is incorporated to show locations of contacts, a list of Suggestions appears as you type in a name, and there’s an editable data grid backed by data on the server and with an SQL console.
The project homepage contains a project report, Ajax overview and a design description, complete with Entity-Relationship Diagram.
Are any schools actively teaching Ajax? We’d be pleased to hear about any other Ajax student projects.
Category: Showcase
We have mentioned spell checkers from time to time, but we have never mentioned Google’s GMail spell check, which they keep updating to make it better and better.
A nice, clean, obvious use of Ajax.
Category: Chat
AJChat is one of the latest ajaxian chat systems to come along.
It offers a few differences, such as promoting the chat service rather than the just the chat client.
This means that you can be in any chat room, and click “Options” and “Share Chat” to get the code that you can embed in your own site.
Category: Showcase
There are certainly a fair few bookmarking sites out there, but Thomas Rice wasn’t happy with them:
One of my main motivations for setting up the site was I needed somewhere to store my bookmarks online (as I use multiple PCs) and I didn’t like the interfaces of other sites - most are pretty slow, requiring you to reload the page when making a change or looking at different categories. So it’s really this ajaxian interface that I think sets the site apart.
If you want to check out a demo of the interface without signing up you can check out the demo page.
The Ajax features are:
- clicking a category header to edit it
- dragging categories to different positions
- dragging links to different categories
- locking/unlocking the page (stops dragging)
- changing category header colors via the drop down menu
- creating new links + categories (done without reloading page)
- minimizing/maximising categories
- changing privacy status of links
Wednesday, December 28th, 2005
Category: Flash
Geert Bevin and the rifers recently released RIFE 1.3.1, and they just released RIFE/Laszlo 1.3.1, a companion piece.
RIFE is getting a lot of press in the Java community as it is a totally different way to do Web, and allows you to have a continuations-based approach (a la Seaside).
RIFE/Laszlo gives you a jump start for building rich internet apps with RIFE as the server, and Laszlo as the rich client.
What is OpenLaszlo?
OpenLaszlo applications are written in XML and JavaScript — just like DHTML, but portable across browsers. An OpenLaszlo application can be as short as a single source file, or factored into multiple files that define reusable classes and libraries.
What is even cooler about this is that the OpenLaszlo folk are going to be targetting Ajax as an output (vs. swf).
Category: JavaScript, Toolkit, Articles, Testing
Eric Spiegelberg has written Log4Ajax , an article with corresponding demo code for logging ajax applications. Eric’s article builds upon an earlier, simpler system for logging from Joshua Gitlin’s article Errors and Ajax.
It details a logging system in javascript displayed to an in browser console, with the option of sending messages to the server (via ajax) in order to persist them. Eric uses the java based log package log4j on the server side to capture the log messages from the client, but the idea could easily be adapted to whatever sort of server side logging system you want.
He also talks about some possible improvements, like filter levels for client and server and a queue to keep your server from getting hammered by debug messages. An opportunity for some open source development, perhaps (although I didn’t see mention of the license terms anywhere).
You can download the code used at the sourceforge project page, and also view a live demo. A simple yet powerful option for your logging when alert() messages won’t cut it.
Update: Andre wrote to let us know about his recent release of JSLog, another javascript logging tool. JSLog logs to an expandable window in your browser and can be turned on or off via a single config setting. There is one script file and its 6k with no dependancies.
JSLog does not have the server side component, and Andre explains why he left it out:
[I] decided to stick with a transient browser display for two reasons: 1) it met all of my debugging needs in that form; 2) introduction of a server-side component complicates the deployment significantly, and reduces the portability of the tool.
So if you don’t need the server side piece or just want to compare the options, check out JSLog, or see the optional Scriptaculous effects at the live demo.
Category: Toolkit, Prototype
Do you always wait for the first point release after a final one? Well, Script.aculo.us has just released version 1.5.1 on the heals of the 1.5 release that came with Rails 1.0.
This isn’t just a bug fix release though, but adds features:
- Effect.toggle allows silly easy implementation of toggling elements with Slide, Blind and Appear/Fade effects:
Effect.toggle('element_id','slide')
- Effect defaults can now be set globally by manipulating the
Effect.DefaultOptions hash
- Scoped effect queues for multiple parallel running effect queues:
Effect.Appear('element_id', {queue:{scope:'myscope', position:'end'}})
- Dynamic loading of components allows you to tune your site per-page for including only the script.aculo.us components you need:
<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>
- New Effect.Move that replaces the old Effect.MoveBy that also allows for absolute movement:
new Effect.Move('element_id', {x:30, y:10, mode: 'absolute'})
And if you are on the bleeding edge of Rails you can use the latest and greatest with:
visual_effect :toggle_slide, ‘element’
visual_effect :toggle_blind, ‘element’
visual_effect :toggle_appear, ‘element’
Tuesday, December 27th, 2005
Category: Showcase
Wordpress 2.0 is apparently out the door (though the latest stable release is still listed as 1.5.1).
Asymptomatic recently listed a bunch of new features in WP2, here are some of the more interesting ones from an Ajax perspective:
- Ajax Category Addition - There’s a bunch of ajax in WordPress 2.0 and this is probably the most requested use of it. This feature lets you add new categories directly from the post-writing page.
- Ajax List Management - There are a few places in the admin that show lists of things and let you delete, like categories, posts, comments. Now, instead of reloading, the row turns red and then fades out.
- Moved Javascript/Images - Version 2.0 uses a lot more javascript than prior versions. Some utilities, like FAT (Fade Anything Technique) and SACK (Simple Ajax Code Kit), can be used by other tools and plugins, so it’s good to put them someplace where developers know they will reside, and outside of the admin directory, which might have weird permissions.
- The Rich Editor - WordPress has a new post editor built in that lets you see what you’re going to get without having to decipher tags. You can also resize the editing area on the fly by dragging it, which is pretty cool. Not everyone who has tried it likes the WYSIWYG editor, so there is an option to disable it on a per-user basis.
- Improved Post Preview - Instead of displaying the post as plain text below the editor, the post is now displayed in an embedded frame, using all of the layout and CSS that is normally applied to your site. In effect, the post looks exactly like it will when you publish it, giving you ample opportunity to review the post’s layout.
Category: Articles
Drew McLellan posted day 24 on 24 ways to impress your friends.
His topic was Edit-in-Place with Ajax, which of course is when you can click on certain areas, and they change in front of you to be editable text boxes (or inline editable divs).
The tutorial goes over:
- The HTML and CSS
- The events required to manage
E.g.
function makeEditable(id){
Event.observe(id, 'click', function(){edit($(id))}, false);
Event.observe(id, 'mouseover', function(){showAsEditable($(id))}, false);
Event.observe(id, 'mouseout', function(){showAsEditable($(id), true)}, false);
}
- Saving the changed via Ajax
- Server Side
And, he ends with limitations:
There are a few bits and bobs that in an ideal world I would tidy up. The first is the error handling, as I’ve already mentioned. The second is that from an idealistic standpoint, I’d rather not be using innerHTML. However, the reality is that it’s presently the most efficient way of making large changes to the document. If you’re serving as XML, remember that you’ll need to replace these with proper DOM nodes.
It’s also important to note that it’s quite difficult to make something like this universally accessible. Whenever you start updating large chunks of a document based on user interaction, a lot of non-traditional devices don’t cope well. The benefit of this technique, though, is that if JavaScript is unavailable none of the functionality gets implemented at all – it fails silently. It is for this reason that this shouldn’t be used as a complete replacement for a traditional, universally accessible edit form. It’s a great time-saver for those with the ability to use it, but it’s no replacement.
Check out a live example
Category: Ruby
why the lucky stiff is up to his magic again.
This time he has created Try Ruby, a place to play with Ruby via your browser.
Not only is it cool that you can just type in commands and get instant feedback, but there is integration into the browser.
For one, you can type “help” (and “help 2″ etc) and the page changes below the prompt.
Recently added though is the ability to popup HTML within the page too:
require 'popup'
Popup.make do
h1 \"Things To Do\"
list do
p \"Try out Ruby\"
p \"Ride a tiger\"
p \"(down River Euphrates)\"
end
end
Now, if only I could copy/paste!
Monday, December 26th, 2005
Category: IE
We have been at a few clients that asked us for Ajax support on IE for Mac. You have to have a bit of a laugh with that bad boy. Unfortunately, some clients require support for this beast, and although “support” means different things at different places… (e.g. degrades so it is readable, vs. same experience) it was always a pain.
Now that Microsoft will stop supporting the beast in a few days, does it really matter? Will these policies be changed so we can move on? Can we now say “but hey, look. Microsoft support is done, so can’t we stop?”. I guess the main metric is the number of browsers coming into your application, and how inclusive you want to be. Microsoft’s announcement doesn’t directly effect that, unless it gets those old guys to upgrade, and if they haven’t done so by now?
IMPORTANT INFORMATION FOR MICROSOFT INTERNET EXPLORER FOR MAC USERS
In June 2003, the Microsoft Macintosh Business Unit announced that Internet Explorer for Mac would undergo no further development, and support would cease in 2005. In accordance with published support lifecycle policies, Microsoft will end support for Internet Explorer for Mac on December 31st, 2005, and will provide no further security or performance updates.
Additionally, as of January 31st, 2006, Internet Explorer for the Mac will no longer be available for download from Mactopia. It is recommended that Macintosh users migrate to more recent web browsing technologies such as Apple’s Safari.
Category: Showcase
If you mouseover the dotted line items such as Essential Mac OS X Panther Server Administration on MacSlash, you will see a rich popup from Amazon.
Since real-estate is precious, and there is only so many types of links, or events on those links that you can do, will web services like Amazon be fighting for our popup space?
—
Next Page »
