Posted By Ryan Stout on July 10, 2013

Seems like the AgileProductions team has been doing a lot of presentations lately. Here's a presentation I did on concurrency patterns.

Tags: concurrency, googlego, actor, erlang

Ember Presentation

Posted By Ryan Stout on July 10, 2013

We use EmberJS a lot at AgileProductions, so I was glad I had a chance to give a presentation on the subject.

Tags: javascript, emberjs

CSS3 Anchor Points

Posted By Ryan Stout on February 24, 2011

Most people who use Adobe products (Flash, Photoshop, etc..) should be familiar with the anchor point. It is best described as the point around which the image will rotate. My experience with anchor ponts comes mostly with Flash and using Cocos2d for game programming on the iPhone.

A classic example of using anchor points in development is animated a catapult arm. You would place the anchor point at the end of the arm so the arm stays attached at the bottom and rotates out.

In this example we would set the anchor point here:

The problem when working with CSS3 is that there is no anchor point property. To rotate an image in webkit for example we could do this:

However we can translate and rotate. The nice thing with css3 transforms is that they are applied in the order they are listed, so we can use translation and rotation in combination to accomplish the same effect as moving the anchor point. We simply move the image ny how far we want to move the anchor point (from the center), rotate the image, then move the image back. You can see the final result below.

Here's what the code looks like. One thing to keep in mind is that you have to do the same translation before the animation, but with 0 rotation starting, otherwise it will add the translation into the rotation to some interesting results.

.catapult {
  -webkit-transition: all 1s ease-in;
  -moz-transition: all 1s ease-in;
  -o-transition: all 1s ease-in;
  -webkit-transform: translateX(55px) rotate(0deg) translateX(-55px);
  -moz-transform: translateX(55px) rotate(0deg) translateX(-55px);
  -o-transform: translateX(55px) rotate(0deg) translateX(-55px);
.throw {
  -webkit-transform: translateX(55px) rotate(45deg) translateX(-55px);
  -moz-transform: translateX(55px) rotate(45deg) translateX(-55px);
  -o-transform: translateX(55px) rotate(45deg) translateX(-55px);

When we click on the throw button, we add the throw class and the animation begins. To go back, we remove the throw class and the css3 transforms handle animating. You can read more about the css3 animation/transitions here.

Tags: css3, rotation, translation, rotate, anchor point

Intro to Advanced JavaScript

Posted By Ryan Stout on December 16, 2010

For anyone who was at the presentation tonight, here are my slides. Feel free to leave any feedback also.

Tags: javascript, closure, prototype, advanced, closure

Things I'm Thankful For (Nerd Edition)

Posted By Ryan Stout on November 26, 2010

I've seen lots of "Things I'm Thankful For" this year. So I figured I would give it a shot from a Web Developer perspective.


Ruby - A great language that lets me get things done. Ruby lets me write simple, easy to maintain code, that lets me get things done.

JavaScript - People have strong feelings towards JavaScript, and while I won't try to argue that its the best language ever made, I'm especially thankful that its the one that made it into the browser. Sometimes I think how different the web would be if Java or Visual Basic for example were the language of the browser. JavaScript's real benefit comes from its flexibility. By creating the right library, you can for the most part bend the language to your will. And now with Coffeescript, I can avoid the remaining syntax limitations.


Rails - Rails does the heavy lifting of web development for me. The standardized structure and plugin system means I'm rarely reinventing the wheel.


Inherited Resources - Not so much removing the stub code, but more for making nested resources really simple to setup.


Color Schemer Studio - I use Color Schemer Studio to find colors for almost every site I make.

Web Service

Gmail - Its hard to remember what life was like before Gmail. Seeing the occasional spam in my spam folder brings me back to the days when all of those were in the inbox. I still think the interface is one of the best out there.


Rails 3 Generators - I just love that if I install rspec, factory girl, and inherited resources that my generated scaffold comes out with specs, factories, and inherited controllers.


Textmate - Still my favorite. I can get around VIM, and read up on eMacs, but I just have to have a good looking, light weight editor. I also can't justify the slow weight of a heavy IDE written in Java. Textmate may lack a few features, but it is still the best in my mind.

Tags: thanksgiving