Mid-May: Went to VA to go apartment hunting with the girlfriend. We found a nice little place for about $800 a month, we move in July 21st.

End of May: This is where everything went a bit insane. I had a bit of life-changing news and had to make a trip to Virginia (more on that when I feel the time is right). In order to afford the trip, I picked up a friend of mine who was coming back from A-School for the Navy and drive him to Havelock, NC.

Beginning of June: Literally on the way back from dropping off my friend Justin at his parent’s house, I was informed that they had taken my Nana off life support. About 10 hours later she passed away after struggling against cancer for over 3 years. I then drove from my home in North Carolina to Indianapolis, IN the next day to make it to her funeral, which was a big ball of crazy events in itself due to how my grandpa was acting towards the entire family.

So, in all, I put about 5,000 miles on my car in a little over a month, I drove (roughly) a total of 45 hours in the span of 2 weeks, and had two life altering events occur. Hectic, stressful, but it’s all done and over with now.

With all the communities floating around the web today, it can be quite difficult and a bit overwhelming to keep up with all the activity. I know that I can’t always keep up with what’s going on in every community, but there are a few tools that I use to keep me updated and participating. Here’s a short list of some tools:

RSS

Probably your best friend when it comes to staying updated to what’s going on around the web. RSS makes it easy to see, at a glance, what people are blogging, tweeting, and submitting to various social media outlets.

Keep in mind, you’ll need a good RSS Reader. I use the Feed Sidebar addon for Firefox, but there are many other great plugins and online tools to be considered.

Firefox Addons

If you’re a Firefox user, you have more tools at your disposal for staying in the game than most. There are dozens, if not hundreds, of addons available for the different communities around the web. Using these tools, it makes it less time consuming to participate, as you may not even have to visit the web site you’re participating with.

Here are a few Addons to check out:

StumbleUpon Toolbar - Essential to using StumbleUpon.

Mahalo Share - Suggest search results to Mahalo, and share those results with many different online communities.

Shareaholic - Shareaholic is an Addon that I recently discovered when I switched to Firefox 3rc1. It supports: digg, del.icio.us, facebook, foxiewire, friendfeed, google bookmarks, google reader, healthranker, magnolia, mixx, reddit, simpy, stumbleupon, streakr, truemors, tumblr, twitter, bzzster, etc. Probably the most useful tool in your arsenal.

TwitterFox - My choice of Twitter addons, but there are many others you can use.

Those are just a few I suggest giving a go, keep in mind there are many, many more that you can use.

FriendFeed

Last on this short list, FriendFeed. I just recently started using FriendFeed a week or so ago, and it’s turning out to be one of the most useful resources available to me. Not only can I track what my friends are up to via their FriendFeed accounts, I can add “imaginary friends” to keep track of various other people who may not be a member of FriendFeed. If you’re looking to stay in the game, and socialize with people, FriendFeed is invaluable.

What are some of the tools you use to stay up to date with your communities?

Jason Calacanis and Pat Phelan have both written about how they would be willing to pay for a Twitter Pro/Plus that offered a guarantee of increased service reliability. This all comes as a response to the service interruptions that Twitter experiences almost every day.

I’m not sure that I see the point in paying for the increase in reliability, for a couple of reasons.

There’s Really No (Valuable) Return

This is a deal breaker for me — I would gain nothing in return for the money I would be paying each month. Sure, I would be able to tweet my heart out while others are staring at the “Somethings technically broken” message, but those tweets would be seen by few people. I would only be tweeting to those few who pay for service. This defeats the purpose of using Twitter.

A Paid Service Could Alienate Users

Probably the biggest problem with the idea of paying for service reliability is that non-paying users would almost certainly feel like any service interruptions are targeted at getting more people to pay. I’m not saying that the Twitter team would actually do this, but you can’t control paranoid crowds of users. Just look at the “bury brigade” theories that had so many Digg users up-in-arms early last year; people will get paranoid and leave in frustration.

Are Service the Interruptions Really THAT Bad?

I love following the links shared, gaining insight into random person’s life-happenings, and the whole experience in itself, but it’s not essential to my day. When Twitter goes down it is annoying, but it’s not really that big of a deal. When things go wrong with Twitter, I get frustrated and move on. It’s not so important to my every day life that I’d be willing to pay my hard-earned dollars to improve it’s reliability.

Have you ever saved a post on your blog only to realize later that you accidentally erased a critical paragraph? Ever worked on a blog with multiple authors and needed to keep a log of who changed what and when?

WordPress should store a history of all your posts. You’d get protection from accidental changes, and you’d be able to see a clear timeline of the evolution of each of you posts.

Happily, WordPress is awesome! In the upcoming WordPress 2.6 release, the feature exists and rules!

That’s right, no more accidentally deleting an entire paragraph only to realize you’ve screwed the pooch. Also, no more grappling with who edited what post, when, and how much on multi-author blogs.

Read & See More: Post Revisions in WordPress 2.6

Example 1 - Two images

In the first example I’ll be using two different image files, one being the original image and the second being an image edited to have a lighter opacity than that of the original. One advantage of this technique is how easil you can control the images being displayed, all without the use of Javascript.

Click here to view the working example.

Here’s the HTML code for this example:

<div id="rollover">
<a href="#"></a>
</div>

You may be asking yourself: “Wait, there’s no image there?!”, and if you’re unfamiliar with this technique, I don’t blame you. Let’s take a look at the CSS to understand what’s going on:


<style type="text/css">
#rollover {
width: 500px;
height: 375px;
border: 1px solid #000;
}
#rollover a {
display: block;
background: url('cssrolloverimage1.jpg') no-repeat;
width: 500px;
height: 375px;
}
#rollover a:hover {
background: url('cssrolloverimage2.jpg') no-repeat;
}
</style>

Using CSS, we make all the <a> tags inside the <div> tag with the ID “rollover” appear as block elements (display: block). Items given the display value of “block” in CSS tend to behave like the HTML elements DIVs, headings, and BLOCKQUOTEs. The reason we want our <a> tags to appear this way is so that we can define a custom width and height for that particular element to fit the dimensions of our images.

Pay close attention to this bit of CSS:

#rollover a {
display: block;
background: url(’cssrolloverimage1.jpg’) no-repeat;
width: 500px;
height: 375px;
}
#rollover a:hover {
background: url(’cssrolloverimage2.jpg’) no-repeat;
}

This is where our rollover effect is taking place. Now when the link is displayed, you will see the first image with the lighter opacity. When you place your mouse over the image, it will be switched to the full opacity image.

Example 2 - One Image

This next example is often used in navigation menus that incorporate a background image for the links. One background image is used for both the regular link state and hover/selected states. The rollover effect is achieved by using varying background image positions. One advantage of this technique is that only one image will be loaded into the browser. It’s a bit impractical when using larger images, and you have to manually edit each image to include both a “inactive state” and “active state”, but it’s still a very useful technique.

Click here to view the working example.

Here’s the image we’ll be using in this example:

Photo by: http://flickr.com/photos/marimoon/

When viewing the image by itself you see both states. One is the lighter opacity (bottom) and the other is the regular opacity (top) that will only be visible when the mouse is placed over the image.

Let’s look at the HTML:
<div id="rollover">
<a href="#"></a>
</div>


You’ll notice that it’s exactly the same as the previous example, this is separation of design and content at work. The differences lay within the CSS:


#rollover {
width: 500px;
height: 375px;
border: 1px solid #000;
}
#rollover a {
display: block;
background: url('cssrolloverimage3.jpg') no-repeat;
background-position: 0px -375px;
width: 500px;
height: 375px;
}
#rollover a:hover {
background-position: 0px 0px;
}

Like the example before, the <a> tag is display as a block element. We then specified the background image (seen above). What’s new is the “background-position” property, which specifies the position of the background image within the element it is appearing. You can position the background image in several ways, but we want to be absolute in our placement, so we’ll specific the position on the X-Axis (horizontal) and Y-Axis (vertical).

background-position: X Y

The rollover effect is achieved through a bit of hide-and-seek. We hide the upper portion of our background image by positioning the image at 0px on the x-axis (horizontal) and -375px on the y-axis (vertical).

#rollover a {
display: block;
background: url('cssrolloverimage3.jpg') no-repeat;
background-position: 0px -375px;
width: 500px;
height: 375px;
}

To make the switch, we reposition the background image when the mouse is hovering over our <a> tag, this time to 0px on the x-axis and 0px on the y-axis, displaying the previously hidden portion of the background image and hiding the previously visible portion.

#rollover a:hover {
background-position: 0px 0px;
}

Download the Examples

Stuff That Needs Fixin’

• Need to fix up the CSS for Internet Explorer 6 & 7, Opera, and Safari.
• Need to inlcude styles for various elements and widgets.
• Need to make sure I don’t break and W3C rules in my CSS/XHTML (grrrr.)
• Add backwards compatibility for Wordpress installations < 2.5 (gravatar support, etc)
• Crazy code cleaning/organization

kuler
I just recently discovered this website and I’ve fallen in love with it. It’s a bit like ColourLovers, but from the people at Adobe. Very good source of inspiration for a color scheme if you’re color-retarded like myself.

101 Color Resources for Web Designers
Related to the previous link, here’s a list of 101 color resources for web designers.

Dropline Nuovo Icons
Just for the hell of it, here’s a great set of icons.

I am trying to change the titles of my sidebar widgets (i.e. “Pages,” “Recent comments,” “Meta,” etc) to images. Since my sidebar is widgetized, it seems this is more difficult than simply changing a few things in my sidebar.php document.

Does anyone have any tips?

It seems that with the implementation of widgets in later versions of Wordpress, users have had some trouble customizing their sidebar titles with images. In early versions of Wordpress, one could just go into the sidebar.php file and replace the titles of sidebar sections with an image using the good ol’ fashion HTML tag. This is no longer possible since widgets are dynamically added to the sidebar and are no longer located in the sidebar.php file.

Although I personally would rather use text to title sections on my sidebar, for the reduce loading times and various other reasons, using an image can allow you to use non-standard fonts and add a bit of flare to your blog. I’m going to show you have to achieve this using a bit of “detective work” and CSS.

Step One: Creating your image

This is more of a tip than a step.

Before you begin, you should have the image you’ll be replacing the widget title with already created and uploaded to your server (or a free image host). It’s also a good idea to dive into the stylesheet of your Wordpress theme to figure out the widget of the sidebar, and create your images using that width. The default theme, Kubrick, has a sidebar width of 190px.

Step Two: Find out the structure of a widget title for your theme

The first, and easiest, step is to figure out how your Wordpress theme outputs a widget’s title in the sidebar. You can do this by going to your dashboard and adding the widget you’d like to replace the title of to your sidebar. Once the widget is placed in the sidebar, browse over to your blog. In your browser click View–> Page Source (or just “Source if you’re using IE). Now search the document for the title of the widget you’re looking for; for example “Recent Posts”.

If you’re using the default Wordpress theme, Kubrick, you should see something like this:

<li id="recent-posts" class="widget widget_recent_entries">
<h2 class="widgettitle">Recent Posts</h2>
<ul>
<li><a href="http://yourblogurl.com/?p=1">Hello world!</a></li>
</ul>
</li>


You’ll notice that the <h2> tag encasing the title of the widget, Recent Posts, has a class defined as “widgettitle”. This is used to define the overall style of every widget title on your blog, but because we’re going to want each widget to have it’s own unique image as a title, we are not going to worry about this class. What we wanted to find out was the class of the overall widget, in this case that can be found in the first line inside the <li> tag, and that class is “widget_recent_entries”.

Step Three: Writing the CSS

Now that we know what class to use, we can write the CSS that will insert our image in place of the text title of the widget. I’m using the default theme as an example, remember that your theme’s sidebar may output widgets in a different fashion and this may effect the CSS you’re going to be writing:

li.widget_recent_entries h2 {
display: block;
width: 125px;
height: 45px;
text-indent: -9999px;
background-image: url('http://www.theurlofyourimage.com/image.jpg');
background-repeat: no-repeat;
background-position: center center;
}

The above CSS should be added to the end of your stylesheet and will replace the text in title of the Recent Posts widget with an image of your choosing. Remember to edit the width and height to suite your image, and also remember to change the URL to point at your image.

Now that you have one image title in your sidebar, use the same process to find the class for each widget title you want to change!

I hope this little tutorial helps out in some way!