wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_i386.deb

Be sure to exchange the current version for the one you see available here. This command simply brings the package into your server and makes it available for execution and installation.

dpkg -i mod-pagespeed-*.deb

The second command, makes use of the Debian package manager (works on most Ubuntu stacks). Which returns something like this:

Selecting previously deselected package mod-pagespeed-beta.
(Reading database ... 24267 files and directories currently installed.)
Unpacking mod-pagespeed-beta (from mod-pagespeed-beta_current_i386.deb) ...
Setting up mod-pagespeed-beta (0.9.16.9-r576) ...
Enabling module pagespeed.
Run '/etc/init.d/apache2 restart' to activate new configuration!

Follow the last command and you’re done! Visit your sites to see the instant improvement.

<script>
	images = [
	  <?php for ($i=0 ; $i <= count($cms_images); $i++) : ?>
			{
			  "id":"1",
			  "title":"Title <?= $i ?>",
			  "image_uri":"<?= $cms_images[$i]['location']) ?>",
			}
		<?= ($i < count($cms_images)) ? ',' : ''; endfor; ?>
	];
</script>

Now that you have a nice structure and the pertinent information, you’re able to create the image on the fly.

<script>
  pic = Array(); for (var i=0; i < images.length; i++) {
    pic[i]       = new Image();
    pic[i].src = images[i]['image_uri'];
  };
</script>

For optimal performance, place these snippets in the head.

If my websites are down because Ma’ is taking a sunday drive through google town, I’m probably not going to attract too many new clients. So, I decided to jump ship. Considering that I needed private hosting and the ability to heavily modify the server’s configuration I chose to go with one of these new fangled “unmanaged” hosts (do it yourself) http://linode.com. I end up paying less, but getting much more powerful hardware.

Having never taken on these system’s administrative duties that MediaTemple used to charge me a pretty penny for, you might expect it to take a good amount of time to research and execute such tasks. I’m here to tell you, your host is not worth it. They are taking advantage of you. You’re smart enough to do it on your own. In just a few hours I managed to install Ubuntu 10.04 LTS, tighten up security by locking down common attack points, applied for, installed and configured google apps for De Valdez LLC, installed and configured Apache 2, MySQL, PHP, Ruby, migrated 8 full websites and databases, and updated DNS to boot.

Sounds like a lot, but it’s really not. I think if you navigate this site you’ll find it’s quite quick even for minimal design. In coming posts I’ll outline the above steps and explain how to manage your own web server.

This changes the WP Logo to an image of your choosing, and alters the link and title of that node.

Smiles all around.

//Custom Login Screen
function custom_login_logo() {
    echo '<style type="text/css">
        		h1 a {
				background:url('.get_bloginfo('template_directory').'/images/sprite.png) no-repeat scroll -149px -73px;
				height: 8px !important;
				margin: 10px auto;
				width: 213px !important;
			}
    </style>';
}

function change_wp_login_url() {
echo bloginfo('url');
}
function change_wp_login_title() {
echo get_option('blogname');
}
add_action('login_head', 'custom_login_logo');
add_filter('login_headerurl', 'change_wp_login_url');
add_filter('login_headertitle', 'change_wp_login_title');

Optimizing and refactoring jQuery code is not as difficult as it seems. You do need to be aware of the most currently available methods though, so below we’ll examine the new to 1.4.2 method .delegate().

// Bad Code
$('#menu li a').click(function() {
  $(this).hide();
});

// Good Code
$("#menu li a").live('click', function() {
  $(this).hide();
});

// Coding Way Forward
$("#menu").delegate('li a', 'click', function() {
  $(this).hide();
});

This technique will offer substancial boosts in performance when used appropriately. In previous versions of jQuery .live() and .delegate() where not available. During that time the typical way of approaching the event listener for clicking was through .click(). However, with the introduction of these two new methods we can use to achieve the same effect with less strain on the DOM.

In the first example .click added an event handler to all anchors in links in the element corresponding with the ID of menu (#menu). Using this method every selected element gets its own event handler. It bound the click to a callback defined as an inline function, $(this).hide(); This is ok, if you have one link, but if you have two it become redundant.

In the second example .live(), the effect is the same but it uses only one handler. It uses the parent element of the jQuery selector. So even if there 100 child li a’s of #menu, it still only uses one event handler.

The .delegate() improves on this by choosing the parent as explicitly defined, instead of relying on the DOM to calculate which element that is. It then applies a single event handler to that element. The only time .live() is appropriate is when the parent element is dynamic, meaning it’s not always the same for the children you want to target. Otherwise, using .delegate() will significantly decrease the use of the DOM when dealing with a large number of elements.

This post will explain how to add a custom Twitter widget without all of the Twitter branding. Below you’ll see an example containing clean style-able markup without all the birds flapping around.

I’ve become a big proponent of Google hosted scripts as promise to keep them up to date and save you the hassle. And most of the time it will only cost you one small http request.

<script
  src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"
  type="text/javascript">
</script>

After the script is included there are a number of options available.

• id: your screen name on Twitter, mine is “mrevd“
• count: number of twitters you want, defaults to 1.
• clearContents: if you have content in the container you may want to clear it. Defaults to true.
• enableLinks: true/false – scans the tweet for a link and makes it clickable, includes @replies and #hashtags, by default is true.
• ignoreReplies: true/false – skips over tweets starting with @. If requesting 1 tweet, and this flag is set, behind the scenes it will request 2 in case the first starts with @ – but if the 2 most recent are replies, nothing will be shown.
• template: the HTML template to use within each li element. See below for template variables.
• prefix: if not using a template, you can use this. Note that you can use template variables in this field.
• timeout: Number of milliseconds before triggering onTimeout. If onTimeout is set, timeout defaults to 10 seconds.
• onTimeout: Function to call when timeout is reached. Context is set to HTML element tweets were going to be inserted into.
• onTimeoutCancel: true/false – if not set, the timeout can trigger, but then the Twitter script could complete and override the cancel. To avoid this, set onTimeoutCancel = true. Defaults to false.
• newwindow: true/false – if set to true, all links in tweets (and otherwise) will open in a new window. Defaults to false.
• callback – Function to call when the twitter render is completed. Doesn’t fire if the script times out.

Some variables:

• text – the actual status message
• id – id of status message
• source
• time – relative ‘friendly’ time
• created_at – raw time
• user_name – real name
• user_screen_name – username
• user_id
• user_profile_image_url – avatar
• user_url – home page
• user_location
• user_description

Add a container:

<div id="twt">
 <p>Loading... <img src="/images/indicator.gif" /></p>
 <p><a href="http://twitter.com/mrevd">Too slow? Here's my profile.</a></p>
</div>

And the script

<script
 src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"
 type="text/javascript">
</script>
<script type="text/javascript" charset="utf-8">
getTwitters('twt', {
  id: 'mrevd',
  count: 3,
  enableLinks: true,
  ignoreReplies: true,
  clearContents: true,
  template: '"%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});
</script>

All together, we have a nice widget sans branding ready for styling.

This is a quick tut for the fastest way to install Magento. You’ll need SSH access and the wget utility if you don’t already. First step is to visit Magento and make a note of the latest stable release. At the time this post was written, the latest release was 1.4.1.1 Next, log into your root directory via SSH and run the following commands:

wget http://www.magentocommerce.com/downloads/assets/1.4.1.1/magento-1.4.1.1.tar.gz
tar -zxvf magento-1.4.1.1.tar.gz
mv magento/* magento/.htaccess .
chmod -R o+w media
./pear mage-setup .
./pear install magento-core/Mage_All_Latest-stable
touch var/.htaccess | mkdir app/etc
chmod o+w var var/.htaccess app/etc
rm -rf downloader/pearlib/cache/* downloader/pearlib/download/*
rm -rf magento/ magento-1.4.1.1.tar.gz

After that all it takes is to point your browser to the URL associated with the root directory and follow the simple web based install.

Note: This article is for the latest version of the tracking code. If you are using the older version, please read the following article.

To determine which tracking code you are using, please see Which version of the tracking code am I using?

It’s easy to have Google Analytics track clicks on links that lead to file downloads. Since downloads generally do not lead to a pull page that would contain the tracking code, we have to make notifying Analytics of a special event. We do this through _trackPageview(). The following code will assign a pageview to the specified link so Analytics will treat clicks to it as a a view of this pseudo-page.

<a href="http://www.example.com/files/map.pdf" onClick="javascript: pageTracker._trackPageview('/downloads/map'); ">

Important: if your pages include a call to _trackPageview, _setAllowLinker _trackTrans(), your Analytics tracking code must be placed in your HTML code above any of these calls. In these cases the tracking code can be placed anywhere between the opening tag and the JavaScript call.

To verify that _trackPageviewis being called correctly, you can check your Top Content report 24-48 hours after the updated tracking code has been executed. You should be able to see the assigned pagename in your report.

But avoiding lawsuits and fulfilling these moral duties to the disabled in not the only reason to include affordances like these in our designs. There are over 60 million disabled Americans, over 500 million worldwide. According to of 2010 census that’s nearly 25% of Americans². With such a huge percent of the population, Fortune Magazine has cited this market to be one of the largest, and most forgotten about demographic to target. Collectively, the annual gross income of disabled Americans is over $1 trillion.
Full article here.

Below, I’ve compiled a number of different ways in which we can make our sites more accessible. Some of the techniques here are having simple implementation, while others may require a little more time and investment but are potential business opportunities, especially for NPO’s.

1. WAI-ARIA

The first measure to consider when improving a site’s accessibility is this set of documents, published by the W3C (Worldwide Web Consortium) called WAI-ARIA. You thought we went crazy with the acronyms… This is the Web Accessibility Initiative – Accessibility for Rich Internet Applications. Any takers for S.W.A.I.? This primarily for the developer’s consideration and would involve standard processes of inserting metadata into regular HTML.

2. Progressive Enhancement

Progressive enhancement would be a design that takes into consideration modern browsers’ capabilities. Newer technology is better technology. It no longer a presentational argument. Browsers like IE6 and 7 are under constant scrutiny from developers on a global level for important reasons. Typically they don’t display content as they should but, more importantly they lack key functionality that not only aids the disabled but enhances every users experience. Progressive enhancement is a methodology where sites are built to function in older browsers and then add newer features for those that can access them.

3. Alternate Content

It goes without saying that images are there to support the textual content in order to convey the most powerful message possible. Making sure that the text stands on it’s own, or providing an alternative that supports images and videos is not always a primary concern. Is our alternative comparable to the real thing?
When you read the word below what do you envision? Hold you mouse over the word ‘Hungry Youth’ experience what a screen reader might miss.

Alt tags are deserving of well constructed copy too.

4. Captions

Similarly, video clips are deserving of well constructed captions or even full transcripts for the visually impaired. As an added bonus, captions help search engines index non-textual content. SEO boosters!

5. Screen Reading Software

Most blind and seeing impaired people use screen reading software when browsing websites. If the site doesn’t read anything to the user, they’ll go elsewhere fast.

6. Audit

Why do an accessibility audit?

“Web sites that are not accessible run the risk of costly legal settlements and a potential loss of business by being ‘named and shamed’ by pressure groups. As well as the reduced risk of litigation, accessible web sites rank higher in Google, they are easier to maintain, they increase brand equity and they can be used more easily by the large group of people who surf the web with new technologies like mobile phones.”

7. Usability Testing

Usability testing is another invaluable technique in identifying potential accessibility concerns. Having the entire office give there perspective on the functionality and affordances found in new designs is a tremendous help. Getting real feedback, in detail, about any problems encountered will help. Not accessibility issues will be immediately apparent.

8. Font Controls

Most browsers, including IE can enlarge fonts dynamically but lots of people are not aware of this (ctrl and = keys simultaneously). For this concern, something like the Greenwich House font-resize option is perfect.

9. Text for Navigation

In general it is bad practice to use images in place of navigation text. Screen readers can’t understand them, font resizes much more smoothly.

Conclusion

Accessibility is not often thought about, but is becoming a more pertinent issue. With proper planning from concepting to development it doesn’t have to be difficult. Also promising that that our content reaches more people means more potential customers.

If you read this far, send me an email and I’ll buy you a drink!

One of the problems with WordPress’ custom fields is that they are pretty bare bones, not user friendly. There are no instructions for a user, and more importantly if any given field is no longer is use by a page or post IT GETS DELETED! C’mon WP, get with it.

It’s my pleasure to present to you Steve Taylor’s fix. You’ll see that with minimal configuration (only thing required to touch is the $customFields array) you can have a much better solution.

Here is a brief explination of its parts. The name key is the custom field slug. The title is what will be displayed in the new custom field within the dashboard. The description I found useful for on screen instructions and reminders of how the field is used. The type determines what is laid out in new field area, presets include textarea, checkbox, and plain ol’ text. The scope determines in which post type (page/post) this field available for. And the capability key is for permissions.

You may not enjoy permanent custom fields.

<?php

if ( !class_exists('myCustomFields') ) {

	class myCustomFields {
		/**
		* @var  string  $prefix  The prefix for storing custom fields in the postmeta table
		*/
		var $prefix = '';
		/**
		* @var  array  $customFields  Defines the custom fields available
		*/
		var $customFields =	array(
			array(
				"name"			=> "Sidebar_Heading",
				"title"			=> "Sidebar Heading",
				"description"	=> "Filling this out will overwrite the default sidebar heading.",
				"type"			=>	"text",
				"scope"			=>	array( "post", "page" ),
				"capability"	=> "edit_posts"
			),
			array(
				"name"			=> "Sidebar_Thumbnail",
				"title"			=> "Sidebar Thumbnail",
				"description"	=> "Filling this out will give this item a sidebar thumbnail. After uploading use the file name. <br />{ex: image.jpg}",
				"type"			=>	"text",
				"scope"			=>	array( "post" ),
				"capability"	=> "edit_posts"
			),
			array(
				"name"			=> "Artist_Name",
				"title"			=> "Artists Name {for sidebar}",
				"description"	=> "Filling this out in an artist post will give the artist his own sidebar. <br />Using the same artist name for a store item or free item will put that item in the artist sidebar.<br />{ex: Tone Tank}",
				"type"			=>	"text",
				"scope"			=>	array( "post" ),
				"capability"	=> "edit_posts"
			)
		);
		/**
		* PHP 4 Compatible Constructor
		*/
		function myCustomFields() { $this->__construct(); }
		/**
		* PHP 5 Constructor
		*/
		function __construct() {
			add_action( 'admin_menu', array( &$this, 'createCustomFields' ) );
			add_action( 'save_post', array( &$this, 'saveCustomFields' ), 1, 2 );
			// Comment this line out if you want to keep default custom fields meta box
			add_action( 'do_meta_boxes', array( &$this, 'removeDefaultCustomFields' ), 10, 3 );
		}
		/**
		* Remove the default Custom Fields meta box
		*/
		function removeDefaultCustomFields( $type, $context, $post ) {
			foreach ( array( 'normal', 'advanced', 'side' ) as $context ) {
				remove_meta_box( 'postcustom', 'post', $context );
				remove_meta_box( 'postcustom', 'page', $context );
				//Use the line below instead of the line above for WP versions older than 2.9.1
				//remove_meta_box( 'pagecustomdiv', 'page', $context );
			}
		}
		/**
		* Create the new Custom Fields meta box
		*/
		function createCustomFields() {
			if ( function_exists( 'add_meta_box' ) ) {
				add_meta_box( 'my-custom-fields', 'Custom Fields', array( &$this, 'displayCustomFields' ), 'page', 'normal', 'high' );
				add_meta_box( 'my-custom-fields', 'Custom Fields', array( &$this, 'displayCustomFields' ), 'post', 'normal', 'high' );
			}
		}
		/**
		* Display the new Custom Fields meta box
		*/
		function displayCustomFields() {
			global $post;
			?>
			<div class="form-wrap">
				<?php
				wp_nonce_field( 'my-custom-fields', 'my-custom-fields_wpnonce', false, true );
				foreach ( $this->customFields as $customField ) {
					// Check scope
					$scope = $customField[ 'scope' ];
					$output = false;
					foreach ( $scope as $scopeItem ) {
						switch ( $scopeItem ) {
							case "post": {
								// Output on any post screen
								if ( basename( $_SERVER['SCRIPT_FILENAME'] )=="post-new.php" || $post->post_type=="post" )
									$output = true;
								break;
							}
							case "page": {
								// Output on any page screen
								if ( basename( $_SERVER['SCRIPT_FILENAME'] )=="page-new.php" || $post->post_type=="page" )
									$output = true;
								break;
							}
						}
						if ( $output ) break;
					}
					// Check capability
					if ( !current_user_can( $customField['capability'], $post->ID ) )
						$output = false;
					// Output if allowed
					if ( $output ) { ?>
						<div class="form-field form-required">
							<?php
							switch ( $customField[ 'type' ] ) {
								case "checkbox": {
									// Checkbox
									echo '<label for="' . $this->prefix . $customField[ 'name' ] .'" style="display:inline;"><b>' . $customField[ 'title' ] . '</b></label>&nbsp;&nbsp;';
									echo '<input type="checkbox" name="' . $this->prefix . $customField['name'] . '" id="' . $this->prefix . $customField['name'] . '" value="yes"';
									if ( get_post_meta( $post->ID, $this->prefix . $customField['name'], true ) == "yes" )
										echo ' checked="checked"';
									echo '" style="width: auto;" />';
									break;
								}
								case "textarea": {
									// Text area
									echo '<label for="' . $this->prefix . $customField[ 'name' ] .'"><b>' . $customField[ 'title' ] . '</b></label>';
									echo '<textarea name="' . $this->prefix . $customField[ 'name' ] . '" id="' . $this->prefix . $customField[ 'name' ] . '" columns="30" rows="3">' . htmlspecialchars( get_post_meta( $post->ID, $this->prefix . $customField[ 'name' ], true ) ) . '</textarea>';
									break;
								}
								default: {
									// Plain text field
									echo '<label for="' . $this->prefix . $customField[ 'name' ] .'"><b>' . $customField[ 'title' ] . '</b></label>';
									echo '<input type="text" name="' . $this->prefix . $customField[ 'name' ] . '" id="' . $this->prefix . $customField[ 'name' ] . '" value="' . htmlspecialchars( get_post_meta( $post->ID, $this->prefix . $customField[ 'name' ], true ) ) . '" />';
									break;
								}
							}
							?>
							<?php if ( $customField[ 'description' ] ) echo '<p>' . $customField[ 'description' ] . '</p>'; ?>
						</div>
					<?php
					}
				} ?>
			</div>
			<?php
		}
		/**
		* Save the new Custom Fields values
		*/
		function saveCustomFields( $post_id, $post ) {
			if ( !wp_verify_nonce( $_POST[ 'my-custom-fields_wpnonce' ], 'my-custom-fields' ) )
				return;
			if ( !current_user_can( 'edit_post', $post_id ) )
				return;
			if ( $post->post_type != 'page' && $post->post_type != 'post' )
				return;
			foreach ( $this->customFields as $customField ) {
				if ( current_user_can( $customField['capability'], $post_id ) ) {
					if ( isset( $_POST[ $this->prefix . $customField['name'] ] ) && trim( $_POST[ $this->prefix . $customField['name'] ] ) ) {
						update_post_meta( $post_id, $this->prefix . $customField[ 'name' ], $_POST[ $this->prefix . $customField['name'] ] );
					} else {
						delete_post_meta( $post_id, $this->prefix . $customField[ 'name' ] );
					}
				}
			}
		}
	} // End Class
} // End if class exists statement
// Instantiate the class
if ( class_exists('myCustomFields') ) {
	$myCustomFields_var = new myCustomFields();
}

add_filter('tiny_mce_before_init', 'add_noborder');
function add_noborder($initArray) {
	$initArray['theme_advanced_styles'] = "noborder=noborder";
	return $initArray;
}