Sunday, September 28, 2014

the processing/processing.js gap

Trying to learn about making some prettier graphs I decided to resurrect an old "drag the anchor and control points of bezier curve" toy I made a while back.

I like that this toy actually taught me about bezier spline curves; that I could make a composite curve by setting the endpoints of two different curves to the same x,y and then putting the control points on the same line... (the two lower curves on this example are sort of doing that)

You can play with the toy here. I had a harsh lesson making the web/processing.js version once the processing (Java) version was working fine: I had overloaded the processing functions line() and bezier() to take a new Point class, but in the Javascript translation, that had overshadowed the native functions full stop -- without Java's object typing, it couldn't tell which version I wanted to call.

The fix was simply renaming the functions to something that didn't collide with the built-in functions. I often say processing.js is a "good 90-95% solution" for translating Java to js, but that remaining 5-10% is pretty confusing to debug!

Saturday, September 27, 2014

p5.js boilerplate

I haven't checked but I'm pretty certain that the most used Google search for this site is "site:kirkdev.blogspot.com boilerplate". Which is what I use when I want to find my basic html5 template in a hurry.

Similarly, while I've messed messed around in p5.js before, leveraging my years of Processing mojo in a more purely javascript-y way, I don't have the usual "ceremonial" stuff down pat, and so to reduce the friction of starting a new project, I gift my future self with the following:

UPDATE: Remember you may want to use something like 
python -m SimpleHTTPServer 8000
(and then view http://localhost:8000
to run a little server,  if you are loading files etc)


UPDATE: I'm now providing myself two versions, the first is simpler, uses global functions, and puts the canvas on the page for you. The second only puts one variable in the global namespace and lets you have more control over the CSS styling of the canvas, but requires prefixing all P5 calls with a variable (e.g. p.line(x,y); not just line(x,y);) Also you could substitute p5.js or p5.min.js with one another or use the CDN links 
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js

Global Mode:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>p5.js boilerplate</title>
<script src="p5.js"></script>
<script>
function setup(){
    var canvas = createCanvas(500, 500);
    canvas.parent("canvasParent");
};
function draw(){
    stroke(random(255),128);
    line(random(500),random(500),mouseX,mouseY);
}
</script>
<style>
    body {
        background-color: #333;
        color: #bbb;
        text-align:center;
        font-family:sans-serif;
    }
    a {
        color: #bbb;
    }
    #canvasParent {
        background-color:#3d3d3d;
        padding:20px;
        display: inline-block;
    }

</style>

</head>
<body>
  <div id="canvasParent"></div>
    <h2>title <a href="view-source:.">source</a></h2>
</body>

</html>


Instance Mode:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>p5.js boilerplate</title>
<script src="p5.min.js"></script>
<style>
    #appCanvas {
        width:500px;
        height:500px;
        border: solid 1px black;
    }
</style>

<script>
var app = function(p) {
    p.setup = function() {
        p.createCanvas(500, 500);
  };
    p.draw = function(){
        p.stroke(p.random(255),128);
        p.line(p.random(500),p.random(500),p.mouseX,p.mouseY);
    }
}

var myApp = new p5(app,'appCanvas');
</script>
</head>
<body>
<div id="appCanvas"></div>
</body>
</html>

It contains some arbitrary bits that I find useful (I like to work at 500x500 because of my blog, for instance) but is pretty minimal, easy to reset once copy and pasted. And I added just a touch of fun to the draw() routine, so I can see it working. (You can see it in action on my website, where I have a random copy of p5.js)

I love the idea of p5, though I admit having to remember to prefix every command with "p." (or whatever variable I've assigned) is annoying.

In other dev blogging... on FB I posted this:
I really feel like a better person, empowered and creative and capable, when I take time to sit and hack in an environment I'm fluent in, especially sitting in front of a big monitor rather than just grabbing time on the subway. Between a techie conference, helping friends in need, a band gig, and various social fun stuff, I haven't had a solid morning or afternoon for that for weeks.
I wonder if this feeling is anything like what people who get nurtured by being out in nature feel when they go camping. I mean, different, obviously, but deeply resonate and restorative nonetheless.

Oh. The other thing: I just realized that for YEARS a gmail filter I set up has been shunting all mail notifications of comments added here away and out of my inbox. I was getting too much material from the "OpenOffice.org" list, so I created a filter for "[dev]'. Turns out that filter wasn't as literal as I had assumed, so something like "[Kirk's UI Dev Blog]", or anything with the word "dev" in it, was shoved away as well. Ah, technology.

Wednesday, September 24, 2014

upcoming browser coolness - destructuring and web components

This past weekend my employer was kind of enough to foot the bill (and I was kind enough to sacrifice a weekend) for the No Fluff Just Stuff conference, 2 1/2 days of lectures on various topics. The emphasis is a bit more Java and fullstack than I try to be these days, but there was still a track for the front end, especially Angular.js and other js toolkits.

Two of my favorite takeaways were technologies that are not quite ready for prime time (Or to quote William Gibson: "The future is already here — it's just not very evenly distributed.") One is a tidbit from ECMAScript Next, the flavor of Javascript that should be running in your browser in a year or two.

10 years ago, I was blogging about a weird asymmetry in Java and most other C-derived languages (I know C didn't originate all of these things, but it certainly popularized it) - the unit of subroutine is a "function" which (probably because of its mathematic roots, or possibly because of what it's easy to make a compiler do) can take multiple parameters in, but can only return one thing. Perl, for one, didn't have that problem. A subroutine could have a return statement like
    return ($result1, $result2);
and a bit of calling code could easily grab each argument in a named variable:
    ($thing1,$thing2) = mySubroutine("foo","bar");

In fact, Perl uses this kind of in-array-variable-naming in lieu of traditional named parameters, so while C/Java/Javascript has something like
    function myFunction(String arg1, String arg2) {
Perl relies on a special variable "@_" to be the array of arguments, so a similar subroutine might start
    sub mySubroutine {
      ($arg1,$arg2) = @_;

It turns out that "in-array-variable-naming" has a formal name, and that is"destructuring", and it's going to be part of the next generation of Javascript!  In short, a function could return an array (as it can now) something like
    return [result1,result2];
but in the future the calling function could be doing something like
    let [thing1, thing2] = myFunction("foo","bar");
("let" is another bit of the new hotness, with easier to understand behavior in terms of scoping relative to "var". There are some neat syntax for packing up arrays, destructuring objects (vs lists) and what not as well.)

So that's pretty hip.

The final seminar I attended was on Web Components and Polymer. These are a kind of awesome way of writing your own tags to extend HTML5 - for example, you might include a Google Map as a single set of tags, or a chessboard display, or one of a bajillion bits of functionality. Each component gets its little shadow DOM, so conflicts in CSS and the like are avoided. (Polymer is just one implementation of the emerging WebComponents spec, but it seems good at using a "polyfill" technique to bring legacy browsers into the fold.)

I'm not quite sure why Web Components feel like the obvious future to me, and the Right Thing, when Angular.js feels like a weird, gratuitously complex set of kludges. I thought "making up our own HTML5-ish syntax" was one of things I hated about Angular, but I guess if you get the syntax and scoping cleaner, it's a pretty cool thing.

(https://www.polymer-project.org/apps/topeka/ is a nice demo of some of this flexible future.)

Still, I don't feel 100% at ease with Angular's "monitoring mapped memory to drive DOM changes" paradigm, its sometimes arcane syntax (oh, inject your dependency by an array consisting of a bunch of strings and ending with the function that does the work!-- though the conference pointed out how this is a pattern of protecting against "uglify" scripts that might try to rename globally shared variables), infamous learning curves, pushing of its own flavors of paradigms (ala factory vs service vs provider), extensive folder structures, etc etc -- or the way that Angular 2.0 promises to bust through some of the unfortunate syntax issues by making all your old code obsolete.

All that said, Angular might be the best bet in this direction that's here now, and I'm glad Web Components has shown me some of the light about getting into named components, not just an infinite future of <div> decorated in jQuery...

PS Another cool site is http://todomvc.com/, that walks you through the same basic example in a host of Javascript MV* frameworks...

Tuesday, September 16, 2014

the 7-minute no-look workout page

People at my company have been doing the The Scientific 7-Minute Workout. There are a ton of apps and pages and videos for this, but we were using http://www.7-min.com/. It's a decent site, but I realized there were some UX improvements that could be made. I noticed that I, and others using the side, would often:
  • announce the upcoming exercise (reading it from the page)
  • glance at the screen (some times difficult when on the floor!) near the end, and then count down the final "3...2...1" to alert peers
  • wonder what the "halfway point" was for exercises that didn't have a "switch sides" prompt midway through.
So I took these ideas, remade the illustrations, and ended up with kirk's no-look 7-minute workout page. (I also parlayed it into an open-source github project.)

The code is a bit inefficient, relying on setting up a big hoard of javascript timers, one for each page event. I'm toying with redoing it so it uses a single interval timer, but so far the current version seems to function ok. 

For sounds I used my own lowLag.js library. To make the voices, I used OSX's "say" command, using the India English voice "Veena" (some of the voices sound really off), dumping the result to an aiff file, and then using LAME to encode as MP3. (Happy to see firefox seems to be supporting MP3s now.)

The commands for that were:
say -v "Veena" "good job" -o goodjob.aiff
and
lame goodjob.aiff --preset medium goodjob.mp3

I didn't have permission to reproduce the NY Times illustrations, so I traced over and made some of my own. (I used ArtStudio on the iPad to trace over an existing set on a different layer.)

The only other clever bit was the old "python webserver" trick. 

It was nice iterating on this with "real users", i.e. my coworkers and myself. At first the "tick" was a bassdrum sound, but then didn't translate well over video chat. (Similarly, I may have to increase the contrast of the progress bar at the bottom.)

Anyway, the 7 Minute Workout is kind of fun. I'm skeptical about it, in some ways, and suspect we don't push ourselves enough while doing it, but still, it's better than nothing, and feels good to get through!

Thursday, September 11, 2014

dietzler's law

There are a lot of UI-centric build systems out there. As an old-skool web guy, some of them seem like overkill; but then again, I'm skeptical about the need to load content from a CDN, compressed, and bungled into one giant file, about whether that pulls its weight when you're in an agile mode. (As a final step, it becomes less onerous, and has more potential for being useful, but if you do it rarely than the automation isn't as crucial.)

I google for "Maven vs Rake" (Rake being "Ruby Make") and found this article, Why Everyone (Eventually) Hates (or Leaves) Maven. It cited a "law" -- technically about Access, but applicable to Maven as well as framework selection in general, that rings very true to me:
Dietzler’s Law for Access: Every Access project will eventually fail because, while 80% of what the user wants is fast and easy to create, and the next 10% is possible with difficulty, ultimately the last 10% is impossible because you can’t get far enough underneath the built-in abstractions, and users always want 100% of what they want.
The article cites a brilliant example of "composable systems", how systems that contain of simple, "do one thing, do it well" subsystems chained together are better than monolithic constructs: More Shell Less Egg is where 6 piped together unix commands trumped 10+ pages of beautiful Knuth Pascal for a simple word frequency task.

I think Javascript in particular lends itself to "composition over inheritance"; yes, there is a prototype system that can make it object-oriented-ish, but really, I don't think it's the language's most natural paradigm. By making function definitions as easy to assign as an integer, you can really make composable systems work well - and the simple elegance of JSON acts as a pretty decent glue language, just like plain, line and tab delimited text via pipes did for Unix. And as an extension of that, I prefer libraries with take-what-you-need functionality over big monolithic "this is how we do this" frameworks.


Friday, September 5, 2014

wavepot

I don't understand this enough to do much with it, but http://wavepot.com/ , where you can make sounds and tracks via math in real time, in the browser, is amazing.