Creative Meat Blog
Development

Oneupweb : OUW Brogrammers to Present Webinar

Posted by Hillary in Development on October 18, 2011 - 2:43 pm

Confused by the term “Brogrammers”? We have a great team of programmers/web developers here at Oneupweb, and not only are they wicked smart, they’re rather humorous…and best of all I can assure you they are anything but obnoxious bros (thank gawd).

Anyhow, two of them will be hosting our next episode of our free webinar series the Digital Roadshow which covers all things digital marketing. This Thursday (not tomorrow, but the next day) Jeremiah Prentice and Brian Scaturro will present “Website Functionality: How To Survive on the Cutting Edge” in lingo any marketer will understand!

Take Jeremiah’s word for it:

“I look forward to breaking down in ‘no-nonsense’ terms what considerations marketers should be taking to future proof their websites,” explains Prentice. “It’s all about reaching the broadest audience possible, on all the various devices and browsers they use.”

So what can you expect to take away from their stellar presentation?

• How to take advantage of modern website technologies
• How to accommodate computer, mobile and tablet users
• What kind of questions you should be asking your web developer
• And more

If the reasons above don’t have you sold, let Brian explain why it’s important to attend this free webinar:

“Marketers and developers need to be aware of what they might be neglecting when it comes to website functionality,” explains Scaturro. “I am pumped to explain strategies and concepts that will help their sites succeed in the constantly changing digital landscape.”

Have questions you’d like these two masterminds to answer? You can submit questions prior, during and after the webinar here (this also where you register).

Feel like you’re already a pro on all things dev? Why not join to just be entertained by these two…they both have quite the personalities. Here’s a little more about them if you’re curious:

Jeremiah’s favorite dish is Tonkatsu Curry (and yes he knows how to make it). When it comes to color Mr. Prentice is no fool, he’s taken by Mother of Pearl.

How’d he become a developer?

“I watched the movie Hackers and wanted to be 1337 like those guys.”

Who’s his industry mentor?

J. Prentice looks to Paul Irish for motivation and information!

Brian’s favorite meal is spaghetti (with a name like Scaturro it’s kind of a must). Although his favorite color doesn’t derive from the Italian flag…he digs all shades of blue.

How did he travel onto the dev career path?

“I’ve been tinkering with web pages since I was in elementary school, but a good friend of mine got me to dive deeper after high school.”

What developers does he idolize?

“John Resig, Douglas Crockford, Andy Budd, Nicholas Zakas to name a few.”

Not only will Thursday’s episode be informative, it’s going to be hosted by some choice individuals! Don’t miss the chance to meet, learn and connect with these Brogrammers! Register today!

GD Star Rating
loading...
Development

Oneupweb : CakePHP—The Containable Behavior

Posted by Brian in Development, Tutorials on September 23, 2011 - 4:22 pm

CakePHP has plenty of tricks up its sleeves. Everyone who has worked with CakePHP has certainly interacted with the ORM once or twice.

The standard way of getting data

//usually done in some controller action
$this->CookieJar->find('first', array(
     'conditions' => array('cookieType' => 'Oreo'),
     'fields => array('capacity','numCookies')
));

This is all good and well for taking a peak at the cookie jar. But what if we want to take a look at the cookies in the cookie jar? We can look deep in the cookie jar with something like this:

//usually done in some controller action
$this->CookieJar->find('first', array(
     'conditions' => array('cookieType' => 'Oreo'),
     'fields => array('capacity','numCookies'),
     'recursive' => 3 //recursive looks into the nested related data
));

The problem here is this can get pretty resource intensive, and it can be difficult to specify all the fields you want from the deeply nested data.

The Containable way

But what if you want to get related data and get it the way you want it? Enter the containable behavior. First an example of setting up your model to use behaviors:

//using it on the class level
<?php
class CookieJar extends AppModel {
    var $name = 'CookieJar';

    var $actsAs = array('Containable');

     //model logic.....
}
//using it on the fly - perhaps some controller some where
$this->CookieJar->Behaviors->attach('Containable');

In both cases you can pass an array of configuration details as the second parameter (as item 2 in the actsAs array, or the second argument to the attach method).
For this example we will be using the default configuration for the Containable behavior.

Let’s take a look at how we might take a sneak peak into the depths of our CookieJar:

$result = $this->CookieJar->find('first',array(
    'fields' => array('name','id'),
    'contain' => array(
        'Cookie' => array(
             'fields' => array('type','isTasty'),
             'conditions' => array('isNotHalfEaten' => 0),
              'Ingredient' => array(
                    'conditions' => array('name' => 'chocolate-chip'),
                    'fields' => array('amount','name')
               )
         )
    )
));

//output the result and we should see something like this
print_r($result);

/*
Array
(
    [CookieJar] => Array
        (
            [Cookie] => Array
                (
                    [0] => Array
                        (
                            [type] => Chocolate Chip
                            [isTasty] => 1
                            [cookie_jar_id] => 1
                            [Ingredient] => Array
                                (
                                    [0] => Array
                                        (
                                            [amount] => 14
                                            [name] => chocolate-chip
                                            [cookie_id] => 3
                                        )

                                )

                        )

                    [1] => Array
                        (
                            [type] => Chocolate Chip Raisin
                            [isTasty] => 0
                            [cookie_jar_id] => 1
                            [Ingredient] => Array
                                (
                                    [0] => Array
                                        (
                                            [amount] => 3
                                            [name] => chocolate-chip
                                            [cookie_id] => 4
                                        )

                                )

                        )

                )

        )

)*/

One more thing to note: anything you could pass to a normal find condition can be passed to a model within contain (sort is handled a little differently, it has to be added to the order clause):

$result = $this->CookieJar->find('first',array(
    'fields' => array('name','id'),
    'contain' => array(
        'Cookie' => array(
             'fields' => array('type','isTasty'),
             'conditions' => array('isNotHalfEaten' => 0),
             'order' => 'Cookie.name DESC',
             'limit' => 2,
              'Ingredient' => array(
                    'conditions' => array('name' => 'chocolate-chip'),
                    'fields' => array('amount','name')
               )
         )
    )
));

Pretty cool stuff! To read more check out the CakePHP.org page on the topic

GD Star Rating
loading...
Development

Oneupweb : So You Want To Learn How To Animate?

Posted by Jeremiah in Development, Fresh Meat on September 15, 2011 - 8:52 pm

Just the other day here at Oneupweb, a fellow developer mentioned that he wished he was able to get into animation. This is something I’ve often heard from other developers who, despite being able to tackle any code-based logic problem hurled their way, balk at the idea of animating something. With the widespread adoption of Flash, growing browser support for the HTML5 , and WebKit’s adoption of CSS3 keyframing demonstrates—a grasp of basic animation principles is only going to become more important as time goes on. With that in mind, I wanted to take the opportunity to share some links to some very useful tutorials for getting started with animation using whichever tool you prefer.

  • LeeMunroe.com – “CSS3 Animations” (WebKit Only)

    This tutorial form Lee Munroe is an excellent example of how simple it is to get started with CSS3 keyframing. Going over the basics of setting up a document, setting appropriate styles, and then actually keyframing the animation. This tutorial demonstrates how easy it is to start experimenting with motion. Later in the tutorial, Lee provides links to some very impressive examples of the types of effects that can be achieved using CSS3 keyframing.

  • Developer.mozilla.org – “Canvas Tutorial”

    The Mozilla Developer Network has an excellent section on the new HTML5 element and the basic principles behind it. Although some knowledge of JavaScript is necessary, the tutorial does a fantastic job of laying the necessary foundation for exploring this powerful new tool in website development. After you finish the tutorial, I wholeheartedly encourage you to continue exploring what you can do with canvas by reading over CreativeJS’s “31 Days of Canvas Tutorials”. http://creativejs.com/2011/08/31-days-of-canvas-tutorials/

  • Entheosweb.com – “Creating A Simple Animation in Flash CS5

    I consider Flash the granddaddy of animation on the web. It’s what I cut my teeth on learning animation, it’s an incredibly powerful tool. This tutorial from Entheos walks you through the basics of setting up the Flash stage, importing assets, and creating a very simple animation that also looks very striking. Although it does require that you have Adobe’s Flash CS5, this is one you can’t miss if you have the application installed on your computer and haven’t taken the opportunity to see just what you can do with it.

Whether you try your hand at just one or all three of the tutorials I’ve referenced above, I hope you consider the role of animation in your future projects. If you’re interested in seeing what animation can add to a website, check out the headers on the Oneupweb home page. Keep up with your audience’s expectations and start building up those skills!

Bonus Link!

For those of you who have gotten past the basics and are looking for something a little more challenging, I wholeheartedly recommend taking the time to tackle “The Walk Cycle”. Idleworm.com has a great tutorial on this…

The Walk Cycle

GD Star Rating
loading...
Development

Oneupweb : Write a Simple Ajax Library for Javascript!

Posted by Brian in Development, Tutorials on August 23, 2011 - 8:34 pm

Everyone has their favorite Ajax library. Weather it be prototype, jQuery, or some lesser known yet equally awesome library that allows you to harness the power of Ajax—it seems you can find these anywhere these days.

In this tutorial, we are going to explore writing our own simple Ajax module using JavaScript.

Setup the module

True to the JavaScript module pattern, we will wrap our little tool up in an anonymous function

(function(){

}).call(this); //"this" will be the window object

Why do we do this? We can easily invoke this function on the global window object, and because we are inside of a function we can gain the benefit of private members, and thus avoid naming conflicts and people accidentally overwriting our methods. Let’s take advantage of this fact by setting up a few private properties and methods for our Ajax module:

(function(){
//the global window object
var root = this,
//our XMLHttp object
http = null,
//a function to get the XMLHttp object
getXmlHttp  = function() {
	if (! http ) http = new XMLHttpRequest;
	return http;
},
//a helper function to build query strings
joinParams = function(params) {
	var str = '';
	for ( var k in params ) {
		str += k + '=' + params[k] + '&';
	};
	return str.replace('/&$/','');
}
}).call(this);

//create our namespace on the global window object
root.Ouw = {};

Add the Ajax singleton

We are going to create a single Ajax singleton to act as our powerhouse for Ajax interaction. We can do this by adding an Ajax property to our module.

Ouw.ajax = {
};

Next we add all the necessary methods to communicate with the server.

Ouw.ajax = {
	request:function(params) {
		var method = params.type,
			url = params.url,
			data = joinParams(params.data),
			success = params.success;

		if ( /get/i.exec(method) ) {
			if ( data ) url = url + '?' + data;
		}
		http = getXmlHttp();
		if ( http ) {
			http.open(method.toUpperCase(),url,true);
			http.onreadystatechange = function() {
				if ( http.readyState == 4 ) {
					if ( http.status == 200 ) {
						success(http.responseText);
					}
				}
			}
		}
		if ( /get/i.exec(method) ) {
			http.send(null);
		} else {
//send the same headers an html form would
			http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			http.setRequestHeader("Content-length", data.length);
			http.setRequestHeader("Connection", "close");
			http.send(data);
		}
	},
        //a wrapper for easy get requests
	get:function(url,fn) {
		this.request({
			type:'get',
			url:url,
			success:fn
		});
	},
        //a wrapper for easy post requests
	post:function(url,data,fn) {
		this.request({
			type:'post',
			url:url,
			data:data,
			success:fn
		});
	}
};

Putting it all together

The source code as a whole:

(function(){
var root = this,
	http = null,
	getXmlHttp  = function() {
		if (! http ) http = new XMLHttpRequest;
		return http;
	},
	joinParams = function(params) {
		var str = '';
		for ( var k in params ) {
			str += k + '=' + params[k] + '&';
		};
		return str.replace('/&$/','');
	}

root.Ouw = {};
Ouw.ajax = {
	request:function(params) {
		var method = params.type,
			url = params.url,
			data = joinParams(params.data),
			success = params.success;

		if ( /get/i.exec(method) ) {
			if ( data ) url = url + '?' + data;
		}
		http = getXmlHttp();
		if ( http ) {
			http.open(method.toUpperCase(),url,true);
			http.onreadystatechange = function() {
				if ( http.readyState == 4 ) {
					if ( http.status == 200 ) {
						success(http.responseText);
					}
				}
			}
		}
		if ( /get/i.exec(method) ) {
			http.send(null);
		} else {
			http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			http.setRequestHeader("Content-length", data.length);
			http.setRequestHeader("Connection", "close");
			http.send(data);
		}
	},
	get:function(url,fn) {
		this.request({
			type:'get',
			url:url,
			success:fn
		});
	},
	post:function(url,data,fn) {
		this.request({
			type:'post',
			url:url,
			data:data,
			success:fn
		});
	}
};

}).call(this);

Using this bad boy is a snap!

Ouw.ajax.get('http://www.creativemeat.com/test.xml',function(xml){
    alert(xml);
})

//or how about a post request
Ouw.ajax.post('http://www.creativemeat.com/someaction.php',{one:'two'},function(resp){
    alert(resp);
});

Clean it up and make it your own

It’s up to you to support older versions of IE, and add any kind of fancy functionality to your new module. Happy coding!

GD Star Rating
loading...
Development

Oneupweb : CakePHP—Writing a Custom Shell for the Bake Console

Posted by Brian in Development on July 14, 2011 - 8:49 pm

Anyone who has used CakePHP knows that the Cake console is pretty boss sauce. You can use this handy little tool to accomplish awesome things like:

cake bake all

This handy tool looks at your schema and generates all the models,views and controllers your neat little MVC app requires.

But what if we need some other handy utility that the Cake console does not ship with? I am going to show you how to make a cake shell program that creates restful JSON views to aid with making your app a RESTful powerhouse.

Directory Structure Matters

Since CakePHP is a convention over configuration framework, where we put our files, and what we name them matters.
We are going to call our custom shell program json_views.

/* /app/vendors/shells/json_views.php */

app/
-- vendors/
---- shells/
------ json_view.php

Class Name Matters

Our program is json_views, and true to the Cake way, underscore means camel case. Open up your json_views.php
file and create the following class structure:

<?php
class JsonViewsShell extends Shell {
}
?>

Notice the word shell at the end of our JsonViews bit. Also make sure to extend the cake native Shel class.

The only method your shell program needs to have is the main() method. It is that simple. Take a look at the main() method of the json_views shell program:

<?php
class JsonViewsShell extends Shell {

    function main() {
        App::import('Inflector');
        $model = $this->args[0];
        $models = strtolower(Inflector::pluralize($this->args[0]));
        $directory = VIEWS . DS . $models;
        if ( is_dir($directory) ) {
            $json_dir = $directory . DS . 'json';
            if (! is_dir($json_dir) ) {
                mkdir($json_dir);
                $views = array(
                    'add.ctp' => '<?php echo json_encode($' . $model . '); ?>',
                    'edit.ctp' => '<?php echo json_encode($' . $model . '); ?>',
                    'view.ctp' => '<?php echo json_encode($' . $model . '); ?>',
                    'index.ctp' => '<?php echo json_encode($' . $models . '); ?>'
                );
                foreach ( $views as $file => $contents ) {
                    $path = $json_dir . DS . $file;
                    file_put_contents($path,$contents);
                }
                $this->out('Json views for ' . $model . ' have been created. Make sure the default.ctp layout for json has been created as well.');
            } else {
                $this->out('Json directory for ' . $model . ' already exists');
            }
        } else {
            $this->out('Model ' . $model . ' does not exist');
        }
    }

}
?>

Note the use of $this->args. This is an array with the arguments passed to your shell program. Please be aware if you are using any one of Cakes built in classes, you must import it using the App:import convention.

Using Your Custom Cake Shell

Fire up your console app (terminal, or windows cmd) and navigate your way to the app folder, within the shell:

/* /cakeapp/app/  */

cake json_views book

It’s that easy. The above would create a json folder in /app/views/books and fill it with view file for the standard CRUD actions.

This opens a ton of possibilities for stream lining your application development process!

GD Star Rating
loading...