• One pound of dried pinto beans
• 5 cups or so of low sodium chicken stock
• One big white onion
• Some minced garlic
• A few jalapeño peppers
• A pinch or two of cumin
• Some hot water

Let's get started. Put that chicken stock in a pot, and start heating it up over high heat. Chop up the onion nice and fine and do the same to the jalapeño peppers once you deftly scrape out the seeds with a spoon. Once all chopped up real fine, dump them in the chicken broth, which is getting hot by now. Put some minced garlic in there and that dash of cumin powder. Rinse off the dried Pintos in a colander and dump them in the pot. Sit back and bring that to a boil. The whole thing should be just barely covered with liquid. If it's not, add some water or more chicken broth until they are just barely covered. Once we get a boil, turn it way down to a simmer. For the purposes of getting your simmer right, we want to see a nice even bubble around the edges of the pot.

Okay, relax. Go watch the MLB Network or kick back with that Ken Bruen novel you're reading right now. We're going to let that simmer, with the lid slightly askew, for about two hours. Check it from time-to-time. Give it a stir every so often and add hot water as needed to keep them covered. After a couple of hours, give them a taste. Keep cooking them on low until they are to your personal liking.

Happiness happens.

Here's a fine suggestion. Set aside a serving or two of your remarkable Pinto Beans in a smaller sauce pot, set to low heat. Chop up a few slices of green pepper and add them. Add a healthy dash of Tapatío hot sauce. Use a masher of some sort to get those beans into a mashed-up state. Let them cook on low, stirring and mashing them often, until most of the liquid is cooked off. What you have here is essentially re-fried beans. So, throw a couple of corn tortillas in an oiled skillet and heat them up until you can smell the corn. Spread your pinto-mash on a tortilla, grate some sharp cheddar cheese (aged at least one year please) on there and wonder why you haven't been eating this all your life.

One of the things that Nat Geo is trying to accomplish here is to encourage people to post their scores to Facebook. We've written all of this into the script - so if you take the quiz, make sure to check out our nifty bit of code that pushes your result to the Facebok Connect application.

No sooner had we finished this, than Nat Geo was on the horn again for another one! Woo Hoo! The one we are working on now is much more complex, with a hefty supply of animation and interactive elements. It will go live in July, 2010 and the summary will get posted here in the bug lab.

Details for Dorks

In the past, we did interactives such as this exclusively in Flash. For this one, we programmed the entire interactive in javascript and for certain, this will be the way we handle these sorts of projects going forward. It was faster to deploy, and at the end of the day, it looks better than having to reply on a Flash player. Not only that, it runs on hand-held devices, which Flash currently can not.

Getting our final code delivered to the National Geographic server provided an interesting look under the hood of this major site, which AdWeek recently named as website of the year. We were provided with access to the NatGeo CMS (content management system), which allowed us to simply paste our full code straight into and text field, save and then view. Having designed and delivered CMS system for the last nine years or so, it wasn't exactly the most intuative or elegant interface, but at the end of the day, it worked and that's all that really matters, one supposes...

The above example (without the dotted background included) with the CSS written inline:

<div style="position: relative;">



<div style="position: absolute;

top: 0px;

left: 0px;

height:30px;

width: 218px;

opacity:0.8;

filter:alpha(opacity=80);

background:#281704;

z-index: 1;">

</div>



<div style="position: relative;

padding: 5px;

z-index:5;

color:#FFFFFF;

font-weight:bold;

font-family:'Times New Roman', georgia, times, serif;

font-size:15px;">Published in haste</div>



</div>

-----------
And that's it. Not sure why there was no reliable tutorial for this tehnique online. The internets are just full of things that are wrong. This isn't one of them.

You could of course apply the above CSS as either a class or as an id and it would work just fine too. Lot's of times, I prefer to write things inline because I only plan on using it once.