May 31
Events 3

Make Web Not War 2010 – a recap

With guitarpick dogtags, military paraphranalia and a notebook with the cover text “Why the f@&#* is Microsoft doing this?” Make Web Not War set a new standard for conferences.

The first words out of my mouth as I stepped off the plane in Montreal Wednesday afternoon were “What the Fuck!” (yes, I’m a real class act). Crossing the threshold from plane interior to airport gangway was like walking into a furnace. It was, at least to me, unbearably hot and I was in a rush to get out of the plane and to a washroom to blow my nose. Five hours earlier I found myself on a WestJet flight crossing the great Canadian landscape on my way to the almost mythical French portion of Canada. In my bag, my camera, my laptop and the bare necessities. As I made my way through Trudeau International Airport on the hunt for a cab all I could think was “I hope this cold doesn’t claim my voice as its victim” interspersed with “I’m late, I’m late, I’m late, for a very important date”. The plane had taken a good 1 hour extra on its leisurely trip across the prairies, rush-hour was fast approaching and I knew that somewhere inside this Francophone metropol Angie Lim and her crack team of Microsoft event planners were waiting for my arrival.

And now for something completely different

Make Web Not War has been pushed as a conference that falls well outside the norm from the start. And with good reason. Entering the in itself fascinating location of Espace Reunion in the Outremont district I was met with military paraphranalia interspersed with glossy tech. There were gas masks, Dell laptops, ammunition cases, cammo clad couches, Beatles Rock Band and a huge green screen. I’ve been to quite a few conferences and I can tell you this is not common fare. But it set the right tone right off the bat.

This was Wednesday afternoon and the place was alight with frenzied activity. Microphones were being tested, screens hung, gear placed, names checked, I felt like I had walked right into a finely tuned machine room. The Master of Events Angie popped up to greet me but was soon pulled away to deal with a technical issue and before I knew it I was wisked away to a delightful dinner with the crew and the other speakers. Never mind the tech test – there was networking to be done.

Guitar picks and code languages

First impressions are vitally important, especially for public events like this. And the registration process often sets the tone for the entire conference. Make Web Not War was no exception, and that’s a good thing: When you are handed a dog tag chain full of colourful guitarpicks and a notebook with the cover text “Why the f@&#* is Microsoft doing this?” you know instantly this isn’t going to be yet another one of those boring conferences. Each attendee was handed a set of 5 guitarpicks, some of them doubles, and told that to get into the after party they needed to trade picks with the other attendees to get a complete set of 5 picks, each representing an open source code languages Microsoft supports.

Microsoft = Interop

The guitar picks were more than just nifty party tricks to force some interaction between the attendees: The whole point of the conference was to tell people that Microsoft is now 100% committed to interoperability. In other words you can now run open source languages, apps and software on Microsoft platforms without any problems. The web is platform agnostic and Microsoft has heard that message loud and clear. Now they want you to know they are in full support of it. Which is why they had Joël Perras, a dev for CakePHP and Lithium, as the keynote speaker, why the FTW (For The Web) contest was featured around Open Data and why they had me presenting my talk on developing WordPress sites using Microsoft applications. Like Joël said, “Interoperability is not a feature, it’s a requirement”. And we all got it.

Open communities

As usual I spent more time talking to people and soaking in the atmosphere than I did actually attending sessions at Make Web Not War. What I walked away with was a realization that the Montreal dev community is an astonishingly open one. In general I find people who work in the online realm to be cliquy to the point of isolationist, but not so in Montreal. Maybe it’s the Francophone culture, maybe it was just the overall air of the event itself, but I found more people open to frank discussions and inclusion than what I’m used to. Which was awesome. On top of that Microsoft had sent out a score of great people to further interaction. In all the sense of openness was everywhere and I was left with a feeling of inclusion, of being part of a greater community.

“Nice to finally meet you IRL”

Having put on a couple of events myself, most notably the 12×12 Vancouver Photo Marathon, I can tell you it’s no small feat. Which makes the hitch-free Make Web Not War all the more impressive. And for that mad props go out to the whole Microsoft team and in particular the aforementioned Angie Lim. I’ve dealt with her on several occasions in the past, but only by email so to me it was an added bonus to finally meet her in person. Or as Angie so geekfully put it “Nice to finally meet you IRL”. (Seriously, she is the only person who can say stuff like that without coming off like the biggest nerd ever).

Make Web Not War was filled with interaction, technology, knowledge and a sense of positive development. I left feeling like I was part of something bigger, that working with the web means I’m working with some of the brightest and most original people on the planet. And for that I am honoured.

FTW contest – going beyond the obvious

The FTW (For The Web) contest was a subset of the conference and it deserves special mention. The mandate was simple if not vague: Make an application using Open Data. It’s the kind of mandate that drives me insane, but other more focussed people were able to make some truly amazing stuff out of it. The finalists, TaxiCity – a student project from the Centre for Digital Media in Vancouver created by Mohamed El Eryan, Dashan Yue, Seth Marinello, Jordan Braun, Sagar Datta, Dhruv Adhia, and Ryleigh Kostash, Find-a-Home created by Timothy Dalby, and Project Tholus created by Francois Mazerolle showed that Open Data can be used to create surprising and original applications that go way beyond the standard data feeding and map overlays we are used to seeing. The winner, Find-A-Home, was especially impressive and I can see almost endless applications for this novel yet original idea down the road. I only wish I had come up with it first.

Further reading

Make Web Not War (official site)
Dan Menard’s recap
Cory Fowler’s recap
Brendan Sera-Shriar linkfest

@WebNotWar on Twitter

My Web Not War photoset on Flickr
The official WebNotWar Flickr Pool

Tagged
Post a job. Find one. authenticjobs.com
May 27
Events, Speaking Engagements 3

The Unholy Quatern at Web Not War 2010 in Montreal

UPDATE: The Unholy Quatern session I did at Web Not War 2010 was loosely based on an article I wrote for the Microsoft Expression Newsletter last year. To get a more in-depth walk-through of my work process and some more code examples etc take a look at the original article found here.

After 8 years in Canada I finally find myself in the mythical French portion of the country, more specifically the Beaumont district in Montreal, Quebec. Why? To talk WordPress and Expression Web to the attendees at the Web Not War conference. I’ll be posting more on this later but for now here are the vital links for my talk. The slides will be here shortly. Check back for updates.

Links

WordPress template tools for Expression web

WordPress itself

The WordPress Codex

WordPress on your computer: Web Platform Installer or BitNami

Sync your files: Live Mesh

May 14
plugins, wordpress 25

Cool Author Box: Free WordPress Plugin

After designing and building the Fancy Profile Box for the Pink & Yellow Media site I published an article on how to recreate it as a cool author box in your WordPress blog. This tutorial spurred a lot of interest and I got several emails and tweets asking me to convert it to a plugin. So I did.

As of right now the virst version (0.0.1) of the Cool Author Box plugin is available for download from the WordPress plugin directory. It is pre-beta and comes without any warranty or guarantees, but I’ve tested it on 4 very different blogs and it works fine on all of those.

The Cool Author Box WordPress plugin has been submitted to the WordPress Plugin Directory and I’ll announce it once it is accepted.

Click here to download the Cool Author Box WordPress plugin

Here’s the full rundown

The Cool Author Box plugin adds a stylish author box after the content in posts and/or pages. The box displays author name, author bio, author gravatar and a link to other articles by the author.

The Cool Author Box plugin adds information about the author to the bottom of the content of posts and/or pages. The information is gathered from the profile info set inside WordPress.

Items displayed are:

  • Display name of the author of the post or page
  • Gravatar of the author (set at www.gravatar.com)
  • Link to other posts by the same author
  • Link to author’s website

To make the author box appear you need to activa the plugin and go to the Cool Author Box settings under Settings and select if the box should appear under posts, pages or both.

Tagged , , , , ,
May 10
social media, twitter 0

Twitter force-follow exploit makes us all friendless

Last night our dear friends at Gizmodo released a simple exploit that allowed you to force Twitter users to follow you, an exploit already nicknamed “twape” (a combination of the words “twitter” and “rape”… classy). The exploit was ridiculously simple: Just write the word “accept” in front of a username (so for example “accept mor10″) and that user would automatically follow you. So what happens? Everyone and their mother starts force following famous people.

Sticking my head out the window I can hear the entire North American continent shouting “Hey look everybody: Oprah / Ashton / Barack / Jesus is following me on Twitter! I’m special!”

And the result? Right now your Twitter profile reads “Following: 0   Followers: 0″

Not to be a total grump here, but serisously people, what did you think would happen? Operah would become your instant friend? Ashton would start retweeting your tips on cat hair removal? More than anything this exploit shows how willing we are to just jump at anything that pops up on the internet without thinking about the consequences.

Let’s just hope this exploit doesn’t mean we’re friendless forever. Twitter is saying they are going to restore status quo once they’ve sorted out all the bogus follows. So relax, you’ll be able to show everyone how many friends you have soon enough.

May 07
Tutorials, wordpress 6

Build a fancy WordPress author box

If you have a WordPress site or blog with multiple authors it might be useful to create a custom author box for each of them so the readers can get more information about the author and see their other posts etc. This tutorial is an extension of my Fancy Profile or Author Box tutorial from a couple of weeks back that customizes the author box to work with WordPress.

The final result

The goal of this tutorial is to create an author box like the one you see at the top of this article. The box above is the actual output of the working code and as you can see it works quite well. The box is conditional and activated by a custom field so it will only appear when you want it to. The bio is the standard profile bio entered in the WordPress user profile area. The name is the chosen display name of the user and links to the author index for the author. The website link opens the user defined website in a new window. The Twitter link goes to the user Twitter profile. And finally the image is the user Gravatar. The Twitter link is a bit wonky – I’ll get back to that later.

If you don’t want to go through the entire tutorial and learn how this all fits together just jump to the bottom of the article and get the source code.

Building the code

We already have the baseline for the code, both HTML and CSS, from the Fancy Profile or Author Box tutorial but this is going to be a dynamic box so we need to replace the static content with WordPress functions.

Let’s start with the baseline code:

<div class="profile">
	<div class="profileText">
		<!-- Author bio goes here -->
	</div> <!-- END .profileText -->
	<div class="profileStats">
		<!-- Author photo goes here -->
		<div class="profileName">
			<!-- Author name linking to author post index goes here -->
		</div> <!-- END .profileName -->
		<div class="profileJob">
			<!-- Author info (website and Twitter handle) goes here -->
		</div> <!-- END .profileJob -->
	</div> <!-- END .profileStats -->
</div> <!-- END .profile -->

Retrieving the dynamic author elements

To generate the dynamic content we are going to use a set of standard WordPress functions. These have changed over the last year or so and as a result the ones featured in many older tutorials are now deprecated.

To get the author bio we use the_author_meta():

<?php the_author_meta('description'); ?>

To get the author Gravatar we use a custom code block that gets the user email address and retrieves the correct Gravatar based on that address:

<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>

To display the author name as a link to the author index page we use the the_author_post_link(). It’s an all-in-one solution that outputs the name with the correct link attached:

<?php the_author_posts_link(); ?>

For the links to the author website and Twitter account we use the_author_meta() again interspersed with some plain text. Note that you have to combine several functions to get the name displayed as well as the link created:

<a href="<?php the_author_meta('user_url'); ?>" title="<?php the_author_meta('first_name'); ?>'s website"><?php the_author_meta('first_name'); ?>'s website</a><br />
Follow <?php the_author_meta('first_name'); ?> on <a href="http://www.twitter.com/<?php the_author_meta('aim'); ?>" title="Twitter name: <?php the_author_meta('aim'); ?>">Twitter</a>

A caveat: The Twitter handle is a bit of a cheat!

If you look at the last line of the last code example you’ll see that for the Twitter name I’m actually calling the AIM value (AIM being America Online Messenger). This is because the standard WordPress profile page only asks for your e-mail, website, AIM, Yahoo IM and Jabber / Google Talk information. I wasn’t aware anyone was using AIM any more and I have a feeling this is a leftover from way back so I chose to use this field to output the Twitter handle because it has the least chance of anyone actually using it. There is a way to add Twitter and other handles properly but this requires the use of plugins – something I’m not a big fan of. If you’re interested there is some information on it in the WordPress Codex.

Putting it all together

Now that we have the source code and all the correct dynamic tags it’s time to put it all together. The end result (barring any changes you decided to make on your own) should look like this:

<div class="profile">
	<div class="profileText">
		<?php the_author_meta('description'); ?>
	</div> <!-- END .profileText -->
	<div class="profileStats">
		<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
		<div class="profileName">
			<?php the_author_posts_link(); ?> 
		</div> <!-- END .profileName -->
		<div class="profileJob">
			<a href="<?php the_author_meta('user_url'); ?>" title="<?php the_author_meta('first_name'); ?>'s website"><?php the_author_meta('first_name'); ?>'s website</a><br />
									Follow <?php the_author_meta('first_name'); ?> on <a href="http://www.twitter.com/<?php the_author_meta('aim'); ?>" title="Twitter name: <?php the_author_meta('aim'); ?>">Twitter</a>
		</div> <!-- END .profileJob -->
	</div> <!-- END .profileStats -->
</div> <!-- END .profile -->

Making it conditional

If you cut and paste the code above into your page or post template it will appear in every page or post. Which I’m pretty sure is now what you want. To make it elective you need to make a conditional statement in the code. I do this by using Custom Fields, in this case a field with the name “author” and the value “true” or “false”:

<?php if((get_post_meta($post->ID, 'author', true))) { ?>
	<!-- Code goes here -->
<?php } ?>

This small function asks “if this current post has a custom field with the name “author” that is set to “true”, do what I say”. That way your box will only appear if the custom field has been defined.

The final HTML/PHP markup

With the conditional statement in place the complete markup to be pasted into your theme file looks like this:

<?php if((get_post_meta($post->ID, 'author', true))) { ?>
	<div class="profile">
		<div class="profileText">
			<?php the_author_meta('description'); ?>
		</div> <!-- END .profileText -->
		<div class="profileStats">
			<?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '80' ); }?>
			<div class="profileName">
				<?php the_author_posts_link(); ?> 
			</div> <!-- END .profileName -->
			<div class="profileJob">
				<a href="<?php the_author_meta('user_url'); ?>" title="<?php the_author_meta('first_name'); ?>'s website"><?php the_author_meta('first_name'); ?>'s website</a><br />
									Follow <?php the_author_meta('first_name'); ?> on <a href="http://www.twitter.com/<?php the_author_meta('aim'); ?>" title="Twitter name: <?php the_author_meta('aim'); ?>">Twitter</a>
			</div> <!-- END .profileJob -->
		</div> <!-- END .profileStats -->
	</div> <!-- END .profile -->
<?php } ?>

Where to put the code

Like I said, this code has to be inserted into your theme files for the box to work. The easiest way to do this is actually to place it in a separate PHP file called something like “profile.php” and then call in from the theme files in question. That way you don’t have to edit the core theme files if you want to make a change to the box and adding it to new files means adding just one line of code.

If you placed this code (and only this code) in a file inside your theme called “profile.php” calling it from one of your core theme files is as easy as adding this one line of code:

<?php include ('<?php echo get_bloginfo('template_url') ?>/profile.php'); ?>

Where you insert it depends on where you want the box to appear in relation to your post content. If you want it to appear directly above you insert it before the the_content() function call. If you want it to appear after you insert it after and so on. Since you’re only inserting one line of code it’s easy to experiment and move it around for the best placement. And since the CSS is flexible width it will work properly pretty much regardless of the width of your post area.

The only thing to keep in mind is that the author box must be called from within the loop, otherwise it will not work.

The final CSS markup

The CSS markup for the author box is pretty much identical to the CSS in the original tutorial. I’ve just added some specifications to avoid conflicts. All you need to do is paste this into your styles.css file, get the blue background image file and place it in your theme image folder and make sure the call to the file has the correct image folder name.

/* AUTHOR BOX STYLES */
 
.profile {
	border: 1px solid #CCCCCC;
	position: relative;
}
 
.profileText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	padding: 10px;
	line-height: 1.4em;
	text-align: justify;
}
 
.profileStats {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	text-align: right;
}
 
.profileStats img {
	position: absolute;
	right: 0px;
	bottom: 0px;
}
 
.profileName {
	padding-bottom: 5px;
	padding-right: 92px;
	font-size: 1.2em;
	font-weight: bold;
	color: #2e4672;
}
 
.profileName a {
	color: #2e4672;
}
 
.profileName a:hover {
	color:#24375B;
	text-decoration: none;
}
 
.profileJob {
	font-size: 0.8em;
	padding-right: 92px;
	padding-top: 5px;
	background-image: url('{image folder}/testimonialBlue.gif'); /* Remember to set the correct image folder here */
	background-repeat: repeat-x;
	height: 45px;
	color: #FFFFFF;
	line-height: 18px;
}
 
.profileJob a {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}
 
/* END AUTHOR BOX STYLES */

That’s all there is to it. Have fun adding this box to your website or blog and customizing it to fit with your theme. And if you like, drop a comment below to show it off to the world.

Tagged , , , ,