Posted on 07.01.11

Lunch-n-Learn 2: Barbecue Chicken and jQuery

by Tim Frick

Our second Lunch-n-Learn Thursday featured James on chef duty cooking from items purchased at the Andersonville Farmer’s Market and Bryan as chief educator.

Chef James whipped up Easy Roasted Red Potatoes with Barbecue Chicken and a Summer Salad while Professor Bryan enlightened us on the wonders of using jQuery to build web interfaces. Here’s what went down . . .

Chef James took home radishes, potatoes, butter lettuce, and a slew of chicken from the market. Here's what he turned it into:

Easy Roasted Red Potatoes

“This is an easy one. As long as the potatoes don't get dry, it's going to taste great.”

• 2 Dozen Red Potatoes, cut into quarter inch discs
• Olive Oil
• Fleur de Sel
• Sansho pepper

1. Preheat the oven to 400 degrees.
2. Coat the bottom of a rimmed baking sheet with some olive oil.
3. Lay out the potatoes and coat with a little more olive oil.
4. Add Fleur de Sel and Sansho Pepper (See Note).
5. Cook for approximately 40 minutes or until tender, tossing every ten minutes. If the potatoes look too dry along the way, add a little more olive oil.

NOTE: You can use kosher salt and black pepper too. Fleur de Sel and the Sansho Pepper are lighter so they let the creaminess of the potato come through.

Barbecue Chicken

• 12 to 16 boneless, skinless chicken thighs
• Olive Oil
• A nice dry rub seasoning (such as Bad Byron's Butt Rub)
• Shichimi Togarashi (Japanese 5-spice)
• 3 Chopped Tomatoes
• 1/2 minced onion
• Pinch of dry mustard or a couple of tablespoons of hot mustard
• A teaspoon or two of ground cloves
• 1/2 cup of red wine vinegar
• A healthy dose of brown sugar
• Some smokey barbecue sauce if needed

THE NIGHT BEFORE

1. Toss the chicken in olive oil, the dry rub and five-spice powder.
2. Seal in a bag or cover a non-reactive bowl and refrigerate overnight.

Make the Barbecue sauce: (this is kind of a personal taste thing)

1. Combine the red wine vinegar, cloves and mustard in a medium saucepan and cook until reduced by half.
2. Add brown sugar, tomatoes, onion and keep on reducing adding some barbecue sauce if needed.
3. Just keep tasting. Too tangy? Add brown sugar. Too weak? Add a little salt and pepper.
4. Throw everything in a blender and you're done.

THE DAY OF

Grill the Chicken:

1. Take the chicken out one hour before you want to grill. Let it come up to room temp.
2. Preheat the grill. Make it hot to start.
3. Grill the Chicken about 5-7 minutes per side. Make sure you get a nice char on each side.
4. When the chicken is almost ready, throw on some bbq sauce and cook 2 min. per side over lower heat.

SUMMER SALAD

This is a recipe adapted/forgotten from Real Simple magazine.

• 2 Heads of Boston Lettuce (butter lettuce is what they called for I think) torn up into bite size pieces.
• Radishes (sliced to thin discs)
• Sourdough Bread (about 6 pieces) (torn up)
• Unsalted Butter
• 1 Cup Buttermilk
• About 5-6 Squeezes/Tablespoons of Olive Oil Mayo. (more mayo = thicker dressing)
• a dash of parsley
• 2 cloves of minced garlic
• salt / pepper to taste

The Bread:

1. Melt a knob of butter in a non-stick pan.
2. Throw in the sourdough bread.
3. Cook until a bit crispy adding a little salt and pepper on the way.

The Dressing:

1. Mix the buttermilk, mayo, parsley, garlic, salt and pepper to taste.

The Finish:

Toss everything together and serve.

Here's a slideshow of the food, the prep, the meals, and the presentation:

Meanwhile, Bryan whipped up some treats of his own. Here are the notes from his jQuery presentation.

Before Javascript

Before Javascript, changing any element on a web page would mean a new request to the server. Given that high-speed internet wasn't as ubiquitous as it is now, these page loads meant more time at the terminal for the user.

At the introduction of Javascript, users were just learning to use web browser's native Javascript functions to manipulate page elements within the Document Object Model (DOM).

Problems arose when different browsers implemented javascript functionality differently. The same code might return two different results on two different browsers.

Enter jQuery

jQuery was developed to:

• Manage the idiosyncracies between DOM manipulation on different browsers.
• Provide an easy to understand interface for Javascript programmers to:
• Traverse and manipulate the DOM
• Make HTTP calls from the browser, allowing the page to fetch new data without refreshing the page

The $() function is the most important function in jQuery. It takes a CSS-style path to target elements on the page. $("div#window") targets the div with the "id" attribute set to "window". $("div#navigation ul.main li") targets the li elements underneath a ul with the "class" attribute set to "main", which itself is inside a div with the "id" attribute set to "navigation".

jQuery provides some basic functionality, such as hiding/showing elements, replacing the content of elements, adding/removing classes to elements, binding click/hover/drag events to specific items, and so on.

The power of jQuery is evident in the extensions built upon it. Notable amongst the extensions is jQuery UI, which can build an array of page elements:

• Autocomplete form elements
• Date pickers
• Modal windows

Until Next Week . . .

We hope you have enjoyed this week’s installment of Lunch-n-Learn Thursdays. Next week, Joy will share her wisdom on extending brand elements across multiple platforms and deliverables while Stephanie wows us all with her gastronomic prowess. Until then, bon appetit!

Lunch-N-Learn 3