DRY CSS – Slides from my ConFoo 2012 talk

Here’s the video with slides+audio of talk in case you prefer that. It’s 51min

This is an idea/talk that has literally been years in the making. Ever since I used this “DRY CSS” system for the Global Voices redesign I’ve been meaning to do the background research and lay it all out clearly like this. To me the core principle is so simple and standards-based that I have trouble believing it’s not already a thing, but I can’t find anyone else promoting it so here you go:

Embed should be above, here’s a direct link to the slideshare page: DRY CSS – A don’t-repeat-yourself methodology for creating efficient, unified and Scalable stylesheets »

Or if you prefer you can download the slides as a PDF »

Let me know what you think! Am I crazy? Why aren’t we already doing it this way?

A Love Poem in PHP

Wrote this a long time ago but never posted it. Stumbled onto it while cleaning up my email:

<?php
	$me = new Lover;

	$me->partner = $you;

	$me->feelings = array('adore','miss','want','love');

	foreach ($feelings as $feeling) {

		$me->express_feeling($feeling);

		if ($you->feeling_mutual($feeling))
			$me->epic_hugs($you);
	}
?>

Sure, it’s not the most expressive form of writing out there, but like with Haiku I think the limitation and challenge of putting poetry into code form can help push you to create something really fresh and strange without the baggage and cliché feel of regular poetry. I also just love naming variables and methods ;)

Either way, I think my poem is at least more uplifting than this other PHP love poem I found.

It was actually a follow-up to a shorter, twitter-length PHP love poem I wrote around the same time:

<?php
	$things_i_dont_miss_about_you = array();
?>

Submit your coded love poems in the comments, bonus points if it could at least theoretically execute in real life (assuming for example things like the existence of a “Lover” class with an express_feeling() method). If you’ve got the time write us an Epic PHP Poem, including all the needed class definitions :P

iOS apps worth considering

A friend emailed a few people to ask for recommendations of what to install on her new iDevice. My reply was detailed enough I thought you might be interested too. Seasoned iOS experts will yawn at the list because a lot of these are commonly accepted good choices, but if you don’t spend time each day on apps you’ll probably find something you didn’t know about below.

Note: I’m too lazy to find links for them all. Open up iTunes and search and you should be able to find them pretty fast.

Continue reading “iOS apps worth considering”

Another year, another exciting WordCamp Montreal

Once again I’m organizing WordCamp Montréal along with a great team of co-organizers. I’m managing the schedule and helping with all the other stuff. We’ve got a lot of great talks lined up as well as some fun summer treats to keep everyone energized and make it a great social event on top of being a place to learn and grow your skills.

I'm going to WordCamp Montreal 2011!

Grab a badge for your blog here.

If you use WordPress and have been meaning to learn more about it you should definitely come. In three years I’ve literally never heard anyone complain that WordCamp is a waste of time, even when they find a million other things to complain about ;)

Tickets are on sale now, so you should register ASAP.

 

Richard Nixon on the failed Apollo 11 Moon Landing and Deaths of Buzz Aldrin and Neil Armstrong

The text below is a speech written for Richard Nixon in case something went wrong during Apollo 11, the first manned landing on the moon.

It assumes that the astronauts (Neil Armstrong and Edwin “Buzz” Aldrin) are trapped on the moon and doomed to die. The American people know about it in real time and need guidance:

Fate has ordained that the men who went to the moon to explore in peace will stay on the moon to rest in peace.

These brave men, Neil Armstrong and Edwin Aldrin, know that there is no hope for their recovery. But they also know that there is hope for mankind in their sacrifice.

These two men are laying down their lives in mankind’s most noble goal: the search for truth and understanding.

They will be mourned by their families and friends; they will be mourned by their nation; they will be mourned by the people of the world; they will be mourned by a Mother Earth that dared send two of her sons into the unknown.

In their exploration, they stirred the people of the world to feel as one; in their sacrifice, they bind more tightly the brotherhood of man.

In ancient days, men looked at stars and saw their heroes in the constellations. In modern times, we do much the same, but our heroes are epic men of flesh and blood.

Others will follow, and surely find their way home. Man’s search will not be denied. But these men were the first, and they will remain the foremost in our hearts.

For every human being who looks up at the moon in the nights to come will know that there is some corner of another world that is forever mankind.

(Emphasis mine)

Obviously this is a beautiful and moving speech, and should have helped Americans understand this theoretical tragedy had it occurred, but what I love best is the careful avoidance of any mention of God or religious ideology.

The writer mentions ‘Mother earth’ and ‘fate’ but the overall feeling is clear: Mankind did this thing on our own, using our ambition, ingenuity and hope. Whether the mission is successful or not we had achieved something miraculous and unbelievable all on our own. We can take credit for the success just as we must face the blame if things go wrong. Either way we had re-invented our place in the universe for all eras to follow, and, most importantly, for the best possible reason: “the search for truth and understanding”.

Too bad the space race was as much about the cold war as it was about science, and that Nixon was a horrible person in the long run. For today his alternate-universe self will be my Atheist superhero. (The actual speechwriter was William Safire and not Nixon of course. Here is some audio of Safire talking about writing the worst-case scenario speech).

(Found in this amazing article by Robert Krulwich about the Soviet space program and it’s awfulness).

Raven: My Custom Theme (Templates) for Munin

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

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

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

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.