This was the first I read something from the Packt Hotshot series, so I wasn't sure what to expect. For those who haven't tried this series let me explain a bit about them. All of this is more or less logical assumption by checking the table of contents for other books in the series (it's just a way my mind works, I take small pieces of information and then try to connect them together, much more fun and keeps cogs in my head sharp). In my opinion Hotshot books are somewhere between regular books (where you have a project an add more features with every chapter) and cookbooks (where you have a bunch of recipes to expand your project). Hotshot books give you a few projects (it varies but mostly 8 or 10) concentrating on some topic, but the end result is a project which with a few more additions can be made to a production application. The books have an interesting format by splitting the projects into sub-chapters like Mission Briefing, Mission Accomplished, Classified Intel and tasks to complete for each project. If you have a mind which manufacturer forgot to refurbish (yes I'm pointing at you mother Nature) or an overflowing imagination, the learning can be very fun. Just image you're a secret agent disarming an atomic bomb by sliding a puzzle or a cowboy ready to show his skills by gunning down a few bounties on Stack Overflow, or whatever rocks your boat. At the end of each project there is a few ideas provided how it can be expanded, but it's left for the reader to add those changes (even after finishing school homework keeps following you around).
OK, lets get back to the book. The book starts with a common stuff like reviewers, introductions, conventions, errata and so on. So if you have read a Packt book before and itching for knowledge you might skip to the first project.
The book is very well written and easy to follow, so if you decide to type the code yourself, you will have no problems knowing how the files should be named or where to add new code. But you will probably want to download the source code as most of the projects use common stylesheet, images or some other assets (or you will have to get creative, it's always possible to find a way around then you need it). Code is easy to understand with detailed explanations after each task, but if you never tried jQuery before, you probably should read a book or a few tutorials about basics of jQuery.
jQuery Hotshot book has the following projects:
- Sliding Puzzle - shows how to build a sliding puzzle game using jQuery & jQuery UI (draggable). It also adds a sprinkle of
localStorageAPI for keeping some data and explains a Fisher-Yates shuffle algorithm for randomizing puzzle pieces. We will probably see a big jump of sliding puzzle games in Facebook from now on.
- A Fixed Position Sidebar with Animated Scrolling - is a project which improves user interface by adding a fixed navigation. The project focus is on CSS, events (like
resize) and animations. The page scrolls to the last position after reload for improved usability.
- An Interactive Google Map - creates an interactive map using Google Maps API. Some of the tasks covered in a project: creating a map, adding markers, adding info window, getting an address and calculating a distance between two points. In my opinion in this day and age with geolocation and powerful smartphones, learning how to use Google Maps API is a must, as it can be used in your application to make it interactive for the end users.
- A jQuery Mobile Single-page App - introduces you to jQuery Mobile framework. If you think about making a mobile application you should definitely give jQuery Mobile a try. Project gives you an intro into how to structure your mobile application, how to get data from Stack Exchange API and then how to use JsRender template engine.
- jQuery File Uploader - creates a configurable jQuery plugin which will let you to upload files to your server using AJAX. Project uses jQuery for file uploads, jQuery UI for progressbar widget and HTML5 for working with files. The project concentrates on what can be done, so it will not work on all browsers and these tasks are left for the reader to implement. It's a great starting point if you want to create your own file uploader or just learn how they work.
- Extending Chrome with jQuery - explains how to create a Chrome browser extension. During the project you create an extension which collects microdata from pages and uses
localStoragefor saving to make something similar to the address book. I found this project quite interesting and probably will have to look for more information about this topic as it opens a lot of new ways for applying your web development knowledge.
- Build Your Own jQuery - takes you through steps of building a custom version of jQuery. At first it explains how to install (instructions are for Mac and Windows) required tools which includes Git, Node.js, Grunt.js and QUnit. After you have all the requisites the project shows how to build a custom jQuery version from source. You might be wondering what is the point then only a few clicks are needed to download it from a website, or even better, one copy-paste routine later your project already loads it from CDN. Well I haven't had a chance to use this for a project, but I started using dependency manager for PHP and it's bliss then after one command you have all the needed packages with the latest version.
- Infinite Scrolling with jQuery - explains how to add another user interface feature - infinite scrolling. Adding this feature to your projects is very easy and takes only a few lines of code. Most of the project in the book is spent explaining how to get data from YouTube using AJAX. After all the rendering is done so page will have enough content for infinite scrolling to make sense the code to create a scroller is added.
- A Sortable, Paged Table with Knockout.js - shows how to build a dynamic application which stays in sync with data. This project uses Knockout.js which is an MVVM (Model-View-View Model) framework. A great thing about using Knockout.js is what your data and UI always stays in sync, so if you change your data, UI will automatically update itself (it also works the other way around). If you're are thinking about creating a dynamic application it would be really useful to get a better understanding of it and you won't need to write scripts for DOM manipulations and getting server side rendered content through AJAX.