Jul 26 2012

Google, Yahoo, and Facebook’s First Website

The Internet Archive Wayback Machine is a great resource for looking at the history of a website. The Wayback Machine crawls the web and keeps a snapshot of a domain or website and it allows you to easily compare different snapshots. Using the Wayback Machine is like looking at the different digital archeological layers of a website’s design.

Using the Wayback Machine, I was able to dig up the original webpage hosted on google.com, yahoo.com, and facebook.com.

First Google Webpage
The first record webpage hosted at google.com is simple page with two links. The first link, Google Search Engine Prototype points to google.stanford.edu. The second link points to another version of the search engine at alpha.google.com.

Google's Website Nov 11, 1998

Google’s Website Nov 11, 1998

The first archive webpage at google.com that resembles a search engine was recorded on December 2, 1998.

Google's Website Dec 11, 1998

Google’s Website Dec 11, 1998

First Yahoo Webpage
The earliest archived webpage from yahoo.com was saved on October 17, 1996.

Yahoo's Website Oct 20, 1996

Yahoo’s Website Oct 20, 1996

First Facebook Webpage
Facebook uses a robots.txt that doesn’t allow the Wayback Machine to crawl the site and as such there are no achieved versions of the site.

Facebook No Robots

Facebook Hates Robots

Jul 25 2012

htaccess to Redirect WordPress Blog To Another Domain

If you have an existing WordPress blog that you’ve used for years and have built up some Google juice but now are required to relocate to a different domain, you way want to redirect all the inbound links for the old domain to your new domain. If you still have access to the old existing domain, you can easily redirect all the inbound links to the new domain using the following .htaccess script.

RewriteEngine On

RewriteCond %{HTTP_HOST} ^.*old-domain\.com$ [NC]
RewriteRule ^(.*)$ http://new-domain.com/$1 [R=301,L]

Replace old-domain and new-domain with the correct domain names. If you WordPress blog was located in old-domain.com/wordpress then drop this in the wordpress directory that contains your WordPress installation. Of course, this only works for as long as you have access to the old-domain. Also, be sure to use the same permalink settings in the new WordPress insulation as in the previous so that the redirection maps the blogs posts correctly.

Jul 23 2012

Essential WordPress Plugins

A lot has changed since I last listed my top WordPress plugins. Over the years I’ve been blogging and helping others set up their blogs, I’ve settled on the few must have WordPress plugins that are essential for any new blog.

Jetpack by WordPress
The company behind WordPress, Automattic, have compiled a collection of useful tools that is realized as the Jatpack by WordPress plugin. It’s really a plugin suite. Jetpack includes WordPress statistics right in your dashboard, social sharing widgets, WP.me short/tiny links, and other useful tools. In addition to all these features, Automattic is constantly added more add-ons and tools for this plugin.

Google Analytics
Even though it’s not been updated in a while, I still use Google Analytics so that I can track my sites’ visitors on Google Analytics. Even though the Jetpack by WordPress offers analytics, I’ve find Google Analytics to be more detailed in how it tracks visitors.

Google Sitemap Generator
Any plugin that helps search engines crawl your blog belongs in your toolbox. The Google Sitemap Generator does just that. This plugin creates a search engine friendly site map pointing out the most recent content on your site.

Yet Another Related Posts Plugin
I’ve been using Yet Another Related Posts Plugin for years. I can’t even begin to describe how this plugin works, simple put it magically detects similar blog posts on your site and creates additional links to them in the footer section of your post. This is a great plugin that helps your readers discover other similar posts on your site.

Now that more and more of your visitors are coming to your site using their mobile devices, such as the iPhone or Android phones, you may want to use a plugin like WPtouch. WPtouch creates a mobile device friendly version of your site.

Jul 16 2012

Add Shadows with CSS box-shadow Property

Over the last few years web browsers have made a lot of progress to add new features based on what is shaping up to be HTML5 and CSS3. I’ve already demonstrated what can be done with new CSS properties such as the CSS border-radius property. Now, I’ll cover the CSS box-shadow property.

Using box-shadow
This tutorial will demonstrate how to add shadows to a div HTML element using the CSS box-shadow property. For the purpose of this tutorial, we’ll the following CSS class that defines our div box.

.box {
    width: 100px;
    height: 100px;

As you can figure out by the property name, the box-shadow property can be used to create a shadow outside, or inside of your div box. In the simplest forms, you can add a drop shadow on the lower right of a div tag by adding the following CSS on the style attribute of the div.

<div class='box' style='box-shadow: 20px 20px 50px blue;'></div>

The first numeric value in the box-shadow property is the length of the shadow on the horizontal side of the div box, the second numeric value is the length of the shadow on the vertical side. The third value is the length of the blur. Additionally, you can add a blur color.

By default, having positive values for the horizontal and vertical blur length will produce a blue on the lower right of the div tag. Negative values are allowed which will mirror the blur on the other side. For example, to create a blue on the lower left side of the div tag change the box-shadow to the following.

<div class='box' style='box-shadow: -20px 20px 50px blue;'></div>

Using box-shadow with inset
You can add an additional value, inset, to force the shadow to be inside of the div tag. By default, by adding the inset value the shadow will be on the top left of the div but inside of the box.

<div class='box' style='box-shadow: 20px 20px 50px blue inset;'></div>

To change the direction of the box shadow, just switch the horizontal and vertical blur length values from positive values to negative.

Even blur
In addition to negative or positive values, you can enter 0 for the horizontal and vertical blur length. When you enter 0, the blur will be on both top-bottom for the horizontal and left-right for the vertical directions.

<div class='box' style='box-shadow: 0px 0px 50px blue;'></div>
Examples of box-shadow CSS property

Examples of box-shadow CSS property

To see some more examples of the box-shadow property in action see the the following gist.

Modern browsers
The CSS box-shadow works on modern browsers, which include the latest version of Safari, Chrome, and Firefox. As of this writing, it does not work in Internet Explorer.

Jul 6 2012

StackOverflow Traffic

There is nothing more that I like than to received a comment to some post I wrote years ago on how it helped someone out. Like this, I’ve come to know that small chunks of code I’ve freely made available are used in production at a variety of sites. It is my hope that the tutorials, examples, and code I write here is of help to others. Even though I like writing tutorials and code to help out my fellow developers, I’ve never answered or posted a question on StackOverflow. My technical blog is really a labor of love and I post around my busy schedule, I’ve never tried to do more than just write about the technology that I use. But even though I don’t use StackOverflow I recently found out from looking at my analytics that I receive a nice amount of visitors from the question and answer site.

StackOverflow Stats

StackOverflow Stats

It always surprises me which posts are the most visited. It’s always the one that you least expect. Either way, I’m always grateful that others have found them useful enough to share on sites like StackOverflow.

Jul 5 2012

Disable Right Click Menu in HTML

When browsing a webpage, you typically can click the right button on the mouse to reveal a context menu. The right click context menu usually has options such as Back, Forward, Reload, Stop, and View Page Source. When right clicking on an image, you have have the option to save the image or even set it as the desktop background. It’s rare but sometimes you want to disable the right click context menu. To disable the right click context menu you can set the oncontextmenu event to return false.

<body oncontextmenu="return false;">

If you only want to disable the right click context menu on a small part of your site, for example an image you don’t want your visitors to easily download or save you can add the oncontextmenu property to any div or img tag and disable the context menu only in that HTML tag.