Sarah Jedrey

Marketing Coordinator / Video Editor

Prove you’re a human! With games!

One of my jobs is to track down interesting, pertinent articles and reduce them – and their URLs – to Twitter-friendly lengths. To get those links short, I use Ow.ly.

Full disclosure: I chose it because it was easy to remember and, at the time, had the fewest number of steps and sign-ins to go through. Lazy? Yes. I’m human.Screenshot of test

But I recently went through my URL-shortening routine and discovered that the normal CAPTCHA – those little boxes of text that look like someone scanned a photocopy of a water-damaged book printed in the 1630s – wasn’t there!  Instead, you just have to click “Shrink it!”

What pops up then is an interesting intersection of gamification, tech security, and a possible accessibility nightmare. A randomized, simple game shows up in which you drag the appropriate animated image to a predetermined spot. “Make lemonade”, the game requests, and if you drag the lemon and the ice – but not the basketball – to the pitcher, you have proven you’re a human. Your reward is the shortened URL.

Now, I’m not a big CAPTCHA hater. I’m quite good at deciphering the blurry letters and the s that looks like an f – again, text from the 1600s – and it never is unduly time-consuming for me to use the traditional CAPTCHA. However, if I remember correctly, computers are getting better at making the same distinctions I find so simple, and security folks have been scrambling for a good way for humans to prove their humanity without enraging every one of them. So I see why they upgraded their methods and made sure those upgrades were in a game form.

Matrix staffers tried it out, and most were conservatively positive about it. Oh, one person didn’t mind, and another loathed it, but most saw that this new method could be effective with a few tweaks. I’m mainly concerned about accessibility; there is an accessibility icon a user may click to get a different task, but since I’m able-bodied, I don’t think I’m in a position to judge.

You should go try it out.

Tell us what you think about Ow.ly’s replacing CAPTCHA with its new game.

James Wood

Programmer

ColdFusion 9 and ajax calls

I’ve been using ajax and ColdFusion for a long time with great success. Just
recently, I have been working on a new site that is on CF9; I know I’m behind
the times!

For years now (at least it seems that long) I’ve simply been passing my
variables from JavaScript to my cfc’s without any alterations.

I set my cfajaxproxy, define the cfc and give it a jsclassname, e.g.

    <cfajaxproxy cfc="ajax.ajaxFile" jsclassname="ajaxJSClassName">

On my js page I instantiate the class:

    var myAjaxJSClassName = new ajaxJSClassName();

And call the function in the cfc something like this:

$(document).ready(function(){
    $(".className").click(function(){
        curElem = $(this);
        curID = $(curElem).attr('id');
        results = myAjaxJSClassName.cfcFunctionName(curID);
    });
});

Fine. Not a problem. All works wonderfully.

If you opened firebug you can see the params of the ajax call and there
would be something like: argumentCollection{“variable1″:”12345″,”variable2″:”67890”}

I moved the exact code over to a CF9 site and I kept getting “WDDX packet
parse error at line 1, column 1. Content is not allowed in prolog..”

I tried so many things it was unreal. Stripped things down to the bare
bones. Updated JQuery. Took it out of JQuery. You name it, I probably tried
it.

So, back to the trusty firebug and I see that in the params the
argumentCollection was “51838EEB9C” no matter what I passed. I searched and
searched and couldn’t find anything related to this.

So, I’m now on the verge of removing the ajax functionality when I happen
across Raymond Camden’s site. It’s not exactly what I’m experiencing, but
it’s close enough!

So I change up my JavaScript to be:

$(document).ready(function(){
    $(".className").click(function(){
        curElem = $(this);
        curID = $(curElem).attr('id');
        var mydata = {data:[curID ]};
        $.post("/ajax/ajaxFile.cfc",
        {method:"cfcFunctionName",argumentCollection:$.toJSON(mydata),
        returnFormat:"plain"}, function(res) {
        })
    });
});

And wouldn’t you know – everything works fine now.

I’d like to know exactly why it wasn’t working in CF9. I presume that it has
something to do with converting the data to JSON, but try as I might to
convert it and put it back into my old code, I just can’t get it to work.

I’m sure that there are some smarter people out there than I that may well
be able to help me out. In the mean time any one else having such issues,
try not to bang your head against the wall for too long and embrace JQuery
even more. :)

UPDATE – 4/12/2013
So after another bout of hair pulling I came across some other articles.
Another Raymond Camden and also something from Andy Scott. The most helpful was the comments from the Raymond Camden article about caching of the scripts folder in the CFIDE folder.

I did a lot of things so I’m afraid I’m not completely sure which fixed it. But in the end I had a different copy of the cfide/scripts/ folder called scripts_901, and I changed Default ScriptSrc Directory in CF admin under settings. This seemed to resolve the issue. I then subsequently changed the name of the old scripts folder, and renamed the script_901 to be scripts, updated CF admin again so that everything looks like it was originally.

I hope this helps.

Sarah Mills

Senior Designer

HTML5 vs. Flash: The home game

The opening screen of Waste Creative's Flash vs. HTML5 site.

The opening screen of Waste Creative’s Flash vs. HTML5 site.

Last year, two of our front-end designers gave a great talk about HTML5 and CSS3 to DC Web Women.  Let’s just say we’re fans.  That’s not to say that we hate Flash, but with mobile use getting bigger and bigger all the time, and with some platforms not supporting Flash, HTML5 is just going to get more important.

These guys at Waste Creative built a game in Flash called Waste Invaders; then they ported it to HTML5.  They compared the two and released their findings on this beautiful parallax scrolling site (made with HTML5 and laid out in Flash, actually!).

The site’s beautiful, and the game’s pretty fun! Go look!

How do you feel about these two tools?

Alan Gunn

Programmer

Getting the Most Out of Solr

Solr homepage

Solr, a free, open-source search platform from the Apache Lucene project, is great search engine, but you can use it for much more than that. In addition to its amazingly customizable, high-performance search capabilities, one can use it as a  content management system (CMS) engine to display public-facing web pages, much the same way that Drupal does some of its content management on its public side.

Some content management systems are custom-built. Others are like the well-known WordPress and Drupal:  frameworks that have their own way of displaying CMS content to the public using a variety of APIs and methods. Often, these APIs can be complicated, requiring a fair degree of programming or coding skill. Solr, on the other hand, provides a very intuitive way to extract content from a database and display it to the public.

One of Solr’s many capabilities is its data import handler (DIH). This capability allows one to configure Solr to read almost any database and index its content.  This in itself is not terribly remarkable; however, it gives a very simple way to extract content just as one would search for things on the internet using search engines like Google, Bing, etc.

Solr can be used to retrieve content by searching for certain taxonomies or tags, which is a function of most content management systems on the public side. The difference here is that a person doesn’t need specific coding skills in any particular language to be able to retrieve desired content and display anywhere they like in a page. Once a few simple tools have been built by a developer – in particular, providing a simple API whose input is a search pattern and whose result is a set of search results – Solr provides everything that a non-developer would need to display content.

An excellent case study is the Carnegie Endowment for International Peace, a private, nonpartisan, nonprofit organization dedicated to advancing international cooperation and promoting active US engagement across the globe. Their in-house web development team worked with Matrix Group to use a combo of Solr and a simple API to generate content by simply providing search queries and then displaying the results of those queries on their site.

The advantage here is that their team doesn’t have to understand the particulars of the site’s CMS but only has to come up with the right query to extract the right results. This freedom allows them to easily construct new web pages with no developer assistance whatsoever. Not only is this a cost-saving convenience but it also yields performance gains. Because Solr has advanced caching abilities, queries that generate content often outperform traditional SQL-based retrieval methods. In addition, by using Solr a security gain is realized; a Solr query is not vulnerable to SQL Injection attacks.

Solr, when used as a content generator, provides an intuitive, non-technical integration with almost any SQL-based CMS. This middle-ware approach is easily scalable, affordable, and often boosts performance in the rendering of web pages.

Have you used Solr in this way? What did you think?

Alan Gunn

Programmer

CodeAcademy: Free online learning resource

Want to learn to code but just don’t know where to start? CodeAcademy

Codecademy offers a great online interactive resource to begin learning a multitude of coding languages, including:

  • Javascript
  • Web Fundamentals (HTML, CSS)
  • Python
  • Ruby
  • jQuery

Each interactive course is broken down into individual exercises where you use the built-in editor to write your code and output it in the interpreter.  At the completion of the course exercises, you can complete a project that will tie all the elements learned in the individual exercises together.

Helpful features, such as a Q & A Forum, help you along the way.  If you’re stumped or need a refresher of what a term means there is a Glossary for each programming language. And if you want a break from lessons to experiment with the code and concepts you are learning you can use the “Scratch Pad” which is a blank editor and interpreter to play around with.

To make things more entertaining you earn points for the number of exercises you complete and badges for completing courses, streaks for the number of days you did exercises, etc.

If you want to tie multiple code, concepts, and or languages together there are lessons to build projects and APIs.

It’s a great learning tool and best of all, it’s FREE!

What other great online learning tools have you discovered/used?