How to access inspected element in browser console

Today I would like to share a very useful trick I learned the other day – how to access previously inspected element in browser console.

Web developers do inspection on web pages almost all the time – Find the ID of an element? Inspect it. Find the size of an element? Inspect it. Find the type of an element? INSPECT IT!

1

Once you get what you want, often times, the next step would be to manipulate it with JavaScript, right? Some developers, including myself, like to test the JavaScript in the browser console first before putting it in the code. To find the inspected element, are you still using getElemenetById or using jQuery’s ID selector? These are NOT very productive! You have inspected the element already, so the console should know what element you are looking for, right? Yes, it does! Just type in $0 (dollar sign and zero), and hit Enter. It will get you the element you just inspected:

2

Now you can do all kinds of things with this handle. To demonstrate this, I just used jQuery to hide the element inspected.

3

Hope you find this trick useful!

Fade in and fade out elements with jQuery

As a mostly backend developer, I am shocked at how long it could take to adjust page layout and transition with CSS/jQuery and try to learn the stuff on the go. I have struggled for probably an hour just to get a logo to display the transition effect that when you move the mouse closer, it turns to a menu button.

So I setup a div containing both the logo and the button, using jQuery’s fadeIn and fadeout method to hide the logo and show the menu button when the mouse moves into this div, and show the logo and hide the menu button when it is out.

<div id="toggle">
   <div id="logo"></div>
   <div id="menubutton"></div>
</div>

And I want one to disappear first before the second shows up. So in the Javascript code, I does this, which is causing problems.

$('#toggle').hover(function() {
    // After logo fades out, fade in the menu button
    $('#logo').fadeOut("slow", function(){
    $('#menubutton').fadeIn("slow"); 
    });
}, function() {
    $('#menubutton').fadeOut("slow", function(){
      $('#logo').fadeIn("slow"); 
    })
});

The problem here is that if you move quickly inside the interactive zone and move out quickly, jQuery will have some weird behavior. This is what I think is happening.

  1. Mouse moves in,
  2. Logo fades out, menu button is going to fade in next,
  3. Mouse moves out,
  4. jQuery tries to fade menu button out, but it is not there yet, so jQuery thinks it’s faded out already, and starts to fade in the logo.
  5. menu button now fades in
  6. So both menu button and logo are shown.

A live demo is here.

So I have to give up the ability to hide one first and then show the second because of this. Here is what I come up with.

$('#toggle').hover(function() {
    $('#logo').fadeOut("slow");
    $('#menubutton').fadeIn("slow"); 
}, function() {
    $('#menubutton').fadeOut("slow");
    $('#logo').fadeIn("slow"); 
});

However, this solution is not complete, because jQuery queues up animations. Moving in and out quickly a few times and you will see the queued animations are being executed after you stop.

A live demo is here.

At this point, what we need to do is just to stop jQuery executing queued animation, which is made easy by the stop() method.

So here is a complete solution for this. I also replaced fadeIn and fadeOut with fadeTo. But both work.

A live demo is here.

$('#toggle').hover(function() {
    $('#show').stop().fadeTo("slow", 0);
    $('#hidden').stop().fadeTo("slow", 1); 
}, function() {
        $('#hidden').stop().fadeTo("slow", 0);
    $('#show').stop().fadeTo("slow", 1); 
});
#toggle {
  border-style:solid;
    border-color:black; 
    height: 200px;
    width: 400px;
}

#logo {
    position: relative;
    float:left;
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    background: blue;
}

#menubutton {
    display:none;
    position: relative;
    top: 0;
    left: 200px;
    height: 200px;
    width: 200px;
    background: red;
    z-index: -1
}
<div id="toggle">
   <div id="logo"></div>
   <div id="menubutton"></div>
</div>

Note that using CSS to change the opacity of the elements can achieve the same thing with, though not much, a better performance, but I would prefer to just use jQuery to solve a problem as simple as this and it provides a better cross browser support.

RequireJS jump start

It’s surprising how many senior JavaScript developers don’t know anything about JS Modular Programming. But come to think about it, if my code is working, why do I bother to learn all these AMD, CommonJS, RequireJS stuff? But once you understand it, JS modular programming really makes a big difference. Your code becomes much cleaner and it will require less effort to maintain.

There are many documentations regarding AMD and RequireJS out there. Here I just wanted to provide a quick start guide on RequireJS so people can start using it quickly and find out the rest 90% of the information later.

First let’s briefly talk about the problem we are trying to solve – say we have some code in a .js file that is referenced by a script tag in a HTML page and it defines a few variables and functions. All these stuff will be placed into the global variable set, which is very likely to cause naming conflicts when the project size gets bigger.

That’s why people invented Module Pattern to help encapsulate JS code and reduce the need for creation of global variables. An simple example:

(function (){
   // Now we have a private scope
   var localVar ={};
   function localFunc () {}

   // 'output' a function into global
   this.globalFunc = function(){
       // both localVar and localFunc are available.
   };
}());

In the example, we created a anonymous function block (i.e. anonymous closure) where we can create variables available locally to a global function, globalFunc. However this is still not optimal because it defines a global variable within this block on which the code references it has no control.

Besides this global pollution issue, we also have a dependency issue. Using script tags to load scripts, we have to make sure dependencies are loaded in the correct order. For example, Backbone cannot be loaded before jQuery.

These are the 2 major issues I want to resolve using RequireJS. Now let’s start using RequireJS!

First download Require.js

Create a config file for RequrieJS for easy configuration

/src/requiresjs/config.js

require.config({
  // Set up base path on which the rest of the paths are based
  baseUrl: "../..",
  paths: {
    // This defines where your dependency is.
    // Note that file extension is not needed.
    jquery: "scripts/jquery/jquery",
    // backbone and underscore won't work just like this, but we will get to it later.
    backbone: "scripts/backbone/backbone",
    underscore: "scripts/underscore/underscore"
  }
  // This defines the startup script of your application.
  deps: ["src/main"]
});

Then in your main html page, add just one script tag. Just specify the path of RequireJS and set the path of the config file in the data-main attribute. What this does is to allow RequireJS to find the config file and start your main.js script specified in the config file.

/src/pages/index.html

<script type="text/javascript" src="/scripts/requirejs/require.js" 
data-main="/src/requirejs/config">
</script>

In your main.js file, define a module.

/src/main.js

define(["jquery", "underscore", "backbone"], function($, _, Backbone) {
  // The first array argument includes the path variables defined in the config file.
  // The second argument is a definition function that accepts modules as arguments.
  // It will be called after all the modules in the first argument are loaded.

  // Now you have variable $ for jQuery, _ for underscore, and Backbone for backbone.js
});

The example shows that RequireJS allows us to load a module in js code at the time we need it, and we have full control on what variable name it should be assigned to. Moreover, it automatically loads all the dependencies of the module before it is loaded.

Back to our config file, the setup for backbone and underscore is not complete, because they are non-AMD scripts. Simply put, they didn’t follow AMD standard to define themselves. For these modules, we need to add in the config file a shim configuration.

/src/requiresjs/config.js

require.config({
  baseUrl: "../..",
  paths: {
    jquery: "scripts/jquery/jquery",
    backbone: "scripts/backbone/backbone"
  },
  shim: {
    backbone: {
      exports: "Backbone",
      // Specify the dependencies of backbone
      deps: ["underscore", "jquery"]
    },
    'underscore': {
       exports: '_'
    }
  }
  deps: ["src/main"]
});

Now the configuration and the example are complete.

Note that there is another way to define your module. I prefer this approach just because it looks more straightforward. It is called CommonJS style definition.

/src/main.js

// just pass in a require argument, it will work.
define(function(require) {
  // find modules' paths using the variables defined in the config file
  // and put it in a local variable.
  var $ = require("jquery");
  var _ = require("underscore");
  var Backbone = require("backbone");
});

There is much more about RequireJS and AMD in general that one can dig into. I recommend to read more from RequireJS’s site, but hopefully this gives you a general idea of modular programming and something to start with.

Responsive Web Design: Serving Images Efficiently

Delivering images with the right resolution to different client resolutions is a basic of the responsive design of web applications. There are a few ways to achieve that, one of them being using the Media Query of CSS, but in this blog post I am going to present a different approach – Severing images with JavaScript.

I believe I learned this trick from ASPConf. Forgot the name of the speaker, but he is a talented guy!

First, add to the img DOM a separate attribute for the URL of the image for each resolution.


<img regularSrc="LowResImgURL"  retinaSrc="RetinaImgURL" />

Then in $(document).ready, use the following code to serve the correct images to the client, which sets up the src attribute of img DOM with the correct URL at run-time.


$("img").attr("src", fucntion(i, val){
var $this = $(this);
if(isRetina){
return $this.attr("retinaSrc");
}else{
return $this.attt("regularSrc");
}
});

Easily display loading animation with jQuery

Giving users a proper feedback is one of the most important design items toward a good user experience. Showing the user a loading animation such as a loader or spinner after a request is submitted is something we see quite often. So how to add a loading animation to your own web site? Hopefully the following tutorial can give you a jump start.

First, find a loading animation that suits your need. This Ajax loading GIF generator is a good option to find a decent GIF image. Or you could go for a pure JS and CSS loading animation like the ones in the Collection by Tim Holman.

Then put the animation on the same page where you want to show it and hide it.

Lastly, use the following codes that show the animation whenever an ajax call has been initiated and hide it when finished.


$(document).ajaxStart(function () {
 $YourLoadingAnimation.show();
 }).ajaxStop(function () {
 $YourLoadingAnimation.hide();
 });

References:

jQuery API – ajaxStop

jQuery API – ajaxStart