Riot Riot

Riot Riot Client Framework

Jonathan — Sat, 20 Feb 2010 01:41:30 +0000

Interwebs, mark today as the beginning of Riot Riot’s new adventure of using our framework!

Today, we are beginning total development of our framework for any clients that jump on board. Both Phil and I are excited to start implementing any and all features we can imagine to help our clients understand the full scope of work being built. Right now we just wanted to let everyone know that we will be spending spare time between projects further developing our application. Not only will this allow us to come up with fun new ideas but it will strengthen the framework for any clients that might require a lightweight CMS!

Keep an eye for any updates VIA twitter or through our blogs to see any new updates/pictures and content!

Simple PHP Progress Bar

Jonathan — Mon, 15 Feb 2010 03:55:38 +0000

The other day i was looking to create a simple progress bar for a test application. So this is what i came up with in. Keep in mind this is nothing super intelligent or sophisticated.

Lets start by starting creating the function which will be used to create this progress bar.


function progressBar($percentage) {
	print "\"progress-bar\" class=\"all-rounded\">\n";
	print "\"progress-bar-percentage\" class=\"all-rounded\" style=\"width: $percentage%\">";
		if ($percentage > 5) {print "$percentage%";} else {print "\"spacer\"> 
";}
	print "
";
}
?>

Next lets give the Div’s some style.

.all-rounded {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
.spacer {
	display: block;
}
 
#progress-bar {
	width: 300px;
	margin: 0 auto;
	background: #cccccc;
	border: 3px solid #f2f2f2;
}
 
#progress-bar-percentage {
	background: #3063A5;
	padding: 5px 0px;
 	color: #FFF;
 	font-weight: bold;
 	text-align: center;
}

Once the CSS has been set, to run this function we just need to throw the function where you want to display it! Change the number inside the function to display a different percentage value.
1
progressBar(60); ?>
Keep in mind you can use some MySQL queries to dynamically change the progress bar. This can be combined with other calculating formula’s also if you would really want this to be effective.

Navigate to the downloads area to get a working example. All that is required is PHP and some html/css knowledge for the look of the bar.

Riot Riot in Lake Tahoe

Philip — Wed, 10 Feb 2010 20:09:52 +0000

I am currently taking a break from my home office in Los Angeles to travel around the state of California. Monday, I drove up 395 with my friend Chelsea, and am now in Tahoe until the weekend, when I am heading to San Francisco. I am taking some time to work on new designs and tidy up Riot Riot. Meanwhile, Jonathan is holding down shop in a slushy Massachusetts! Happy winter!

Highlights so far:

Alabama Hills
Mt. Whitney (tallest in contiguous U.S.A.)
Mono Lake
Mammoth
Lake Tahoe!!!

ps. Sorry for the poor photography. Like all Scheffers, when there is a destination ahead, pictures must be taken whilst moving towards said destination.

Flickr API and PHP, display images!

Jonathan — Tue, 09 Feb 2010 00:33:13 +0000

Flickr in the past couple years has really turned into a great service. PHP too has been a vital item to internet development! Now lets make them play nice together to grab some of your recent images in your flikr account!

The first step to get this working is to create a Flickr account.
Once your account is created, get a API. You can do that by clicking this link: Create a Flickr API. It should be a 32 character (number and letter) random combination. This will be YOUR API so keep that somewhere easy to get to.

At this point open your favorite development program (for me, CODA or Espresso) and FTP client. Create the file: flickr.class.php and apply the following code:


class flickr {
 
    function flickr($username,$api_key) {
        $this->username = $username;
        $this->api_key  = $api_key;
        $this->user_id  = '';
        $this->response = array();
        $this->timeout  = 5;
    }
 
    function getUserId() {
        $url = 'http://api.flickr.com/services/rest/?api_key=' . urlencode($this->api_key) . '&method=flickr.urls.lookupUser&url=http://www.flickr.com/photos/' . urlencode($this->username) . '/';
        $return = $this->fetch($url);
        return $return->user->attributes()->id;
    }
 
    function getImages($count) {
        $url = 'http://api.flickr.com/services/rest/?api_key=' . urlencode($this->api_key) . '&method=flickr.photos.search&user_id=' . $this->getUserId() . '&per_page=' . urlencode($count);
        return $this->fetch($url);
    }
 
    function fetch($url,$post = false) {
        $ch = curl_init($url);
        curl_setopt($ch, CURLOPT_NOBODY, 0);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_USERAGENT, 'Flickr');
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_TIMEOUT, $this->timeout);
        $output = curl_exec($ch);
        $this->response = curl_getinfo($ch);
        curl_close($ch);
        if((int)$this->response['http_code'] == 200) {
            return new SimpleXMLElement($output);
        }
        else {
            return false;
        }
    }
 
}
?>

The above code will be complicating if you do not understand PHP Classes and Functions. Hopefully you do understand enough of the syntax to breakdown some of the code.

Next, enter into a page where you would want to display your photos! This is some example code, make sure your “flickr.class.php” require is looking at the correct location. After setting that, change where it says: “username” and “your-api-key”.


 
require_once('flickr.class.php'); 
 
$flickr = new flickr('username','your-api-key');
$images = $flickr->getImages(5);
if($images === false) {
    echo 'Flickr Feed Unavailable';
}
else {
    foreach($images->photos->photo as $photo) {
        echo '. $flickr->username . '/' . $photo->attributes()->id . '"> . $photo->attributes()->farm . '.static.flickr.com/' . $photo->attributes()->server . '/' . $photo->attributes()->id . '_' . $photo->attributes()->secret . '_s.jpg" /> ';
    }
}
?>

Save your files and then take it for a test drive!

Apple: Magic Mouse

Jonathan — Wed, 27 Jan 2010 05:12:28 +0000

… and there was one mouse to rule them all

First Impressions
As always when getting a new item, you just want to get it unwrapped and setup as soon as possible! With Apple’s new Magic Mouse it does work GREAT with their Macbook Pro series that feature bluetooth! After a quick pairing it was up and working!

The design and finish are so far top-notch. With small hands, its neither too large or annoying. Its square profile allows for lots of contact area, and it is very responsive! Its low profile allows for it to keep that wireless sophisticated look. The mouse runs off of AA batteries, which is great since they are widely available.

However, there is one small issue. If you are running “Snow Leopard”, you will need to install Apple’s wireless mouse support. This allows the custom features used in the Magic mouse. Those features are:

Scroll with momentum
Two finger navigation
Circle Scrolling

You can download Apple’s wireless mouse software on there site! Click the link below to navigate there: http://support.apple.com/kb/DL950

So if there are any available at your local BEST BUY or APPLE store, pick one up! Im sure you will appreciate it! If you want more pictures, please submit a comment and I will get back to you as soon as possible!

Random Illustrator: Outlines

Philip — Wed, 27 Jan 2010 02:14:12 +0000

The Pen Tool is quickly becoming my favorite Weapon of Choice. Today I doodled up a photo of myself that we might use for our “Who We Are” section. If you decide to create a neat traced image, take your time, and add as much detail as you can!

Today’s fun included:

Adobe Illustrator
Photo to Trace
Pen Tool
Wacom
An hour

My best tip for using the Pen Tool in illustrator: When you want to escape your line to start a new one, simply hit “P.” Before I realized this, I would add an extra step by hitting “V” to select the Pointer, and then P again. Yes, this saves you from hitting only 1 key, but when you are making hundreds of unique lines…

CSS3: Rounded Corners

Philip — Tue, 26 Jan 2010 08:22:59 +0000

CSS3 has a few very useful features, such as: Rounded Corners. If you are using a CSS3 compatible browser, you will notice our current version of our site uses many rounded corners. They are all done with CSS3.

The following code works with Safari, Chrome and Firefox 2+. IE… is right out.

.rounded-corners {
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -khtml-border-radius-topleft:10px;
  -khtml-border-radius-topright:10px;
  -khtml-border-radius-bottomleft:10px;
  -khtml-border-radius-bottomright:10px;
  -moz-border-radius-topleft:10px;
  -moz-border-radius-topright:10px;			
  -moz-border-radius-bottomleft:10px;
  -moz-border-radius-bottomright:10px;	
}

You can also shorthand the Chrome and Firefox CSS3 corners. Safari does not play nice, so I usually use the full version for all three.

/* set all corners */
.rounded-corners {
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;	
}
 
/* or assign each corner clockwise starting top left */
.rounded-corners {
  -khtml-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
}

PHP & MySQL Query Result Loops

Jonathan — Tue, 26 Jan 2010 04:49:34 +0000

Static content is dying, but dynamic sites are emerging left and right. Lets focus on using PHP and merge it with mySQL so we can pull some dynamic data!

The items needed in-order to make this tutorial work would be:

PHP 4+
mySQL 4+
Access to admin in the mySQL database
FTP program (if working remotely)
Basic knowledge of syntax

First, lets begin with developing the database. This will require creating a new database if you do not already have one available. Let’s create a database called: example.
Once the database is created, we will then need to create a table inside the database called: records. Below is a example SQL code to use:
1 2 3 4 5
CREATE TABLE 'example'. 'records' ( 'id' INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY , 'name' VARCHAR( 25 ) NOT NULL , 'email' VARCHAR( 255 ) NOT NULL ) ENGINE = MYISAM
The following code will create 3 columns in the database: id (int / 5 characters), name (varChar / 25 characters), and email (varChar / 100 characters). Setting id to “auto increment” means it will automatically come up with a new row-number as they are injected. This will allow us later on to pull specific records using this id field.

Next, lets begin with creating our first file: db.inc.php. This will house our connection to the database, please be sure to use your own mySQL logins.


$hostname="localhost";
$mysql_login="root";
$mysql_password="yourpass";
$database="example";
 
if (!($db = mysql_connect($hostname, $mysql_login , $mysql_password))){
  die("Can't connect to mysql.");
}else{
  if (!(mysql_select_db("$database",$db)))  {
    die("Can't connect to db.");
  }
}
?>

The code there is somewhat more advanced, and too much to go over (im taking for granted you know some basic html/mysql commands).

Now lets create the file that will be pulling the data and listing the resulting data! Create the file: results.php in the same folder as “db.inc.php”. In that file it will have:


require_once('db.inc.php');
 
$query  = "SELECT * FROM records";
$result = mysql_query($query);
 
while($row = mysql_fetch_assoc($result))
{
	print "\"row\">$row[name] | $row[email]
";
}
?>

After we required the “database” connection file, we then started to code our mySQL “query”: SELECT * FROM records. The asterisk means it will pull all the columns from the database.

We are then running the mySQL command “mysql_query” which will run that command through the database and grab all the rows and throws them into a array! Once it has them all, it stores them into that variable “$result” for later use in our application.

PHP’s “while” function is very valuable. It will repeat itself as long as there is records, once it runs out it will stop looping. As you can see in the code, it is looping the DIV “row” each time. Inside that DIV you see two php “variables”: $row[name] and $row[email]. The item that is inside the bracket is the “column” in the database. As said earlier, each row has been turned into an array, here is it turned into a usable item.

Last step is to return to your database program, and create a few records. If you want to just “inject” some SQL please use this:

INSERT INTO  'example'. 'records' (
  'id',
  'name',
  'email'
)
VALUES (
  NULL ,  'jonathan',  'youremail@email.com'
);

Random Photoshop

Philip — Tue, 26 Jan 2010 04:15:43 +0000

Jon and I were trying to make tilt-shift images. This isn’t quite there.. but I liked it.. Plus its a small bowling alley in a hotel and that’s awesome. Next time I’m yelling, “Strike a pose!”

Canon S90: First Impressions

Philip — Tue, 26 Jan 2010 03:46:59 +0000

The Canon S90 is awesome. I am not going to do a write up telling you what is great and what is not so great about the camera, as there are many more qualified reviews from people who aren’t web developers. Attached below are just a few sample pictures from my trip to the Grand Canyon in January (re-sized only).

More awesome S90 photos from Flickr Community »