Jul 30 2012

Social Networks for Developers and Designers

There is a growing number of social networks and websites that are targeting software developers and graphic designers. Some of these sites, most notably github, have been used as a recruiting tool and in the interview process in hiring developers.

Even though it is not strictly a social networking site, github has a lot of social and collaborate features that make it resemble one. But instead of posting your latest vacation pictures, you can post the programing source files for the open source projects you are working on. You can post any source code, from a single script file you find useful to a larger project.

Coderwall allows developer and designers to post their skills and achievements and earn achievement badges. If someone forks your project on github, you get a badge. If you were a early github user, you get a different badge.

Coderwall Homepage

Coderwall Homepage

Forrst feels like a Twitter or Tumblr for technologists. You can follow people, post images or ideas, and like and comment other people’s posts.

Similar to other social networks, on geekli.st you can follow other users, high five their accomplishments.

Geeklist Homepage

Geeklist Homepage

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 14 2012

Retweet June 2012

From time to time I just blast tweets about software development, project planning, team dynamics, or whatever else comes to mind. Here is a synopsis of recent tweets and rants. If you want to follow the conversation follow me at techknow and/or juixe.

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