Saturday, March 30, 2013

crowdsourcing alien bill, and the ethical murk of "spec work"

On a microbrewery tour I saw the very clever logo for Idle Hands Craft Ales. The owner mentioned they got it by running a contest at http://www.crowdspring.com/. On a lark, I decided to sponsor a logo competition for my own "Alien Bill Productions". (My Atari 2600 game JoustPong was an "Alien Bill Production"... its been my goto fakey company for a long while.)
When I mentioned the competition on Facebook, a friend pointed out some folk think of this kind of 'spec work' as unethical. I can see some of their points, but I think their biggest (legitimate) concern is that it's a "race to the bottom", and that it might become tougher to make a good living as a designer. They also point out the problems of rip-off, generic logos and not having a holistic, market-savvy cooperative/iterative approach... neither of those final two points really applied to me, because I was able to clearly specify and give examples for the central design motif. As for the first point... this was kind of a lark, if I didn't have a site like this to turn to, I probably would have just scraped something together myself. Possibly I might have turned to one of my designer friends, but frankly I was interested in having more variety to choose form. 

My main discomfort with spec-work then, at least for small scale personal stuff like this, is that the people who do the non-winning designs see no money for their labors. I tried to rectify this somewhat by tipping the non-winners whose work I still liked generously. 

So, without further moral rambling, here isaudentia's winning design:
I liked the different perspective, and the use of huma-ish (or perhaps froggish?) forms for the eye and limb, while still keeping an iconic feel. In some ways what really sold me on it was the black-on-gray presentation on the lower left.

Some of the runner-ups were great as well, which is why I'm glad crowdSpring offers an easy "tip" option. sinss'  was pretty keen:
I loved the use of the character in the word Alien Bill itself. Having the Alien holding an eyeball was an intriguing choice-- kind of an "Alas, Poor Yorick" thing. 

sinapseuk did a 3D render of Alien Bill in a kind of robotic or spacesuit form:
I think that might have lost because I didn't want the logo to outshine any game I paired it with!

SalehaG had good use of cel-shading. Also a good use of a grey background... the entry came late without much time for revisions, but I would have been interested in seeing if the rear leg could be made to look less like a stump...

I likescriptink's choice of font, though the pose of the alien didn't really do it for me.
Finally,dynezt had an entry that was appealing retro:

The artwork reminded me a bit of Steve Jackson's The Awful Green Things from Outer Space which, if I'm 100% honest, might have been a subconscious influence on the early designs of Alien Bill.

So, in the end I'm happy to have done this, despite the ethical issues with "spec work" in general. I spent about the same as I did on James Harvey's commission that I use as the backdrop to the AlienBill.com as well as this one  (as well as the sticker on my iPhone and on my business cards) and while the results aren't as innovative (actually it may well have been an influence on some of the designs above) it's some nice results.

link about promises

Nice article about js promises: http://www.kendoui.com/blogs/teamblog/posts/13-03-28/what-is-the-point-of-promises.aspx

Friday, March 29, 2013

getting used to osx

Now that OSX is my main work machine, I'm adapting to it pretty well.

A while back I wrote why windows' taskbar beats osx' dock and I have to recant on part of it... I think I've adapted pretty well to cmd-tab switching apps rather than open windows. In particular, it's often useful to switch to Finder and see the context of the last 2 or so windows I've been shoving files around.

I still suspect OSX isn't quite as strong in its keyboard support (jumping words etc w/ ctrl-arrow key and what not) but I'm adapting to it as well. And sometimes I'm frustrated that it's a little tough to see if I'm in Chome or Firefox without looking at the top of the screen... but given how terrific it feels to have a bona fide terminal window, the tradeoff is probably worth it.

Sometimes I feel a little self-conscious going with Apple, because of a sophomoric "well that's what anybody who's anybody has done" factor. Though just recently cracked.com referenced a serious academic study that implies looking at the Apple logo makes you a bit more creative, by the power of association, than the IBM logo.
I'm Feeling Smarter Already!

Thursday, March 28, 2013

quick and dirty "put prompt over input" box

I'm sure there are libraries out there that do this more cleanly, but sometimes if I just want a quick prompt overlaying the input box, that disappears when they start typing:

CSS:
.promptwrapper{
    position:relative;
}
.overlayprompt{
    position:absolute;
    color:#cccccc;
    top:2px;
    left:4px;
}


JS:
function doOverlayPrompt(input,overlay){        

input.focus(function(){overlay.hide();})
        .blur(function(){
            alert(input.val());
                if(input.val() == "") overlay.show();
                 else overlay.hide();
                }).blur();
           
        overlay.click(function(){   
            input.focus();
        });

}

example HTML:
<span class="promptwrapper"><div class="overlayprompt editFIELD_prompt">FIELD</div><input class="editFIELD"></span>

example JS:
doOverlayPrompt($(".editFIELD"),$(".editFIELD"));


So looking back right now I see this is a bad idea for 3 or so reasons:
  1. it's better for forms you expect to be blank, vs. stuff a user would come back and edit later, because they might not be able to tell what field is what.
  2. damn it, I've written this before!
  3. And worst of all html5 has a nice "placeholder" tribute for input tags now, which does almost exactly this. As long as you don't need to support IE earlier than version 10....
Sigh.



OSX: terminal history tools: ctrl-r

Ah, more pleasure from the stock OSX terminal...

Obviously, there's the old "up/down arrow" to get back to commands you've previously entered so you can rerun or modify and rerun them.

Sometimes the command you want is far back though. For a long time I knew about "!"... so typing
    !cp
would repeat the last cp command.

And that's good, but sometimes it feels like Google's old "I'm Feeling Lucky" button... I may have used "cp" since the time I was thinking of.

My friend Jonathan pointed out "ctrl-r" in Terminal... press it and it starts an interactive search-- in this case I could type "cp" and it would show me the last copy, then I could accept it by hitting return, or hit ctrl-R again to find the one before that, etc.

He also directed me to this lifehacker page that suggests bumping up the size of your command history.

Tuesday, March 26, 2013

visceral design

Good article on visceral design: http://mysterioustrousers.com/news/2013/3/25/visceral-apps-and-you

I prefer the term "juicy" (or sometimes "kinaesthetic") but it's about the same idea. A little bounce and motion goes a long way.

Monday, March 25, 2013

servlet with image upload and resizing

Continuing my recent trend of small notes from the trenches, to my future self:

my next Proof of Concept was image uploading. I was able to use the example at http://www.codejava.net/java-ee/servlet/code-example-file-upload-servlet-with-apache-common-file-api pretty much verbatim.

In the future I'd need to store a byte array, but the FileItem object has a .get() function that does just that.

For scaling there's the lovely library imgscalr. I then also had to learn about stuff like java.awt.image.BufferedImage and javax.imageio.ImageIO. The guts of my variation on the FileUploadServlets ended up looking like
InputStream instream = item.getInputStream();
BufferedImage origImg = ImageIO.read(instream);
BufferedImage smallImg = resize(origImg,100);
ImageIO.write(smallImg, "jpg", storeFile);
(I was assuming the filename already ended in ".jpg")

The java.awt and java.io are said to show up in "rt.jar", and on our development system they seemed to be included in the j2ee.jar runtime dependency I was using.

Imgsclr also does cropping; that would imply more of a need for a nice UI, though, perhaps using Jcrop. (Probably beyond the scope of my curent project.)

In the scope of my current project is storing stuff in the database rather than the file system; Nick who is handling the DB side says I can store byte arrays, and according to this page that will look something like
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write( originalImage, "jpg", baos );
baos.flush();
byte[] imageInByte = baos.toByteArray();
baos.close();


(I'm not sure if that is the most efficient use of Streams, but should be good enough for our purposes now.)

Man. Do servlets count as UI? Sometimes I wonder.

Friday, March 22, 2013

JQuery, JSON, and Java Servlets...

So my blog has gotten a bit dry lately. It has to do with my new job: there's some flashy stuff, but less than at my old gig, and I'm having to learn new technologies, some of which are a little dull.

Anyway, a while back I wrote about a Node.js-based raw "POST" echo tool I made because I was having some troubles do "real POSTs". Well, like they say, you know what 'experience' is? It's what lets you recognize a mistake when you make it a second time.

So, future self, if you really want to POST raw JSON from jQuery (and it might not be that important to, for a lot of stuff the x-www-form-urlencoded stuff works fine), you need to make sure your jQuery ajax looks something like:
    $.ajax
    ({
        type: "POST",

        url: 'infoservlet',
        dataType: "json",
        contentType:"application/json",

        data: JSON.stringify({'abc':['defg','ghij']}),
        success: showGoodResult,
        failure: showBadResult
    });

The bits in red are what I tend to forget.

So I'm also writing the java side of things, which again is something I haven't done in a while. Servlets are a much older technology than JSON, and sometimes they feel like it, so getting the two to play nicely is not quite as graceful as it should be.

My recommendation for the Java JSON is JSON-simple (more on that below). It uses JSONObject for the maps and JSONArray for arrays and that's 90% of what you need. 

So apologies for the following code, its been a long day, and I'm a little goofy when I write my "teach myself" stuff...

To show that I could output JSON Jquery could read I did 
     protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
            resp.setContentType("application/json");
            outputTestPage(new PrintStream(resp.getOutputStream()), "TEST");
    }

 private void outputTestPage(PrintStream out, String result) {
        out.println(getStuff(result));
    }
    private Object getStuff(String s){
        JSONObject obj=new JSONObject();
        obj.put("name",s);
        return obj;
    }


And indeed the jQuery ajax success function got a JSON result with "name" as a key and "TEST" as a value. 

To read the POST the above jQuery made, I found RawSushi's guide to getting the POST body and then did something like this:

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        BufferedReader reader = req.getReader();
        StringBuilder inputStringBuilder = new StringBuilder();
        String line = null;
        while ((line = reader.readLine()) != null) {
            inputStringBuilder.append(line);
        }
        resp.setContentType("application/json");
        String s = inputStringBuilder.toString();
        Object obj=JSONValue.parse(s);
        JSONObject stuff=(JSONObject)obj;
        JSONArray ja = (JSONArray) stuff.get("abc");
       outputTestPage(new PrintStream(resp.getOutputStream()),  

           ja.get(0).toString() 
             + " and then "+ja.get(1).toString());
    }   


That was then able to show me the "defg" and then "ghij" values I had passed in when I POSTed.

So another contender for the Java JSON handling was google-gson. My first reaction to it was kind of negative... it reminded me of old XML marshallers I had used in the past... it was strongly geared at mapping Java Bean-style objects, with named fields. But because I am trying to be more flexible, I started to give it a go, and it wasn't terrible. But then I thought about WHY I didn't like the philosophy of it... was I just too used to the squirrely world of Javascript? Well, yes. Do I have a strong preference for a failure to look like "huh, there's no value for 'key'" rather than "huh, the marshalling process broke somehow, maybe you're missing one of the key values"? Also Yes! But then I really managed to justify my dislike: this kind of system is highly coupled. Change your data object and the client code has to change with it, or things break. It also assumes a 1-to-1 mapping to the input coming in to make the object and those fields... so if one of those fields were a compound of two different inputs, you'd be out of luck. So you end up with a pile of beans, either special beans just for the communication marshalling, or your "real work" data beans that you can't change because you don't want to break the client. Bleh!

Thursday, March 21, 2013

mr. dataconverter

I needed some random names for some mockups. I found http://www.opensourcecf.com/1/2009/05/10000-Random-Names-Database.cfm. I wanted them in JSON format. I found http://shancarter.com/data_converter/. I made up a first column that was
firstname    lastname    initial    fullname    lastfullnameselected Output as "JSON - Properties" and I was good to go.

I love when you think "man, it would be cool if that existed on the web", and then you search, and there it is.

Tuesday, March 19, 2013

OSX: open finder window from terminal "here"

Via http://www.tonyspencer.com/2008/08/11/open-finder-in-current-folder-from-terminal/, in terminal just type
open .
to open an explorer window (especially handy because my Komodo Edit seems really bad about using a current working directory concept...)

Monday, March 18, 2013

recursive grep

tl;dr: recursive grep can be done via
grep -RHin TEXT_TO_FIND --include "FILE_PATTERN" . 

One of the nice things about my new work machine being OSX is slipping back into the good old Unix command line.

A fairly common task is the "recursive grep": finding pattern matches in files through a subtree of directories.

My default for that, the one I can type without looking anything up (because it was easy to reconstruct) worked but was kind of crappy:
find . -name "*js" -exec grep -i getUserMedia /dev/null {} \;

That's using the find command and then exec'ing out to grep... {} is the file name passed into the exec'd command, and the /dev/null is there as a bogus second filemame to make sure the name of the actual file is printed by grep. Crappy, especially if directories match the file pattern and you get "Is a directory" errors all over the place.

Modern grep can do the recursive serach for us, as well as the file pattern matching. So a much better formulation is:
 grep -RHin getUserMedia --include "*js" .
The R means recursive, H prints the filename and then n even prints the line # in the file.

(For both the crappy and the modern example, the "." tells the process to start in the current directory (it could also be any directory path),  the grep "i" means case insensitive, and the file pattern should be in quotes so the shell itself doesn't try to fill in the blanks for wildcards.)

Friday, March 8, 2013

symlinks for live coding

tl;dr: Use Unix symlinks to point from under an exploded .war file into the static part of your source code tree and then add allowLinking="true" to your Tomcat context.xml file to enable a much faster code/run loop without having to reconcile changes later.

At my old job, I got spoiled by not needing any kind of build process to see changes I was making live, as long as I was just editing the static files. (Well, mostly static; we used some good ol' (emphasis on "ol'") serverside includes (SSI))

My new place, a lot of the work is meant to take place in a separate source code tree, then there's an ant process that builds a war. The build can be pretty fast, but still the difference between "edit, save, switch to browser, reload" and "edit, save, switch to terminal, build, switch to browser, reload" is surprisingly large. (Even a "continuous deployment" system monitoring changes can be kind of slow, waiting for the change to be noticed, the build, the copy, and the redeploy.)

The .war file was already exploded, so I started editing live in the folders inside the exploded war. Back in business! The trouble was when it was time to check-in; i had to isolate the changes I made, get them back to the source tree, and only then could I check-in. (Also, it always felt like there was a risk of firing off a build and overwriting the changes with the source tree version.)

I started by looking at directory compare tools. "Beyond Compare" for Windows is great, but it's not for OSX. I then found out diff has some arguments that will let it handle directories:
diff -rq srcdir livedir
The "r" means recursive (i.e. go down the directory structure) and the "q" stands for "quiet", i.e. just say which files are different, not how they differ.

That wasn't bad, but the output wasn't super friendly (with no clear way of saying "ignore svn files and what not) and there was no simple way to merge in the changes then.

I was thinking about making my own "deepdiff" tool, maybe in node.js, and started down that path when I had another thought: I'm on OSX. OSX is a Unix-variant. Unix has symlinks! A symlink is a way of giving a new additional path (like under a war) to content that actually exists elsewhere on the filesystem (like in the source tree).

The syntax for that is
ln -s existing_path new_name_for_it

So I made a symlink inside the exploded war into where the static files live in the source tree, and it didn't work. Tomcat needs to be told to allow these links (otherwise it can be a little bit of a security risk. The secret sauce was setting allowLinking to true in the Context tag in config.xml

<Context allowLinking="true">

Config.xml can live in a few different places, and there are some rules about handing overrides and what not, so I found it simplest to hack that into appserver/conf/context.xml -- there might be slightly better places to put but that's beyond the scope of this humble blogentry.

Wednesday, March 6, 2013

quick icons in processing

Twice now I started fumbling with the need to make simple graphics for a demo. In both cases, it wasn't a picture or anything, just a big red arrow in one case, and a little "switcher" icon. Rather than fiddling with graphic programs (though I really should get better at learning some kind of vector art app) I went to processing:


PGraphics buf;

void setup(){
  size(30,30); 

  buf = createGraphics(30,30);
  buf.beginDraw();
  buf.stroke(255);
  buf.strokeWeight(2);
  buf.strokeCap(ROUND);
  buf.line(5,15,25,15);
  buf.line(5,15,10,10);
  buf.line(5,15,10,20);
  buf.line(25,15,20,10);
  buf.line(25,15,20,20);
  buf.endDraw();
  buf.save("switch.png"); 
}
void draw(){
  image(buf,0,0);
}

By using an offscreen graphics buffer, I could create an image with a transparent background, and then by doing most of the work in setup and saving then, I stopped myself from creating the image file over and over again. (But then I blasted the image to draw, so I can see it each time I changed and ran it.)