Plugin Preview: HTML Emails for WordPress
HTML emails from WordPress? Yes, please!
Coming very, very soon!
Recent Updates Page 6 RSS Toggle Comment Threads | Keyboard Shortcuts
-
Mohammad Jangda
-
Mohammad Jangda
PHP Magic: Building a static countdown clock using PHP and GD
Update (2010-04-20): These Gleeks are crazy. Since being released, the clock has been viewed over 200,000 times. Insane.
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.
-
Mohammad Jangda
jQTouch: Tap vs Click
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>-
rblon
It appears that if you have <a href=”…” rel=”nofollow”> that, with an iPhone, tapping does activate the link, but not the click event. So
“You could just make things easy on yourself and use clicks across the board”
actually doesn’t hold (assuming you want the event handler to run). So to me it seems you always have to include this bit of code.
-
rblon
sorry for the formatting of my previous comment (I had included example html code).
It should say:
It appears that if you have “an anchor tag with href”, that, with an Iphone….
-
John
I run code on a real iPhone / iPod Touch / iPad, but also find that it’s useful to run the same code in Safari (in emulation mode), and in the iPhone simulator (which seems not to handle tap!!??).
So I’m doing something like this:
var isRealMobile = (userAgent.indexOf(‘iphone’) != -1 ||
userAgent.indexOf(‘ipod’) != -1 ||
userAgent.indexOf(‘ipad’) != -1) &&
userAgent.indexOf(‘safari’) == -1 && userAgent.indexOf(‘simulator’) == -1;
var touchEvent = isRealMobile ? ‘tap’ : ‘click’;$(“#something”).bind(touchEvent, something);
Here are the user agent strings I looked at:
Safari emulating:
Mozilla/5.0 (iPod; U; CPU iPhone OS 3_1_3 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7E18 Safari/528.16Simulator:
Mozilla/5.0 (iPhone Simulator; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Mobile/8A293Real iPhone:
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Mobile/8A293 -
Tumble Weed
Sooooooooooo much appreciated!!!!!
-
Michael
All, the very good advice of John, but I wonder is it a good idea to track ipod ipad and iphone via indexOf. What if Apple added another mobile, iSomething? Would it not be better to track AppleWebKit.*Mobile using a regexp?
-
Michael
Another thing I found is that on the desktop safari with emulated iphone i had to use “click” and not “tap”. Since I debug on my local host, it is enough to exclude localhost
-
David Mark
The cross-browser solution is to attach both click and tap listeners and cancel one of them the first time through. You know you will get a tap first, so remove the click listener on tap. If the click listener fires, remove the tap listener.
All of this UA sniffing is for the birds (as you have found out).
-
Chris
I use something similar, checking for iPhone, iPod and iPad, as well as simulator and general mobile devices
var userAgent = navigator.userAgent.toLowerCase();
var isMobile = (userAgent.indexOf('iphone') != -1 || userAgent.indexOf('ipod') != -1 || userAgent.indexOf('mobile') || userAgent.indexOf('ipad')) ? true : false;
clickEvent = isMobile ? 'tap' : 'click';
-
Oskar
You have an error in your code:
$(‘#mylink’).bind(clickEvent, function() {
e.preventDefault();
alert(‘Yay! You just ‘ + clickEvent + ‘ed me!’);
});It should be:
function(e)
-
-
Mohammad Jangda
Introducing Zen: Distraction-free writing for WordPress
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.
-
Mike Smith
Looks really nice. For those writers who use wordpress and have custom fields to fill out as well as other tasks like adding tags, categories, images as they go along, it might not be for them – but I’m definitely going to try it out and see how it works. Thanks for creating it.
-
Mohammad Jangda
Thanks Mike. I was originally considering including some of the post editing boxes such as categories, tag, custom fields, but realized that would somewhat defeat the purpose of the plugin.
The way I envision it being used is people use Zen to focus on their writing and once done, they can use the regular view to add custom fields, images, and so on.
-
Eugenia is discussing. 
Chris, 
Mohammad Jangda
jQuery.data() = love
Why did I never know about jQuery.data()?
More details to come about fun things you can do with it.
Mohammad Jangda
Edit Flow v0.3: Usergroups and improved notifications
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?
Mohammad Jangda
Distraction-free WordPress-ing
Zen: distraction-free writing for WordPress.
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!
Mohammad Jangda
WordPress plugin: Feedkillah
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.
Mohammad Jangda
flavors.me
Unfortunately, not British spelling-friendly. And needs more services. And fewer bugs.
But otherwise, really well done.
Mohammad Jangda
jQuery tip: Visually separating DOM elements in code
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.
Eugenia 2:12 pm on March 26, 2010 Permalink |
How can i put this on my facebook profile?