Mephisto Theme Gallery

What started as a 5 minutes hack a few weeks ago is now a reality. I’ve put together a new gallery, and unlike many other galleries, you get to see all the existing themes for Mephisto as they would appear in a real Mephisto installation, because that’s where they all run. All sites show the same content, which makes it really easy to find out how each one treats sections, static pages, comments, sidebars, etc.

To the best of my knowledge, this is the most extensive collection of Mephisto designs to date! It contains 34 templates (and would contain more if it was not for the fact that the license did not allow for free redistribution).

Some may require extra Mephisto plugins such as the ERB, Erubis or HAML renderers. Speaking of HAML, I’m going to be releasing a new template within a few days to demonstrate how you can use the HAML renderer for Mephisto.

I’m also officially introducing a new Mephisto theme: Cutline, very accurately translated from the original Cutline Template by Chris Pearson. This is a gorgeous design, with a clean layout, plenty of white space and very precise typography.

I’ll be posting some more details in the following days about why that 5 minutes hack turned out into a much bigger project, but I think the result is quite impressive, and a hats off to Rick for creating an impressive blog engine.

Bookmark It! Rails plugin for adding bookmarklets.

A while back I wrote BookmarkIt! , a social bookmarllet plugin for Typo, and it worked for a while, but the Typo plugin API changed, and changed again, and again, and keeping up was no fun. So since then, I’ve already changed my approach for my TextLinkAds plugin and instead wrote a bona fide rails plugin, and since Typo 4.0.3 broke the plugin one more time, it was time to take the same route.
Morevover, the previous version did not allow for putting the Bookmkarlets inline with the post and this new version addresses that also. It is now a real Rails plugin, useable in any Rails app.

How to Get the plugin

script/plugin install

or to use svn:externals to get updates

script/plugin install -x

The install will automatically copy the config file, the images, the css and the partial in their final location. If you delete these files, you can reinstall with:

script/plugin install --force

How to configure the plugin

To configure, edit the file config/bookmarkit.yml to change the title and select which bookmarklets you want displayed.

title: Bookmark It!
delicious: true(default)/false
digg: true(default)/false
reddit: true(default)/false
blinklist: true(default)/false
dzone: true(default)/false
newsvine: true(default)/false
furl: true(default)/false
spurl: true(default)/false
simpy: true(default)/false
fark: true(default)/false
blogmarks: true(default)/false
myweb2: true(default)/false
wists: true(default)/false

How to use the plugin

To use, inside any view (.rhtml), use:

<%= render_BMI(title, url) %>

For example, in Typo, you would include the following in app/views/articles/read.rhtml

<%= render_BMI(@article.title, @article.location) %>

For finer control of the rendering, it also copies a css (bookmarkit.css) to public/stylesheets. To use, include in your main layout with:

<%= stylesheet_link_tag "/stylesheets/bookmarkit" %>

Adding more bookmarklets

All the bookmarklet html is in the _bookmarkit.rhtml partial.

For example, for BlinkList, I’ve used:

      <a style="font-size:22px;" title="Blink '<%= title %>'" href="<%= url %>&Title=<%= title %>">
            <img style="border:0;" hspace="3" class="bookrmarkit" alt="Blink" title="Blink '<%= title %>'" src="/images/bookmarkit/blinklist.gif" />

You should also add an entry in bookmarkit.yml

If you want more bookmakrlets included, submit your patches in the comments or send to psq_at_no_spam_nanorails_dot_no_spam_com.

Adding CodeHighlighter to Typo

Recently, I ran across CodeHighlighter by Dan Webb. This looked like a pretty cool javascript, and I thought a better way than to do it on the server side.

Adding it to typo is fairly straightforward, baring a small patch.

Get the code

Get it from Dan’s site via subversion:

svn co

Adding CodeHightlighter to your template

Add to your template (themes/[YOUR THEME]/layouts/default.rhtml)

<%= javascript_include_tag "code_highlighter" %>
<%= javascript_include_tag "javascript" %>
<%= javascript_include_tag "css" %>
<%= javascript_include_tag "html" %>
<%= javascript_include_tag "ruby" %>

The code as provided by Dan has a small incompatibility with prototype used by Ruby on Rails. The following line

for (var i in this.styleSets) highlightCode(this.styleSets[i]);

behaves quite strangely and will pretty much kill your browser (Firefox runs out of memory and displays a bunch of “undefined” after several minutes) because it ends up calling hightlightCode way too many time because of all the methods added to all objects.

To make codehighlighter.js play nicely with prototype.js, replace that last line with:

if (this.styleSets.each) {
} else {
    for (var i in this.styleSets) {

Essentially, if prototype is present, we can use each to iterate on the styles, otherwise it is safe to used the old code.

Using Codehightlighter

Now, addng styling is easy. Using Textile, you can just put your code around a <pre> and a <code> block. If you have a javascript snippet, use a class of “javascript”.

For example:

<pre><code class="javascript">
if (this.styleSets.each) {
} else {
    for (var i in this.styleSets) {

The other available styles are “html”, “css” and “ruby”.

For example, here’s how ruby would look like:

  def display_article(article = nil)
      @article      = block_given? ? yield : article
      @comment      =
      @page_title   = @article.title
      auto_discovery_feed :type => 'article', :id =>
      render :action => 'read'
    rescue ActiveRecord::RecordNotFound, NoMethodError => e
      error("Post not found...")

And it looks easy to create other styles. See the stylesetguide.html file for details.

Update: Turns out Dan already had a fix, so if you grab the trunk, you will be fine.

Here’s his version of the patch:

    for (var i=0; i < this.styleSets.length; i++) {

Javascript console

Javascript is great when it works. When it doesn’t work, it can get you from happy to miserable in less time than it takes you to say XmlHttpRequest.

Today I just found (via Ajaxian) an interesting tool that I’m adding to my arsenal when it comes to figuring out what’s happening in javascript. Definitely an invaluable debugging tool. It is called JavaScript Shell. When you embed the script, you get a command line window where you can make javascript calls directly from inside your web page.

You can call any method, inspect objects (using props), see where DOM objects are (using blink), and the killer feature, in my view, is the autocompletion using the tab key! It also features a command history, which is very convenient to try variations of the same call.

And if that wasn’t enough, you can also use the script as a bookmarklet. There is a Firefox version, and an Internet Explorer version available from Curiosity is bliss (ported to IE by Julien Couvreur).

You should try the script for yourself.

This is a great tool to debug, or even try a few things quickly and this will be a good complement to the rails console. It sure beats having to reload the page!

CSS hacks for IE7

Nano See, Nano Doo has a few interesting hacks for IE7 that apply to IE7 only. The major one centers around the * html quirk that has been fixed, and it offers an alternative.

That is, if you have to use a hack. I personally prefer to put my IE specific bits in a separate css with a conditional include from the html. But sometimes, it is just easier not to have to bother with the extra machinery.

Via cssBeauty

Plus, I really like the name “nanobox” ;)

Struggling with color?

Can’t get a color palette to look just right? It takes a lot of trial and error to find the right colors. And you are probably not alone!
That’s why ColorsOnTheWeb has the perfect set of tools for you. You can start from a color and get interesting combinations (opposite, complimentary, analogous, play on tint and saturation and a whole lot more (well, don’t try with pure white: ffffff, you’ll get an overflow).
They also have a color wheel spinner where you can explore sets of 3 colors that should play well together. As you explore, you can lock colors you like till you get a pleasing set of 3.
And they also have a lot of good background information about color, how it is rendered on screen and such.

Working around IE selection bug

The most common source of that problem, according to few searches on google seem to point to using absolute positioning. This was not an explanation that I found too satisfying, first because I was not about to change my layout, and second because most of the references were at least 3 years old.

So I kept digging, and came accross an other solution from Tom Muck in Fix for IE selection bug. Unfortunately, this did not apply for me.

And finally, I found the most conspicuous post on the drupal site where if you don’t use the form

<link .../>

instead of

<link ...></link>

this will be enough to break internet explorer. Who would have thought! Well, maybe by now I should now better.

And the worst part of that? Well it was the second time in 2 months I needed that, and for the life of me, I could not remember what I had done the first time around. So unless this server crashes too, I’ll know where to find the solution next time.

footerStickAlt revisited

Here’s the html used here

  <div id="wrapper">
    <div id="blog-header">
    <div id="main-wrapper">
      <div id="sidebar">
      <div id="main-content">
    <div id="main-bottom-space">&nbsp</div>
  <div id="footer">

and the css used here:

body {
/* force footer to stick at bottom */
height: 100%;

/* avoid trampling on the footer by reserving some space (IE) */
#main-bottom-space {
height: 26px;
clear: both;

#wrapper {
position: relative;
/* force footer to stick at bottom */
height: 100%;

#main-wrapper {
position: relative;

#main-content {
float: left;

#sidebar {
float: right;

#footer {
clear: both;
/* stick at bottom */
height: 26px;
position: relative;
margin-top: -26px;

The key difference is to add the #main-bottom-space <div> element.