Monday, May 22, 2017

this...is...JEOPARDY...sort of...

Helped my GF make up a version of Jeopardy for an ice breaker for her company using GameshowMaker (this newer version has a few skins to make it look like various other shows as well.) A little old, and some of the setup is fiddly (and kind of weird, how like the show-specific .ini file you load in for the skin overrides the settings you have in the main setup, and also by default the space allotted for Category names is WAY smaller than Jeopary standard) and it's all Flash, but still, if you need a quick thing that can be run locally or online, it is pretty solid.

Friday, May 12, 2017

when character encodings attack!

Last year I made up a new one-page-app version of the Somerville Porchfest Site, and it survived the onslaught of people hitting the site that day, unlike in previous years.

This year I ran into weird late minute problems as they changed how my files were served up. One was that the "bands.json" file was somehow turned into a html redirect message. My hack for that was to have the process that cleaned the JSON prepend a "var bandjson =" to it and then include the file as .js

But then things were still crashing and burning Autolinker.js, or rather. Autolinker.min.js , was crapping out in the console, with an "Uncaught SyntaxError: Invalid regular expression:" followed by a whole lot of goobly-gook.

Long story short the problem wasn't in how Autolinker.min.js was served, but rather the encoding used in the index.html page. When I got my apache server, it had the default of UTF-8 for everything in the headers, so it had a line like
Content-Type:text/html; charset=UTF-8
But their server only had text/html.

Adding this to the <head> seemed to fix it:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
seems a little weird this can be fixed either as a server config or a page thing, but that's the way of the world.

Thursday, May 11, 2017

the allure of facebook

I was thinking about the allure of Facebook. Previously I attribute it's dominance to a combination of "stream/wall" (ala Twitter, Tumblr, Instagram) with real identities, a strong bias to guide you to connect with people you know in real life vs anonymous internet strangers. But there's something else: the "also commented on X's post" notification. I just now posted a second comment on friend's post on feeling blue and the seemingly masochistic desire to watch or listen to sad stuff there, two passages relevant to the topic (this passage and the Mr. Blue thing it links to) and it feels great that I know people interested in that topic will get a nudge and probably see what I put there. Old school web forums have this feature but they don't have the stream that brings content front and center, or the "real world friend" aspect.

(Heh, I remember when I would read Usenet on an old academic account, I had a perl script that would scrape and find me continuations of threads I had participated in.)

Wednesday, May 10, 2017

unpaid plug - testing old browsers with ease

My company started using BrowserStack, that looks like its giving a full-browser-screen pass through to a little VM to test old browsers without setting up the damn OS. Super easy to use.

Also, I wrote their support suggesting that dialog would be improved with tooltips showing what % of the market different versions are, and what year the browser came out.

w3schools browser info shows that - wow, IE/Edge and Safari are both separately less than 5% of the traffic? Huh, wonder if that is desktop only though... I know a lot of companies see about a 50/50 desktop/mobile split, with mobile on the rise...

Tuesday, May 9, 2017

k.i.s.s.: too long command lines in bash etc

So for my porchfest work I was making up a thumbnail using ImageMagick, but there were so many files I was running into errors since it was bigger than whatever buffer bash was using. I thought I'd have to learn xargs or something fancy... But then I realized I could just make a bunch of short lines, each ending with a \\ and then a \n , and that copy and pasted fine.

Monday, May 8, 2017

a rant against arcane js syntax

Elements of JavaScript Style -- I'm having trouble wrapping my head around #2 there, "Omit needless code", where
function secret (message) {
  return function () {
    return message;
  }
};
is considered blatantly inferior to
const secret = msg => () => msg;

I remember one of the reasons people starting dumping on Perl (and just dumping Perl) was because of arcane syntax...  I think there's a strength in looking like other languages.

Concise code is critical in software because more code creates more surface area for bugs to hide in. Less code= fewer places for bugs to hide = fewer bugs.
Concise code is more legible because it has a higher signal-to-noise ratio: The reader must sift through less syntax noise to reach the meaning. Less code = less syntax noise = stronger signal for meaning transmission.
This reminds me of a scifi story that talked about an alien language that was SO EFFICIENT that they could say in a single, accented, nuanced word what a human would need to say in a sentence or a paragraph.The trouble is that kind of sci-fi think misses the reality that redundancy in a language is a feature, not a bug; for example, it means the meaning is likely to be preserved over "noisy transmission" - like when someone isn't paying full attention, for example, or when fidelity over the wire isn't perfect.

I guess some of the problem is the trivialness of the currying example - even without the syntax that will be less familiar to people steeped in other languages the need for a curry (mm, curry) is a little arcane to begin with - and in this example, it's not even clear where functional code would sit! Like if the original was
function secret (message) {
  return function () {
    return message.split("").reverse().join("");
  }
};

A coworker says that would boil down to

const secret = message => () => message.split('').reverse().join('')

There's something anti-egalitarian in use of this much bleeding edge syntax.

Thursday, April 20, 2017

programmatically generating svg files in bulk via javascript / p5.js

I'm tasked with making a series of graphic files (representing various cars' scores in a way that can be embedded on external sites).

We don't know exactly what size the sites will want, so SVG has been a good choice.

We have up to a hundred to generate, so that's an argument for doing things programmatically, rather than in Sketch or Illustrator. Plus I'm a little lazy about learning to new things and neither program jelled immediately for me in the past.

Today I Learned: p5.js has a completely fine SVG implementation!  You'll want to grab a matching set of p5.js and p5.svg.js from the releases page, then something like this will work:

<!doctype html>
<html>
<head>
<title>fun with p5js to svg</title>
<script src="p5.js"></script>
<script src="p5.svg.js"></script>
</head>
<body>
<script>
function setup() {
    createCanvas(600, 200, SVG); // Create SVG Canvas
    strokeWeight(2);
    stroke('#ED225D');
}

function draw() {
    var x = frameCount / 100;
    var y = sin(x * PI * 2);
    line(x * width, height * 0.5,
         x * width, y * height / 2 + height * 0.5);
    if(round(frameCount) % 10 === 0){
        var name = "wave"+frameCount;
        save(name);
    }
    
    if (frameCount > 100) {
        noLoop();
    }
}
</script>
</body>
</html>

You can see it in action here BUT - it will try to autodownload 10 SVG files to your system.

Anyway, I looked harder for the p5.js solution when I realized the SVG.js I looked at previously seemed to have weaksauce support for arcs, which were kind of important to what I was aiming for.

FOLLOWUP NOTES:
Use clear(); instead of background(); if you want to preserve the background transparency on multiple colors. (Kind of runs up how Processing is a generally more about "destroy things every frame and redraw" than traditional SVG... this might be an issue with animations etc)

If you want to display an external SVG (especially if you're going to save this as an SVG) you have to use loadSVG() (in the preload() of course) rather than loadImage(); - otherwise you get a horrible png conversion.


PREVIOUSLY:
Before I found p5.js could do the task, I wrote this...

5 years ago (yeesh) I wrote about using Raphael.js to do some fun SVG animations, but right now I think SVG.js seems like a better bet.

Combining its basic example code with this advice about saving SVGs I came up with the following:
<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
<script src="svg.js"></script>
</head>
<body>
  <div id="drawing"></div>
<script>
// initialize SVG.js
var draw = SVG('drawing')
// draw pink square
draw.rect(100, 100).move(100, 50).fill('#f06')

var a = document.createElement('a');

a.download = 'mySvg.svg';
a.type = 'image/svg+xml';
var blob = new Blob([draw.svg()], {"type": "image/svg+xml"});
a.href = (window.URL || webkitURL).createObjectURL(blob);
a.click();
</script>
</body>
</html>

I think that should scale and fit in a simple loop without too much hassle.