Category Archives: Code

Posts about coding, anything from Java to PHP. Code snippets and examples as well as tutorials.

Convert Video to HTML5 in Ubuntu


I wanted an easy way to convert videos to HTML5 formats (mp4/ogg/webm). With Linux, I could easily create a bash script to do all three and even create a screencap for the poster attribute.

The install process is a bit tedious and time consuming, but after it’s all installed you’re good to run the script for all your videos. The script uses ffmpeg to convert to all 3 formats, and it supports most any video format. The script also uses ffmpeg to generate a random screenshot, and even writes the HTML5 code for you.
Read the full install process and download the script

Review Schema Markup v1.0 – WordPress Plugin


This is a plugin I wrote for a games review site called Uninstalled Gaming. The plugin adds Schema.org markup for reviewed items.

Review Schema Admin Panel
The plugin adds fields for the reviewed item on the post page. After filling this out, the data will be formatted in HTML as a Schema.org/Review. At the bottom of the post, the appropriate amount of stars will appear. The stars are the only thing with specific styles, the text is completely customizable through CSS.
Check out the plugin

Do A Barrel Roll – CSS Animation


If you’re here, you’ve probably seen what happens when you search for “do a barrel roll” on Google. This is done by some simple CSS animation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@-moz-keyframes roll {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-o-keyframes roll {
    100% {
        -o-transform: rotate(360deg);
    }
}
@-webkit-keyframes roll {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
body {  
    -moz-animation-duration: 4s;  
    -moz-animation-name: roll;  
    -moz-animation-iteration-count: 1;
    -webkit-animation-duration: 4s;  
    -webkit-animation-name: roll;  
    -webkit-animation-iteration-count: 1;
    -o-animation-duration: 4s;  
    -o-animation-name: roll;  
    -o-animation-iteration-count: 1;  
}

The CSS is simple enough, it sets the duration to last for 4 seconds, then the type of animation is set by “name” which is “roll”, and finally it is set to play only once. The important thing is how you get the animation “roll”. This is set by using the @-prefix-keyframes with the identifier “roll”, this enables you to create sort of animation functions. @keyframes allows for standard CSS properties to change based on the percentage of the duration completed. Within the @keyframes you can use any percentage, and as many as you like, to set properties; or the to and from keywords. In the above code, 100% could easily be replace with the to keyword. The same code is then repeated with the various prefixes for cross-browser compatibility. Currently the only supported browsers are Chrome, Firefox 5.0+, Safari 4.0+, and Opera? (Opera has not been fully tested).
Read on to see this post do a barrel role and learn more about CSS animations

GZip MySQL Database Backup with PHP and Cron


I know that I need to backup my database every once and a while, but I’m lazy and forgetful. I end up backing up maybe 4 or 5 times a year. Ideally, I want to backup every month at least. The bad news is, my host (1&1) doesn’t have any automatic backup, so I had to make my own. I tried Googling, but didn’t find anything that really fit my need.

I did find a script by David Walsh that almost worked. I used most of the original script, but had to remodel it a bit to fit my needs. View the backup script

Single Element 3D Cube


The other day I saw some post about cubes in HTML/CSS using 3 different elements inside a container element. I then got to thinking: what if I did that with just a single element and all CSS? I then started messing around and eventually came out with the following. Fair warning: it only works properly in Firefox 4.0+ See the cube in action

Netflix Buttons v1.5 – WordPress Plugin


I just finished developing the first version of my plugin: Netflix Buttons. This is a simple plugin to add the add, play, or save buttons to any post/page. Optionally you can add the movie image as well. It is a very simple plugin that uses the Netflix API to check the availability of the movie and then posts the appropriate buttons and image.

All you need is the ID of the movie which can be gotten from the URL to post the buttons. Initial setup requires a registered API key and secret from Netflix. After that, just use the trigger text [netflix:MOVIE_ID:img:BOOL:end] in your post. Replace MOVIE_ID with the ID of the Netflix Movie, and replace BOOL with either true or false. View update information

 
Δ
Back to Top