FEO Basics

• Limit the number of HTTP request Compile your CSS & JS if possible (using Grunt, the CMS, the Framework, ...)
• Minify your files. Minify the CSS & JS (using Grunt, the CMS, the Framework, ...) Do not write code that is already minified ! Think about the maintenance
• Styles on top, JS on bottom When the browser loads JS, it stops the parallelism to prevent issues because the JS should be loaded in the apropriate order (ex : framework first) Exception for browser compatibility scripts as Modernizr or html5shiv
• Use sprites Instead of loading many images, you only have one http request The sprite will be in browser cache for all the pages

FEO advance

• Use Gzip Gzip all the text elements (CSS & JS at least)
• Use parallelism Use many subdomains. Your browser will limit the number of requests to the same domain at the same time Using many domains allow you to multiply that limit by the number of domains
• The CSS must be served early Do not use parallelism on CSS !
• HTTP request & DNS lookup Limit the http request as much as possible (compilation) Limit the DNS lookup (multiplicty of domains) There is no contradiction with parallelism, you must adapt to your context
• DNS & Assets prefetching A DNS request is from 30 to 200 ms. Usually more than 100ms and in the worst case half a second ! Do only prefetch a page if there is a high chance for the user to go on this page (using meta rel="next" as an example) Prefetch the sprites (if many). It can be a good start to prefetching <link rel="prefetch" href="http://www.mondomaine.com/autre_page.html"><link rel="prefetch" href="http://www.mondomaine.com/autre_feuille_de_styles.css">

FEO more...

• Do not use .htacess (or web.config, ...) Use "Directory" to not slow down your Apache
• Minify all of what you can even HTML & SVG !
• Gzip all the text elements including text assets as SVG !
• Use apropriate image format JPG, PNG, webP, SVG, ... As an example, "appropriate" means : Do not use SVG if old browsers are in your scope...

Some HTML5 cool features :

JS side :

• Full screen API
• X-speech
• Local Storage
• IndexedDB (except on Safari, sad...)
• WebRTC (Real Time Web)
• Battery Status API
• Vibration API(except on Safari, sad...)
• Using geolocation
• and more new standard features in progress !

CSS side :

Be very careful if you use these features, take care of the browser scope !

• CSS calc()
• CSS Grid Layout
• CSS regions
• and more new standard features in progress !

More :

Even Http headers are changing !

• Content Security Policy

  Content-Security-Policy: script-src 'self' https://apis.google.com

  Protect to XSS, exception made for some domains as "self" & "apis.google.com".
• X-FRAME-OPTIONS Make the content unable to be loaded on an iframe.
• and more new standard features in progress !

Here is an example of a new kind of web app using WebRTC & X-speech : Talkshow

Time to review code

Context

Using jQuery, you will have two dropdowns The items of the second one depend of the current selected item from the first one The datas are provided by a JSON/REST webservice

The following code is issued from a real project source code history

The commits are scheduled on several days, that means it seems to be a big job

V1

35 lines of code

; (function ($) {
    $.fn.listbox = function () {
        this.each(function () {
            $(this).bind("change", listBox);
        });
        return $(this);
    };
    function listBox(events, object) {
        var trigger = events ? $(this) : object;
        var source = trigger.attr("data-listbox-source") == "" ? $(this) : $(trigger.attr("data-listbox-source"));
        if (trigger.attr("data-listbox-target") != "") {

            var target = $(trigger.attr("data-listbox-target"));
            var url = trigger.attr("data-listbox-url");
            $.ajax({
                url: url,
                data: { id: source.val() },
                success: function (data) {
                    format(target, data);
                }
            });
        }
    }
    function format(target, data) {
        target.empty();
        $.each(data, function (index, item) {
            target.append("<option value='" + item.Value + "'>" + item.Text + "</option>");
        });
    }


    $(document).ready(function () {
        $('select.listbox').listbox();
    });
})(jQuery)

V2

45 lines of code

; (function ($) {
    $.fn.LinkedListbox = function () {


        function linkedListbox(events, object) {
            var trigger = events ? $(this) : object;
            var source = trigger.attr("data-listbox-source") == "" ? $(this) : $(trigger.attr("data-listbox-source"));
            if (trigger.attr("data-listbox-target") != "") {

                var target = $(trigger.attr("data-listbox-target"));
                var url = trigger.attr("data-listbox-url");
                $.ajax({
                    url: url,
                    data: { id: source.val() },
                    success: function (data) {
                        format(target, data);
                    }
                });
            }
        }

        function format(target, data) {
            target.empty();
            if (data.length > 0) {
                target.removeAttr('disabled');
                $.each(data, function (index, item) {
                    target.append("<option value='" + item.Value + "'>" + item.Text + "</option>");
                });
            } else {
                target.attr('disabled', 'disabled');
            }

        }

        this.each(function () {
            $(this).bind("change", linkedListbox);
        });
        return $(this);
    };


    $(document).ready(function () {
        $('select.listbox').LinkedListbox();
    });
})(jQuery)

V3

... each release doesn't matter ...

I will not review the code but talk about the main frame

Hold on, look at the contrib first !

Crap ! Your function name already exists : plugins.jquery.com/listbox/

A simple search : "select ajax" on plugins.jquery.com.

Uh ! I guess it already exists... it's at least very close : plugins.jquery.com/chained/

I can try the demo to be sure that this is what I need No, try the demo, it will make sure that it's what you need and looking at the demo code will save your time the first time

I've just saved my time and the code is already tested and documented ! Using apropriate search, I've spent less than 10 minutes (including testing)

Now, look at the code

; (function ($) {
    $.fn.listbox = function () {
    };
    function listBox(events, object) {
    	var trigger = [...];
    }
    function format(target, data) {
    }
    $(document).ready(function () {
        $('select.listbox').listbox();
    });
})(jQuery)

Oh ? any comments ? so sad...

A variable named "trigger" ? It's a little confusing, isn't it ?

You can see the developer has taken some time to look at the jQuery doc : "How to made a plugin". but...

These functions are not part of the plugin... take care of common names such as "format", some other tool may use it...

The event listener is part of the plugin ? What happens if you want to use it elsewhere ? use AJAX ?

Did you think about it : could it be on multiples elements ? Will the event affect a single one or all of them ?

Now, look at the code V2

; (function ($) {
    $.fn.LinkedListbox = function () {
        function linkedListbox(events, object) {
        }
        function format(target, data) {
        }
    };
    $(document).ready(function () {
        $('select.listbox').LinkedListbox();
    });
})(jQuery)

Still no comments...

Now the functions are part of the plugin itself. No risk of conflict

There is finally a V3 for having a single event listener out of the plugin :

    $(document).ready(function () {
        $('select.listbox').on('change', function() {
            $(this).LinkedListbox();
        });
    });