Dan Schaefer is a web designer living in Ventura County, California. He’s been a part of several startups, doing everything from engineering to sales to marketing.

Dan's articles

  1. Uno! Use Sinatra to Implement a REST API

    The REpresentational State Transfer (REST) architecture provides a very convenient mechanism to shuttle data between clients and servers. Web services and protocols, like HTTP, have been using the REST architecture for many years, so it is a well-tested and mature concept.

  2. A Simple Admin for Padrino


    Padrino is an excellent website framework that makes it easy to implement complex web applications in a lightweight environment. Although it’s built on Sinatra, Padrino uses a Rails-like approach when generating code, establishing an organized file structure, and implementing database functionality.

    This article briefly introduces the Padrino framework and how it can be used to create a simple admin interface within a Sinatra-like environment.

    A Brief Introduction to Sinatra

    In a nutshell, Sinatra is a DSL (Domain-Specific Language) that processes HTTP connections. Specifically, Sinatra compares incoming user requests with entries in a list. When the first match is found, Sinatra executes the associated code and sends the results back to the user.

    For example, consider an HTTP GET request arriving on this URL:


    The DSL code within your Sinatra implementation may look like this:

    get ‘product/laces’ do
    haml :show_laces

    get ‘product/shoehorn’ do
    haml :shoehorn

    put ‘order/shoppingcart’ do
    haml :cart

    In the above code, the words get and put may look like Ruby commands, but in reality, they’re part of a filter that looks for HTTP verbs like GET, PUT, POST and DELETE.

  3. Eye-Catching Animations with GreenSock

    Eye-catching website animations can really grab attention and help increase conversions. Unfortunately, animations are never easy to create. Website developers spend many hours designing, reviewing, and revising their animations before turning them loose on the world. While many developers use the Adobe Flash platform to simplify the arduous task of tweening objects on a timeline, the lack of Flash support on mobile devices has many developers turning to JavaScript.

    To support the increasing demand for JavaScript animation, software vendors have created some amazing development tools. One of these vendors, GreenSock, provides some very useful and mature tools for tweening objects and putting them on a timeline. These tools are mature because GreenSock is not new to this business; they have created — and continue to create — animation tools for Flash ActionScript, and they have ported these tools to support JavaScript.

    In this article, I’ll briefly describe the GreenSock tools for tweening and timeline construction.

    A Brief Introduction to Tweening on a Timeline

    Animation developers use “tweening” to fill in frames of animation between two points in time. (The word “tween” is derived from the word “between.”) For example, when a developer wishes to animate a ball rolling from point A to point B, she need only draw a picture of the ball at each endpoint and let the computer fill in the frames between.

    Animation developers use timelines to move their animations along. For example, the developer specifies precisely when the ball gets released from point A and when it arrives at point B. Additionally, the developer uses an “easing” function to govern how the ball accelerates and decelerates along its path. Easing gives the appearance that the ball conforms to familiar laws of physics.

    Tweening on a timeline can get very complicated, especially when there are several objects moving around the screen, each with its own path, speed, and timeline. It gets even more complicated when revisions need to be incorporated after the design review. It turns out that it’s far easier to revise tweens and timelines programmatically rather than graphically. In other words, instead of arduously redrawing frames with revision, you simply change some of the numeric variables.

    The GreenSock Tools

    There are four main animation libraries from GreenSock: TimelineLite, TimelineMax, TweenLite and TweenMax. The “Max” versions extend the “Lite” versions in an object-oriented way, providing more functionality at the price of a slightly larger file size. You can generally use these libraries for free; however, I recommend purchasing a licensed tier and becoming a part of “Club GreenSock.” This provides you with the latest beta versions as well as some cool extensions. Also, your license applies to both the JavaScript and ActionScript versions.

    The names of the GreenSock libraries are self-explanatory: The “Tween” libraries allow you to tween visible elements around the screen, and the “Timeline” libraries allow you create independent timelines on groups of objects. Note that an object can be a part of more than one timeline.

    Let’s look at a simple example to see how tweening on a timeline works with the GreenSock tools.

  4. Visualizing Data with D3

    D3.js is a relatively new addition to the JavaScript toolbox. The three D’s stand for Data Driven Documents. You may have heard that D3 is just another JavaScript graphing library, but that’s only partially true. Indeed, D3 does produce excellent graphics, but its real value lies in its ability to respond dynamically to changes in […]