I Used Reflow, Now What?

reflow

One of the most frequent questions I get when I show off Reflow is:

Once you finish creating something in Reflow, what is the next step? How do I make this cool resize-y thing show up on someone else’s screen when they go to a particular website?

It’s a tough question that doesn’t get you a super slick and quick answer yet. What it will get you is a few hundred words of “Let me explain.”

TL;DR: There isn’t a good workflow between Reflow and site development yet. But I still think it can be useful to you. 

Let me explain. Reflow doesn’t create an HTML site. It creates an HTML composition. I’m not just being buzzwordy; it’s a design tool. You create compositions with it, not websites. You still have to take what you create in Reflow and hand it off to a developer.  If you look at the tool, you’ll notice there is no facility for adding things like links or workable buttons.  You can draw these things using rectangles, rounded rectangles, and text, but you can’t create something in Reflow that allows you to click anywhere in preview.  You’ll also notice that the preview is only supported in Chrome, because Reflow isn’t trying to solve cross browser issues. Neither does Photoshop — because design tools don’t handle cross browser issues. Reflow creates something like a Photoshop comp but in HTML so it can be rendered in the browser and that you can be resized and viewed in a range of different screen widths.

But, I saw it in my browser, it creates HTML — you just said it did?

Oh, yeah, that.  Um, sure it creates HTML – sub optimal HTML. You see, I’m originally a developer, so suboptimal is short hand for terrible. And terrible is shorthand for I didn’t write it by hand, myself, while complaining about how designers want things that can’t be done in HTML and CSS.  

Assuming one doesn’t care about that, maybe you just want to get stuff done while not whining about code quality.  OK, you can totally grab that code and use it to start your site.  The code is located in the assets folder in the same folder as your .rflw file.

Well that’s an inefficient and poorly designed workflow.

It’s not inefficient and poorly designed, it’s nonexistent. There is no workflow there. What I’ve told you to do is a hack. From Reflow’s perspective there is a brick wall between designing in Reflow and developing for the browser.  That might be a deal breaker for you, and if it is I’m sorry but I won’t lie and say there isn’t a wall there — you’ll only be madder at me when you figure it out.  But I will point out there used to be a brick wall between designing in Photoshop and designing in Reflow.  That is now gone. I can’t talk about future plans, yada yada, but assume that the Reflow team is annoyed by all the brick walls around here and are resting for bit after swinging a pretty big sledgehammer with the help of the Photoshop team.

So what’s your workflow with these tools?

Personally, I design in the browser first and then Photoshop. Basically, my design chops and more importantly my Photoshop chops need work. I start designing where I can be the most facile, where there is as little impedance between my brain and creative output as possible. For me that is the browser and some CSS, for you that might be Photoshop or a pen and paper.  Once I get things like color, font, and site nuggets done in the browser, I bring it back into Photoshop. In Photoshop, I tweak color, font, and base layout. I also refine ideas for site nuggets, and things like borders, shadows, color interaction, etc. Once I get it done there, I move into Reflow.  Of course, once I start in Reflow, I have to do a little organization. Then I use Reflow to figure out where I need break points in my finished design, and how I will want the parts to move around. I also use it to figure out what I did in Photoshop that looks great static, but starts to look bad once I start resizing and moving things. Once I’m satisfied, I move to coding by hand. I do use Reflow’s ability to export CSS snippets to speed up this process. I also grab the HTML from the preview version, but I rip out almost all of the HTML because Reflow doesn’t create things like lists, or blockquotes, and the HTML isn’t very semantic. Basically, I use it to get the text, just the text.

So that’s it, like I said, lot of explanation instead of slick answers.  My hope is that slick answers and no brick walls happen in the future. But until then, I think there is a place for Reflow in a web design workflow, it just doesn’t get rid of a lot of work on the development side yet.

Theseus – A Promising Reason to Use Brackets

brackets_iconFrom time to time, I show off Brackets, the Open Source HTML/JavaScript/CSS editor Adobe has been working on for the past year and half.  It’s a great bit of work, and it looks great. However, a lot of people point out that there are a lot of other code editors that can be used on HTML out there.  Which is is true – so let me show you a compelling reason to use Brackets: Theseus.

Theseus is a research project that brings debugging to JavaScript in the editor. Not just debugging, but crazy real-time debugging that’s easy to understand and jump right into.  Check out the explanation of Theseus over at the Brackets team blog. And then check out the GitHub repo.   Seriously, if you work with JavaScript, do it now – you won’t regret it.

Also, just as an aside, it turns out that Brackets is up for a Readers’ Choice Award from Linux Journal.  If you’re a fan please give it your support by voting for it.

BrowserLab is Free

A few months back I did a post about rewriting my site with HTML5. It just got reposted by DZone. It picked up a few reads including one from the Product Manger for BrowserLab, Bruce Bowman.

He took me to task for claiming that you had to be a CS5 customer to use BrowserLab. To quote Bruce:

While it is true that when registering CS5 apps, you are given an opportunity to also get a CS Live account, which includes BrowserLab, it is not required to buy a CS application – anyone can register for a free BrowserLab account, even if they don’t own any Adobe products. All that is required is an AdobeID. They just need to go to http://browserlab.adobe.com and follow the prompts to sign up.

Awesome, BrowserLab is free. Go forth and correct for the fact that browser companies love features and hate developers!

CFHTTP equivalent in Java. Really, Java, Really?

I was talking to my boss Kevin, and we were talking about how concise ColdFusion makes certain rote tasks, and he mentioned trying to duplicate CFHTTP in Java. He talked about how it went on for line after line, after line. I figured he was talking about something in the order of magnitude of about 2 or 3 times as much code.

He forwarded me a post on making HTTP GET and POST requests in Java. As the post shows it takes 12 lines of code just to import all of the classes you need. When you’re all said and done it takes about 30 or so lines of code to actually make a GET request. So it takes about 42 lines of Java code to duplicate the functionally that can be called in 1 line of ColdFusion using CFHTTP. I never noticed it was that big a difference. All that versus:

 

 

Now, I’m sure there are easier ways of doing this. And after you build the class and method once, you can just reuse the object repeatedly. But in this day and age of SOA, SOAP, and REST, that seems like something that should be built into the language.

I’m not trying to make this a bash Java post. Really I’m not. Java can do lots of things ColdFusion cannot. In fact Java networking is this verbose because it has more options; it can do low level socket communication. I know, when I’ve needed it in ColdFusion, I’ve dropped down to Java to write it.

But as developers, I think there are lots of places where we don’t add value, but are still forced to work:

  • Getting reporting data out of a database? You add value by writing good complex SQL, but not by writing the database connection code.
  • In basic database applications, you add value by designing the database, but not by writing CRUD code.
  • In a REST and SOAP world, you add value by mashing up services people have thought of combining, not by making the HTTP call to get the data.

I know frameworks, libraries, code reuse, and other encapsulation techniques are ways around this.

ColdFusion as an abstraction layer on top of Java is another way. It’s the way I do it. And because I do it that way, I never have to write more code then I have to for an HTTP GET request, or email, or database connection, or .NET integration, or Exchange call, or Spreadsheet creation, or …

 

How to Get Started Developing in ColdFusion

I’ve seen a couple of tweets around this, and instead of trying to answer every one in 140 characters, I’m instead going to point people to this article.

Get the Developer’s Version of ColdFusion

The developer’s version of ColdFusion is free. It’s not a trial version; it is just free, but with a few restrictions. It is limited in the number of IP addresses it will answer to, and certain featured like cfdocument and cfchart get watermarks placed in their generated content. If you purchase a licensed copy, this version can be upgraded without a reinstall.

In addition to the Developer’s Version a Full trial version is available. It is not limited in ability, but will only run for only 30 days. If you purchase a licensed copy, this version can also be upgraded without a reinstall.

Download the free developer’s version or trial version of ColdFusion

Also I will point out that if you are a member of the Faculty, Student Body, or Staff at a Higher Education institution using ColdFusion for academic purposes, then you are eligible for a free license.

Apply for a free license of ColdFusion for Education.

Pick an Editor/IDE

There are a few options to choose from for editing ColdFusion. Obviously any text editor will work, but there are a few choices if you are looking for an editor with language support for ColdFusion.

Dreamweaver has color coding, language reference and RDS integration with ColdFusion. It is an especially attractive option if you are coming from another web technology and already working with it. If not you can also try it out its demo version.

Download the trial version of Dreamweaver

CFEclipse is a pretty full featured editor for ColdFusion. It is an especially attractive option if you are working with Eclipse already as a Java developer, or using Flex Builder.

Getting started with CFEclipse

Finally, although it is not available today, the Adobe project currently named “Bolt” is a ColdFusion IDE. I’d bet on it becoming the standard tool for ColdFusion development when it comes out.

Learn more about Bolt

Learn about ColdFusion

Pretty much everyone will point you to the Adobe ColdFusion Web Application Construction Kit, Volumes 1, 2, and 3. Combined they are pretty daunting, but you are just getting started, so buy volume 1 for now. Disclaimer: the first author of the book is Ben Forta, for whom I work. I would still recommend it even if I didn’t.

Get the book at Amazon

Also available is community member John Farrar’s book ColdFusion 8 Developer Tutorial. I haven’t read it, but check it out and see if it is more your style.

Get the book at Amazon

In addition to the book route, there is a ton of information available on the Adobe Developer Center. The include simple how to’s and higher level articles like theory behind high availability.

Connect with Other ColdFusion Developers

There are several ways to tap into the ColdFusion Community. Here are just a few:

Also deserving special mention is ColdFusionBloggers.org. This site was setup by Ray Camden, and is a ColdFusion only blog aggregator. Ray’s pretty aggressive about policing the list (and publicizing the site 😉 ) so in many ways it’s a better resource than AXNA.

ColdFusionBloggers.org

Get Open Source ColdFusion Code

A few years back Ray Camden started RIAForge as a place to store Open Source applications written for ColdFusion and Flex. Currently it has over 600 projects. Check it out before you try and reinvent the wheel.

RIAForge open source code for Adobe technologies

Online Video Presentations

There are a few collections of ColdFusion audio and video presentations by some of the best voices in the community.

I’ll add more to this as I find new ones, or people point out to me which obvious ones I’ve forgotten or not explained enough.

Name This Product

I’m going to do a little exercise. I am going to describe a product. Tell me what technology product I am talking about:

  • Niche product
  • Users are often derided for using it.
  • Outside pronouncements of its obsolescence are common
  • Users are passionate often to the point of zealotry.
  • Users claim to be much more productive because of it.
  • It holds a minority market-share.
  • It’s commonly criticized for costing more than the competition

So… What am I talking about?

Apple, what product did you think I was talking about?

I guess I’m trying to point out, that I’ve been thinking a lot about a particular product’s place in the collective common wisdom, and perhaps we need to change it. But before we change it externally, we need to make sure internally in the community, we know what we offer.

Stop Looking for ColdFusion Developers

One of the biggest complains I hear from management types about ColdFusion is that they can’t hire good ColdFusion developers. I think that this occurs because people often overlook one of ColdFusion most accepted benefits. ColdFusion is exceedingly easy to learn. Which leads me to my biggest piece of ColdFusion hiring advice – don’t look for good ColdFusion developers, look for good web developers, if they know ColdFusion, great, if not, teach them, or let them learn it.

The argument I hear back on this point is “we don’t have the time of resources to train someone; we need them to hit the ground running.” I think this is penny wise pound foolish. Based on anecdotal evidence only, I would contend that it takes an average web programmer about 1 or 2 months to learn ColdFusion. (This assumes they know HTML, CSS, SQL and another server side language.) I’ve seen some ColdFusion job hunts take upwards of 9 months. You can’t afford the month to train an employee, but you can be without them for 9 months? That doesn’t make a lot of sense to me.

Add to it that for the cost of 1 or 2 months, you get a ColdFusion developer who knows another language. Developers who know more languages tend to be better. ColdFusion programmers that know Ruby for example are usually better Object Oriented ColdFusion developers through the knowledge they picked up in Ruby.

Now, I’m not arguing that you shouldn’t hire a ColdFusion developer if you can find one. I happen to know a few that are looking for work. I also don’t mean to suggest that finding a good web developer is necessarily that much easier than finding a good ColdFusion developer. Finding “good” people is never easy, but I am arguing that you need to increase your chances of finding someone to fill your position. You can do this by opening up your search criteria, and letting one of the major selling points of ColdFusion actually work for you.

What do you think, does this agree with what you’ve seen in the job market of late?

Digest Authentication in ColdFusion

I’m working with the ConstantContact API webservice, and ran into a slight problem. The API uses Digest Authentication, and ColdFusion does not support Digest Authentication in cfhttp. I found this out by reading in the live docs that:

The cfhttp tag does not support NTLM or Digest Authentication.

The ConstantContact forums pointed me to a custom tag cfx_http5. But I hate CFX tags. I like to place as few dependencies on the ColdFusion Administrator as possible when I code. CFX tags also tend not to make the trip the first time in server migrations or emergency moves. It might be my own prejudice but, no, there will be no custom tags.

Which leaves me to implementing some Java client, as luck would have it there was ample documentation on doing this. I just needed to use the open source Apache HTTP client. To work with them, I had to add them to the class path, or add an entry in the ColdFusion Administrator class path list. That would have bought me nothing, as I didn’t want to go through the administrator.

This left me looking for a way to dynamically call jar files. If only there was some way to dynamically call jar files in ColdFusion… preferably written by someone with a marsupial pouch…. Ohh wait, Mark Mandel wrote the Open Source project JavaLoader, which allows just that. Hmm, and Mark is a mammal from Australia. Things are looking good.

So I was able to build my http client with Digest Authentication. I added some code that formatted the response like a cfhttp struct, so that if there were other advantages to this method I could just swap out this for cfhttp in a pinch. The code is below in the extended section of this blog post.

I was trying to do 3 things with this post:

  1. Explain how to use Digest Authentication with ColdFusion
  2. Show how with ColdFusion Open Source community and ColdFusion’s ability to call Java, there isn’t much you can’t do with it.
  3. Further the rumor that Mark Mandel is a marsupial.

I hope I’ve done these three things for you.

var paths = arrayNew(1);
var rootPath = GetDirectoryFromPath(GetCurrentTemplatePath());
paths[1] = rootPath & "/jars/commons-httpclient-3.1.jar";
paths[2] = rootPath & "/jars/commons-codec-1.3.jar";
paths[3] = rootPath & "/jars/commons-logging-1.1.1.jar";
//create the loader
variables.loader = createObject("component", "javaloader.JavaLoader").init(paths);

var result = "";
var credentials = loader.create("org.apache.commons.httpclient.UsernamePasswordCredentials");
var HttpClient = loader.create("org.apache.commons.httpclient.HttpClient").init();
var httpGet = loader.create("org.apache.commons.httpclient.methods.GetMethod");
var AuthScope = loader.create("org.apache.commons.httpclient.auth.AuthScope");
var jURL = createObject("java", "java.net.URL").init(arguments.url);

if (len(arguments.username) and len(arguments.password) gt 0){
AuthScope.init(jURL.getHost(), arguments.port, arguments.realm);
credentials.init(arguments.Username, arguments.password);
httpClient.getState().setCredentials(authScope, credentials);
}

httpGet.init(arguments.url);
httpClient.executeMethod(httpGet);

result = convertHttpClientResponseToCFHTTPFormat(httpGet);
httpGet.releaseConnection();

return result;

var result = structNew();
var responseheader = structNew();
responseheader['Status_Code'] = httpGet.getStatusCode();
responseheader['Explanation'] = httpGet.getStatusText();
responseheader['Http_Version'] = httpGet.getEffectiveVersion().toString();
header = httpGet.getStatusLine().toString();

headers = httpGet.getResponseHeaders();

for (i=1; i lte ArrayLen(headers); i=i+1){
responseheader[getToken(headers[i], 1, ":")] = getToken(headers[i], 2, ":");
header = listAppend(header, headers[i], " ");
}

result['Charset'] = httpGet.getResponseCharSet();
result['ErrorDetail'] = "";
result['Filecontent'] = httpGet.getResponseBodyAsString();
result['Header'] = header;

if (structKeyExists(responseheader, 'Content-Type')){
result['Mimetype'] = GetToken(responseheader['Content-Type'], 1, ";");
}

result['Responseheader'] = responseheader;
result['Statuscode'] = responseheader['Status_Code'] & " " & responseheader['Explanation'];

if( not structKeyExists(responseheader, 'Content-Type') OR
FindNoCase("text", responseheader['Content-Type']) OR
FindNoCase("message", responseheader['Content-Type']) OR
FindNoCase("application/octet-stream", responseheader['Content-Type'])
){
result['Text'] = "YES";
}
else{
result['Text'] = "NO";
}

return result;

2009 Predictions in Higher Ed

Spurred on by Kevin Hoyt, who commented on my last post I have some predictions for technology in higher education as a whole.

First, a quick background. The economy sucks. This is good news and bad news for higher ed. Enrollment and applications will be up. Bad news, is that most institutions arenapost entirely funded by tuition. Money comes into schools from state governements and the federal government in addition to money from their endowments and donations. All of those sources will be down in the next two years at least. Also in the picture is that fact that because of institutional culture of tenure, and the compliance issues that come from taking federal money, most higher ed institutions cannot cut budgets by trimming employees from the books. Good news, you’ve still got your job, bad news, remember Ed who quit, you’ve got his too.

Cost savings will be sought elsewhere. This is going to lead to a contraction of commitments. Upgrades will be postponed. Technology investments (big virtual machine hosting hardware, SAN’s) will not be pursued.

So what will all this lead to…

Hosting
Up until now, a penchant for open source technology, and educational discounts have made schools prefer to host their own services a little longer than the rest of technological community. However, that was before the financial craptaculon. External hosting will be considered for applications which would never have been outsourced before. It’s already started for student email, IM, web sites, and storage. It will accelerate and be targeted for smaller burdens like staff email, intranet sites, and public websites.

Virtual Classrooms
Virtual classrooms where schools could sell an unlimited number of seats to an audience for a set cost has been a holy grail for a few years now. With cut travel budgets hitting continuing education dollars, and the rise in applications coupled with the pressure to bring in revenue, they will have no choice to squeeze every dollar they can. Expect a lot of activity here.

Development Language free for all
Because of the rise of hosting for previously unhosted solutions, there will be no lock in for particular platforms or languages. Want to try Ruby or make the switch to .NET? No worries, you don’t have to build an environment, just rent it. It provides opportunities for highly productive languages and solutions to re-argue their case to the higher education world.

Students
Students are going to be looking to either stay out of the job market for as long as possible, or get trained in skills that will more likely get them hired. Any schools out there have Flex or Ajax content in their program, congrats, your students are still marketable. Expect more focus on vocational skills, like specific languages to be the rage.


2009 Predictions

With the new year fast approaching my mind turns to what’s coming up in the next year.

Centaur
Centaur is slated to be released in 2009 as ColdFusion 9. I’m confident it will be. ORM and the IDE will be the most talked about features. Although ORM is talked about, it will be slow to move in to the mainstream of CF development. Considering the time it took to get CFC’s to be widely adopted, I think ORM will be what’s hot in 2010 but bleeding edge in 2009.

The IDE will be a big seller, and I mean seller. I think the IDE will be a for purchase and stand-alone product. I think there will be a lot of people developing on Bolt and Centaur for production ColdFusion 8 applications for some time to come.

ColdFusion Development
Apple will continue to gain market share among CF developers. Ubuntu boxes will also proliferate as Vista users with regrets can’t justify new hardware purchases but tire of Vista’s drawbacks.

Web Development in General
Rails and Merb joining together will cause the Ruby development community to get a major boost. The meme that “rails is cool, but not ready for enterprise” will really get challenged.

Technology in General
There will be an increase in problems due to companies putting off equipment upgrades in an attempt to cut costs. I think companies will continue to push more hardware outsourcing regardless if they experience a cost-cutting driven failure or not.

That’s all I have for now, if I think of more I’ll add…