<sy:updatePeriod>hourly</sy:updatePeriod>
<sy:updateFrequency>1</sy:updateFrequency>

Not sure if this is a bug, error, or what but it was causing me grief. I haven’t been able to find others on the web complaining of this but my own solution was to remove the colons and traverse accordingly. I wrote a function that takes the feed as a string and returns the string with all colons inside tag names removed.

function removeColonsFromRSS($feed) {
    // pull out colons from start tags
    // (<\w+):(\w+>)
    $pattern = '/(<\w+):(\w+>)/i';
    $replacement = '$1$2';
    $feed = preg_replace($pattern, $replacement, $feed);
    // pull out colons from end tags
    // (<\/\w+):(\w+>)
    $pattern = '/(<\/\w+):(\w+>)/i';
    $replacement = '$1$2';
    $feed = preg_replace($pattern, $replacement, $feed);
    return $feed;
}

Had a great time this weekend attending the HTML5.tx developer conference. Lots of great developers and designers in the Austin area. Was fun to meet people, learn, and review technologies and techniques for building better experiences online. Some of the things discussed at the conference were

• HTML5 & DOM APIs
• Advanced CSS selectors
• HTML5 Video
• LESS (css)
• Modernizer, Yepnope, and Polyfills
• CSS3 and animations
• Building for experience not browser

Here is how you can disable the Google Chrome cache:

• open developer console
• click settings gear in bottom right
• check “Disable cache” under Network heading

This is as of version 14

You can get rid of any of the data or folders by deleting them from the server. The data is stored in files found starting at

/opt/graphite/storage/whisper/

Happy deleting!

Ever had the urge to test your site or your client’s site on all versions of IE? Me either! Introducing IE Collection. You can download the .exe that will install all the versions of IE that are compatible with your version of windows all the way back to IE 1! So whether your are feeling nostalgic or just need to get some testing done, download it from FileForum or Softpedia

To celebrate this blog post on this year’s Programmer’s Day, here is a this blog post as seen through IE 2′s eyes. How meta ; )

From the Rhino downloads page I downloaded rhino1_7R2.zip since R3 doesn’t work with Envjs at the time of this post.

I also downloaded the latest Envjs and placed it in the same location as the unzipped rhino folder.

Navigate in a terminal to the location of the unziped rhino folder and start up rhino.

java -jar js.jar

Then you will want to load the Envjs JavaScript that will emulate the browser environment. (location is relative to where the jar file is running from)

load("../env.rhino.js")

Then I tell Envjs to load external scripts found in the page. This is required because scripts running in Rhino with Envjs will have file system access.

Envjs.scriptTypes['text/javascript'] = true;

Then we navigate our emulated browser to the test page that I built.

window.location = "http://mikegrace.s3.amazonaws.com/geek-blog/rhino-envjs.html"

The test page that I built looks like this when you load it in a browser with JavaScript disabled

This is because the page content is built using jQuery

Rhino and Envjs Test<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script charset="utf-8" type="text/javascript">// <![CDATA[
    $(document).ready(function() {
      $(document.body)
        .append("
 
<h1>Header of the highest order</h1>
 
")
        .append("
 
Question: What is the answer?
 
")
        .append("<code>42</code>");
    });
 
// ]]></script>

Because Envjs will emulate a browser, we will be able to work with the page in Rhino like we would in a browser.

Getting the paragraph text is as easy as running some jQuery in the Rhino console

jQuery("p").text();

Awesome!

rhino1_7R2 mgrace$ java -jar js.jar
Rhino 1.7 release 2 2009 03 22
js> load("../env.rhino.js")
[  Envjs/1.6 (Rhino; U; Mac OS X x86_64 10.6.8; en-US; rv:1.7.0.rc2) Resig/20070309 PilotFish/1.2.13  ]
js> Envjs.scriptTypes['text/javascript'] = true;
true
js> window.location = "http://mikegrace.s3.amazonaws.com/geek-blog/rhino-envjs.html"
http://mikegrace.s3.amazonaws.com/geek-blog/rhino-envjs.html
js> jQuery("p").text();
Question: What is the answer?
js> jQuery("code").text();
42

If you are looking to debug your scripts in Rhino a bit better, you can launch the rhino console in the Rhino JavaScript Debugger using a command similar to this

java -cp js.jar org.mozilla.javascript.tools.debugger.Main

Installing StatsD on an Ubuntu server (10.04) was surprisingly easy. Here are the steps that I took. These will work from a fresh install of Ubuntu server 10.04 or after having installed and started graphite.

# INSTALL NODE.JS
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install python-software-properties git-core
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
 
# CLONE THE STATSD PROJECT
git clone https://github.com/etsy/statsd.git
 
# CREATE A CONFIG FILE
cd statsd
cp exampleConfig.js dConfig.js
# edit config file your settings
sudo vim dConfig.js
node stats.js dConfig.js
 
# START STATSD
node stats.js dConfig.js

When you start StatsD, it will probably give you a warning like

(node) process.compile should not be used. Use require(‘vm’).runInThisContext instead.

but it is still working as expected so you can ignore it.

You can then test to make sure StatsD is working. Edit and run this simple PHP script to throw some stats at your StatsD.

<?php
 
StatsD::increment("testing.increment");
StatsD::timing("testing.timing", 2345);
 
class StatsD {
    public static function timing($stat, $time, $sampleRate=1) {
        StatsD::send(array($stat => "$time|ms"), $sampleRate);
    }
    public static function increment($stats, $sampleRate=1) {
        StatsD::updateStats($stats, 1, $sampleRate);
    }
    public static function decrement($stats, $sampleRate=1) {
        StatsD::updateStats($stats, -1, $sampleRate);
    }
    public static function updateStats($stats, $delta=1, $sampleRate=1) {
        if (!is_array($stats)) { $stats = array($stats); }
        $data = array();
        foreach($stats as $stat) {
            $data[$stat] = "$delta|c";
        }
        StatsD::send($data, $sampleRate);
    }
    public static function send($data, $sampleRate=1) {
        $sampledData = array();
        if ($sampleRate < 1) {
            foreach ($data as $stat => $value) {
                if ((mt_rand() / mt_getrandmax()) <= $sampleRate) {
                    $sampledData[$stat] = "$value|@$sampleRate";
                }
            }
        } else {
            $sampledData = $data;
        }
        if (empty($sampledData)) { return; }
        try {
            $host = [your graphite host here];
            $port = [your graphite port here 8125?];
            $fp = fsockopen("udp://$host", $port, $errno, $errstr);
            if (! $fp) { return; }
            foreach ($sampledData as $stat => $value) {
                fwrite($fp, "$stat:$value");
            }
            fclose($fp);
        } catch (Exception $e) {
        }
    }
}
 
?>

Be sure to edit the $host and $port settings towards the bottom with the appropriate graphite settings.

When you run this script, you can run a tcpdump on the receiving machine to see if the UDP packets are getting to the machine.

sudo tcpdump -tn port 8125

If your StatsD is installed on a different machine/IP than Graphite, you can also watch StatsD send of the data by running

sudo tcpdump -tn port 8125 or port 2003

This is especially helpful if you have not properly set up your Amazon EC2 security group settings. Be sure to open a UDP port for the traffic coming through.

UPDATED TO WORK WITH GRAPHITE 0.9.9!!! (10/13/2011)

The new release of Graphite 0.9.9 includes an experimental Flot JavaScript graph. Awesome!

Steps to installing Graphite on Ubuntu -> gist.github.com
Ubuntu Graphite install screencast -> youtube.com

 If you are looking for a how-to on graphite one (CAD) or statsd this is not the place.

A few months ago I blogged abou how much I love stats. One of the things that I shared in that post was a blog post done by the etsy developer team about statsd and graphite to track everything.

This week I was able to get graphite setup on a dedicated Ubuntu 10.04 on my Mac using VMware Fusion. I thought I would share the steps I took so others might be able to save some time in their setup. In setting up apache I just copied over the default virtual host settings since graphite will be the only thing running on the server. If you are planning on having multiple virtual hosts on the machine then you will want to configure the virtual hosts differently.

####################################
# BASIC REQUIREMENTS
# http://graphite.wikidot.com/installation
# http://geek.michaelgrace.org/2011/09/how-to-install-graphite-on-ubuntu/
# Last tested & updated 10/13/2011
####################################
 
sudo apt-get update
sudo apt-get upgrade
 
wget http://launchpad.net/graphite/0.9/0.9.9/+download/graphite-web-0.9.9.tar.gz
wget http://launchpad.net/graphite/0.9/0.9.9/+download/carbon-0.9.9.tar.gz
wget http://launchpad.net/graphite/0.9/0.9.9/+download/whisper-0.9.9.tar.gz
tar -zxvf graphite-web-0.9.9.tar.gz
tar -zxvf carbon-0.9.9.tar.gz
tar -zxvf whisper-0.9.9.tar.gz
mv graphite-web-0.9.9 graphite
mv carbon-0.9.9 carbon
mv whisper-0.9.9 whisper
rm carbon-0.9.9.tar.gz
rm graphite-web-0.9.9.tar.gz
rm whisper-0.9.9.tar.gz
sudo apt-get install --assume-yes apache2 apache2-mpm-worker apache2-utils apache2.2-bin apache2.2-common libapr1 libaprutil1 libaprutil1-dbd-sqlite3 python3.1 libpython3.1 python3.1-minimal libapache2-mod-wsgi libaprutil1-ldap memcached python-cairo-dev python-django python-ldap python-memcache python-pysqlite2 sqlite3 erlang-os-mon erlang-snmp rabbitmq-server bzr expect ssh libapache2-mod-python python-setuptools
sudo easy_install django-tagging
 
####################################
# INSTALL WHISPER
####################################
 
cd ~/whisper
sudo python setup.py install
 
####################################
# INSTALL CARBON
####################################
 
cd ~/carbon
sudo python setup.py install
# CONFIGURE CARBON
####################
cd /opt/graphite/conf
sudo cp carbon.conf.example carbon.conf
sudo cp storage-schemas.conf.example storage-schemas.conf
sudo vim storage-schemas.conf
### edited storage-schemas.conf to be the following
[stats]
priority = 110
pattern = .*
retentions = 10:2160,60:10080,600:262974
###
 
####################################
# CONFIGURE GRAPHITE (webapp)
####################################
 
cd ~/graphite
sudo python check-dependencies.py
sudo python setup.py install
 
# CONFIGURE APACHE
###################
cd ~/graphite/examples
sudo cp example-graphite-vhost.conf /etc/apache2/sites-available/default
sudo cp /opt/graphite/conf/graphite.wsgi.example /opt/graphite/conf/graphite.wsgi
sudo vim /etc/apache2/sites-available/default
# moved 'WSGIImportScript /opt/gr..' to right before virtual host since it gave me an error saying
# WSGIImportScript cannot occur within <VirtualHost> section
# if this path does not exist make it!!!!!!
# /etc/httpd/wsgi
sudo mkdir /etc/httpd
sudo mkdir /etc/httpd/wsgi
sudo /etc/init.d/apache2 reload
 
####################################
# INITIAL DATABASE CREATION
####################################
cd /opt/graphite/webapp/graphite/
sudo python manage.py syncdb
# follow prompts to setup django admin user
sudo chown -R www-data:www-data /opt/graphite/storage/
sudo /etc/init.d/apache2 restart
cd /opt/graphite/webapp/graphite
sudo cp local_settings.py.example local_settings.py
 
####################################
# START CARBON
####################################
cd /opt/graphite/
sudo ./bin/carbon-cache.py start
 
####################################
# SEND DATA TO GRAPHITE
####################################
cd ~/graphite/examples
sudo chmod +x example-client.py
# [optional] edit example-client.py to report data faster
# sudo vim example-client.py
sudo ./example-client.py

Original installation instructions -> http://graphite.wikidot.com/installation

Looking to run an Ubuntu instance on EC2? Check out http://uec-images.ubuntu.com/releases/10.04/release/

Now you are ready to install StatsD!

The first time I fired up MAMP Pro and LocalTunnel, I couldn’t get MAMP to serve up the correct directory. The key is making sure that the localhost host is pointing to the directory you want served up through LocalTunnel. Cheers!

How to run Xdebug on Mac OSX using MAMP

1 Start MAMP

2 Edit php.ini template file through MAMP to enable the extension. Edit the template file via File -> Edit Template -> PHP -> PHP [php version you are using] php.ini

3 Edit bottom of php.ini template file so that it ends up looking like if you want profile output

[xdebug]
zend_extension="/Applications/MAMP/bin/php/php5.3.6/lib/php/extensions/no-debug-non-zts-20090626/xdebug.so"
xdebug.profiler_enable = 1
xdebug.profiler_output_dir = "/tmp"
; DONT REMOVE: MAMP PRO php5.3.6.ini template compatibility version: 1

If you don’t want profile output and just want xdebug running then use

[xdebug]
zend_extension="/Applications/MAMP/bin/php/php5.3.6/lib/php/extensions/no-debug-non-zts-20090626/xdebug.so"
xdebug.profiler_enable = 0
xdebug.profiler_output_dir = "/tmp"
; DONT REMOVE: MAMP PRO php5.3.6.ini template compatibility version: 1

Now when you have errors, if they are sent to standard out, you will see something like this

My php.ini file:

4 Save edited template and close edit window

5 Restart MAMP

6 Open MAMP’s WebStart page and navigate to PHPInfo tab. Check to make sure that Xdebug is running. Doing a search in the browser window for “Xdebug” makes this easy.

7 If you used the same settings that I have above, when you run PHP code, Xdebug will put the cachegrind.out files in your ‘/tmp’ directory. Open your ‘/temp’ directory and run one of your PHP files to make sure it is working correctly. You can open the ‘/tmp’ directory in finder by opening the terminal and running

open /tmp

8 Now you can use any app that understands those cachegrind.out files to view the profile data. Apps like KCacheGrind (Linux/Windows, KDE), WinCacheGrind (Windows), xdebugtoolkit, and Webgrind.  I went the simple route and used webgrind. Webgrind is a simple web based application that you can run locally on MAMP and it will look for the cachegrind.out files automatically with just one click. Continue for steps on setting up with webgrind.

9 Download Webgrind

10 Setup Webgrind host on MAMP to run Webgrind

11 Visit webgrind url setup on your local MAMP installation. Mine was simply webgrind/

12 If you already have cachegrind output files you should be able to select the file in the “Auto (newest)” dropdown or leave it select at Auto and click update which will reveal the profile data

13 Throw a celebratory fist pump

I think it’s awesome that the MAMP guys have included Xdebug with their release of MAMP 2.01. I wrote this blog post because I wanted to be able to profile some of my projects to find areas where they could be improved. After finally figuring it out it was super simple. The problem was that it took me a long time to set up because of all of the incorrect and outdated information on the internet. I hope this makes it easier for others to get setup. If this post becomes outdated please leave a comment or contact me about what needs to be updated.

– UPDATE –

I am LOVING Xdebug! Just realized that when you do a var_dump of some variable, Xdebug formats it for you so it’s actually readable! AMAZING!!!!

Before:

After:

Things I searched for to find my answers:
php profile
xdebug osx
mamp xdebug
php xdebug osx
webgrind
maccallgrind
cachegrind osx
cachegrind
valgrind
xdebug mamp
php.ini add extension mamp

Today I released an update to my Craigslist inliner Kynetx app that I released some time ago. This new update allows anyone to view a page of craigslist posts by their images. If you have ever thought to yourself that you just want to view all of the images then here is your answer.

Install the app by visiting http://apps.kynetx.com/installable_apps/4445-Craigslist_Inliner

The other viewing mode, for those who are curious, loads each listing “inline” in an i-frame so you can just scroll down through the page to view all of the listings.

You can turn the filtering on and off using the controls that will show up on the right side of the Google+ interface.

Preferences are remembered so the next time you come back it’s just the way you left it. I plan on adding a feature in the future to be able to collapse posts if they match a list of keywords that you list. I personally really look forward to this feature so I can filter out what ever I want. If you have ideas or suggestions for this app or a new app please let me know.

As seen on Tom Anderson’s G+ profile!

Featured on mormonlifehacker.com!

input[type=search] {
    -webkit-appearance:textfield;
    -webkit-box-sizing:content-box;
}
 
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
    display: none;
}

If you are using a webkit based browser you can checkout the live demo at -> http://mikegrace.s3.amazonaws.com/geek-blog/webkit-search-input-example.html

I like this trend of getting rid of submit buttons. Done right I think it makes interfaces cleaner, simpler, and easier. With mobile devices I still think it is better to give a submit button on forms but for desktop versions I love this lack of submit buttons. I find it interesting that Google has kept their search button even when Google Instant is enabled.

That’s all. Just my thoughts on the matter. ; )

Working with limited space and needing both a basic and advanced search I came up with this design. The search happens automatically much like Google instant search as you type. What I like about the design:

• large input and “[Product Search Results]” in results area lets user know that it is a search and that it searches products
• The “basic” and “advanced” buttons are placed in a way that associates them with the search input letting the user know that clicking them will change the type of search being done
• Visual separation of search input and search output
• No unneeded search button or title to tell the user what it is since it’s parts and design say what it is.

What I am worried about:

• Some users might not like the lack of a search button (Google still has their search button even with google instant enabled)
• Making assumptions where I shouldn’t have

This is just a simple demonstration of what I have come up with and would love your feedback. What do you like about it? What do you hate? How would you do it differently? Let me know in the comments or on Twitter @MikeGrace

Check out the demo now if you haven’t! -> http://mikegrace.s3.amazonaws.com/geek-blog/sandbox/search-example.html

What is it?

It’s a keyboard activated search tool for a specific website built to act like the application launcher Alfred App and QuickSilver. I went through each page in the Kynetx documentation site and indexed each page by hand. I didn’t include all pages which I believe makes this a much more powerful search for Kynetx developers. I also assigned key words to each page based on what I thought it should be searchable by. If you have suggestions, let me know because I would love to hear them.

Check out the live demo at http://supersearcher.michaelgrace.org/

If you like it, you are free to use the code in any way that you like. Cheers!

Navigation Mockup

I enjoyed building the navigation and thought what I came up with was cool enough to share what I did.

The JavaScript added is just to simulate changing pages.

Example page -> http://mikegrace.s3.amazonaws.com/geek-blog/sandbox/css-nav-border-party.html

setTimeout(function() {
    // JavaScript code executes here
}, 3000)

The first parameter of the setTimeout is the JavaScript function that will be executed once the delay is up. The second parameter is the amount of time to delay in milliseconds.

It is possible to pass the setTimeout function a string in the first parameter as the JavaScript to execute but this is a bad idea. Passing the JavaScript as a string means that it must go through eval() to be executed. eval() == evil. It’s also difficult to pass parameters to a function when using strings that must go through eval(). Passing an anonymous function instead of a string is also easier to read for developers.

Here’s how I take screenshots of my selenium tests running, written in Ruby:

• Find the variable referencing the selenium driver. Might look something like this:

  @selenium_driver = Selenium::Client::Driver.new(.....

• Wait for condition to take screenshot. Example:

  page.wait_for_element("//h1", {:timeout_in_seconds => 10})

• Take screenshot. Example:

  @selenium_driver.capture_entire_page_screenshot(File.expand_path(File.dirname(__FILE__)) + 'screenshot1.png', '')

  or something simpler like:

  @selenium_driver.capture_entire_page_screenshot('~/Desktop/screenshot1.png', '')

Selenium documentation for using the capture screenshot function.

Quotes in strings that are then going to be put in other Ruby strings need to be tripple escaped. If the string is going directly to the eval in Selenium then only a single escape is needed.

first = "first quote: \\\"......"
second = "#{first} second quote: \\\".........."
jsfunction = "window.alert(\"#{second}\")"
puts jsfunction
 
it "should alert string" do
  page.js_eval(jsfunction)
end

Bad Example:

array = ["h1","p","div"];
$K(array).each(function() {
    console.warn( $K(this+"").children() );
});

Much Better Example:

array = ["h1","p","div"];
$K(array).each(function(index, value) {
    console.warn( $K(value).children() );
});

I had previously tried the following with out success

array = ["h1","p","div"];
$K(array).each(function() {
    console.warn( $K(this).children() );
});

The problem of what I was originally trying was that each item in the array wasn’t being treated as a string, I think.The problem of what I was originally trying was that ‘this’ is an object and not a string like I need for the jQuery selector.

A big thanks goes out to my friends,Alex Olson & Sam Curren, for helping me understand my mistake while being tired.

If I didn’t need to do something different for each time through the loop I could do something like this stack overflow answer:

array = ["h1","p","div"];
console.warn( $K( array.join(", ") ).children() );

IE content not scrolling bug

If you have some content in a container and the content isn’t scrolling, there is probably an easy fix. If any of the content inside the container that is position relative, the container must also be position relative.

Doesn’t work in IE

<div id="scroller" style="overflow-y:scroll">
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
</div>

Works in IE

<div id="scroller" style="overflow-y:scroll;position:relative">
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
  <p style="position:relative">Lorem ipsum dolor sit amet, consectetur</p>
</div>

Photo by Anderson Mancini

ie error expected identifier string or number

IE 7 was throwing an error while working on some JavaScript

ie error expected identifier string or number

The problem was that I had an extra comma in a hash

this.css({
      "position":"fixed",
      "top": ( $K(window).height() - this.height() ) / 2 + "px",
      "left": ( $K(window).width() - this.width() ) / 2 + "px",
    });

It should have been

this.css({
      "position":"fixed",
      "top": ( $K(window).height() - this.height() ) / 2 + "px",
      "left": ( $K(window).width() - this.width() ) / 2 + "px"
    });

Photo: By stealingsand

Phone Number:

<a href="callto://+***********">Link will initiate Skype to call my number!</a>

Skype Username:

<a href="skype:********?call">Link will initiate Skype to call my Skype username!</a>

Steps:

1. Get default gateway of VM machine
2. Use that address the same way you would “localhost” on your Mac

Example:

Get IP address of VM

Local Mac development environment

Dev environment from VM

Twitter in Kynetx Rule Language from Phil Windley on Vimeo.

Twitter uses OAuth to authorize access to individual data. This video screencast shows how to use OAuth and Twitter from within the Kynetx Rule Language (KRL).

For a project that I am starting I wanted to use Rails and MySQL so I decided to install for source that I compile myself for both. It was amazingly easy and satisfying to have both compiled and installed on my machine for development. Hivelogic has some really simple easy to follow blog posts on how to do both. If you are wanting to compile and install either Rails or MySQL on your Mac from source code then I recommend you check them out.

Installing MySQL on Snow Leopard

Installing Ruby, RubyGems, and Rails on Snow Leopard

Bike photo by piston9 / CC BY 2.0

One of my co-workers recently tweeted, “I really want to know how I missed this web comic. Hilarious!! http://bit.ly/7das6F“. That got me thinking about how much people do miss from their favorite comic sites or any site on the web for that matter. Of course you can subscribe to RSS and get all their updates but those who valiantly use and keep up with their feeds know how quickly it can become overwhelming. But what about all of the people who like sites or products but don’t know how to set up an RSS reader or who just don’t want to? How do you get your content to those people all the time without them having to type in your URL?

With Kynetx!!

With Kynetx you can customize the users experience on your website AND ANY OTHER WEBSITE YOU DESIRE!!

Are you getting excited yet? Are you listening or paying attention?! Are you thinking about the possibilities??!!!

In this example, if a user really loves the comic “Geek and Poke” why not make the content available to them anywhere they go on the web in unobtrusive manner? In fact, if you do it well, the users will be giddy with the results and love your product even more! It’s a little known secret that people actually like advertising. THEY DO! People love to buy stuff! What people actually hate is irrelevant and irritating ads that are in their faces. I took 3 sites and customized the users experience based on the context that they really enjoy the comic “Geek and Poke”.

• Google.com
• CNET.com
• CNN.com

Here are the after and before photos of what the user will see as they visit these sites.

Geek and Poke on Google.com

Geek and Poke on CNET.com

Geek and Poke on CNN.com using Kynetx technology

All the user has to do is download an Information Card into their Card Selector on their computer!

Check out this presentation by Kynetx to learn a bit more. (Make sure you watch it full screen. It looks much better!)

If you would like to try it out for yourself, drag this bookmarklet to your bookmarks bar: Geek & Poke or click to download the information card below to your card selector.

Geek and Poke Information Card

Just visit any of the three sites with the card installed or click on the bookmarklet while on that page and you to can see the magic happen. ; )

If you love stackoverflow.com then you know how helpful it can be when you are looking for answers to your programming questions. Why not, if you are a StackOverflow fanatic, have all of your search results  augmented for what you like? Here is a drop dead easy way to tell your browser, “Hey! I really like getting search results for Stack Overflow so bring them to my attention.” Now that is context sensitivity! You can do the same thing for anything you like and it’s easy but the awesomeness doesn’t end there! Search result augmentation is just child’s play compared to what could be done. We are going to be seeing a complete rewrite of the advertising industry as we know it! Now you need to see this in action for yourself. You will need 2 things: 1) a card selector from Azigo 2) the information card for StackOverflow

AzigoLite Card Selector

StackOverflow Info card

Install the card selector, import the info card into the Azigo card seloctor and away you go. Now open up Firefox and do a google search for What’s your most controversial programming opinion?

Instead of the plain Google results you are used to, you now get a stack overflow icon to the right of each result that is from a stackoverflow.com domain!

This was all done with 11 lines of Kynetx code. Like I said before, this is just the beginning. We can write code that can put anything anywhere we want based on what the user wants. I plan on writing a Kynetx app that will place my latest blog posts on the front page of cnn.com for my parents so they can keep up with what I am doing when they go get their news.

From the beginning, billboards, newspapers, radio, and tv advertising has been a shotgun affair. Advertisers and companies broadcasting their ads to anyone and everyone they could. We, the users, have had to suffer through decades of irrelevant and poorly targeted advertising. Kynetx is bringing to the table the technology needed to turn the tables for all of us to rise up and take control of the advertising that we see. I have come to learn that people don’t really hate advertising, we just don’t like irrelevant and obscene advertising. Blasted advertisements are ineffective mostly because they lack the ability to understand the context of the receiver. If you can get people to willingly subscribe to advertising that they want… well, then you have something! I know this has been short and probably all over the place so let me share one more example that happens to be the first Kynetx app that I wrote.

Being able to keep everyone in a company motivated and tuned into the same goals can be a task to say the least. You could blast out emails, bring it up in meetings and blah blah blah but that sucks and it doesn’t work that great. What if every employee’s browser knew that they were an employee and injected a slide-out tray with the company goals and up to date progress for those goals while they were surfing the web? I wrote a Kynetx app for that! It only shows up on a few domains and allows each employee to see our Key Performance indicators. I also threw in there at the bottom a notification of how many tweets mentioning the company and how many questions had been asked on our stackexchange site since the day before. CONTEXT RULES!

This is just the beginning and I have done a terrible job of explaining it to you so I hope you will ask lots of questions and come back for more posts explaining and showcasing the awesome power of the purpose-centric-context-sensitive web.

I just recently started following Preston on Twitter and had him do my business cards but I already feel like we have been friends for a while. I couldn’t have asked for a better design that truly reflects my personality, my goals, is very professional, and everyone loves my card when I give it to them. If you’re still not convince about his skills and commitment to design, just check out his blog and you will find that Preston is well on his way to the top of the design industry. Anything from website design to  business cards, Preston is your man for the job. So, from a friend to a friend, I promise you that you won’t be disappointed!

Contact him now via Twitter @prestondlee

or on his contact page on his blog

Design by Preston

I recently found a site that features well designed sites and I have picked a few that stood out to me.

https://www.redbrickhealth.com/

http://www.studio7designs.com/

http://www.veboolabs.com/

http://www.divvoted.com/

http://thegreatbeardedreef.com/

http://emotionslive.co.uk/

http://www.wpcoder.com/

http://blogfullbliss.com/

http://www.jeromem.net/

http://www.silverbackapp.com/

http://francescomugnai.com/

http://nicolaswill.com/

http://wheeloftea.com/

http://www.christophe-peyras.com/

http://stoodeo.com/

http://www.futurice.com/

http://gotsleeves.appspot.com/

http://beakapp.com/

http://yodaa.com/

http://www.sjlwebdesign.co.uk/

http://codebutton.com/

http://koormann.de/

?? Have you found another amazing Flash / ActionScript resource? What was the best thing you did to learn ActionScript?? Let us know! : D

Akismet
AntiVirus
AskApache Password Protect
CSS Naked Day
Fancybox
Google XML Sitemaps
jQuery lazy load plugin
List Drafts Widget
Page Links To
Really Simple CAPTCHA
Spider Tracker
WordPress Related Posts
wp-cache
WP-IE6update
WP Security Scan
Electrical Outlet Photo http://www.flickr.com/photos/grendelkhan/ / CC BY-SA 2.0

THE PROBLEM

Information is flying all around us like debris from a tornado going through a trailer park. Information overload is a real problem now for the average person and it can wreak havoc on a persons productivity and goals. Never before in the history man has there been soo much information available. Experts, books, seminars, awareness: the availability of these are low if not non-existent. We are like little children who have been handed a gun with incredible power but no one is talking about how to safely handle it, and people are getting hurt!

WHAT TO DO

Fortunately for you, if you “shoot yourself in the foot” its your fault! Probably not what you were expecting, but it’s true. You have control over most of the information you subscribe to.

• RSS Feeds
• Television
• Radio
• Email
• Social Networks
• Magazines
• Newspaper

WHAT DOES THIS HAVE TO DO WITH MY BROWSER?

You can control what your Firefox looks like. I have seen too many people who try to browse the web with so many buttons, bars, and add-ons that much of the space for actually viewing web pages is reduced by about a third or more. Take back your browser real estate and surf the web with freedom again!

WHAT CAN I DO?

Here is an example of two extremes.

If the bloated one looks similar to yours or a friends browser then you are in the right place.

To Do:

• Use the Toolbar collapse button to hide the clutter until you need it

• Remove all add-ons you aren’t using all of the time (Spring Cleaning!)
• Hide toolbars (functionality can often be accessed through the application menu)
• Remove buttons that aren’t needed (most have keyboard shortcuts which are faster)

This is really fun because you get to drag and drop buttons where ever you like.

• Hide status bar if you don’t use it (Bottom gray bar)

• Disable “Always show the tab bar”

The real trick is to balance the functionality of add-ons and buttons with space. After many months of trying different configurations, this has been the most effective layout for me.

I use the keyboard shortcuts for the Firebug add-on and the other basic browser buttons like forward, back, refresh, so I have removed all those buttons and add-on bars. I show the status bar on the bottom so I can see if the HTML pages I am coding are validating as strict without running a validator. I also hide the bookmarks bar because I don’t use them very frequently. Everyone uses the web differently which makes Firefox great for many people because it can be customized for their needs. Play around with your layout, reduce distractions, and find what works best for you.

Storm Photo: http://www.flickr.com/photos/liebedich/ / CC BY 2.0

There are a few reasons why your installed add-ons might get marked as incompatible. Sometimes the developer has not changed the install requirements to accept your version. Mozilla suggests to developers that they don’t mark it compatible until they KNOW it is compatible. So, many developers don’t mark their add-ons compatible with beta and alpha releases of Firefox. Another reason an add-on might not be marked as compatible is because it really ISN’T compatible. Running an incompatible add-on can corrupt data in your browser profile and other places on your computer so don’t force add-ons to work unless you are willing to deal with the risks.

Precautions:

• Don’t force add-ons unless you are willing to deal with possible browser crashing and data/profile corruption!
• Backup your profile!
• Be an add-on minimalist! The more add-ons you have, the more that can go wrong… very wrong.
• Backup your system regularly. If you don’t do this already your crazy and you should start yesterday!

How:

To force Firefox to accept all installed add-ons we simply need to tell it in it’s configuration file to ignore incompatibility. It will still check for updates and inform you that add-ons are incompatible, but it will let them run.

Steps:

1. Open Firefox
2. Type about:config into browser bar and press enter
3. Click “I’ll be careful, I promise!” button and chuckle at Mozilla’s developer’s humor
4. Right click on any list item in browser window and select “New” -> “Boolean”
5. Paste extensions.checkCompatibility into alert box input window
6. Select “False”
7. Open add-ons window: Select “Tools” -> “Add-ons”
8. Click “Restart” on yellow notification bar
9. Throw your hands up in the air
10. Shout for joy
11. Spin around in your twirly chair and get back to work
12. ; )

Visual Steps:

1. Click on the first image
2. Click on the arrows that show up when you mouse over the image to walk through the steps visually
3. Enjoy the show

Shocked Photo: http://www.flickr.com/photos/carbonnyc/ / CC BY 2.0

FF 3.7a - aka Minefield

Firefox 3.7 Alpha is available for download for developers to try out but it is still very alpha. I love the humor that the Mozilla developers have as seen through the icon used for Firefox 3.7a. The developers have lovingly named the alpha “Minefield”. Love it! ; ) Still want to try it out? Download Firefox 3.7 Alpha

I think there is immense power and potential in being able to write commands for Ubiquity using JavaScript and HTML. As JavaScript and HTML becomes, pardon the pun but, ubiquitous more people will be able to create commands that extend the functionality of the browser while on the web. I am really impressed with the entire setup and I think Mozilla deserves two thumbs up for pioneering the future of the web.

I have several other commands I have written to use and some just for practice, located on my ubiquity page. I will continue to update the scripts as I write new commands and work on improving the web. Would love it if you subscribed to the commands and gave me feedback on what you think.

If you aren’t already using Firefox I highly encourage you to because there is no other browser like it. When I am writing a blog post, I use the quick search in the top right corner of Firefox to search for photos on Flickr using the Creative Commons license. If you are not using Firefox, (shame! shame!), do your Creative Commons search at http://search.creativecommons.org/ Search results appear in one column with tabs at the top to chose from search sources other than Flickr.
As I scroll through the images I open the ones I find interesting in a new tab. After searching through a good amount of photos, it has gotten easier to find good ones and I’m beginning to find a style that fits my blog. I then download the size that best fits my needs by clicking on “all sizes” right above the image.

I then end up going back to the page with just that image and all of the comments people have made on the photo. It is time to get the attribution links for all the legal stuff. The link to the Creative Commons license is on the right side with a link just under the heading “Additional Information”. The Creative Commons license page explains to what extent the image can be used and how to attribute the image to the owner.

The top section of this particular license agreement allows me to use this image on my blog (share) and to remix the image to use it in other ways. If this license agreement did not have the remix statement, it is my understanding that I could not crop the image and use in some of the ways I have in this post. The next section explains how to attribute the photo to the owner and usually provides a nice HTML snippet to copy and paste into your blog or web page.
Note: You can get to the license page from other pages but the link from the images main page is the one that I have found to have the HTML snippet that I use to attribute the images to their respective owners.

After placing the HTML snippets at the end of my blog post I am nice and make the images link back to their main Flickr page which is not required by the license. I find that this is the best way to connect viewers directly with the source of the image and I would appreciate others doing the same with my images if they ever got used. ; ) I also usually open the photos in Photoshop and compress them a bit more for web viewing.

How I feel after a good Flickr - CC fix

Many artists are happy to let you use their work when you follow the guidelines set in the license. Sometimes if I feel I have done a nice job on a blog post I will leave them a comment on their Flickr photo page letting them know I have used their photo and some have even commented on my blog posts thanking me for using their work! ; )

Photos:
http://www.flickr.com/photos/zanastardust/ / CC BY 2.0
http://www.flickr.com/photos/31878512@N06/ / CC BY 2.0

Gotcha…

jQuery changes CSS inline rather than to an external CSS document meaning that my relative path was invalid. My jQuery CSS image path needed to be $('#background_spot').css('backgroundImage',"url('images/event_background.jpg')");
After making the change for the path of the image to be from the html file we were all smiles.
Photos:
http://www.flickr.com/photos/saranv/ / CC BY 2.0
http://www.flickr.com/photos/dotbenjamin/ / CC BY-SA 2.0

NameGuard

I have used several different sites and services to register domains. NameGuard is hands down the best domain registration site and service I have ever used. After registering several domains with NameGuard I wonder why I ever used all the other sites out there.

Why

• FREE Privacy Protection!!!
  • Many other services charge extra, each year, for this service
  • If you don’t get privacy protection all of your personal information ends up in the whois directory for that domain. Bad!
    
• Industry standard pricing on domains
• accepts paypal or credit card for payment
• Change DNS name servers at time of registration
• Extremely fast registration time

NameGuard Advantages

Even though the girl doesn’t come with every domain name registration, NameGuard provides some of the best services I have seen yet. Click on the girl to read their list of advantages.

This post may seem like I may be making money through some affiliation program but I make nothing from this post other than helping others enjoy the same great benefits of a great domain registration service while protecting their personal contact information

Enjoy

countdown widget

Would work well on blogspot (blogger), WordPress, TypePad, and many more.

Error Message: Unable to create directory … {long directory path} … Is its parent directory writable by the server?

Cause: I recently changed hosting services so when I migrated my blog over to the new server everything worked great except for my WordPress uploads. Most things in WordPress are kept relative and ask the server where things are but the path to the upload files are kept in the database so if you change servers without changing the database string pointing to the correct directory you will get an error and probably frustrated also.

UPDATE 05/25/09

Thanks to a comment from Matt Lindsay I now realize that there is a much easier way to update the wordpress upload string in the database than digging into the actual database. A big thanks goes out to matt for making my blog better. ; )

Quicker and easier fix

1. Login to your WordPress Admin
2. Go to “Settings”
3. Select “Miscellaneous”
4. Put the correct path in the input field labeled “Full URL path to files”
5. Save the changes and you should be done

The advantage I had in digging into the database is that when I switched hosting services only one of the folders in the path changed so I went in and just modified the one folder. This is nice if you don’t know the exact file path from the server root like me. ; )

Older more complicated fix:

1. Login to your database for the WordPress blog.
2. Browse/ view tables in the database created when setting up the blog
3. Browse/ view table named “wp_options”
4. In the “option_name” column look for “upload_path” (was #60 for me)
5. Edit the row values and change to the correct path
6. Save changes

After making that change the problem should be fixed and uploading will now work. If this helped be sure to give me a shout and leave a comment. Best of luck to you. ; )

Sources:
—————–
I figured this out all on my own. ; ) #HappyGeek