Dayshift

Cool Autocomplete Plugins and Scripts

I found this list of auto-complete plugins and scripts on dzine blog today and decided to share it.  Looks like a nice collection.

Adventures In Domain Parking

In an attempt to increase my revenue from domain parking, I've been trying to move away from Sedo so that I can control my own content and advertisement while at the same time keeping my labor overhead low (by overhead, I mean MY time :).  I'm currently trying two different options and I'm weighing them by different criteria.  Oddly enough, revenue isn't a major focus of the comparison.  I'm assuming that because I'm able to use Google AdSense on both platforms,  I'll have a comparable revenue per visitor (rpv) on both.

The two different platforms I'm currently experimenting with are ExpressionEngine and Typepad.   Here's a breakdown of the criteria I use to compare.

1. Operation Cost (per domain)
• ExpressionEngine
• For multi-site management, there's a $25 fee per domain that you add to the system.
• The one time licensing fee for this CMS is $99.95 personal version and $249.95 for the professional.  This includes one year of free updates and applies only to major release version you purchased.  Each additional year of updates is $20.
• TypePad
  • With only one low monthly fee of around $15 I can have an unlimited number of blogs/domains
2. Ease of setup (per domain)
   • ExpressionEngine
     • Once your preferences are set, adding new sites/domains in the system is easy.  However, you need to set up a virtual host for each new domain and copy over the index.php, .htacces, and a 'path.php' file that contains all necessary global variables. (all sites have to be hosted on the same server for the multi-site management feature to work)
   • Typepad
     • You need to add a new blog, which is really easy.  Then you need to map your domain to your primary typepad domain name (myaccount.typepad.com).  This is a very easy process.
3. Design/Template availability & ease of implementation
   • ExpressionEngine
   • • There aren't very many 'out of the box' templates available for EE, but once you create one generic template it can be copied over and used with any other domain.  I created one template but it's very ugly and customizing it per domain is a little bit of a pain, but isn't that hard.   For some full sites that I host on EE, I've taken WordPress templates and tweaked them to work.  Overall, the templating capabilities of EE are very powerful and flexible, but getting up and running can sometimes take longer than I desire for just seeding a new website.
   • Typepad
   • • The number of layout and theme combinations on Typepad is really impressive.  I can have a near perfect look and feel for my site in about 2 minutes.  I give the design/templating feature in Typepad two thumbs up!
4. Ease of content addition
   • ExpressionEngine
     • Once you're set up, adding content to ExpressionEngine is super easy.  It's a little more flexible than typepad in that you can create separate 'weblogs' and assign them custom fields.  I've used this to have a main content blog and a seperate product or links directory blog.  Even though they are named 'weblogs', it doesn't mean that they appear that way to your visitors.  It's just data after all, and with EE's powerful templating system you can do whatever you want with it.  The ability to separate content like this, but have it all in the same db for potential cross reference is something that I think is very valuable.
   • Typepad
     • Adding content to Typepad is as simple as posting to any other blogging software.   The only 'content separation' you have is through assigning categories to your post, but it works more like tagging than a hierarchical category structure.  You can however, add 'pages' to your blog which appear as .html pages in your webroot.  This is pretty good SEO for content pieces that you want to appear as more permanent.
5. SEO
   • ExpressionEngine
     • You have a fair amount of control over how your URIs are structured.  Since your article file names are automatically suggested by breaking apart the title, you can set a preference for using '_' or '-' as a word separator.  With content, you can adjust the WYSIWYG bold and italic button html to have either <strong> or <b> or <em> or <i>; whatever your preference may be.   Overall, there are very few limitations in EE that directly affect your ability to search engine optimize your structure or content.
   • Typepad
     • For normal posts, you're pretty much stuck with the way t\Typepad names and organizes them.   However, even if you have a theory on URI structure that would discount Typepad's value, I've seen some really high performing Typepad blogs that would make you second guess yourself.   
     • The two biggest SEO gripes I have about Typead are:
       • The images you upload have a path associated with your primary domain (myaccount.typepad), so it's difficult dis-associate your sites if you're using images.
       • You map your domain to a Typepad IP, you have to create a cname record to point to your primary domain.   This makes it practically impossible to dis-associate completely.
6. Expandability
   • ExpressionEngine
     • There are tons of really good modules for EE that allow you to grow your site more if you ever decide to make that energy investment.   Adding a forum is super easy and the user base for one site can be the same for all sites.   This is the same for the Wiki module as well.
   • Typepad
     • If I wanted to really build out a site that I started off on Typead, I'd probably need to export (if possible) or scrape the content and rebuild it in EE or whatever CMS I intended to use.   
     • However, there are tons of cool widgets available for monetization and content that are easy to plugin if I just want to increase the 'meat' of the site.

Overall, I don't think I'll decide completely on one or the other.   I'm definitely sticking with ExpressionEngine for my serious site development and parked domains that I expect to eventually grow into full sites.   The ease of use with Typepad though is so high that I can't resist using it when I'm concerned about my available time.    Both are very good alternatives to just parking your site with a 3rd party.   Especially once you get picked up by a search engine and start to see the real value of your traffic and their clicks :)

Rsync and Find/Grep Shell Script

I'm not an expert at shell scripting, but I wrote this little ditty over a year ago and I use it ALL the time. It really makes my life easier. If you work locally with code that needs to be tested on a remote server, you change multiple files at a time, and/or you're using FTP to transfer these files, then this might be a great solution for you. It's a super simple concept, just a nested switch statement used in combination with find, grep, and rsync. However, the uses are so convenient for me that if you were to scroll through my history of my cli commands 70%+- of them would reference this script. I'm posting about it because I want to see if anyone has suggestions for other useful Web Developer functions to add to it.

Here's how I use it. I save the script as /usr/local/bin/my, then just call it like so (example result included):

user@host:~# my find 'some_function_name'
./some/folder/File.php:193: protected function some_function_name($arg1){

The 'sync' option just rsync's the current working directory to the specific server, so be mindful of your working directory!

user@host:~# my sync dev

Number of files: 208
Number of files transferred: 173
Total file size: 844041 bytes
Total transferred file size: 844041 bytes
Literal data: 7851 bytes
Matched data: 836190 bytes
File list size: 4577
File list generation time: 0.009 seconds
File list transfer time: 0.000 seconds
Total bytes sent: 15799
Total bytes received: 11572

sent 15799 bytes  received 11572 bytes  7820.29 bytes/sec
total size is 844041  speedup is 30.84

And here's the code. Like I said, very very simple. If you're a *nix guru you'd probably snort your nose at it, but if you're just an average developer with budding skills, this might change your work-flow quite a bit. Hope someone finds it useful :) If you have suggestions for additional functionality please post them!

case $1 in
find)
        find . \( -name "*.php" -o  -name "*.py" \)  -exec grep -Hn $2 {} \;
        ;;
findall)
        find . -exec grep -Hn $2 {} \;
        ;;
sync)
        case $2 in
        dev)
                rsync -rz --stats . dev.yourserver.com:/path/to/directory
                ;;
        staging)
                rsync -rz --stats . staging.yourserver.com:/path/to/directory
                ;;
    esac
    ;;
*)
        echo "That option is not recognized"
   ;;
esac

Generic YUI Chart Class

I built this for one small project then found myself using it all over the place. It's basically a generic JavaScript 'class'* that allows you to easily build YUI charts with very little JavaScript code.

If you use YUI charts as suggested in many examples you'll need configuration code for each individual chart which, if you have more than 2 or 3 charts on a page, can make your code appear cluttered. With the ChartsAjax class, all the chart options can be set with JSON data built dynamically on the server and retrieved from one AJAX call. This includes not only data for the datastore but also styling and column definitions.

Below is a breakdown with code examples. Feel free to offer suggestions on how to make it better!

1. The very first thing you need to do is go to the YUI developer page and select the components you want to use then include the CSS/JavaScript per their instructions.
2. Include the ChartsAjax and AjaxObject code in your page.
   

   function ChartsAjax(){
       var statType='';
       var chartType='';
       this.buildChart = buildChart;
       this.useData = useData;
       this.handleFailure = handleFailure;
   
       function buildChart(type, chart){
           statType = type;
           chartType = chart;
   
           var sourceUrl = '/stats/get_chart/'+statType+'/';
   
           var callback = {success:this.useData,failure:this.handleFailure};
           AjaxObject.makeRequest(sourceUrl, callback);
       };
       function useData(o){
           try {var json = YAHOO.lang.JSON.parse(o.responseText);}
           catch (e) {return false;}
   
           YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf";
           var msDs = new YAHOO.util.DataSource( json.Response.Results ); 
           msDs.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
           msDs.responseSchema = {
                   fields:json.Response.Fields
           };
   
           var targetDiv = statType;
           var chartDefinition = {
               series: json.Response.Series, 
               xField: json.Response.XField,
               yField: json.Response.YField,
               style: json.Response.Style 
           }
           switch(chartType){
               case "line":
                   var chart = new YAHOO.widget.LineChart(targetDiv, msDs, chartDefinition);
               break;
               case "column":
                   var chart = new YAHOO.widget.ColumnChart(targetDiv, msDs, chartDefinition);
               break;
   
           }
       };
       function handleFailure(o){
           //do something with o.responseText
       }
   };
   var AjaxObject = {
       makeRequest:function(url, callback){var request = YAHOO.util.Connect.asyncRequest('GET', url, callback);}
   };
   

3. Create an empty container div. Remember that the chart takes on the dimensions of it's parent container so you could either apply a class to this div or a style attribute (ex: style="width:500px;height:200px").
   

   <div id="products_sold" >Loading...</div>

4. On page load, create a ChartsAjax instantiation. Notice the second argument in the buildChart method. You can choose to display the chart as 'line' or 'column'. You can also add options to the ChartsAjax class as you wish. ex:
   

   function load_charts(){
       var products_sold = new ChartsAjax();
       products_sold.buildChart('products_sold', 'line');
   }
   YAHOO.util.Event.onDOMReady(load_charts);
   

5. Return data from server. The class will use the sourceUrl variable to request data from your server. You can configure the url to fit your needs. The JSON can be built using any server side language. My favorite is python because the list and dictionary data structures are virtually identical to the resulting JSON. Example json:

   {"Response": {
       "YField": "", 
       "Style": {
           "legend": {
               "display": "bottom"}, 
               "xAxis": {"labelRotation": "-90"}, 
               "yAxis": {"titleRotation": "-90"}}, 
       "Fields": ["date", "total"], 
       "Results": [
           {"date": "05-27", "total": 147}, 
           {"date": "05-28", "total": 105}, 
           {"date": "05-29", "total": 160}, 
           {"date": "05-30", "total": 40}, 
           {"date": "05-31", "total": 66}, 
           {"date": "06-01", "total": 136}, 
           {"date": "06-02", "total": 243}], 
       "Series": [{
           "yField": "total", 
           "displayName": "Total Products Sold"}], 
       "XField": "date"}}
   

6. Presto!
   

Awesome Regex Tool

Regular Expressions can be an elusive art. Even when you understand all the rules, you still can easily find yourself having to 'hack' at a pattern until you see the results you expect. Here's an awesome regular expressions tool that I've been using for over a year now.  Using AJAX, it sends the pattern/subject to the server and and then populates the result boxes seamlessly.  It does this as you type so you can very rapidly iterate through a problem.  

If you bookmark it you will use it ;)

Sexy Forms

Here's a great list of examples and resources for building really sexy forms.    There are a lot of JavaScript and CSS tricks that I've seen around for a while, but I've never actually had the need to use.   When it comes time create something you've seen before, it can be a bit of a pain finding it again ;(

How to use the canonical link tag

Having duplicate content has been a long lived problem for people with parameter heavy sites or with multiple versions of the same content scattered across many pages.  There has never really been an easy way to highlight your preferred URL when you have scattered and similar content.   Over on the Google's webmaster blog, they recently posted instructions on how to use the <link> tag to specify the version you prefer.

How is this useful?  Two common scenarios that they mention and that I've personally experienced are the use of tracking parameters and result set ordering parameters.  

Let's say you have a product page called black-beans.php, but you have the need to append tracking parameters for some reason.   You might end up with black-beans.php?tid=4UZ66?ref=moms_site, black-beans.php?tid=4UX04, etc..     With the <link> tag you can let Google (and any other search engine that adopts this standard) know which should be the 'official' singular version of this content.   Here's what your tag would look like:  <link rel="canonical" href="http://www.site.fake/black-beans.php" />

site.fake vs www.site.fake?
Historically, you would use .htaccess to 301 redirect one version to the other (typically the site.fake to the www.site.fake).    Google claims to honor the canonical <link> tag across sub-domains.  Using the <link> method might be the only way some people can solve this issue if they don't have the proper access or environment.

IMHO, this is a really cool new feature!

  

10 SEO Tips For Developers

If you're a web developer with very little SEO experience and have been asked to make your site/pages SEO friendly, then you either asked for more detailed specs or went straight to Google to find out how.   Below is a quick list of common sense SEO tips for developers new to the concept.

First of all, SEO is an ever-evolving field.   A list of tips/tricks today might be outdated and even funny a couple of years from now.   The tips below should stand up to the next few years of search engine evolution.   This list is NOT exhaustive, just some fundamental suggestions for technical or on-page SEO.

1. Remember that there is no secret magic trick to SEO!
   A long time ago, you could easily trick the search engine to thinking your page was more valuable than it really was...but that time died away.   Even if a magic trick did exist right now, it wouldn't last very long.   Learn what Black Hat SEO is, and avoid being guilty of it if you want long term results. 
2. Always build for users, not for machines.
   Search engines are getting smarter by the day.  They are even starting to take user behavior into account and will likely continue doing so more & more over time.   If a real person finds the site useful, then the search engine will also.   I know this is a very general tip, but it's an important philosophy to adopt.
   
3. Remember that a web page is a living thing. 
   Do NOT delete or change the location of a page without using a 301 redirect!  Your pages build value over time, especially if there are back-links pointing to it.  A 301 redirect will tell the search engines that your content has moved permanently. 
4. Use text, not numbers in your URIs.
   If you're serving up content dynamically, don't create URIs like this: file.php?id=3.    Learn how to use ModRewrite and use text in the URI so that the page look more like a distinct file instead of some dispatch file with parameters.  Doing this gives you another opportunity to reinforce the context of your content.
5. Include meta keywords and meta description.
   Even though meta keywords and descriptions aren't really used by Google anymore, some smaller search engines still rely on them.   It's always a good idea to have both on all your pages when possible.  
6. Keep your directory structure simple and consistent.
   Your directory names should provide context clues.  For example, www.site.fake/content/basket-ball.php is not as useful (for humans & search engines) as www.site.fake/sports/basket-ball.php.  This isn't absolutely crucial, but if you have the freedom and control to implement it, do so.
   
7. Make sure pages are well interlinked.
   Interlinking your pages is very important.  You need to keep it balanced though.  You definitely don't want to link from every page to every page.   Here are a two good rules of thumb for interlinking
   
   • link to pages that are similar in context
   • when possible, place the links inside of the text content of the page.  This helps reinforce the context
8. Avoid using tables for layout. 
   It's OK to use tables for tabulated data, but you should always use CSS for layout.   There are many reasons for this, some related to SEO and many related to overall efficiency and good design practice.  Some example SEO benefits are:
   
   • the search engine has to digest less markup. 
   • it's easier to keep your important content high up in the source code.
9. Keep body content as high up in the source code as possible.
   I'm not sure this is as important as it used to be, but it does help to emphasize the important content if you keep it high in the source code.  At one point in time the search engines had a limit to the number of lines it would read on a page.  I would imagine that this was due to technical resource limits.   If that was the case, I'd imagine these limits have practically disappeared.
   
10. Create a sensible sitemap.
    
    • Don't stuff your sitemap page with 100+ non-contextual links. 
    • Use your sitemap to reinforce your content structure.  
    • If you have a heirarchial structure, show it here.  
    • If you have categories, don't list every article/page under each category.  Just list the most recent or most important.  If your linking to your category page and it links to your articles, then that's probably sufficient.

Useful Project Management/Collaboration Tools

I was thinking about making a list of useful project management/collaboration tools, but I stumbled upon this blog post while eating my morning cereal.   About 2 years ago I was searching desperately for tools like these and came up pretty disappointed.   The only good that came from that search was Basecamp, which I've used pretty extensively.   Google docs is also a must have...if you trust Google with your privates ;)

Based on his recomendation, I'm off to play with Klock.  I need a new Air app to toy around with.  

Developer By Day

I'm a web developer by day, and what I do at night is my own damn business.   I'm fortunate to have gained some very unique experience during my 6-7 years of developing.   I've been a contractor, a manager, a code monkey and a consultant.  All of which have shaped me into a pretty resilient and productive team member.   The one area where I don't have a lot of breadth is my toolset of languages.  I am a faithful PHP/MySql developer and for the past 2 years I've worked exclusively with the MVC framework CodeIgniter.   I've toyed around with ActionScript a bit and recently started to develop a taste for Flex.     Working with Heysan for the past year has given me more depth with PHP and Codeigniter, but since our interface is tailored for mobile devices, the level of CSS/JavaScript I've encountered has been minimal at best.

I really enjoy working with PHP, and I'm not going to stop anytime soon.  My entrepreneurial desires are starting to flame more and more over time and I think I have the perfect toolset for experimenting with creative web apps and content sites.  I want the focus of this blog to be tidbits of inspiration and jewels of experience I come across that inspire me to create, build business, or just do things with more common sense.

My name is Aaron and I work the dayshift :)