Speaking of change, I’m glad to announce the future availability of WP-o-Matic 1.0 with its new website (which has been in the oven for longer than a year!). You’ll see many new features, bugfixes, and the birth of a great little community.

I’ll be releasing two other small Wordpress plugins that developers will find specially useful. One of them is Base-Plugin, a template plugin architecture aimed to make your own plugins preparation easier. It features a very small template management system, it sets variables and functions that you might find yourself writing over time after time, and more.

And for those who wish to include details about their plugins hosted at Wordpress Extend in their websites, Extendfetch will be nothing short of amazing. It fetches and lets you display the number of downloads, links and it’s dead easy to integrate.

• Tables not deleted anymore upon installation
• Fixed SimplePie error report.
• Fixed small post content bug (not hidden by default)
• Fixed cron url
• Removed inverted quotes from queries
• Fixed notices in debug mode
• No error showing for campaigns w/o feeds fixed

Click here to download

As usual, head to Lighthouse for bug reports

I guess pretty much everyone has seen Barack Obama’s website by now, which is clearly one of the prettiest of all candidates we’ve heard of so far. Not only is it an example of state-of-the-art design, but it’s also nice to navigate and interact with.

I decided to imitate the homepage slideshow. I had already experimented with similar animated lists, which allowed me to have it ready within minutes

The creation

I took my previous class (SlideList), and made a few changes here and there. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists.

I extended it and came up with a new class that receives the images and loading spinner as parameters (note: it’s arguable whether this is the best decision OOP-wise, but due to the simplicity of this script, this was the right call)

The code

To ensure all images are loaded before the user makes any interaction, the MooTools Assets component is used.

The CSS plays a major role (as in every other animation-focused script). I suggest you analyze it carefully before implementing it in your applications or websites. You’ll probably need to adjust the ids, or use classes instead to keep your stylesheets clean.

The markup is meaningful and simple. Two lists are used (one for the images and the other for the links). The loading element is included in the HTML, but it’s probably better to inject it from the script directly.

The pictures

The beautiful pictures were taken from Flickr with permission of the owners, unless they were directly released for non-commercial use. Thanks vgm8383, dogonnit, M. TANIGUCHI, GustavoBuriola & others!

The demo

Remember that, just like any release prior to 1.0, upgrading will erase your previous campaigns, feeds, logs, etc.

• Now compatible with Wordpress 2.5
• Categories shown with indentation (parent > children now separated)
• SimplePie updated to 1.1.1, and SimplePie Core now supported.
• Fixed broken cron command
• Fixed broken export on some systems
• Fixed broken redirect when resetting a campaign
• Everything now stored in GMT to avoid time issues. Gotten rid of NOW() functions in favor of WP time functions
• Fixed bug with validation upon deletion of feeds in existing campaigns
• Fixed bug with ‘allow comments’ setting.
• Fixed bug with logs dates
• Fixed bug with double quote escaping (fixes campaign templates / rewrite html bugs)
• Username in options tab changed to a more handy select box.
• Interface now looks better on IE (d’oh)
• Added many help files
• Fixed annoying duplicates bug
• Fixed small bug in import with labels

I need feedback on:

• All sorts of errors, warnings, notices, blank screens
• Styling problems, indicating Browser, OS, URL and a screenshot.
• Behavioral problems: bad dates, bad content, duplicates, etc
• Performance problems
• Unexpected behavior

Always include instructions on how to reproduce the issues please!

Go ahead and download it

Updates

• 1 - Fixed bugs with categories in edit mode and posts tools (thanks Mike)
• 2 - Fixed empty rewrite bug (thanks Mike) and replacements now case insensitive
• 3 - Fixed bugs with ‘use feed date’ option, footer copyright, bad dates in ‘view all’ logs, log message field made text, timestamps converted to datetime, ‘Clean logs’ function fixed (big changes, please test)
• 4 - Fixed bugs with older WP releases (now WP-o-Matic works with any version starting from 2.2). Now rewrite works with PHP4.
• 5 - str_ireplace bug fixed, allow comments bug fixed, now user can choose comments state.
• 6 - {content} not getting rewritten fixed, titles and other settings not being stored fixed.

Just writing to let you know that the upcoming release candidate of WP-o-Matic is being cooked and betatested!

This is a list of all the exciting changes, which include new features you’ve been requesting and lots of bugfixes

• Categories shown with indentation (parent > children now separated)
• Fixed broken cron command
• SimplePie updated to 1.1
• Fixed broken export on some systems
• Fixed broken redirect when resetting a campaign
• Everything now stored in GMT to avoid time issues. Gotten rid of NOW() functions in favor of WP time functions
• Fixed bug with validation upon deletion of feeds in existing campaigns
• Fixed bug with ‘allow comments’ setting.
• Fixed bug with logs dates
• Fixed bug with double quote escaping (fixes campaign templates / rewrite html bugs)
• Username in options tab changed to a more handy select box.
• Interface now looks better on IE (d’oh)
• New option added to select max number of items to process
• New option added to decide whether the permalink should point to the created blog post or to the source permalink
• New general option to get logs feedback while the campaign is being processed.

As usual, stay tuned. Sorry for not being able to respond and release with more frequency, but I’ve been really busy.

Let’s revise some of the most remarkable scenarios.

Uploading

One of the most common Flash and Javascript interaction is probably file uploading in forms. There’s almost no way to customize the input style in a cross browser fashion. Firefox, for instance, makes it impossible (for security reasons) to trigger the upload file selection unless the user clicks the Browse button. Among many other limitations.

But Flash comes to the rescue, with some really stunning implementations. It’s worth mentioning open source implementations like Fancy Upload (MooTools), jqUploader (jQuery) and SWFUpload. Flickr’s new upload also takes advantege of this method.

Clipboard access

In most popular browsers, Javascript is not allowed to interact directly with the clipboard. The exception is the infamously insecure Internet Explorer 6:

Flash, however, allows developers to freely copy the text to the clipboard. Jeffrey Larson came up with the solution using a really small swf file from his Javascript code.

The code was further improved to support Opera, which results in complete browsers compliance. There is a MooTools implementation by Aaron Newton, and a Prototype one.

Photo editing / Drawing

Another area where Javascript is still not quite ready for is photo editing. Flash proves reliable for such a task, and it’s what is commonly used right now, while Javascript is being left behind.

Here is a quick example of Flash outputting SVG, and here is a full featured (but not freely available) image editor, Picnik, that really shows how suitable Flash is for this.

The main reason Javacript falls short here is its limitation to come up with most effects, which is the reason js-based editors will do that server-side, adding a delay and thus hurting the user experience.

Some cool effects can be achieved in Javascript alone thanks to the canvas tag. But we’re still far from close to full-featured image editing.

Sound

The only sure way to play a sound file in a crossbrowser, crossplatform way is nowadays Flash.

There’s a solution available for most frameworks: MooSound, GWT-Voices, jquery.sound. The most popular standalone ones are SoundManager 2 and JSSoundKit.

Persistent Data Storage

There might be certain scenarios where you’ll want to store large chunk of data in the client side (it could be for caching purposes, or for offline retrieval, for example. Flash is one of the most reliable ways, allowing you to store up to 100k seamlessly, and even more if the user authorizes it when prompted.

See dojo.storage for a nice implementation and proof-of-concept

Note: i’m currently working on a MooTools implementation of this.

Some scenarios where flash might be involved

Ajax: see the fjax project
Charts: see the YUI.charts project (and see flot for a sweet jQuery approach!)

Demo here

In my previous blogpost I explained how to extend TextboxList to add closing functionality via a link added to each box. But it was missing an important ingredient: autocompletion!

Again, all we have to do is extend the TextboxList class, override some methods, some events, and create some new ones (all prefixed by auto)

It works by caching all the results from a JSON Request and feeding them to the autocompleter object. When a item is added as a box, it’ removed from the feed array, and when the box is disposed it’s added back, so that it becomes available in the list when the user types.

Another new feature is that you’ll be able to let it add boxes from the HTML directly:

The constructor now takes new parameters to configure the autocompletion, like the minimum number of characters to trigger the dropdown, and more.

Changelog

• 0.1: initial release
• 0.2: added click support, removed $attributes use, code cleanup

Download

Click here to download the zip with code and examples

Check out a demo of TextboxList before reading!

While working on my big and exciting new project, I decided to include an input that resembles the famous Apple Mail to: textfield. I’d seen it in Facebook before, which has a really decent implementation of this concept (it work well, but it doesn’t respect any modern programming principles; basically, it’s a big tag soup with lots of inline Javascript)

I created my own, MooTools 1.2 compatible, in just 5kb. It’s not only small, but also really frexible! Here are some notes of the creation process and how to implement it in your own projects.

Anatomy of the control

As usual, I try to come up with a semantic, unobstrusive approach. I start with the CSS and the markup that will be my end result.

I want to go from something like this:

to something like this (only one possible scenario, naturally)

Basically, it’s a group of pieces (that I’ll call bits), that can be either a box or an input (small, except for the main one). The user is able to move around between the bits by using his keyboard or his mouse.

Javascript

As far as the javascript goes, I try to first think about reusable code (usually classes) that I may use. I thus first coded the class that adds resizing capabilities to the small fields as the user types, and a small utility method to find the caret position.

The only challenges I found was handling the complex events while keeping everything crossbrowser. Again, none of this would have been possible if it wasn’t for MooTools (1.2).

Using it

All you have to do is:

Where input-demo is the id of the desired input to replace

The constructor can take these options:

• onInputFocus (event, fired when an input gets focus)
• onInputBlur (event, fired when an input loses focus)
• onBoxFocus (event, fired when a box gets focus)
• onBoxBlur (event, fired when a box loses focus)
• onBoxDispose (event, fired when a box is removed)
• resizable (option, hash, passed to ResizableTextbox constructor)
• className (option, string, prefix of the classnames of the generated objects)
• extrainputs (option, boolean, adds small inputs between boxes if true)
• startinput (option, boolean, adds a small input before the first box if true)
• hideempty (option, boolean, hides the small inputs by default)

Extending it

One of the my favorite features of MooTools is how easily you can create and extend classes. It makes you feel in a truly Object-Oriented environment, overcoming all Javascript limitations and complexities to handle functionalities like this by default.

I decided that, for the sake of simplicity, the class would not incorporate stuff like boxes removal through clicks, or even autocompletion (like Facebook does), since the scenarios to use this control are multiple and diverse.

Here is an example of how easily you can add the small remove links next to the name (and some CSS, of course)

Changelog

• 0.1: initial release
• 0.2: code cleanup, small blur/focus fixes

Download

Click here to download a zip file containing examples, TextboxList documented (8kb) and compressed (5kb)

New! TextboxList with autocompletion

We’re close to Devthought’s first anniversary too, which will mean an upgrade, a new design, and lots of new stuff. Stay tuned