Tag Archives: jQuery

Review: jQuery HotShot

jQuery HotshotsI have followed and been a fan of Dan Wellman’s writing for some time and when I noticed he was asking on Twitter for people to review a new book he was writing I jumped at the chance.

I have been using jQuery for several years now on a mixture of commercial and personal websites and on various web applications and whilst I don’t always think it is the right solution for a problem, when a library is the right solution jQuery is one of the best. In my current role we heavily use jQuery so I believe I am qualified to accurately review this book.

For this review I am reading the Kindle version of jQuery HotShot which you can buy now from Packt and from Amazon, the book is also available as a paperback for all you cave-people.

jQuery HotShot

So, is jQuery HotShot a good read? Or does Dan fall into the trap that so many jQuery writers do and leave you with pages of poorly written jQuery that doesn’t conform to any best practice?

I am happy to report that true to form Dan has produced an excellent book that manages to explain some of the core features of the library in interesting and memorable ways. He has greatly increased my understanding of some of the features that make jQuery an excellent library.

With hardly any preamble we are thrown straight into a fun example of using jQuery to create a sliding puzzle game. The example manages to assume no prior knowledge but at the same time doesn’t bore someone with prior knowledge by walking at a snails pace, as the book continues the examples get more and more involved.

One of the reasons that jQuery HotShot is able to get straight into good examples is that the examples themselves are littered with little best practice tidbits, for example;

Joining an array of substrings to form a single string is much faster than building a string using the + operator on substrings, and as we’re working repetitively inside a loop, we should optimize the code within the loop as much as possible.

Without needing a chapter or section dedicated to optimisations we have been able to find out about the need to take care about what we do inside loops and also learn a quick performance tips when dealing with strings. This certainly doesn’t have any direct bearing on the task at hand, but helps point the reader towards the best way of doing things.

My favourite example used in the book is probably the Bounty Hunter mobile site that hooks into StackOverflow looking for questions to answer, but the book covers a wide range of examples including building browser add-ons using jQuery and how to build your own jQuery (which introduces things like grunt.js, node.js, git etc.).

I am kind of cheating, because I was already aware of Dan’s writing and work so I knew that he knows his stuff, but you honestly do get the impression that a real expert in their field is writing this book, the way the information is presented shows that he has a deep and broad understanding of the subject material.

Something that I loved but that some might not was how involved the examples were, by this I mean that you could tell the feature or features an example was trying to explain and there are far more concise examples that could have been used, but they would either not have been as fun or wouldn’t have had a grounding in the real world.

One small niggle I have with the book is that the terminology for the sections within a chapter don’t suit my personality, subtitles like “Prepare for Lift Off” and “Engage Thrusters” belong more in the fluffy self-help books I love to read as opposed to a technical book, but I am fully aware the majority of people probably love that kind of stuff! Another tiny irk is that one of the examples talks about infinite scrolling, and I personally think that infinite scrolling is the devil!

My Conclusions

All in all I thoroughly enjoyed this book, and as someone who has been using jQuery in anger for a very long time I did come away haven’t learnt a truck load and I imagine you will too. One day I might write a blog post about the things I have learned from this book, in the mean time you should just go ahead and buy it!

jQuery HotShot Resources

Here are some resources you might find useful related to this review;

Share this on

Controlling a jQuery datepicker with Watir

In my last post I talked about some issues using a dropdown with Watir, the context I was using that in was to complete a jQuery datepicker field that contained both a year and month dropdown.

In case anyone needs the code to be able to do this with Watir Webdriver here it is;

@title = div(:class, 'ui-datepicker-title')
text_field(:class, 'datepicker').click
@title.select(:class, 'ui-datepicker-year').select_value('2006')
@title.select(:class, 'ui-datepicker-month').select('Jan')
table(:class, 'ui-datepicker-calendar').a(:class, 'ui-state-default').click

@title is just a container for the div that contains it.

The two lines with .select will change the value of the year and month dropdowns, there is an change event associated with these inside of jQuery so it will update the calendar automatically for you.

The final line is a bit of a hack because each day doesn’t have a unique id or class, in my test I didn’t really care about the day so I just picked the first standard weekday but you could use :index, 5 or something with the a function and play about to pick the appropriate day.

Share this on

jQuery Links

I will add to this overtime but this will be a dumping ground of useful jQuery links I have found.

Latest Edited: 06/02/12

Differences Between jQuery .bind() vs .live() vs .delegate() vs .on() – Exactly as the title suggests!

jQuery Fundementals Course – An excellent free course in jQuery by Rebecca Murphy, hosted on Github.

Share this on

Too many posts about the same thing on your Twitter timeline?

I was getting annoyed about the amount of posts about one particular topic on my timeline this morning and I decided I could fix the issue with some jQuery.

var term = $('.twitter-anywhere-tweet-box-editor').val();
$(".stream-item:contains('" + term + "')").css('display','none');

If you save it as a bookmarklet you can use this by typing the term you want to disappear from your timeline in the search box and then clicking the bookmarklet.

javascript:var term = $('.twitter-anywhere-tweet-box-editor').val();$(".stream-item:contains('" + term + "')").css('display','none');

That has no practical application really as it doesn’t persist over page reloads and only lets you do one phrase at a time, but it helped me vent some frustration at dumb tweets!

Share this on

Edit an option of a select menu using jQuery

I have read many articles that cover how to use jQuery to add and remove options from a select box but I couldn’t find one that covered how to edit an individual option.

I knew there had to be a way and the good people of Stack Overflow were able to answer my question.

Essentially what you need to do is use the option selector in order to grab the element you want, then it is fairly trivial.

$('#selectID option[value="knownValue"]').text('New Option Text');

So what we are saying here is for every element with the ID of ‘selectID’ look for an option with the value of ‘knownValue’.

Change the text of that option to ‘New Option Text’.

A use case for this (and indeed the reason why I was looking it up) is that if you have a collection of objects and you want to edit them dynamically by selecting them via dropdown then edit the fields you will most likely want to edit the ‘name’ field or some other field that represents the unique name which appears in the dropdown list.

If this is the case when you edit your name and hit save, assuming it is all done using ajax the value in the dropdown will no longer equate to the value stored in the database. This is a usability concern so you should use the method above to ensure that the option text of the dropdown gets edited accordingly.

Share this on