digitarald.de Combined

How Jan explains the MooTools World

Wed, 09 Jul 2008 16:45:00 PDT

Jan Kassens, a MooTools core developer, finally got his blog on-line and did not stop writing till then. Readers can find some really useful code snippets and tutorials, revealing amazing MooTools “secrets” in detail:

Custom Pseudo Selectors - Adding the :random() selector
Exposes Class Mutator - Adding getters and setters to classes for modern browsers
toElement Method - Using element methods on your classes
Binds Class Mutator - The Bind helper to make coder shorter and simpler
outerClick Event - Adding the custom events for outer clicks

Kodus to Jan! I hope that he’ll find the time to continue this series. You can even write him, when you have an idea for an article. He even infected me again with this virus and I want to write more tutorials …

10 Resources For Learning MooTools 1.2

Thu, 19 Jun 2008 19:08:00 PDT

This article is a comprehensive list of 10 resources for developing or expanding crazy MooTools 1.2 ninja skills!

The first links are beginner guides for starting your successful career and understanding the basic concepts. After a few minutes, you’ll eventually see the light and realize how easy your daily life with MooTools can be. Then follow the next links.

If you already know JavaScript, MooTools makes it very easy for you, because it builds its API on JavaScript. Writing MooTools still feels like JavaScript because it follows the same principles. It just results in less headaches and a lot more fun!

If you are stuck, feel free to drop into our IRC-channel or post to the google group. Our ever helpful community is ready to answer your questions.

Mootools Essentials: The Official Mootools Cookbook for JavaScript/Ajax Development

The MooTools 1.2 reference for your bookshelf. Mootools Essentials aims to help you accomplish that task with the following:

Illustrations of nearly every class and function in the library
Real–world examples of how to use them
Written by Mootools user/contributor and Mootorial author, Aaron Newton.

I was one of the lucky guys who received a copy to review it, so I’ll post a detailed review about the first MooTools book later. Release is very close, but you can pre-order your personal copy.

The mooWalkthrough

The mooWalkthrough is a step by step, page by page, walk through of the JavaScript Framework.

Take your time and click through the pages. This guide makes it really easy for beginners, because it covers all the basic patterns consicely. Every page shows a problem and its solution and references further resources.

MooTools 1.2 for The Non Programmer (Part 2, 3, 4)

Using JavaScript can be a bit daunting for the non-programmer types out there. So, I’m going to display a few examples of just how easy MooTools can be. Hopefully, this will get you motivated to do a bit of learning and see how powerful and usable MooTools can be.

A guide with “everyday” examples and non-technical descriptions. If you want a quick overview and skip the basic patterns, this one is for you.

MooTools Classes: How to use them

Object oriented Classes in JavaScript keep your project structure clean and result in readable and reusable code. This article explain the Class pattern for beginners.

Chaining with MooTools 1.2

Describes the Chain Class in a documented example. Extending and implementing Classes are the basics for reusable code.

**Using MooTools Hash.Cookie API **

Shows and explains how to use the Hash.Cookie Class for saving persistent data the simple way.

What’s New in 1.2: Swiff

Today we’re going to talk about Swiff, which lets you combine Flash and JavaScript to do things MooTools can’t do on its own.

What’s New in 1.2: Element Storage

Another new feature that’s been built into the latest version of MooTools is the Element Storage. This article describes the usage of this great new feature, as well as why it was developed, and how it can be used to keep your applications organized and efficient.

Day to Day Mootooling

When using Mootools from day to day, these links will light your path.

MooTools Documentation

Always the best place for some research. If you spot an error or want to add a better example or text file a ticket with a patch.

MooTools Source Code

The authoritative source of information on Mootools, the source is considered one of the cleanest and easiest to understand in the JavaScript world. The source itself demonstrates some of the best practices that you should follow in your own code, including how to extend the MooTools classes for your own features.

MooTools 1.1 To 1.2 - Compatibility Layer

Thu, 12 Jun 2008 03:51:00 PDT

The MooTools-Team keeps working hard on the page and the requested missing features. The compatibility-layer for the 1.11 version is one of the frequent requests in the group, so I’ll provide them here for now:

Core Compat-Script for 1.2 Core Download
More Compat-Script for 1.2 More Download (contains only Fx.Scroll)

Browse them on github (or should we call it moohub?).

The compat scripts add the class and methodnames that have changed from 1.11 to 1.2. They also reflect several changed function arguments. MooTools 1.2 provides a powerful and consistent API, so I’ll continue my series on the changes that everybody can make the switch soon! I suggest to start reading them, to get an idea of the renamed classes and methods. Don’t trust these compat files implicitly, better convert your 1.11 scripts to 1.2 soon. We may update the compats for a more comprehensive 1.11 support, but 1.2 is the future-proof version!

Fuel Your Anticipation - Firefox 3 On June 17th

Wed, 11 Jun 2008 20:19:36 PDT

While the Firefox Release Candidate 3 just came out today with minor updates, Mozilla announced the final release for June 17th. A world record for the most software downloads in 24 hours is also arranged.

Some of my favourite new features:

Full page zoom. From the View menu and using keyboard shortcuts, you can now zoom in and out on the content of entire pages — this scales not just the text but the layout and images as well.
Tags. You can now associate keywords with your bookmarks to easily sort them by topic.
Offline support. Web applications can take advantage of new features to support being used even when you don’t have an Internet connection.
Reliability. Firefox 3 now stores bookmarks, history, cookies, and preferences in a transactionally secure database format. This means your data is protected against loss even if your system crashes.
Speed. Firefox 3 has gotten a performance boost by completely replacing the part of the software that handles drawing to your screen, as well as to how page layout work is handled.
Memory use reduced. Firefox 3 is more memory efficient than ever, with over 300 memory “leak” bugs fixed and new features to help automatically locate and dispose of leaked memory blocks.
more …

First tech-reviews about Firefox 3 are full of praise but also mention the memory-eating performance.

What are your experiences, did you expect more? Are you still scared to download?

API Cheat Sheet for MooTools 1.2

Wed, 11 Jun 2008 17:39:00 PDT

API Cheat Sheet for MooTools 1.2

MooTools 1.1 To 1.2 - Classes

Tue, 10 Jun 2008 20:48:00 PDT

My favourite JavaScript framework MooTools just got released as version 1.2, with tons of new features, performance boosts and bugfixes. To make the API consistent and bullet-proof for the future, the new release introduces several changed methodnames and arguments that break 1.11 and 1.2 beta code.

So I start a series about understanding the changes and converting to MooTools 1.2, starting with the powerful OOP helper Class.

Haralds Amazon Wishlist

Tue, 03 Jun 2008 02:25:20 PDT

I finally finished my thesis last week, which resulted in 90 pages and a nice webapplication with unobtrusive Ajax enhancements (official release coming soon). It utilises (of course!) some of my open-source scripts, including many unreleased plugins.

Furthermore, I added my Amazon wishlist with some of my favourite authors and topics. I share my scripts and you share new knowledge as present (a great way to say “Thank you”). Take a look at the book list, recommendations for every web craftsman and starter.

Re-release: HistoryManager

Thu, 15 May 2008 19:13:00 PDT

I got so many mails with requests, so I revamped the project site and the showcase for the HistoryManager, based on MooTools 1.11. I’m currently working on my diploma thesis (about ajax in web applications), which means less time for the open-source projects, but the paper will be finished soon.

FancyUpload - Swiff meets Ajax 2-0-beta-4

Thu, 08 May 2008 15:00:00 PDT

Fixed: Fixed fileUpload to return changed options, fixes overriding options.

Release: Unobtrusive & Ajaxified SimpleTabs

Tue, 06 May 2008 21:44:00 PDT

Finally, I found some time these days to add my SimpleTabs (previously only in my playground) to the projects. I hope you like the VERY simple approach of adding tabbed interfaces with Ajax support. I also reduced the style sheet and added helping elements to the generated markup, so developers can easily adopt their own design via CSS and techniques like sliding doors.

If you created a good-looking theme for SimpleTabs, you can share it here! Send it to me or post a comment.

SimpleTabs - Unobtrusive Tabs + Ajax 1-1

Tue, 06 May 2008 15:00:00 PDT

Public release for MooTools 1.2 - Support for static content and Ajax requests - Simplified CSS and span’s to allow styling with sliding doors technique - Reads tab content from existing XHTML markup

FancyUpload - Swiff meets Ajax 2-0-beta-3

Mon, 05 May 2008 15:00:00 PDT

Added: Optional events for every callback (e.g. onSelect, onComplete, etc.) are added automatically for more control
Added: Option limitSize (default false) to limit file size (in bytes) of a single selected file
Added: Option limitFiles (default true) to limit queue length, ignores finished files
Added: Option allowDuplicates (default false) to disable duplicate files in queue (checking name and size)
Added: Option validateFile as custom callback validator (default returns always true). Should return true or false.
Added: Optional callbacks for handling the file updates, allowing to control the behaviour and layout of the file elements:
- fileInvalid: called for invalid files with error stack as 2nd argument
- fileCreate: creates file element after select (see FancyUpload2::fileCreate for default method)
- fileUpload: called when file is opened for upload, allows to modify the upload options (data, url, method, fieldName) for every upload.
- fileComplete: updates the file element to completed state and gets the response (2nd argument) (see FancyUpload2::fileComplete for default method)
- fileRemove: removes the element (see FancyUpload2::fileRemove for default method)
Fixed: callback options are added as events , so they don’t break FancyUpload callbacks

digitarald @ twitter

Tue, 29 Apr 2008 00:28:30 PDT

I was surprised that a lot of web developers find the time for frequent updates on twitter, so it is more like an experiment for me.

Follow me to see how I’ll integrate twitter into my daily work and life. I keep posting about the evolution of digitarald.de and my projects. Keep me posted about your experience with my scripts, I’m always interested in testimonials and creative contributions.

Spotlight: FancyUpload 2

Mon, 28 Apr 2008 02:40:00 PDT

One week beta status, not bad for a web 2.0 site ;-). I fixed several quirks last week and enabled the comments. Thanks for all the contributions and bug reports. After removing the beta-badge I’ll start feature posts about my projects, starting with the famous FancyUpload 2 (Showcase).

AutoCompleter 1-1-1

Sat, 26 Apr 2008 15:00:00 PDT

Fixed: Removed orphaned trash events and added destroy for fix overlay.
Fixed: Added missing addChoiceEvents call to default injectChoice in Autocompleter.Ajax.Xhtml to add mouse events.

SqueezeBox - Expandable Lightbox 1-1-rc1

Fri, 25 Apr 2008 15:00:00 PDT

Added: Preventing indirect (not on content) mousewheel/key-down/up actions for smoother behaviour.
Added: New optional callback closeable allows uncloseable boxes and preventing close events.
Changed: Ajax and image instance now saved in SqueezeBox.asset for easier clean-up.
Changed: Added iframeOptions to iframe handler to set additional iframe properties.
Changed: Removed handlers and parsers from class, converted to Hash, better plugins handling.
Changed: Smaller marginImage, the maximum margin to screen borders, scales images to fit.
Fixed: Incorrect named options for additional class-names
Fixed: Refactored some code parts.

Roar - Notifications 1-0-1

Fri, 25 Apr 2008 15:00:00 PDT

Added: Roar::inject which contains all the basic create-notification logic, alert only builds the elements. Add more handlers (images, mp3-player like, whatever) on your own and send the cool ones to me!
Added: Added queued demo and improved ticker demo
Added: Roar::empty to remove all open items
Changed: Removed handler argument for alert, just get the last item from Roar::items and add custom events.
Changed: Removed orphaned title option, no default title possible

SqueezeBox - Expandable Lightbox 1-1-rc2

Fri, 25 Apr 2008 15:00:00 PDT

Fixed: Missed to add Hash loops instead of for-in for parser and handler.

FancyUpload - Swiff meets Ajax 2-0-preview-2

Wed, 23 Apr 2008 15:00:00 PDT

Fixed: Removed overflow auto from the lists to fix scrollbars.
Fixed: Fixed overall progress file size for removed files.
Fixed: New time left calculation, still needs some tweaks for the internal AS3 calculation.

After the dust has settled

Tue, 22 Apr 2008 23:02:25 PDT

The follow-up on the relaunch, I am still poking around, hustling pixels and tweaking css bits. Thanks for all the mails with bug reports and ideas. So far there are also questions about missing playground demos and projects. I’m currently working on the missing project pages for SimpleTabs, HistoryManager and the Grid, subscribe to the feed for updates on this.

Further updates:

The feed now combines journal posts and the projects changelog for more frequent updates.
I fixed some project downloads for ReMooz, Autocompleter 1.0 and FancyUpload 2.
The trackbacks work, contact form is secured with ReCaptcha and comments are still under maintenance.

Thanks for all the mails, keep ’em coming coming (until I fixed the comments).

ReMooz 1-0-4

Mon, 21 Apr 2008 15:00:00 PDT

Changed: Removed orphaned code like trash event
Fixed: Added missing image links for Download

Pardon the dust

Mon, 21 Apr 2008 07:04:00 PDT

I’ve been poking around under the hood for 5 weeks now, recreating my idea of digitarald.de from zero. Today’s relaunch is a big step forward. I removed the old blog system and build my own frontend from scratch. The result you see is a web 2.0, mash-up thingy, with phenomenal features:

FancyUpload - Swiff meets Ajax 2-0-preview

Sun, 20 Apr 2008 15:00:00 PDT

Refactored JS and ActionScript, it is not compatible with previous FancyUpload but a lot better!

Added: New Interface using all the new features (will change in the future for easier customization)
Added: Get the server response for uploaded files in onComplete, no longer error-catching with header status codes
Added: Get the current states of uploads like time left, bytes upload, for the current file and per queue … for supreme progress bars
Added: Set POST and GET data for the upload request
Added: Set the file-name for the upload request, default Filedata, like before.
Added: Set request options for every file, modify upload options with onBeforeOpen
Added: New events: onAllSelect, onBeforeOpen and onAllComplete
Changed: Update to MooTools 1.2 trunk and the modified Swiff Class
Changed: Updated to Flash 9 + ActionScript 3 for a stable API with more features
Fixed: Cache bug for IE , thanks to Flash 9
Fixed: Scroll into view bug for Firefox, fixed wmode
Fixed: Flash 9 works fine on Linux/Firefox

Shiny MooTools 1.2 Beta

Thu, 15 Nov 2007 15:00:00 PST

A long time without an update and now some great news Beta 1 of MooTools is out for public review. The entire core has been refactored. Foundations such as the OOP architecture, the browser detection and the native objects are now rock-solid. Whoever said that extending the native JavaScript prototypes is evil has never seen the MooTools Native class. There are countless new and awesome features (for example Hash and Effects ), new Behaviour Driven Development and documentation … I’ll try to write more about 1.2 these days!

Ajax Responder in MooTools

Wed, 15 Aug 2007 15:00:00 PDT

Some developers coming from Prototype might know Ajax Responders. Global events for all Ajax requests on the site. Most frameworks have extra Objects/Classes for them, here is how you can add them with a few lines to your MooTools code. It also shows how to extend a Class, explains Events and Options and how to work with inheritance.

MooTools on the iPhone

Sat, 11 Aug 2007 15:00:00 PDT

Some people asked about a Javascript framework for their big projects or even their iPhone apps. So I’ll show with 2 examples that using MooTools everywhere, even on your iPhone, is not a bad idea. First example, the iPhone version of the .Mac Web Gallery uses MooTools (8kb, compressed), instead of the 400kB Prototype based scripts for the standard frontend. Second one, the iPhone version for Bejeweled from PopCap Games, an addictive game with a great look powered by MooTools.

That what I saw these days, I’m sure there are other great examples of using MooTools when you need a powerful Javascript framework. There are several examples on the MooTools site like

The W3C Validator
Gamespot
and the whole CNET Network

(current list is on MooTools.net.

Amazing to see how the framework spreads!

Useful JavaScript Resources

Sat, 04 Aug 2007 15:00:00 PDT

Help! I Don’t Know JavaScript! is an informative write-up, resource collection and the first article in The MooTools Blog. Its especially for people starting with JavaScript and/or MooTools. Use the linked articles, references and resources to close your JavaScript knowledge gap.

Selector Sugar for MooTools

Mon, 11 Jun 2007 15:00:00 PDT

The $$() function in MooTools uses CSS selectors to select Elements from the DOM(Document Object Model). Since last week, basic CSS2 was supported, but now the developers added more selector features. Check out the “slick speed test”:http://mootools.net/slickspeed and the blog entry about the tale of pseudoselectors describing the details and the development. I’ll describe some basic about the selectors here.

Release MooTools 1.11

Sun, 03 Jun 2007 15:00:00 PDT

The next MooTools release was planned with number 1.2, but today we can present version 1.11 with some new features and major fixes. The bug fixes concern especially IE, possible memory leaks for Events and the Garbage collector are fixed and support for src and href in Element::getProperty. New Features are Element::getText and setText. Furthermore the documention now reflects Options and Events for classes better. A detailed overview is in the official changelog and now download it!

MooTorial for MooTools 1.1 and more

Tue, 29 May 2007 15:00:00 PDT

This month, Mootools 1.1 was finally released. As a result, an overwhelming amount of people migrated from other frameworks and many more that are starting with JavaScript. To those that are starting: the best starting is to start with the docs and to check out the new demos and Clientside’s Mootorial. For those who are complete beginners to JavaScript, you can start learning JavaScript by watching Douglas Crokford’s videos at YUI.