Compile LESS CSS files and compress/minify CSS and JS files using node.js

Here is what you need to do, in order to

- compile your LESS files into CSS whenever they are changed and also compress those CSS files into .min.css (*1)

- compress your JS files into .min.js whenever they are changed

The 2 scripts described here will automatically perform the above actions upon invocation and will then also set up a file-watcher on the specified directory.

But first:

- Download and install node.js from here.

- Download and install uglifyjs from here, using

npm install uglify-js --global

- Download and install LESS compiler from here, using

npm install less --global

Download this RAR file, which contains all the script files that I have modified, so all you need to do is adjust the contained sample batch file and off you go.

These scripts allow you to specify a source and a target directory.
For LESS/CSS, the LESS file is compiled into CSS in the same directory.
The CSS is then compressed into the target directory.

For JS, the js file is compressed into the target directory.

When you run the batch file, it will scan and process all matching files and then it will stay in the background, monitoring the source directory.

Many thanks to the guys that have created all of the above tools.
The original idea for this was from Jonathan Cheung's code here.



[Blatant plug! See my article about my album on Google Play.]

ps: Comments and/or links to this article are most welcome!

PHP, LESS CSS and css/js minify

UPDATE: Link and source updated on 19-apr-2013. See bottom of page


LESS CSS is a pre-processor for CSS that provides lots of added functionality to plain ol' CSS. For more info visit the LESS website.

Here is a brief description of what it does:

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino

There is also a LESS plugin for Netbeans.

CSS and JS minify is the process of compacting CSS and JS files, in order to speed up page loads.

While there are lots of different ways of minifying CSS and JS files, I needed one that was simple to use and that was available on my dev PC.

I have combined a number of tools and have come up with the following solution that:

• compiles LESS files into CSS, if the LESS files are newer than the corresponding CSS.
• minifies the CSS files into .min.css if the CSS files are newer than the .min.css files.
• minifies the JS files into .min.js if the JS files are newer than the .min.js files

The above is achieved by simply visiting a page on the local development PC. Every time the page is visited it executes all of the above.

For PHP projects, the dir structure could be as follows:

- <project root>

- - styles

- - scripts

- - LESS

- - etc

A LESS.INI file specifies which directories to process for JS and whcich for LESS and CSS.

The LESS directory contains the compile.php, lessc.inc.php, cssmin-v3.0.1.php, Minifier.php and LESS.ini files. See download links inside the compile.php  sourcef file.

Compile.php is the one that does all the work.

While developing an app, I have a browser window open that points to

<project root>/LESS/compile.php.

Whenever I refresh it, all of the above actions are executed.

Magic!

Here is a link to the complete source of the version that I use.

Updates

Link and source updated on 19apr2013:
- It also checks inside LESS files for @import statements and uses that to determine if the main LESS file needs to be recompiled.
- The LESS compiler emits more info in error messages


ps: Comments and/or links to this article are most welcome!

Why Your JavaScript Developed in Firefox Might Fail in IE

Mitchell Pronschinske has a great article explaining js differences between Firefox and Internet Exploder.

Some of those issues can be bypassed by using jQuery but it still is a great read for all js developers.

Google javascript style guide

I came across the following javascript style-guide earlier today.
It is the one used by many of Google's open source projects and has some very good info in it.

ps: Comments and/or links to this article are most welcome!

javascript dates, table sorting and jQuery

If you need to display date data in an HTML table and you want to use a nice display format yet still be able to sort correctly (i.e. as a date and not as text), here is how to do it.

Firstly, you need jQuery.
Then, one of the nicer jQuery table plugins, tableSorter.
And, finally, one of the coolest js date handlers, dateJS.

HTML:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="date.js.min.js" type="text/javascript"></script>

<script src="tableSorter/jquery.tablesorter.min.js" 

type="text/javascript"></script>

...

...

...

             <table id="dataTable" class="tablesorter">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Login name</th>
                        <th>Active till</th>
                        <th>Last logged in</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>

Javascript:

// at start of js file

// -----------------------------------------------

// add a custom column sorter

  $.tablesorter.addParser(
  {
    // set a unique id
    id: 'nixDates',
    is: function(s)
    {
      // return false so this parser is not auto detected 

      return false;
    },
    format: function(s)
    {
      var dat = Date.parse(s);

      // format data for sorting. The following date format provides for meaningful sorting.
      var s = dat == null ? '' : dat.toString('yyyy-MM-dd');
      return s;
    },
    // set type, either numeric or text
    type: 'text'
  });
         
// now init the table-handler
  $('table#dataTable').tablesorter(
  {
    headers:
    { 

     // 3rd and 4th columns need special sorting
     2:    {sorter:'nixDates'}
     ,3:   {sorter:'nixDates'}
    }
  });

// -----------------------------------------------

// and later on, at the point where you want to populate the grid

// -----------------------------------------------

  var newRow;
  var fmtDat;

  var idx;

  var numberOfRows;  // this is set by earlier code not shown here
           
  for (idx = 0; idx < numberOfRows; idx++)
  {

     //gDataTable contains a jQuery object pointing to our 'table tbody'
     newRow = $('<tr></tr>').appendTo(gDataTable);
     $(newRow)
       .append('<td class="rowKey">' + data[idx].id + '</td>'
       +    '<td>' + data[idx].loginName + '</td>'
       );
               
       // Any fancy date format can be used here (thanks to dateJS).
       // Also, the sorting issue is taken care of by a custom sort handler on tablesorter. See top of this file.
       fmtDat = data[idx].activeTill == null ? '' : Date.parse(data[idx].activeTill).toString('ddd, dd MMM yyyy');
       $(newRow).append('<td fieldname="activeTill">' + fmtDat + '</td>');
               
       fmtDat = data[idx].lastLoggedIn == null ? '' : Date.parse(data[idx].lastLoggedIn).toString('ddd, dd MMM yyyy');
       $(newRow).append('<td fieldname="lastLoggedIn">' + fmtDat + '</td>');
       }
  }

// -----------------------------------------------

Note that a lot of code has been left out; the above is simply there to demonstrate the code specific to formatting the dates, as well as setting up and loading the grid.


ps: Comments and/or links to this article are most welcome!



Related articles by Zemanta

• DataTables (table plug-in for jQuery) (konigi.com)
• 40 Excellent jQuery Plugins To Work With Data Presentation and Grid Layout | AEXT.NET (aext.net)

jQuery helps overcome IE's brain-dead behaviour...again!

This is one is short and sharp.

If you've ever tried to use someArray.indexOf(somevalue) in Internet Embarrassment, you'll have discovered that Microsoft's pathetic excuse for a browser is, well, just that!


Thankfully, jQuery can provide the needed functionality with the following:

jQuery.inArray(value, Array) or

$.inArray(value, Array)

Short and sweet.

ps: You could just use Firefox or any of the other self-respecting browsers...

pps: Comments and/or links to this article are most welcome!

jQuery - a great tutorial series

Jeffrey has put together a great series of video tutorials for jQuery.

They start with the basics and go on into more advanced topics.
There is something there for everyone and it doesn't look like it is going to stop any day now.
Every time I look, there is yet another tutorial that shows up.

Check them out!


ps: Comments and/or links to this article are most welcome!

jQuery - a cool, powerful grid!

One of the things I've always wanted the jQuery UI to have has been a grid control.
Alas, it is quite a way down the priority list.

Up until now, I've been using tablesorter, which has been very reliable and useful.
What it was missing was resizeable and moveable columns.

I have now found a jQuery grid control, slickgrid, that supports that plus much much more.

Some of its highlights are:

• Resizable/reorderable columns


• Custom cell formatting editing


• Virtual scrolling. It can manage many thousands of rows of data, while only showing the rows needed


• Very configurable and customisable

ps: Comments and/or links to this article are most welcome!

jQuery plugin - splitter

Another very handy jQuery plugin I am looking at at the moment is this splitter.

It supports vertical and horizontal splitters, fixed or fluid widths and heights, nested splitters etc.
It has very nice look about it!
Visit it and check it out.

ps: Comments and/or links to this article are most welcome!

jQuery plugin - Imagetool

I am currently working on a number of web apps that need to do a small amount of image processing, such as cropping, area-zooming etc.

While image processing normally evokes images of fat apps, such as those done with dotNOT, I mean dotNET, I am trying to do this in a browser-based app.

I already using jQuery, so I've been keeping an eye on jQuery plugins.

One of them is Imagetool, a simple plugin that provides basic cropping and scaling capabilities.
It supports panning and zooming.

ps: Comments and/or links to this article are most welcome!

Javascript differences between Firefox and IE

Impressive Webs has a very useful article on javascript differences between Firefox and IE.
They mostly relate to getting and setting DOM properties, using straight javascript.

I use jQuery, so most of those differences disappear regardless of the browser used.

Nonetheless, it is always good to be aware of such issues.

Well done guys!

ps: Comments and/or links to this article are most welcome!

jQuery file upload plugin

I have been using jQuery for quite a while now and I still consider it to be one of the best tools for javascript development. There are bigger js libraries around, as well as ones that offer more eye candy but i still find the simplicity, easy-of-use and power of jQuery, extremely useful.


I have seen an explosion of component becoming available for jQuery (sometimes, it is too hard trying to catch up with all the new ones that keep coming out).


One component I have always wanted, is a multi-file upload dialog that also offers visual feedback. There have been a few but they never did seem to hit the spot for me.
Now, there is a new one, called jQuery file upload plugin, by Ronnie Garcia, that seems to have got all the right answers.


Visit Ronnie's site and have a look at it.


If you enjoy what you see, leave Ronnie some feedback of appreciation.

Related articles by Zemanta

• 29 Best And Useful jQuery Plugins Of June 2010 (savedelete.com)

nice new dev snippets site

The guys at devsnippets have put together a great Online Code Snippet Gallery!


It looks quite neat!
It is always good to see new, useful sites.


ps: Comments and/or links to this article are most welcome!

Multithreaded javascript!

I just came across this article: http://www.infoq.com/articles/js_multithread

It is very informative and explains quite a number of the issues raised by callback-based async calls (used to simulate multiple execution streams) and how to achieve equivalent functionality via this new js library.

ps: Comments and/or links to this article are most welcome!