Monday, 9 December 2013

trycf.com

G'day:
One of our CFML community colleagues has dun good. Abram Adams has created a site trycf.com, which deserve our attention and our support. It's based on the same concept as tryruby.org, which is also a handy site. Basically it offers CFML tutorials, which one completes interactively and in-browser, with a built-in CFML edit / execute window.

Gavin's already written up some stuff on it on his blog: "Online Interactive Learning - TryCF - Submitting your First Tutorial Walkthrough", but I asked Abram to describe trycf.com in his own words, and I'd post it here. So here it is:

Thanks for offering to blog about and help promote trycf.com.  The project has been a fun exercise for me and I hope will help in some small way to bring more devs to CF.

As you so eloquently summarized in IRC today, trycf is much like codeschool [ed: www.codeschool.com].  I really did start this project when trying to teach my 16 year old CFML.  I had been teaching him HTML/CSS/JS using interactive tools (like codeschool) and when it came to the server side stuff I sent him to learncfinaweek.com.  He read through for a bit, but never got past how to setup CF (day 1).  I could see then he was losing interest and so redirected him to tryruby.org to explain some back-end web development.  With that site he was able to immediately get his hands dirty in coding.  So, with that in mind I decided to develop an in-browser CFML "runner" that he could just code in without the headache of setting up a CF server.  After a couple hours I had a quick prototype and let him play with it.  From there the editor/runner evolved to become the centerpiece to the trycf site.

The nuts and bolts of tutorials:
Tutorials consist 1-n pages that each contain 1-n "exercises" which each have 0-1 CFML editor boxes.

Each cfml editor consists of multiple optional parts:
  • initial code that the student can interact with
  • unit tests that test the code the student submits and provides customized feedback when the code does not pass.  The tutorial author can do things like assertEquals("some value",somevar,"Did not equal 'some value'"); Here's a current list of supported asserts:
    • assertEquals(expected, actual, message)
    • assertIsDefined('variable name', message)
    • assertIsStruct('variable name', message)
    • assertIsArray('variable name', message)
    • assertIsObject('variable name', message)
    • assertOutputContains('regex', message)
  • "solution" which would show what the idea solution to the exercise is
This lets the tutorial author shape how the student interacts with the tutorial, and can be used to showcase example code, provide "broken" code that the student must fix or provide a blank editor that the user must code into to solve the question (like the quiz in the Introducing Variables tutorial).

The CFML editor also has some pretty cool error handling.  If the student screws something up it will give them a pop-over message on the line with the error (as well as highlight the line).  In some cases when you muck up a built-in function it will also provide the actual documentation for that function.  You can try it out on the trycf.com site by running: <cfset dateFormat()>.

I've got plenty more planned for the site such as the ability for authors to setup an environment for each tutorial.  Like setup a datasource, or include CFC files the student can interact with.  I also want to be able to "link" editors in a way that a user can code a cfcomponent in one editor and invoke methods from within another editor.  Other features such as saving/loading gists, making the editor embedable into any site, etc... are also on my to do list.

Probably way more info than you wanted, but there it is.  Create an account and play with submitting a tutorial (nothing is made public until I flip the switch, so have some fun with it).  The tutorial submission form is all AngularJS, which made it super easy.  If you get a chance, play around with the other tutorials on the site to see how they work.  When you break something, let me know :)

Finally, the contest details... You can see the details at http://www.trycf.com/tutorials/contest

You can also see what "powers" the site in the footer section, if you are interested.

Let me know if you have any questions.

I got Abram's permission to post what he sent me complete and unexpurgated, which I basically have above. I have corrected a coupla typos (at his behest).

We've got two online CFML-testing sites available now: trycf.com and cflive.net, both serving different purposes, and both bloody good.

There's a coupla other CFML tutorial sites out there: learncfinaweek.com as Abram mentioned, and learncf.com too. I wonder if it's worthwhile the bods from those to rejig their content to work on trycf.com instead, and just take a combined approach? I think Abram's approach is superior to those other sites (this is not to say those sites are no good, it's just trycf.com has got the edge, I think).

I'm really pleased new CFML resources like this are coming on line. It should help get CFML out there (provided we spread the word!).

Good work, Abram mate.

--
Adam