Raymond Camden's Blog

OSX Outlook keeps asking for a password

Wed, 22 May 2013 16:39:00 -0400

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. ;)

The Future of the Web

Wed, 22 May 2013 09:24:00 -0400

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 this block only. Period. Nothing will leak out or in." Again - I'm not the best person to speak on this. You can read more about it at the spec (https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.htmlHTML5 Rocks article on the topic.

Custom Elements

The most exciting part of web components, for me anyway, are custom elements. As you can guess, they allow you to create new HTML elements. Right now they are prefixed (x-), but if you have ever wanted to define your own markup, this will allow you to do so. You get full lifecycle support (ie, knowing when your element is loaded, shown, etc) and you can even use this feature to extend existing elements. Of course, you can also tie your own JavaScript events and mix in both templates and the Shadow DOM. If you have ever used something like jQuery UI's Tabs to add tabs to your site, web components will allow you to do it all via web standards.

HTML Imports

The final piece of the puzzle is HTML imports. Essentially, once you've defined a custom element, applied some layout to it via the Shadow DOM and custom behavior, you can then create a reusable template that can be shared with others. In the same way you import a style sheet, the link tag will allow you to import custom elements. For example, x-tab or x-cowbell. You can find the spec for this here: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/imports/index.html

So What, I Can't Use It Now!

I bet you're asking, how well is this stuff supported? Right now support is pretty limited. In fact, custom elements aren't supported at all yet. The features that do work now are limited to Chrome and Firefox Nightly. The specs are still in development. Keep in mind though that a majority of our major browsers now are moving to a continuous update cycle. If you are still of the mindset that you don't need to care or pay attention to web standards than you are failing in your job as a web developer. Want to know more? There is an awesome, and short, video by Eric Bidelman of Google that you can watch on this topic. I've embedded it below. You can also find his slide deck here: http://www.webcomponentsshift.com/. Due note though that you are suppose to click the right arrow to start the presentation. The initial gray screen confused me a bit and I assumed something had broken.

Infinite Scroll Example with ColdFusion

Tue, 21 May 2013 14:34:00 -0400

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 worst 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 it's 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 several 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.

Overall, 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.

ColdFusion Summit Announced

Mon, 20 May 2013 20:03:00 -0400

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!)

Capturing camera/picture data without PhoneGap

Mon, 20 May 2013 10:31:00 -0400

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: <input type="file" capture="camera" accept="image/*" id="takePictureField"> 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.

Converting a list of dates into a shorter, combined list

Sun, 19 May 2013 09:03:00 -0400

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 is 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 date 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 its own function. But I was imagining 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.

Note to folks attending cfObjective and attending my sessions

Thu, 16 May 2013 06:06:00 -0400

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.

ColdFusion Job Opening - healthendevours.com

Wed, 15 May 2013 05:51:00 -0400

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.

Forms not working on your ColdFusion server? Size matters.

Tue, 14 May 2013 08:55:00 -0400

I've come across multiple people lately who have been bitten by this so I thought a quick blog post would be useful for my 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 APSB12-06. Edit:
A few minutes after I posted this blog post I tried a quick experiment. In ColdFusion 10, you can finally now take form fields of the same name and use this as an array. If you add this.sameformfieldsasarray = "true"; to your Application.cfc and post 2 form fields with the same name, their value in the form scope will be an array. I recommend this setting in general as a list (the normal behavior) cannot be reliably decoded. Turns out, if you use the same field name, you can post any number of form fields you want. I tried with 200, no problem. If you also do the sameformfield thingy, the values work just fine.

Hear me wax poetic on Nerd Radio

Mon, 13 May 2013 16:54:00 -0400

Ok, maybe "poetic" is a bit much... but you can listen to my Nerd Radio interview here: MAX Day 3: Ray Camden and Stupid Questions

Ray Camden, Adobe Creative Cloud Evangelist, talks with us about his sessions at MAX covering topics like PhoneGap Build and web development tools.

Thanks to Leif and and Garth for inviting me!

JavaScript Design Patterns - The Revealing Module Pattern

Mon, 13 May 2013 06:53:00 -0400

It has been a few weeks (ok, a few months) since my last blog post on JavaScript design patterns. I'd apologize, but frankly, it will probably be a few more weeks until I blog on this subject again, so hopefully people aren't expecting a fast series here (grin). As a reminder, the idea behind this series is to create real, practical examples of various JavaScript design patterns based on the book, "Learning JavaScript Design Patterns" by Addy Osmani. (See my review here.) In this blog entry I'll be discussing the Revealing Module pattern.Addy Osmani describes the Revealing Module pattern as:

The Revealing Module pattern came about as [Christian] Heilmann was frustrated with the fact that he had to repeat the name of the main object when he wanted to call one public method from another or access public variables. He also disliked the Module pattern's requirement of having to switch to object literal notation for the things he wished to make public.

There's two main issues here. First, the concept of "repeat the name of the main object when he wanted to call one public method from another..." If your only experience with the Module pattern is based on my previous blog post, then this may not make sense. Let's consider a simple example. I've got a simple module here called revealModuleTest. (And yes, this isn't a "real world example", but I wanted to demonstrate the issue with a simple block first.) My module has one private method, and three public methods. The first one, doPriv, simply wraps a call to the private method. The second public method, pub1, just returns the number 2. Finally, testpub, just makes use of pub1 and multiplies it by two. Note the three tests at the bottom. As the comments suggest, the final method will fail: Uncaught ReferenceError: pub1 is not defined Why? When the result of the module (everything in that return) is returned back to the caller the scope has changed such that pub1, by itself, is no longer addressable from testpub. You won't have this issue if a private method calls another one, but you will definitely run into this with the public methods returned by your module. (I don't think I did a great job explaining this - I may come back and flesh this out.) The fix is rather trivial - simply use the same API you would in your own code calling the module: The second thing Heilmann talks about is the switch to using object notation for defining methods. Everything in the return block is using object notation. Personally, this doesn't seem like a big deal, but all things being considered, I would prefer to write more code in function x() syntax versus x:function(). If it sounds like the Revealing Module is just a cosmetic change, that would be fair I think. But don't simply dismiss it. Anything that makes you quicker, more efficient, etc in your development is probably a good thing. I'd also argue that the issue with "public calling public" is something you could easily accidentally trip into. If the Revealing Module pattern makes that easier to avoid, then it is yet another reason to consider it. Let's look at an example of this - again - using my kinda stupid example. As you can see, this isn't a radically changed version. It has the same smell, but is just structured a bit differently. Note that all of the real logic is in private functions. The return block is now far simpler - it just provides the public API. Ok, so how about a real example? In my previous blog post I created a diary application that allowed you to create and read diary entries stored in WebSQL. I defined my Diary as a module. You can view that source here. To modify this to match the Revealing Module pattern, I moved everything into private methods and created a much simpler return block. So what do you think? I have to be honest. When I first read about this pattern, I really didn't think much about it. As I said, it seemed just cosmetic. But after seeing the change to my Diary module, it just... feels better. I didn't put this up as a 'live' demo since the functionality is the exact same as before. (And as a reminder, it only works in WebKit browsers, which is bad, and will be addressed later.) If you really want to try this, you can download the code from the last entry and drop in the new diary. Since it is has the exact same API, everything will just plain work!

Missed MAX 2013? How to catch up...

Fri, 10 May 2013 16:11:00 -0400

This year was my second MAX as an employee and was both exciting - and pretty tiring. If you weren't able to make it though there is an easy way to catch what you missed.

Keynotes

Monday's keynote was focused on our product announcements and featured our first hardware announcements ever - Mighty and Napoleon. If you haven't heard yet, Creative Suite is now Creative Cloud. You can find out more at the FAQ or feel free to just ask me. By the way - the hardware announcements were a complete surprise to me! Tuesday's keynote was cool as well. It focused on four different creatives discussing their process and showcasing their work.

Sneaks

There isn't a filtered list of the sneaks yet, and it looks like they aren't even all online (there were 12 total), but if you go to the AdobeCreativeCloud channel on YouTube, you can find a playlist called Adobe Max 2013. In this playlist are 6 of the 12 sneaks. Unfortunately, both of the Brackets sneaks are not there. I'm going to do a separate blog post on Brackets and what was sneaked later.

Sessions

Finally, you can view most, but not all, of the sessions, on Adobe TV: MAX 2013 - The Creativity Conference. Note: Not all of the sessions are available currently. For example, two of mine are still being encoded. (I'll blog when each one becomes available.) But there's quite a bit ready now and some damn interesting stuff there. (And to be clear, some great developer content!)

MAX Session: Advanced PhoneGap Build

Thu, 09 May 2013 21:49:00 -0400

Oddly, the last of my Adobe MAX sessions is available online now but none of my earlier ones. I assume they will show up in the next day or so. But for now, enjoy my eloquent presentation on the more advanced aspects of using PhoneGap Build. You can download the source code for the sample apps and slide deck as well. As always, I hope this is helpful!

How I'd sell unit testing...

Wed, 08 May 2013 14:48:00 -0400

Someone came up to me after my MAX session on web development debugging and asked for some advice on how to 'sell' unit testing to his clients. This was my response:

Simple. Tell the client you feel unit testing is so important that you're willing to talk about it with him face to face. In fact, you'll even fly him to your location. In order to save money though you're going to use a budget airline that skips testing.

Update to my Edge Inspect Viewer

Tue, 07 May 2013 14:55:00 -0400

Many moons ago I blogged about a proof of concept I built that allowed you to view Edge Inspect screen shots via a nice web interface. This was built in Node using the Express framework. I've finally gotten around to doing some updates to it as well as pushing it up to Github.First, I applied the Topcoat UI framework. This is an open source UI framework for desktop and mobile available for forking on Github. Here is a screen shot of the app in action: And here is a shot of the detail view (I'd like to add a bit more detail here): New features include the ability to filter by operating system or device. Here's a filter on Android: So, like it? As I've said before, I'm still rather new to Node so take this code with a grain of salt. You can download (or fork and improve!) here: https://github.com/cfjedimaster/inspectviewer