Let’s face it, I haven’t exactly been the social light of the interweb for the past four or five months. This has mostly been due to me working constantly, but another factor was moving in with my girlfriend at her parent’s place. I didn’t have room to haul a 90+ pound, watercooled, monster PC into our room. So for the past few months I’ve been using their family PC, which is an older P4 machine.

Yesterday I was finally able to gather up enough cash to go get myself a decent laptop. Although, I didn’t splurge $1500 like I would have in years past, I got a pretty good deal on a great laptop at a place I usually wouldn’t be caught dead buying from. . . Best Buy.

The laptop I got is the Dell Inspiron 1318. It boasts 3GB of DDR2, an Intel Core 2 Duo T5750 (2.0gHz), 250GB Hard Drive, built-in web cam, bluetooth, and some other great features. Oh, and it’s only 13 inches in size (ala those tiny MacBooks).

Downside: It didn’t come with a battery. I know, the point of having a laptop is to compute on the go, but for the price I got this thing, I could care less about being tied to my power cord until I order a 9-cell battery from Dell.

Upside: The price tag of an Open-box, battery missing, display model. $367 after tax. Plus $60-100 for the battery. Good deal. These things run $700+ brand new.

Seems that Intel “bullied” Microsoft into labeling some of it’s hardware chipsets as “Vista Capable”, although, they were barely able to run Vista’s most basic features. Now there’s some sort of legal dance going on, and it seems that both parties are about to get into some serious trouble over this issue.

I’m not surprised this happened, hardware vendors will try anything to get you to buy a product even if it means lying to you about the capabilities. Microsoft may seem like an innocent party, but in reality they probably agreed to marking lower-end hardware Vista Capable to get customers to purchase their bloated, hardware intensive operating system.

Read More: Microsoft “caved” into Intel in Vista “Junk PC” scheme

This blog post is in response to a question Natilie posed in the Social Media room on FriendFeed.

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.

WordPress 2.6 isn’t anywhere near completion, but if you’re a WordPress user you just got a great bit of news about the upcoming release in your Dashboard this evening. Michael Adams writes:

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

Ever wonder how some images change when you roll your mouse cursor over them? CSS can be used to create a rollover image effect that is lightweight and easier to manage than the Javascript alternative. Here, I’m going to explain two different methods for creating a rollover image effect, both using background image replacement techniques.

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

I was browsing through the WordPress.org support forum today when I came across a question that I thought was worthy of a blog post. The question was:

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!

Are you using Twitter? I am. I can’t say that I’m completely addicted, but it’s nice to see what people are up to at any given time in the day. There is a problem with Twitter, not many people understand it or know about it (in respects to everyday folks). That’s why this video rocks:

Best Buy has officially launched a couple new services, one of which is a new online trade-in center for your old PCs, Game Consoles, and more. When I first read about the service, I thought to myself “This is a great idea, maybe I won’t have to worry about reselling my old hardware on Ebay anymore!”. Boy, was I ever wrong.

Here’s what my setup includes:

• EVGA 680i Chipset motherboard
• Intel Core 2 Duo E6600 @ 3.6ghz
• XFX GeForce 8800GT
• 500GG+ of Hard Drive Space
• A Very Freaking Expensive Watercooling Setup
• 2GB of OCZ DDR2 800

That’s just a quick run-down of what I have in my PC, here’s what the configuration on the Best Buy Trade-In center website looked like (click for full size):

Yeah, for all that hardware, they wanted to give me $400.96. Not even enough to cover the resale value of my video card, motherboard, and memory; much less the entire PC. . . .

Click for full size.