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

The first archive webpage at google.com that resembles a search engine was recorded on December 2, 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

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 Hates Robots

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.

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.

WPtouch
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.

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;
    float:left;
}

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

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.

Software Development

• Software will rule the world.
• Software will inherit the earth.
• In the interwebs, beta is forever.
• The future is written in code.
• When you have no QA, everyone does QA.
• I breakpoint for bugs.
• Can’t say enough good things about jqPlot. It’s a great JavaScript charting library.
• Search term that popped up on my blog’s analytics dashboard: programming languages are like girlfriends: the new one is better because *you* are better
• I prefer “show me the source code” over “show me the money”
• No simple change ever ends up being so simple.
• Optimize for simplicity.
• I remember when developing in JavaScript was cool, then when it wasn’t, then it was cool again, back to not, … fast forward to now.
• How many licks does it take to get to the Tootsie Roll center of a Tootsie Pop? And … how many leaks does it take to crash your app?

Thought Leadership

• Seek out silver bullets instead of reaching out to golden hammers.
• The future is not in plastics, it’s in multicores.
• Delegate and defer.
• I have 99 problems and deferring and delegating them ain’t one.
• Brainstorming the perfect storm.
• “If you build it they will come” has been replaced with “test it, see if they will come, outsource it, and charge for it.”
• No one starts out as an expert.
• As a consumer, this is one concern I have with cloud/apps, that when they get updated you are forced into the upgrade no matter what.
• If every piece of software is in the cloud, there will not be any legacy apps, everything will be in ‘beta’ or dead.
• If you have writer’s block, put a stick of creative dynamite in it and light the fuse.
• Disrupt all the things.
• It is unfortunate that instead of finding the silver bullets people settle for a golden hammer.

Product Placement

• Google started out as a search engine but when they searched for revenue the top result was advertising.
• It has been reported that Google has applied for the TLD .lol in addition to .google and .youtube.
• Is Google a gTLD squatter? They have applied for 98 domains including .app, .lol, .dad, .foo, …
• The MLB and NFL should apply for .mlb and .nfl TLDs.
• I’ll be happy when Siri can monitor my heart rate, cholesterol, weight, and automatically schedules exercise as needed.
• Apple is not good at backward compatibility. I have a perfectly working second generation iPod Touch but a ton of the apps have stopped working.

Silicon Startup

• At some point in a company’s history it will be either be in one of the following stages: resurrected (IBM), zombie (Yahoo), dead (Kodak).
• In Silicon Valley, apps that attempt to make Silicon Valley nerds cool or popular get immediate funding.
• Fund raising is easier the pimping!
• If the bubbly flows day and night then we must be in a bubble.
• Pivots are to be the new sport at this Sumner Olympics.

Google IO

• Facebook has nearly double the amount of users than there are Android devices.
• Google is demoing Jelly Bean (Android OS 4.1) but still the most common Android version in new phones is around 2.3.
• The one feature I really want on Android OS is the ability to easily take a screenshot or screencast from my device.
• Android is still playing catchup to iOS. The audience doesn’t even know when to applaud. #awkward
• Wow… Jelly Bean has a built it Siri clone. #tailgating
• “Smarts phones are only as smart as its users.”
• Android is the perfect stalking device. I knows your appointments, your routes, your schedule, you contacts, your preferences
• What the towel covered stool in the middle of the stage at? Seems cheap way to reveal the new Nexus 7 tablet.
• “I read this so many times I don’t know what will be exiting to you”
• Asus is making the Nexus 7 tablet.
• The crowd don’t seem as excited as you would think for the big reveal on the Nexus 7 tablet.
• Still waiting for the killer, must have, innovative features available in Nexus 7 tablet.
• “Video is stunning in Nexus 7, you can see the individual hair in Ron Swanson’s mustache.” – #awkward
• Nexus Que?
• Sergey looks like Larry, Larry Ellison.
• yeah, woo who – Sergey Brin.
• The police and military industrial complex are going to love Google’s Project Glass.
• Google Project Glass available to US-based IO attendees for $1500. Not intended for consumers. Shipping early next year.
• Android Developer Pack: Galaxy Nexus phone, Nexus 7 tablet, Nexus Q. #oprahmoment

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.

<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.

Using border-radius
For the following examples, I’ll using the following CSS classes, which I hope are self explanatory.

.box {
    width: 100px;
    height: 100px;
    float:left;
}

.red {
    background: red;
}

.orange {
    background: orange;
}

.green {
    background: green;
}

.purple{
    background: purple;
}

The easiest use of border-radius is where all four corners have the same border curve radius. If all corners have the same curve radius all you need to supply is one px radius value.

<div class='box orange' style='border-radius: 20px;'></div>

In the examples provided in this tutorial, we fixed the width and height of the box div to be 100px. If we increase the border radius to 50px we can have a perfect circle.

<div class='box orange' style='border-radius: 50px;'></div>

What makes the border-radius property powerful is that you can set a different radius for each corner. Just enter four values, the first one will set the radius for the top-left corner, the second sets the top-right, then the bottom-right, and the bottom-left corner. If the value 0px is used, that corner will not have any curvature. The following HTML examples sets different border radius values for each corner generating a leaf looking shape.

<div class='box green' style='border-radius: 0px 60px 40px 60px;'></div>

Placing four similar div tags in place, you can create a four leaf clover shape or a circle.

<!-- four leaf clover -->
<div class='box red' style='border-radius: 50px 75px 0px 75px;'></div>
<div class='box orange' style='border-radius: 75px 50px 75px 0px;'></div>
<br style='clear:both' />
<div class='box green' style='border-radius: 75px 0px 75px 50px;'></div>
<div class='box purple' style='border-radius: 0px 75px 50px 75px;'></div>

<br style='clear:both' />

<!-- circle -->
<div class='box red' style='border-radius: 100px 0px 0px 0px;'></div>
<div class='box orange' style='border-radius: 0px 100px 0px 0px;'></div>
<br style='clear:both' />
<div class='box green' style='border-radius: 0px 0px 0px 100px;'></div>
<div class='box purple' style='border-radius: 0px 0px 100px 0px;'></div>

You can even nested rounded div tags to create a bullseye image.

Fun with CSS border-radius

As of this time, Chrome, Safari, and Firefox support border-radius.

Getting Started
The code snippets for this example assume you have already downloaded jqPlot and have included the following JavaScript and CSS source files from the distribution.

<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.min.css" />
<script src="jqplot/jquery.min.js" ></script>
<script src="jqplot/jquery.jqplot.min.js" ></script>    
<script src="jqplot/plugins/jqplot.pieRenderer.min.js"></script>

The jqPlot graphs are drawn on a div tag and this example will require the following HTML snippet.

<body onload='drawChart()'>
   <div id="chartDivId" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>
</body>

Pie Chart Data
A single slice of a pie chart is stored in a two element array where the first elemnt contains the string label and the second element stores the slice data value. A single pie series is made up of one ore more slices, and a pie chart may have one or more series. The typical pie chart is made up of one series, but there are some charts that can allow for multiple pie series.

function drawChart() {
  var slice_1 = ['North America', 150];
  var slice_2 = ['Europe', 50];
  var series = [slice_1, slice_2];
  var data = [series];

  var options = {
    title: 'Sales by Region',
    seriesDefaults: {
      renderer: jQuery.jqplot.PieRenderer
    },
    legend: { show:true, location: 'e' }
  };
  
  $.jqplot('chartDivId', data, options);
}

jqPlot will all compute the percent for each slice based on it’s value, so the slice for North America will be 75%, and Europe will be 25% for the the values 150 and 50, respectively. The pie chart generated from the above code will be simple and undecorated.

jqPlot Pie Chart

We can add additional options, for example, maybe we want to display the percent amount for each slice. To do so, we can update the options object with the showDataLabels property such as the in the following JavaScript code snippet.

var options = {
  title: 'Sales by Region',
  seriesDefaults: {
    renderer: jQuery.jqplot.PieRenderer,
    rendererOptions: {
      showDataLabels: true
    }
  },
  legend: { show:true, location: 'e' }
};

By default, the showDataLabels property shows the percent of the slice. To show the slice data value, rather than the percent, set the dataLabels property to ‘value’ such as the following code.

var options = {
  title: 'Sales by Region',
  seriesDefaults: {
    renderer: jQuery.jqplot.PieRenderer,
    rendererOptions: {
      showDataLabels: true,
      dataLabels: 'value'
    }
  },
  legend: { show:true, location: 'e' }
};

You can further change how the pie chart is rendered by setting the fill, sliceMargin, and lineWith rendererOptions object properties. The fill property accepts a boolean value, and you can specify the sliceMargin and lineWith with an interger value. You can also specify the angle from which to start with the startAngle property. Putting all this together, you can create a pie chart like the following.

var options = {
  title: 'Sales by Region',
  seriesDefaults: {
    renderer: jQuery.jqplot.PieRenderer,
    rendererOptions: {
      showDataLabels: true,
      dataLabels: 'value',
      fill: false,
      sliceMargin: 5,
      lineWidth: 5,
      startAngle: 45
    }
  },
  legend: { show:true, location: 'e' }
};

jqPlot_Pie_Chart with No Fill

Donut Chart
Using the same data and same options object, you can render a pie chart as a donut. To display a donut chart you will need to load int the jqPlot donut renderer.

<script src="jqplot/plugins/jqplot.donutRenderer.min.js"></script>

Once you have loaded the donut renderer, just update the render property in the options object.

var options = {
  title: 'Sales by Region',
  seriesDefaults: {
    renderer: jQuery.jqplot.DonutRenderer,
    rendererOptions: {
      showDataLabels: true,
      dataLabels: 'value',
      fill: false,
      sliceMargin: 5,
      startAngle: 45
    }
  },
  legend: { show:true, location: 'e' }
};

jqPlot Donut Chart