erichynds

Me!

Welcome to my online development portfolio and blog. I'm Eric Hynds, a 23 year old website developer living outside of Boston, Massachusetts, and I'm passionate about developing functional, standard-compliant, and user-friendly websites.

Archive for the ‘ColdFusion’ Category

FamFamFam Silk Icon Set in Base64 Encoding

Wednesday, February 24th, 2010

This one can be filed under both “total impractical” and “somewhat useful”. For those who haven’t heard of this trick before, base64 encoding enables you to embed binary image data directly into your HTML or CSS source. Therefore, instead of the browser requesting two files from the server – the CSS file and the image file – only the CSS file need be requested. There are a number of drawbacks/pros/cons to this approach: IE doesn’t support it, file size limitations, larger CSS files, inability to separately cache CSS vs. images, etc. etc., but if you feel the need to use FamFamFam Silk icon’s in base64, look no further.

I use icons very liberally on all my projects; they’re classy and aid in usability. I typically start with a “.icon” class that configures the correct padding/background details for the element, followed by a “.icon-*” class, which sets the background-image property to that of the desired icon. For example, this CSS:

.icon { background-position:left; background-repeat:no-repeat; padding:3px 0 3px 19px }
.icon-pdf { background-image: url(/images/icons/pdf.png) }

Applied to this anchor element:

<a href="#" class="icon icon-pdf">Download PDF</a>

Produces:  Download PDF

Can you dig it? (more…)

Paginating large datasets with MySQL

Thursday, August 27th, 2009

Web developers typically choose one of two ways to paginate data:

  1. Select every row in one query and use server-side programming to handle the pagination and output.
  2. Use the LIMIT clause in the query to only select the amount of rows necessary for that page of results.

Which ever you choose, each can have a huge performance implication particularly when the data set is in the thousands of rows, or if the query to select the data is not optimized.

The performance hit in option #1 is obvious: you’re selecting ALL the rows when only a fraction of them are going to be displayed to the user at one time. Depending on the situation and if the query can be cached, I suppose this is a fine option, but in my opinion, pagination is a job for your database layer.

In option #2 the query is only going to return XX number of rows out of the entire recordset. We still need to know how many total rows exist in order to figure out how many pages there will be, and to display other meta data to users (showing records 1-100 of 4000, for example). Therefore, a second query still needs to be issued using a COUNT() statement, or the exact same query again without the LIMIT clause… not very efficient.

Although it doesn’t seem well known in the CF community, this scenario is the perfect fit for MySQL’s SQL_CALC_FOUND_ROWS and FOUND_ROWS(). Basically, this statement and function used together gives us the ability to retrieve the total number of rows that would have been returned had the LIMIT statement not been used. Two queries still have to be issued, but this time without the performance hit. Assuming our start_record and records_per_page variables are already set, it works like this:

<cftransaction>
	<cfquery name="getData" datasource="mydatasource">
	SELECT SQL_CALC_FOUND_ROWS field1, field2, field3
	FROM ...
	WHERE ...
	LIMIT #start_record#, #records_per_page#
	</cfquery>
 
	<cfquery name="getDataCount" datasource="mydatasource">
	SELECT FOUND_ROWS() AS totalrecords
	</cfquery>
</cftransaction>

The query getData retrieves only the rows we’re going to output, whereas query getDataCount retrieves the number of rows getData would have returned without the LIMIT restriction. Note that you can issue a SELECT FOUND_ROWS() statement at any time whether you’re paginating or not, and it’ll return the recordcount for whatever the last SELECT was. Therefore, in the example above, I’m wrapping both queries in a cftransaction tag so the FOUND_ROWS() will always reference the getData query. If another query is issued at the same time by another user of your website, selecting FOUND_ROWS() will return the recordcount of that query, not from getData. Here’s a full example of how to build the pagination variables (untested!):

<!--- the current page we're on --->
<cfparam name="url.page" default="1">
 
<!--- number of records to display per page / retrieve in the query --->
<cfset records_per_page = 45>
 
<!--- row to start on during our DB retrieve --->
<cfset start_record = url.page * records_per_page>
 
<!--- get our data --->
<cftransaction>
	<cfquery name="getData" datasource="mydatasource">
	SELECT SQL_CALC_FOUND_ROWS field1, field2, field3
	FROM ...
	WHERE ...
	LIMIT #start_record#, #records_per_page#
	</cfquery>
 
	<!--- get total number of rows --->
	<cfquery name="getDataCount" datasource="mydatasource">
	SELECT FOUND_ROWS() AS totalrecords
	</cfquery>
</cftransaction>
 
<!--- total number of pages --->
<cfset total_pages = ceiling(getDataCount.totalrecords / records_per_page)>

In future versions of ColdFusion it would be nice to see some kind of implementation in the “result” attribute of CFQUERY. If your result variable is “r”, for example, it would be cool to be able to reference #r.found_rows#, much like you can with #r.generated_key# during an INSERT. I’m sure MSSQL and other DBMS’s have something similar, but I’ve only had to use this with MySQL. Happy paginating!

Large loops = out of memory?

Wednesday, July 22nd, 2009

I have a script that loops over a 6MB text file and takes each line to do a large amount of processing: creating structs, lots of queries, calling other CFCs, etc. The problem is this loop will eventually take up 100% of its alloted memory and eventually timeout with an “out of memory” error. I cannot figure out if it is something I am doing wrong or if it is the nature of CF. From what I’ve read on the web, CF is notoriously poor at garbage collection and will not flush its memory until after the request is complete, which leads me to believe there is nothing I can do.

I have looked over the code with others and can 100% confirm that all variables in a function are var scoped, each structure is cleared at the head of the loop, and there are no open loops or areas where memory would obviously be leaking from.

I can also confirm with the following code (found here) that with each 1000 iterations through the loop, 20MB of memory is being used, which eventually builds up until it’s maxed out.

<cfset runtime = CreateObject("java","java.lang.Runtime").getRuntime()>
<cfset memoryUsed = (runtime.totalMemory() - runtime.freeMemory()) / 1024 / 1024>

It was my understanding that with each loop iteration, recreating the structures that get built within the loop clear them from memory, but this apparently isn’t the case. I have also tried tapping into Java to manually force garbage collection, which also doesn’t do a thing. My only solution at the moment is to increase the Java heap size to 2500MB – enough for the damn thing to run – but once it has finished and other requests are made, memory is never flushed. I then force kill CF and restart it. This is fine for my development box, but is not going to fly in production, and this script will probably be run a couple times a month.

So, aside from posting ~500 lines of code across a handful of files, any quick ideas I can investigate? I’m running CF8 on Ubuntu 9.04.

CFIMAGE resize after CFFILE upload

Friday, June 12th, 2009

I ran into an issue today while trying to resize an image with CFIMAGE that was just uploaded with CFFILE. Apparently there are (were) a number of bugs when these two tags are used in succession. In my case, the image would be uploaded fine, and then magically be deleted by the CFIMAGE tag, at which point an error would be thrown because the file could not be found.

Code:

<!--- upload image --->
<cffile action="upload" 
	destination="#expandpath("/images/sales/")#"
	filefield="image"
	nameconflict="makeunique">
 
<!--- resize it --->
<cfimage action="resize" 
	width="640" 
	height="480" 
	source="#expandpath("/images/sales/#file.serverfile#")#"
	destination="#expandpath("/images/sales/#file.serverfile#")#"
	overwrite="yes">

Turns out there is a simple (hot)fix for this: http://kb2.adobe.com/cps/403/kb403411.html