If you don’t know javascript, or you like learning by watching people do things, you might like the “Mootools for the Rest of Us” series over at beautyindesign.com.
It’s not as complete at my Mootools Primer/Tutorial but it is pretty friendly. You get to watch a screencast of someone setting up a document with Mootools and then implementing a few effects like Drag, Resize, Opacity, as well as an Ajax example.
Hi gang,
To go along with the posting of our collection of scripts, I’m still writing tutorials on how to make use of all our code. Today’s update is for all our extensions to the Mootools libraries that we’ve written.
You’ll find new helper functions, new extensions to ajax, string, element, window and more. For the most part, you can just drop these scripts into your environment and they should work. If there are dependencies, you can find them listed at the top of each script.
Here’s a nice little extension I found on the mootools forums. It let’s you assign an action to any element when the element has focused and the user clicks a key. I haven’t played around with it yet, but it’s super small and looks useful for form inputs and whatnot. Credit goes to BlackMac. | Read the rest »
Hi gang,
I've been at work on a mootools primer as a tutorial for those who want to use the library but don't know a lot about javascript. It's replete with working code examples that you can execute right in the browser and see the result. | Read the rest »
Google has released its Google Web Toolkit (GWT) for the Mac. Version 1.2 now works on OS X as well as Linux and Windows.
I haven't used it yet, so I can't really attest to its capabilities. Basically, though, it allows you to write and debug AJAX web apps in Java and compile them to browser-compliant JavaScript and HTML.
As they phrase it on their site, GWT "makes writing AJAX applications like Google Maps and Gmail easy for developers who don't speak browser quirks as a second language. Writing dynamic web applications today is a tedious and error-prone process; you spend 90% of your time working around subtle incompatibilities between web browsers and platforms, and JavaScript's lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile."
There's also a Google Web Toolkit blog where you can follow the Toolkit's development progress.
PS> This is my first post to Clientside since it went public to the world, so I thought that I should, like Aaron, also throw out a "hello world."
I'm Mark Bult, an Art Director at CNET Networks, currently working on redesigns of Webshots.com, UrbanBaby.com, and Consumating.com, three of CNET's community and lifestyle properties.
I also blog about Mac and graphic design stuff (and personal stuff, so you've been warned that a lot of it's boring) at enews.org.
Holy crap I want to install this.
via ajaxian:
Firebug 1.0 is currently in beta, and looks very different to the 0.4.1 that we all know and love.
The new website Get Firebug gives you a glimpse of what is coming shortly:
- Inspect and edit HTML
- Tweak CSS to perfection
- Visualize CSS metrics
- Monitor network activity
- Debug and profile JavaScript
- Quickly find errors
- Explode the DOM
- Execute JavaScript on the fly
- Logging for JavaScript
I really like how the top screenshot is actually “live”, letting you click on the tabs to see each area. Very nice indeed.
via Ajaxian. I know that Valerio over at Mootools has a similar application that he has working in Mootools but hasn't released yet.
Lars Huring and team have created SWFUpload, a small JavaScript/Flash library that tries to re-make the way file uploads works on the internet.
It works by replacing the contents of a div with a small transparent flash that handles all the upload-frontend, javascript for configuration and callbacks and html/css for styling/looks.
This allows:
* Specify what filetypes are to be displayed in the upload dialog
* Upload multiple files using normal ctrl/shift-click to select multiple files
* Get file size and other info before upload starts and report that information back to the page.
* Style upload buttons any way we want using html/css and more...It will degrade to a normal html upload input-field if flash/javascript isn't present.
JavaScript:
mmSWFUpload.init({
upload_backend : "../../upload.php",
button_image : "images/custom_button.png",
button_mouseover_image : "images/custom_button_over.png",
width : "258px",
height : "82px",
target : "SWFUpload",
allowed_filetypes : "*.gif;*.jpg;*.png",
upload_start_callback : 'uploadStart',
upload_progress_callback : 'uploadProgress',
upload_complete_callback : 'uploadComplete',
upload_error_callback : 'uploadError',
upload_cancel_callback : 'uploadCancel'
});
via Ajaxian:
Daniel Kantor has implemented a Back button solution in Streampad and has shared it with us.
One of the main gripes against AJAX webapps is how they break the back button in a typical browser. There have been a few solutions (notably Brad Neuberg’s Really Simple History) but none have got it working in Safari. GMail still does not have a working back button in Safari.
They say the third time is the charm and I have tried to get a Back button thing in Streampad twice before. I do not want to use someone else’s library as they are usually more complex than I need and I did not want to put something in place until I had Safari working. I tried a few different techniques, but when I got it working in Safari, it would break in Firefox or IE.
I finally figured out a way to get this working in Firefox, IE and Safari.
While Daniel struggled with this, he found that the back button support caused a slow down in the entire app performance. He came up with a new solution that didn't suffer from the performance issues:
The general concept is this: You load a page into an iframe that calls parent.goBack() and then changes its own location to a new page (a blank page will do). Because the page jumps to a new location, it now has a history. If you click the back button, it will load the page again (calling parent.goBack()) and then spring forward to the dummy blank page.
JavaScript:
var historyArray = Array(); // create an empty array to hold the history
var historyCounter = -1; // initialize the array pointer to -1function historyAdd(f){
if (historyCounter == -1){ // the first time this is called it will change the iframe location
document.getElementById(’hFrame’).src = “/historySpring.php”;
}var o = historyArray[historyCounter];
if (f != o){ // don’t put in consecutive duplicates
historyCounter++
historyArray[historyCounter] = f; // add function to history
}function goBack() {
if (historyCounter> 0){ // don’t want to call it if there is nothing in history array
historyCounter– // set the pointer back one
var f = historyArray[historyCounter]; // get the function from the history array
f = f+”()”;
eval(f); // call the function
}
}
Here's a trick I learned from Valerio (author of Mootools) on how to handle options for classes and functions. After refactoring a couple of legacy scripts I thought I'd share for those of you who might not know it already. This example below uses the Mootools syntax for class creation, but the rest of it can be used even on its own I think. | Read the rest »
Ajaxian brings us this post on Amberjack, an open source site tour function. I like it and it's pretty small (4K packed). I wonder how successful something like this would be on CNET. Yahoo has something similar that gives you a tour of a single page and it looks really nice (it was on their new home page for a while when you first visited).
Arash Yalpani has released Amberjack, a tiny and Open Source/GPLed JavaScript library you can use to create nice looking tours for a web site.
There is a tour wizard to make it simple to create your own tours, and a JSON technique is used to post-fetch skins.
Checkout a sample tour to see it in action.
