Christian Harden - Front End Developer

It's a little underwhelming, but here's the time-lapse of the smoke billowing from a brush-fire taken from a building-top in downtown Los Angeles.  The fire occurred in the San Gabriel Canyon over Labor Day weekend 2012.  

Photographed over a couple hours with a 5-second time-lapse and compiled to 24 seconds of video. 

I can't ever seem to remember where my DocumentRoot is on OSX.  I keep all my projects in an easily accessible folder on the desktop so typically I use 

python -m SimpleHTTPServer 8000 

to run a web project on my local webserver. Only problem is, the simple server won't recognize PHP scripts.  So, if you're trying to run a PHP project and your code base isn't in your DocumentRoot just symlink the project into your DocumentRoot like this

$ cd  /Library/WebServer/Documents/ $ sudo ln -s ~/WWW/PROJECT_NAME PROJECT_NAME

Update: Project was retired, but lives on in the graveyard

Holy cow I was excited to develop a Star Wars project, but I had a scheduled vacation right in the middle of our very short development timeline =(  @gigafied and I swapped development duties back-and-forth as paternity and vacation schedules permitted which made for a fun and unique co-op development experience. Anyways, the technical requirements for the site were fierce, so a lot of our more experimental ideas played second fiddle to pumping out a polished interoperable experience for the Star Wars Blu-Ray Box Set release. 

 Front-End Features

One such unpublished feature was an interactive physics-based visualizer hooked to a node.js activity feed.  You can see the beginnings of it here (it's just a query-string toggle). Using Box2dWeb (a JavaScript port of the C Box2d physics engine) and some CSS3 transforms, you get a really smooth collision detection "ball-pool" inspired environment.  In hindsight, I shoulda used rAF to optimize the animation further. 

The sites CSS adapts to mobile, tablet, and desktop screens - one code base, multiple experiences.  

Supports TEN different languages (see bottom right of site). 

About the Site

Promoting the Star Wars The Complete Saga Blu-ray release, this HTML5 site features 300 of the series's most memorable scenes, the ability to rate, tag and vote on them and an interactive display of those found most popular.

Reactions / Feedback

FWA: Site of the Day Winner Dec 4th 2011. Communication Arts: Web Pick of the Day Nov 1st 2011 Twitter Trackbacks: "This is kinda cool..." Twitter reactions to the site. DamnDigital: Just screenshots of the site I guess.

Credits

Healthy, fresh, and ready in about 35 minutes depending on how fast you can chop.  Serves around 10 people, and keeps very well in refrigerator.

Don't get scared by the hot peppers, they cook down and bring a TON of flavor to the dish.  Control the spice level with the *hot* salsa's you add to the chili while it cooks.

Ingredients: 

Peppers.  Lots of Peppers.  Get a wide variety and you can't go wrong. 

2 - habaneros

4-5 Smallish Red Chili peppers

1 - Serrano pepper 

2 - Bell Peppers (mix and match)

1 - California Pepper

1 - Anaheim Pepper

(If you want heat, use 1 or 2 jalapeños... when cooked they seem spicier than the others.)

Veggies. 

1 - Bunch Green onions

1 - Medium Yellow Onion

4 - Garlic Cloves

1 - Large Tomato

1 - Pack Frozen Corn

Seasonings.

1 pack - Your favorite Taco mix (which in my case is Yodder's, good luck finding that!)

2 teaspoons - ground coriander

2 teaspoons - dried oregano

1 tablespoon - chili pepper flakes

1 teaspoon - cayenne pepper 

Other.

1 - 1.5 lbs - ground turkey

2 tablespoons - vegetable oil 

2 tablespoons - Tomato paste

14oz can of Beef Broth (or chicken, doesn't really matter)

14oz can of Diced Tomatoes

1/2 Jar  - Herdez Medium Salsa

2 tablespoons - Mrs Renfro's Habanero or Ghost Pepper Salsa (use these salsas to add *heat* and complex taste to the chili, you could substitute your favorite super hot salsa here, again it'll diminish when added to the rest of the chili.

1 cup - Light Sour Cream

1 cup - Shredded Mexican Cheese

Preparation

Grab 1 large pot for the chili, and 1 large pan. 

1. Add 14oz diced tomatoes and 14oz beef broth to the pot and simmer (about 5 minutes).  Then add in chopped large peppers, (bell, california, anaheim peppers), chopped tomato,  1/2 a jar of Herdez medium salsa, and 2 tablespoons of ghost pepper salsa.  Continue simmering... 

2. Heat some vegetable oil in a pan.  Press some fresh garlic, and dice the yellow onion, the white parts of some green onions (use the green parts for chives later), and the smaller chili peppers (habanero, serrano, red chili).  Throw everything (including the seeds!) into your hot pan.  Flash cook it for a couple minutes or until onion is translucent.  Then toss it all into your pot of chili.  Stir the chili and continue simmering.  Don't clean the pan, add a little more oil to it and heat it up, we're going to use it to cook the ground turkey in a minute. 

3.  Mix the seasonings into a bowl and using your hands cover the ground turkey with seasonings and rub it all in evenly. There should be a healthy coating of seasonings on the turkey so use more taco-seasoning if you need to (or chili flakes).  Add 2 tablespoons of tomato paste to the ground turkey and mix it in evenly with your hands.  Throw the ground turkey into the pan and toss/cook until it seems mostly cooked... it can cook further in the pot so err on the side of not over cooking it in the pan. 

4. Toss the turkey into the pot and bring the pot to a boil stirring occasionally.  Add in water if the chili seems too thick (1 cup should do it).  Once boiling, add 1/2 bag of frozen corn, keep the chili boiling until the corn has cooked for a bit (5-10 minutes - you want the corn to retain some crispness).  Turn the chili down to medium and let it simmer while you taste test it adding in more chili flakes and ghost pepper salsa for taste.  You can also add lemon or lime juice for some acidity. 

5.  Serve a bowl of chili with a spoonful of sour cream, chives, and shredded cheese on top.  The sour cream is essential to cut the spiciness of the chili!

Follow these steps to enable git tab completion and to add the current working branch to your terminal prompt.

Setup

Step 1. If you have git installed, then you should have this file and you can skip to Step 3

$ /usr/local/etc/bash_completion.d/git-prompt.sh

Step 2. If you don't have this file (which for some reason I didn't) you can grab it here and save it to /usr/local/etc/bash_completion.d/git-prompt.bash

Step 3. Now just follow the instructions listed in git-completion.bash to enable tab completion (instructions also listed below).

Instructions

Step 4. Copy the git-prompt.bash file to ~/.git-prompt.sh

$ cp /usr/local/etc/bash_completion.d/git-prompt.sh ~/.git-completion.sh

Step 5. Add the following line to either your ~/.bashrc or ~/.zshrc file to enable tab completion

source ~/.git-prompt.sh

Step 6. Add the following line to your ~/.profile to display the current git branch in your terminal prompt. (Or skip to Extra to copy my slightly more practical ~/.profile PS1

PS1='[\u@\h \W$(__git_ps1 " (%s)")]\$ '  # for .bashrc PS1='[%n@%m %c$(__git_ps1 " (%s)")]\$ ' # for .zshrc

Step 7.  You will need to close and reopen your terminal to see your new changes.

Extra

Here's my ~/.profile PS1 and a screenshot the resulting terminal prompt.  [date][folder (git-branch)]

export PS1='\[\e[01;31m\][\T][\W\[\e[0;33m\]$(__git_ps1 " (%s)")\[\e[01;31m\]]\$ \[\e[00m\]'

Files

Install git on OSX

git-completion.bash // really... you could have just followed the instructions in this file

Credits

Came across this band today: Brick + Mortar.  Very cool vocals and drums in their single "Heatstroke" - can't decide if I like the acoustic or electric version better. Also, checkout some more songs from their MySpace page... good stuff

Shifted gears from a few years of hardcore Flash development to develop the new polaroid.com website in HTML5.  The site is huge, we provided the tools for users and managers to create and organize their own Polaroid content.  

Front-End Features

Check out polaroid.com on mobile Safari5+ (iPad2, iPhone4) as you can scroll through content by tilting your device!   It's pretty awesome that iOS grants access to the gyroscope through the mobile browser - maybe the file browser or camera will be next?  Chrome also utilizes the gyroscope feature on OSX laptops so be sure to QA your gyro-features on laptops to make sure they work as intended.

Horizontal layouts in HTML undermine intentional browser behaviors from DOM flow to scrolling.  Add infinite scrolling, truly custom modules, deep-linking, and IE7/8 through mobile support and you have a recipe for a frustrated front-end developer.  Anyways, hopefully the horizontal scrolling feels "natural" and intuitive.

Authenticate through your favorite social network to join The Movement and easily sync up your Flickr photos to share with other Movement members including endorsed celebrity actors, musicians, and professional photographers. 

About the Site

At the intersection of content, product and community this HTML site chronicles the evolution of Polaroid and encourages visitors to upload photos, browse archives and offer feedback.

Reactions / Feedback

Communication Arts: "Webpick of the day" CSS Awards: "Site of the Day" Nov 8th 2011 FWA Short List: 70% yes-vote on public short list Design Your Way: "55 Awesome sites using HTML5 and CSS3" HTML5beauty.com: Showcase CSSWow.com: Inspiration boards

Credits

This recipe will get you pretty close to the flavors in the mushroom gravy and London Broil dish they serve at Upper West at Virginia Tech.  I was really excited to try this and it didn't disappoint. Here are the adjustments we made to the epicurious recipe:

Substituted healthy choice butter

Added extra soy sauce 

The mushroom gravy goes great with London Broil.  After much research across various food sites I found the following London Broil quick and tasty marinade. It mostly cooks off (as we only marinated for an hour) so you can add the mushroom gravy too the broil when you eat it.

A most helpful debugger tool for @Omniture analytics at http://omniture.custhelp.com/app/answers/detail/a_id/534.

I found these directions helpful as I like a slightly more personalized network name for the house.  I don't know if this is standard, but it worked for me!  I'm not sure if there are any repercussions of changing my network settings... so do this at your own risk (you can always change it back if you're connected to the router with ethernet)

go to http://192.168.0.1

Username: admin

Password: motorola

Click "Wireless" at the top

Click "Primary Network" at the left

Update: Site is retired, but lives on for posterity at http://dirt.ff0000.com/

Launched a fun little HTML5 site for the TV series "Boss" on Starz at http://scandalousdirt.com.  Good place to see trending scandals across the US and get information on the Boss series. 

Front-end Features

The Poll uses a lot of CSS3+JS for transitional affects / each letter of the title moves independently for a snake like affect (to see effect: click previous/next question and answer the poll).  The Buzz uses CSS3+JS to independently move each number for a delayed-rotary effect (to see effect: click a Buzz-Worthy row - after Tweets load the number of Tweets updates with the rotary effect).

About the Site 

Scandalous Dirt: A new aggregator site to find the latest political conversations happening in your city & across the nation while adding fuel to the fire. http://scandalousdirt.com

Reactions / Feedback

Awwwards: Nominee. Winner! Site of the Day Dec 15th 2011 CSS Awards: Site of the Day Dec 15th 2011 (weird coincidence on the timing?) Design Licks: Site of the Day Dec 24th 2011 Reddit: Some really amazing comments about how terrible the website is. Thanks Reddit!  Best Web Gallery entry: Probably more about the design than the development. Hmm maybe not it's in the CSS category - boo yah!  1stwebdesigner: Article on infographic websites referencing scandalousdirt.com Abduzeedo: "Sites of the Week #190" Feb 3, 2012 Queness: "7 Amazing Interactive Infographics Created With HTML, CSS and Javascript"   Top Design Mag: "30 superb examples of creative web design"  Instant Shift:  "50 creative examples of websites designed with html5" Random: Probably a paid-for content spot discussing the marketing strategy and campaign.  Random: Review of Starz programming and their social marketing with a few nods to  Scandalous Dirt. Inspiration: Dark website design inspiration  Inspiration: Infographic web design trend  Inspiration: tagged: dark, typography  Inspiration: Cool... DesignModo: 20 Amazing examples of colorful web designs.  DesignModo: 8 Interactive Infographics created with HTML, CSS, and JS 

Site Credits

Random "How To" for the day... showing and hiding files in the OS X Finder.  I wanted to upload an .htaccess file to my FTP server but the file wasn't showing up using $ ls and it certainly wasn't showing up in my Finder.  

1. Use "-a" option to show all files in terminal

$ ls -a 

2. Reveal hidden files in Finder, then restart Finder

$ defaults write com.apple.finder AppleShowAllFiles TRUE $ killall Finder

3. Hide hidden files in Finder, then restart Finder