frameIt -- A jQuery Plugin To Frame And Centre Images
One of my colleagues is involved with an application that is required to display thumbnails that have been created and uploaded by our users. The thumbnails come in many sizes and orientations yet still need to be displayed in a consistent fashion. I quickly whipped up a jQuery plugin called frameIt to take care of this. frameIt takes the supplied list of images and applies padding on a case by case basis to achieve the effect. You can see how the following two images have been centered and framed inside a consistently sized red box.
frameIt's default settings can be overridden to allow for full control of sizing, whitespace and border styling. An example of frameIt in use is:
$("img").frameIt({
width: 200,
height: 100,
borderColor: "#FF0000",
padding: 10,
borderStyle: "solid",
borderWidth: 1
});
More Secrets of Javascript Libraries
Last week's SXSW
conference in Austin, TX had a panel session that was hosted by
authors of four of the leading JavaScript libraries. Each speaker
was given ten minutes plus Q&A to present a topic of particular
interest to themselves. They included:
- Nate Koechley of YUI speaking about network performance and
file loading.
- Andrew Dupont from Prototype discussing the abstraction
provided by using frameworks.
- Dojo's Becky Gibson quickly introducing the upcoming ARIA
specification.
- John Resig, creator of the awesome jQuery library talking about
performance analysis and testing techniques.
Some of the slide highlights for me where:
- Slide 44: The introduction of YUI's Loader and Get utilities
plus the "seed". Outside of the YUI dependency of course this is
supposedly a library agnostic way of combining multiple script
references on a page to a single reference. A single reference is
preferable since it requires far fewer HTTP GET requests. The YUI
utilities also include JIT loading of dependent scripts. This
means you should be able to reference that large image manipulation
script on your photo page, but not actually download it unless the
user decides to edit a picture.
- Slide 118: John Resig has written a jQuery plugin that can be
used to do deep-profiling of the JavaScript stack
- Slide 129: I had no idea there was a unit testing plugin for
FireBug
- Slide 139: This slide shows a graph of the Cost/Benefit ratio
of developing for IE6, IE7, FF3, Safari 3 and Opera 9.5. Guess
which one had the highest cost to benefit? IE6 was the worst and
FF3 the best.
- Slide 140: A screenshot of the Yahoo Graded Browser Support Chart. Although
I've seen this chart before it was particularly pertinent for me
since I'm dealing with some serious issues involving support for
Safari 2. Interestingly Safari 2 doesn't even show up on Yahoo's
chart. It also makes me think about Internet Explorer 6. Many web
developers are very quick to jump on the anti-IE6 bandwagon (I'm
guilty too) but the development community might be far better off
adopting universal support for a graded browser definition.
Because as much as IE6 is a pain in the ass to deal with, Safari 2
is an impossible nightmare!
- Slide 142: The jQuery Browser Support Grid for jQuery 1.3.
This was a frightening slide. Assuming there is no typo it tells
us that jQuery 1.3 does not support Safari 3! It does support 3.2
and the pending 4.0 release. As a result I have a task on Monday
to go through the analytics for all the projects I support to see
how many visitors are showing up with 3.0 browsers.
- Slide 147: jQuery will be debuting TestSwarm at the
end of March. It's a distributed continuous integrated testing
environment for JavaScript.
My Twitter Mosaic
Here's yet another Twitter mashup. It doesn't offer much of value other than a cool visualization of your friends or followers. Here's my followers as of today.
Update - This particular Twitter mashup makes a separate GET request for each avatar image. This adds about 200 requests to the page. When this post is on the main blog page, with 9 other posts the total number of gets is quite high and slows the page loading speed. I've moved the actual mosaic to it's own location More...
Reggie's Old Fashioned Sandwiches A Big Hit
After last weeks rant about the absolutely miserable experience
I had at Craft Burger I thought I should mention the
positively tasty sandwich I just ate from their new next door
neighbour.
Reggie's opened this past Sunday at 4:00pm and doesn't plan on
closing until Christmas day. They are advertising 24/7 service
offering gourmet sandwiches, soups, salads and extras like
poutine.
I stopped in today with Jonathan and Jeff from the office and
it's a safe bet we will be back on a regular basis.
The staff were great, full of smiles and enthusiasm, willing to
do whatever it takes to make a customer happy. Their phone system
crashed yesterday and so they couldn't offer debit. They not only
acknowledged that the lack of debit was their issue they went as
far as to suggest I take my order today and pay later at my
convenience. This exemplary attention to customer satisfaction did
not go unnoticed and more than outweighed a slight delay due to
opening week wrinkles.
I ordered the Marinated Roast Vegetable sandwich on sourdough.
I watched as they took two thick slices of sourdough, spread on a
sun dried tomato pesto and layered zucchini, peppers, eggplant,
provolone cheese. The finished product was about 3" high until it
went into the Panini press to be toasted. I also ordered the
potato leak soup after confirming that it was a vegetarian base.
In fact all their soups are made with a vegetarian base and often
free of butter and cream too. Jeff and Jonathan both ordered the
Monte Cristo with a side of French Fries.
I brought my order back to the office and it was still piping
hot (unlike my lunch from Craft Burger last week). The soup was
very good. The portion was generous and the flavour a perfect
blend of potato and leak accentuated with Tarragon. The sandwich
was fantastic. As portions go it was more than enough for a lunch
without the soup. The crisp texture of the toasted outside
complimented the softer roasted vegetables on the inside. The
vegetables themselves were properly cooked and had none of the
mushiness often found if they've been sitting around too long.
The consensus from both Jonathan and Jeff was a definite
two-thumbs-up for the Monte Cristo. However, we all agreed that
the French Fries were nothing to make a fuss of. They were not bad
just not as stellar as the sandwiches. In my opinion Sadie's still
has the best Fries in the neighbourhood.
For me the service and food experiences are already good enough
to guarantee my return visits. But the icing on the cake had to be
the price. I was fully anticipating spending at least $10 for my
sandwich given the location, hype and competition next door. I was
pleasantly surprised to discover my delicious Panini was a mere
$6.95 and the Monte Cristo only $7.95. I upped my bill by another
$2.95 ordering the daily soup. However, that turned out to be a
lot of food and more than I would normally eat.
Reggie's is definitely a great addition to the King/Bathurst
lunch scene and finally fills the soup-n-sandwich void created when
El Penco closed last year.
Quick And Tasty Soup
Sometimes I just don't feel like making much effort for dinner.
Tonight was one of those times. Yet I wasn't prepared to settle
for delivered pizza or a boring sandwich so I whipped up a souper
quick filling soup instead. The secret was Jiva Thai's
Lemongrass Galanga Sauce. It's 100% vegetarian and costs $3.99
a jar from one of the Kensington Market health food shops.
I finely chopped
- 1/2 small onion
- nickel sized piece of ginger
- 2 cloves of garlic
and softened in a tiny bit of olive oil. While the that was
cooking I coarsely chopped
- 2 organic carrots
- 1/5 head of cauliflower
- 1/2 red pepper
- 2 stalks of celery
and tossed those into the now softened onion mixture along with
a generous tablespoon of Lemongrass Galanga. I stirred that around
for about 2 minutes before adding two cups of water. The final
mixture was brought to the boil, turned down and simmered 5 more
minutes.
The end result was a delicious and filling soup that took next
to no time to make. Cleanup was a breeze too because it was a one
pot meal.