Category Archives: JavaScript

How to accurately detect responsive breakpoints

How to accurately detect responsive breakpoints

I recently had to detect in Javascript which responsive “state” a page was rendered. For instance, I had to detect that it was rendering the mobile phone state, which was the @media(max-width: 767px) breakpoint in CSS.

I wanted to do it with $(document).width(), but sadly, the jQuery width() method didn’t return the correct width of the screen, because it wasn’t counting the scrollbar, but CSS is.

The problem with scrollbars

The scrollbar is an OS and often theme-specific GUI element. It has not a fixed, concensual width. And unfortunately, $(document).width() does not take the scrollbar width into account.

We could use some hacks like $(document).width() + any_amount, but it would not work correctly because scrollbars don’t have the same width everywere. Some screen widths would end up in an incoherent state. See this JSFiddle for an example.

The solution : use CSS to detect the breakpoints

I found out this little hack and though it would be interesting to share. Instead of using $(document).width(), we should use the @media query somehow to get the responsive “state” of the CSS. This way, we cannot be wrong.

A simple CSS rule and a hidden div can do the trick :

<div class="responsive-state">
.responsive-state {
    width: 10000px;
@media (max-width: 767px) {
    .responsive-state {
        width: 767px;
@media (min-width: 768px) and (max-width: 1024px) {
    .responsive-state {
        width: 1024px;
function responsive_state()
    return $('.responsive-state').css('width');

A demo can be found here on JSFiddle.

For each responsive breakpoint, its maximum width is set as the width of .responsive-state. This way, calling responsive_state() will always return a different width for each responsive “state”. Using this value, you can detect the responsive state accurately. You don’t have incoherent state anymore.

Stronger passwords with GreaseMonkey

Stronger passwords with GreaseMonkey

Using the same password on every website is dangerous. We all know it. But we couldn’t afford to think up a different one every time : it would be impossible to remember them all. The solution I present here is a good way to reuse your “main password” (we all have one :-)) with a better security level. I also propose a GreaseMonkey Javascript code that automatize the process.

I have read some month ago a very interesting post about it, but sadly I did’t find it back. However, the idea in the article is the following : keep your main password in every site, but add “salt” based on the domain name.

Let me show you an example : let’s say that your password is ‘ilovecats’, and you want to register at

  1. Take the five first letters of the website : “youtu”,
  2. make some permutations on them – for example, make them uppercase : ‘YOUTU’,
  3. prefix it to your main password.
    The password for becomes : ‘YOUTUilovecats’.

This idea is great ! With training, you won’t have to bother about remembering many different password. Also, you get a stronger password, since it is longer than your main password. The only thing you have to be sure is not to forget what permutations you did. Write it down somewhere maybe (this is anyway safer than writing all your passwords somewhere. If someone reads your permutations method, you don’t care : he still doesn’t know your main password ;-))


Going more geeky

I’m using this method since the day I learned it. But as my friends know, I’m a bit lazy : I don’t want to write my permutation every time I have to log in (beside, my permutation is quite complex to mentally process). So, I wrote a small piece of Javascript to use with GreaseMonkey. This script searches for every password field on a website, and adds the five first letters of its url, with a permutation. You can change it by yourself if you want.

The permutation used in the file is the following :

  1. Take the five first letters of the url (after the ‘www.’),
  2. add one to each letter, so that a become b, b becomes c, …, z becomes a,
  3. make the result uppercase,
  4. prefix it to your main password.

Again : don’t forget the permutation that you are using !! Remember that if you want to log in on a computer that is not your own, you will have to do the permutation by yourself !



  1. Firefox users : Download GreaseMonkey if you don’t have it yet :
  2. Download the Javascript file here; GreaseMonkey should ask you to install the file.
  3. Once installed, every time you will click on a password field, the five first letters of your password will show up; just add your main password. Congratulations, you have a stronger password with almost no effort.

Source code

// ==UserScript==
// @name           Stronger Passwords
// @namespace      *
// @description    Get the first five chars of the domain name and prepend it to every password field of the page, with a permutation
// ==/UserScript==

  //Extracting the first five letters
    var host = window.location.hostname;
    var domains = host.split('.');
    if (domains.length <= 2)
      host = domains[0];
      host = domains[1];

    host = host.substring(0,5).toLowerCase();
  //Extraction done

  //Building the 5 first chars
  // You can change the code here to use another permutation.
  // The five letters are stored in the variable host and the
  // code below must build a variable names prefix which
  // contains the permutated string
    var prefix = "";
    var acode = 'a'.charCodeAt();
    var zcode = 'z'.charCodeAt();
    for (var i=0; i!=5;++i)
      var c = host.charCodeAt(i);
      if (c >= acode && c <= zcode)
        c -= acode;
        c  = (c+1)%26;
        c += acode;
      prefix += String.fromCharCode(c);
    prefix = prefix.toUpperCase();
  //Chars built

  //Appends the five letters to every password field when you click them
    var inputs = document.getElementsByTagName('INPUT');

    for (var i=0; i!=inputs.length; ++i)
      if (inputs[i].type=="password")
        var input = inputs[i];

        input.addEventListener('focus', function(event)
        }, false);
 //Append done
}, 1000);
Fabric Engine, the new Flash Killer ?

Fabric Engine, the new Flash Killer ?

Everyone that has followed HTML5 a bit knows that, in term of performances, Flash is still better… But it could change.

HTML5 vs Flash
HTML5 vs Flash; source :

I deeply think that HTML5 is going to kill Flash. It’s open, it’s widely adopted by developers, and it’s totally free. Even Adobe knows that : they already stopped developing flash for mobile. The only things remaining for Flash is the speed : it is still faster than HTML5.

But the Fabric Engine may be going to change that. Technically, it is a plugin for Firefox and Chrome – maybe it will be released for Opera, but I doubt that it will for IE – that literally compiles JavaScript code to make it run faster. This is open source – Flash is not – easy to install, and multi-thread.

Fabric Engine
Fabric Engine
For now, it is only in beta testing, I suscribed to the beta testing group. I didn’t try it yet, but I looked at the demos and I think this has great potential.
I highly encourage every Web developer to take a look at this plugin.

Sources :

Large Scale Javascript Architecture

Large Scale Javascript Architecture

[slideshare id=10198269&doc=jquerysummitshare-111117040722-phpapp02]

Developers creating JavaScript applications these days usually use a combination of MVC, modules, widgets and plugins for their architecture. They also use a DOM manipulation library like jQuery.

Whilst this works great for apps that are built at a smaller-scale, what happens when your project really starts to grow?

In his talk, Addy Osmani present an effective set of design patterns for large-scale JavaScript (and jQuery) application architecture that have previously been used at both AOL and Yahoo amongst others.

You’ll learn how to keep your application logic truly decoupled, build modules that can exist on their own or be dropped into other projects and future-proof your code in case you need to switch to a different DOM library in the future.

Source : Addy Osmani’s Blog