Category Archives: Web Design Software

Lowdown Plugin for Movable Type

Posted on by

While this blog uses WordPress, at work I still have a few sites built using Movable Type. One of those sites is an events calendar, and I had been working on a iCAL template so that I could easily import the events into other calendars. Getting the file to work with “iCalShare”:http://www.icalshare.com/ was pretty easy, but one of the older systems at work was a bit fussy. It didn’t like any of the special characters, like accented vowels or curly quotes that invariably crept into the event descriptions.

I spent quite a while looking for a way to remove all of these characters, but all the existing plugins and filters seemed to leave some of them behind. I spent some time thinking about using Brad Choate’s “Regex plugin”:http://www.sixapart.com/pronet/plugins/plugin/regex.html, but after double-checking “Movable Type’s Global tag attribute filters”:http://www.sixapart.com/movabletype/docs/3.2/b_global_filters/ I found what I was looking for. Sort of.

bq. _dirify_ also converts certain high-ASCII characters (accented characters, etc) to low-ASCII characters, meaning that something like crudité will be converted to crudite. For example, if the value of the tag without this attribute were Foo “Baz” is< br /> Bar!, the dirified version would be foo_baz_is_bar.

Yes — that’s what I wanted, but without the underscores, and usable for much longer blocks of text.

Fortunately “Adam Kalsey”:http://kalsey.com/blog/ and “Crys Clouse”:http://www.sixapart.com/pronet/plugins/plugin/dirifyplus.html had written code to improve the dirify feature, and using that as a starting point I made the changes to create the new global filter I needed. Something that would convert the high-ASCII characters down to low-ASCII, and strip out all the extra characters and line-breaks I didn’t need.

Lowdown.pl
_Version 1.0_
Lowdown removes extra information to displays plain text in Movable Type. It converts certain high-ASCII characters (accented characters, etc) to low-ASCII characters, strips HTML tags, and changes line breaks to spaces.

Installation: save Lowdown.txt as Lowdown.pl and upload it to your Movable Type ‘plugins’ directory

Usage Example: < $MTEntryBody lowdown="1"$>

This can be helpful when generating some types of feeds (eg. iCAL, RSS). If anyone is interested, I could also post the iCAL template for Movable Type that I developed that uses the Lowdown plugin.

Update

You can now get the lowdown directly from Six Apart’s Plugin Directory.

X-Ray Update Displays ID and Class Attributes

Posted on by

It’s been a couple of week’s since I posted an update — and time to get things back in gear.

Here’s another update to the X-Ray Extension, bringing us up to version 0.7 and adding display of class and id attributes for elements. This was a frequently requested feature, and now that it’s added I think it really adds to the extension. X-Ray will show the tags, class and id names for content generated by external javascript files, which makes integrating generated content like news feeds into your site’s design a bit easier.

The update.rdf file seems to be behaving a little unpredictably, so if Firefox doesn’t tell you an update to the extension is available you can install from here:

Install Extension Install X-Ray Extension for Firefox

X-Ray is now available from the official “Firefox Add-ons”:https://addons.mozilla.org/extensions/moreinfo.php?id=1802&application=firefox site as well, for the people who only install extensions listed there. As of this post they’re still showing version 0.6, but 0.7 should be available soon.

Thanks again for all the support. :-)

X-Ray Extension Updated

Posted on by

For everyone who has been patiently waiting for the X-Ray extension to be updated to work with Firefox 1.5.0.1 — here it is! This new version includes several enhancements:

* Support for a wider range of XHTML elements
* Can now be toggled on and off without reloading the page
* No longer interferes with the keyboard shortcut to cut text

Install Extension Install X-Ray Extension for Firefox

Thanks to all the people who emailed with suggestions for improvements or offered code optimizations. “joh6nn” and “dragonchaos” deserve special acknowledgement for their help.

Donations to The X-Ray Tip Jar are greatly appreciated.

Features to be added in future versions:
* display self terminating tags correctly
* identify deprecated elements
* identify elements incorrectly placed on the page (head content inside the body)
* _possibly display additional information about the tag such as class and id_

11 Essential WordPress Plugins

Posted on by

WordPress is a great tool for blogging — it’s easy to setup, the interface makes it easy to use, and there are tons of plugins you can download to add new features. Unfortunately when you’re just getting started with WordPress, the sheer number of plugins can make it hard to know which ones to start with.

After more than a little trial and error and a lot of looking at discussions of other people’s favourite plugins, I’ve found 11 that seem to stand above the rest. Here are my suggestions for the 11 plugins you should consider adding to your blog.

# “Adsense-Deluxe”:http://www.acmetech.com/blog/adsense-deluxe/
Place Google AdSense ads in your posts, or as part of your template. This plugin ensures you do not have more than 3 ads displayed at once — part of Google’s terms of use.
# “del.icio.us – Bookmark this!”:http://www.arnebrachhold.de/2005/06/05/delicious-bookmark-this-wordpress-plugin
This plugin lets you easily add a “Bookmark this page on del.icio.us” link to your blog or individual articles. Del.icio.us is a personal favourite, and a great way to save, organize and _find_ new links.
# “Digg This”:http://www.aviransplace.com/index.php/digg-this-wordpress-plugin/
Detects if one of your articles has been linked on digg.com and adds a link to the entry. This might not be as useful for blogs that are unlikely to ever be bookmarked there — but for me it’s a nice find.
# “Google Sitemaps”:http://www.arnebrachhold.de/2005/06/05/google-sitemaps-generator-v2-final
This generator will create a Google compliant sitemap of your WordPress blog. Having a Google sitemap can help keep your site as up-to-date in Google’s indexes as possible.
# “Feedburner Feed Replacement”:http://www.orderedlist.com/articles/wordpress_feedburner_plugin/
Forwards all feed traffic to “Feedburner.com”:http://www.feedburner.com so you can make use of their various advanced features for feed presentation and subscriber analysis.
# “Gravatar”:http://www.gravatar.com/implement.php#section_2_2
Show the custom icons associated with the email addresses of users commenting on your entries. This is a great service more people should sign up for.
# “Head META Description”:http://guff.szub.net/head-meta-description/
Some search engines display the Description meta data for a page in search results. Since WordPress normally uses the same meta data for all the pages on your site, this is a problem. This plugin builds a dynamic Description meta tag for each entriy based on the page content itself.
# “Optimal Title”:http://elasticdog.com/2004/09/optimal-title/
Moves the position of the ‘separator’ to after the title rather than before, letting you put the title of your post before your blogs name in the _title_ tag for an entry.
# “Related Posts”:http://www.w-a-s-a-b-i.com/
Displays a list of related entries based on keyword matches. This is a good way to encourage visitors to read more of the content on your blog.
# “WP-Amazon”:http://manalang.com/wp-amazon
WP-Amazon adds the ability to search and include items from Amazon to your entries. Great if you’re an Amazon affiliate, but also a good way to add some extra images to your blog entries.
# “WP-ContactForm”:http://ryanduff.net/projects/wp-contactform/
This plugin creates a drop in form for users to contact you. It can be implemented on a page or a post.

New Firefox Extension: X-Ray

Posted on by

One of my “New Year’s resolutions”:http://www.designmeme.com/2005/12/30/new-years-resolutions-for-2006/ was to create an “interesting script, plugin, extension, or widget.” I didn’t think I’d write a Firefox Extension only six days into 2006, but after writing about using the CSS :before and :after pseudo elements to create “CSS Curly Quotes”:http://www.designmeme.com/articles/csscurlyquotes/, it got me thinking about other uses for that technique. I thought that wrapping the elements on a page with the actual tags from the sourcecode might be a good tool for learning and debugging, but wasn’t sure how to go about creating an extension. Fortunately, I found “a great tutorial at roachfiend.com”:http://roachfiend.com/archives/2004/12/08/how-to-create-firefox-extensions/ and with a little trial and error, I’ve finished my first extension.

The “X-Ray Firefox Extension”:http://www.designmeme.com/xray/ let’s you see the tags on a page without viewing the sourcecode.

Install Extension Install X-Ray Extension for Firefox

One installed the X-Ray command is available by right-clicking as well as in the Tools menu. When applied to a page it can help you see how the document was constructed without having to go back and forth between the sourcecode and the page in your browser. Is that list made of li dd or p elements? Is that an h3 tag or just some bolded text? X-Ray shows you what’s beneath the surface of the page.

While I create webpages all the time, there’s something about writing a piece of code you have to _install_ that’s very satisfying. Even better was finding that it was actually something I’d find helpful myself.

For version 0.5 the current list of supported tags is: h1, h2, h3, h4, h5, h6, p, ol, ul, li, dt, dd, font, div, span, blockquote, pre, a, b, i, strong, em. If some other people find this extension useful, I’ll probably add support for more tags, and possibly experiment with adding some other enhancements as well.

Update

By request from the nice folk at digg.com here’s a screenshot of the extension in use:

Screenshot of X-Ray Firefox Extension in use

Donations to The X-Ray Tip Jar are greatly appreciated.

Thanks for your support!