Mo Jangda

If you like Glee, you’ll like this. If you like image processing using PHP, you’ll like this even more.

Using PHP and the GD image library*, it’s pretty easy to create a static, image-based countdown clock, which is useful for situations where javascript cannot be used (think WordPress.com/Blogger). A new image is automatically generated server-side for every minute (assuming a request is made for the clock for that minute), and all images are cached to avoid killing the server processor. Check it out in action on Gleeks United or after the jump.

Don’t have code yet, but I’ll post it when I get a chance.

Vertical version:

Powered by Gleeks United

Horizontal version:

Powered by Gleeks United

* Yes, ImageMagick could work too, but it’s too much of a pain to install.

jQTouch has a sweet feature which adds a fast touch or “tap” event. It’s pointless for me to try and rephrase, so learn all about it on the jQTouch blog: Milliseconds Responsiveness and the Fast Tap

Now, the only downside to the tap event, is that it doesn’t work on anything other than Mobile Safari. So for iPhones, you can use tap event, but non-iPhones, you have to use click event. You could just make things easy on yourself and use clicks across the board, but I can tell you that the tap event immensely increases the performance and responsivity for jQTouch apps on iPhones. Good news is, there’s an easy way to work with both.

The code below was inspired by Samuel’s message on the jQTouch Google Group.

<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
var isiPhone = (userAgent.indexOf('iphone') != -1 || userAgent.indexOf('ipod') != -1) ? true : false;
clickEvent = isiPhone ? 'tap' : 'click';
</script>

You can now easily bind your events as follows:

<a href="#link" id="mylink">Click or Tap me!</a>
<script type="text/javascript">
$('#mylink').bind(clickEvent, function() {
    e.preventDefault();
    alert('Yay! You just ' + clickEvent + 'ed me!');
});
</script>

Note: in my testing, the tap event doesn’t register too well on the iPod Touch. If that seems to be the case, I’d recommend defaulting iPod Touches to use clicks instead. However, since the iPod Touch user agent includes the term “iPhone”, we have to un-include it from our tap list:

<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
var isiPhone = (userAgent.indexOf('iphone') != -1) ? true : false;
if(userAgent.indexOf('ipod') != -1) isiPhone = false; // turn off taps for iPod Touches
clickEvent = isiPhone ? 'tap' : 'click';
</script>

I’m excited to announce the release of Zen v1.0, a plugin for WordPress that brings the much beloved idea of distraction-free writing to the WordPress admin.

I provided a sneak peek of the plugin a few weeks ago, and after some fine tuning a lot of awesome changes, Zen is finally ready for prime-time.

If you can’t wait till the end of this post, download it directly from WordPress (under Plugins > Add New, search for “Zen”) or grab it from the WordPress Plugins Directory.

What is Zen?

In a nutshell, Zen is a distraction-free environment for WordPress.

If you’re a fan of WriteRoom, OmmWriter, or similar tools that help you focus on your words instead of the tools you’re using, this plugin will soon make your wildest dreams come true (and give you a simple clean environment within WordPress to write to your heart’s content)! While Zen does not replace the existing Edit Post/Page screen, it provides a layer on top that will help you focus more on the quality of your words and less on the distracting fine-tuning of minuscule details.

I’ve got a quick breakdown of the plugin and it’s features below.

Zen Mode

Zen adds a handy-dandy little button right above the publish module that toggles Zen mode (you can also use the keyboard shortcut listed below).

Zen mode includes a textboxes for the title and content, save and publish buttons below them, and a close button on the top left.

To leave Zen mode, click on the close button or use the keyboard shortcut below.

The content textbox is a basic textbox without the Visual and HTML editors. Initially, this was because of an issue with the HTML editor, but it’s become more of a conscious choice since it keeps with the whole mantra of distraction-free writing. If you think that it would be worthwhile to include the Visual and HTML editors, let me know, and I’ll consider it.

Yes, you can write in HTML in the textbox.

And yes, autosave still works in Zen mode, so you can rest assured that WordPress will chug away in the background to keep your writing safe as you work on that next great blog post.

Zen Settings

Settings for Zen are accessible via Users > Your Profile. At this point, you can specify whether Zen should automatically open when you go to Add or Edit a Post or Page and your preferred theme. I’m considering adding the option to include additional modules (Categories and Post Tags) in Zen mode as well.

Keyboard Shortcuts

Zen has simple keyboard shortcuts to help you get the most out of Zen:

z – enters Zen mode
q – exit Zen mode
t – switch theme

Note: the keyboard shortcuts do not work while you’re writing in one of the textboxes. This is something I’m hoping to change in a future release.

Themes

Zen comes prepackaged with 5 themes:

• Zen Light
• Zen Dark
• Zen Papyrus
• Zen Papyrus Lite
• Zen Terminal

You can specify which theme you prefer under Zen Settings and Zen will automatically open with that theme enabled. You can easily switch between themes while in Zen mode using the “t” key. If you switch between themes, Zen will autosave your preference and load that next time you go into Zen mode.

What Now?

I’d love to add more themes to Zen, and have a few potentials lined up that I’ll release over the coming weeks. However, I’d really, love to see your theme ideas implemented as well. If you’d like to contribute a theme or have an idea for a theme, you should contact me.

If you have any features you’d like to see in Zen or found bugs that are driving you insane, you should contact me

Thanks

Thanks go out to:

• ifranky, Habari, WriteRoom, and OmmWriter for inspiring Zen.
• Suzanne Gardner for providing beta feedback.
• Andrew Spittle for providing beta feedback and helping me with the base themes.

---

Seen enough and just can’t wait to get your Zen on? Download it directly from WordPress (under Plugins > Add New, search for “Zen”) or grab it from the WordPress Plugins Directory.

P.S. Yes, this post was entirely (except for adding images) written in Zen mode, and it was fantastic. My current themes of choice are Zen Terminal and Zen Papyrus Lite.

Why did I never know about jQuery.data()?

More details to come about fun things you can do with it.

Edit Flow was bumped up to v0.3 last week and saw a flurry of other updates as bugs cropped up that I had managed to miss during the testing phase before release. The main focus of this release was to introduce usergroups, which will form the basis of future features and to enhance the notification functionality that was introduced in the previous version.

If you haven’t upgraded yet, download it from the Plugin Directory or directly from within WordPress.

Here’s a quick breakdown of the new features introduced in this release:

Usergroups

Version 0.3+ adds in what are called usergroups. On the outset, they’re similar to “Roles” built into WordPress, except that (at this stage) usergroups are simply ways to associate groups of users together. Edit Flow adds a number of sample usergroups for you to get started (as shown above) and get a sense of what sort of groupings you can create. However, the main power of usergroups comes with…

Notification Controls

Much of the feedback Edit Flow received since the email notification were introduced centred around having greater control over who receives notifications. Previously, post updates were emailed to authors, editorial commenters, and any roles that had been selected to receive notifications. Many people were drawn to the notification feature but were forced to keep it disabled since they didn’t want all their editors or administrators notified on every single post update.

With the new release, you can specify on a post level, what users and usergroups should receive notifications, so that only relevant people and groups of people receive updates.

Note: with the introduction of this feature the “Notify by Role” option was removed. In its place, a new feature was added “Always notify admin option” which includes the blog administrator in all notifications. To all overly protective, nosy admins that want to know everything: you’re welcome :)

This is just the beginning of notifications. Some interesting ideas that I’d like to integrate in future versions of Edit Flow include:

• Giving users the ability  to subscribe to posts themselves
• Have specific users or usergroups automatically subscribed to posts based on categories or tags assigned to posts.
• Make the UI a bit more efficient. The UI for this new feature is something that was unfortunately rushed. My original vision didn’t make it in (due to various impracticalities, changes, and lack of time), but it’s very much a high priority on my list to make it easy to select users/usergroups (especially for installs with hundreds and thousands of users).

More Useful Notifications

On the topic of notifications, the new release introduces emails that are slightly more descriptive in terms of the action taken on the post. The subject line of the email will specify whether the post was created, published, unpublished, etc. Although a small change, it should hopefully help users manage incoming emails more effectively and not get inundated with a barrage of “Post Status was changed” emails. (Interestingly, I’ve found that this new change comes in handy even on my personal blog which is a simple on-user blog. I find these notifications fairly useful especially since I make aggressive use of WordPress’ future scheduling functionality.)

Additionally, the action links in comment notifications now take the user directly to the editorial comment form (e.g. clicking on “Add editorial comment” will open the post and take to directly to the Editorial Comment form). Again, not a major feature but something that should hopefully save you some time, scrolling and future dealings with Carpal Tunnel.

I’d like to extend this feature even further and allow users to reply to comments via email and not have to go into WordPress to do so. (As you can see, there’s a bit a time-saving trend going on here.)

New widget: Posts I’m Following

Still a little crude at this stage, this new widget gives you a list of the most recently updated posts that you’re following. However, this widget will likely form the basis of the activity stream, which will offer an audit trail of activity happening within the WordPress admin.

Knight News Challenge Round II

While not really a feature introduced in 0.3+, here’s a bit of news that may be interest: we’ve submitted our 2nd round application for the Knight News Challenge. Check out it, vote, and leave us some feedback.

What’s Next?

Apart from some of the ideas already mentioned, with the next couple of Edit Flow releases, you can expect to see some great features such as:

• Post task lists (à la Basecamp, namely a list of tasks that must be completed in order for a post to be published)
• Better Post Management (to help you track and manage your content better, such as snapshots of how far along existing content is)
• HTML emails (because emails should always be pretty – but always fallback to plain text for people still living in the ’90s)

Your Homework

As always, your feedback is much appreciated and vital to our development. Let us know what about Edit Flow works for you and what doesn’t and what else Edit Flow can do to improve your organization’s WordPress experience.

We’ve already had discussions with several online and print publishers and newsrooms interested in adopting Edit Flow and would love to include you in that conversation. Why not get in touch?

Here’s a sneak peek at a plugin I’ve been working on. If you blog using WordPress and you’re a fan of WriteRoom, OmmWriter, or similar tools that help you focus on your words instead of the tools you’re using, then this plugin will soon make your wildest dreams come true (and give you a simple clean environment to write to your heart’s content)! It looks like crap right now, but I’m working on polishing the look and adding some cool features (themes, backgrounds, etc.), and hopefully release something soon.

If there are any features you’d like to see, add a comment or contact moi.

Zen: coming soon to anow available in a WordPress Plugin Directory near you!

Update (2010-01-09): So turns out wpengineer.com had this figured out a while back (i.e. October 2008). Regardless, it was a good opportunity for me to dig into the WordPress core and figure out what’s going on.

---

…or in “proper” English: Feed Killer.

Basically, a small plugin to disable all your feeds on your WordPress install, for whatever crazy reason; we don’t judge (much). This is a result of a question by @wesbos.

There’s also a non-plugin version if you don’t want to go the plugin route (for whatever crazy reason; again, we don’t judge (extensively)). Just add the code to your theme’s functions.php file.

See below or download from gisthub.

Cool concept.

Unfortunately, not British spelling-friendly. And needs more services. And fewer bugs.

But otherwise, really well done.

Here’s a quick tip I picked up from Chris Coyier (the genius behind CSS-Tricks and Digging Into Wordpress).

To help keep variables that contain DOM elements visually distinct from other regular variables, just prepend a $ (dollar sign) to them. Example:

<script type="text/javascript">
// assign the variable
var $div = jQuery('#myDiv');
// Do stuff to it
$div.animate({width: '200%'}, 1500);
</script>

This way, you can easily pick out which variables contain DOM elements when viewing code, without resorting to excessive naming conventions (such as divContainer or divDomObject, etc.). Your code stays clean, lean, and easy to read.

Rock on.

Update: sorry, should have pointed out that this idea was inspired by wireframes posted by Anthony Pesce (of the Populous project).

Here’s an idea that I thought might be a useful addition to Edit Flow especially once we add in User Group functionality. The main premise is to have a full-out User Directory accessible by logged in users that provides easy access to contact information for other users on the site. Would probably only be useful for larger groups using WordPress, but I’d imagine would still come in handy for newsrooms and such.

See the wireframes in full screen mode.