Mayonnaise and Horseradish (not mixed together)

Mayonnaise

I did the math this weekend and discovered that home-made mayonnaise is pretty darned expensive. A back-of-the-envelope calculation indicates that store-bought mayonnaise, even the relatively good stuff, is about 10.8¢, whereas making it myself with decent olive oil it comes out to about 33.8¢.

Which doesn't mean I'll stop making mayonnaise, especially not since I can herb and mix it myself.

Horseradish

Utterly unsatisfied with any of the offerings from the various stores around my neighborhood, I bought some raw horseradish root and tried preparing my own with a microchopper. It was less than satisfactory. I'm not sure what I'm doing wrong. According to preparation instructions, horseradish releases its burning concoction when the plant cells are crushed, so maybe instead of chopping I should push it through the high-speed grater?

I also tried leaving it out for a long time, as that apparently causes it to get stronger before you add the vinegar to stop the strengthening process.

Ah, well.

Replacing Flash with Javascript: Metacritic’s slide show with in-image thumbnails

Metacritic is an interesting website with a pretty stylish layout, but one thing that drives me nuts is the use of Flash for a simple slideshow on the home page. I decided, as an experiment, to try and replace that with one driven by Javascript.

The choice of javascript turned out to be simple: I’d use jQuery. Not only is it easy to write with, but there’s already an incredible plug-in for jQuery called Cycle. Having read through the documentation, the only “tricks” would involve automagically generating the thumbnails, placing them in-line within the slide show, and ensuring they had the right z-index so that they’d be visible.

You can read the description or skip right to the demo. The source code is all there.

The basic premise is that cycler automatically fade between the images, using the standard “fade” setting. So the entirety of the javascript, after importing jQuery and Cycler, is this:

$(document).ready(function() {
    $('#slides').cycle({
    fx: 'fade',
    delay: 4000,
    speed: 200,
    pager: '#slide-thumbnails',
    pagerAnchorBuilder: function(idx, slide) {
        var s = $('img', slide).attr('src');
        return ('<a href="#"><img src="' + s + '" /></a>');
    }})
});

Basically, we’re looking for the DOM element ’slides’, and all of its immediately children will be treated like slides. We also have a second DOM element ’slide-thumbnails’, which I’m filling with a simple anchor containing a copy of the image.

The DOM element ’slides’ has individual slides, which look like this:

<div>
  <img src="./95.jpg">
  <div>
    <h2>Omaha</h2>
    <p>At the annual Pumpkin patch run.</p>
  </div>
</div>

To be fair, I’m assuming every image is the same size. That’s relatively important.

The only remaining trick is to wrap slides is another div, ’slide-container’, position relative, and both ’slides’ and ’slide-thumbnails’ are positioned absolutely with respect to ’slider-container.’  ‘Slide-thumbnail’ is made the width of a thumbnail, forcing them into a vertical column.  The z-index of both ’slides’ and ’slide-thumbnails’ are both set so that the thumbnails are above the slides.

It’s simple and elegant.  A little positioning allows the title and text to be placed accordingly, and a nice black background, set to 66% opacity (which you can do with PNG) allows you to place the title and text on the page with a nice delimeter.

Metacritic has in-house artists who make sure the left thumbnail bar doesn’t stomp all over the image. You’ll have to master some fine Gimp or Photoshop to achieve the same effect.

Check out the demo.  Source code is all there.

This entry was automatically cross-posted from Elf's technical journal, ElfSternberg.com

Mockery shouldn't be this easy!

Matteress

Really, guys, don't make mocking you this easy. I mean, didn't the Starship Enterprise have something called a 'matteress?'

Spotted at the local Costco warehouse on our monthly run this past Sunday.

New Story, “Fortune Cookie.”

This is a fairly standard Furry fantasy, with some antagonistic-to-furry language at the beginning.  If you think you recognize yourself in the story, you’re probably wrong.  It was a lot of fun to write, and I’d like to thank an unnamed lovely young woman for giving me so many amazing ideas.   M/F, bondage.  Please enjoy Fortune Cookie.

This entry was automatically cross-posted from Elf's writing journal, Pendorwright.com. Feel free to comment on either LiveJournal or Pendorwright.