ColdFusion

A few months ago I wrote a blog post that talked about "robust" PhoneGap applications. Basically it was a look at the types of things you should consider to make your PhoneGap application more of an app and less of a wrapped web page.One of the main topics of that blog post was about handling connection status. PhoneGap gives you access to the type of connection the device has as well as events that let you respond to online and offline states. These are important features that (most likely) every single PhoneGap app should be using. I want to point out though a small issue with the code I shared. It isn't broke, but how I did things could be done slightly different. Consider this code block: I want you to notice two things. I've got event listeners for my connection status. Then I have an immediate check. My thinking was, "I want to know when things change in the future but I also need to know what's going on right now." However, it turns out that this isn't actually necessary. If you add event listeners for the online/offline events in the main body load event (not the PhoneGap device ready), then the appropriate event will be fired automatically. If you read the docs for the events (http://docs.phonegap.com/en/2.7.0/cordova_events_events.md.html#online) closely you will see that they demonstrate using the body load event. What may not be clear from the docs though is that even though your connection may not change, the event really is fired for you. Here is an example that I've slightly modified from the docs. Using this way of handling the events, I would not need a check in onDeviceReady. Thanks go to fellow Adobian Shazron for pointing this out. So... do you have to use this way of handling it? To be honest, I prefer my way. It is a bit more coding, but I'd rather not have onload event with logic and a ondeviceready. My way just "feels" better to me, but I reserve the right to change my mind in the next five minutes. ;)

Probably not terribly useful to my readers as I've blogged this before, but I wanted to create a quick video tutorial on how to install the Ripple Emulator for PhoneGap developers. Feel free to share and give to team members who may be new to PhoneGap Development.

Ever since day one at Adobe I've had an odd issue with Outlook on my Mac. About 3-4 times a day it would 'forget' my password. As soon as I entered my password it worked, but it bugged me that I had to keep re-entering it. I Googled but never found the right answer. I deleted and recreated my profile numerous times, but it never helped. Finally, Terry White (fellow Adobe evangelist!) made a simple suggest. Instead of entering my password in Outlook, I should be doing it in the Exchange settings via System Preferences. So first you go here... And then click Details: That was it. Seriously. I can't believe I didn't figure that out earlier, but every single time I tried to fix it by Googling around I never came across this solution. (Probably because it was too obvious. ;)

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 »

I know, I know. The title sounds like SEO-link-bait, I apologize. I want to talk about something that I'm fairly excited about, and I hope it excites you as well.Last week I had the pleasure of listening to Dan Callahan give the keynote at cfObjective. I didn't get a chance to meet him in person (I basically ran to my presentation and then to the airport), but I greatly enjoyed his talk. His central theme was a simple one - it is time to learn JavaScript. This is a message that I just kind of assume that people already know, but as I still encounter people struggling with client-side development, it is apparent that we (we being the greater web community) still have quite a bit of growing to do. If there was one thing I would have added to Dan's talk it would have been a reminder that web developers are probably also somewhat behind in their HTML knowledge as well. I've been using HTML since 1993 or so. I spent a long time doing just server-side development for a while but even then I was still generating HTML. But at least once a month I'm reminded about some particular tag or attribute that I've forgotten about. Don't get me started about CSS. Every time I remember that you can specify hover stuff in CSS I remember how many times I wrote the same damn code to highlight menu items with JavaScript. I've made it my mission over the past few years to focus my energy in this direction. Any one who reads this blog or listens to me give presentations know this. Developing for the web can still be pretty darn frustrating, but at least the tools, and the environment, are growing in leaps and bounds. There's some growing pains here, but my god, there's growth. That is why I'm so excited to be hearing more and more about Web Components. Web Components refer to a few different technologies (that I'll list in a moment). But in general, they represent an incredible change in the web. To me, they truly are "Web 2.0." For the first time you'll be able to define new building blocks (tags, behavior, design) by following web standards. You'll be able to extend the web. That is awesome. So what are Web Components? In general, they describe the following technologies/specs: Templates Anyone who has worked with templates in JavaScript know how powerful this can be. Templates allow you to create reusable blocks of content that can be added to the DOM with JavaScript. As a simple example, imagine your using AJAX to fetch content from the server. As this content comes back as pure data, you need to write this out to the DOM. While you can certainly just create large blocks of HTML in JavaScript strings, this gets unwieldy pretty darn quickly. Hence the rise of multiple JavaScript template frameworks. The Template feature will provide native support for this. You will be able to use a template tag within your HTML document. The content in the tag is not executed until you actually clone the template and add it to the DOM yourself. So any images or script blocks won't be loaded until necessary. To be clear, this isn't the exact same as something like Handlebars.js. You don't get token replacement. But it is native to the browser itself which means less additional code. You can read more about the spec here: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html Shadow DOM Shadow DOM is - for me - the hardest concept to get my head around. I probably will not do a great job describing it, but in essence, it is a way to create a "black box" style system for content. Let me give you an example. Imagine you are writing some HTML that is meant to be consumed by someone else. Your HTML is just a H1 tag and a paragraph. You want to style this content, but in order to do so, you have to ensure your CSS does not conflict with anything in the parent document. An iFrame can solve this, but iFrames create other challenges as well. With the Shadow DOM, you can essentially say, "This CSS will apply to thi

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 »