Today I released a new version of imgZoom. It’s just a minor update that fixes one bug and introduces the getOptions() API method.
I have also updated the documentation — it now includes a reference of the available API methods.
ImgZoom 0.1.1
October 2nd, 2009Learning jQuery 1.3 – Book Review
September 28th, 2009
I recently had a chance to read “Learning jQuery 1.3″ by Jonathan Chaffer and Karl Swedberg. Having been using jQuery for quite a while in dozens of web development projects, and having released a few plugins, I consider myself an advanced user of this great library. However, my knowledge of jQuery comes almost exclusively from the official online documentation (particularly the API reference) and some occasional reading. So I thought this could be an interesting opportunity to compare my experience-based knowledge with a structured course in a book.
The book is divided into two parts — the first six chapters are a gradual introduction to the concepts of jQuery and its basic features, while the remaining chapters discuss the more advanced topics and show some real-world applications of the library.
I expected the introductory part of the book to be a bit boring, since I already knew all that elementary stuff, but I was pleasantly surprised to be wrong. The authors have managed to describe the basics (selectors, events, AJAX, etc.) really comprehensively, drawing attention to many details and subtleties. For example, the chapter about effects is nothing like the “how to amaze your visitors with cool effects” approach that many tutorials seem to take — instead, the reader gets a thorough explanation of topics such as custom animations and effect queuing.
The advanced chapters are even more interesting, demonstrating a number of practical examples of how jQuery can enrich users’ experience when dealing with common web application features, such as presenting data in tables and filling out forms. While the examples are quite complicated and lead to code snippets spanning several pages, they remain beginner-friendly, as all the new elements are introduced progressively, starting with the basics and adding more features along the way.
Last but not least, the book includes useful appendices that list numerous valuable online resources and development tools for jQuery users. There is also an excellent appendix on JavaScript closures, which is a very significant (and often misunderstood) subject for jQuery plugin developers, as well as anyone interested in advanced JavaScript programming.
What I consider the greatest strength of the book is the professional approach to web development that the authors take and try to pass to the reader. The book places great emphasis on good web development practices, especially accessibility issues — all the many examples conform to the concepts of graceful degradation and progressive enhancement, and the presented techniques can be safely implemented in accessible web applications.
I highly recommend the book to any present or future jQuery user. If you’re a beginner, it will help you learn jQuery and use it the right way. If you’re experienced, you might be surprised to learn a few new tricks (I was), or at the very least, you will find it an interesting read.
ImgAreaSelect 0.9.1
August 7th, 2009I have just released an update to imgAreaSelect with a version number of 0.9.1. It fixes a nasty bug found in version 0.9 that affected the initialization stage, causing some unexpected behavior (like not being able to set the initial selection) and JavaScript errors.
Thanks to all the people who noticed the bug and reported it to me.
ImgZoom 0.1
August 3rd, 2009Here’s yet another jQuery plugin made by yours truly. ImgZoom creates a smooth zoom effect for thumbnailed images by doing a graceful transition from the thumbnail to the full-size image. Feel welcome to take a look at the live demo.
There are already a few jQuery plugins that do this, but as far as I know they all achieve the zoom effect by gradually changing the dimensions of HTML image elements. ImgZoom, on the other hand, utilizes the vector graphics capabilities found in browsers (including Internet Explorer), which results in really smooth animation and allows for additional effects to be incorporated into the process.
I’m releasing the plugin a bit early, as it only has about half of the functionality that I intend to implement. My long-term evil plan is to make the plugin a viable alternative to Lightbox et al, with prev/next links, keyboard support and such. Anyway, I’ll be happy to get some feedback on this premature 0.1 release — let me know if you like the plugin, whether you think it would be useful, and what features you would like to see in future versions.
ImgAreaSelect 0.9
July 20th, 2009I finally found enough time to finish developing the new version of imgAreaSelect, and I’m happy to announce it’s available for download.
This release brings a few major changes and new features — here’s a summary:
- Styling the plugin is now done with CSS (the old styling options are still supported)
- A new option has been added to show/hide the plugin with a fade effect
- A new option has been added to get an instance of the plugin’s object
- Some of the plugin’s methods have been made public and can be called through the instance
- A new callback function has been introduced (
onInit)
Implementing and testing the new features took me about one third of the total time I worked on this version, I spent the rest cleaning up and refactoring the code. As a result, although the new version has many new features, it’s actually a bit smaller that the previous release (0.8). The packed JavaScript file (included in the distribution package) is less than 8KB in size.
The plugin’s project page has also undergone some face lift and reorganization. The documentation is now on a separate page, and there’s a new examples page (at this moment, only three examples are included, but I will be adding more soon, I promise).
There is also a special bonus for all the people who want to modify the plugin’s source code and implement their own solutions based on it — I have made available an extensively commented version of the source code.
SelectList 0.1
June 5th, 2009I have developed a new jQuery plugin, called selectList. It’s purpose is to transform the standard multiple selection box used in web forms into a nicely looking list that you can add items to and remove items from. So, it turns this:
Into this:
Apart from the more attractive appearance, the list approach is also better in terms of user friendliness, as all the selected items are shown to the user all the time. With the traditional solution, the user often has to scroll the box to check if all the desired options have been highlighted.
The plugin is actually an extension of the idea that I demonstrated in an article on multiple select fields that I wrote some time ago. Back when I wrote it, I thought of developing this plugin, and, well, I finally had a spare afternoon to write it (and half of night to deal with browser incompatibilities). Be my guest and take a look at the project page and some examples — as usual, your feedback is more than welcome.
Shoehacking
May 25th, 2009Did I ever tell you that I like running? Probably not, as all I’ve been blogging about so far was web development or technology-oriented stuff. And even if I tried writing about something else for a change, I ended up with a Greasemonkey script, damn it.
Anyway, I like running. Not long ago, I’ve decided to try out the Nike+iPod Sport Kit, which seems to have gained significant popularity among some runners. If you haven’t heard of it, the Nike+iPod kit is a neat accessory that turns your iPod into a workout companion. While you’re running, it measures your distance and pace, and gives you voice feedback on your performance.
So I got myself an iPod Nano and the kit, which consists of a receiver that is attached to the iPod, and a sensor that should be placed in your shoe. Nike “strongly recommends” that you buy a special pair of running shoes that have a little pocket under the insole where the sensor is supposed to go. However, I already had an excellent pair of Ecco Receptor shoes that I found very comfortable, and I wasn’t keen on switching just because of the sensor issue.
Suspecting I wasn’t the only one on the globe with this problem, I googled around and found that I have two options: buy a special holder for the sensor, or hack it into the shoe somehow — I chose the latter, of course. I came across this blog post, which has a nicely collected list of hacks (as well as commercial products) that people invented to use their sensors with non-Nike+ shoes.
The method that I used is a modified version of the first hack shown on that page. In the original method, the sensor is tucked under the shoelaces and kept in place with a small piece of velcro. I didn’t use velcro, I just stuffed the sensor under the laces, but first I wrapped it in a tiny ziploc plastic baggie. Here are the ridiculously simple instructions:
Step 1. Put the sensor in a plastic baggie
Step 2. Stuff the baggied sensor under the laces
The use of the plastic bag has two major benefits:
- It makes the sensor sit tightly under the laces, making it virtually impossible for it to fall off.
- It protects the sensor from dirt and rain (yes, I’m tough enough to run when it rains).
I have now run about a hundred kilometers with the sensor attached like this, and it never even got loose. If you’re looking for a quick hack that doesn’t involve any sort of shoe surgery, I recommend you try this one. It might not work with your shoes as well as it worked with mine (the spot under the laces needs to be quite tight), so go for a test run first and make sure the sensor sits steadily after a few hundred meters. Have fun!
Setting Up an Ubuntu Subversion Server
May 19th, 2009A few days ago, my friend asked me to help him configure Subversion on his Ubuntu server, so that he and his fellow programmers could use it for their projects. Being the helpful chap that I am, I wrote up some instructions for him, and then I thought I might as well write a step-by-step tutorial on this subject. So here it is — my tutorial on setting up an Ubuntu-based Subversion server.
ImgAreaSelect vs. Dashed Borders in IE
April 24th, 2009In the recently released version 0.8 of imgAreaSelect, I introduced the borderOpacity option, which (as the name implies) allows you to set the opacity of the selection area border. It’s set to 0.5 by default, making the border semi-transparent, and giving the plugin a slightly more attractive look (at least in my opinion).
I didn’t expect that such a simple change might lead to any kind of a problem, but, well, having been dealing with browser bugs for the past few years I should have known better. The semi-transparent border looks and behaves fine in all browsers except one. Can you guess which one? Yeah, that was too easy — of course it’s Internet Explorer.
IE6 and IE7 display the border incorrectly when the selection area is being resized. The dashed border suddenly appears as if it was a solid line. Here’s the correct rendering in Firefox:
And this is how IE6 and IE7 render it while resizing:
It gets back to normal when the mouse cursor moves over the selection area. OK, so this is what happens in IE6 and IE7 — I thought that the super-standards-compliant IE8 would get this right, but I was waaay wrong. In fact, it seems IE8 takes this bug to the next level, as it displays the border incorrectly all the time, even if no resizing is taking place.
I’ve investigated this issue a bit and discovered that the border is not really turning into a solid line, it’s just that the empty space between dashes gets filled with white. And since the top-level dashes are also white (that’s the default value of borderColor2), it looks like a solid line. Interestingly, this only happens if the border is exactly one pixel wide.
I found out that the bug has already been reported to the IE8 team at Microsoft, so there’s a slight chance that it will be fixed in the final version that’s supposed to come out in the next few months. Nevertheless, I still had to find a workaround to at least make it work correctly in IE6 and IE7.
The fact that moving the mouse pointer over the bordered div seemed to fix the problem gave me hope that I might be able to force the div to be repainted, for example by playing with its margin/padding properties. And it turned out to be partially true — toggling the margin property between "0" and "auto" (which is visually the same) makes the border fine again. So basically, every time the selection area was being updated, I had to do this:
$border1.add($border2).css('margin', '0'); $border1.add($border2).css('margin', 'auto');
Or, not exactly this. Unfortunately, it only works if the incorrect “solid” border is actually rendered first. There must be some delay after the first .css() call to let IE draw it incorrectly, then the second call fixes it. Putting the second call in setTimeout() does the trick:
$border1.add($border2).css('margin', '0'); setTimeout(function () { $border1.add($border2).css('margin', 'auto'); }, 0);
This method has a side effect of causing the border to flicker a bit — it’s barely noticeable, but still. Additionally, it doesn’t do any good in IE8, as that bastard just fills the empty spaces with white no matter what. All in all, it’s an ugly and insufficient workaround, but it’s the best I’ve come up with so far. If anyone knows of or has an idea for a better solution, please let me know.
Regardless of whether I find a better workaround or not, imgAreaSelect 0.9 is going to support image-based borders, allowing you to effectively circumvent all this border-related stupidity of Internet Explorer.
ImgAreaSelect 0.8
April 16th, 2009I’ve just released version 0.8 of the imgAreaSelect jQuery plugin. The most significant changes in this version are:
- two new options to set the true dimensions of scaled images:
imageWidthandimageHeight, - a new option,
zIndex, to allow explicit setting of the base z-index for plugin elements, - the plugin can now be initialized with either
$(window).load()or$(document).ready().
Additionally, I’ve cleaned up some parts of the code and fixed a few problems. Thanks to all the people who reported bugs, provided feedback, and helped me with the testing.
Stay tuned for version 0.9, which is already under development and should be around fairly soon, with a few more new features. As usual, feedback and feature requests are more than welcome — just post a comment here or send me an e-mail.
