Travis Berry

Help A Scientist

2013-02-09T00:00:00-07:00

Help A Scientist

Published: February 09, 2013

I try to keep this blog mostly relevant to tech but I'm reposting this from Hospitium to try and get a bigger response.

Post taken from hospitium.co -

Here at Hospitium we are big fans of people pursuing post-grad degrees, especially in the sciences. That's why we were super excited to help out Alison Kennedy-Benson who is doing her M.S. in Anthrozoology. She recently contacted us and asked if we could help spread a survey for her research. Her thesis is focused on selective intake shelter workers which fits nicely with the user base of Hospitium.

If you would like to help out, please fill out the survey below.

https://www.surveymonkey.com/s/shelterworkerperspectives

Simple Multi-File Uploads With Paperclip

2013-02-01T00:00:00-07:00

Simple Multi-File Uploads With Paperclip

Published: February 1, 2013

I needed to add multi-file uploads to a rails application recently and was looking for a solution that didn't involve using swfupload or anything like that. I was already using paperclip and I wanted something that was super easy to get running so I went with HTML5 multi-uploads.

I use a dedicated Document model, depending on how paperclip is setup on your models, you may get different results, or this might not work for you.

First add a new file form field.

<%= form_for Document.new, :url => documents_path, :remote => true, :html => {:multipart => true} do |f| %> <%= f.file_field :filearrays, :multiple =>:true %> <%= f.submit "Submit" %> <% end %>

Then in the controller create action you can do.

It will handle single files or multiples just fine.

That should be pretty much all you need to get started. Of course you can improve it by adding some validation to allowed file types, setting a flash message to let the user know if the file was uploaded or not, or anything else you may need.

Moving From IndexTank To IndexDen

2012-04-08T00:00:00-06:00

Moving From IndexTank To IndexDen

Published: April 08, 2012

A while back I did a post on using IndexTank with CakePHP. Since then IndexTank has been bought by LinkedIn and will be shutdown.

Luckily there is a drop in replacement in the form of IndexDen. I was able to get Homkora switched over in about 30 minutes.

First signup for an account with IndexDen. Then create the indexes that you need. I recommend calling them whatever you called them in IndexTank, that way there is no need to change the code.

From the example in the original post

<?php function createIndextankClient(){ App::import('Vendor', 'indextank_client'); $API_URL = 'YOUR API URL HERE'; $client = new ApiClient($API_URL); return $client; } function addIndextank($indexType,$id,$data){ //send project to indextank $client = $this->createIndextankClient(); $index = $client->get_index($indexType); $doc_id = $id; $index->add_document($doc_id, $data); } function deleteIndextank($indexType,$id){ //delete indextank document $client = $this->createIndextankClient(); $index = $client->get_index($indexType); $index->delete_document($id); } function searchIndextank($indexType,$query){ //search indextank $client = $this->createIndextankClient(); $index = $client->get_index($indexType); $index->add_function(2, "relevance"); $res = $index->search($query); return $res; } ?>

All you have to change is $API_URL = 'YOUR API URL HERE'; from the IndexTank URL to the IndexDen one.

That is technically all you need to do to start using IndexDen instead of IndexTank. However, you will notice that none of you records are in the new index.

A quick way to add them back in is with a simple loop. Staying with the last posts example, here is how I added the projects from Homkora.

<?php function add_to_index() { $projects = $this->Project->find('all'); foreach($projects as $project){ $indexData = array('text'=>$project['Project']['title'],'title'=>$project['Project']['title'],'description'=>$project['Project']['description'],'user_id'=>$project['Project']['user_id']); $id = $project['Project']['_id']; $this->addIndextank("HomkoraProjects",$id,$indexData); } } ?>

I just added in this simple function, hit the URL once, then removed it. All the old records are in, and any new records will be added thanks to the code from the first post.

So if you need a quick fix for IndexTanks closure, give IndexDen a shot. I've been in contact with the CEO of the company and he seems like a really nice guy so if you have a more complex setup, contact them and I bet they can help you out.

Edit: Other services offering drop in replacements.

http://www.searchify.com/

Real-Time In Place Editing For Rails

2012-04-07T00:00:00-06:00

Real-Time In Place Editing For Rails

Published: April 07, 2012

In an effort to make Hospitium's interface easier to use, I removed the extra step of editing data in a standard form. Instead opting to use an in place editing solution.

Best in Place is the gem I used and it's pretty simple to set up. Instead of covering the details here, I'll let this railscast explain it. That episode is a little out of date so make sure to check out the gem's README, the main change being Controller response with respond_with_bip.

Best in Place is a jQuery based AJAX Inplace-Editor that takes profit of RESTful server-side controllers to allow users to edit stuff with no need of forms.

Getting in place editing working is easy, but one downside is multiple users can edit the same record without seeing each others changes. This could lead to confusion after a page reload and a users changes are completely wrong (at least different from what they expected). So the obvious solution is to push the changes to all users making the edits real-time.

We could roll our own complete push state, but instead I'm going to offload the work to Juggernaut.

Juggernaut gives you a realtime connection between your servers and client browsers.

You can run Juggernaut locally for development, but I recommend just throwing it up on Heroku to make your life easier.

Clone repo: git clone git://github.com/maccman/juggernaut.git cd juggernaut Create Heroku app: heroku create myapp --stack cedar heroku addons:add redistogo:nano git push heroku master heroku ps:scale web=1 heroku open Find RedisToGo url heroku run node process.env.REDISTOGO_URL And then publish from Juggernaut's Ruby gem: irb require "juggernaut" Juggernaut.url = "REDISTOGO_URL" Juggernaut.publish("channel1", "woo! it's working")

Once you have Juggernaut up and running it's time to start publishing events from rails to juggernaut. The easiest way to do this is with model observers. For the rest of this post we'll assume we are working with a pretty typical User model.

First install the Juggernaut gem by including it in your gemfile.

Create a new file /app/models/user_observer.rb

require "juggernaut" class UserObserver < ActiveRecord::Observer def after_update(user) publish(:update, user) end def publish(type, user) Juggernaut.url = ENV['JUGG_URL'] Juggernaut.publish("/observer/user/#{user.id}", { :id => user.id, :type => type, :klass => user.class.name, :record => user.changes }) end end

All this does is listen for update actions to the user model. Which conveniently is the action best in place uses to update the model. The changed data is then published to the Juggernaut instance.

The ENV['JUGG_URL'] should be set to the REDISTOGO_URL from the Heroku setup steps above.

You will also need to initialize the observer by adding the following to /config/application.rb

Now that the changes are being published, we need need to make the view listen for the changes.

In your application layout add

Then in your user view add

Now anytime a user changes a field with best in place, other users viewing the same page will see the updates real-time.

The real tricky part here is knowing the field ID to update with the changed value. Best In Place generates field IDs dynamically with no way to override them. Luckily they are fairly predictable and we can infer what field was updated by the field name and the model name/ID. That's what $('#best_in_place_user_<%= @user.id %>_'+i) is doing. i contains the model field name such as username or last_login.

There are also a few problems with this. One being any special formatting done to things like dates won't be formatted by the javascript. This can be worked around by formatting the value as needed though. The other problem is the way I passed the user info into the javascript is ugly. Here is a railscast with some ideas on how you could clean that up.

To see real-time editing in action, sign up for an account at Hospitium.

Hubot Deploy

2012-02-16T00:00:00-07:00

Hubot Deploy

Published: February 16, 2012

Hubot is super badass. So is Capistrano. Getting them working together is like syrup and bacon. So good.

I won't cover getting Hubot setup as there are plenty of posts available and it's not too terribly difficult. Just pick what service you want to hook into and fire it up. (We use hipchat)

I'm also not going to cover creating deploy scripts with Capistrano as again there are plenty of other posts that can help.

We're going to jump in and assume you have Hubot running on a local machine and have at least one app setup to deploy. (Make sure the Hubot machine has access to run deploys)

To get Hubot to talk to the repos and deploy them we are using a simple Sinatra app as a middle layer.

Before that though, let's start with a quick overview of how the whole thing is going to work.

User tells Hubot "deploy application" -> Hubot passes the application to a Sinatra API endpoint -> Sinatra runs the deploy script for the repo -> Hubot tells the user the app is deployed

So let's start with the Hubot script.

# Deploy with capistrano # # Usage: # deploy <repo> # what can you deploy? # hackers = [ "http://hubot-assets.s3.amazonaws.com/hackers/1.gif", "http://hubot-assets.s3.amazonaws.com/hackers/2.gif", "http://hubot-assets.s3.amazonaws.com/hackers/3.gif", "http://hubot-assets.s3.amazonaws.com/hackers/4.gif", "http://hubot-assets.s3.amazonaws.com/hackers/5.gif", "http://hubot-assets.s3.amazonaws.com/hackers/6.gif", "http://hubot-assets.s3.amazonaws.com/hackers/7.gif", ] #array of the repo names to match and deploy repos = [ "example_app_1", "example_app_2", "example_app_3" ] module.exports = (robot) -> robot.respond /deploy (.+)/i, (msg) -> if msg.match[1] in repos #send waiting messages msg.send 'Attempting deploy. Please hold.' msg.send msg.random hackers #hit the sinatra app to do the deploy msg.http("http://localhost:9393/deploy/#{msg.match[1]}") .get() (err, res, body) -> if res.statusCode == 404 msg.send 'Something went horribly wrong' else msg.send 'Deployed like a boss' msg.send 'http://hubot-assets.s3.amazonaws.com/fuck-yeah/3.gif' else msg.send 'Nope. I dont know what that is. Try deploying one of these: ' + repos.join(", ") robot.respond /(what can you deploy?)/i, (msg) -> msg.send 'I can deploy the shit out of ' + repos.join(", ")

This is a pretty simple Hubot script. Hubot checks if the application is one he knows and if so, hit the Sinatra API. There's also some fluff in there that tells the user something is happening and to be patient and a few gifs for added fun.

Add your applications to the repos array. One thing to note is the Sinatra URL, depending on your setup, this url may change for you.

Now that Hubot is listening for deploys, we can create the simple Sinatra app.

require 'rubygems' require 'sinatra' get '/' do "Leave this place" end #pass in the repo name and deploy that shit get '/deploy/:name' do bb = IO.popen("cd ~/Desktop/deploy_repos/"+params[:name]+"; git pull origin master; cap deploy") b = bb.readlines puts b.join end

Again, really really simple.

All the app does it take the name of the application as a URL parameter and deploys that app. This is also where a little hackery comes in.

The key to this working correctly is the names in the Hubot script need to be exactly the same as the repo folder names. You must also keep a copy of the repos on the same machine that is running the Sinatra app and Hubot.

names in the Hubot script need to be exactly the same as the repo folder names

This allows the Sinatra app to cd into the repo, update the repo, then run Capistrano deploy. This example uses a deploy_repo folder on the Desktop to store all the repos. Change this as needed.

If everything is setup correctly you should now be able to tell Hubot "deploy application" and watch as Hubot does all the work.

There's a lot a room for expansion here too. Follow the same basic setup and you can add the ability to have Hubot rollback code incase of a problem.

So Long And Thanks For The Elephant

2011-12-24T00:00:00-07:00

So Long And Thanks For The Elephant

Published: December 24, 2011

This domain as well as any other domain I own has just been moved to name.com.

Godaddy has a pretty crappy past of elephant murder and SOPA support so I decided it was time to no longer support such a company.

Name.com on the other hand is a local Denver company that seems to be on the up and up. So far they have been super awesome to work with.

If you are looking to transfer you can see how to do so here.

Hospitium - New Open Source Project

2011-09-05T00:00:00-06:00

Hospitium - New Open Source Project

Published: September 05, 2011

I just launched a new open source project Hospitium.

Hospitium is a tool for animal rescues and shelters to track and manage their animals.

Hospitium is the brain child of Apple Wood Rescue, a small animal rescue in Denver Colorado. Developed to fit the needs of the rescue, it has since been open sourced for anyone to use.

This program is completely free. You can modify it all you want and you can share it with anyone.

A free hosted solution is coming soon.

You can support the project by:

Donating to Apple Wood Rescue
Contributing to the development of Hospitium on github.

Goodbye WordPress - Hello Jekyll

2011-09-04T00:00:00-06:00

Goodbye WordPress - Hello Jekyll

Published: September 04, 2011

I ran WordPress for a couple years. There's nothing particularly wrong with it. It is still a powerful CMS with a huge community behind it. So why did I leave?

Really I was just looking for something else to do. That and running this site on a cheap little host wasn't cutting it anymore. Even with all the WordPress performance tweaks my site was still running slow and running out of memory.

I bounced around a bit on what to replace it with. I looked real hard at Locomotive CMS and I still really like it, but in the end I figured I would get the best performance out of an entirely static site. And with s3 offering support for static sites, I could run without a server.

Once I decided on a static site, my options got a lot smaller. The big ones I looked at were Stasis, Jekyll, and Cactus. All have their strengths but in the end I chose Jekyll since it's ruby based and has a fairly large community. Stasis does some cool things with a controller, but it's a little too new for me.

I'm not going to walk through everything I did to set this up. There are several good tutorials on the web already and you can always check out the source of this site on github.

These are a few of the sites that helped me get Jekyll up and running.

Blogging Like A Hacker - Article from the creator of Jekyll.
Gist Tag For Jekyll - Use gists for code blocks with noscript fallback.
Jekyll Plugins - List of plugins to extend Jekyll
How To WordPress To Jekyll - Good article on moving from WordPress
Installing and Using Jekyll - Covers a lot of little things that are easy to miss during setup.

Overall I like the new setup. The simple interface and speed of the finished site are two big bonuses. However, Jekyll is far from the simple to use software the WordPress is. If you don't feel like messing with the internals of your blog software, I would recommend you stick with WordPress. If you like tinkering and love fast sites, then give Jekyll a test run.

Create GitHub Gist With Ruby

2011-05-30T00:00:00-06:00

Create GitHub Gist With Ruby

Published: May 30, 2011

If you didn't know already, GitHub is freaking awesome. One of my favorite features is gists. Gists are a simple code pasting and sharing service. Also perfect for displaying code in blog posts.

I've grown tired of dealing with libraries to make my code examples look good. Some don't work that well, changes aren't revisioned, and they all around kind of suck to mess with. So in an effort to fix all that, I have decided to start using gists for my code examples.

I'm in the process of converting my site over to running Locomotive CMS instead of WordPress, so I needed to create a way to add gists through the admin interface and simply return the embed code.

require 'net/http' require 'uri' require 'json' def get_gist(fileName,content) res = Net::HTTP.post_form(URI.parse('http://gist.github.com/api/v1/json/new'), { 'files[#{fileName}]' => content, 'login' => 'USER NAME HERE', 'token' => 'API TOKEN HERE', 'description' => 'This is a test description' }) parsed_json = JSON(res.body) parsed_json['gists'].each do |key, val| key.each do |k, v| if "#{k}" == 'repo' repo = "#{v}" end end end return "<script src=\"https://gist.github.com/#{repo}.js\"></script>" end

It's pretty simple and works like a champ for me. Obviously I had to write a lot more stuff to integrate with Locomotive CMS, but that is for another post.

If you have questions or a better example, let me know in the comments.

Write Text Anywhere With HTML5 Canvas

2011-05-26T00:00:00-06:00

Write Text Anywhere With HTML5 Canvas

Published: May 26, 2011

When working on a project recently I came across the need to be able to add some text to a canvas element. This by itself wasn't particularly hard, as there are several examples of creating text editor apps with canvas, but those all forced the text into a row style grid like a text editor. What I needed was a little more freeform in that I wanted the user to click and the text to show at that point.

After a little hacking around I came up with something that handled my needs and hopefully may help someone else in the future.

(This doesn't look the best in the end, but you can easily add some css styles to make it look better)

Click Here To See Demo

So first we need to create a canvas element

<!DOCTYPE html> <html> <head> </head> <body> <div id="main"> <canvas id="c"></canvas> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> </body> </html>

Now we have the canvas element all set up we can start having some fun.

Well not quite. First we need to set some dimensions for the canvas element. Without them, it doesn't have any way to know where to place our "drawings".

Add this into a css file

Now we can start adding drawings. One thing we are going to need for this is a text entry box. I debated trying to "type" directly into the canvas but decided against it. (for complexity reasons)

The method I chose was to add a textarea to the position of the click in the canvas. The user will enter their text into the textarea popup and hit save. This will then draw the text to the screen.

Let's go ahead and create a javascript function to handle the click and add the textarea and save button.

//steal the mousedown event for the canvas for one time - you can use a regular click if you want - this was to interact with some other code in my project $('#c').mousedown(function(e){ if ($('#textAreaPopUp').length == 0) { var mouseX = e.pageX - this.offsetLeft + $("#c").position().left; var mouseY = e.pageY - this.offsetTop; //append a text area box to the canvas where the user clicked to enter in a comment var textArea = "<div id='textAreaPopUp' style='position:absolute;top:"+mouseY+"px;left:"+mouseX+"px;z-index:30;'><textarea id='textareaTest' style='width:100px;height:50px;'></textarea>"; var saveButton = "<input type='button' value='save' id='saveText' onclick='saveTextFromArea("+mouseY+","+mouseX+");'></div>"; var appendString = textArea + saveButton; $("#main").append(appendString); } else { $('textarea#textareaTest').remove(); $('#saveText').remove(); $('#textAreaPopUp').remove(); var mouseX = e.pageX - this.offsetLeft + $("#c").position().left; var mouseY = e.pageY - this.offsetTop; //append a text area box to the canvas where the user clicked to enter in a comment var textArea = "<div id='textAreaPopUp' style='position:absolute;top:"+mouseY+"px;left:"+mouseX+"px;z-index:30;'><textarea id='textareaTest' style='width:100px;height:50px;'></textarea>"; var saveButton = "<input type='button' value='save' id='saveText' onclick='saveTextFromArea("+mouseY+","+mouseX+");'></div>"; var appendString = textArea + saveButton; $("#main").append(appendString); } });

There’s nothing too crazy in here. It does do a check and destroy the textarea if one is already displayed while the user clicks the canvas again.

These are setting the position of the mouse click so we can use them to set the position to display the textarea at. It takes into account any offsets the canvas element may have as well.

The rest is just appending the textarea to the main element in the page. The save button has an onclick event that we will deal with in a bit.

Now we have to actually draw the entered text to the screen.

function saveTextFromArea(y,x){ //get the value of the textarea then destroy it and the save button var text = $('textarea#textareaTest').val(); $('textarea#textareaTest').remove(); $('#saveText').remove(); //get the canvas and add the text functions var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); var cw = canvas.clientWidth; var ch = canvas.clientHeight; canvas.width = cw; canvas.height = ch; //break the text into arrays based on a text width of 100px var phraseArray = getLines(ctx,text,100); // this adds the text functions to the ctx CanvasTextFunctions.enable(ctx); var counter = 0; //set the font styles var font = "sans"; var fontsize = 16; ctx.strokeStyle = "rgba(237,229,0,1)"; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 1; ctx.shadowColor = "rgba(0,0,0,1)"; //draw each phrase to the screen, making the top position 20px more each time so it appears there are line breaks $.each(phraseArray, function() { //set the placement in the canvas var lineheight = fontsize * 1.5; var newline = ++counter; newline = newline * lineheight; var topPlacement = y - $("#c").position().top + newline; var leftPlacement = x - $("#c").position().left; text = this; //draw the text ctx.drawText(font, fontsize, leftPlacement, topPlacement, text); ctx.save(); ctx.restore(); }); //reset the drop shadow so any other drawing don't have them ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowBlur = 0; ctx.shadowColor = "rgba(0,0,0,0)"; }

So this is fairly intense. It also uses a little library file from Jim Studt that you can find here. Though I have modified mine a bit because of some conflicts it was causing me. You can grab my copy at https://github.com/ninetwentyfour/Video-Canvas/blob/master/js/text.js

A few important parts in that code are

This is going to another function that we will write in a minute. Basically it is solving the problem of canvas text not having any idea how to word wrap. It will blow right off the page without this.

This intializes the text library file.

//draw each phrase to the screen, making the top position 20px more each time so it appears there are line breaks $.each(phraseArray, function() { //set the placement in the canvas var lineheight = fontsize * 1.5; var newline = ++counter; newline = newline * lineheight; var topPlacement = y - $("#c").position().top + newline; var leftPlacement = x - $("#c").position().left; text = this; //draw the text ctx.drawText(font, fontsize, leftPlacement, topPlacement, text); ctx.save(); ctx.restore(); });

This is the block that actually draws the text to the screen. It takes each entry in the phraseArray and draws it to the screen moving it down by a line each time.

The code to control the width of the text looks like this

function getLines(ctx,phrase,maxPxLength) { //break the text area text into lines based on "box" width var wa=phrase.split(" "), phraseArray=[], lastPhrase="", l=maxPxLength, measure=0; ctx.font = "16px sans-serif"; for (var i=0;i<wa.length;i++) { var w=wa[i]; measure=ctx.measureText(lastPhrase+w).width; if (measure<l) { lastPhrase+=(" "+w); }else { phraseArray.push(lastPhrase); lastPhrase=w; } if (i===wa.length-1) { phraseArray.push(lastPhrase); break; } } return phraseArray; }

This takes the canvas variable the original text and the width you want to limit it to then returns an array of pharses limited to the length you pass.

Once you have all this done you should have a working example. My final code looks like this.

<!DOCTYPE html> <html> <head> <style> body { background: #111; color:#eee; } #c { width: 640px; height: 360px; border:1px solid #111; float:left; background:#eee; } #main{ width:650px; margin:auto; } </style> </head> <body> <div id="main"> <canvas id="c"></canvas> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="text.js"></script> <script type="text/javascript"> $('#c').mousedown(function(e){ if ($('#textAreaPopUp').length == 0) { var mouseX = e.pageX - this.offsetLeft + $("#c").position().left; var mouseY = e.pageY - this.offsetTop; //append a text area box to the canvas where the user clicked to enter in a comment var textArea = "<div id='textAreaPopUp' style='position:absolute;top:"+mouseY+"px;left:"+mouseX+"px;z-index:30;'><textarea id='textareaTest' style='width:100px;height:50px;'></textarea>"; var saveButton = "<input type='button' value='save' id='saveText' onclick='saveTextFromArea("+mouseY+","+mouseX+");'></div>"; var appendString = textArea + saveButton; $("#main").append(appendString); } else { $('textarea#textareaTest').remove(); $('#saveText').remove(); $('#textAreaPopUp').remove(); var mouseX = e.pageX - this.offsetLeft + $("#c").position().left; var mouseY = e.pageY - this.offsetTop; //append a text area box to the canvas where the user clicked to enter in a comment var textArea = "<div id='textAreaPopUp' style='position:absolute;top:"+mouseY+"px;left:"+mouseX+"px;z-index:30;'><textarea id='textareaTest' style='width:100px;height:50px;'></textarea>"; var saveButton = "<input type='button' value='save' id='saveText' onclick='saveTextFromArea("+mouseY+","+mouseX+");'></div>"; var appendString = textArea + saveButton; $("#main").append(appendString); } }); function saveTextFromArea(y,x){ //get the value of the textarea then destroy it and the save button var text = $('textarea#textareaTest').val(); $('textarea#textareaTest').remove(); $('#saveText').remove(); $('#textAreaPopUp').remove(); //get the canvas and add the text functions var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); var cw = canvas.clientWidth; var ch = canvas.clientHeight; canvas.width = cw; canvas.height = ch; //break the text into arrays based on a text width of 100px var phraseArray = getLines(ctx,text,100); // this adds the text functions to the ctx CanvasTextFunctions.enable(ctx); var counter = 0; //set the font styles var font = "sans"; var fontsize = 16; ctx.strokeStyle = "rgba(237,229,0,1)"; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 1; ctx.shadowColor = "rgba(0,0,0,1)"; //draw each phrase to the screen, making the top position 20px more each time so it appears there are line breaks $.each(phraseArray, function() { //set the placement in the canvas var lineheight = fontsize * 1.5; var newline = ++counter; newline = newline * lineheight; var topPlacement = y - $("#c").position().top + newline; var leftPlacement = x - $("#c").position().left; text = this; //draw the text ctx.drawText(font, fontsize, leftPlacement, topPlacement, text); ctx.save(); ctx.restore(); }); //reset the drop shadow so any other drawing don't have them ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; ctx.shadowBlur = 0; ctx.shadowColor = "rgba(0,0,0,0)"; } function getLines(ctx,phrase,maxPxLength) { //break the text area text into lines based on "box" width var wa=phrase.split(" "), phraseArray=[], lastPhrase="", l=maxPxLength, measure=0; ctx.font = "16px sans-serif"; for (var i=0;i<wa.length;i++) { var w=wa[i]; measure=ctx.measureText(lastPhrase+w).width; if (measure<l) { lastPhrase+=(" "+w); }else { phraseArray.push(lastPhrase); lastPhrase=w; } if (i===wa.length-1) { phraseArray.push(lastPhrase); break; } } return phraseArray; } </script> </body> </html>

This is a pretty basic and is missing a few things that would make it more helpful but it should give you a good start. Please feel free to leave questions or advice on better ways to do this in the comments.

A Day In The Life Of Me

2011-03-04T00:00:00-07:00

A Day In The Life Of Me

Published: March 03, 2011

Super awesome timelapse at the office.

Fast CakePHP Search With IndexTank

2011-02-16T00:00:00-07:00

Fast CakePHP Search With IndexTank

Published: February 16, 2011

Update April 08, 2012: IndexTank is shutting down. Use IndexDen instead. Instructions here.

I've previously posted my ghetto CakePHP search function. This time I'm going to show you a much better method, mainly by offloading the work to people who really know how to do search. That's where IndexTank comes in - they know how to do search. They power the search for Reddit, WordPress.com, and many others.

You simply hand them the documents you want indexed and the give you back the ability to query against it.

I'm not going to spend anytime explaining how IndexTank works, mainly because I barely understand it. Instead I will show you a simple way to get it to work with CakePHP.

The code in this example is built around the code for Homkora in which the main two Objects are Projects and Timers. So to start grab the IndexTank library from https://indextank.com/documentation/php-client this would be a good page to read as well just to get an idea of what's going on.

Take the file you downloaded (indextank_client.php in my case) and place it in app/vendors of your CakePHP application.

Now open up your app_controller.php and add these four functions

These are the three functions that call to IndexTank directly and the one that creates the IndexTank client object. It imports the library and create a new $client object.

Each one is built to be passed the variables it needs to make a connection to IndexTank.

All the functions accept the $indexType variable which is where you set which index to perform actions against. In my case I have one for Projects and one for Timers.

So now lets add some documents to our index.

<?php if ($this->Project->save($this->data)) { $this->Session->setFlash('The project has been saved', 'default', array('class' => 'flash_good')); $this->redirect(array('action' => 'index')); } ?>

I'm going to assume you having something similar in your controller. In this case it's in my add() function in the projects controller.

Let's add the code to call our addIndextank() function in the app controller.

<?php if ($this->Project->save($this->data)) { //send project to index tank $indexData = array('text'=>$this->data['Project']['title'],'title'=>$this->data['Project']['title'],'description'=>$this->data['Project']['description'],'user_id'=>$_SESSION['Auth']['User']['_id']); $id = $this->Project->id; $this->addIndextank("HomkoraProjects",$id,$indexData); $this->Session->setFlash('The project has been saved', 'default', array('class' => 'flash_good')); $this->redirect(array('action' => 'index')); } ?>

Let go over what's going on here.

<?php $indexData = array('text'=>$this->data['Project']['title'],'title'=>$this->data['Project']['title'],'description'=>$this->data['Project']['description'],'user_id'=>$_SESSION['Auth']['User']['_id']); ?>

This line is setting the data that will be indexed. The 'text' field is one used by IndexTank by default and I recommend setting it to the type of query that will be preformed the most.

The key value pairs after 'text' can be whatever other data you would like to save and be able to query against.

Simply sets the ID that is going to be used for the document ID in IndexTank. I figured it best to keep them the same as in the application database so this sets it as the last saved Project ID.

This line is the call to the addIndextank function. The "HomkoraProjects" is what is passed as $indexType in the app_controller and is basically the name of the index. We then pass the ID and the data to be indexed too.

Now when you add a new Project you should also be adding a new document to IndexTank.

Now if you delete the Project it's best to delete to document in the index as well. So let's add some code to our projects controller delete() function.

Starting with

<?php if ($this->Project->delete($id)) { $this->Session->setFlash('Project deleted', 'default', array('class' => 'flash_good')); $this->redirect(array('action'=>'index')); } ?>

We can add a simple call like

<?php if ($this->Project->delete($id)) { $this->deleteIndextank("HomkoraProjects",$id); $this->Session->setFlash('Project deleted', 'default', array('class' => 'flash_good')); $this->redirect(array('action'=>'index')); } ?>

Deleting documents requires a lot less information so we just have to pass it the $indexType and the ID (which should match between your app and IndexTank if you add documents using the above example)

Alright, now you can add and remove documents from your index, but what good are they without being able to search against them.

In my projects controller I added the following function

<?php function search(){ $query = $this->data['Project']['search']; $res = $this->searchIndextank("HomkoraProjects",$query); $i = 0; foreach($res->results as $doc_id){ $params = array( 'conditions' => array('_id' => $doc_id->docid) ); $projects[$i++] = $this->Project->find('first',$params); } $this->set('projects', $projects); } ?>

I pass the search term through a form and set it as the $query variable.

Here I call our searchIndextank() function and pass it the $indexType again and the query to perform.

You'll notice in the searchIndextank() I return the data $res and in the search() function I set it to $res.

Once I get the results from IndexTank I can use them to search for the Projects in my database. Here I set them all the the $projects array and prepare them for display in the view.

I know you're thinking, if you are getting the data from the database anyway - why use IndexTank?

Well with only a few records, you aren't going to get a much faster result, but with lots of records, IndexTank will return the results faster plus it allows you to cut down on your database calls. Their ability to rank results and search based on numerous factors is pretty good and better than what the average person can write in most cases.

I'm using a pretty bare bones searchIndextank() function but this should get you started. I'm quite impressed with the results so far and I'm continuing to find better ways to work with their index.

If you know a better way to set this up, or have questions, let me know in the comments.

Haml, Sass, Markdown, and CakePHP - Oh My!

2011-01-11T00:00:00-07:00

Haml, Sass, Markdown, and CakePHP - Oh My!

Published: January 11, 2011

I've recently begun using Haml and Sass instead of good ol' HTML and CSS. If you haven't heard of them, "Haml is a refreshing take that is meant to free us from the shitty templating languages we have gotten used to", and "Sass makes CSS fun again". The conciseness and power of Haml and Sass are what really made me make the switch. There was just one downside, both are designed for use with Ruby.

While I don't have anything against Ruby, it's not my language of choice. I use PHP for just about everything backend and most of my apps and sites are built upon CakePHP, my favorite framework.

Luckily there are ports of Haml and Sass for use with PHP. There are several out there, but I went with PHamlP mainly because it has a CakePHP plugin available for download.

The install instructions for the plugin are greatly lacking, or at least I couldn't get them to work out of the box, so I decided to document how I went about getting it working and rocking out.

Oh, and as a bonus, we are going to setup Markdown too.

So to start grab a copy of PHamlP and find a CakePHP project you would like to add it to. Unzip the file and you should be looking at a Installation.txt, license.txt, vendors, views, and webroot folders.

Copy the files in each folder to their corresponding folders in /app in your Cake project. (e.g. vendors => vendors | views => views | webroot => webroot)

Now for all the wonderful configuring.

HAML

Let's start with getting just Haml working for the time being.

Open up your app_controller.php and add the following line

Now open up /config/core.php and scroll to the bottom. Add

The first option is telling Haml which HTML or XHTML version to compile into. I use HTML5 for everything these days so that's what I picked. The second option tells the app where to find the Haml filter that starts the process of compiling Haml to HTML. If you put the filters folder inside your views folder, this is the path you need.

Now open up the haml.php file you added to views. Find the line that says

and change it to

This assumes you copied the vendors contents to vendors in CakePHP.

After that, you should have Haml up and running. I find the best way to test without changing all you layouts and views is to test with a page, then move on to replacing the rest of your views.

SASS

Let's tackle the Sass.

One important decision to make right off the bat is if you want to use the older .sass format or the newer .scss version. Now according to the docs, it shouldn't matter, you just create whatever type you want and it handles the rest. Well I didn't find this to work, and I had to change some code to support .scss files. So for the purpose of this tutorial I will show how to get those to work, but I'll flag the step to skip if you want to use the older .sass

With that out of the way, time to start the config.

Open the core.php file back up and go to the Haml code we added earlier. Under that add

The first line sets the output style of the css. I use compressed as it saves a little filesize, you can pick whatever you would like though. The second line tells Cake to filter the files with the sass.php you put in webroot.

Now open up sass.php and find the line that looks like

Replace it with

After that you should be able to start putting .sass files into your css directory and they will compile to css.

However, at least in my case, I lost my gzip on the css files. To add it back, replace the section that sets the headers, looks like

header("Content-Type: text/css"); header("Expires: " . gmdate("D, j M Y H:i:s", time() + DAY) . " GMT"); header("Cache-Control: cache"); // HTTP/1.1 header("Pragma: cache"); // HTTP/1.0

with

ob_start ("ob_gzhandler"); header("Content-Type: text/css"); $seconds_to_cache = 31556926; $ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT"; header("Expires: $ts"); header("Pragma: cache"); header("Cache-Control: maxage=$seconds_to_cache");

Then add a line to the bottom of the file with this

Your compiled css files should now transfer gzipped.

Now lets add support for the newer .scss file. If you want to use .sass you can skip this part.

Find the line

and replace it with

You can now use .scss files instead of .sass

Haml and Sass should be up and running now.

MARKDOWN

However, some people make the argument that you shouldn't use Haml to style the content of your page. By content, they are referring to the main text of the page. The "meat" so to speak. For a good read on the subject, check out this post. http://chriseppstein.github.com/blog/2010/02/08/haml-sucks-for-content/

Well one great alternative to using HTML to markup you text, is to use Markdown. To use Markdown with Haml you use something similar to

inside your Haml files. To get support for this, you need to download the latest Markdown PHP port from http://michelf.com/projects/php-markdown/

Make sure to grab the EXTRA's version.

Add a folder to vendors called markdown. Place the download files into it.

Now open up the HamlMarkdownFilter.php inside the views/filters folder.

Change

Now open up the _HamlMarkdownFilter.php file inside /vendors/haml/filters

Change

also change

return '<?php '.(!empty($this->vendorPath)?'require_once "'.$this->vendorPath.'";':'').'$markdown___=new '.$this->vendorClass.'();echo $markdown___->safeTransform("'.preg_replace(HamlParser::MATCH_INTERPOLATION, '".\1."', $text).'");?>';

return '<?php '.(!empty($this->vendorPath)?'require_once "'.$this->vendorPath.'";':'').'$markdown___=new '.$this->vendorClass.'();echo $markdown___->transform("'.preg_replace(HamlParser::MATCH_INTERPOLATION, '".\1."', $text).'");?>';

Now throw some Markdown into you Haml files and prepare to be amazed.

I'm not sure why I had to change so much to get this setup to work. If you compare the Installation.txt to this post, you will see mine takes much more work. Don't take that as a dig on the developers though, there could be many reasons their instructions didn't work for me. I just figured if I had this hard of a time, someone else may run into similar issues and I could save them some time with this write up.

If I am an idiot and there is a way simpler way to get this working, let me know in the comments. You can also view a project I've set this up with on github.

New Time Tracking Web App - Homkora

2011-01-01T00:00:00-07:00

New Time Tracking Web App - Homkora

Published: January 01, 2011

I have recently launched the beta my new side project Homkora.

Homkora is a time tracking web app that aims to be as simple as possible. I was not happy with any of the offerings I found so I made my own. It let's you make projects and timers. That's it. You can check the code out at github.

Free Single Page HTML/CSS Template

2010-12-19T00:00:00-07:00

Free Single Page HTML/CSS Template

Published: December 12, 2010

I have just completed a new HTML CSS template for you to download. The site is made for those who need a simple single page web presence. The site is easy to modify and get setup. Check out the demo.

You can visit the github page here, or you can grab the zip direct here.If you like it, or use it somewhere, let me know in the comments.

Clean URL's in Nginx

2010-11-07T00:00:00-06:00

Clean URL's in Nginx

Published: November 07, 2010

Quick post to let everyone know of a good trick I just figured out. Most clean URL's are created through a rewrite and query page that does all the work. Sometimes though you just want to have a couple php scripts that you can link to like http://oldstatic.travisberry.com/example

In Apache this is trivial. In Nginx, you can spend a couple days trying to get right.

Turns out the solution is simple. If you use a block of code like this

and comment out

Your code block should now look like

Now instead of linking to /example.php, you can save the file with no extension, put it on your server, and link to /example

Nginx will now handle files without and extension as PHP files. This is a solution that will only fit a limited number of use cases, but compared to writing a rewrite wrapper, this is quick and easy.

Lightning Fast PHP Server With Nginx, eAccelerator, and Varnish

2010-10-17T00:00:00-06:00

Lightning Fast PHP Server With Nginx, eAccelerator, and Varnish

Published: 2010-10-17

In the word of servers, Apache is still the undisputed king. It’s extendability and ability to run anything you can throw at it has led to it being the number one most used server in the world. Just because it has large numbers though, doesn’t mean it’s the best in terms of performance.

When running a site with lots of traffic, Apache can quickly grow into a large beast. This can be overcome by throwing more machines (and money) at the problem, but for many companies and people, that simply isn’t an option. Instead why not squeeze every piece of performance that you can out of your existing tech.

Enter Nginx. "Nginx is known for its high performance, stability, rich feature set, simple configuration, and low resource consumption." In other words, it will run faster and more efficiently than Apache.

Installing Nginx on Ubuntu is fairly simple.

A simple

will get you started.

Now edit the file in /etc/nginx/sites-available/default

change it to

# You may add here your # server { # ... # } # statements for each of your virtual hosts server { listen 8080; server_name localhost; access_log /var/log/nginx/localhost.access.log; ## Default location location / { root /var/www; index index.php; } ## Images and static content is treated different location ~* ^.+.(jpg|jpeg|gif|css|png|js|ico|xml)$ { access_log off; expires 30d; root /var/www; } ## Parse all .php file in the /var/www directory location ~ .php$ { fastcgi_split_path_info ^(.+\.php)(.*)$; fastcgi_pass backend; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME /var/www$fastcgi_script_name; include fastcgi_params; fastcgi_param QUERY_STRING $query_string; fastcgi_param REQUEST_METHOD $request_method; fastcgi_param CONTENT_TYPE $content_type; fastcgi_param CONTENT_LENGTH $content_length; fastcgi_intercept_errors on; fastcgi_ignore_client_abort off; fastcgi_connect_timeout 60; fastcgi_send_timeout 180; fastcgi_read_timeout 180; fastcgi_buffer_size 128k; fastcgi_buffers 4 256k; fastcgi_busy_buffers_size 256k; fastcgi_temp_file_write_size 256k; } ## Disable viewing .htaccess & .htpassword location ~ /\.ht { deny all; } } upstream backend { server 127.0.0.1:9000; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # #error_page 500 502 503 504 /50x.html; #location = /50x.html { # root /var/www/nginx-default; #} # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { #proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { #fastcgi_pass 127.0.0.1:9000; #fastcgi_index index.php; #fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; #includefastcgi_params; # another virtual host using mix of IP-, name-, and port-based configuration # #server { #listen 8000; #listen somename:8080; #server_name somename alias another.alias; #location / { #root html; #index index.html index.htm; #} #} # HTTPS server # #server { #listen 443; #server_name localhost; #ssl on; #ssl_certificate cert.pem; #ssl_certificate_key cert.key; #ssl_session_timeout 5m; #ssl_protocols SSLv3 TLSv1; #ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv3:+EXP; #ssl_prefer_server_ciphers on; #location / { #root html; #index index.html index.htm; #} #}

This assumes your root web folder is /var/www. You’ll also notice I have it set to listen on port 8080 and not the normal 80. This comes into play later when we setup of Varnish, so just go with me for now.

Now we need to get PHP installed so we can actually serve PHP files.

As usual start with

then

You may have to add deb http://php53.dotdeb.org stable all to your packages list for php5-fpm and php5-cgi to show up.

Before configuring PHP let’s install eAccelerator. "eAccelerator is a free open-source PHP accelerator & optimizer. It increases the performance of PHP scripts by caching them in their compiled state, so that the overhead of compiling is almost completely eliminated. It also optimizes scripts to speed up their execution. eAccelerator typically reduces server load and increases the speed of your PHP code by 1-10 times."

First

then

Now cd into /tmp/

wget http://bart.eaccelerator.net/source/0.9.6.1/eaccelerator-0.9.6.1.tar.bz2 tar xvjf eaccelerator-0.9.6.1.tar.bz2 cd eaccelerator-0.9.6.1/ sudo phpize sudo ./configure –enable-eaccelerator=shared sudo make sudo make install

Now edit /etc/php5/fpm/php.ini

and right under the [PHP] block add

; eAccelerator configuration ; Note that eAccelerator may also be installed as a PHP extension or as a zend_$ ; If you are using a thread safe build of PHP you must use ; zend_extension_ts instead of zend_extension ;extension = "/usr/lib/php5/20090626+lfs/eaccelerator.so" zend_extension = "/usr/lib/php5/20090626+lfs/eaccelerator.so" eaccelerator.shm_size = "16" eaccelerator.cache_dir = "/var/cache/eaccelerator" eaccelerator.enable = "1" eaccelerator.optimizer = "1" eaccelerator.check_mtime = "1" eaccelerator.debug = "0" eaccelerator.filter = "" eaccelerator.shm_max = "0" eaccelerator.shm_ttl = "0" eaccelerator.shm_prune_period = "0" eaccelerator.shm_only = "0" eaccelerator.compress = "1" eaccelerator.compress_level = "9" eaccelerator.allowed_admin_path = "/var/www/eaccelerator"

Now restart PHP

Then restart Nginx

Now if you hit http://localhost:8080/index.php you should see your site.

The only thing left to setup at this point is Varnish.

"Varnish store web pages in memory so the web servers don’t have to create the same web page over and over again. The web server only recreate a page when it is changed. Additionally Varnish can serve web pages much faster then any application server is capable of – giving the website a significant speed up."

Install with

After install run

to make sure it’s not running while we configure it.

Now run

Varnish should now be running. Check by typing

If you see a series of lines then Varnish should be working.

You can run one more test by going to your browser and reloading the page.

If you see results like

12 SessionOpen c 192.168.10.101 51732 :80 12 ReqStart c 192.168.10.101 51732 1440203205 12 RxRequest c GET 12 RxURL c /favicon.ico 12 RxProtocol c HTTP/1.1 12 RxHeader c Host: www.ironyogistudios.com 12 RxHeader c User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10 12 RxHeader c Accept: image/png,image/*;q=0.8,*/*;q=0.5 12 RxHeader c Accept-Language: en-us,en;q=0.5 12 RxHeader c Accept-Encoding: gzip,deflate 12 RxHeader c Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 12 RxHeader c Keep-Alive: 115 12 RxHeader c Connection: keep-alive

Then Varnish is correctly intercepting your requests. Varnish is getting the requests on port 80 forwarding them to Nginx if needed through port 8080, which is why we set it to 8080 earlier. You can set the port to foward in /etc/varnish/default.vcl. You can learn more about the setup and optimization of Varnish here.

You should now have a lighting fast PHP server. This setup is a pretty basic configuration so I’m sure by tweaking each individual component to your needs would get even more performance out of it. Compared to a base Apache config, though, this is fantastic.

If you have some optimization techniques, or have any questions, let me know in the comments.

Remove WordPress' NoFollow Without A Plugin

2010-10-03T00:00:00-06:00

Remove WordPress' NoFollow Without A Plugin

Published: 2010-10-03

And even better, do so without modifying the WordPress core files. It's really quite simple.

In your templates functions.php file add

<?php function comment_author_link_mine( $comment_ID = 0 ) { echo get_comment_author_link_mine( $comment_ID ); } function get_comment_author_link_mine( $comment_ID = 0 ) { /** @todo Only call these functions when they are needed. Include in if... else blocks */ $url = get_comment_author_url( $comment_ID ); $author = get_comment_author( $comment_ID ); if ( empty( $url ) || 'http://' == $url ) $return = $author; else $return = "<a href='$url' class='comment_url'>$author</a>"; return apply_filters('get_comment_author_link', $return); } ?>

Then in your comments.php file, find and replace any mention of

With

This simply replaces the core files "comment_author_link()" function with one of our own. The original has

as the link. We simply remove the rel attribute and change it to

and it removes the nofollow attribute from your comments. No modifying of the core files, and one less plugin to deal with.

If you have tips for removing other plugins and using your own solution, let me know in the comments.

If is_page() With Regular PHP

2010-10-02T00:00:00-06:00

If is_page() With Regular PHP

Published: 2010-10-02

My article on WordPress' is_page() is one of the most popular articles on my site. One thing I receive questions about on a regular basis, is how to use is_page() in regular PHP.

Well the downside is, you can't. The upside is that you can still perform a similar check

<?php $baseurl = 'http://www.example.com'; //set the base url of the site $pageYouWant = $baseurl."/the-rest-of-the-url"; //add the rest of the url you want to check against $currentPage = $baseurl.$_SERVER['REQUEST_URI'];// this gets the current page url if($pageYouWant==$currentPage) { //do something } ?>

Not as smooth as is_page() but still a fairly simple way to check the page you are currently on. You can easily check if it is "=="/"!=", and add in as many "&&"/"||" conditions as you want.

As always, if you have a better way to do this, or use it in something cool, let me know in the comments.

Use PHP To Zip Folders For Download

2010-09-23T00:00:00-06:00

Use PHP To Zip Folders For Download

Published: 2010-09-23

Uploading files with PHP is covered to death on the internet. The other side of that, downloading files, is not covered nearly as much.

When a user uploads say, hundreds of images to a folder, and they want to download them all later, it can turn into a giant time sink making them download the files one at a time.

A better alternative would be to offer the files individually and with a "Download All As Zip" link.

I found a solution here, but it required putting the php file in every directory you would like to zip. Not exactly the best solution. So I tweaked it to be a bit more dynamic.

This code is based on the assumption that there is a folder called something like user_uploads with a sub-folder for each user, something like Travis_Berry

<?php //Get the directory to zip $filename_no_ext= $_GET['directtozip']; // we deliver a zip file header("Content-Type: archive/zip"); // filename for the browser to save the zip file header("Content-Disposition: attachment; filename=$filename_no_ext".".zip"); // get a tmp name for the .zip $tmp_zip = tempnam ("tmp", "tempname") . ".zip"; //change directory so the zip file doesnt have a tree structure in it. chdir('user_uploads/'.$_GET['directtozip']); // zip the stuff (dir and all in there) into the tmp_zip file exec('zip '.$tmp_zip.' *'); // calc the length of the zip. it is needed for the progress bar of the browser $filesize = filesize($tmp_zip); header("Content-Length: $filesize"); // deliver the zip file $fp = fopen("$tmp_zip","r"); echo fpassthru($fp); // clean up the tmp zip file unlink($tmp_zip); ?>

Save this code as zip_folders.php

Then when you want to provide a link to download a users uploads as a zip file, you link to it like,

That will cause a download prompt to appear for the user when clicking on the link.

You'll notice I use the system Zip command as opposed to the PHP Zip extension. For more complex Zipping needs, it looks like it would be a better alternative. For something simple like this, I find the system call sufficient.

If you find this post useful, or have any PHP Zip tips, let me know in the comments.

Upload Videos To MediaSilo With PHP/FTP

2010-09-18T00:00:00-06:00

Upload Videos To MediaSilo With PHP/FTP

Published: 2010-09-18

In continuing with my last post on how to upload videos to Ooyala with PHP, here is one for MediaSilo. This ones a little different though in that it uses FTP as opposed to an API to upload the videos.

Alright, so let's get to the code.

<?php //MediaSilo Information $server = "upload.mediasilo.com"; $ftp_user_name = "YOUR MEDIASILO LOGIN NAME AND HOSTNAME(e.g NAMEHOSTNAME"; $ftp_user_pass = "YOUR MEDIASILO LOGIN PASSWORD"; $dest = "THE WORKSPACE YOU WANT TO UPLOAD TO"; //Video Folder Information $source_folder = "FULL PATH TO FOLDER. NO TRAILING SLASH (e.g. /var/www/videofolder)"; //Grabs everything in the source folder. You may want to set a file type like, ($source_folder."/*.flv") $sources = glob($source_folder."/*.*"); //Connect to FTP set_time_limit(0); $connection = ftp_connect($server); $login = ftp_login($connection, $ftp_user_name, $ftp_user_pass); //Check connection if (!$connection || !$login) { die('Connection attempt failed!'); } //If there are no files, don't FTP to MediaSilo if (empty($sources)) { //Close the FTP connection ftp_close($connection); $fileUploadMessage = "No files selected for upload"; echo $fileUploadMessage; }else{ //If there are files FTP them to MediaSilo foreach ($sources as $source){ //Put each video file on FTP server $upload = ftp_put($connection, $dest."/".basename($source) , $source, FTP_BINARY); //Check upload status //Display message if (!$upload) { echo "Cannot upload: ".basename($source)." <br />"; }else{ echo "Upload complete: ".basename($source)." <br />"; } } //Close the FTP connection ftp_close($connection); //Videos should now be uploaded to MediaSilo } ?>

The above code should be fairly easy to understand. The code just globs a folder of all files and loops through them, uploading each one.

If you have any ideas on how to make this code better, or expand upon it, let me know in the comments.

(One caveat to using FTP to upload to MediaSilo is that you do need to have at least a “Hollywood” level account, which is going to set you back $100 a month)

Upload A Video To Ooyala With PHP

2010-09-11T00:00:00-06:00

Upload A Video To Ooyala With PHP

Published: 2010-09-11

EDIT: You can find a better/updated Ooyala class here.

Ooyala is a fairly popular video hosting platform. We have started using them where I work, and they seem to be doing a really good job so far. One of the advantages of Ooyala is their nice API. They have some example code for you to use, but one feature that was lacking was uploading. They also have a widget that does do uploading but it is handled through Flash, something I wanted to avoid.

This example builds on top of their existing PHP code. Here is the final code. (You're really going to want to copy paste this into a real code editor, my code tag makes me really mess with my formatting. Apologies.)

<?php /** *Publish video to ooyala */ function publish(){// this kicks off the massive publish functions $labels = $_POST['label']; $file = $_POST['video_file']; $dir = $file; $name = explode("/", $dir ); $name = array_reverse($name );//this get just the name of the file and not //the whole path for the name and title of the video $nameforshow = $name[0]; $label = '/'.$labels; $filesize = filesize($dir); $expires = time() + 900; $upload = OrdersController::upload(array('expires' => $expires, 'file_size' => $filesize, 'file_name' => $name[0], 'title' => $name[0]),$dir,$label); //send this to the upload function } function upload($params,$dir,$label){//this passes to the send request function //for the first time return OrdersController::send_request('create_video', $params,$dir, $label,''); } function upload_complete($params,$label2){//this gets hit after posting the //video to ooyala $label3 = $label2; $dir =''; $label = ''; return OrdersController::send_request('upload_complete', $params, '','',$label3); //goes back to send request for the second time } function assign_label($params){//this starts creating and assigning labels return OrdersController::send_request2('labels', $params);//this kicks off //send request 2 } function send_request($request_type, $params,$dir,$label,$label3){ // first time through this hits the create video url and returns a url //to post the video to. second time through we hit the upload complete url $ooyala_pcode = 'PUT YOUR OOYALA PARTNER CODE HERE'; $ooyala_scode = 'PUT YOUR OOYALA SECRET CODE HERE'; if (!array_key_exists('expires', $params)) { $params['expires'] = time() + 900; } $string_to_sign = $ooyala_scode; $url = 'http://api.ooyala.com/ingestion/'.$request_type.'?pcode='.$ooyala_pcode; $keys = array_keys($params); sort($keys); foreach ($keys as $key) { $string_to_sign .= $key.'='.$params[$key]; $url .= '&'.rawurlencode($key).'='.rawurlencode($params[$key]); } $digest = hash('sha256', $string_to_sign, true); $signature = ereg_replace('=+$', '', trim(base64_encode($digest))); $url .= '&signature='.rawurlencode($signature); if ($request_type == 'create_video') {// if type is create video then //parse the returned xml for the post url $xml = simplexml_load_file($url); foreach($xml->children() as $child){ if($child->getName()=='embedCode'){ $embed_code = $child; } if($child->getname()=='urls'){ $upload_url = $child->children(); $file= $dir; $label2 = $label; $ch = curl_init($upload_url); curl_setopt($ch, CURLOPT_POSTFIELDS, array('file'=>"@$file")); //post the file curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $postResult = curl_exec($ch); curl_close($ch); if ($postResult != ''){ $upload_complete = OrdersController::upload_complete(array ('embed_code' => $embed_code),$label2); //after posting you have to hit the upload complete url //to get ooyala to process the video. //so kick this up to the upload complete function } } } }else{ if ($request_type == 'upload_complete') { // hit the upload complete url $ch = curl_init($url); $postResult2 = curl_exec($ch); curl_close($ch); $add_label = OrdersController::assign_label(array( 'embedCodes' => $params['embed_code'], 'labels' => $label3, 'mode'=>'assignLabels')); // this kicks back up to assign label function to add a label //to the video } } } function send_request2($request_type, $params) // this creates the url to hit to add a label to the last uploaded video { $ooyala_pcode = 'PUT YOUR OOYALA PARTNER CODE HERE'; $ooyala_scode = 'PUT YOUR OOYALA SECRET CODE HERE'; //Add an expire time of 15 minutes unless otherwise specified if (!array_key_exists('expires', $params)) { $params['expires'] = time() + 900; } $string_to_sign = $ooyala_scode; $url = 'http://api.ooyala.com/partner/'.$request_type.'?pcode='.$ooyala_pcode; $keys = array_keys($params); sort($keys); foreach ($keys as $key) { $string_to_sign .= $key.'='.$params[$key]; $url .= '&'.rawurlencode($key).'='.rawurlencode($params[$key]); } $digest = hash('sha256', $string_to_sign, true); $signature = ereg_replace('=+$', '', trim(base64_encode($digest))); $url .= '&signature='.rawurlencode($signature); $ch = curl_init($url); $postResult3 = curl_exec($ch); curl_close($ch);//now the video is done and uploaded to ooyala } ?>

Essentially, you want to create an upload form, and post the values to the publish() function. From there you should be good to go.

I’m sure there is an easier way to do this, so if you know how to improve this, please let me know in the comments.

Reasons And Tips For Automated Motion Workflow

2010-08-07T00:00:00-06:00

Reasons And Tips For Automated Motion Workflow

Published: 2010-08-07

In many video projects there is some style of graphic, lower third, or bumper that is used numerous time throughout the piece, only requiring a text change. Or you will have clients that sell templatized videos, who just need someone to change the default text overlays inside the base video.

Both of these problems can be done by hand, wasting hours upon hours copy and pasting information. The better way would be to reduce the people down to some data entry and auto generate the rest.

Well we tried to do just that at work recently. Our job was to make a automated solution that would allow someone to upload a CSV to a web app and have a folder of videos at the end.

At first we came up with a solution that was way too complicated. We were going to create image files for the slates dynamically, then stitch them onto a base video. The system would have worked, but it was unwieldy and unnecessarily complex. Next we decided to use a solution using After Effects. We did get this one working, but like the previous idea, the system for using it was shoddy at best. One thing I did really like about this method was it taught me a whole lot about the .jsx format. Namely that it's just a wrapper for javascript. :)

Finally we realized Motion would be the perfect solution for our task. Not only is the rest of our workflow done through FCP and FCS, but it's ability to work without needing a bunch of hacked together parts was fantastic. The render speed was much greater than the other solutions thanks to the fact that we could use our already existing Qmaster cluster.

A quick overview of our system is

Editors create Motion template files and upload them to our system.
User hits a web app developed in CakePHP.
The user hits generate videos and uploads a CSV.
Our system parses the information in the CSV and matches it to the correct template Motion file.
The system takes a template Motion file and duplicates it to a new folder with the slate text replaced with information from the CSV
The output folder of the new Motion files is a watch folder for Compressor.
Compressor grabs the Motion files and renders them out to a specified folder with encoding settings defaulted for the job.

After this you can continue on with your normal delivery process. If that involves uploading to a video platform, this should easily be automated as well.

Unfortunately I can't post any of the code we wrote for the project but I can point you to a few places we went for help.

What is XML and what does it mean for Final Cut Studio users?

Motion XML Documentation

CakePHP XML Parsing

Import CSV to CakePHP

Creating a Watch Folder for Compressor 2

One thing we came across and spent many hours trouble shooting was the crashing of our outputted Motion files. Once they tried to run the compressor droplet, it would crash. No matter how we would diff the files we couldn't find any difference between the original and the output, apart from the replaced text.

We finally discovered the solution.

This is part of the Motion XML file. Website is the text being replaced. Above that is a length set in styleRun. This is normally set to the length of the placeholder text. In this case it would be 7. If you replace the word with one that is longer you have no problem. The Motion file will render like a champ. If it's shorter all hell breaks loose. So the fix is as simple as changing them all to 1. No more crashing.

Other than that, the rest of the process was really straight forward. It has reduced the amount of time the editors need to spend on this client dramatically, leaving them open for other work.

Motion's packaging of XML makes automating it surprisingly simple. We plan to explore its capabilities and look for even more places where we can automate the workflow.

If you have tips, tricks, or stories of Motion automation, let me know in the comments.

Create A Ghetto, But Functional, Search Function For CakePHP

2010-06-21T00:00:00-06:00

Create A Ghetto, But Functional, Search Function For CakePHP

Published: 2010-06-21

Recently I needed to add a search function for a CakePHP application I am building. After googling the bejeezus out of it, I never found a solution that worked. Some required the use of a search table, which then needed to index all of your content, other's just didn't work at all.

After much hacking around I came up with a solution that works for me. This may or may not solve your particular problem, but it may help get you started in the right direction.

I'll be using a fairly standard User MVC for this demo.

First, I started in the view. Instead of using the built in cakephp form helpers, I hand coded my inputs. You could easily use the form helpers though. Just make sure to set the value on certain inputs.

<div id="search"> <form id="orderform" action="<?php echo $html->url('/users/search'); ?>" method="post" enctype="multipart/form-data"> <label for="searchuser">Search Users:</label><input type="text" name="searchuser" /> Search By: <input type="radio" name="searchtype" value="User.id" checked> User ID <input type="radio" name="searchtype" value="User.email" checked> User Email <input type="radio" name="searchtype" value="Entity.name"> Entity Name <?php echo $form->end('Search'); ?> </div>

The code is fairly straight forward. In the form tag I declared which action in the controller to use. The input tags are really straight forward. The only thing to note is in the search type radio buttons, the value is set to the Model.fieldname. This is important later on. But make sure to set them to the models you intend to search.

Now in the controller, it's time to add the search action.

<?php function search() { $searchtype = $_POST['searchtype']; $value = $_POST['searchuser']; $results = $this->User->find('all', array('fields' => array( 'User.id', 'User.email', 'Entity.name', 'User.created', 'User.modified' ), 'order' => 'User.id ASC', 'conditions' => array($searchtype . ' ' . 'LIKE' => '%'.$value.'%') )); $this->set('results', $results); } ?>

It's really a pretty standard find all but the key lies in the conditions. They are set to variables that are posted through the form. So if you selected Order ID as the type and entered 1 in the search box. Your condition would be array('Order.id' => %1%) One last thing is to create the search.ctp

<div id="search"> <form id="orderform" action="<?php echo $html->url('/users/search'); ?>" method="post" enctype="multipart/form-data"> <label for="searchuser">Search Users:</label><input type="text" name="searchuser" /> Search By: <input type="radio" name="searchtype" value="User.id" checked> User ID <input type="radio" name="searchtype" value="User.email" checked> User Email <input type="radio" name="searchtype" value="Entity.name"> Entity Name <?php echo $form->end('Search'); ?> </div> <div id="contentbox"> <h2>Manage Users</h2> <table> <thead> <th>ID</th><th>Email</th><th>Entity Name</th> </thead> <?php foreach($results as $user) : ?> <tr> <td><?php echo $user['User']['id'] ?></td> <td><?php echo $user['User']['email'] ?></td> <td><?php echo $user['Entity']['name'] ?></td> </tr> <?php endforeach; ?> </table> </div>

It's just a simple loop through the results. I also added the search box to the top of this page, so the user can run another search if they want.

So it may not be the cleanest solution in the world, but it works well, and is flexible enough so you can tweak it to many different situations. If you have a better way to search with CakePHP, please let me know in the comments. Or feel free to ask any questions.

How To Setup A LAMP Virtual Machine

2010-05-09T00:00:00-06:00

How To Setup A LAMP Virtual Machine

Published: 2010-05-09

In an effort to develop in an environment closer to many production servers, many people have begun developing in virtual machines running on their host os. This article is a comprehensive guide to creating a LAMP virtual machine (plus a few other goodies).

First you need the virtual machine software. Download VirtualBox and install it on your host os. Once installed go download the latest version of Ubuntu. You want the desktop version, not the server. Save the .iso file to your desktop.

VirtualBox Setup & Ubuntu Installation

Launch VirtualBox and create a new machine by clicking the button in the top left corner. Click next on the screen the comes up. Create a name for your new machine, and select Linux as your Operating System, and Ubuntu as you Version. Select a base amount of memory for the virtual machine to use. Use at least the default settings, but use as much as your system can spare. I recommend setting it to no more than 50% of your total RAM, unless you have lots to spare. Hit next. On the next screen select the option to create a new hard disk. This will launch the Create New Virtual Disk Wizard. Hit next. Select dynamically expanding storage and hit next. Select the size of the hard disk you want the virtual machine to have. This does take up real space on you computer. The default of 8 gigs should be sufficient for most. On the next screen hit finish. Then finish again.

Now with your new machine highlighted, click the start button. This will launch two new windows, one of them being the First Run Wizard. Hit next on the first screen. Select CD/DVD ROM Device. Then click the little folder next to the drop down list. Hit add and select the Ubuntu .iso file you save to your desktop. Highlight it and hit select. Hit next on the Select Installation Media page. Finish.

The Ubuntu .iso file will now start to run in the other window. When the install screen comes up select your language and hit the Install button, not the try button. On the next page select your time zone. Then pick your keyboard on the next screen. On the Prepare disk space page select the option to erase and use the entire disk then hit forward. Next fill out your user information. Make sure to set a password. On the next page hit install.

If you find you cant get your mouse back out of the virtual machine, look in the bottom right corner of the window. It should give you a short cut or a ket on your keyboard that when pressed will return your mouse to the host os.

When the installation is complete you will need to restart the computer. When it says, Please remove the disc and close the tray (if any) then press enter:, pull your mouse back out of the virtual machine and look at the bottom of the window. There should be an icon that looks like a CD. Click it and select unmount CD/DVD Device. Now click back in the Ubuntu window and hit enter. When the computer finishes restarting you will now have a working Ubuntu copy installed on your host os.

You may or may not be able to connect to the internet through your virtual machine by default. Check by launching Firefox and seeing if you have a connection. If you do not. Close the virtual machine. You can select shutdown from the system options or just close the window and choose power down. In the virtual box window select your virtual machine from the list on the left hand side and select Settings. Select Network from the top menu. Under Adapter 1 make sure Enable Network Adapter is checked, but change the Attached To drop down list from NAT to bridged adapter. Hit OK and restart the machine. You should now be able to connect to the internet.

Now that Ubuntu is installed and working it's time to start installing the LAMP stack. For those who don't know, LAMP stands for Linux, Apache, MySQL, and PHP. This is a common setup among web developers, but you could also install Ruby or any other language. This one will focus just on the LAMP stack. (which is what you want if you use, wordpress, joomla, drupal, cakephp, or any of the other fine php packages)

Install Apache 2

Now open up Terminal (Applications > accessories > Terminal). Type in the following,

Terminal will prompt for your password. Enter it in.(Terminal does not show your password as you type, so just type it in and hit enter).

Install PHP 5

Apache should now be installed on your system. Now it's time to install PHP 5. In terminal type,

Install MySQL

Now you have PHP 5 installed. To install MySQL type,

Enter in a password when the install prompts you to.

Install phpMyAdmin

Now install phpMyAdmin by typing

When phpmyadmin asks which server to use select apache. It will then ask to create a database. Tell it to do so and enter in the password you set when installing MySQL.

After installing all this you need to restart apache. To do so type

Test Installation

You should now have a working LAMP stack installed. To test everything is working, type in Terminal

When the new window opens add

Save and close the window. Now open Firefox and go to http://localhost/

You should see "It Works!", if you do, apache is working, then go to http://localhost/info.php

If you see a long list of information about PHP 5 then it works as well.

Now everything is working as it should, but the default setup isn't the best thing. We're going to do a little bit more to make it a development dream come true.

Fix Domain Name Error

First you may have noticed when we restarted apache that it gave an error about not being able to determine the fully qualified domain name. To fix this error open the terminal and type,

Add to the file

Save and exit. Now restart again. You should no longer see an error.

Install mod_rewrite

Now lets add an important PHP 5 module. mod_rewrite. Many systems use this to turn ugly urls like,

example.com/?dkjfodocas223

into

example.com/about/

You can enable the module by typing in the Terminal

Enable PHP 5 Error Displaying

Another helpful feature not enabled by default is error displaying in PHP. Now on a production server it is good to turn these off, but when developing, they can be handy to have on. To enable type

Make sure the following lines read as follows

Setup Virtual Hosts

After errors are turned on, let's setup an example virtual host. Virtual hosts are what allow you to host multiple websites on one server. This will allow example.com and test.com to point to two different sites.

To begin setting this up create two separate folders in /var/www/. Name one example.com and the other test.com. Create a simple index.html file in each, creating content that makes them easy to tell apart. Now cd to /etc/apache2/sites-enabled. Once there, type the following in Terminal

Inside the file paste the following,

<VirtualHost *:80> ServerAdmin your@email.com ServerAlias www.example.com DocumentRoot /var/www/example.com <Directory /> Options FollowSymLinks AllowOverride All </Directory> <Directory /var/www/example.com/> Options Indexes FollowSymLinks MultiViews AllowOverride All Order allow,deny allow from all </Directory> ErrorLog /var/www/example.com/logs/example-error.log # Possible values include: debug, info, notice, warn, error, crit, # alert, emerg. LogLevel warn CustomLog /var/www/example.com/logs/example-access.log combined </VirtualHost>

Now create a link to the file in sites-available.

Next let's create one for test.com

Inside the file paste the following,

<VirtualHost *:80> ServerAdmin your@email.com ServerAlias www.test.com DocumentRoot /var/www/test.com <Directory /> Options FollowSymLinks AllowOverride All </Directory> <Directory /var/www/test.com/> Options Indexes FollowSymLinks MultiViews AllowOverride All Order allow,deny allow from all </Directory> ErrorLog /var/www/test.com/logs/example-error.log # Possible values include: debug, info, notice, warn, error, crit, # alert, emerg. LogLevel warn CustomLog /var/www/test.com/logs/example-access.log combined </VirtualHost>

Now create a link to the file in sites-available.

Now your virtual hosts are ready to go, but first we need to tell the computer to listen for the addresses. To do that type the following,

Then

Create a new line under the first. In it add

Create another line and this time add

Save and close the file. Restart apache

Now open Firefox and go to www.example.com. You should see your example.com index.html file. Now try www.test.com. If you see your test.com index.html file everything works as it should. Just repeat this process for any additional domains you would like to add.

If you want to be able to view your virtual machine sites in a browser on your host os you need to do a similar thing as the last step. First find the local IP address of the virtual machine. You can find this by going to System > Administration > Network Tools. Select your Network Device from the drop down and look for the Ipv4 IP Address. Let's say mine is 192.168.10.4

Now move back to your host os. Open a terminal session in it. Find your hosts file. In OSX it is /etc/ just like Linux. Now add lines like so,

You should now be able to view your example sites in a browser on your host os.

Change Webroot Permissions

Everything is starting to work quite well for development but there are still a few extras worth setting up. The first is changing permissions of your web root. To make you the owner of the /var/www directory type this in Terminal

Install Git

This will now allow your user to easily create new folders and files. Next lets install my favorite version control system Git. To install type this into Terminal

Install FTP

You can now use git to control the code you develop on the machine. Next let's add ftp support to make moving files between your host and guest operating systems a little easier. To install ftp support type,

You can now open your favorite ftp application in your host os and connect to your virtual machine. Just use the IP (mine in this example is 192.168.10.4) and enter in your user name and password. Ta-da!

There you go. You now have a complete and awesome new development virtual machine. If there are any questions, or if you know a better way to do something, please let me know in the comments.

Best Ogg Theora Video Compressor

2010-04-25T00:00:00-06:00

Best Ogg Theora Video Compressor

Published: 2010-04-25

A while back I did a comparison of the popular mp4 compressors. Specifically ones used to convert videos for HTML5 playback. Well here is a follow up, this time around though, we're comparing compressors for Ogg Theora.

I try to make my content cross browser compatible, but for this one I have no choice. You must use Firefox or Chrome to fully view this post. The newer the version the better.

Anyway, back to the post. I started with a small clip from the 720p version of Elephants Dream. It's a cool little short and I suggest going and watching it if you haven't already.

So with this clip in hand I ran it through 6 different compressors.

ffmpeg2theora (6.10 MB)- lots of settings

smallest file
moderate quality
moderate ease of use

FFmpeg (6.19 MB)- same as ffmpeg2theora

no sound (can have sound if you encode separately and then combine)
has to be a size divisible by 16

FireFogg (18.87 MB)- decent settings

fairly easy to use
good quality at large size

Miro Video Converter (22.20 MB)- largest size

best quality
easy to use
can't resize
no settings for anything

QuickTime (17.37 MB)- good quality large size

same export as any other qt
moderate amounts of video settings, no audio settings

VLC (21.94 MB)- large size

serious streaming issues
small amount of settings

and for comparison

h264 (6.22 MB)

In the end I would recommend ffmpeg2theora. If you're comfortable with the command line that is. Otherwise, everything except VLC would work for you. For the curious here are the commands I used.

FFmpeg

ffmpeg2theora

If you have any suggestions for improving these please let me know in the comments.

Adding Internet Streaming To FFmpeg Outputs

2010-04-17T00:00:00-06:00

Adding Internet Streaming To FFmpeg Outputs

Published: 2010-04-17

Just a quick post. After deciding that FFmpeg was my video compressor of choice, I ran into a small problem. The videos that are outputted don't begin playing immediately when embedded in a web page. This is a pretty big setback.

Luckily there is a small AIR application that can solve the problem for us.

QTIndexSwapper is a small application that prepares .h264 encoded video for internet streaming. It does this by rearranging the index file. It's simple and fast, and from what I've seen so far, adds no quality loss to your video.

So if you've tried the code I posted for compressing video with FFmpeg, but have had trouble streaming them on the web, try this application.

Video Compression Show Down

2010-03-11T00:00:00-07:00

Video Compression Show Down

Published: 2010-03-11

Video compression is an absolutely critical component that has allowed online video to take off in recent years. Advancing from super pixelated 320x240 video, to rich and vibrant 1080p has required massive improvements in compression technology.

Wikipedia: "Video compression refers to reducing the quantity of data used to represent digital video images, and is a combination of spatial image compression and temporal motion compensation. Most video compression is lossy - it operates on the premise that much of the data present before compression is not necessary for achieving good perceptual quality. For example, DVDs use a video coding standard called MPEG-2 that can compress around two hours of video data by 15 to 30 times, while still producing a picture quality that is generally considered high-quality for standard-definition video. Video compression is a tradeoff between disk space, video quality, and the cost of hardware required to decompress the video in a reasonable time. However, if the video is overcompressed in a lossy manner, visible (and sometimes distracting) artifacts can appear."

Uncompressed video, especially HD versions, can require gigabytes per minute of recording. These kinds of files require way too much bandwidth to be considered reasonable for the web. The best way to solve this problem is with compression.

There are numerous video compression softwares out there. They range in price from free, to thousands of dollars. Each one has strengths and weaknesses. I'm going to compare a couple of the more popular options.

These are:

Some of these use the same basic underlying compression technology, but the options they allow to to set, or the way they use them does differ.

For the test, I ran a 1280x720 .mov with Animation compression. For those who don't know, Animation is a lossless codec, resulting in quite large files. For example, the source video at only 1 minute in length came out to 3.26 gigabytes. Ouch.

I compressed this massive file down to size, by setting the bit rate to only 400k and reducing the audio quality to 96k at 44.1 KHz. I also resized it to 640x360. I'm doing this quality test with the ever so excellent H264 codec.

Ugh, there's no real great place to interject this so I'll just do it now. For "best" results, you should resize video to sizes that are evenly divisible by 16. I didn't do that, I don't seem to notice a difference when you do. I tried both but at the end of the day, on my site, My videos need to be 640px wide. For the curious these are a few sizes that are divisible by 16. The reason for this is pretty technical and could warrant a giant post by itself, so just take my word that for "best" results, use one of these sizes.

256 x 144

512 x 288

768 x 432

1024 x 576

So anyway, here are the results.

Compressor: Size - 4.8 MB

Toast: Size - 4.7 MB

Regular QuickTime export: Size - 4.5 MB

FFmpeg: Size - 3.7 MB

The clear and obvious winner is FFmpeg. Notice that is the smallest file size as well. The other compressors do decent jobs, don't get me wrong, but you need to double or triple the file size to reach the same quality.

The even better news, FFmpeg is free and open source. Wait did you catch that? It's FREE! One giant downside, it's command line based. This isn't huge to me, as I know how to use the command line, but for many, touching the command line is the last thing they are comfortable doing. However, it's not too hard to install if you go the macports route. Using it to it's best capabilities is nothing easy either.

So for simplicities sake I present to you my super awesome FFmpeg compression commands.

For a single pass render:

ffmpeg -i sourcemovie.mov -vcodec libx264 -vpre hq -b 400k -g 250 -keyint_min 24 -bf 16 -coder 1 -refs 6 -flags +loop -deblockalpha -6 -deblockbeta -6 -partitions +parti4x4+parti8x8+partp8x8+partb8x8 -flags2 +dct8x8+mixed_refs+wpred+bpyramid -me_method umh -subq 8 -s 640x360 -acodec libfaac -ar 44100 -ab 96k -threads 6 -f mp4 outputmovie.mp4

For a two pass render:

Run the first command, then run the second for a two pass render. I used a two pass render in the test above.To better understand what all those setting mean, I recommend taking a look at this sitehttp://sites.google.com/site/linuxencoding/x264-ffmpeg-mapping

Or the FFmpeg documentation at http://ffmpeg.org/ffmpeg-doc.html

For lots of other examples on compressing to and from different formats, I recommend reading

http://www.catswhocode.com/blog/19-ffmpeg-commands-for-all-needs

So there you go. If you're looking for a way to reduce your bandwidth costs, or just want to save time in uploading them, consider checking out FFmpeg. Honestly though, if you're just dumping your videos on youtube, you may consider just bumping up the quality on another compressor and using that. Ease of use is definitely in the favor of the other options.

If you use FFmpeg and have some great command to share, let me know in the comments. Or if you use a compressor not listed and want to share results, let me know as well.

Oh, and if you noticed this conveniently compresses out to a HTML5 friendly format, good for you. You sharp cookie you. Well check back in the next week or so where I'll do the same thing for Ogg video. How exciting!

On HTML5 Video

2010-02-25T00:00:00-07:00

On HTML5 Video

Published: 2010-02-25

Hey! Have you heard? HTML5 video is going to revolutionize the way we use video on the web. No more dealing with Flash or Quicktime embeds. Video will now be as simple as adding an image. Ummm, no. It's not. It's not even close. That's not to say it's all bad, but boy howdy does it have a long way to go.

Before I get to the bashing let's talk about what is good about HTML5 video.

Well first off, it is in theory as easy as adding an image.

Holy crap that is simple. Unfortunately your code will not end up looking like that. More on it in a bit.

Another HUGE benefit is not having to use Flash. Anyone who has experience with Flash video knows how horrible it is. The embed codes are a nightmare and of course you're dealing with plugins that the user may or may not have.

All around, HTML5 video should be a big improvement. Only problem is, it could be worse than the methods used today. Here's why.

Codecs, codecs, codecs...

Ugh, this is one of the biggest pains to deal with. Guess what, different browsers use different video codecs for HTML5 video. Firefox uses Ogg Theora and Safari uses H.264 MP4. So in order for you to have a video play in multiple browsers you need to make at least two versions.

That simple code above now turns into

<video width="320" height="240" controls> <source src="NewOrleans2006.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="NewOrleans2006.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> </video>

Not so simple anymore is it? Not horrible but not the elegant solution we were promised.

This battle of the codecs has got to end. The argument boils down to the fact that H.264 and MP4 are proprietary of the MPEG consortium and Ogg Theora are open source.

I get Mozilla's argument that they only support open standards, thus the use of Ogg in FireFox, but there is a giant elephant in the room that nobody is mentioning.

It's that Ogg Theora as a codec is in it's infancy compared to H.264 and really kind of sucks in comparison. You can compare the two on my page, travisberry.com/copyright-and-the-internet/

View it in FireFox and then in Safari. Notice the WAY smoother video in the Safari version. Yeah, me too.

The solution I would really like to see (but I'm not holding my breath) is for MPEG to step up and realize that they have the opportunity to seize the online video market and release H.264 into the open source community. Drop all the dumb-ass licensing arrangements and give H.264 away.

That is the first main issue with HTML5 video. The other huge issue is legacy browsers. Unless you are using the newest versions of FireFox, Chrome, or Safari, you probably can't see HTML5 video. So this causes us to have to add more code to make sure people can still see our content. This involves some kind of fallback to Flash video. The thing we were trying to avoid in the first place.

I'll write this again for importance. You still have to include Flash video if you want your video to play across all browsers. Damn it!

So now that super simple code to embed videos now looks like this to make sure it handles all browsers nicely. Note, this still won't show anything in FireFox 2 but it will show in IE. Most FF users tend to update on a regular basis so it's no huge deal.

Notice instead of adding a flash video I added a youtube embed. I was tired of crunching out different codecs by this point so I said screw it and let youtube handle some of the work. (I also added an iPhone version so the code is a little longer than necessary, but not by much)

Ok, so my super simple code has grown kind of large and unwieldy but no biggie, it works so I could live with this.

Time to watch this bad boy in some browsers. Wait, WTF is going on? Why are my videos autobuffering in Chrome and Safari. This is bad. Real bad. What if I have 4 or 5 videos on one page? It's going to buffer all of them at once!?

Yes it will. For reasons unknown, Chrome and Safari have decided to ignore the autobuffer attribute. They will autobuffer your video come hell or high water.

Again, we can work around this using a javascript method. Daring Fireball has a good example (view source to see how it works). Only problem with it is that in FireFox I was experiencing double audio when using the javascript solution. So that didn't work for me.

The half-assed solution I came up with was to go ahead and let the video autobuffer. I used to have all of my example videos on one page. That was not cool with autobuffering. Now I have a navigation menu linking to each video on it's own page. Now when it autobuffers, it's not such a huge deal. (I figure if they clicked through to the video, at this point they are trying to watch)

So in the end I was able to implement HTML5 video. It isn't pretty and far from perfect but it is possible. For now, I am going to continue to recommend most people go with a Flash video solution. It's just not worth the hassle for the average user. Let's hope the people in charge can save the <video> tag, it could be great, it's just not there yet.

Have you tried to use HTML5 video? Let me know how it went in the comments.

Edit:After some tweaking of the encode settings, I managed to get a decent output in Ogg. So I recant a bit on it being horrible, but it's still not quite as good as H.264

Here are several other good resources that explore the use of HTML5 video.

Create Simple A/B Tests In WordPress

2010-02-19T00:00:00-07:00

Create Simple A/B Tests In WordPress

Published: 2010-02-19

One of the best things you can implement in your site right now is A/B testing. According to good old Wikipedia, A/B testing is;

"A/B testing, split testing, or bucket testing is a method of marketing testing by which a baseline control sample is compared to a variety of single-variable test samples in order to improve response rates"

It's a method to test different versions of things and compare their effectiveness against others.

In web design they are often used to test the effectiveness of converting users in some way. Whether it is selling them something, getting them to sign up for something, or just getting them to go to another page. As with all design there are a million ways to say or lay something out. A/B testing allows you to try multiple versions and find the one that works best for your goals.

So, setting up an A/B test isn't all that hard. First thing to do is come up with your test materials. I would recommend starting with simple text changes to get the hang of A/B testing. For this example I'm going to create an author box that goes at the end of my posts.

Next figure out what your goal is. The easiest to use are pages you want the client to reach. These can be landing pages after someone fills out a form, or it can be the form page itself. I want people to end up on my contact page.

Now write several versions of your author text, with wording that encourages people clicking through to your contact page. Go a head and do it now, I'll wait.

Ok, with all your text ready to go we can now start setting up the experiment. Go to www.google.com/websiteoptimizer and sign up for an account. I used my gmail account with all my other services attached to it to make things a little easier.

Once your all signed up you'll end up at a page like this,

Here click the Create another experiment link near the top left. Yours may say Create a new experiment depending if you've ever done this before or not. As you can see in the pics, I've done this a few times already.

On the next page you can choose between an â€œA/B Experiment - The simplest way to start testing fast" or a Multivariate Experiment - The most robust way to test lots of ideas".

Choose Multivariate Experiment - The most robust way to test lots of ideas".

Check the box on the next page and click create

Now we're getting somewhere. Here name your experiment in the first text box. Name it something easy to remember and understand. I'm calling mine "contactbox"

In the next box put the url of the page that the author box is going to be one. Mine is "http://oldstatic.travisberry.com/2010/02/10-easy-solutions-for-contact-forms/"

The box below is the url of the goal page. Mine is "http://oldstatic.travisberry.com/contact/"

Click You will install and validate the JavaScript tags on the next page.

The next page will look like this

You can leave it alone for a second and instead open up a new tab. Download the Google Website Optimizer plugin from http://wordpress.org/extend/plugins/google-website-optimizer-for-wordpress/

Install and activate it in your WordPress install.

Hang in there, we're getting closer.

Now, go and edit the post or page you listed as your starting point.

Notice there is now a new section added below the wysiwyg editor. Switch back to your google tab and copy the Control Script. Move back to your WordPress admin area and paste the code in the Control Script box. Repeat for the Tracking Script.

DO NOT put the "Conversion Script" on this page. Instead go to your goal page, contact in my case, and paste the Conversion Script code there. You don't need to bother with the "Control"or "Tracking Script" on this page.

Now go back and edit your post again. Scroll to where you want your author box to be in your post. Once there paste the code

Followed by the text you want to use in you author box. Only put one version in at this point.

At the end of the text paste this

Now change the "Insert your section name here" to something easy to deal with.Once you have everything in WordPress go back to the google tab.

Scroll to the bottom and click Validate Pages. If everything went well you should get confirmation and be allowed to click Continue.

This page is where we get to start adding the variations. Click Add new variation and enter in your second variation you wrote back in the beginning. Keep adding until you've added everything you wrote, then hit Save and Continue

From here you can launch the experiment and watch as your traffic is split and analyzed. Results will take a while depending on your level of traffic, but expect to wait at least a day before you can see anything.

Well that about covers it. See I told you it was simple. A/B test can be used to learn some surprising things about the nature of your audience.

If you have experience with A/B testing and want to share some results, post them in the comments.

10 Easy Solutions For Contact Forms

2010-02-15T00:00:00-07:00

10 Easy Solutions For Contact Forms

Published: 2010-02-15

Contact forms are an integral part of many websites. The construction of which can range from super simple to highly complex. As with most things, I prefer the easy solution. Here is a list of 10 contact form solutions that are super simple.

Contact Form 7 Are you looking for a contact form plugin for WordPress? If you value simplicity and flexibility, Contact Form 7 is a great choice. It allows you to flexibly design the form and mail. You can manage multiple contact forms as well.

EmailMeForm Email Me Form is a free online form generator service that helps you create HTML forms for your website, with no programming required.

Wufoo Wufoo strives to be the easiest way to collect information over the Internet.

cforms cforms is a powerful and feature rich form plugin for Wordpress, offering convenient deployment of multiple Ajax driven contact forms throughout your blog or even on the same page.

Kontactr Kontactr is a one-click free contact form service. With Kontactr, you can fight against the amount of spam that you receive daily. Protect your email address by using our highly secure contact form. You can also use our simple tools to embed the form right into your own website. Everything is as easy as 1, 2, 3...

Form Tools Form Tools is an extremely powerful, versatile form processor, storage and access script written in PHP and MySQL, designed to work with any existing web form. It creates a custom database table based on your form data to store all submissions from the form.

Dada Mail Dada Mail turns 10 in 2010. To celebrate, we're giving never ending subscriptions to Pro Dada and the Dada Mail Manual for a low, low price:

FreedBack Designed for people who want HTML forms without learning HTML. Try us out before you spend hours banging your head on your keyboard because you can't get it to work. You have more important things to do with your time.

FreeContactForm Looking for a quick no frills website contact form? our Lite version is available at no charge.

Ajax Contact Form The advantage on mootools is that you don't need to download the whole library just to have an ajax event or some other tiny effect. You just download what you need.

If I left your favorite contact form solution off the list, let me know in the comments.

Use WordPress' is_page() To Exclude Content

2010-01-30T00:00:00-07:00

Use WordPress' is_page() To Exclude Content

Published: 2010-01-30

After my last post involving including custom content, I've received questions about doing the reverse, excluding content on certain pages.

As with everything there are several ways to accomplish this. I'll cover some of the easiest.

The first way is the same as including custom content. The only difference is you have to list every page besides the ones you don't want it to show on. This can be quite consuming if you have a large number of pages. On a small portfolio site though, this is totally useful.

<?php if ( is_page('work') || is_page('contact')) { echo '<div id="secondnav"><div class="secondnavs"><a href="http://www.travisberry.com/video/">Video</a></div><div class="longsecondnavs">.</div></div>'; } ?>

If you had three pages; 'work', 'contact', and 'blog', the above code would display the div 'secondnav' on every page but 'blog'.

Another way is to use the above method but target it to the page you want excluded. So,

<?php if ( is_page('blog')) { echo '<link rel="stylesheet" href="http://whereeveryouputthenewcssfile.css" type="text/css" media="screen" />'; } ?>

Can be used to exclude a section of content. Let's say you still don't want to show the 'secondnav' div on the blog page. So create a new .css file. Name it whatever you like and put it where ever you like. Just replace the url in the example with a link to the new file.Inside the new .css file put this;

The 'secondnav' div will no be invisible on the 'blog' page.

One final, less conditional way of doing this would be to create a new template for the page. Create a file called, 'nonav.php'.

Copy and paste everything from your normal 'page.php' file and paste it into 'nonav.php'. Find the part you want removed and delete it from the file. Move to the very top of the 'nonav.php' file. Paste this into the file.

Save the file and upload it to your current theme directory.

Now in the WordPress admin area, edit the page you don't want the 'secondnav' div in. On the right side of the screen, there is a place that allows you to pick a template. Select the drop down menu and select your new template. Hit the update post button, and your page should no longer have the 'secondnav' div.

There you go, a few way's to exclude content from certain pages. The best way to decide between excluding or including content is to go with whichever is the shortest. If you have 100 pages and 1 doesn't need something, exclude. If the 1 needs something, and the 100 don't, include.

If you have other solutions, or any questions, let me know in the comments.

Edit:kylegetsspam over on reddit pointed out another simple way of doing the same thing. Add,

To your body tag. Then add this to your main style sheet.

Edit 2: To use regular PHP and not WordPress to exclude content, see my post here.

Don't Be Afraid To Self Promote

2010-01-17T00:00:00-07:00

Don't Be Afraid To Self Promote

Published: 2010-01-17

Self promoting your work can be a fine line to walk. Don't do it at all, and people won't take you seriously because you give the impression you don't take your work seriously. Do it too much and you run the risk of looking like a blowhard jerk. However, if you manage to find a good balance the rewards can be great.

I have certainly been one to fall into the don't promote category. Mainly because I wanted to avoid falling into the latter category. But recently, after deciding my readership number aren't what I would like them to be, I have begun promoting my articles online.

The number of sites I promote my work on is still relatively small. I also try to really interact on the site and promote others work as well as my own. This helps avoid the blowhard jerk label you can receive by only promoting your work. Plus when others begin to notice you consistently promoting their work, they start to do it to your stuff.

Anyway, back to the rewards, after spending a minimal amount of time promoting my articles, my monthly views doubled in two days. And that was after doing it to just the latest post. So from now on, I intend to continue with my article promotion. Hopefully, the trend will continue to grow.

If you've had positive, or negative, experience with self promotion let me know in the comments.

Say It Aint So! Time For A New Contact Form

2010-01-12T00:00:00-07:00

Say It Aint So! Time For A New Contact Form

Published: 2010-01-12

So it may be time to ditch my favorite WordPress plugin, Contact Form 7, and find something new.

It seems that with the upgrade to 2.1 comes a new script.

This script seems to work with WP Super Cache for some reason or another. Either way, it throws up all kinds of errors in google's page speed test. I'm not sure if there is a work around yet, if I'm going to ditch Contact Form 7 and redo all my forms, or if I'm crazy and this rogue script is coming from something else.

If you have any idea what this is, or better yet how to remove it, please let me know in the comments.

Use WordPress' is_page() To Display Custom Content

2010-01-11T00:00:00-07:00

Use WordPress' is_page() To Display Custom Content

Published: 2010-01-11

Something that comes up on a regular basis is how to display certain content on different pages or if certain conditions are met. One way to accomplish this would be to create separate templates for each page. However, if you have a bunch of pages this can quickly become a pain. The other way to accomplish this would be to use WordPress' is_page() function to display content when you want.

First let's take a look at what the function is. According to the codex

This Conditional Tag checks if Pages are being displayed. This is a boolean function, meaning it returns either TRUE or FALSE.

Ok, that's not the most helpful description ever. A simpler explanation would be that the tag checks the name of the page and returns TRUE or FALSE. This means you can put a nice little echo in there and have it display whatever you want.

So let's say you have one page.php file. This is the template you use on every page on your site. On your about page you would like to add a secondary navigation. I don't know why you want to, let's just say you do. This navigation sits above the content area, so you can't just add it into your page through the WordPress wysiwyg editor. Again, you could create a new template for the page, but that is boring. Instead, where you want the second navigation to be, enter this into your page.php file.

The code is asking if the page is named "about", if it is, it echo's the div "secondnav". If the page isn't called "about" then it echo's nothing and nothing is displayed. It's that simple. If you want the nav to display on the "about"and "contact"page add this

<?php if ( is_page('about') || is_page('contact')) { echo '<div id="secondnav">This is the super cool secondary navigation.</div>'; } ?>

One place I find myself using this a lot is loading javascript only on pages that need it. One problem of adding javascript links to your footer.php file is that they are called on everypage whether you need them or not. The simple way to call them only when need is to add them like this

<?php if ( is_page('about')) { echo '<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>'; } ?>

This works well for pages, but for your blog page and single posts you will need a different function.

For your blog page use is_home()

For your single posts use is_single()

WordPress provides a slew of other tags as well including

is_home(), is_front_page(), is_search(), is_404(), is_singular(), is_page(), is_attachment(), is_local_attachment(), is_single(), is_sticky(), is_archive(), is_category(), is_tag(), is_author(), is_date(), is_year(), is_month(), is_day(), is_time(), is_admin(), is_preview(), is_paged(), is_page_template(), is plugin active(), is_plugin_page(), is_new_day(), is_feed(), is_trackback(), is_comments_popup(), comments_open(), pings_open(), is_taxonomy(), is_taxonomy_hierarchical(), is_term(), is_user_logged_in(), is_blog_installed(), is_active_sidebar(), is_dynamic_sidebar(), is_active_widget()

As you can see, you can target pretty specific events and conditions. So have fun experimenting with conditional tags and if you come up with something cool, let me know in the comments.

Edit: To use regular PHP and not WordPress to include content, see my post here.

Gentleman WordPress Theme

2010-01-11T00:00:00-07:00

Gentleman WordPress Theme

Published: 2010-01-11

Another new free theme. This WordPress theme is a simple and elegant theme, perfect for a simple text blog. Download A Copy orVisit A Demo

From README.txt

Gentleman Wordpress Theme by Travis Berry is licensed under a Creative Commons Attribution 3.0 United States License.

http://gentleman.travisberry.comThis theme is available for use for personal or commercial purposes. Please consider giving a link back to http://oldstatic.travisberry.com somewhere on your site.

For questions email contact@travisberry.com

Download latest version from http://github.com/ninetwentyfour/Gentleman-WordPress-Theme/archives/master

A Hard Day At Work

2010-01-02T00:00:00-07:00

A Hard Day At Work

Published: 2010-01-02

Had a hard day of modeling at work the other day. Jordan at Creative 303 is a great photographer. Really kind of lazy on the blog post front. Hope to pick back up soon.

Happy Holidays

2009-12-25T00:00:00-07:00

Happy Holidays

Published: 2009-12-25

I just wanted to put up a quick post wishing everyone a happy holiday. The last year has been great for me, and I look forward to next year being even better. To all the people in my life that have had a positive impact, I just want to say thank you.

New Free WordPress Theme: Dark Wood

2009-12-20T00:00:00-07:00

New Free WordPress Theme: Dark Wood

Published: 2009-12-20

I have just released a new Wordpress theme. The theme is dark and modern, perfect for a portfolio site. Theme features an accordion style menu, and slider example galleries.

Download a copy, or visit a demo.

If you get a copy and have any questions, feel free to leave them in the comments.

And if you’re interested in a completely custom site, feel free to send me an email and we can discuss your needs.

Dark Wood Wordpress Theme by Travis Berry is licensed under a Creative Commons Attribution 3.0 United States License.

Improve YSlow Score With .htaccess

2009-12-20T00:00:00-07:00

Improve YSlow Score With .htaccess

Published: 2009-12-20

How fast your site loads is a huge factor in how many visits you get. One of the biggest names in performance testing is YSlow. A high score on YSlow is a good indicator that your site is performing well. Many of the scores can be improved with a little bit of tweaking to your .htaccess file.

Add this snippet to the top of your .htaccess file.

Header unset ETag FileETag None <FilesMatch "\.(css|js)$"> SetOutputFilter DEFLATE </FilesMatch> <FilesMatch "\.(mov|otf|eot|ttf|ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT" </FilesMatch>

Now for a little breakdown of what each part does.

This part disables E-Tags so not to cause conflicts.

This gzips your css and javascript files resulting in a smaller transfer size.

This adds a far future Expires header to most static files you will have.

With these few changes your score in YSlow should dramatically improve. Any other .htacces tricks? Let me know in the comments.

This Makes Me Want To Quit Video

2009-12-16T00:00:00-07:00

This Makes Me Want To Quit Video

Published: 2009-12-16

WTF?! How? Who? What? My teacher sent me this, it's from a photography student who just took his first video class. This is from a freaking Fundamentals of Editing class. I can't believe how good this kid is. He has great things in his future. Oh, and he did the music and sang the song too. Fantastic.

Head over to his youtube page and leave a comment letting him know how awesome he is.

Simplifying Video Aspect Ratios

2009-12-16T00:00:00-07:00

Simplifying Video Aspect Ratios

Published: 2009-12-16

Video aspect ratio can be a confusing beast. Is it 4:3 or 16:9? Are the pixels square or some sort of rectangle? All of these things are important to consider when creating video files and assets for video. Make a mistake and all of a sudden that circle is more of an oval. So I'm here to help you simplify and make heads from tails in video aspect ratio.

First the easy part. 4:3 vs 16:9. This is the difference between old school "square" (not really square but close) televisions and the new fancy "widescreen" televisions. 4:3 is the size of the screen that standard definition uses. 16:9 is for HD content. As a matter of fact, 16:9 is the only consistent component to HD video. Which is why you have the mess of 480p, 480i, 720p, 1080p, etc.

Basically if you shoot in standard definition you'll be using 4:3, if you're shooting HD, you'll be using 16:9.

Once you have your composition aspect ratio worked out, it's time to deal with pixel aspect ratio. Pixels are the little dots that combine to make up the image. Most of you are familiar with this concept on computers. Here pixels live in nice even rows and are nice and square. Square is good. Square is easy to understand.

Now let's look at standard definition television. The history of television in the US is a clusterf#@k. The technology has been built and expanded upon old and broken technology, leading to many compromises in ease of use to support old technology. For instance, the frame rate of TV is a nice and even 29.97 frames per second. Wait, what? How the fuck is that convenient? Wouldn't an even number be much easier to work with? Well, yes it would, but that would be too simple. See when color TV came out there needed to be a way to add the color information into the signal without ruining the TV of people who already had one. So a compromise was made to add the signal to the existing tech and make the frame rate, an unbearable 29.97 fps.

Another compromise to come out of the history of television is the .9:1 aspect ratio of pixels. This means, that on a standard definition television, the pixels are slightly taller than they are wide. This leads to creating a circle on a computer, and all of a sudden it's an oval on a TV. That's not what we want.

The simple solution is to convert everything to square pixels for use on the computer. To create images that will look right when moved to a standard definition television create your compositions at 648 X 480 with square pixels. When moved to the TV the stretching compensates for the pixel aspect ration, and things should look right.

HD video has suffered from a clusterf#@k of formats more so than being built to accommodate legacy technology. Every camera and television maker wants desperately to be the standard for HD, but unfortunately having so many competing formats and no winner creates problems in post.

The most common problem again is keeping pixel aspect ratios consistent. The easiest way to solve the problem is to force square pixels on everything. The correct size for 720 video is 1280x720 square pixels, and for 1080 video it is 1920x1080 square pixels. So if you have a problem of pulling footage from Final Cut Pro into After Effects and having it appear 4:3 instead of 16:9 double check that you are using square pixels with the correct dimensions.

This is a little long winded but it's just the tip of the iceberg when it comes to video aspect ratio.

If you have any tips or questions, feel free to add them in the comments.

Tooting My Own Horn

2009-12-14T00:00:00-07:00

Tooting My Own Horn

Published: 2009-12-14

So I got an email today from mobify.me. I use them to make the mobile friendly version of my site. Turns out they have a design gallery and mine was selected for entry. Go check it out, and if you’re looking for a mobile solution for your website, check out mobify.me’s services.

Another Free WordPress Theme

2009-12-12T00:00:00-07:00

Another Free WordPress Theme

Published: 2009-12-12

I have recently completed a new WordPress theme for Drifter Entertainment. Again I have decided to give it away for free. The theme is simple allowing your content to stand out. The theme is built to Drifter Entertainments custom needs, so you will have to edit the source files.

Get the latest copy here.

If you get a copy and have any questions, feel free to leave them in the comments.

And if you’re interested in a completely custom site, feel free to send me an email and we can discuss your needs.

Drifter Entertainment WordPress Theme by Travis Berry is licensed under a Creative Commons Attribution 3.0 United States License.

Making display:none; Javascript Accessible

2009-12-11T00:00:00-07:00

Making display:none; Javascript Accessible

Published: 2009-12-11

When creating a collapsible navigation for a client, I came across the problem of having my navigation remaining hidden if someone has javascript disabled. Needless to say, this was a big problem. There is no secondary navigation on the site, so without it, there is NO navigation.

The problem came from the fact that the element is set to

Which is fine and dandy if you have javascript enabled. If you don’t, all you see is a list of headers.

Luckily there is an easy solution. Create another css file. I named mine, nojs.css

In the css file add this, (Change the selector to which ever one you have set to display:none;)

Place the file somewhere on your server and move back to your html.

Add a <noscript> tag and in between create a link to the new css file.

That’s it. Your navigation should now show if someone has javascript disabled.

Any other simple accessibility solutions I left out? Let me know in the comments.

Chrome and Thunderbird 3 Review

2009-12-09T00:00:00-07:00

Download My WordPress Theme

Published: 2009-12-07

It was a big day the other day with both Chrome and Thunderbird 3 being released. Chrome has been out on Windows for a year, but this is the first official release for Mac. Thunderbird has been around for a while but this is the first big release in years. I downloaded and gave both a test run.

Chrome

So much potential. The key with Chrome is to remember this is still a beta release and it shows. Most things work fine, but occasionally you will find errors. For instance, on my videos page, the video will play, but there is no controller shown. There is also no support for extensions yet, so no extra add ons for you.

The best thing about Chrome is the speed. Pages are much faster than other browsers and the launch time is quick as well.

Anyone who does web design knows about the greatness of firebug, and Chrome tries to build it in, in the form of their Developer tools. They work well but still have plenty of refining to match firebug, but I'm sure with google working on it, the problems won't last long.

All in all Chrome, at this point, is best served as a secondary browser. For now I'm sticking with the Fox, at least until Chrome matures a little bit more.

Thunderbird 3

Oh Thunderbird, I want to like you so much. Your big brother, Firefox, is the greatest thing since sliced bread. Well with this release, you may have won me over.

I tried Thunderbird 2 a while ago. I was still using Mac Mail up to a couple days ago. I found Thunderbird 2 to be ugly, buggy, and ultimately less productive than Mail.

Thunderbird 3 is out to change all that. By far the coolest thing about it is tabbed mail. Mozilla knows how to do tabs, and the execution in Thunderbird 3 is fantastic. After a few hours of tabbing out messages and flipping between them had me wondering how I ever lived without it.

Other improvements include an updated appearance, and "improved" account creation. This is where I think Thunderbird 3 falls short. Adding a new account is still a messy process, and if you have a google hosted email on your own domain, the auto detection doesn't even come close to getting it right. If you're not experienced in setting up a mail client, you'll have a hard time.

Overall Thunderbird 3 is looking solid. So far I'm still using it. There are plenty of nice features and the search function is awesome. Time will tell if I stick with it long term, but for now, it's doing a fine job.

Have you gave either a download yet? Let me know what you think in the comments.

Download My WordPress Theme

2009-12-07T00:00:00-07:00

Download My WordPress Theme

Published: 2009-12-07

This was my old wordpress theme. You can get my current site at https://github.com/ninetwentyfour/travisberry_com_static

If you're looking for a simple WordPress theme to use as a framework to modify, why not download mine?

Built entirely from scratch by yours truly, my theme is super easy to understand and the css is easy to read and customize.

You can grab a copy from my github page. Just click on the download link and choose your preferred download format. I'm using github as opposed to hosting it here because the theme is still being worked on. Github makes it much easier to ensure everyone can get the latest copy.

If you get a copy and have any questions, feel free to leave them in the comments.

And if you're interested in a completely custom site, feel free to send me an email and we can discuss your needs.

Wordpress Theme by Travis Berry is licensed under a Creative Commons Attribution 3.0 United States License. Fonts subject to separate license.

The Worst Is Over

2009-12-05T00:00:00-07:00

The Worst Is Over

Published: 2009-12-05

Holy cow! The hardest quarter of school is over. So for the last 6 months I have had to create 5 commercials, a 5 minute fiction piece, and a 5 min non-fiction piece.

All in all it went well for the most part, just a lot of work when combined with other classes and work.

Well it's over now with me having passed review last Friday. You can see the 7 videos on my video page. Go have a look and feel free to leave a comment about them on this page.

And congrats to Aspen, Henry, and Kelly who also passed.

Sound FX Tip - Muffled Sounds

2009-11-29T00:00:00-07:00

Sound FX Tip - Muffled Sounds

Published: 2009-11-29

When I was working on a video project this week I came across the need to have my sound effects sound like they are coming through a cell phone and from inside a box.

Turns out there is an extremely easy solution for both, high and low pass filters.

To make something sound like it is coming out of a crappy cell phone speaker put a high pass filter on it. You may have to tweak the settings a little bit to get the effect you want, but that is it.

To solve the other problem of needing a sound to sound like it's coming from inside a box, use a low pass filter. Again, you may need to tweak the settings to get your desired results.

I love when solutions to problems are as simple as this. If you know of any other quick audio tips, let me know in the comments.

5 Awesome News Mashup Sites

2009-11-25T00:00:00-07:00

5 Awesome News Mashup Sites

Published: 2009-11-25

There are so many great news sites out there. From traditional news, to bloggers, to social submission sites, following them all can be overwhelming. Luckily there are mashups that bring all these wonderful sites to one place. This makes keeping track of the latest and greatest much easier.

Here is a list of 5 awesome news mashup sites.

JimmyR My personal favorite site. This could easily over take googles position as my homepage. Plus the guy who runs it is pretty smart and he has a lot of other random good things on his site like tutorials.

OurSignal This one has a pretty cool interface. Don't know if I could use it long term though.

POPURLS This is the name most people think of when they think news mashup. Oldie but goody.

Alltop This one has more categories than just "news" so it may be worth cecking out if you're looking for something new or specific.

originalsignal Very tech centered mashup. All internet related news.

Use a different mashup? Let me know in the comments.

5 Resources To Learn After Effects Expressions

2009-11-23T00:00:00-07:00

5 Resources To Learn After Effects Expressions

Published: 2009-11-23

After Effects is an incredibly powerful motion graphics editor. One of the more powerful things inside of After Effects is expressions. Expressions give you much greater control over your animations and can automate things that are not possible with key frames and filters alone.

Learning to use expressions is not hard but it does takes some work. Here are 5 resources to help you on your way.

Some are tutorials while other are example scripts but all should help you become a scripting ninja in no time.

http://jjgifford.com/expressions/basics/index.html The tutorial was written for AE 5.0 but the concepts hold up remarkably well. Really good, must read. Seriously, if you follow any of these links, this is it.

http://aescripts.com/ This site has a lot of useful scripts. Some cost money but some are pay what you want.

http://xscriptorium.com/ Another script repository, quite large.

http://www.yenaphe.info/top-10-scripts-for-after-effects-for-workflow-enhancement/ A good blog post to highlight some of the more useful expressions.

http://forums.adobe.com/community/aftereffects_general_discussion/aftereffects_expressions What a better place to learn about After Effects than Adobe.

These sites are only the tip of the iceberg when it comes to After Effects expressions. Know of some other really good resources? Let me know in the comments.

Running A Git Repo on DreamHost

2009-11-20T00:00:00-07:00

Running A Git Repo on DreamHost

Published: 2009-11-20

Git is freaking awesome. I'm not sure how I lived without it. For those who don't know, Git is a version control system.

[From Wikipedia](http://en.wikipedia.org/wiki/Revision_control): Revision control (also known as version control, source control or (source) code management (SCM)) is the management of changes to documents, programs, and other information stored as computer files. It is most commonly used in software development, where a team of people may be changing the same files. Changes are usually identified by a number or letter code, termed the "revision number", "revision level", or simply "revision". For example, an initial set of files is "revision 1". When the first change is made, the resulting set is "revision 2", and so on. Each revision is associated with a timestamp and the person making the change. Revisions can be compared, restored, and with some types of files, merged.

Simply put a version control system allows you to track changes to files, and merge them in multiple locations.

There are numerous websites that host git repos, the largest being github, but most either require being public or paying for hosting. Well I already pay for a host so why pay for another? Especially when they seem to cost as much as my regular host.

So to set up a git repo on DreamHost you have to enable webDAV on a folder on your server. You can accomplish this by going to your DreamHost webpanel and going to "goodies" - ".htaccess/webDAV".

Go through the on screen instructions to setup the webDAV in a folder. I named mine /git/. If you need help with this, follow this walk-through

After an hour or so the folder will be setup. You can test by logging in. In OSx hit command k and enter in the url to your folder. something like http://yoursite.com/git . You will be prompted for the user name and password you assigned when you setup the webDAV. If all goes well, a folder should appear in your finder with the folder on your server shown.

Now create a blank folder on the desktop. Name it whatever you want. I'll call mine, "gittest" .

Initiate a blank repository by running

Now tell the repository where it will live

Once you have that done, upload the folder into the "git" folder on your webDAV server.

Now create the folder you want to use as your local files folder. It can be named whatever you want. Inside create a couple html files. Save them.Now do the typical git initialization and commit the files.

Now configure your remote master repo.

The "yourusername" is the user name you use to login to the webDAV folder. Now try to push to the remote.

After you hit enter on the code above it will prompt your for the password for the account.

That should push all your local files to the git remote repo. Now don't panic when you can't see the html files in your webDAV server. Git doesn't need them to track your changes and files.

You can test that it works by creating a new folder somewhere on your computer. Now clone your project to it.

If everything is working you should now be able to see the html files in the new folder.

So that's it really. You now have a self-hosted git repo. The only other thing left to do is to add a web interface if you want, however, I haven't been able to get one to work. As I continue to mess with it, if I find a solution, I will post it here.

Helpful articles:

Any tips to smooth out this process? Leave them in the comments.

Handy List of Terminal Commands

2009-11-20T00:00:00-07:00

Handy List of Terminal Commands

Published: 2009-11-20

This list is more for my personal reference than anything but you may find some useful information here.

Restart .profile . ~/.profileStop default Apache on OSxsudo /usr/sbin/apachectl stop

Restart Apache sudo /opt/local/apache2/bin/apachectl restart

Start mysql sudo mysqld_safe5

Change database privileges grant all privileges on "databasename".* to 'name'@'localhost' identified by 'name'

Dump database mysqldump db_name > backup-file.sqlImport databasemysql db_name < backup-file.sql

Initialize git repository git init

Configure git remote server git repo-config remote.origin.url http://yourusername@www.yoursite.com/git/gittest/

Push git changes to remote git push origin master

Clone repository git clone http://yourusername@www.yoursite.com/git/gittest/

Pull changes to local branch git pull http://yourusername@www.yoursite.com/git/gittest/

Connect to remote with ssh ssh yourusername@yoursite.com

Copy file contents directly to clipboard cat ~/filelocation | pbcopy

Sync MacPorts sudo port selfupdate

Display installed ports port installed

List outdated ports port outdated

Upgrade outdated ports port upgrade outdated

Compress video with h264 ffmpeg -i example.mov -vcodec libx264 -vpre hq -b 1300k -s 640x360 -acodec libfaac -ar 44100 -ab 128k -threads 6 -f mp4 example.mp4

Compress video to Ogg ffmpeg2theora -V 700 -A 96 -H 44100 -K 24 -x 640 -y 360 --two-pass --optimize --speedlevel 0 --seek-index --soft-target --pp vdeblock:10/hdeblock:10 example.mov

This post will continue to grow as I update it with new handy terminal commands.

Any commands you can't live without? Let me know in the comments.

5 Resources for Web Type

2009-11-17T00:00:00-07:00

5 Resources for Web Type

Published: 2009-11-17

Typography has come a long way in recent years. From everything being done in Arial, to using images to fake different fonts, the web has grown up. People now expect to be able to style their websites like they could style a photoshop mock up. These resources will help you accomplish that goal.

Web Font Specimen Find out how fonts render in browser. Useful for @fontface fonts.

How to use CSS @font-face Tutorial for using @fontface to embed fonts other than the standard "web safe" fonts.

The League of Moveable Type They list fonts licensed for web embedding."We are Caroline and Micah, the founders of The League. As designers on the web, we have a calling to raise the standards of the web-design world. We're not the only ones who value good design, and it's time for the web world to catch up with it. We understand the challenges that comes with the internet, but with our recent discovery of @font-face, we started getting excited. For those who aren't up to speed, @font-face is a fairly new addition to web styling, letting a designer specify the location of their own font files. Instead of having to design with just a handful of web-friendly fonts, we'll be able to use any typeface we desire. Well, that's our vision, anyway."

TTFTitles This wordpress plugin lets you use images to replace the titles of your posts, thus circumventing the problem of guessing what fonts your end-users might have installed.

20 Dos and Donts of Effective Web Typography Good list on typography rules.

Set Up a Domain, Host, and Email Quickly

2009-11-16T00:00:00-07:00

Set Up a Domain, Host, and Email Quickly

Published: 2009-11-16

I've had a few people ask me to do this in the last couple days so I thought I would do a write up to help save some time.

First thing to do is to head over to godaddy and register a domain name.

It is really important that you keep track of your account login information. This really applies to all of the login info you're about to get.

So after you have registered your domain name it is time to get a host. I use DreamHost and they are about as good and cheap as you're going to find. The key with this is, you only have to buy one hosting plan, you can then run as many domains off it as you want. So sign up for a DreamHost account and get it all setup by following their instructions.

On the left side of your screen will be a "Domains" button. Click it and then "add a domain". Enter in the domain you just registered with godaddy. Scroll down and make sure you check, "Host email with google". This will allow you to have gmail run your email. Much better than other options.

Once the hosting is set up you will need to go back to godaddy. Go Domains -> My Domains -> Click on domain name -> On this page down towards the lower left is a "Nameservers" setting. Click manage and choose "I host my domains with another provider". Delete the existing names and enter in ns1.dreamhost.com ns2.dreamhost.com ns3.dreamhost.com in the first three blanks.

Click update and go back to DreamHost. Your site should now be live and be hosted on DreamHost. You can check by going to your domain in a browser. If you get a page that says "Index of" and has two files listed then you are all good to go.

Now check the email account you used to setup the DreamHost. They should send you an email containing the ftp login information. Ftp into your account using your ftp program of choice. I use cyberduck, you can download it here.

If you can login to your account through ftp go over to google.com/a and sign up for a standard account. Enter in your information and when they ask how you would like to confirm owner ship choose upload an html file. Copy the text they give you and save it as the file name they specify. Take this file and upload it to your server through the ftp program.

Check to see if you can view the file on your site and then click through to continue the google apps setup. Once you have reached the dashboard click activate email. You will now be able to setup as many email accounts you want. (up to 50) This will allow you to have contact@yourdomainname.com To enable imap support click on your inbox, click on settings, imap/pop3 forwarding -> scroll down and click enable imap.

If you use mail in OSx you can add the account by clicking add account -> enter in your name and new email address -> enter imap.gmail.com as your incoming server -> use authentication with your full email address as your name and the password for the account -> enter smtp.gmail.com as the outgoing server again using authentication. Take account live and you should be all setup.

You now have a website, hosting, and email. You can continue on and add some html files to your server to setup a website, or install a blogging platform.Any tips to speed this process up? Let me know in the comments.

YouTube Gets 1080p

2009-11-15T00:00:00-07:00

YouTube Gets 1080p

Published: 2009-11-15

YouTube is the worlds largest online video site. They have been slow to the game when it comes to HD video but they seem to be trying to take the lead as of late.

YouTube now streams in up to 1080p. If you're interested in the quality check out this embed below.

You'll notice it takes some seriously fast internet to not have to let it buffer for a while, but it's not unbearable.They have certainly come a long way compared to the early days.

This is a screencap of the compressed mess that is one of my early uploads.

Have you uploaded a 1080p video? Post a link to it in the comments.

Great CMYK Art

2009-11-15T00:00:00-07:00

Great CMYK Art

Published: 2009-11-15

There is a great post over at PrintRadar highlighting some cool designs using CMYK as their color palate. There are some really stunning examples listed.

A couple of my favorites are below.

Fashion victim by cloning

CMYK Explosion by rajdesigns

Head over to PrintRadar and check out the rest.Any other great CMYK art out there? Let me know in the comments.

5 Handy Plugins for 5 Kick-Ass Free Apps

2009-11-15T00:00:00-07:00

5 Handy Plugins for 5 Kick-Ass Free Apps

Published: 2009-11-15

I'm a fan of open free technology. Not only is it useful but it's free. For beginning artists and designers, that's key. So here is a list of kick-ass free applications and some plugins that help extend their functionality.

Gimp is the closet alternative to photoshop there is. There are a few things it lacks, but that's where plugins fill in the gaps.

Liquid Rescale: Content-aware rescaling. Keeps the features of the image while rescaling along a single direction.
Pandora Stitch: together multiple images to make a panorama.
SaveForWeb: Find optimal compromise between minimal file size and acceptable quality of image quickly
ISO Noise Reduction: Implements an ISO noise reduction
GimpPublishr: Publish images to Picassa and Flickr directly from inside GIMP.

Blender is my favorite 3D program and it works fine out of the box. It can do so much more though with the inclusion of a few plugins and add ons.

Blender People: Really cool animation script similar to Massive.
Julia Fractals: Generate complex fractals.
Hynds|Studio Blender Fur Library Volume 1: Great collection of animal fur
add_mesh_Gears: Add a gear to your primitives
L_system_Forest: Generate 3D, mesh based, trees.

Inkscape is a fine alternative to illustrator. These plugins really make it shine.

ExtrudeEffect: extrude polygons to "3d", also make "string art"
InkscapeAreaCutter: For Webdesigners, layout for sites, slice area into .png images
Puff: Fluffs elements!Â :-D
Inkscape Effects: Aaron Spikes set of extensions is now included in Inkscape.
Place Objects on Path: This extension places objects on a curve.

Firefox, the little browser that could. Firefox has ballooned in user size over the years and for good reason. It's solid and has a giant collections of plugins. These are my personal favorites.

firebug: View and edit html, css, and numerous other things. Must have for web designers.
Adblockplus: I remember how ad infested the internet is when I surf without this.
Noscript: Don't get infected by visiting less than legitimate sites.
delicious bookmarks: Delicious keeps all my book marks sync across multiple computers.
Greasemonkey: Greasemokey allows you to run custom scripts on websites to improve their functionality.

Wordpress is my web framework of choice. It's easy to use and best of all it's free. Like firefox, there is a giant plugin developer scene. I install these plguins on every site.

all in one seo: Makes handling meta information a breeze.
login lockdown: Prevent brute force password attacks
wp super cache: dont crash your server if you hit the front page of digg. This serves static html instead of running php processes.
wp optimize: Post revisions and plugin options can make your database grow to unwieldy sizes. Use this to keep it clean.
wp database backup: Speaking of databases, they are the heart and soul of your website. Keep yours safe with automatic back ups emailed to you.

What plugins do you use the most? Let me know in the comments.

Setting Up Quicktime Streaming

2009-11-14T00:00:00-07:00

Setting Up Quicktime Streaming

Published: 2009-11-14

I usually use a third-party service such as vimeo to host and stream my video. However, after moving to my new awesome host, DreamHost, I discovered that they had an option to enable quicktime streaming. I poked around the support wiki and decided to test it out.

The process to setup is super simple. Click on the media streaming panel in your dashboard and pick a streaming sub domain. Give it a little while to setup and that's it.

DreamHost creates a folder on your server to upload your .mov files into. They also generate a new url that will look something like rtsp://your_streaming_subdomain.com:554/your_streaming_subdomain.com/movie.mov

You take this url and use an <object> code to embed the movie in a page.

The final code looks something like this

Here is my first test at an embeded .mov file streamed off a quicktime server.

You may have noticed that this is in fact not embedded with the code above. I couldn't get it to work. I used this code -

This may be caused by numerous things. I will continue to update as I tinker around with a solution. However, a regular quicktime embed does seem to move a little faster but that could be in my head.

I'm up in the air as to stay with flash video or move to hosted quicktime. There are upsides and downsides to both.

If you have any thoughts about which is the better way to go, let me know in the comments.

Creating Navigation Highlights

2009-11-13T00:00:00-07:00

Creating Navigation Highlights

Published: 2009-11-13

When creating this site I decided I wanted to have the navigation bar have a different color highlight the current page. I dived in thinking it would be a simple problem. Turns out I was wrong.

It's not impossible but it's not easy. As you can see above, I eventually got it to work. This article was of immense help. Just follow along and hope for the best.

One final tip, if your home page is different from the blog page, use the is_page('originalpagename') not is_home() and use is_home() for the blog page. Update: This is the code I used for those interested.

<ul> <li<?php if ( is_page('about') || is_404() ){ echo ' class="current_page_item" ';}?>><a href="<?php echo get_option('home'); ?>/">Home</a></li> <li<?php if ( is_home() || is_page('blog')|| is_single() || is_search() || is_archive()) { echo ' class="current_page_item"'; } ?>><a href="<?php bloginfo('url'); ?>/blog/">Blog</a></li> <li<?php if ( is_page('work') || is_page('video') || is_page('web')) { echo ' class="current_page_item"'; } ?>><a href="<?php bloginfo('url'); ?>/work/">Work</a></li> <li<?php if ( is_page('contact')) { echo ' class="current_page_item"'; } ?>><a href="<?php bloginfo('url'); ?>/contact/">Contact</a></li> </ul>