Devit!

IE 6.x has long been the bane of any sane web developer. Many, many hours are spent making otherwise perfectly healthy website implementations work in this broken, and terribly outdated browser.

IE 6.x is continuing to experience a decline in usage; Google (and Google owned YouTube) have already discontinued support for the browser.

We are jumping on the bandwagon. By default, rtraction quotes will no longer include IE 6.0 support in quotes, RFP responses, etc. We will still include IE 6.0 support as an optional line item.

Here is what this means to our clients:

1. The average cost of our website implementations will drop significantly, especially for basic content management systems. It’s actually scary to analyse how much time has gone into IE 6.x support over the years. Now we’ll have that time to spend on other, more innovative things.
2. Websites built/quoted before this announcement will continue to support IE 6.x. Additionally, for our public sector friends support is still available for those sites that are required to have backwards capability.
3. Our developers will be happier. I am expecting a parade, or some equally elaborate celebration now that this announcement is formally made.

As always, if you have any comments, complaints, etc please comment below or drop me a line directly – email hidden; JavaScript is required.

I recently had the opportunity to make use of CSS3 transformations to achieve a 3D effect in a practical application.

If you’re a web developer reading this, you know that something like this doesn’t happen every day, and is therefore very exciting!

The main requirement for the project was to display a 3D isometric floorplan of the Convergence Centre at Western University in London Ontario, with tweeps showing up in the room they are tweeting from.

Each room is a <div class=”users”> that can contain <div class=”avatar”> as many times as needed. Transparent GIF’s are used as background images for the character’s body, head, torso and legs.

<div id="bar" class="users">
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
</div>
<div id="maple" class="users">
	<div class="avatar">
		<div class="head"></div>
		<div class="torso"></div>
		<div class="legs"></div>
	</div>
</div>

For development purposes, we put a thick red border around the rooms.
As we add more avatars to a room, we’ll adjust their margins so that characters squeeze closer together and the room will not overflow.
Avatars are floated right so they stack nicely – closer ones will overlap farther avatars.

.users {
	border: 4px dashed red;
	position: absolute;
}
.users .avatar {
	height: 44px;
	width: 33px;
	float: right;
	margin: 17px;
	position: relative;
}
.head, .torso, .legs {
	position: absolute;
	top: 0;
	left: 0;
	height: 44px;
	width: 33px;
}

Adding CSS3 transformations, we can skew the room divs to match the shape of the rooms in the background image.
The side-effect of this is that the avatars inside will also be skewed.
The CSS below will affect Mozilla and Webkit-based browsers only.

.users {
	border: 4px dashed red;
	position: absolute;
	-moz-transform: skewX(45deg) skewY(-12deg);
	-webkit-transform: skewX(45deg) skewY(-12deg);
}

Now we have to put an opposite skew on the avatars to cancel out the room skew.

.users .avatar {
	-moz-transform: skewX(-50deg) skewY(12deg) scaleX(1.2);
	-webkit-transform: skewX(-50deg) skewY(12deg) scaleX(1.2);
}

All that’s left is to remove the red border around the rooms!

If you have any questions or comments about using CSS3 to achieve a 3D effect, or if you want to show off your own 3D CSS3 project, we’d love to hear from you!

There have been a couple of high profile announcements about government institutions using open source products in place of proprietary systems.

One of the biggest announcement came from the White House and they have released some great new modules for Drupal.  All three modules work well to fill noticeable voids and provide a better browsing experience. One module, “Context HTTP Headers”, allows developers or system administrators to customize caching for pages based on type.  This means is that you can have your news pages cached for five minutes on a high traffic website and have your ’standard content pages’ such as About Us cached for sixty minutes.  Another module release is called Akamai and helps target scalability as well by enabling integration into a their Content Delivery Network. Another module called GovDelivery makes it a lot easier to send out tailored emails to the governments email list.

The White House also released one of the most desired modules for any developer who is working hard to build accessibility complaint websites. Dubbed “Node Embed” the module helps deliver rich content (photos and videos) with all of the appropriate meta data that makes them fully accessible by screen reading software.

The Bank of Canada has also made some contributions back to the open source community. They released three WordPress plugins that were developed for their website.  The AJAX Scroll plugin adds a graceful fade in and fade out for next/previous links when a user is navigating content.  Another recently releases plugin is called PBox and it allows a developer to create custom content widgets and standardize the display of the content within them.  This is very useful as it helps ensure all information will have the same look and feel across a site.

The Bank of Canada has also released a WordPress plugin that helps remove the handcuff’s when it comes to widgets and customizing them.  The plugin called XWidgets allows for a page-by-page customization of any widget which means you can have a news feed or any type of widget customized to fit any specific pages layout or design needs.  This means you can easily have your about us page display a Flickr feed and the same widget could display a twitter feed on your contact us page.

All these announcements are great news for all types of internet users, from casual surfers, to content producers and developers. Its great to see political offices getting on board with open source and we hope that this is just the start to many more contributions from all levels of government.

What online government features would you like to see made available to the general public?

Here are the entrants in our Geeky T-Shirt Contest – we’ve included a few honourable mentions as well.

You can vote once a day – voting closes at noon EST April 30th, 2010.

Honourable Mentions (didn’t come to the office)

Left to right: Mike Batista, Jason Clarke and Jodi Simpson

CodeIgniter is a great little PHP framework that allows you to rapidly build MVC web applications. Without getting too far into Model View Controller ideology, this post will explain how to extend CodeIgniter’s Controller class to achieve site-wide authentication checks.

Not long after starting your fancy new webapp, you will start to realize that putting

if (!isset($_SESSION['isloggedin'])) {
  redirect('/login');
}

in every single controller function is very tedious.

You can create an extension of the Controller class and put the common code in there. Here’s how.

Create a file in /system/application/libraries called MY_Controller.php. The name of this file is important. If the prefix “MY_” doesn’t do it for you, go into /system/application/config/config.php and change

$config['subclass_prefix'] = 'MY_';

to whatever you want. Don’t change the “Controller” part though! You can also extend Models and Helpers.

Start with the following code in MY_Controller.php:

class Authenticated_Controller extends Controller {
  function Authenticated_Controller() {
    parent::Controller();
    session_start();
    if (!isset($_SESSION['isloggedin'])) {
      redirect('/login');
    }
  }
}

Go ahead and add any common controller functions to this class. Feel free to change “Authenticated_Controller” to whatever you want. You can also have multiple Controller extensions in this file.

Note: If you only have one controller extension, it is standard to name your class MY_Controller (rather than Authenticated_Controller).

Important Note: If you find yourself creating a bunch of controller extensions, take a step back and consider what you are doing. Is your extension being used by only one controller? If so, just put your code in that controller’s constructor.

Now it’s time to start using your new controller extension!

In every controller that requires authentication (don’t do this for your login controller!) rather than the traditional

class Manage extends Controller { ...

use this instead:

class Manage extends Authenticated_Controller { ...

Do you have CodeIgniter controller extensions that could be useful to others? Let us know in the comments.

Compost is an easy web-based way to grow consensus with your designs. Upload designs and allow your clients to annotate, rate and discuss. Easily revise comps based on feedback and get approval.

Compost is currently in version 0.8beta. Coming-soon features include email notifications, project searching, and an iPhone application.

Compost is free software, released under GPLv3. You have the freedom to:

• - use the software for any purpose
• - change the software to suit your needs
• - share the software with your friends and neighbours
• - share the changes you make

Getting Started

You can download the latest version of Compost here. Follow the README instructions to get Compost up and running in seconds.

If you have any suggestions or problems, be sure to drop us a line.

Compost Versus Alternatives

Compost differs from most feedback systems in that it is completely free and open source. Here is a chart that compares some popular feedback systems to Compost.

Participate

If you’re handy with PHP, jQuery and Code Igniter we encourage you to become a committer! Help us move Compost forward and give back to the open source community.

To get started, visit the project at Google Code – there you can familiarize yourself with the issues, checkout the source code and browse changes. You will need to be a member of the project to commit any changes – to become a member, send an email to gavin.blair at rtraction.com and I’ll add you as a committer.

If you’re not a coder you can still help out by testing Compost and providing feedback.

Coming Soon

Very soon Compost will have an iPhone app, drag-and-drop design ordering, and email notification options. What features would you like to see in Compost? Leave a comment below or at our feedback site.

I really enjoy using CCK to define custom content types and it is usually does the trick all on its own. However, sometimes I need to get the field data out in some other way. This example retrieves CCK select options and returns them as an associative array, which can then be used in a custom form or elsewhere.

function _module_events_types_array() {
	$query = "SELECT global_settings
		FROM {content_node_field} AS cnt
		WHERE cnt.field_name = 'field_meeting_type'";

	$queryResult = db_query($query);

	while ($meeting_types = db_fetch_object($queryResult)) {
		$meetings = unserialize($meeting_types->global_settings);
	}
	$meeting_list = explode("\n", $meetings['allowed_values']);
	$meeting_array = array("" => "All Meeting Types");
	foreach($meeting_list as $meeting_type)
	{
		$meeting = explode("|", $meeting_type);
		$meeting_array = array_merge($meeting_array,
			array($meeting[0]=>$meeting[1]));
	}

	return $meeting_array;
}

I’m not a huge fan of flash components.  I’ve run into too many instances of incompatibilities between version and components themselves.  However the ScrollPane component is just too useful to pass up.  The thought of having to build my own basic UI components also seems like a waste of time.

This article is being written because the documentation on this component is not spectacular and can be quite ambiguous to the new actionscript programmer. I ran into trouble in the methodology of how ScrollPane wants you to work.

Normally the addChild method is used to embed one MovieClip in another.  That was the method I assumed would work for the scrollpane.  However after getting the error “Error #2006: The supplied index is out of bounds.” I realized that was not how it worked.

To simplify, use:

scrollPaneInstance.source = movieClipContainer;

NOT:

scrollPaneInstance.addChild(movieClipContainer);

Due to the fact I’m not a huge fan of the components that come with Flash I’m wondering if anyone has found any other ScrollPane type components that are lightweight and open source. TweenLite is an example of a lightweight alternative to the built in flash library for tweening.

When you post an article of any type on the web, it seems almost mandatory that you include “Tweet This!” and “Post to Facebook” links. Of course, you can get plugins that create sharing links automatically for most blog software (Sociable for Wordpress (this is what we use); Service Links for Drupal; Sexy Social Bookmark for Blogger; I could go on), and they usually cover more networks than Twitter and Facebook. However, some circumstances require a more do-it-yourself approach.

Adding “Share on Twitter” and “Post to Facebook” functionality to your web application is a snap! In this post you will learn:

• -How to prefill a tweet for your user
• -How to let your users share a link on Facebook, including page thumbnails and description
• -How to harness the power of bit.ly’s API for short URLs and click tracking

Share on Twitter

Use the following code to create a “Share on Twitter” link:

<a href="http://twitter.com/home?status=Add Sharing to Your Webapps - http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank">Share on Twitter</a>

Share on Twitter

That was easy! Try replacing your link text with a Twitter button:

<a href="http://twitter.com/home?status=Add Sharing to Your Webapps -http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank"><img src="shareontwitter.png" alt="Share on Twitter" /></a>

Twitter can’t make it much easier than that! When the user clicks on your button, they are brought to their familiar Twitter timeline, with the next tweet prefilled for them.

Facebook Share Link

Use the following code to create a “Post to Facebook” link:

<a href="http://facebook.com/sharer.php?u=http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank">Post to Facebook</a>

Post to Facebook

Too easy! Now replace the text with a nifty Facebook button:

<a href="http://facebook.com/sharer.php?u=http://www.rtraction.com/blog/devit/add-sharing-to-your-webapps" target="_blank"><img src="posttofacebook.png" alt="Post to Facebook" /></a>

When the user clicks on your “Post to Facebook” button, a new window pops up, prompting them to share the link. The user can optionally update their Facebook status while they are at it.

What about Page Thumbnails?

That looks pretty good, but it could use a little more flair. Facebook attempts to add a thumbnail and a description to your link. Facebook scours your page for <img> tags, and uses those for thumbnail options, in the order that they appear on the page. If you want a screenshot of part of your webapp to be the first choice, you’ll have to put the following code near the top (before any other <img> tags) of your page:

<img src="screenshot.jpg" style="display: none" alt="" />

This will not be visible to users due to the inline CSS, but Facebook will pick it up.

What about Page Description?

Facebook uses the page’s meta description. Make sure the following code is present in the header of your page, between <head> and </head>:

<meta name="description" content="rtraction - Add Sharing to Your Webapps - Twitter and Facebook sharing links are a snap to build!" />

Now your Facebook share is complete with a thumbnail and description.

Shortened URLs with Bit.ly

Bit.ly’s API makes it easy to dynamically create shortened URLs. A big advantage of this is that you can make use Bit.ly’s click tracking.

You can learn how to use the Bit.ly API on your own, or use an existing library. There is a DLL file for .NET projects to use Bit.ly. This is untested by us, but the Hashbangcode Bit.ly PHP Class looks like a promising PHP solution. Let us know in the comments if you have tried this library!

If you have any other tips for creating share links, let us know in the comments.

Today the rTraction team is wearing blue beanies (or toques as we call them here in Canada) to raise awareness about web standards.

Why are we wearing toques inside and sharing the pictures with the world – risking overheating, ridicule and Gavin’s hathead?

In an industry that thrives on creativity and thinking “outside the box”, why are we so excited about defining the box?

Because we love to make cool stuff.

The web is an ecology of people, communities, ideas, websites and applications. Standards are common language that connects each denizen making the system stronger, richer and able to evolve.

To a user, open web standards make our systems ‘just work’. To a web developer they free us from the limitations of the technology and let us focus on all the cool things we can do with it.

Open web standards make our websites and applications intuitive. They make sure that our cool stuff can reach the most people as quickly and easily as possible no matter their platform, location or browser.

They lower the barrier of entry, enabling more people to create content, inspiration and innovation.

We’ve all experienced what happens without familiar standards. Stuck on channel 3, the radio playing loudly, Desperate Housewives recording over family videos, the clock flashes 12:00…12:00….12:00….

The less time we spend worrying about compatibility, accessibility and extensibility, the more time we can spend making web apps that are leaner, meaner and cooler.

So today, we wear our beanies with pride and support the standards that let us and all developers and designers fill the web with cool stuff.

Join the movement!

Facebook: http://www.facebook.com/dwws

Twitter: http://twitter.com/BlueBeanieDay or search #bbd09

Flickr: http://www.flickr.com/groups/bluebeanieday2009

YouTube: http://www.youtube.com/watch?v=v4G2hgioLFk

Learn more about Web Standards

http://www.opera.com/company/education/curriculum/

http://webstandardsgroup.org/resources/

http://www.webstandards.org/learn/