Kevin Reese code samples

JavaScript Class Inheritance

var Tile = Class.extend({
  _name: 'Tile',
  init: function(targetElement) {
    this._element = $(targetElement);
    this.enable();
  },
  enable: function() {
    this._element.bind('click',{tile:this},this.processEvent);
  },
  disable: function() {
    this._element.unbind('click',this.processEvent);
  },
  processEvent: function(event) {
    event.data.tile.change();
  },
  change: function() {
  }
});

var ColorTile = Tile.extend({
  _name: 'ColorTile',
  _digit: [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'],
  init: function(targetElement){
    this._super(targetElement);
    this.change();
  },
  change: function() {
    var color = this.randomColor();
    this._element.css('background-color',color);
  },
  randomColor: function() {
    var diget = this._digit;
    var color = '#'+this.hex()+this.hex()+this.hex()+this.hex()+this.hex()+this.hex();
    return( color );
  },
  hex: function() {
    return( this._digit[Math.floor(Math.random()*this._digit.length)] );
  }
});

var LightColorTile = ColorTile.extend({
  _name: 'LightColorTile',
  _digit: ['b','c','d','e','f']
});

Drawing with SVG Plugin

$(function() {
var _svg;
var _poly;

$('#canvas').svg(drawBtn);
$('#button').click(changeColor);

function drawBtn(svg) {
  _svg = svg;
  _poly = svg.polygon( [[7,3],[18,12],[7,21]], {fill: "#000000"});
}
function changeColor() {
  _svg.change( _poly, {fill : "#123456"});
} }

Flickr

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.getSizes
 &api_key=67890&photo_id=4321&format=json&jsoncallback=?",
  function(photo){
    var attributes = {src:photo.sizes.size[3].source, alt:"photo"};
    $("<img/>").attr(attributes).appendTo("#flickr_header")
     .wrap("<a href='" + photo.sizes.size[4].url + "' target='_blank'></a>");
});

Twitter

$.getJSON("http://search.twitter.com/search.json?q=from:BarackObama&callback=?",
 function(data){
  for (i=0;i<data.results.length;i++){
    tweet = data.results[i];
    tweet_content = '<div class="tweet">'+
'  <a class="from" href="http://twitter.com/'+tweet.from_user+'">'+
'    <img src="'+tweet.profile_image_url+'" alt="'+tweet.from_user+'" />'+
'  </a>'+
'  <p class="text">'+tweet.text+'</p>'+
'  <p class="stamp">'+tweet.from_user+'<span>'+tweet.created_at+'</span></p>'+
'</div>';
    $("#tweetbox").append(tweet_content);
  }
});

Media RSS

$.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_id=f42c711ab0e64056fd200b38ad98e102&_render=json&_callback=?",
function(data) {
 $('#title').html(data.value.title+'<span>'+data.value.description+'</span>');
 for (i=0; i<data.value.items[0].entry.length; i++) {
  entry = data.value.items[0].entry[i];
  media_content = '<div class="media">'+
'   <div class="title">'+
'    <a href="'+entry.link[0].href+'">'+entry.link[0].href+'</a>'+
'    '+entry.title+
'    <span class="author">'+entry.author.name+'</span>'+
'   </div>'+
'   <div class="description">'+
'    <img class="thumbnail" src="'+entry["media:thumbnail"].url+'" alt="'+
     (entry["media:thumbnail"].title ? entry["media:thumbnail"].title : entry.title)+'" />'+
     (entry.content.type=='text' ? entry.content.content : entry.title)+
'   </div>'+
'   <div class="download">'+
'   Get the Torrent<br />'+
'   <a class="torrent" href="'+entry.link[1].href+'">'+entry.link[1].href+'</a>'+
'   <p><a href="'+entry.link[2].href+'" target="_blank">view license</a>'+
'    <span class="file-type">'+entry.link[1].type+'</span></p>'+
'  </div>';
 $("#list").append(media_content);
} });

ActionScript 3

package com.Control {
  import flash.display.MovieClip;
  import flash.events.*;

  public class Control extends MovieClip {
    public static const CONTROL_BUTTON:String = 'btnPress';
    private var buttonName:String;

    public function Control() {
    }
    public function initBtn(obj:MovieClip):void
    {
      obj.buttonMode = true;
      obj.tabEnabled = false;
      obj.useHandCursor = true;
      obj.mouseChildren = false;
      obj.addEventListener(MouseEvent.CLICK, buttonHandler);
    }
    public function getButton():String
    {
      return buttonName;
    }
    private function buttonHandler(e:MouseEvent):void
    {
      trace('buttonHand: '+e.target.name);
      buttonName = e.target.name;

      dispatchEvent(new Event(Control.CONTROL_BUTTON, true));
    }
  }
}

Facebook

<fb:prompt-permission perms="email">
  Privacy is sharing.</fb:prompt-permission>
<fb:fan name="Very-Pretty-Pigeon"></fb:fan>
<div id="fb-root"></div>
<script type="text/javascript">
  window.fbAsyncInit = function() {
    FB.init({
      appId :'11235', status:true, cookie:true, xfbml:true
    });
  };
  (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Kohana 3

Kohana::init(array(
  'base_url' => '/',
  'index_file' => '',
));

Route::set('default', '(<controller>(/<action>(/<id>)))')
  ->defaults(array(
    'controller' => 'main',
    'action' => 'index',
  ));

YouTube

$( function() {
  var url = 'http://www.youtube.com/v/nHlJODYBLKs';
  var player = $('#yt-video-player');
  var height = player.height();
  var width = player.width();
  var id = 'ytplayer';
  player.flash(
    {swf:url+'?enablejsapi=1&version=3&hl=en_US&data-skill=0&autoplay=1&playerapiid='+id,
      width:width,height:height,allowFullScreen:'true',allowScriptAccess:'always',id:id}
  );
});
function onYouTubePlayerReady(playerId){
  consol.log(plyerId+' youtube video player ready');
  var ytVideo=document.getElementById(playerId);
  ytVideo.addEventListener('onStateChange','youTubeStateChange');
}
function youTubeStateChange(state){
  var ytVideo=document.getElementById('ytplayer');
  switch(state){
    case -1: stateTxt='unstarted'; break;
    case 0: stateTxt='ended';
      $('#yt-video-player').fadeOut( function(){ $(this).html(''); } );
      break;
    case 1: stateTxt='playing'; break;
    case 2: stateTxt='paused';
      ytVideo.playVideo();
      break;
    case 3: stateTxt='buffering'; break;
    case 5: stateTxt='video cued'; break;
    default: stateTxt='err'; break;
  }
  console.log('YouTube video changed state now: '+stateTxt);
}

HTML

HyperText Markup Language

CSS

Cascading Style Sheets

HTML 5

<!DOCTYPE HTML>
<audio> <canvas> <video>
<article> <aside> <details> <figcaption> <figure> <footer> <header> <hgroup> <nav> <section>

JavaScript

client-side scripting

jQuery

write less, do more.

Ajax

Asynchronous JavaScript and XML

API

Application Programming Interface

Google Maps

var myMap = new google.maps.Map(getElementById("map-canvas"));
var theFillmore = new google.maps.LatLng(37.784, -122.433);
myMap.setCenter(theFillmore);

MailChimp

<?php include('MCAPI.class.php');
$api = new MCAPI('<username>','<password>');
$my_mail_lists = $api->lists();
echo('a monkey in the mailroom does the work'); ?>

FoxyCart

for (i=0;i<fc_json.products.length;i++) {
  fc_BuildFoxyCartRow(fc_json.products[i].name,fc_json.products[i].quantity,fc_json.products[i].price);
}

CMS

Content Management System

ExpressionEngine

Publish Your Universe!

eCommerce

From your HTML storefront and through the payment gateway, money travels into the bank.

JavaScript animation

$('.navigation').animate({ top:nextHeight }, { duration:colDuration, que:false});
$('#news_wrapper .pagination').animate({ height:nextHeight }, { duration:colDuration, que:false});
$('#news_wrapper, .col_right, .inner', _domTarget).animate({ height:colHeight }, { duration:colDuration, que:false });
$('.nextpage > .small_news:first').animate({ opacity:1 }, { duration:120, queue:false,
  complete:listIn });

Flash animation

TweenMax.to(frame, 0.2, {alpha:0});
TweenMax.to(title, 0.2, {alpha:0});
TweenMax.to(chapter, 0.8, {delay:0.2, x:0, y:0, scaleX:1, scaleY:1, ease:Quad.easeInOut});
TweenMax.to(this, 0.4, {delay:0.2, rotationY:24, rotationX:-4, ease:Quad.easeOut});
TweenMax.to(this, 0.4, {delay:0.6, rotationY:0, rotationX:0, ease:Quad.easeInOut,
  onComplete:activate});

CSS3 animation

-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;

domain

domain aliases and sub-domains, too

hosting

call me admin

PHP

<?php
$page_title = "Kevin Reese";
echo "<div class=\"page_title\">$page_title</div>";
$meta_description = "response for job post - Developer (HTML5/AJAX/FLASH/XHTML/CSS/PHP)";
$meta_keywords = "web developer, html, ajax, flash, css, actionscript 3, javascript, php";
if(!isset($_GET['ajax'])) { include('incl/header.php'); } ?>

SQL

$sql = "INSERT INTO exp_weblog_titles ( weblog_id, author_id, pentry_id, ip_address, title, url_title, status, allow_comments, allow_trackbacks, sticky, entry_date, year, month, day, expiration_date, edit_date, recent_comment_date, comment_total, trackback_total, sent_trackbacks, recent_trackback_date) VALUES ( 4, 1, 0, \"71.9.107.10\", \"$my_title\", \"$my_url_title\", \"open\", \"y\", \"n\", \"n\", \"1268056947\", \"2010\", \"03\", \"07\", \"0\", \"20100307220428\", 0, 0, 0, 0, 0)";
$result = mysql_query($sql,$conn);

mod_rewrite

RewriteEngine On
RewriteBase /
RewriteRule ^sitemap.xml /index.php/view/sitemap [L]
RewriteCond %{HTTP_HOST} !www\.hotaddress\.com
RewriteRule ^(.*)$ http://www.hotaddress.com/$1 [R=301,L]

Problem Solving

ask me about game theory

Electrical Engineering

ask me about bioelectromagnetism