23rd World

I’m a local expert on Walk Score in North Beacon Hill.

When my coworker @gigabo bothers to talk, gold nuggets of dev best practices start dropping left and right. I try write them down quickly to look up later (I always try to RTFM so as to keep the well flowing). I realized I might as well log the fruit of my efforts here…

Today’s nugget:
In reference to the bug that causes default text served to an input to populate again if a user types too fast.

"Oh great, when we fix it, it will be reused by all of our apps – it’s a polyfill fix!"

I thought a polyfill was when you apply color to polygon. Is my front-end background obvious now?

Bo heard it from Paul Irish, the more commonly known gold-nugget dropping web dev.

No need to recreate the wheel, just read this: What is a polyfill?.

Testing the new Walk Score plugin for WordPress (coincidentally, my first publicly released plugin). Below you should see a map showing the White House in Washington DC.

Embed code for the map above:
[walk-score-map address="1450 Pennsylvania Avenue Northwest, Washington DC" format="vertical" size="small"]

Now the Sydney Opera House, following the embed code used to create it:

[walk-score-map address="Macquarie St, Sydney New South Wales 2000, Australia" format="horizontal" size="small"]

Prerequisites / WordPress Dependencies

Local Apache web server with PHP & Mysql.

If you don’t already have your local dev environment set up, consider installing MAMP or MAMP Pro. MAMP is a one-click install which will provide you with a clean, isolated stack for local development that has Mysql and PHP pre-configured. Another benefit of MAMP is that it is very popular so there are countless tutorials and examples to follow.

If for some reason you don’t want to use MAMP or you’ve already configured your local enviro somewhat but you still need PHP and/or MySQL, check out this article: Install and Configure WordPress on Mac OS X Snow Leopard Step-By-Step by awilliams of Thermal Exposure. It takes you from zero to WordPress using Leopard’s built-in Apache server, although I do recommend you supplement these instructions with these tips and my other article Install Mysql for Local Dev on Mac OSX 10.6

Download WordPress

Download and extract the latest WordPress package.

Move it somewhere good like in your /Sites/ folder (most usual place but depends on your config, it can go anywhere you desire so long as your local web server is configured to look there).

I moved mine to /users/me/Sites/wordpress and renamed ‘wordpress’ to ‘wptest.loc’ resulting in: /users/me/Sites/wptest.loc. You can rename it whatever you want – probably the name of your project or client’s site is a good idea.

WordPress needs permission to modify files during installation and runs as user “_www” so make sure it can do this.

cd /Users/me/Sites/
sudo chown -R _www wptest.loc
sudo chmod -R g+w wptest.loc

Create a Database

Now we need a database, a database user and a password. Technically you can use any user or add WordPress tables to an existing database but I like to keep things separate so it’s easy to port elsewhere or start over without worrying about wrecking other things. I’m going to create a database called wptest, database user named wptest_user. You can do this using a GUI (phpMyAdmin, etc.) but I guarantee you cannot do that faster than I can type this ;)

bash > mysql -u root -p
mysql > create database wptest;
mysql > GRANT ALL ON wptest.* TO wptest_user@localhost IDENTIFIED BY "secretpassword";
mysql > exit

Configure Site Address

Remember how I renamed the wordpress folder to wptest.loc? This is because I plan on accessing it in the browser via http://wptest.loc instead of http://127.0.0.1/ or http://localhost.

To do this I use Virtual Hosts in my environment and point the virtual domains to my local IP address in my hosts file. It’s confusing at first but once you do it a time or two it will be second nature. It’s important if you’d like to work on multiple sites on your local environment concurrently and don’t want to rely on weird subdirectories or other work-arounds that wouldn’t easily port to a live web server.

Setting Up Virtual Hosts on MAMP explains how to set this system up. I provide only abbreviated steps below (MAMP not assumed).

Setting up Virtual Hosts (in short)

• In your httpd.conf file there should lines like this:
  

  # Virtual Hosts
  Include /path/to/your/httpd-vhosts.conf

• In your httpd-vhosts.conf file there should be a line like this:
  

  NameVirtualHost *:80
  Include /path/to/your/httpd-vhosts.conf

Create A Virtual Host

Now, whenever you want to create a new virtual (local only) site:

• In your httpd-vhosts.conf file add an entry like this:
  

  <VirtualHost *>
      ServerName wptest.loc
      DocumentRoot "/Users/me/Sites/wptest.loc"
    <Directory "/Users/me/Sites/wptest.loc">
      Order allow,deny
      Allow from all
      DirectoryIndex index.php index.html
    </Directory>
  </VirtualHost>

• In your hosts file (mine is /etc/hosts) add another entry for your local IP:
  

  127.0.0.1    wptest.loc

Install WordPress

Point your browser to http://wptest.loc

If no config file is found you can edit it yourself, wp-config-sample.php as wp-config.php and adding the correct information for the database you created. Try using 172.0.0.1 as the Dataase Host if localhost doesn’t work.

Do not be intimidated, it’s not that hard.

If you don’t mind reading a little documentation, the hardest thing about installing Mysql (IMO) is figuring out what package to install.

If you’ve previously tried and failed (and done who knows what to your local config) or if you don’t have a particular reason not to, why don’t you just get MAMP and skip all this?

USE THIS INFORMATION AT YOUR OWN RISK. Any information found on this website is offered only as informational and includes no warranty, guarantees or support. The author claims no authority on any subject whatsoever.

1. Go to http://dev.mysql.com/downloads/mysql/
   • This will offer latest version (yes, you want the MySQL Community Server, btw) – if you have a good reason, you can access a previous version from here as well.
2. Choose the DMG Archive for your architecture (32-bit or 64-bit). You’ll have to log in or (more likely if you’re reading this article) register with MySQL. It’s annoying but fast and I’ve never received spam from them.
3. After jumping through sign in and mirror download hoops you’ll have a DMG file, something like mysql-5.x.x-osx10.6-x86.DMG which will contain an similarly named .pkg file. That’s all you need. But the most important file is the ReadMe.txt – which is actually useful and contains important steps you need to take. Open the ReadMe.txt.
4. Read the ReadMe.txt file.

Ok, before you get mad at me – a lot of folks don’t provide useful ReadMe files, which is why I think it’s worth calling out in this case. Also, I saw so many tutorials on this, and worse, problems in forums where it was clear they didn’t follow the steps provided. Also, there are docs online that are mostly a repeat of this file – but it’s easy to accidentally read instructions for the wrong product version. So, as we OGs say, RTFM.

Following are notes from my specific install experience. It may be useful for you but you’ll need to verify your own system paths and configuration. Happy databasing!

• Restarted apache a whole bunch, can’t remember when or exactly when you need to but if something doesn’t work, that might help:
  

  sudo apachectl -k restart

• I installed MySQLStartupItem.pkg – while regularly using it this makes sense, and it’s easy to stop auto startup when you’re done working on a project using mysql. Also the commands to start Mysql are much shorter this way and I’m lazy.
  

  $ sudo /Library/StartupItems/MySQLCOM/MySQLCOM start
  (ENTER YOUR PASSWORD, IF NECESSARY)

• Update my PATH environment variable:
  

  //make a back up in case you muck something up
  $ sudo cp /etc/paths /etc/paths_BAK
  // edit your paths file - see vi reference or using pico, vim, emacs whatever
  $ sudo vi /etc/paths
  // insert /usr/local/mysql/bin and then save/quit
  // test result
  $ echo $PATH
  // do you see /usr/local/mysql/bin in there somewheres? good!
  $ mysql
  // is bash prompt replaced with mysql> ? yay!
  

• Create a password for root:
  

  $ mysqladmin -u root password aw3^s0mePAs5

More good notes (for 5.5, be sure to select correct manual option):

• http://dev.mysql.com/doc/refman/5.5/en/macosx-installation-notes.html
• http://dev.mysql.com/doc/refman/5.5/en/macosx-installation-startupitem.html

What Next?

• Login, create a db, do stuff, lern stuff…
  

  $ mysql --help
  
  $ mysql -u root -p
  
  mysql> SHOW DATABASES;
  
  mysql> \h
  
  

• Install a GUI - I like 'em, it's nice for visualization, although I think you definitely learn more & more better if you stick with CLI or at least the query window.
  • Sequel Pro - recently turned onto this. LOVE it. Good review here.
  • MySQL Workbench - the official one. Cause you're a company wo/man!
  • PHP MyAdmin - cause you an OG! And/or you follow or make a lot of tutorials (most apache web hosts provide this).
  • Querious - cause it's worth a few bucks for a nice user experience.
  • Navicat - cause money is no object! (If that's the case, please get me a copy! Love but cannot justify $$ at this time.)

After almost two full weeks of blood, sweat & tears I was finally able to successfully retrieve and display data from a remote MS SQL server from a LAMP via PHP. Tutorial to follow. But in the meantime – SELF HIGH FIVE, yes!

p.s. credit goes to @thesethings for pointing me to that awesome animated GIF!

Summary: If it was just one click I probably wouldn’t be writing about it ;) This is really for the ADD peeps and newbs out there, there’s nothing too challenging about this install.

Here’s a quick guide to starting an Open Atrium (Drupal-based “intranet in a box”) site if you happen to be a lucky Dreamhost customer. Dreamhost just added this feature today and it is pretty slick, but there’s still a couple bits of manual configuration.

Here’s what you’ll get:

How to Install Open Atrium on Dreamhost

1. DH Panel: Go to Domains > Manage > Add New Domain / Subdomain, and create a spot to put your Open Atrium install. For example: oa.23rdworld.com. You can make your subdomain anything you want.
2. DH Panel: Goodies > One-Click Installs > OpenAtrium. Select your new subdomain and leave option set to ‘Automatically create database’.
3. You will receive an automated email from Dreamhost that will include an link to your new site and information about your database that you will need later. Save this info!
4. Set file permissions. Access your server files (FTP or shell, etc) to your new site. Just as the actually quite helpful error message says:

   # Copy the ./sites/default/default.settings.php file to ./sites/default/settings.php.
# Change file permissions so that it is writable by the web server. If you are unsure how to grant file permissions, please consult the on-line handbook

   For you newbs, an easy way to do this is to use an FTP client (like Filezilla) to access your new site.

   • Download /sites/default/default.settings.php
   • Rename default.settings.php settings.php
   • Upload settings.php to /sites/default/
   • Right-click settings.php and select file permissions (in Filezilla, will be similar in other FTP clients) and set it to 744 (server/owner can read-write)
5. Go to your new site, for example: oa.23rdworld.com, this is where the prompts begin. Follow them.
6. You will get an error message (at right) if you skipped the ‘Set file permissions’ step (above). That’s ok, you can just go back and do that now and then click ‘Try again’.
7. Database settings: Fill in the database settings based on the email mentioned earlier. Make sure to open the ‘Advanced options’ menu group and enter the hostname (also provided in the email).
8. The rest of the configuration settings should be pretty obvious.

Hope this was useful for someone, I’m curious to see/hear what folks are using their Open Atrium installs for. Obviously not an intranet…unless you made it private…there’s loads of ways to do that (if there’s interest I’ll expand). I’m using mine to organize house projects with my roommate and husband. What are you using Open Atrium for?

P.s. If anyone is looking to get a new Dreamhost account I have a $100 off invitation if you’re ready to commit to two years and there’s plenty of referral codes out there too, so find one before you sign up!

Having found several requests in the forums and no tutorials online or in documentation, I’ve documented the steps I took to add the TinyMCE editor to my ExpressionEngine wiki.

I am using the EEDocs wiki theme to provide documentation for my users. Here are very quick and dirty instructions to add TinyMCE to your EE Wiki which basically follows the default instructions provided by the TinyMCE Wiki.

• Download TinyMCE, extract it.

• Upload the TinyMCE to your webserver, note the path.

• Find the default PHP file for the EE wiki theme you are using. Mine was in my siteroot/themes/wiki_themes/eedocs/ folder and is called eedocs.php. The default them would be in the themes folder under wiki_themes/default/default.php. Open this in the editor of your choice. You may want to create a backup copy in case you need to revert later.

• Add the following code to the <head> area:

  <script type="text/javascript" src="http://yoursite.com/yourpathto/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

  Note you may want to test that path in your browser and make sure it is linking to the tiny_mce.js path as intended.

• Add the following inline script to the <head> area :

  <script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>

This will turn all of your textareas into TinyMCE editor fields. There are many other ways to configure this, you could specify exactly which textareas to use TinyMCE, for example. For all your TinyMCE customization options, see the TinyMCE wiki and for help knowing where to put what, check out the ExpressionEngine User Guide section on the Wiki Theme Template.

I can’t say I’ve done extensive testing yet, but the default TinyMCE install has not (so far) interfered with wiki markup at all, which is to say that [[Category:Foo::Bar]] and regular [[wiki links]] seem to be working happily.

Screenshot:

Update: Installed the MarkItUp editor in a similar fashion, I like it a lot more than TinyMCE out of the box. May be looking at Textile Editor Helper (TEH) and CKEditor as well, so check back for a WYSIWYG / markup editor showdown. In the meantime, consider what you need a WYSIWYG for and what markup under the hood you’re willing to live with in the long-term before settling on a solution for your site – here’s a good article that sums up that issue: WYSI-dangerous: Why WYSIWYG editors are bad for your website on redcloth.org.

I began investigating the fascinating minutia of RSS when I couldn't find a reasonable answer in the EE forums to why Google Reader was re-posting every updated post on my site even thought the entry dates hadn't changed. As I went through the prevalent templates floating around the EE community line-by-line I noticed several things that could be improved upon. The only critical fix, in my opinion, is removal of seconds from the dates in the <item /> section. If you want your feed to validate you'll want to add the atom namespace. The rest are optional improvements.

If you want to skip the wheres and whys, I've posted the the updated (fixed) and improved RSS templates on Snipplr.com and in their entirety at the end of this article.

Existing RSS templates for ExpressionEngine

• ExpressionEngine > Downloads > Template Library > Feeds - this template will be the basis of my recommendations, most other templates I've found seem to be derivative of this one.
• Customizing ExpressionEngine RSS 2.0 Template - an oft-referred to article at 'A Blog Not Limited' which provides some good updates and tweaks but that still keeps a lot of the original template intact.

Resources

• RSS 2.0 Specification
• Feed Validator
• ExpressionEngine User Guide
  • RSS Module Tags
  • Date Variable Formatting
• EE XML Encode Plugin Information

Methodology

I'm not going for a PHD in online syndication, I just wanted my RSS feeds to be error-free, work as expected in major aggregators and to use best-practices which could be determined within a somewhat low threshold of research pain. In addition to referring first to the RSS 2.0 specifications, I used the RSS feeds of some really large websites to serve as examples, making the assumption (I know) that these sites have probably done thorough research on this topic. Often my choices were the result of seeing if these "big players" were all doing the same thing. All the feeds are major sites with the exception of the Flickr blog. The Flickr blog is using WordPress.com. I figured with their huge user-base not only would the feeds have been thoroughly vetted, most aggregators will be able to read them due to the sheer volume of WordPress-powered sites out there. Also I chose a WordPress.com feed instead of a self-hosted installation of WP to make sure it was the well-tested standard feed. The feeds I used are:

• The New York Times Home Page Feed
• BBC News | News Front Page | World Edition Feed
• CNN.com Top Stories Feed
• MSNBC.com Women's Helath Feed
• Flickr Blog Feed

RSS Feed Breakdown

Feed Format: RSS vs. Atom

As of mid-2005, the two most likely candidates are RSS 2.0 and Atom 1.0. Google reader supports either fully and they suggest choosing one or the other (not both) because most RSS readers support all major formats and offering both can confuse users. The Atom syndication format, whose creation was in part motivated by a desire to get a clean start free of the issues surrounding RSS, has been adopted as IETF Proposed Standard RFC 4287 and is used by Google. However, RSS 2.0 was the first to support enclosures and has captured the podcasting audience and is the recommended format in the iTunes podcasts specs.

I generally do as Google does when it comes to web optimization, and I am a big fan of standards. In some regards I would call Atom "the higher path". That said, I am also a big fan of simplicity and ease-of-use so I'm going with RSS 2.0 because:

• I already hand-built an RSS 2.0 feed for podcasting (well, for iTunes) so would rather learn one standard / keep all feeds similarly formatted.
• One less term that could potentially confuse end-users and "web lite" folk who might inherit my work later on.
• A lot of really big sites that have probably carefully considered this topic went with RSS 2.0, including NYTimes.com, AListApart.com, Ebay.com, news.BBC.co.uk, and CNN.com.

RSS XML Namespaces

Here's where my first change kicks in. If you aren't actually USING a namespace in your RSS feed there's no need to include it - it's just cruft.

Before

<rss version="2.0"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:admin="http://webns.net/mvcb/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:content="http://purl.org/rss/1.0/modules/content/">

After

<rss version="2.0"
xmlns:dc="http://purl.org/dc/elements/1.1/">

Even Better

<rss version="2.0"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom">

The namespaces sy and content aren't used at all and can just be removed. Optional: I chose to remove xmlns:admin="http://webns.net/mvcb/" and the only tag that used it, <admin:generatorAgent rdf:resource="http://expressionengine.com/" /> - removing the admin namespace also eliminated rdf, which admin namespace depends on.

I'm not saying any of the removed namespaces are bad, just unnecessary. For example, admin is a very common namespace, but if you leave it in you should update the URI to include the EE version number (dynamically) and add the <admin:errorReportsTo rdf:resource="URI"/> pointing to a valid email address for errors. It may be beneficial to aggregators in reporting statistical reporting of web frameworks and content management systems delivering aggregated RSS feeds.

I rather admire the efficency and simplicity of the namespace declarations used by NYTimes.com, CNN.com and others - so again, this is personal choice.

The third option (even better) adds the atom namespace. The default EE RSS feed will not validate because it lacks the required atom:link tag containing the URI of the feed itself. There is some debate on whether this is actually necessary (some say the validator is wrong, not the lack of the atom tag)- read the article Adding Atom:Link to Your RSS Feed for background on this.

Depending on your site's content, your SEO practices and target audience, it is likely that you may need additional namespaces. A media-rich site, for example, would benefit from the media namespace. The media namespace is used to syndicate video, images and other media and can open up your feed to consumption by media-rich aggregators and services like Cooliris and Yahoo Video Search.

Channel Area

Most of the default template makes perfect sense - just make sure to take a look at your feed output to make sure all the EE fields used have valid values. Also, make sure you want to the {weblog_foo} tags - if you are providing a site feed that combines multiple sections you will probably want to hand-edit many of the tags in the channel area.

Dates

Important tip: make sure your feed is correctly reporting the timestamp of your entry date. If the seconds are changing on an item whenever you make an update this will cause many aggregators, including Google Reader, to repost the entry to your RSS feed. Either take the seconds off the time or replace '%s' with an arbitrary static value like '15'.

A search for 'RSS Updates' in the EE Forums will reveal that many people have had this problem. I tested all the date fields in my feeds (see this thread for details) and found that although the entry date day, hour and minute doesn't change on update (as expected), the seconds do! This weird behavior has something to do with how the dates are stored in the database and/or how the date is interpreted by EEs date tags. What it means is that if you go back and edit a post from three years ago, some aggregators will repost the item to your RSS feed even though you did not change the entry date. This can be especially troubling if you like to go back and tweak a post a lot right after publishing - you may go to your feed reader to see it reposted several times in a row.

pubDate vs. dc:date

<pubDate> is part of the RSS 2.0 spec. A lot of feeds out there still use <dc:date> and this either because they kept it from their RSS 1.0 template (for which dc:date was the only option) or they really like the very popular Dublin Core namespace or they prefer it because of the ISO 8601 date format which is much more prevalent than the (really old, as in ARPANET old!) RFC 822 date format that <pubDate> uses. On one hand it makes sense to stay with the spec and pull in namespace elements only as required. On the other hand, it makes sense to provide output in the most reusable way (updated date format). Feed readers parse either just fine, so this is judgment call on your part. Here's an agrument for each:

• bradchoate.com/weblog/2003/06/21/rss
• diveintomark.org/archives/2003/06/21/history_of_rss_date_formats

Based on my own survey of the feeds referenced above, I opted to switch to <pubDate>, replacing <dc:date /> in the channel with:

<pubDate>{gmt_date format="%D, %d %M %Y %H:%i:%s %T"}</pubDate>

And replacing <dc:date /> in the item declaration(s) with:

<pubDate>{gmt_entry_date format=&qout;%D, %d %M %Y %H:%i %T"}</pubDate>

Item <title ... />

The default tag is fine, but if your content people keep putting special characters in their titles (like mine do) then you might want to add the protect_entities="yes" attribute to the {exp:xml_encode} tag. For example the main EE site I work on uses &#187; (») and &amp; (&) a lot in titles.

Even after protecting entities I was still having a heck of a time getting a trademark (™) symbol that is used on a site in many post titles and in a category to consistently display on both the webpage and in RSS feed aggregators - after some digging I realized the character entity that was being used (&#x2122;) for it was not the UTF-8 reference (&#8482;) specified as the encoding for both the RSS and XHTML. So, make sure you (or your content editors) use the correct character encoding entities for special characters!

Item <guid ... />

As formated in the official EE RSS template the <guid> is not a permalink, and therefore should have isPermaLink="false" attribute added to it. Of course you could use your actual permalink and then you could leave that off or change it to "true".

"We recommend the use of the Atom and RSS 2.0 elements to unambiguously identify items. An item that is updated should keep its original ID, and a new item should never reuse an older item's ID. Changing IDs unnecessarily may result in duplicate items, and reusing IDs may cause some items to be hidden. "Tag URIs" make good IDs, since they don't change even when you need to reorganize your links." - Google Reader Tips for Publishers > Implementing Feeds

The above recommendatio explains the multi-posting of an entry on update issue I referred to earlier. Because of this, you will probably want to remove the '%s' from the formatting attribute as well. So, change the gmt_entry_date format string in the <guid> line to "%H:%iZ".

Optionally, you could just use the actual URI of your article and change the isPermalink attribute to true. EE won't let you post two items with the same URL title within a weblog/channel, so you are pretty safe there (EE adds a number to the end of URL title if one already exists).

Item <description.../>

This line is technically fine, but most people will change this to allow HTML formatting of their entries: <description><![CDATA[{summary}{body}]]></description>. This is what displays the bulk of your entry item and where most of your site-specific customization will happen, Customizing ExpressionEngine RSS 2.0 Template on 'A Blog Not Limited' is a great resource for this.

Categories

The template uses <dc:subject>. Your feed will be more interoperable with other systems and make more sense programatically if each category is in its own tag. You can do this using the <dc:subject> format, or you can switch to using the <category> tag for each as provided for in the RSS 2.0 spec.

Original Template

Code:

<dc:subject>{exp:xml_encode}{categories backspace="1"}{category_name}, {/categories}{/exp:xml_encode}</dc:subject>

Result:

<dc:subject>Architecture, Science, Workplace</dc:subject>

Separate using <dc:subject>

Code:

{categories}<dc:subject>{exp:xml_encode}{category_name}{/exp:xml_encode}</dc:subject>{/categories}

Result:

<dc:subject>Architecture</dc:subject>
<dc:subject>Science</dc:subject>
<dc:subject>Workplace</dc:subject>

Separate using <category>

Code:

{categories}<category>{exp:xml_encode}{category_name}{/exp:xml_encode}</category>{/categories}

Result:

<category>Architecture</category>
<category>Science</category>
<category>Workplace</category>

Updated EE RSS 2.0 Template

This includes what I consider minimal mandatory fixes to ensure error-free code and to prevent (re)posting problems.

{assign_variable:master_weblog_name="blog"}
{assign_variable:master_weblog_status="open"}
{exp:rss:feed weblog="{master_weblog_name}" status="{master_weblog_status}"}

<?xml version="1.0" encoding="{encoding}"?>
<rss version="2.0"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:admin="http://webns.net/mvcb/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    <channel>
    <title>{exp:xml_encode}{weblog_name}{/exp:xml_encode}</title>
    <link>{weblog_url}</link>
    <description>{weblog_description}</description>
    <dc:language>{weblog_language}</dc:language>
    <dc:creator>{email}</dc:creator>
    <dc:rights>Copyright {gmt_date format="%Y"}</dc:rights>
    <dc:date>{gmt_date format="%Y-%m-%dT%H:%i:%s%Q"}</dc:date>
    <admin:generatorAgent rdf:resource="http://expressionengine.com/" />
{exp:weblog:entries weblog="{master_weblog_name}" limit="10" rdf="off" dynamic_start="on" disable="member_data|trackbacks" status="{master_weblog_status}"}
    <item>
      <title>{exp:xml_encode}{title}{/exp:xml_encode}</title>
      <link>{title_permalink=site/index}</link>
      <guid isPermaLink="false">{title_permalink=site/index}#When:{gmt_entry_date format="%H:%iZ"}</guid>
      <description>{exp:xml_encode}{summary}{body}{/exp:xml_encode}</description>
      <dc:subject>{exp:xml_encode}{categories backspace="1"}{category_name}, {/categories}{/exp:xml_encode}</dc:subject>
      <dc:date>{gmt_entry_date format="%Y-%m-%dT%H:%i%Q"}</dc:date>
    </item>
{/exp:weblog:entries}
    </channel>
</rss>
{/exp:rss:feed}

Improved EE RSS 2.0 Template

This includes optional changes that I added as a result of various articles, the RSS 2.0 spec and by examining the feeds of major professional news sites.

{assign_variable:master_weblog_name="BLOG"}
{assign_variable:master_weblog_status="OPEN"}
{assign_variable:master_rss_uri="http://PATH/TO/THIS/RSS/FEED"}

{exp:rss:feed weblog="{master_weblog_name}" status="{master_weblog_status}"}
<?xml version="1.0" encoding="{encoding}"?>
<rss version="2.0"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
    <title>{exp:xml_encode}{weblog_name}{/exp:xml_encode}</title>
    <link>{weblog_url}</link>
    <description>{weblog_description}</description>
    <dc:language>{weblog_language}</dc:language>
    <dc:creator>{email}</dc:creator>
    <dc:rights>Copyright {gmt_date format="%Y"}</dc:rights>
    <pubDate>{gmt_date format="%D, %d %M %Y %H:%i:%s %T"}</pubDate>
    <atom:link href="{master_rss_uri}" rel="self" type="application/rss+xml" />   
{exp:weblog:entries weblog="{master_weblog_name}" limit="10" rdf="off" dynamic_start="on" disable="member_data|trackbacks" status="{master_weblog_status}"}
    <item>
      <title>{exp:xml_encode protect_entities="yes"}{title}{/exp:xml_encode}</title>
      <link>{title_permalink=site/index}</link>
      <guid isPermaLink="false">{title_permalink="site/index"}#id:{entry_id}#date:{gmt_entry_date format="%H:%i"}</guid>
      <description><![CDATA[{summary}{body}]]></description>
      {categories}<category>{exp:xml_encode protect_entities="yes"}{category_name}{/exp:xml_encode}</category>
      {/categories}
      <pubDate>{gmt_entry_date format="%D, %d %M %Y %H:%i %T"}</pubDate>
    </item>
{/exp:weblog:entries}
    </channel>
</rss>
{/exp:rss:feed}						

Feedback

Please let me know if you have any suggestions for improvements on the basic template. I have already submitted these suggestions (as have others) on the EE Forums and I hope this article will soon be out-dated. For further information on customizing your RSS feed including adding Google Analytics tracking and additional fields such as author name, see Customizing ExpressionEngine RSS 2.0 Template at 'A Blog Not Limited' (if you use their updated template don't forget to remove the seconds from date fields in the item section).

This post originally appeared on my personal blog in March of 2005. It is till useful a half decade later, so finally posting it here. This code is also available on Snipplr as well.

Any spambot worth its salt spawned by evil genius could "guess" email addresses by skimming for all 'alias@'s and automatically concatenate them with the site's url base and any other domains found on the page, so in the javascript I separate the '@' from the alias.

Enough about the wheres and whys, here's some cut n' paste fun for your use. This code will use javascript to display a normal, clickable mailto: link on your page and if javascript is turned off you still get a screen-readable, selectable email address displayed using a CSS trick.

<style type="text/css">
.backwards {
unicode-bidi:bidi-override; direction: rtl;font-weight:bold;
}
</style>
<script type="text/javascript">
<!--
linkAddy=('alias' + '@' + 'yourdomain.com')
document.write('<a href="mailto:' + linkAddy + '">' + linkAddy + '</a>')
//-->
</script>

<noscript>
<p>Please email me at
<strong><span class="backwards">moc.niamodruoy@saila</span>
</strong>.<br /></p>
</noscript>

Here's a version for you really paranoid folks that don't want live links at all (or maybe you just want a tiny user obstacle to ensure necessity of correspondence), but you do want your email address to appear correctly if possible but with better protection, plus insurance if javascript is turned off:

<style type="text/css">
.backwards {
unicode-bidi:bidi-override; direction: rtl;font-weight:bold;
}
</style>
Please email me at
<span class="backwards"><script type="text/javascript">
<!--
backAddy=('moc.niamodruoy' + '@' + 'saila')
document.write(backAddy)
//-->
</script></span>
<noscript><strong>alias at
yourdomain dot com</strong></noscript>

Here's a working example:

Please email me at

Here's a few other ways to protect email addresses from spam bots. If you have a preferred method not listed here, please let me know in the comments.

• Graceful Email Obfuscation article from A List Apart takes it up a notch, with an htaccess rewrite and redirect. Could be worth setting up for a large site where you need to add email links quickly and easy.
• Hivelogic Enkoder Form - use their form to generate some javascript. Works great but relies on javascript to work.
• Addressmunger.com - uses ASCII, JavaScript, and scrambling of letters in your email address.
• K'nechtology Email Encryption - encodes email addresses in to hexadecimal values. This isn't very secure as it would be extremely easy for a bot to decode hex.