Recommended Courses- MongoDB University

Today we’re starting a new category “Recommended Courses” where I will suggest good online courses

MongoDB University - Free Online courses

MongoDB University – Free Online courses


From jQuery to javaScript: Translation Table

Currently I’m teaching “MarkUp Languages” and “Database Management” at l IES Triana . In the first one we go through a 128 hours introduction to web client development. A little amount of time and a lot of content to cover so we focus our efforts in HTML,CSS, jQuery and JavaScript

Even when jQuery is built over javaScript I begin explaining jQuery before javaScript. Why is this?:

  • You can do a lot of things with jQuery without knowing how to code.
  • jQuery selectors and CSS selectors are very similar and I start with jQuery just after finishing with CSS.
  • The syntax is shorter and simpler than javaScript’s syntax and that’s a big adventage for students without any previous coding knowledge. In fact nobody understands how could be created and Higher Professional Degree in System Administration without including an explicit programming topic (but that’s not my fault)

I offer a jQuery working   template to the students and they only have to write the jQuery for the required functionality here:

After doing a lot of effects and exercises with jQuery I begin with javaScript showing the correspondence between already seen jQuery structures and the similar javaScript sentences. Before that I  try to make crystal clear that jQuery objects are encapsulated javaScript objects with new properties and methods. For the moment I offer this translation table:

jQuery – JavaScript
$(” any selector”)
document.querySelectorAll(“any selector”)
$(“any selector”).eq(0)
document.querySelector(“any selector”)
document.getElementById(“someid”).value= somevalue;
$(“#someid”).html(“some text”)
document.getElementById(“someid”).innerHTML = “some text”
$(“#someid”).append(“Some text”)
document.getElementById(“someid”).innerHTML= document.getElementById(“someid”).innerHTML+”Some Text”
$(“#someid”).prepend(“Some text”)
document.getElementById(“someid”).innerHTML= “Some Text” +document.getElementById(“someid”).innerHTML
$(“#someid”).click(function (event) {
//Things to do});function myFunction(event) {//Things to do}<xxx id=”someid” onclick=”myFunction(event)” >$(“#someid”).on(“eventName”, function(event) {

//Things to do


<xxx id=”someid” onXXXX=”myFunction(event)” >

Not everything it’s here but it’s enough for starters.

If you need more info on events: jQuery events and javaScript events.

If we are getting more than one element with the selection ( we are only getting one with $(“#someid”) we should treat the array. For example, for the css() equivalence:

Remember, in order to understand this you must be fluent with selectors.More infor here.

And that’s all, see you in the next post.

Event workflow focus – input – change

In the  previous post  we learnt how to modify an image using the CSS transform property and an input range.

After the post I’ve been asked about how to achieve transforming the image while we are sliding the input range and not at the end when we finally finished the sliding movement.

I’m pretty sure that we can find several solutions for that, but using jQuery it’s quite simple and the only important thing is that we have to distinguish between 3 different events:

  • The focus event that happens when we select the form control clicking in it for the first time.
  • The input event that happens while we are sliding the control in an input range or when we are inserting a new value in another type of input.
  • The  chanve event that happens when we stop sliding or when we validate the value.

In fact the usual workflow when when slide is this one:

Focus - Input - Change

See a working example in this CodePen

See the Pen Focus – Input – Change by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

You can download the full code here.

See you in the next post. Remeber that I’m opened to suggestions if you wish some tutorial or course.

jQuery Pills VIII & CSS3 Transforms – Modifying an image using range controls

In this post we are going to use at the same time jQuery and one of the most expected features of CSS3, the transform property, that allows designers to transform HTML elements is almost any way they can imagine.

Being an expert on this property requires a lot of reading( MDN or W3C School ) and some geometry knowledge but, al least for now, we wil focus the effort in just 4 simple transformations:

  • The 2D rotation that allows us to rotate the elements clockwise. It has a very simple sintax:  transform: rotate(Xdeg) where X is the number of degrees to rotate. It can be positive (clockwise) or negative (anti-clockwise)
  • The scale transformation modifies the size of any HTML object. It also has a very simple syntax: transform : scale(x,y) where X is the X-axis scale factor and Y is the Y-axis scale factor. If Y is omitted we apply the same factor on both axis.
  • SkewX modifies the X perspective on the object we want to transform. We have to write down the amount of degrees of the transformation in the same way as we do in the rotate transformation: transform: skewX(Xdeg) where X is the degrees of the transformation.
  • SkewY modifies the Y perspective on the object we want to transform. We have to write down the amount of degrees of the transformation in the same way as we do in the rotate transformation: transform: skewY(Ydeg) where Y is the degrees of the transformation

Let’s picture live this 4 transfomations with an example using jQuery and where we will use input with type=”range” (sliders) to modify an image.


See the Pen Transforming an Image using CSS3 and jQuery by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Yo can download the full code here.

And that’s all for the moment. See you in the next post.


CSS3 – The animation property

CSS3 is a huge specification with a lot of new features. However, the most celebrated new possibilities are those related to animations and effects using only pure CSS3. Here we have  the list of properties that can be animated.

We will focus this post in the animation property and in writing the description of the animation inside the @keyframes rule.

Animation is the short for setting up all the possible subproperties of an animation:

  • animation-name: Animation to be applied. Animatons are detailed within @keyframes rules.
  • animation-duration: How long the animation is going to last.
  • animation-timing-function: How are the changes of the animation going to be applied. With the same speed during the whole animation, faster at the beggining or at the end..
  • animation-delay: Delay (in seconds) till the animation start.
  • animation-iteration-count: How many times the animation is going to be repeated. It can be a number or infinite if we want the animation to last forever.
  • animation-direction: In a normal way, in reverse, in alternates cycles etc..
  • animation-fill-mode: How to apply styles to the selected elements, before and after the execution of the animation.
  • animation-play-state: Pause mode or working. Obviously by default the animation is running.

Not always do we need to write down all the different subproperties. For example:

Regarding the @keyframes rules they are used to establish the different steps during an animation. We can express it in two different ways:

  • With from and to,  with initial and final values for the css properties.
  • Using percentages to set up as many points as we want.

Let’s see an easy example for each case:

Let’s picture it with a full example.

See the Pen CSS3 Animation Pulse Example by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

The full reference can be found at  MDN , and you can also find more info at W3C School.

The full code can be downloaded here



jQuery Pills VII – Selectors Resources List

In my opinion there is nothing more important in jQuery than knowing how to use selectors. It’s essential, we are going to lose a lot of time if we don’t use them in an right an efficient way.

If we are already fluent with CSS selectors everything is going to be easier, but it’s also true that being fluent it’s not easy to achieve and that we can’t pretend to explain everything in a single post. Therefore, our target in this post is to collect a list of interesting link related with jQuery selectors.

Links with references about selectors

Tools for practicing with jQuery selectors

VídeoTutoriales on jQuery selectors

Ans that’s all. In the next post we will play with new HTML5 elments like the sliders.

jQuery Pills VI – Context Menu

In the previous chapter we learnt, in a broad way and with two examples, how to treat keyboard and mouse event. Today we are going on with this topic..

One of the most common features in wep apps is the use of conext menus when we click in the mouse’s right button. It’s not that complicated but it can be tricky as the browsers also have their own context menu:

See the Pen jQuery (Capturing mouse right click but showing browser’s context menu) by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

We could think that ( as we are treating code 3 and  this code is reserved for mouse’s right button ) with this code our context menu is going to be shown but, by default, the browser’s context menu prevails. In order to avoid that behavior we can do the following (there are many other ways):


See the Pen jQuery (How to show a context menu in the right way) by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

The keys are:

  • Handling contextmenu instad of click
  • Write the code return false to avoid the browrser to treat the event ( it would be the same using both event.prevendefault() and  event.stopPropagation() )

And that’s all maybe a little bit tricky but so simple. In the post we are going to review jQuery Selectors on of the most important things if you want to be fluent in this technology.


jQuery Pills V – The event Object

The main point in using jQuery or another similar library is to be able to transform our,static by default  websites, in living and dynamic entities. In order to achieve that we must capture and handle events.

The list of events we can capture is long and can be found here, and for capturing them we can choose between two ways:

Note: name_of_event must be replaced by an specific event name.

Sometimes, in addition to knowing the type of event, we will need more info. This info is held in the event object that is passed as a parameter to the anonymous callback function that is executed once the event is captured. This event object contains a lot of useful and important information (the full reference can be found here) like:

  • : jQuery object where the event took place.
  • event.type: Type of the event
  • event.timeStamp: Information about the moment where the event took place.
  • event.which: Key or button used in keyboard or mouse events.
  • event.pageX: X offset, within the browser’s screen, where the event happened.
  • event.PageY: Y offset, within the browser’s screen, where the event happened. The origin of coordinates, point (0,0) is on the upper left corner of the browser

Let’s see how to use this information with two different examples; the first one will print on the screen the current position of the mouse pointer and the second one would allow use to move a div through the screen using some keys:

Let’s go with the first one, this time using codepen for showing the example working. The full code can be downloaded here:

See the Pen Mouse Movement by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

And the second example; moving a square through the screen using (s,z,x and c keys)

See the Pen Capturing Key events with jQuery and moving a div by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

And that’s all for the moment, in the next article we will explain how to display a context menu in our HTML webpage.


jQuery Pills IV – Three level nested menu

Fourth chapter on the jQuery serie.A very common usecase, a nested menu with three levels. The first level is horizontal, the second vertical and the last one is also showed in an horizontal way. Exactly as the image below:


The full code can be downloaded here aquí:

The HTML tree is very simple:

The CSS stylesheed

And the most importan part, the script defining the behavior:

That’s all. On the next chapter we will be working with event object properties.

jQuery Pill III – Vertical Accordion

Here it is the third post on the jQuery Pills serie. Today we are going to create a vertical accordion, something similar to the image we can see below. Our target is to expand the section when the section’s header is clicked and collapse the other sections’ content at the same time:


The full code can be downloaded here.

The HTML code is very simple:

The corresponding DOM tree, very useful to know if we are going to use jQuery is like that:


The CSS stylesheet:

And now the most importante part, the jQuery Script:

And that’s all. The next post ” A nested menu”.