Here’s a simple process to “publish” a local HTML build on a Mac.  This can be useful for quick demos of work to other team members.  Or (this is how I used it yesterday), viewing work in virtual machines for Internet Explorer testing.

1. Add this somewhere in your shell profile.  For me, this is at ~/.profile.  Garrett supplied this tip to us.

alias server='open http://localhost:8000 && python -m SimpleHTTPServer'

2. Open up a new terminal window and change directory to the folder containing the work you want to stage.  Run the following to create a simple web server.

server

3. Now, you can go to http://localhost:8000 in a web browser to view the directory you launched the server from.

4. Install the localtunnel gem following the instructions on their site.  It’s pretty simple.

5. Stage your build using localtunnel by running (assuming you have a public key generated in the standard location) the following.

localtunnel -k ~/.ssh/id_rsa.pub 8000

6. Now you’ll be able to view your work at http://****.localtunnel.com.  Badical.

While finishing up a project over the weekend I ran into an issue where the video player just displayed an infinite loading screen rather than actually playing. Odd. I checked the JavaScript console to see if there were any JavaScript errors or if there was a 404 request for the video, which neither of those were actually the case. I tried to visit the file directly, and what do you know, it’s asking me to download the video, it didn’t start playing in the browser like it should’ve. After realizing the only reason this would happen would be because the server must not be returning the correct Content-Type header and the browser didn’t know what to do with it, I gathered the MIME types for the few videos formats we were using and updated the nginx mime.types file and restarted the server. What do you know, that solved the problem and after refreshing it displayed the video and it played as expected. So to help anyone else who may have ran into this issue and not really sure what to do, I have both the nginx and Apache solutions for you. Hopefully soon all web servers include these new MIME types to their default configuration files, but until then be sure to include these in your server setups for future projects.

nginx

Apache

As you most likely know, all the top shops in the industry are taking part in a voyeuristic web cam concept put together by the beloved FWA. It’s safe to say everyone in the industry has the luxury of working in inspiring spaces, so we’re gonna hold off on sharing that for upcoming shows.

Our initial FWA TV introduction revolves around the idea of what’s missing in digital relationships and taking advantage of the very personal nature of a web cam.

Here at BKWLD, we understand and take pride in meeting our clients and peers “face to face.” That being said, in our creative process we acknowledge that a project’s success starts with an in-person/real relationship. Everyone who uses the web, of course, has plenty of digital relationships (hundreds, at the least) where the odds are you’ll never meet that person in reality, nor even know what they even look like.

Our idea is to try to make that first step of introducing ourselves in a more human light to the industry. We all have our personas on the web, so here’s our chance to put our faces out there in a real, awkward, humble, yet confident, and approachable manner.

For the first week’s show, we’ll introduce to you our Sacramento team. We figure’d viewers have been checking other cam feeds here and there, so we broke down our Sacramento team into the following time slots below.

Get ready to watch us squirm…

Tune in Here @ 3:00pm: http://thefwa.com/fwawebtv

Team web cam time slots:

Veronica : 3:00
@VSkarshaug

Chad: 3:07
(too cool for school)

Jeff: 3:14
@jeffdoe

Matt: 3:21
@mattcarvalho

Ethan: 3:28
@iamethanmartin

Garrett: 3:35
@garrettb

Donald: 3:42
@buk_d

George: 3:49
@GeorgeToGo

Joe: 3:56
@bkwld_joe

Josh: (out of the office)
@joshreddin

Ryan: (out of the office)
@ryanvanni

Ok, not to be too big of a tease, here’s a recent photo of our Sacramento office (box checked). Next week our Seattle office will take part. I know they are chomping at the bit to show off their people and brand spanking new office.

Some fun times right there.

Over the last couple years we have had the opportunity to speak to various classes and programs full of folks enamored with the sort of work we get to do, and clients we get to do it for.  What’s funny is that we are always beside ourselves and left slightly confused with how enamored they are.

Just about this time every year, I get several emails from local, national, and some international folks looking for a summer internship.  And for the last nine we did not offer anything.  The truth is we never saw the value, for them at least, in having a handful of young people running errands, and handling miscellaneous to-do’s.  Nor did we believe we had the time to really offer the hopeful lot what they might be looking for.  But that was then, and this is now…

This is now our 2nd year providing an alternative kind of program.  One not for the faint of heart, lazy, or half-assed.  If you are looking for an internship that sends you on coffee runs, or where most of your time is spent on your own Facebook page, this isn’t for you.  If you are looking to get a first-hand, and hands-on perspective into what and how it all really goes down, this is for you.  It will be fast-paced, stressful, fun, exhilarating, you will want to pull your hair out, you will want to dance in circles.

WHAT YOU WILL LEARN
Over the course of six weeks, a select group of six interns will be fully immersed in one fast (normal in the real world) paced project. You will be a part of client management, pitching ideas, and complete digital strategy including web, mobile, social and experiential…as well as all of the production headaches and home runs that we get to experience in a full day here at the Buk.  All of this will be done for of a real BKWLD client and if your work makes the cut, the client loves it, your work may even be used in the real world.

WHO WE ARE LOOKING FOR
We are looking for a small group of dedicated and hard-working people.  We have no age limits, experience requirements, or education minimums.  However, we are looking for people with an inherent interest in marketing, design, and digital (duh). The right candidates will be interested in careers as producers, creative directors, technical directors, art directors, developers and storytellers. We expect this group to take it serious.  100% attendance, attention, and effort is required.

THE CALENDAR
In a nutshell, the weeks will look a little like this:

Week 1 – Immersion

• Introduction
• What is the process
• Client introduction
• Product discovery

Week 2 – Conception & Planning

• Story boards
• IA / Wireframes
• Revisions & Approvals

Week 3 – 5 – Production!

Week 6 – Case Study

• Document strategic analytics
• Write & submit case study

INTERESTED?
Sound good, want to see if you make the cut? Head over to bkwld.com/u to take the next step.

This past week, our former senior producer (MDavid Low), and myself (Matthew Aebersold), got the amazing opportunity to attend The One Show Interactive awards ceremony in New York City. We were nominated for an award in the “Branded Games” category for our work on the Disturbed Asylum, a recent immersive experience project we did for Warner Brothers and Disturbed.

Although we didn’t snag a pencil, it was a huge honor to be nominated among the best in the ad world for our work. Making it through rounds of judging, and arriving at the final round of interactive projects made it all worth it. Being able to go to the awards ceremony has definitely energized myself and the rest of our team here at BKWLD. So stay tuned for some more amazing work in the future, and hopefully I’ll be able to report news this good or even better next year.

Event Photos

While working on a client project today, I decided to add some nice CSS transforms to add a richer experience for those who choose to use one of the more up to date browsers (Safari, Chrome, Firefox 4). I chose to use the hardware accelerated 3D transforms for both Safari and Chrome, and the standard 2D for Firefox 4. Only to be stumped as whenever the animations started to take place, the header and footer for the site would flicker like a broken down TV throughout the animation until it was done in Safari, but not in Chrome. Not cool. So the first thing I did was search Google for an answer, clicking right away on the first Stack Overflow post I saw.

The first answer seemed like the wrong approach, having to add -webkit-transform-style: preserve-3d to every element and having the browser transform all the elements to a 3D state which would seemingly add more work for the browser. Not good, next answer.

The next answer was thought out more and seemed a bit more logical. Although for my build, both the header and footer have a fixed position. Header to the top, footer to the bottom, both of them pinned to the full width of the browser, no wider so it didn’t make sense as to why it was still flickering when the answer said it will happen if the elements are wider than the window itself.

The first approach I took was just to take out the header and footer CSS to see if it’d still flicker. It stopped! So something within the CSS must be causing this. I added the styles back in and only kept the styles for the actual wrapper for both the header and footer, still no flickering, so I was on the right path. After adding all the CSS back in and digging some more, I noticed the navigation, logo and some footer links had text-indent: -999em;. Taking this out preserved the header and footer completely during the animation and had no flickering. So I found the problem, the text itself was adding onto the headers width in the browsers eyes.

In the end, the simple fix was to add span tags around the text that I was negative indenting and hide that specifically rather than using text-indent all together. You probably wonder why I go into great depth on such a simple problem, but this has happened to be quite a few times before, and it is great relief that I know now what was causing it and how to fix it. I hope anyone who has had this problem before or are currently dealing with it find this article so you can move forward in your development and keep on making awesome things.

I’ve created a simple example for you to check out and see what happens. Simply roll over the rounded square in the middle of the page and let the flickering begin. Remember, only for Safari does this happen.

Another thing to keep in mind, is it also only happens if you have z-index on the parent element where the text is overflowing. I created another example to demonstrate this, the only difference between the 2 examples is this one doesn’t set a z-index on the header, which prevents it from flickering. Although for this build, heavy z-indexing is required.

For an internal project I am working on I need the ability to set environment specific configuration settings, and I’d rather not set them with a file full of constants. So I came up with a way to have a simple YAML file for configuration, and then an initializer to load it and apply it to a single constant being Setting.

Just copy the settings.yml file to config/settings.yml, then copy the settings.rb file to config/initializers/settings.rb. Once you’ve done that, restart your server and you’ll have access to all your settings.

You have your default configuration that you setup, then all your environments listed below that override any settings set in defaults. You’ll also need to create additional environment keys for any for other environments you may have.

It’s easy to store images in an array, and loop through that array to access those images. The code is very clean, and easy to manage. My concept is to try and load images from an array by looping through the array, and reusing one loader method multiple times. I would instantiate a new loader instance each iteration through the loop, and then load the image. The problem, however, is by the time the image is actually loaded, the for loop is complete, and my call addChild(l) is referring to the last time Loader was instantiated, so all of the images loaded were the last one in the array.

I’ve found an elegant solution to this (in my opinion) by creating an object for each image, and to store information about the image in that object, including an instance of the loader. Let me show you.

Example

//counter to keep track of unique items in the array
var counter:Number = 0;

//base array with paths to the images
var images:Array = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"];

//blank array which will be filled with objects that contain image data
var imageObjectArray = [];

for(var i:uint = 0; i < images.length; i++) {

	//create blank object with appropriate properties
	var imgMeta:Object = {imgPath: null, holder:null, loaderInst: null};

	//push the object into imageObjectArray so we can access it later
	imgObjectArray.push(imgMeta);

	//set the properties we know
	imgMeta.imgPath = images[i];
	var imgHolder:Sprite = new Sprite();
	imgMeta.holder = imgHolder;	

	//load the image here
	var l:loader = new Loader();
	l.contentLoaderInfo.addEventListener(Event.COMPLETE, onDoneLoading);
	l.load(new URLRequest(imgMeta.imgPath));
}

//function called when each image is done loading
function onLoadComplete(e:Event) {

	//use counter here to make sure we're getting the correct imageObject
	//we need to call each unique loaderInst here, so each image is unique
	addChild(imgObjectArray[counter].loaderInst);
	counter++;
}

This of course can be classed out and abstracted, but the basic principal here is being able to reuse the loader code each time through the for loop, and displaying each unique image when it’s done being loaded.

An additional benefit to this is being able to use the object again anywhere in your code, since all the information for all of the images is stored in imgObjectArray.