Monday, November 30, 2015

#uxfail of the moment

I've switched to using Safari on my work machine for lunch hour stuff. Its location bar isn't as smart as Chrome's, so I end up getting the Google headlines on international soccer a lot, since "fa" is enough for Chrome but not Safari to jump to "fa"cebook.

Looking more closely... "fa" is enough to trigger facebook for both, but for Safari , the enter key means "go to whatever you think this box says RIGHT NOW" while for Chrome it will run the autocomplete and THEN go, so if I just type "fa[return]" Chrome feels like it is getting things right, and Safari does not.  #uxfail

Wednesday, November 25, 2015

on the facebook

Lately I've been thinking about how good Facebook is at what it does, and how it has become a unique cultural venue for people to write and be read and to stay in touch with casual acquaintances across gaps in time and space.

There have always been ways of staying in touch with people you were close to: e-mail and various instant message programs online, regular mail and phone, but those all had terrible "discoverability" (you had to get the address or number though some other channel) and were almost exclusively one-to-one communication.

Online, there have been one-to-many forms of communication: Usenet newsgroups and (God have mercy on your soul) website forums, but these were generally formed around mutual-interest topics and themes, not shared history in the real world.

Much of its strength comes from its ubiquity. Not being on Facebook is more of the exception than the rule.

Its curation algorithms are fantastic. I know some people balk at not seeing everything, but I don't think they realize what a firehose Facebook would become for anyone with a decent number of "friends". Facebook offers some tools to pay more attention to certain people you care about, but unlike some sites they don't force you to sort all your contacts into buckets, the tweaking is there if you need it. For everyone else, the algorithms do a pretty good job of bringing you the posts that other people have found most important. There's a bit of a bandwagon effect, and when you write a cool post that languishes uncommented and un-"liked" it's a bummer, but overall the system works well.

(Other people gripe about how oddly recalcitrant FB is about keeping feeds in strict chronological order... though I think the mix and match ordering based on time AND post activity works better for people who are more casually engaged.)

But Facebook banks on one brilliant idea, one other sites leverage as well: empowering users to assemble a collated page/wall/feed of content from people the user finds interesting. Sites using this trick -- Tumblr, LiveJournal, Twitter, Instagram and FB all had different hooks (visual collectors, diarists, pithy bon mot makers, snapshotters, and people you know, respectively) and of all of those FB's "people you know in real life" seems to be the most compelling in a universal kind of way. (Anecdotally, my high school's 20th, post-FB reunion didn't come together nearly as well as my 10th pre-FB, and while there were other factors involved I wonder how much of that is because the "where are they now?" question is so trivially answered.)

Facebook gets a huge number of UX and UI details so right. I do think the curation algorithms are under appreciated. There's no other site providing the non-geek with such a wide and known-IRL audience. Its photo handling is powerful and easy to use, and its instant messaging is a viable replacement for SMS/iMessage. Sometimes only being able to "Like" something feels limiting in a "Newspeak" kind of way, but it also cuts off a lot of negativity and fighting. Some previous annoyances (like endless game requests) have gone away for me. Other auxiliary features add to the experience: the "real time" event sidebar can lead to interesting discoveries (a kind of happenstance endure around the usual curation) and "what you posted on this date in previous years" is a good implementation of a nostalgic feature I've seen and implemented elsewhere.

My biggest complaint is about how this one site Facebook has sucked the air out of the room for the independent web and blogosphere. In the mid-2000s, my blog (which I still double post to, since it's my canonical archive) was also a small social hub, with a homebrew comments system that eventually got utterly deluged by robospam. (I also had a guest-post sidebar, http://kirk.is/sidebar/ that was great fun from 2002-2008) These days, only the most interesting and topical blogs can really survive and garner attention and community... Facebook has made things both more and less egalitarian in that regard.

There are other problems with Facebook, like how people put their own self-known private selves up against images of everyone else at their public best, and there's crap like vaguebooking, and privacy concerns with a machine that knows so much about mutual friends and even has face recognition. Or the idea that maybe the barrier to staying in touch should be high, like who wants to be in touch with those bozos from high school anyway, or have your elder folks know if you've been up to mischief, or see idiotic posts from that cousin whose politics you can't stand? But hearing and being heard is a very human desire, as is meaningfully staying in contact and having a support community of people you know, and FB does those things better than anything else I can think of.

Saturday, November 21, 2015

33 lines of 24 year old BASIC code...

In Gazette Galore!,  my blog going through all the type-in games of COMPUTE!'s Gazette (for Commodore computers in the 80s and first half of the 90s) I recently did a deep dive of Geza Lucz's little beauty:

There's a charming little Flood Fill going in there, along with a nifty playable little game.

vanilla.js!

At the Boston Future of Web Apps conference I saw a reference to the Vanilla.js website: obviously it's a bit tongue-in-cheek but still, it's in line with some notions that I've talked about on this blog, that there's a tendency to look to a big framework to "build the app for us", and sometimes engineers buy a giant expensive house when really they just needed the awesome bathroom fixtures.

The problem is especially pointed on mobile - that link mostly follows the initial load time various frameworks have in their ToDoMVC rendition. Vanilla JS comes out way ahead, of course.

This definitely has an impact on the future of html5 on mobile, vs a trend to do everything in native apps. (Actually, a counter-argument might be that the battle is already sort of lost on that front, so might as well go with heavier stuff if it makes developer's lives easier.)

I disagree, somewhat, with that links' assertion that "Frameworks are fun to use". I think they are fun to learn to do a "Hello World", but the depth of study needed to be truly proficient and able to debug things has to be put in the balance





Saturday, November 14, 2015

note to self: omnidisksweeper

For OSX, "OmniDiskSweeper" is a pretty great way of seeing disk usage, what folders are using up space. It doesn't have graphs, but it uses color and sorting to keep things sane, and is smart enough to switch from GB to MB to kB.

Friday, November 13, 2015

quick and dirty web server directory php

DISCLAIMER: I sometimes use this blog as a general repository for my future self to refer to, and one indication code might be worth sticking here is when I go to look for it. But it's not always best-practice or production-ready stuff.

Anyway, that disclaimer out of the way... sometimes I use the default Apache directory viewer, but other times I want more fine grained control over its appearance or what files get included. This PHP code seems to work pretty well for me. (The escaping might be a little wonky, but just replacing single quotes worked while urlencode() did not.)

<style>
  body{
    font-size:30px;
  }
  a{
    padding-bottom:10px;
    display:block;
    text-decoration:none;
  }
</style>
<?php
  $path = ".";
  $blacklist = array("index.php");
  // get everything except hidden files
  $files = preg_grep('/^([^.])/', scandir($path)); 

  foreach ($files as $file) {
    if (!in_array($file, $blacklist)) {
      $url = str_replace("'","&#39;",$file);
      echo "<a href='$url'>$file</a>\n"; 
    }
  }
?>


Thursday, November 12, 2015

kirk's ui gripe blog: switching to safari, and reopening just closed tabs

Chrome has been my primary browser for years, and I still feel a tad more familiar with its developer tools. Lately on my work machine, it's gotten sloooooow-- I thought the lagging in typing and general responsiveness was the whole system, but mercifully no - just chrome. The timing corresponds with upgrading my OSX to El Capitan, and a few other changes related to my employer being purchased by AOL. (I tried resetting it back to manufacturer settings, next step is to uninstall and reinstall I guess.) Of course, I'm kind of nervous there's could be some kind of malware involved,  but we'll see.

Anyway, I've been using Safari - I've been told its a lot more CPU-efficient than Chrome these days, and in practice it's not so bad. My biggest gripe is this: most of they key mappings are smilier between Chrome and Safari but Chrome has a brilliant shift-cmd-t to retrieve an inadvertently closed tab. Bizarrely, Safari tucks similar functionality under the "History" menu, and deals with only on a window level, not tabs- very retrograde of them, IMO.

(FOLLOWUP: one other difference is how in Safari shift-click on a link means "download this right away". I guess it's more arguable if this is a reasonable thing to do. It certainly seems weird to send a webpage to Downloads/ when I just meant to open it in a new window... and since cmd-click means "open in a new tab", Safari seems doubly confused about the purpose of windows in the modern web browser.)

jquery + handlebars boilerplate

4 years ago I put up an html5 boilerplate (including jquer, the syntax for the CSS link rel, etc) that I find useful when I want to do a quick and dirty one off; but a bit too dirty, since really it would be better to do handlebars rather than direct DOM manipulation (I think some coders are too quick to turn to big frameworks just to avoid the ugliness of dealing with DOM bits directly, but jQuery+handlebars is really powerful)

So here's the updated version:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MY PAGE TITLE HERE</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js"></script>
<script>
$(helloWorld); //on document ready...

function helloWorld(){
var helloWorldTemplate = Handlebars.compile($("#hello-world-template").html());
$("#main").html(helloWorldTemplate({"msg":"Hello World"}));
}
</script>
<script id="hello-world-template" type="text/x-handlebars-template">
<div>{{msg}}</div>
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>

Tuesday, November 3, 2015

"I've yet to write a line of javascript code!"

At work we're shifting gears out from Ember and back to Angular. I'd have to admit it feels like a step backwards: to me, Angular is a bit of a "worst of both worlds", with the complexity and opacity of a full framework (lots going on under the hood) but without the feeling of completeness of some other things like Ember.

Dan Wahlin's AngularJS in 20ish Minutes was suggested to me. It starts with the Angular 101 dynamically updating filter search / loop stuff I've seen half a dozen times. But when he says "I've yet to write a line of javascript code!", my reaction doesn't mirror his positive feeling. To me, I hear "I have a new syntax to learn to write programmatic code in! Hope it does exactly what I want once I learn, because if I have to dive into how the magic works it's going to be really tough."

People who are enthusiastic about Angular like having "views" that are so powerful, and that use xhtml-like syntax, but in my heart of hearts I like keeping my program code as code, in something that's clearly the controller, and having a different syntax set for conditional and looping structure that stands out visually from the part of my html that represent DOM elements - and having those templates be extremely lightweight.

But, Angular is massively popular, and picking up experience and fluency in it is going to be great for me.

FOLLOWUP: Googling up about the UI-Router, I see the phrase "AngularJS is what HTML would have been, had it been designed for building web-apps", which I find a bit telling in its arrogance, but also indicative of what I like less about its style. I mean, HTML isn't designed for building web-apps, it does many things, and is agnostic about what you may be doing to get the information from the server to the client. I see parallels to what I wrote about Dietzler's Law: I prefer composable systems that reveal their plumbing. This allows a developer to take a reductionist approach to debugging, isolating components and challenging assumptions at the various levels. When the template is doing a lot of the heavy lifting, it's harder to see where the goofup might be happening. It's also tends to only be amenable to top-down, holistic understanding; a learner can't safely ignore something they don't know, and be confident in their understanding of the other parts: everything is tightly coupled. 

I suppose some of those arguments hold for Ember etc, but still: Angular shows its roots as a quick and dirty prototyper (I feel the default two-way scope coupling emphasizes that) in a way newer frameworks don't, while at the same time ratcheting up the syntaxes to learn, and the meta-syntaxes to master, in order to keep everything looking like HTML tags.

Ironically, I kind of love Web Components, which to me do feel like the "what HTML would be if it was designed for building web-apps".