Thought Delimited

Zen Coding, in a nutshell, is a kind of coding shorthand primarily used to output HTML or XML code.  For example, the following line of Zen Coding:

div#page>ul>li*2>img.itemImg+a

...will produce this:

<div id="page">
	<ul>
		<li><img src="" alt="" class="itemImg" /><a href=""></a></li>
		<li><img src="" alt="" class="itemImg" /><a href=""></a></li>
	</ul>
</div>

If you compare the Zen Code to its output, you can see what the different parts of the Zen Code statement do. Assuming you know how you want to structure your HTML code, it's a pretty quick and easy way to generate the code you want with very little typing.

Having been recently reminded about Zen Coding, I decided to try out the latest version of the Zen Coding for Eclipse plugin and see if it would work in ColdFusion Builder 2.

The short answer: it does (and I imagine it works in CFEclipse as well). Once the plugin is installed, you can open your .cfm files in the regular editor window and use Zen Coding statements.

But then I discovered something I didn't expect: the Zen Coding plugin will convert even element names it doesn't recognize into matching start and end tags. In other words, even though it's not designed to be used with CFML tags, it can output them. Combine that fact with Zen Coding's support for adding attributes, and you can enter this line:

ul>cfloop[index=s][from=1][to=#ListLen(stateList)#]>li

...and hit the Tab key to get this:

<ul>
	<cfloop index="s" from="1" to="#ListLen(stateList)#">
		<li></li>
	</cfloop>
</ul>

...Maybe not the best real-world example, but it demonstrates the possibilities.  And the plugin lets you define your own shorthand abbreviations, so instead of typing "cfoutput[query]" to get "<cfoutput query=''>", you could define an abbreviation like "cfoutq" that will generate the same code.

I think this could be a cool way to write display code, and I'm looking forward to trying it out in real coding situations.

Update:  I totally overlooked the link on the Github page to the documentation for the current Zen Coding syntax:  http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

This past week I was asked to build a simple suggestion box web app.  The people responsible for reviewing the suggestions wanted to be able to filter the suggestions by keyword and by date range.

Having used the dataTables jQuery plugin in previous projects, I knew that it could take care of the keyword filtering requirement, but I had never used it to filter out rows that didn't fall into a date range.

I did some research and found enough information to get it working, but since I didn't come across any single crystal-clear example or demo for it, I figured I'd throw one together to illustrate it.  You can check the source code to see what's going on under the hood. I also used the jQuery UI Datepicker plugin to make the date range boxes more user-friendly.  Here's the URL:

http://www.thoughtdelimited.org/thoughts/demos/dataTablesDateRange/

The focus of the jQuery UI Meetup I attended last week was on jQuery UI 1.8 and to work out some questions regarding future meetups, but of course some other topics came up as well. One of those other topics was the not-uncommon problem of having certain HTML content, meant to be hidden or styled by jQuery, briefly appearing in its raw form before the page has fully loaded and jQuery gets to do its thing. Apparently the term for this phenomenon is "FOUC", which stands for "flash of unstyled content."

Now, if you took it as an absolute that any and all uses of your web page had Javascript enabled, you could solve a FOUC problem by assigning a CSS style to the problem content that hid the content right from the get-go, and then you could use Javascript to reveal the content at the appropriate time. But such a solution would fail if the user had Javascript disabled--the content would never be visible to them--and it's contrary to the idea of progressive enhancement (the idea that the page is usable as is, but is enhanced when Javascript is available).

So in answer to the question on FOUC, Richard Worth (the speaker for the meetup) pointed us to the following blog post by Karl Swedberg:

http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

The post provides a pretty good explantion of the technique (which is pretty simple), so I don't feel the need to explain it or add to it. Just thought I'd put it out there because it would be hard to find via a web search if you didn't know how to describe the problem and didn't know the FOUC acronym.

Earlier today, Dan Vega tweeted:

"this is pretty freaking cool, works in ColdFusion Builder! http://wireframesketcher.com/blog"

So I went and checked it out. WireframeSketcher is an Eclipse plug-in that lets you create wireframe page mockups, similar to Balsamiq Mockups.  I download the trial version and took it for a brief spin. You simply create a new blank Screen file and start dragging and dropping page elements from the Palette view (labels, text boxes, tabbed panes, etc.) onto the Screen, resizing and re-positioning as you go. When you're finished, you can export the file as a PNG or a PDF file.

The WireframeSketcher website mentioned that the layout information for each screen was stored as XML data, so the thought crossed my mind that maybe you could feed the XML to a parsing script that could use that data to output actual HTML/CSS. Unfortunately (as I kind of suspected), the positioning of the wireframe elements is achieved with hard-coded x and y pixel coordinates, and it would be hard to translate that into the kind of relative or "in the flow" positioning used on most web pages.

Still, if you want to add a wireframing tool to your toolset and you already use Eclipse or an Eclipse-based IDE (by the way, these guys specifically name Flash Builder and ColdFusion Builder as compatible IDEs, so props to them for being aware of the Adobe tools), this is probably worth checking out. You can try it out for free for at least a week before you get prompted to pay for a license.

Every April, the University of Maryland holds a huge open-house event called Maryland Day that draws 60,000+ visitors to the campus to view exhibits highlighting the research conducted at the university and participate in various events and activities. All of the event details are entered into a ColdFusion application, and one of those details is the GPS coordinates (latitude and longitude) of where each event is taking place so visitors to the website can see where the events are located on Google Maps.

Now that smartphones are becoming more prevalent, I wanted to see if it was possible to build a web application that would show the user where they were currently located and then show them on a map how to get from their current location to a particular event.

So I did some research and learned that HTML 5 comes with a Geolocation API. This API allows you to execute Javascript functions within the navigator.geolocation object built into the browser that retrieve the supposed latitude and longitude coordinates of where the browser is located (and, if available, the altitude, heading, and speed at which the browser is moving).

Using the code examples I found on the Gelocation API page on the W3C website and on Oliver Wehren's geolocation demo page, I was able to create my own test page for determining my location and marking it on Google Maps. I then tried using the page with my Motorola Droid, my iPod Touch, and my manager's iPhone.

The default web browsers on all three devices implemented the Geolocation API (my preferred browser on my Droid, the Dolphin Browser, did not). Each of the browsers displayed a confirmation dialog asking for permission to share my location information with the web page (as mandated by the standard), and once I permitted the information to be used, my test page was able to place a marker denoting my location on the map.

However, the location wasn't as accurate as I had hoped. Although the API was coded to accept location data from the on-board GPS system in a mobile device, neither the iPhone nor the Droid seem to provide GPS data to the browser. If I was connected to the campus wireless network, my location was determined via the network topography, and it could be off by as much as 150 feet or so. The accuracy was even worse if I was relying solely on 3G: in that scenario, but the iPhone and the Droid had me located on the side of a state road on the outskirts of campus, a good twenty minute walk from where I actually was. I have no idea what caused both devices to pick that particular spot, as there certainly wasn't a cell tower anywhere near that location.

So I came to the conclusion that while the Geolocation API could be used to determine what town, city, or general area a user was currently in, it wasn't accurate enough (at least with these browsers in these devices) to provide walking or driving directions within a small area, especially given the fact that many of the users for the service I had in mind would only have access to the Internet via a 3G connection.

But if someone knows of a way of increasing the location accuracy of the Geolocation API, a way that doesn't require the end-user to modify their mobile browser in order to make it work, I'd love to hear about it.