Blog RSS 532 posts

Raven: My Custom Theme (Templates) for Munin

Posted by jeremyclarke on February 19, 2011 · design · General

This post is about Munin and the custom theme I built for it, Raven.

Click here to skip to the download and installation instructions if you just want the theme »

Click here if “Load average” means nothing to you.

What is Munin and why am I bothering with it?

Munin is a program you install on servers to track their resource usage and application performance on a minute-by-minute basis and present you with graphs giving tons of detail about it’s status over time (each report can be viewed for daily, weekly, etc.) It has lots of core and community-built plugins to track different server applications and different aspects of a server’s health.

The basic idea is that you install a ‘node’ on each server you want to keep track of, then one ‘master’ that queries the nodes and generates the graphs for you. I’ve had it recommended to me by pro sysadmins a few times in the past but was intimidated by the complexity of installation and the inscrutability of the resulting graphs, which depend on you having pre-existing knowledge of the command-line tools who’s output they aggregate. Oh, my iostat is up… um… what do I do about that?

The best guide to understanding and installing Munin I found was this great set of articles on the Slicehost blog. They are intended for Slicehost customers, but seem to apply pretty well to anyone using the Linux distrubutions they cover.

The problem with Munin and it’s Theme ecosystem

So I got it running and am trying to figure out how to read the information it presents but there’s a problem: It’s woefully, sinfully and abysmally ugly. The web pages output by munin are not just composed on 90’s style tables, they are ugly tables, with tiny text and wasteful spacing.

It seems the sysadmin crowd just doesn’t care about these things, because even though there is a really easy system for modifying and restyling the underlying HTML and CSS there is only one alternate template available on the whole internet! You can find it here in the Munin docs but it is almost as ugly as the default and the way you install it is completely counterintuitive and under-explained. On the bright side it has some really useful javascript features that the default doesn’t, if you can get it to work that is.

FWIW I don’t even know how to refer to this. The files themselves are called ‘templates’ in various places on the Munin site, but IMHO the package as a whole should be called a “theme”, at least that’s how we do things in WordPress land. I tried to use both in this post so people find this post, but I’ll call it ‘theme’ from now on.

My Munin Theme: Raven

Screenshot of Raven theme

Screenshot of Raven. Click to enlarge. Compare with screenshot of alt-default theme.

My answer to this problem is a new theme based on the javascript-enabled alternative from the Munin site. I call it Raven because Munin is named after a Raven ally of Odin, Norse king of the gods. Essentially it’s just the default theme with 80% of the ugly removed and a grey and white facelift. There is still a lot of work that could be done to actually fix all the ugly-ass HTML, but I want to see if this gains any traction before putting in the time.

Features of Raven compared to the default theme:

  • Javascript-enabled so the various sections of the ‘overview’ page are in tabs at the top instead of one never-ending page. (this is the most important usability improvement)
  • Larger text all over to actually use up all the empty space created by the unavoidably-large graph images.
  • Reduced unneeded spacing and <hr> tags that just added noise.
  • Calm light-grey colors and rounded corners to soothe your mind while you toil over server performance.
  • Readme/installation instructions in the .zip file.

Download Raven theme

munin_templates_raven_0.1.zip

If I get good feedback about this I’ll post it on the official Munin Wiki, but for now you can grab the zip file above. Please take a look at the contents and read the README-INSTRUCTIONS.txt file before installing the theme.

Installation Instructions

The README-INSTRUCTIONS.txt file contains all the information you need to use Raven, including detailed instructions with background information about the locations you need to upload files to. Here is the summarized instructions so you can get a sense of how simple installation is:

  • Upload the “templates_raven” directory from this zip file into your Munin config directory (i.e. same directory that munin.conf is in, probably /etc/munin/)
  • Upload the ‘raven-htmldir-files’ directory from this zip file into your Munin HTML directory (where the public HTML is served from).
  • Edit your “munin.conf” file on the master and change the “tmpldir” property to reference the new “templates_raven” directory in your Munin config directory instead of the default “templates”.
  • Wait 5 minutes for the Munin master to refresh itself and reload.

Feedback? Thanks? Bugfixes?

Obviously this is my first attempt at a Munin theme and there is not a lot of other examples to emulate, so I may have done something horribly wrong. If you have questions or comments please use the comment form below to let me know about them.

I will try to get back to you ASAP but be warned: I am not going to support your Munin problems for you. I am sharing this theme to give back to the community, but if your problem is complicated I may not be able to help.

Thanks in advance to anyone brave enough to try out the theme and leave feedback!

WordCamp NYC this weekend, expecting good times

Posted by jeremyclarke on October 14, 2010 · General

WordCampNYC – Oct 16-17 I’m giving a talk incredibly similar to the one I gave at WordCamp Montreal this summer: Widgetize everything: building smarter themes with widgets and sidebars.

Not there? Missed my talk? Forget everything? You can see the slides I used for the talk on my slideshare account. It should also be embedded below:

7 Graphic Novels you should already have read

Posted by jeremyclarke on October 8, 2010 · General · Ungrateful Biped

My brother Chris bought Argo Bookshop here in Montreal last year. It is a tiny store with a very limited selection that gets by because every book on the shelves has a reason for being there. They don’t have Twilight and they don’t have the Da Vinci code. Instead they have the best selection of modern classics with the highest quality ratio around.

Chris needs to diversify though, for provincial-policy reasons mostly, and needs other genres. I told him I’d write up a list of excellent comic books that would fit in with the rest of the Argo collection. After sending it to him I realized it’s something that anyone who loves comics should read through, so here is my list and notes on each book.

Note: I only wanted to include self-contained graphic novels that someone could buy and walk away with, so miraculously good series like Transmetropolitain, The Invisibles and Swamp Thing are not included.

Comics Connoisseurs: Please leave a comment with your favorite graphic novel and why you think it’s classy enough for Argo so I can give a longer list to my brother :)

Blankets – Craig Thompson

A long (lots of pages, many images without too much text, so a fast read), beautiful and touching story of two young people struggling with love, sexuality and Jesus. Perfect for any human being, especially a young one.


Ghost world – Dan Clowes

A perfect storytelling experience about two young women and their awkward lives. Subtly ironic and hilarious if you give it time and energy, but could be deemed pointless by someone not paying attention. BEWARE FILM VERSION OR FILM VERSION COVER.


Jimmy Corrigan: The Smartest Kid on Earth [Hardcover] – Chris Ware

A design masterpiece, this book explodes the comics medium with page after page of original and effective layouts. It tells the story of a lonely man and his dreams (I don’t remember the plot as well as the art). It has a very unusual shape and the hardcover version is spectacular, so it might be better to get that than the softcover.


Louis Riel: A Comic-Strip Biography – Chester Brown

Drawn in a style reminiscent of a black and white Tintin, this book is simple and to-the-point with it’s retelling of history. The quality is excellent and the educational value is non-debateable. I’m sad that someone borowed my copy and never gave it back.


A contract with God and other Tenement Stories – Will Eisner

Will Eisner is commonly regarded as the father of classy graphic novels. This is just one of many books he wrote about normal people living their lives in the modern world of his day (decades ago). It’s a great example though, and appropriate for just about anyone.


V for Vendetta – Alan Moore

Tragically cinematized, this is one of the most beautiful and classy action comic books ever made. It is demented and trippy in it’s special way while also being deeply political. The art is one-of-a-kind paintings, a potentially-gimmicky choice that I’ve never seen executed so perfectly. Avoid copies with mentions of the film on the cover.


Clumsy – Jeffrey Brown

Jeffrey Brown is adorable, and in this book he tells the story of his own relationship with a girl. He draws his comics, apparently, directly on paper with the pen, without editing and with a total disregard for proper style. Despite the messy nature of the art, and in this case also the composition of the book, which jumps around in time like crazy, each page is gripping, and the juxtaposition of silly moments with tragic ones can make you laugh and cry within the same 30 seconds. His other books are also excellent, but this was his first and is a perfect exacmple.


Ungrateful Biped – Jeremy Clarke

Okay so it’s not a graphic novel, it’s a website, and its not one of the best comics of all time, it just happens to be the one that I created myself. It was a daily comic strip about my life, hopefully thoughtful though often dark and moody in a way I can no longer relate to. Lots of people liked it at the time I was drawing it (2003), and it remains my proudest creative achievement (though Zombierotica takes a noble second place). If you’re jonesing for some non-superhero comics, the archives just might give you what you’re looking for.


Comics Connoisseurs: Please leave a comment with your favorite graphic novel and why you think it’s classy enough for Argo so I can give a longer list to my brother :)

Multilingual content in WordPress, September 2010

Posted by jeremyclarke on September 7, 2010 · General · GlobalVoices · WordPress

Someone emailed me recently to ask about how they should approach the task of setting up a multi-lingual WordPress site (en+fr). My response was long enough that I figured I’d post it here for anyone curious about my thoughts.

We’re looking to update our WordPress website with a multi-language setup […] Would you recommend that we use a multi-lingual plugin, such as WPML, or just create two different wordpress sites?  I’d rather do the former, since once setup it demands much less updating.  I’ve heard in the past that this is very difficult to do, but now with WP 3.0, I’m thinking it must be much easier.  I’d much appreciate your opinion.

Multi-lingual in 3.0

The advent of 3.0 has changed many things but not the frustrating lack of support for multilingualism in WP. The same issues exist now as did in the 2.x days. The main relevant change in 3.0 is that WPMU, a seperate project which let you have multiple sites in one installation, is now part of the main WordPress code. The feature is now referred to as “Multi-site” or “Network” and is fairly easy to activate. This means if you decide to use separate sites it is a bit simpler to have both sites running off the same WP install and sharing themes/plugins. Just set up your main site as mysite.com and the French one as fr.mysite.com.

Plugins can be abandoned

While its true that two sites requires more tedious repetitive work during updates it less likely to involve insane compatibility work that could arise from the plugin acting up or becomming unsupported. Users of the previously-standard Gengo plugin all got fucked around version 2.5 (don’t feel like looking up the exact version) when the plugin stopped working and none of them could update their sites, leaving them susceptible to hackers. An unpatched version of WP is often vulnerable to attack and a site that depends on a plugin that stops working can’t be patched.

WPML.org is probably your best bet for a plugin

WPML seems like it has serious and dedicated professional developers, and has a LOT of features that are very useful, so its a decent bet that as a translation system it will continue working for a long time. Especially if you don’t have a ton of content it is a pretty good choice (because you can always copy/paste the content into a second site some day if the plugin stops working). Using it will require some heavy modifications to your theme if you want the language chooser etc. to actually make sense. My experience with WPML has lead me to believe that the devs aren’t particularly great UI designers compared to their programming skills.

Multiple sites keeps your posts database clean and logical

I personally like the two-site approach because it keeps your content and databases clean as a tradeoff for the deeper linkage between translations you could otherwise get from a plugin. It’s extra hassle to edit the content on both sites all the time but IMHO the bigger hassle is actually translating and keeping content fully synchronized which is nearly impossible regardless of your translation infrastructure.

On Global Voices we have a custom solution we call Lingua

I don’t have any real experience with WPML or qTranslate (the other big name in WP translation) because on Global Voices (the site I run) I’ve coded a custom translation plugin that we call Lingua. It uses separate sites but keeps a database that links translations across the sites (see http://fr.globalvoicesonline.org/2010/09/02/43270/ for an example of the output). IMHO this is the best model for running translations because if the plugin stops working all you lose is the links to other versions. Each translation site can continue to work independently without knowledge of the others, so you can work on the update issues seperately while still being secure. Unfortunately the plugin isn’t even close to being public-friendly, but I’m hoping the model gets used someday. I added it to the list of potential plugin types on the Codex page about multilingual WordPress.

Maybe one day it will be easy

Good luck to anyone trying to build multi-lingual WordPress sites. It’s a nightmare but none of the other CMS options are actually much easier, and all the other benefits of  WP make it hard to turn down. Here’s hoping that one day the core development team is willing to pick up the problem and commit to a standardized solution (vote for built-in multilingualism on the WordPress “Ideas forum”).

EDIT (Sep 11, 2010): I should also mention the Worldwide Lexicon project and their WWL translation plugin for WordPress. It has an intense approach that combines machine translation with human editing to make your site quickly translated and let you improve it incrementally as time goes on. I haven’t used their plugin myself because older dev versions I tried were very buggy and hard to understand. If you’re just starting now the new versions are worth a try and may be a good solution if the combination of machine and human translation is desirable to you.

Nothing could brick our love

Posted by jeremyclarke on July 21, 2010 · design · photos

I miss your tiny hands, written on a brick

Prompted by Cardboard Love.

WordPress Admin Header Redesign: Light or Dark?

Posted by jeremyclarke on March 27, 2010 · design · WordPress

WARNING: Intense discussion of the open-source design of the WordPress website software lies ahead. I will literally discuss shades of grey. People uninterested in WordPress and its future should probably learn more about snuggies instead.

I updated my WordPress SVN Trunk installation today and noticed a huge change to the admin screens that had just been committed. The header and footer of the admin section had been switched from basically black to a very light grey color. This change was committed as a work in progress, so people would see it and work towards a final solution.

Fig 1. Old admin header color on top, current SVN version below.

Old WordPress header color and temporary new on in SVN

Overall I support this change and think it looks better, but the exact shade of grey in the background didn’t match the gradients in similar UI elements (the dashboard sections and screen options buttons) so I worked out a different light-grey graphic to use as a background that would match. Here is a screenshot of how it should look if this light grey is used in the final WP 3.0 release, I think it is pretty solid and shouldn’t make anyone cry.

Fig 2. WP-Admin with darker but still light-grey heading and footer. Pretty okay.

Screenshot of wp admin with light grey header and footer
Click to view full size

I remembered a conversation on the WP UI dev blog where another middle-grey option was proposed but didn’t get a lot of attention. I really liked the darker grey version in JohnONolan‘s original mockup so I worked out a full page screenshot using the darker shade of grey that I thought worked better and added them to the trac ticket about the header change.

Here’s the one I think would work the best, dark grey to match the active heading in the sidebar (in this case the “Dashboard” section heading).

Fig 3. Nice dark WordPress Admin screen, how it should be.

Screenshot of my proposed WP admin colorsClick to view full size

Here is one giant image with both of them so you can compare. Instead of images like this I like to open two versions in seperate tabs in my browser than jump back and forth to decide which I prefer.

Fig 4. Side-by-Side comparison of light and dark grey proposals for admin header and footer.

Side by side comparison of light and dark optionsClick to view full size.

I’m hoping the dark one can get implemented because it has a lot of nice features that the lighter version lacks:

  • It is not a big change from the old version, so people will be inherently less upset about it.
  • It brackets the whole UI nicely and preserves the high-contrast from the old design.
  • It avoids a page where 90% of the chrome matches each other pefectly. I think the dark grey is important to keeping the look neat, and having only one element in the page with that color (the active sidebar heading) make it look unbalanced.

Feedback welcome, what do you think? If you want to support/flame me the trac ticket about it is probably the best place, so that your input affects the final decision.

Mac OSX: Setting a keyboard shortcut for maximize/resize window (green jewel)

Posted by jeremyclarke on March 15, 2010 · General

I’ve been dreaming for a long time of a system-wide keyboard shortcut to maximize/resize the current window in OSX (windows-style, where the window fills the screen or not, rather than going to the dock). In pretty much every application the ‘Window’ menu item has Minimize (shunt to dock) and “Zoom” which resizes the window and has the same effect as the green “+” jewel in the window header. The Minimize item has the easy-to-use keyboard shortcut CMD+, while the Zoom item has no shortcut and no hint at how to get one.

EDIT (Sep 27, 2010): Based on my realizations about Firefox and NetBeans detailed below I now think this method is pretty insufficient for me and probably lots of other people. I have since tried the 13$ SizeUp application recommended by Martin Reisch in the comments. It is excellent and elegant and solves both the problems I had and ones I didn’t realize I had until they were solved. I recommend it whole-heartedly for those among us with big screens and small patience for window management.

divvy logo EDIT (Jan 24, 2012): Another commercial solution to this problem that has appeared is Divvy. I haven’t tried it yet simply because I have SizeUp working and already paid for it, but from what I’ve heard Divvy takes it to the next level by adding a slick graphical interface in addition to keyboard shortcuts, as well as letting you create infinite different resizes, whereas SizeUp limits you to preset ones. Divvy has a demo so you can try it for free.

I looked around and found some totally whacked out solutions involving applescript or bash scripting but finally found an incredibly simple and obvious method using System Prefs. I recommend it for everyone who is sick of using the mouse to hit the tiny green jewel.

Detailed steps to set a Maximize keyboard shortcut in Mac OSX 10.6

  • Launch System Preferences from the Apple menu
  • Go to Keyboard settings
  • Go to Keyboard Shortcuts tab at the top of the window.
  • Go to Application Shortcuts in the sidebar of the window.
  • Click the small + button
  • In the popup thing make sure ‘All Applications’ is selected for Application:
  • In the Menu Title box type in exactly: Zoom
  • In Keyboard Shortcut type in the shortcut. I recommend Command-Shift-M
  • Click Add button.
  • Restart each app you want it to work in.

Screenshot of the system prefs window where you set the keyboard shortcut

Note on restarting apps: These shortcuts work on an app-by-app basis so it will only work in a given application after the app is restarted. Thus if you restart your computer it will immediately work in all apps.

Note on choosing a shortcut: I chose Command+Shift+M (Command is the ‘apple key’) because it matches the Command+M keyboard shortcut for Minimize/send-to-dock and will be easy for me to remember. You can set it to another combination if you want, but think carefully as you don’t want it to be something that any other applications use or you might have strange results.

EDIT: Well don’t I look stupid. It turns out this keyboard shortcut doesn’t work with Firefox, the application I spend most of my time in! I thought it wasn’t working cause it needed to be restarted but that didn’t fix it either. The problem is that Firefox has its own menu item called “Zoom”, under the View menu, which doesn’t do anything but holds the page zooming functions inside it. For whatever reason this means that the configuration described above activates that menu item and stops the Window > Zoom menu item from working. GAH! I might have to try the app mentioned in the comments to find true happiness.

Lego Stephen Hawking

Posted by jeremyclarke on February 27, 2010 · General

The physicist Stephen Hawking rendered using standard lego.

Physicist Stephen Hawking (via. acidcow)

The GoldenPalace.com Monkey

Posted by jeremyclarke on November 18, 2009 · General

The GoldenPalace.com Monkey (Wikipedia Link), was discovered in Bolivia and named by auctioning off the decision to the highest bidder. The proceeds went to the national park where the monkey was discovered.

goldenpalacemonkey

Pointed out by Eddie Avila as both the worst and best thing about Bolivia.

I would have called it George Bush.

Montreal WordPress Developer Meetup this thursday

Posted by jeremyclarke on September 22, 2009 · General · WordPress

So yeah, as the title of the last post (which has slowly become ludicrously out of date) implies, WordCamp Montreal was in fact pretty awesome. If you’re a visual kind of person check out the photos.

wordpres-montreal-community-logo-square-400Now a few months have passed since then and its time to move on. Move on to something other than WordPress events? No. Move on to smaller, more regular, less stressful WordPress events (and hopefully some posts here on my blog about other topics, we can still dream).

We’re going to use the Montreal WordPress Community group on facebook to organize evening meetups about once a month (join the group to get invited automatically). Patrick and the members of Station C have generously offered to let us use their coworking space for our get-togethers. This is great cause its sexy and well stocked with tools, but sad cause its not that big. Hopefully we can keep a healthy level of attendance without exploding.

The first meeting will be this thursday, when we’ll have a presentation and discussion about programming tools and how they can speed you up followed by a discussion of GPL and what it means for paid themes, plugins etc. I also told people to bring drinks and food, so it should be a cool party as well. You can read more about it and RSVP on the facebook event listing.