lint CSS code

What is "linting" ? Programming languages can all be validated against its syntax reference, but nothing can prevent you to write bad code. Fortunately many common errors can be found in compile time, and especially if we are talking about non typed languages like javascript or CSS. So that's a linter, a compile-time program used to indicate possible mistakes or bad practices detected in our sources.

Today I'm happy because I've found a CSS source code linter recess that seems to be very nice, or at least it has philosophical posture about CSS very similar to mine and this is, in general the principles of Object Oriented CSS.

The CSS linter I've found is developed (and used) for bootstrap 3. I liked all the suggestions the linter tells me but the "Incorrect property order" so I disabled it (yes, there is a correct property order inside a CSS rule definition! ):

#install it
sudo npm install recess -g
recess all-my.css --strictPropertyOrder false

And the best part, it seems to work nicely with less sources
recess all-my.less --strictPropertyOrder false

Also, recess can be used for CSS minification and indentation or formatting of CSS. 

Load javascript or css dynamically in javascript

Loading Javascript or CSS dynamically in a DOM with pure JavasScript

If for some reason you need to programatically load some javascript or css stylesheet in the document, here is some code that helped me and seems to work fine in most browsers.

/**
 * loads javascript file or css stylesheet in current document. Usage Examples:
 * loadFile("www.server.com/file1.js", "js", function(){ alert("file1.js
 * loaded!"); });
 * 
 * @param name :
 *            the url of the resource to load. I think there is no cross site
 *            problems here.
 * @param type :
 *            "js" or "css". if "js" then a new javascript script will be loaded
 * @param listener
 *            an optional function that will be called when loading of the
 *            resource is ready.
 * @author: sgurin
 */
var _loadF = function(name, type, listener) {
 var el = null;
 if (type == "js") {
  el = document.createElement("script");
  el.setAttribute("type", "text/javascript");
  if (listener) {
   el.onreadystatechange = function() {
    if (this.readyState == 'complete')
     listener();
   };
   el.onload = listener;
  }
  el.setAttribute("src", name);
 } else if (type == "css") {
  el = document.createElement("link");
  el.setAttribute("rel", "stylesheet");
  el.setAttribute("type", "text/css");
  el.setAttribute("href", name);
 }
 document.body.appendChild(el);
}

An example usage:

_loadF("http://code.jquery.com/jquery-2.0.0.min.js", "js", function(){
 //jquery loaded to current DOM window and ready to use
 $("p").click(function(e){
  alert("p clicked"); 
 });
}); 

Example where this can be useful

Some exentric programmers / web application need a javascript application to be loaded into the current document. This is often accomplished setting current web address to a "javascript: " prefixed address that execute some javascript code in the context of the current document or using firebug / chrome development console.

In this modality, the given javascript code will execute in the context of the current document, being able to show new visual components or even modify the current document. Here it is nice to have a short function that is capable of loading both javascript or css into the current DOM so we can use these libraries in this kind of programs.

Other example, paste the folowing into firebug/chrome devel console:

var _loadJs = function(name, listener) {
 var el = document.createElement("script");
 el.setAttribute("type", "text/javascript");
 if (listener) {
  el.onreadystatechange = function() {
   if (this.readyState == 'complete')
    listener();
  };
  el.onload = listener;
 }
 el.setAttribute("src", name);
 document.getElementsByTagName("head")[0].appendChild(el);
}; 
_loadJs("http://code.jquery.com/jquery-1.9.1.min.js", function(){
 alert("this document has "+$("p").size()+" paragraphs. "); 
}); 

Script for dynamic JavaScript and CSS loading

With the following script, you can easily load javascripts and css files dynamically and asynchronously of course:

/**javascript and css loader
 * @author: sgurin
 */
(function(){
 
var _loadF = function(name, type, listener){
 var el=null;
 if (type=="js"){ 
  el=document.createElement("script");
  el.setAttribute("type","text/javascript");
  if(listener) {
   el.onreadystatechange = function () {
    if (this.readyState == 'complete') listener();
   };
   el.onload=listener;
  }
  el.setAttribute("src", name);
 }
 else if (type=="css"){ 
  el=document.createElement("link");  
  el.setAttribute("rel", "stylesheet");
  el.setAttribute("type", "text/css");
  el.setAttribute("href", name);
 }
 document.body.appendChild(el);
};
/**public global function
 * @param css - array of css url to load. can be null
 * @param js - array of javascript scripts urls to load. can be null
 * @param listener function that will be called when ALL js and css files are loaded.
 */
LOADFILE = function (css, js, listener) { 
 css=css==null?[]:css;
 js=js==null?[]:js;
 var subListener=function(){
  LOADFILE.counter--;
  if(LOADFILE.counter==0)
   listener();
 };
 for(var i=0; i<css.length; i++) {
  _loadF(css[i], "css", subListener);
 }
 for(var i=0; i<js.length; i++) {
  LOADFILE.counter++;
  _loadF(js[i], "js", subListener);
 }
};
LOADFILE.counter=0;//file load counter

})();

For example, you can dynamically load all your javascript application's javascript and css files like this:

LOADFILE(
 ["http://yui.yahooapis.com/2.8.1/build/slider/assets/skins/sam/slider.css", 
  "http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css", 
  "http://yui.yahooapis.com/2.8.1/build/colorpicker/assets/skins/sam/colorpicker.css"], 

 ["http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js",
 "http://yui.yahooapis.com/2.8.1/build/animation/animation-min.js",
 "http://yui.yahooapis.com/2.8.1/build/dragdrop/dragdrop-min.js",
 "http://yui.yahooapis.com/2.8.1/build/slider/slider-min.js",
 "http://yui.yahooapis.com/2.8.1/build/element/element-min.js",
 "http://yui.yahooapis.com/2.8.1/build/colorpicker/colorpicker-min.js"], 
 
 function(){
    //my javascript application's code
    var Event = YAHOO.util.Event,
        picker;
    Event.onDOMReady(function() {
  YAHOO.log("Creating Color Picker.", "info", "example");
           picker = new YAHOO.widget.ColorPicker("container", {
                   showhsvcontrols: true,
                   showhexcontrols: true,
    images: {
     PICKER_THUMB: "assets/picker_thumb.png",
     HUE_THUMB: "assets/hue_thumb.png"
       }
               });
  YAHOO.log("Finished creating Color Picker.", "info", "example");
  var onRgbChange = function(o) {
   YAHOO.log("The new color value is " + o.newValue, "info", "example");
  }
  picker.on("rgbChange", onRgbChange);
  Event.on("reset", "click", function(e) {
   picker.setValue([255, 255, 255], false); 
  });  
  Event.on("gethex", "click", function(e) {
   alert("Current hex value: " + picker.get("hex"), "info", "example"); 
  });
     });  
});

Hope this help somebody