ColdFusion

Yesterday, I was trying to use the arrayContains() method introduced in ColdFusion 9 . Unfortunately, it wasn't working. Even when I double-checked all the values in play, arrayContains() kept telling me that a known value was not in the given array. I tried switching over to arrayFind(), but unfortunately, this exhibited the same broken behavior. After abo ... Read More »

A few weeks ago a reader asked if I had an example of infinite scroll with a ColdFusion back end. I replied that I did not, and that infinite scroll was the worse thing to happen to the Internet since the rainbow horizontal rule. I'm possibly being a bit overly dramatic, but I'm really not a fan of it. Maybe its the OCD in me, but the fact that I can never get to the end of an infinite scroll UI just bugs the hell out of me. That being said - I figured - why not make a quick example. It can't hurt, right?I did some Googling on the topic. Initially the results I found were not very helpful. Many required a bit of configuration and I was really looking for something quick and simple. Finally I came across this great answer on Stack Overflow: 4 simple lines. Nice! So I took this and ran with it. I first created a fake service in a ColdFusion component that would return an infinite amount of data. Not exactly real world, but it worked. Note that I added a bit of a delay to the code so that my local testing would feel a bit more realistic. The code here is pretty arbitrary. I return an array of structures containing a title and a body. I accept a start parameter, but I don't really even use it. Again, the entire purpose for this was to just send me a lot of data. Now let's look at the front-end code. A bit more than 4 lines, but hopefully you will see that I've simply taken the logic from the Stack Overflow answer and wrapped it around a call to a function called loadContent. loadContent handles a couple of things. First, it is intelligent enough to recognize when it is fetching data and prevent you from making multiple XHR requests at once. Secondly, it handles updating the DOM with a loading message so you know important crap is on the way. It does the XHR call and handles rendering it out. (Insert reminder about using JavaScript templates here.) Finally it removes the loading message. Over all, pretty simple. You can demo this here: http://www.raymondcamden.com/demos/2013/may/21/test.html. If it seems slow, remember that I kept in that sleep() command there. I built a second demo that makes use of my actual blog database. For the most part it is the same, but note the use of a Query and limit operations to page the data. You can demo this version here: http://www.raymondcamden.com/demos/2013/may/21/test2.html In my testing this downloaded pretty quick (and I'm on VPN now downloading 2 gigs of VMs). There are two things missing from this version. One - I need to enable my front end service to recognize when it is no longer getting rows of data from the back end. I could handle that with a flag in the result object or some other way. Second - If I were to add links to the actual blog entries, I'd need to support some way of remembering where you were when you hit the back button. If folks care, I'll do some updates to add that.

I'm totally stealing this content from the official ColdFusion blog, but as it is good news I think I'm allowed. The ColdFusion Summit, a ColdFusion conference organized by Adobe's ColdFusion team, is now officially announced. Details: October 24th and 25th Manadalay Bay Resort & Casino, Las Vegas, Nevada Registration cost: $250 Each paid registration will receive a FREE copy of ColdFusion Builder (MSRP value of $299!)

As people know, I'm a huge fan of PhoneGap and what it allows me to do with JavaScript, HTML, and CSS. But I think it is crucial to remember that you don't always need PhoneGap. A great example of that is camera access. Did you know that recent mobile browsers support accessing the camera directly from HTML and JavaScript? Let's look at an example.Over a year ago I wrote a blog post in which I created an application called "Color Thief." This application made use of PhoneGap's Camera API and a third party JavaScript library called Color Thief. I loved this example because it demonstrated how you could combine the extra power that PhoneGap provides along with existing JavaScript libraries. This morning I watched an excellent Google IO presentation (https://www.youtube.com/watch?v=EPYnGFEcis4&feature=youtube_gdata_player) on Mobile HTML. It was an overview of some of the exciting stuff you can now do with mobile HTML and JavaScript. To be clear, this was all without using wrappers like PhoneGap. In one of the examples the presenters discussed the new "capture" support for the input/file field type. This is rather simple to implement: If supported (recent Android and latest iOS), the user can then use their camera to select a picture. I decided to rebuild my old demo to skip PhoneGap completely and just make use of this feature. Here's the code: For the most part, this is pretty similar to the last version. I no longer wait for the deviceready event, but instead just listen for the document itself to load. Instead of listening for a button click, I've switched to an input field using type=file. I now listen for the change event, and on that, I see if I have access to a file. If I do, I can then use the URL object to create a pointer to the source and then simply add it to my DOM. After that, Color Thief takes over. The only tricky part I ran into was that in iOS the URL object is still prefixed. You can see how I get around that in the startup code. To be fair, this isn't 100% backwards compatible, I could add a few checks in here to ensure that things will work and gracefully let people on older phones know they can't use this feature. But the end result is nearly the exact same functionality in a web page - no PhoneGap, no native code.

A busy week of tutorials this week, with the majority focusing on straight HTML, CSS and JavaScript (i.e. no frameworks). This week was also Google I/O where they announced a new web/UI framework called Polymer that is currently available as a pre-alpha. Also, please be sure to check out the three new articles on Flippin' Awesome this week covering topics in CSS, LESS, Sass and JavaScript. Tutorials Eric Feminella explains how to use the method chaining pattern to both simplify your API and make it more fluent. Fluent APIs and Method Chaining Chris Coyier shows how to create a cool slider with sliding backgrounds effect similar to the Yahoo Weather App for iOS in HTML, CSS and JavaScript. Slider with Sliding Backgrounds Christian Heilmann responds to the CSS Tricks “image swivel” demo, giving it his "vanilla web diet" treatment. Giving “image swivel” the vanilla web diet treatment Gary Sieling shows how to do full-text indexing with client-side JavaScript, based upon PDF.js and using Lunr. Building A Full-Text Index In Javascript David Walsh shows how to fix an issue where by buttons in Firefox are a few pixels larger than in other browsers. Firefox Button Height Fix Alex Young explains a technique to "rotate" the subject of a photo by hiding/showing multiple stacked photographs. Photo Swivel Mary Lou shares an experimental morphing devices slideshow using CSS Transitions for showing responsive web design screenshots. Morphing Devices David Walsh explains how to use CSS counters for incrementing and in generated content. CSS Counters Dr. Axel Rauschmayer continues his series on JavaScript quirks, focusing on the scope of variables and hoisting. JavaScript quirk 6: the scope of variables Alex Walker shows how he built the functionng Pong game demo in just HTML and CSS. CSS3 Pong: Insane things to do with CSS #17 Stephen Burgess shares a cool experiment creating dynamic bezel lines with HTML canvas and JavaScript. Dynamic Bezel Lines Experiment Alessandro Vendruscolo explains how to use CSS animations to detect, in JavaScript, when a media query is triggered. Media Query Change Detection in JavaScript Through CSS Animations Raymond Camden continues his JavaScript design patterns series with a practical example of the revealing module pattern. JavaScript Design Patterns - The Revealing Module Pattern David Walsh shows that it is possible to have multiple background CSS animations but with caveats. Multiple Background CSS Animations Alan Stearns posts an example demonstrating how CSS Regions allow you to define where content flows. Define flow areas directly with CSS Regions Cody Lindley created this thorough reference for using regular expressions in JavaScript. Definite bookmark material. JavaScript Regular Expression Enlightenment Alan Greenblatt shows the technique he used to create a soft blur effect using CSS Filters. Creating a Soft Blur Effect with CSS Filters Libraries and Frameworks Mária Jur?ovi?ová shares many useful, and lesser known, tips and tricks for LESS CSS. LESS Tips and Tricks Jaime Quiroz shares the code and techniques he used to create a 3D CSS animated box with Sass and Compass. Create a 3D CSS Animated Box with Sass Renaun Erickson shows how he built a 3D sample using three.js by compiling ActionScript via the Randori.js project. Code Three.js in ActionScript with Randori Compiler Alex Young continues his AngularJS tutorial series. In this edition he explains how to write tests and mock data. AngularJS: Tests Krasimir Tsonev walks through building a real-time web chat application using ExpressJS and Socket.io. Real Time Chat With NodeJS, Socket.io and ExpressJS Mobile Andrew Trice shows you how to build your PhoneGap apps using the newly released Android Studio. PhoneGap & Android Studio Joseph Labrecque posts how to use JSON to save more complex objects in local storage. PhoneGap: Saving Arrays in Local Storage New and Updated Libraries and Fra

For the most part, ColdFusion is awesome when it comes to creating and consuming dynamic variables. Using quotes, we can easily create dynamic variable handles ; we can define dynamic class paths ; we can ... Read More »

Forgive the title, I'm not sure it best describes the task. I was asked by a reader to consider a simple problem. Given a list of dates, how would you rewrite them so that two (or more) consecutive dates are displayed together? For example, imagine this input.dates = [(May 1, 2013), (May 4, 2013), (May 5, 2013), (May 7, 2013)] I want to take this list and join the values that are one day apart. I should end up with: dates = [(May 1, 2013), (May 4, 2013 - May 5, 2013), (May 7, 2013)] I wrote two solutions for this - one in ColdFusion and one in JavaScript. Let's start with ColdFusion. First I create my sample data and a new array that will store my results. Now for the real "meat" of the logic. My idea here was to store objects in the new date array. The object contains a first and last property referring to the first and last date. What this allows for is a quick date comparison. If the next item in my source data is one day after the last value in the previous range, than we 'extend' the range by resetting the last property. Otherwise we need to add a new item in the result array. Finally, let's make this easier to use by doing some formatting on the array elements. We will loop through each item and add a 'formatted' key. And the result is this: Woot. Ok, now let's look at the JavaScript version. I'll just share the complete template first and talk about the differences. Ignore our two helper functions on top for now. Our initial seed data very similar to the ColdFusion one. Instead of using dateNew we use the Date constructor. The first loop is also pretty similar. Do remember that JavaScript arrays begin with 0. The main issue we have is doing the date comparison. There is no dateDiff in JavaScript. You can find great Date libraries out there, but as I had a very simple need here, I just wrote a quick function that compares the millisecond values of two dates and sees if the difference is less than one day. (By the way, the best JavaScript data library out there - imo - is Moment.js.) Finally, I did my formatting. Again, I could have grabbed a library for this, but instead I simply ran toDateString. My dtFormat function is a bit simple. Almost too simple to even be it's own function. But I was imaging that I'd probably want to make formatting a bit more complex in the future. This lets me handle that later. The result: Note - I switched to Firefox for the screenshot as I think it prints objects nicer in the console. I've included a zip with the complete code for both examples. Note the CFM has a tag-version as well for older CF engines.

Due to a problem back home, I have to leave the conference early. I'm giving my Mobile Web Debugging session in the first slot this morning (this schedule change will be announced this morning). Dave Ferguson will be covering my CF10+HTML5 session and Matt Gifford will be covering my PhoneGap session.

Passing it on... My name is Derek Bowes and I used to run whousescoldfusion.com and twitter is @whousescf. I am currently working for healthendeavors.com and our Health Care application uses CF10 with SQL 2008. We need more CF developers and are having a hard time finding good ones. They need to be on site in our Scottsdale, AZ office and we would be willing to pay to relocate the right candidate (US relocation only). Need someone mid-senior, with jQuery and JavaScript. If you could put the word out, it would be greatly appreciated. I can be reached at derek@healthendeavors.com.

I've come across multiple people lately who have been bitten by this so I thought a quick blog post would be useful for me readers. If you've recently upgraded your ColdFusion server or patched it, you may find some forms return an error when submitted. Here is an example: To cause this error, I simply created a form with 101 fields like so: If you modify the loop to go to 100 instead of 101, it works fine. People using ColdFusion 10 or a recently patched ColdFusion 9 will encounter this. The cause is a recent security fix. You can read the details here (Adobe ships patch for ColdFusion flaw that could lead to DoS attacks), but most likely you are only concerned about how to get around this. In the ColdFusion 10 Administrator, under Settings, way at the bottom, you will find this new setting: You can tweak this to a value that makes sense for your form. For folks using ColdFusion 8 and 9, you have to edit a bit of XML to handle this. Details may be found here: ColdFusion Security Hotfix