Quick reflection and my first experience with jQuery

I am halfway through Week 7 at Makers and I could not feel any better about my learning so far. The first four weeks (and the whole precourse) were devoted to Ruby and to learn the basics of programming. We switched from Ruby to JavaScript on Week 5 and, honestly, I have the feeling I can learn anything.

Picking up JavaScript from pretty much zero language knowledge was utterly satisfying and has definitely translated into a confidence boost.

I have to admit that asynchronous processes still scare me, but I firmly believe it is all about getting used to the beauties and complexities of the language.

One of the things that has caught my attention the most has been jQuery and its power.

jQuery

jQuery is a quick and condensed JavaScript Library that comes with a motto that is a perfect representation of reality: Write less, do more.

jQuery’s core idea is to make web development more agile by speeding up several processes like HTML document traversing, among others.

You can find more information about this library on their website: http://jquery.com/

In my opinion, these are the main reasons to use it:

Reuse of CSS Selectors

To execute a task, you will choose elements based on the same selectors as CSS. For example, you use ‘.’ for classes and ‘#’ for ids. Some quick examples below:

Quick example on jQuery selectors

These two selectors are probably the ones you will use the most, but feel free to explore this jQuery Selector Tester and play around with it a bit to get more familiar with them and explore all the options you have at hand.

Short Learning Curve

This is due to its simplicity. You do not need to know many (not to say any) of the things that are happening under the hood (probably in the form of endless JavaScript functions).

Most likely, in a matter of 2–3 hours you will be confident using jQuery and will start benefiting from it.

Chaining pattern

This is one of the most powerful features I have come across using jQuery. It is as simple as it looks to execute different tasks one after another by simply calling jQuery methods on your selectors one after another, as shown below:

A concatenation of jQuery methods

Outstanding Documentation

If you want to get a solid grasp of it, you can find more detailed information on the jQuery Learning Center.

How to import jQuery

There are several ways of importing the library to use it in your project:

  1. Installing it locally

You can download jQuery locally into your machine and load it in your HTML file. However, I strongly recommend the second option.

2. Using a CDN

I recommend this option. CDN stands for content delivery network, which is a system of servers that delivers Web content to a user and, most importantly, it does it based on his geographic location, among other factors.

The main advantage is that if we create a project that another user from far away wants to use, he will be able to load it faster by using a CDN compared to having to load it from our local machine.

3. Using a Package Manager

A last option worth mentioning would be to use a package manager such as Bower or npm.

For example:
$ npm install jquery
Or:
$ bower install jquery

For more information about downloading jQuery (or if you want to find out more about the CDN option), visit this link.

Useful jQuery plugins

It is really easy to increase website function by using plugins designed specifically for jQuery. The following are some of my favourite ones:

Tabslet

This plugin gives you a lot of freedom when it comes to customising your tabs. It is supported by most browsers (yes, even IE7+) and is really fast. It is also easy to pick up. You can find more information here.

Nanogallery2

Not only developers will love this one, but also designers. Thanks to this plugin, you can create advanced and high-quality image galleries. Check out some examples.

Chosen

This one is a must on my list. With Chosen, you allow the user to filter a dropdown list based on his input. Really useful when you come across a dropdown with pretty much every country in the world, right? What are you waiting for to explore more about this awesome plugin?

And there are so many more awesome plugins out there. With a quick Google search you will get everything you need for your website.

An example using jQuery

To illustrate the power of jQuery, I created a quick example of a counting game to teach children the numbers from 1 to 10.

Counting game image displaying first square

Out of curiosity, the background was much darker than what you see on the image above. A cool trick to lighten it and make the text stand out is to use one of these two CSS properties: background-blend-mode or opacity.

Congratulations on finishing the game!

How is this achieved? You may think we need to create a bunch of tags that look pretty similar as they contain similar data, but the reality is quite different…

Pretty empty HTML doc

As you can see, the numbers div is completely empty! This is everything I need in my HTML document, everything else is handled by jQuery, which is in charge of populating the doc based on the user’s behaviour. One frame with a new number is generated after each click on Next Number.

Where the magic happens…

This code can be summarised in two parts:

  1. Each time the button is clicked, append a new row into numbers, then add 1 to the index value
  2. If the index value reaches 10, hide the button, so we can not (and should not) generate number 11 as per the purpose of the game

I hope you enjoyed this brief introduction to jQuery and that you feel encouraged to try it yourself and, hopefully, you will get to enjoy it as much as I do!

Keep posted for next week… Ruby on Rails is coming!

Do not forget to follow me not to miss future posts and, as usual, claps are highly appreciated!