Monday, April 27, 2015

Precompile your LESS and Sass files like a pro

If you've been coding CSS using LESS or Sass for any length of time, you know what a chore it can be to make sure your code gets updated and viewable correctly.  Plus you either have to sacrifice speed in order to compile your css on the fly in your site code, or you have to run a complie process manually before you refresh a browser view of your site to see your changes.  Wouldn't it be great if you made a change to your LESS/Sass code and your browser updated automatically reflecting your change?  Wouldn't that make your feedback loop so much quicker that you'd be able to investigate new and better options?
Because of the complexity of building today's web applications, we're beginning to see a new class of developer application; preprocessors.  Preprocessors take some of the pain away from the manual compilation that needs to occur with things like Less, Sass and even javascript.  They site on a developers workstation and watch for changes to source files that have been designated as needing a compilation process.  Then, as changes are detected, they kick off the appropriate compiler and create the resulting files in your code.  Additionally, through the use of lightweight html proxy servers built in, they can refresh a web page that you are working on whenever the compile process is done (or even more frequently in some cases).
Here are the two that I've been working with, CodeKit for about a year, and Prepros for about a month.  While CodeKit just has a more solid feel to me (it is a bit more mature), Prepros does nearly the exact same job with the benefit of being available on windows for those so accursed (just kidding).  Unfortunately, neither are free, but they are quite reasonably priced with appropriate trials.
CodeKit (for mac)
PrePros (for mac and windows)

Monday, March 23, 2015

DataTables 1.10.x and ColdFusion serverside parsing

The 1.10 update to datatables is a great improvement, adding things like html5 support and responsive output.  There is even a new, easy to implement piece to support Bootstrap (the css layout framework).

One of the side effects of the update, though, is that all of the server side variables submitted to your ajax processing back end have changed.  Unfortunately, the new variables look like cf array notation and is difficult to put into a shape that you can easily work with.

Here is a bit of code that you might find useful if you need to do this sort of thing:

<cfscript>
req = {columns = [], search = {}, order = {}};
var keys = listToArray(listSort(structKeyList(url), 'textnocase', 'asc'));

for (key in keys)

{
attr1 = listFirst(key,'[]');
switch (attr1) 
{
case "columns":
{
attr2 = listGetAt(key,2, '[]');
attr3 = listGetAt(key,3, '[]');
switch(attr3)
{
case "data":
{
arrayInsertAt(req.columns, attr2+1, {data=url[key]});
break;
}
case "name":
{
req.columns[attr2+1]["NAME"] = url[key];
break;
}
case "orderable":
{
req.columns[attr2+1]["ORDERABLE"] = url[key];
break;
}
case "search":
{
attr4 = listGetAt(key, 4, '[]');
switch(attr4)
{
case "regex":
{
req.columns[attr2+1]["SEARCH"]["REGEX"] = url[key];
break;
}
case "value":
{
req.columns[attr2+1]["SEARCH"]["VALUE"] = url[key];
break;
}
}
}
case "searchable":
{
req.columns[attr2+1]["SEARCHABLE"] = url[key]
}
}
break;
}
case "search":
{
attr2 = listGetAt(key, 2, '[]');
switch(attr2)
{
case "regex":
{
req.search["REGEX"] = url[key];
break;
}
case "value":
{
req.search["VALUE"] = url[key];
break;
}
}
break;
}
case "order":
{
attr2 = listGetAt(key, 2, '[]');
attr3 = listGetAt(key, 3, '[]');
switch(attr3)
{
case "column":
{
req.order["COLUMN"] = url[key];
break;
}
case "dir":
{
req.order["DIR"] = url[key];
break;
}
}

break;

}
default:
{
req[ucase(key)] = url[key];
}
}
}
</cfscript>
<cfdump var="#req#"/>

<cfdump var="#url#"/>