scurker.com

Go Mobile at TechMixer University

Jason — Sun, 25 Sep 2011 05:21:37 +0000

I will be presenting a session on mobile web development this coming Tuesday, on September 28th. Slides will be posted shortly after the session is finished.

Learn about recent trends regarding the mobile web
“Rethink” developing for mobile
Dive into mobile touch events and more!

Couldn’t make the session? View the slides online at http://slides.scurker.com/gomobile

TechMixer University

TechMixer University is an annual one-day conference that offers a full day of free technology training. This Birmingham, Alabama event is attended by the area’s brightest and enriched technical professionals, including developers, database professionals, project managers, network professionals, IT directors/managers and C-level executives.

http://www.techbirmingham.com/university/

Amazon Trade-in Value Tracker

Jason — Thu, 14 Apr 2011 01:48:18 +0000

This was a project that actually begin back in the summer of ’09. At the time Amazon had introduced a trade-in system with some pretty tempting promotions. However, there were limitations in that you could only see the most recent trade-in value with no ability for a history or a way to detect changes. Thus, the ativ tracker was born.

Over a year later and with nearly 700,000 values tracked, the tracker is still chugging along but needed a new coat of paint. It’s been updated with a new theme, some background improvements, better mobile optimizations, and charting utilizing RaphaëlJS.

A lot of sweat and hard work was put into this project to make it easy to track trade-in values. So if you have some old games sitting in your closet, why not consider checking out the tracker and turning your games into Amazon credit?

Scurker Levels Up

Jason — Wed, 15 Dec 2010 03:28:38 +0000

Welcome to the new and improved scurker.com! I’d never felt comfortable with my previous design and never really felt inspired by it. There had been some things that I had felt had been missing, and the site lacked a lot of flexibility I was looking for. Shortly after my previous design had been launched, I begin work on this iteration giving time for things to settle in. What has changed?

Standards Are Dead?

Well technically, no. Previously I have been using XHTML 1.0 strict, but have now switched to an HTML 5 doctype, which is simple as . The majority of the features I plan on using are quite usable across most major browsers, so I see little reason not to make the switch.

Portfolio

Thanks to features added with WordPress 3.0, this has given me the ability to update new additions to the portfolio that much easier!

No More Boring Fonts!

Goodbye Trebuchet MS, hello @font-face! Web fonts have wide support in a majority of browsers, so why not take advantage of it? The Google Font API is a great resource for doing so.

This is only a portion of the site as the rest should come around the corner of the holidays. Please feel free to leave any comments or suggestions below.

Particle Generator using HTML5′s Canvas

Jason — Fri, 04 Jun 2010 05:10:51 +0000

Particle effects are pretty awesome. Particles by themselves are fairly simple, but by generating multitudes of particles with set variables you can create a range of effects such as fire, smoke, or water. A particle generator or emitter allows you to adjust the variables giving you control over the types of effects you can generate.

I’ve been working on another project that needed a particle generator, thus this demonstration was born.

There are several presets I’ve included, but you can easily generate new types of effects by playing around with the available variables on the presets.

The demo does not give you access to everything so in order to create more fine tuned options, here’s all the currently available variables:

{
  shape: 'circle',		  // square or circle
  velocity: new Vector({y: -1}),  // movement vector; only y is used
  xVariance: 0,			  // +/- start x position (random)
  yVariance: 0,			  // +/- start y position (random)
  spawnSpeed: 25,		  // # particles spawned per cycle
  generations: 100000,		  // # of cycles to run for
  maxParticles: 500,		  // max # of particles allowed on screen
  size: 20,			  // size of particles
  sizeVariance: 5,		  // +/- size of particles (random)
  life: 30,			  // # of cycles a particle can live
  lifeVariance: 10,    		  // +/- lifetime of particle (random)
  direction: 0,			  // initial start direction
  directionVariance: 15,          // +/- direction (random)
  color: '#fff',		  // can be hex code or rgb
  opacity: 1,			  // particle opacity
  onDraw: function(p) {
    // onDraw passes in the current particle and is called before each
    // particle is displayed on the screen. This function is used in 
    // several of the presets to adjust the color or opacity given
    // the particle's current age and lifespan.
  }
}

If you are using Firefox and Firebug, you can create your own objects and update the particle generator by using particles.update(myObject); via the command line.

As usual, HTML5 and Canvas is not currently supported by IE7/IE8, so you’ll need to use another browser in order for this to work. The demo has been tested in Firefox, Safari and Chrome, but I highly recommend using Chrome for the demo as it seems to run the most efficient.

On to the demo! Or alternatively, view the source here.

Javascript Clock using HTML5 and Canvas

Jason — Tue, 20 Apr 2010 22:09:27 +0000

I’ve been finding myself becoming more interested in what HTML5 can do. As I see it HTML5 stands to be a potential replacement for flash, in addition to the features and interactivity that are made available by various javascript frameworks out there.

A good starting point would be to start off with something simple, i.e. a clock. Here’s a sample project I threw together to help make myself more familiar with HTML5′s canvas.

The clock you see on the left is written completely in javascript and takes advantage of HTML5 and the canvas element — no flash necessary.

If you see a blank clock face with no hands, that means that your browser does not support HTML5. You will need to be using the latest version of Chrome, Firefox, Opera or Safari in order for the clock to work. IE does not currently natively support the canvas element.

There are several good canvas tutorials out there so please check those if you want a more in-depth introduction to HTML5′s canvas element.

In order to use this clock, you’ll need to setup your canvas element:

Initializing the clock:

$(window).load(function() {
  new jClock('my-clock-face-image.png', $('#jclock').get(0));
});

You can also pass in additional options to change items such as the hand colors, or image size. Here’s the defaults as defined in the plugin:

// override default options:
// i.e. new jClock('image.png', $('#canvas').get(0), {shadow: false});
 
jClock.defaults = {   
  height: 125,       // default height
  width: 125,        // default width
  secondHand: true,  // show the second hand
  shadow: true,      // display shadows across all hands
  second: {          // second hand style options
    color: '#f00',
    width: 2,
    start: -10,
    end: 35,
    alpha: 1
  },
  minute: {          // minute hand style options
    color: '#fff',
    width: 3,
    start: -7,
    end: 30,
    alpha: 1
  },
  hour: {            // hour hand style options
    color: '#fff',
    width: 4,
    start: -7,
    end: 20,
    alpha: 1
  }     
};

Feel free to download the source code and play around with it, or ask any questions you may have in the comments below.

Download jclock.js (2.4k)

Planterguy.com

Jason — Tue, 09 Mar 2010 01:45:16 +0000

I’m proud to add planterguy.com to my portfolio! Planterguy is the blog of Guy Walker who works with the Association of Related Churches.

I was more than happy to put together this wordpress theme for Guy Walker and wanted a “dirty” feel to go along with the name “planterguy”. Theme was built from the ground up and includes several custom widgets tuned for Guy Walker’s needs.

Migration from Drupal 6.x to WordPress 2.9x

Jason — Fri, 26 Feb 2010 17:22:58 +0000

I recently found myself wanting to move my personal blog (blog.scurker.com) from Drupal 6.x to WordPress for various reasons. I primarily followed this tutorial, but wanted to outline some additional information in the transfer.

Database Conversion Table

Drupal 6.x Table(s)	WordPress 2.9x Equivalent
term_data, term_hierarchy	wp_terms
node, node_revisions	wp_posts
term_node	wp_term_relationships
comments	wp_comments

Truncate WordPress Tables

First, I needed to remove any data that is currently in certain wordpress tables so I could work with a fresh slate.

Note: By default when you install wordpress all tables are prefixed with wp_ unless you changed it to something else. The below queries will need to be modified if you used anything else other than wp_.

TRUNCATE TABLE wp_comments;
TRUNCATE TABLE wp_postmeta;
TRUNCATE TABLE wp_posts;
TRUNCATE TABLE wp_term_relationships;
TRUNCATE TABLE wp_term_taxonomy;
TRUNCATE TABLE wp_terms;

Import Taxonomy Terms

The next sets of queries imports taxonomy terms.

Note: Table names pre-pended with drupal. needs to be the actual name of your drupal database. You will need to change this to whatever you have your drupal database named.

INSERT INTO wp_terms (term_id, name, slug, term_group)
  SELECT d.tid, d.name, REPLACE(LOWER(d.name), ' ', '-'), 0
  FROM drupal.term_data d
  INNER JOIN drupal.term_hierarchy h
  USING(tid);

By default, WordPress has several taxonomy types available; categories, post_tag, and link_category. In my Drupal instance I used taxonomy primarily as tags, but you may have a different need. You may need to modify the 3rd line in the below query depending on how you want taxonomies imported:

Categories: category
Link Categories: link_category
Post Tags: post_tag

INSERT INTO wp_term_taxonomy (term_taxonomy_id, term_id, taxonomy, 
                              description, parent)
  SELECT d.tid, d.tid, 'post_tag', d.description, h.parent
  FROM drupal.term_data d
  INNER JOIN drupal.term_hierarchy h
  USING(tid);

Import Post Content

Drupal allows for custom post types, while as of WordPress 2.9x, custom post types are only available via plugins. You can use the below query unmodified and it will convert all stories to posts, and everything else will transfer over as is. If you need to convert additional post types, you can add additional case statements.

Example:
WHEN 'book' THEN 'post'

I also adjusted the query so that ‘post_date_gmt’ would be populated correctly based on my GMT offset of -6:00 (Central Time). If you are in a different timezone you will need to adjust FROM_UNIXTIME(created+21600) to subtract or add correctly based on your location.

INSERT INTO
    wp_posts (id, post_date, post_date_gmt, post_content, post_title,
    post_excerpt, post_name, post_type, post_modified)
SELECT DISTINCT
    n.nid, FROM_UNIXTIME(created), 
    FROM_UNIXTIME(created+21600), body, n.title, teaser, LOWER(n.title),
    (CASE n.TYPE
      WHEN 'story' THEN 'post'
      ELSE n.TYPE
    END) AS TYPE,
    FROM_UNIXTIME(changed)
FROM drupal.node n, drupal.node_revisions r
WHERE n.vid = r.vid;

Import Post and Taxonomy Relationships

INSERT INTO wp_term_relationships (object_id, term_taxonomy_id)
SELECT nid, tid FROM drupal.term_node;

Category Count Updating

UPDATE wp_term_taxonomy tt
  SET COUNT = (
    SELECT COUNT(tr.object_id)
    FROM wp_term_relationships tr
    WHERE tr.term_taxonomy_id = tt.term_taxonomy_id
  );

Import Comments

INSERT INTO wp_comments (comment_post_ID, comment_date, 
            comment_content, comment_parent, comment_author, 
            comment_author_email, comment_author_url, comment_approved)
  SELECT nid, FROM_UNIXTIME(TIMESTAMP), comment, thread, 
              name, mail, homepage, STATUS 
  FROM drupal.comments;

Update Comment Count

UPDATE wp_posts 
  SET comment_count = (SELECT COUNT(comment_post_id) 
  FROM wp_comments 
  WHERE wp_posts.id = wp_comments.comment_post_id);

Update Post Slugs

Drupal’s URL aliases is equivalent to WordPress’ permalinks. Drupal has a much more aggressive title sanitation than WordPress. I wanted the ability to keep my titles the same for SEO reasons when migrating over to WordPress.

In order to keep my old titles, I need to hook into WordPress’ title sanitation with similar rules to Drupal. The below code will need to be placed somewhere in the functions.php file of your current theme.

add_filter('sanitize_title', 'my_sanitize_title');
function my_sanitize_title($title) {
  $title = preg_replace('/\b(a|an|as|at|before|but|by|for|from|is|in|into|like|of|off|on|onto|per|since|than|the|this|that|to|up|via|with)\b/i', '', $title);
  $title = preg_replace('/-+/', '-', $title);
  $title = trim($title, '-');
  return $title;
}

You will need to save the below code to a file i.e. “fix-slugs.php” in your main WordPress directory and run it through your browser.

< ?php
 
  require_once('wp-load.php');
 
  $posts = $wpdb->get_results(
    "SELECT ID, post_title, post_name FROM $wpdb->posts"
  );
 
  $count = 0;
  $ignored = 0;
  $errors = 0;
  foreach($posts as $post) {
    if(strcmp($slug = sanitize_title($post->post_title), $post->post_name) !== 0) {
      $wpdb->show_errors();
      if(($result = $wpdb->query("UPDATE $wpdb->posts SET post_name='$slug' WHERE ID=$post->ID")) === false) {
        $errors++;
      } elseif($result === 0) {
        $ignore++;
      } else {
        $count++;
      }
    } else {
       $ignored++;
    }
  }
 
  echo "$count post slug(s) sanitized.
";
  echo "$ignored post(s) ignored.
";
  echo "$errors error(s).
";

If you were following along with this tutorial, I’ve made a few changes based on my Drupal setup using WordPress database description as a reference when I ran into issues. There may be some additional steps to be completed if you uploaded images through Drupal’s interface, but the above queries were able to successfully migrate my data from Drupal to WordPress.

A New Beginning

Jason — Tue, 19 Jan 2010 21:38:17 +0000

You’ve undoubtedly reached this site through either word of mouth, or via my personal blog, but I’d like to formally welcome you to the new scurker.com! I’ve been hard at work over the past week in order to get everything up and running and am happy to finally be at this point.

One of my big reasons for rolling over to a new design was the limitations my old site was giving me. I wanted to have a new fresher design in addition to having more flexibility with the content on the site. Now with the addition of WordPress, I can easily outline new projects or post about some dramatic revolution in web design. In addition the new site will help me give a better showcase for my skills and abilities for any future clients and/or employers.

You are not seeing the final version of this roll-out, but features will slowly be added as I get time. Please feel free to post a comment if you notice any issues, or contact me if you have any opportunities you would like to discuss.