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#"/>

Friday, September 5, 2014

Send content to tinyMCE with Selenium IDE

I'm doing a little functional testing with Selenium IDE and just bumped into the issue trying to send text to a tinyMCE text editor.

Tiny embeds itself in your page inside an iframe, which you have to work around.

There are a number of entries floating around the web about how to do this, but this is the one that I found the easiest.  There is no need to worry about the iframe at all because you can send your text into it by using tiny's api.

In Selenium:


Command runScript
Target tinyMCE.activeEditor.setContent('Replace with your text')
Value

Tuesday, May 27, 2014

Apple's grip on my wallet is weakening.

Apple, please help me remain a fan.  It seems like I'm seeing less and less of you in my household.

iPhone

Lost me a long time ago to Android.  My Nexus has been unlocked since I bought it and it's much easier to do a one-off app just for yourself without having to get all tied up in some developer program.  I can send a copy to my friends through email without having to cough up $99 for some license.  

I used to love my iPhone, but the experience seemed to go downhill constantly after the second generation iPhone I.  Of course I haven't had a recent one because you already lost me on that device.

Oh, and before I forget, the iPhone is TOO FREAKING SMALL.

iPad

Well, you never won me over on this one.  The price point was just too high for a device that I really didn't see a strong purpose for.  Again, along comes Google with a device at less than half the price that lets me as a developer do whatever the heck I want to it. +1 Nexus 7

AppleTV

This device has served me well for many years and I even upgraded it once.  Now, however, with the prevalence of things like cableTV, Netflix, Amazon Streaming, etc.  It's not getting the attention it once did.  The new UI is a pain to use as well.  Try going back to focusing on my stuff instead of all the stuff you want to sell at no discount. 

17" Macbook Pro

Here's the big one.  I'm still using my early 2011 Macbook Pro pretty much for everything.  I've had it repaired a few times because it gets a workout.  I would like to get a new one eventually, but you no longer make them.  

15"? I doubt it.  If you did a 15" with an Occulus rift option, I'd think about it, but it would have to be a full video system for the computer, not just an app or two.  Or better yet, just bring back a decent 17" laptop.

I've got a powerhouse 17" HP laptop sitting here just waiting for a chance to displace the MBP.  You guys need to come up with something for this market.  That 2" of screen real estate really is a deal-breaker for a lot of people.  Like the iPhone, the 15" MBP is TOO FREAKING SMALL.

Wednesday, April 23, 2014

MockMyId.com / PersonaTestUser.org

I'm a huge fan of the mozilla.or Persona project.  I'd like to see it replace every one of those facebook/yahoo/google login buttons.

MockMyId is a neat little service that will give you a testing result if you're trying to implement Persona.  This is great if you're also trying to set up CI (Continuous Integration) or if you're just doing a bunch of functional testing as you work.

UPDATE:

It appears that MockMyId has gone offline, but here is a nice replacement: http://personatestuser.org/

Monday, March 10, 2014

Cool trick to remove times from datetime data types in MSSQL

​A frequent request in SQL is to roll up a bunch of records by date.  Often when you dig into the data you find that the column in question has that snarky time added to the end of all of the dates and nothing will roll up.  So what do you do?
A common approach is to pull out the CONVERT funtion and start treating your dates as strings and go from there.  Unfortunately, that's not really efficient.
I ran across this little gem:
SELECT DATEADD(dd, DATEDIFF(dd, 0, dbo.MYDATETIME), 0) AS MYDATETIME
What this does is take your date and figure out how many days are in it from your base date (usually 1/1/1900) and then add that many days back to your base date.  The time value is stripped off because you're working in days.
Date math in sql works with integers and is very fast.  Give it a try the next time you need to strip off that time.

Friday, March 7, 2014

Quest for the digital Grail

Neat! I'm getting an opportunity to start looking at a project or 2 in Grails.  It should be fun.

It's funny how a few years ago, I was really skeptical of ORMs (Object Relational Mapping frameworks) and how they built the persistence layer in these web frameworks.  Now, I find that most of them are just great once you get over the initial learning bit.  It's nice to be able to just do a simple select with a good reference tool handy.  Build up a little bit at a time and the next thing you know, you're doing complex joins in your model, managing caches, and thinking about server performance.

Grails is using Hibernate to power its GORM (Grails ORM), so I have pretty strong confidence that most of the crufty stuff has been worked out.

I'll do a few posts if I find out anything interesting.