ZeFrank Has a Prayer for His New Show

If you don’t know ZeFrank, then you’ll want to browse the large collection of awesome that is ZeFrank.com.


Threat Level: Cathedral (Remix Rough Cut)

Watch it here.

My intent is to mix the serious problem with odd and humorous associations. The end is an attempt to not get too “rah rah lets tar and feather the bomber”, i.e. a warning of sorts, but I’m not sure how much I like it. Tell me what you all think.

It’s Dangerous to Go Alone. Take These.

The world of web development is fraught with hazards. One unclosed tag or misplaced parentheses and everything melts down. Some independent projects are venturing deeper into the dangerous Deku forest of web interactivity. It’s ok though, there are tools.

1. Inspector/Debugger

The swiss pocket knife of web development is the inspector panel. You can enable it in Safari by going to “Safari >> Preferences… >> Advanced” and checking the box that says “Show Develop menu in menubar”. To bring up the inspector you can go to “Develop >> Show Web Inspector” or you can right click on any part of the page and select “Inspect Element”. Chrome features the same panel as Safari (both are built on WebKit) and can be accessed through “[wrench icon] >> Tools >> Developer tools” or the right click method from above.

Apple has a good overview of the tools along with a more thorough run through but it’ll probably do you the most good just to fish around yourself.

But I’m using Firefox!?

Have no fear, Firebug was the original swiss army knife inspector panel and its developers are no slouches. I’ll leave it to them to explain its use.

2. Javascript Library

If you are adding any kind of Javascript interactivity you probably want a library. The most popular and widely supported library is JQuery. The pro is it has everything. The con is it has everything. Other libraries exist such as Mootools and Prototype but, for this class, sticking to the well trod path of JQuery is for the best.

Using a library takes a lot of the verbosity and disorganization out of Javascript. Instead of writing document.getElementByID(“header”); you can just write $(“#header”). This is more powerful when using CSS selectors: $(“h2.red”) will find all h2 elements that also have the class ‘red’. If you are adding any interactivity to your site you’ll want a Javascript library.

The other reason for picking JQuery is the plugins (archived for the moment). They can be confusing and of inconsistent quality but overall they allow you to drop in functionality by only writing one line of code. I’m using a scrolling plugin on my class site. I haven’t had to write more than 10 lines to get some neat effects. For an example from our class: Dana has been doing cool things with JQuery.

Stop-motion & Time-lapse

An animation technique I have been experimenting with for part of my film is stop-motion. To create movement you take a still picture of something, then move it a little, and take another picture. You keep doing that, moving the object little by little, until the motion is complete. When you put these photos together it seems as though the object is moving on its own.

This technique overlaps with another technique called time-lapse photography. In time-lapse you take photos every fixed interval (e.g. 5 minutes) and then stich them together to make hours pass in just minutes.

I’m trying to do a little of both where I move the camera for the stop motion effect but I do it in fixed intervals to get the changing color of the sky. I don’t know if it will work particularly well in the final piece but it seemed like a whimsical effect. Hope it helps.

Double Feature (A Miraculous Adventure to Nowhere in Particular)

This post is a latecomer but I’ll make it a double feature.

For the $3 Million Prize

Top billing goes to The Kickstarter video for Double Fine Adventure. It is cleverly written, well shot, and helped raise nearly 3 million dollars ($2,776,780 at the time of writing).

This video is visually dynamic. It never stops moving. From the upward panning establishing shot to when Tim Schafer plops down on the lobby sofa stuff is happening. This is mostly due to Tim moving forward like a steam roller, through drum set and onward. When the camera itself isn’t moving Tim is as animated as can be. The only exception to this is the point and click adventure joke but the still shot and limited movement contrast with the rest of the piece and serve the purpose of that joke.

It’s also a useful video to look at because 2 Player Productions (the film crew involved) gave a breakdown of how they produced it. My favorite trick they mention is using a quick spin to the side to simulate proximity between two scenes.

They had the advantage of having a clear set of information they had to deliver along with a humorous script. Still, many Kickstarter videos fall flat because it is just a creator in one shot talking to the camera. The video is clearly aware of how dangerous a person talking in a still shot is. They even parody the common “didn’t see you there” joke that many hopeful Kickstarters open their videos with. This indicates that they’ve done their homework on what works and what doesn’t. And work it did, plenty of youtube videos bring in 3 million views but how many can net 3 million dollars?

Honorable Mention

The honorable mention goes to Lion Attack for their entry into Apple’s Insomnia filmmaking competition titled “Nowhere in Particular”. This short uses super saturated colors, aggrandized costumes, odd props, stunning locations, and indie sounding music to create a Wes Anderson style alternate reality.

I love when film draws you into a world different from ours. We have tools and tricks at our disposal to create a hyper-reality in film. I respect those who attempt to use film to accurately portray the world such as the neo-realists and documentarians, but my interest in film lies in creating something beyond the real.

Lion Attack launched a Kickstarter project awhile back to fund their next filmmaking endeavor “In Search of the Miraculous“. I was glad to be their first backer because I believe their creative vision is much like mine: founded on the desire to introduce more magic into the world. That’s my goal with my short narrative film and I’ll certainly be copying some of the techniques in both of these videos.

An easy way to embed your photos from Flickr

Looking for a quick way to embed photos from a flickr group or set into a webpage that also has a nice user interface? flickrSLiDR may be the solution for you. It shows your pictures in a slideshow format. The configuration page is simple and will give you a block of copy and paste-able code that should just work.

Less is Way More

Cascading Style Sheets (CSS) are so named because they cascade. If I define a style (say h1) and later define a more specific style (h1 .underline) the later style inherits all of the properties of the former. If I make all h1 tags red my h1 .underline tags will also be red, unless I change it by overriding it. To clarify, let’s see that in code:

    color: red;
h1 .underlined{ /* inherits red from h1 */
    text-decoration: underline;
h1 .not_red{
    color: blue; /* overrode inherited color */

An aside: How to post source code on WordPress.com

{LESS}Designers make pretty websites by cascading sequences of these styles together to create a whole look. At the professional level these cascades can get quite long (hundreds or thousands of lines of code). At this length it gets hard to see how cascades relate. It’s no surprise that professionals look for ways to reasonably manage them. One method for creating great CSS designs without getting lost in a sea of code is LESS (or its cousin SASS). Think of LESS as CSS+. Instead of flat CSS, LESS allows you to nest selectors making the flat hierarchy of regular CSS into a more intuitive visual structure. Let’s rewrite the code before in LESS:

    color: red;
        text-decoration: underline;
        color: blue;

That may not look like it makes things much clearer but when your style sheet gets long it can make it a million times easier to find and change particular styles.

But wait! There’s more… LESS also includes variables and mixins. Variables1 allow you to define a value once and use it over and over again. Need to change that color later? In regular CSS you have to find every use and change them, in LESS you can just tweak the variable. Mixins are like variables on steroids. They allow you to include a style in another style not as inheritance but by actually just putting all of the properties into the style. This provides a great way to take the pain out of working with styles like box-shadow that still require vendor prefixes (example). Didn’t follow that? It translates as “LESS is awesome.”

LESS has one downside: it needs to be compiled. That is, you can’t just link LESS the way you can CSS. Instead, you must first convert LESS to CSS by compiling it. There are fussy methods like command line tools or javascript includes that you can use put you’ll save yourself a lot of trouble by using LESS.app (OS X) or SimpLESS (Windows, Mac, Linux) to track and compile your LESS files. Just point the app at the .LESS file and it’ll automatically create a new .CSS file every time you save. Upload the CSS file to the server and link it like normal.

The sites we will design in this class are likely well within the realm of hand coded traditional CSS. Still, if a project requires a little more power or is likely to need to be updated down the line, then using LESS is an invaluable way to make complicated styles easier to read and change. There are more examples and full documentation on the site and I encourage you to at least check it out.

1. For those who don’t find variables “self-explanatory”, a variable is a name that represents a value that can be changed. E.g. @blue-color: #5B83AD; where @blue-color is the name and #5B83AD is the value.