the engineer vs the designer

I feel like my development draws from two sides of me, the engineer, and the designer.

The engineer part of me wants to say "come on, arial,helvetica,sans-serif, and maybe a courier,monospace - that's all you need. Oh and maybe Impact sometimes, for flair". The designer knows better.

In theory, the designer part of me should be advocating for "proper" quotemarks, the ones that curl around, vs those inch and foot marks that are so much easier to reliably type. In practice, I don't care all that much. And the UX part of me teams up with the engineer in me to DESPISE when they are autocorrected, especially when pasting. It makes sharing code in certain chat programs (I think Hipchat may have had that issue but I don't remember seeing it in Slack) or even recording stuff in "Evernote" problematic.

Actually, Evernote, like a dozen other programs, tries to preserve typefaces and font sizes and colors, sometimes background and foreground. How often does that help? I see its utility SOMETIMES, but should for paste default really be to make everything look like a goofy ransom note? There are some conventions that some programs follow - add a shift to cmd- or ctrl-V pastes "special", and often stripped down, but it's not consistently followed - and again, I'm not convinced it's a smart default especially when "remove formatting" isn't always readily visible.

flywaydb

Flyway seems like a pretty cool way of keeping databases up to date. At work one project uses it and tasks like "flywayMigrate" that takes any new untimestamped .sql files, timestamps 'em, and then runs 'em in sequence. I remember Enpocket used a homebrew system that followed similar patterns.

quick fb ux observation

A friend of mine posted some old high school photos, including some with a very distinctive "laser" background, characteristic of the 80s/90s. About five different people commented something along the lines of "look at those lasers!"

FB made an interesting choice by only displaying comments from people you're friends with inline when browsing on your main feed, but still having the "Write a comment..." box there. People are more likely to see some comments, not realize they haven't seen them all, and then make an "obvious" comment that otherwise they would have just "liked" had they seen it made by someone else.

sweet css spinners

Cool CSS-only spinners / throbbers / loading widgets... I definitely want to up my understanding of CSS animations, my mind still goes back to controlling CSS properties with jQuery.animate()... and various easings

power devtools in chrome

Twelve Fancy Chrome DevTools Tips - it's funny how Google Chrome has become a defacto development standard...

note to self: connection to SQL databases

Looking around for a client to connect to Oracle DBs, SQuirreL SQL Client seems ok. Both the site and the app are rather late-90s in appearance but seem to get the job done, at least once I downloaded the Oracle jdbc jar into /Applications/SQuirreLSQL.app/Contents/Resources/Java/lib/ojdbc7.jar

o sh*t

http://ohshitgit.com/ has a small list of save-your-butt techniques when you screw up in git.

user gripe: no musical star rating in ios 10

So, my current least favorite misfeature of iOS 10? The Music app no longer supports viewing or updating the "star" rating of a given song.

Previously you could tap the currently playing album cover and it would flip, revealing a simple interface to control the rating. With iOS 10,  the album cover doesn't do anything, but there's a "..." menu that lets you do a "Love" (heart) or "Dislike" (heart crossed out). You can tell Siri to apply a rating to the currently playing song, but I couldn't figure out a way of getting her to tell me what the current song was rated (other reviewers complain more about having to interrupt the current song playback in order to activate Siri and change the rating.)

I can almost hear the UX researchers defending this decision. "Users were getting confused about the difference between star ratings and heart/no heart!" "The hearts so much simpler, and more integrated to the Apple Music service!" "Do you know how few users actually USED the stars? [insert blah blah blah statistic here]%!"

And fair enough, the number of people who will miss this star access, or even star access if they drop it from the MacOS iTunes app, is likely a lot smaller than the number of people bemoaning the headphone jack. Apple is brazen in dropping features in the name of simplicity.

---

When I first ripped my music in 2004, I rated all of my 2000+ songs from 1 to 5 stars - admittedly this breaks the Don't Give Your Users S**t-Work guideline, but first and foremost it let me decide which songs  I wanted to include in the limited storage space on my device. (I'm definitely a "singles" guy, most albums consist of 2 or 3 songs people want to hear, and a lot of filler.) 3 stars were good and worthy of inclusion, 4 star songs I was psyched about, and 5 were my "most favorite ever". (Later I just got rid of the 1 to 2 star songs even on my desktop.) Apple smart playlists were a great way to manage my music into good/better/best.

For a long while I managed all my music on my desktop, not the phone where I do all my listening - then for a time I tried downloading straight to phone, but got into weird issues with the library on my desktop. So I guess I'm back to the desktop - and even if star management goes away from iTunes entirely, I could get 80% of the effect by manually juggling regular playlists -- the silver lining would be providing the excuse to break my dependency on Apple for acquiring music (before they dropped the DRM I was using Amazon for MP3s, and it seems like they have a better selection anyway.)

Ah well, I'm just a cranky old wanna-be poweruser. So many people prefer streaming, which I just don't get. It eats up bandwidth, you may have to juggle online/offline stuff anyway, and you have to KEEP paying rent for access to "your" music... or maybe it's about my relationship to music, I like to build a familiarity with specific songs so the appeal of the "custom radio station" paradigm for music is something I only understand in my head, not my heart.

timezone'd

Time zone support in iOS' default Calendar app is missing one feature: to set the time zone for an event, and then see displayed as it will be when the user is in that time zone.

For instance, if I'm in Boston now and traveling to Dublin next week and have a 10AM meeting scheduled there, does it really make sense to have that display as a 5AM meeting until my own time zone changes?

There's a "Time Zone Override" feature that I thought could fix this, but no... that would just let me see an event relative to Boston time no matter where I was and what I had the time zone set to.

It's a fraught issue with lots of UI/UX edge cases, but I think the best option would be to have a default setting of "assume I'll be in the timezone of future events" that can be overridden on a per-event basis (like if you're scheduling a video call across timezones, and want to know when to get online even as the time is set by their standards) and have a little tag like "Dublin time" for events that are being displayed with the assumption that you'll be at that timezone then.

And of course, shared calendars take even more finesse to get the user's intention across...

Does any calendar app handle this really well?

ios 10 quick thoughts and the mess o' settings

Put iOS 10 on my iPhone 6.

The most in-your-face change is that "slide to unlock" is gone - it's been there since the original iPhone (and survived a little minimalism mishap in iOS7) but now it's "press home to open". Long time users may have to retrain their muscle memory.

It does feel like that home button is getting overloaded - click to unlock, or maybe thumbprint to open, long hold for Siri, double click for running app cards, double touch (not click) for reachability, and then good old click to get back to the homescreen.

(There's a "Home Button" Settings menu with a "Rest Finger to Open" that made the navigation when using Touch ID a lot friendlier - having to alternate between click and fingerprint reading kinda stunk. Not sure why it's not the default.)

My favorite change is the new set of keyboard sounds. Rather than having the same click for every key, normal keys, white space/shift, and delete all have different sound effects. The result is a delightful little blurble that gives subconscious feedback about what keys you're hitting, very pleasing in an ASMR kind of way.

I do think iOS settings have gotten out of hand. A few versions ago they added a search box for it, but it's still a hot mess - making it worse, it only search the top level - like, the Calendar app has a "Time Zone Override" feature (more on that later), but you can't find it by searching "Time Zone".

Anyway, I suspect they got rid of "slide to unlock" so that they could make the quick operations easier - the widgets that are to the left and especially getting to the camera. (Wish I could find a setting for what mode the camera starts in, One Second Everyday geeks like me almost always are diving straight to video...)

on assistive touch

Gruber on the New iPhones. He spends a bit too much time about the body material and a fair amount about the camera but them goes into a fascinating digression about how iPhones' physical home button is used differently in different international markets. Certain markets (many in Asia, and Brazil) have gotten the idea that the home buttons wear out (not entirely unjustified, at least for older models) and so it's very common to enable AssistiveTouch, Apple's accessibility tool that launches a popup menu allowing one-touch access to various places, including the home screen.

Its resting state is a very translucent button that can be respositioned, but then anchors on the nearest screen edge. Tapping the button opens up an overlay menu:

(This kind of shared cultural idea about how to use a device (and one not grounded in true assumptions about the device) reminded me of people who are taught that it improves performance to closeout unused iOS apps, and sure enough Gruber moves on to that as an example.)

Anyway the AssistiveTouch button that's always floating over the rest of the UI (but one that's curiously camera shy, it fades out before a screenshot) seems odd to me, a bit intrusive to the UI of the other apps, but I'm probably overthinking it.

Gruber's dive into the subject was in the context of the physical home button, which has shifted from physical clickiness to haptic feedback (a loss, albeit small, in his reckoning) and who knows what the next generation might have, if the Apple designers reach that goal of "front is a single pane of glass". I've always praised the single home button, it's such a centering thing, a way of hitting reset and heading back to the top of things, like the convention of having a websites' name at the top left be a clickable return to the top. Palm had the same idea, though they used a "silkscreen" button and kept their physical buttons for the apps. (Also, for nostalgia purposes I recently bought an original series Pilot... I was surprised that the Application menu didn't take up the full screen, but you could see the last app peeking out from behind, at the top of the screen - so it didn't have that feeling of "homescreen as a place" that I thought was crucial to the experience.)

One final smart thing about AssistiveTouch is it follows the paradigm of "do one action, then return to resting state" that Reachability (double pressing the home button slides the whole iOS screen down allowing easier thumb access) uses. Click-then-go-back is a smarter concept than some of Samsung's (early?) attempts at similar hack to deal with oversized screens, one that would just put the whole system in a only-use-part-of-the-screen mode, and keep it there.

kottke redesign

Fairly recently (a time value representing an increasing number of years - four years used to be a gulf of time enough for the entire High School or College journey, 20-25% of my life 'til that point. Now the percentage is significantly less... but I digress) I started reading kottke,org. Its design felt kind of timeless and was an inspiration for my minimalist kirk.is makeover:

but as his 2008 decade retrospective shows, his site has undergone multiple makeovers. He says his favorite was this:

Anyway, it's a great site with an excellent Signal/Noise ratio. (Also funny to think that I've been doing daily updates to my site for nearly as long, since the tail end of 2000.)

pantsuit! a ui library for the clinton campaign

Medium piece on Pantsuit: The Hillary Clinton UI pattern library.I hadn't heard much about SMACSS (Scalable and Modular Architecture for CSS - reminds me of the Blues Brothers' nemesis SCMODS - State County Municipal Offender Data System) and ITCSS (Inverted Triangle CSS)

In some ways it ends up looking like the "bad version" of Hungarian Notation, with CSS class prefixes ".c-", ".t-" etc used to indicate "component-based", "theme-based", etc. Also some good stuff on inclusivity.

the tenth anniversary of the facebook news feed

Facebook’s News Feed Turns 10. Quote:

At first, people hated it. But much as they complained, Facebook’s data logs suggested they came around quickly. The News Feed caused more people to spend more time on Facebook, a trend that picked up speed during the years that followed. Meanwhile, nearly every other social web service, from Twitter to Instagram to Pinterest, adopted the format.

I always thought Facebook followed Twitter, but I guess Twitter was still in the phase of primarily using being an SMS-based notifier in 2006. I wrote about the power of the stream a few years ago (curious I didn't talk about RSS, though that's never been a huge player.) The ability to assemble a page from a bunch of people likely to write stuff you find interesting generally overwhelms the old individual blogosphere, and in fact only the most diverse news websites seem able to maintain an audience to their separate front page.

FB's curation seems unique to me; I think that is the most underappreciated feature of the site. It's much maligned. On other sites, like Twitter, users protest loudly whenever that service fiddles with its traditional "posts from everyone I'm subscribed to, in the order things were posted" model and the service backs down more often than not. On FB, people also pine for a simpler model, but their cries are generally unheeded.  I think most users don't realize what a fire hose an unfiltered set of posts from all their "friends" would be.

Actually, for me Twitter suffers from the same fire hose effect, and so I pay less attention to it. (Also, the 140 limit used to seem cute and pithy, but now feels so confining.) I tried using Twitter lists to get a more limited subset of posts, but those listss are oddly downplayed in main Twitter web UI. And anyway, it fails pretty hard in Zacho Holman's Don't Give Your Users S**t Work kind of way; having to keep up to date groupings of all your contacts is laborious.

react 101

For grins I fired up React, went through its nice tutorial.

I'm trying to think about what I feel about it. It feels nice and clean relative to some other things, and I dig that it's a library and not a framework; it does what it does very well. On the other hand, I'm not always convinced what it does is worth doing, namely, it seems like a lot of engineers really hate working directly on the DOM. But, I think I haven't dug far enough to get into React's sweet spot, and many people like it a lot better when they combine it with its Flux implementation "Redux".

Anyway, I decided to practice what I had studied with a simple helper toy (I'm rearranging the physical folder layout for the domains I host on my server, a lot of fiddly bits to keep track of)... to get there I decided to recreate the classic Angular "hey you synch up a text input and its display with no code!!!".   Here's a fiddle I spun off their Hello World that does that.

var Angularish = React.createClass({
getInitialState: function(){
    return { site:'foo' };
  },
  updateSite: function(e){
  this.setState({ site : e.target.value});
  },
  render: function() {
    return <div><input value={this.state.site} onChange={this.updateSite} /> {this.state.site}</div>;
  }
});

ReactDOM.render(
  <Angularish />,
  document.getElementById('container')
);

I dig that React is very event based; I think a lot of other toolkits rely too much on shared memory and watches and you never know when anything is happening. On the other hand, like all these toolkits it's so very finicky with the syntaxes it introduces; the JSX bit (the little html/XML tag like thing) had to be a properly closed tag (even singletons, in the xhtml sense), a tag value has to be either a string or an {expression} and not a mix, etc, and I had to learn you can't just modify this.state directly.

(for my personal future reference here's the https://jsfiddle.net/sfh7ydpw/1/ I made with more detailed steps for the refactoring; I guess revealing the old and new folder structure isn't much of a security risk.)

2018 UPDATE

Guess it's too much to hope that 1 1/2 year old code would still work.
Here's the updated fiddle: https://jsfiddle.net/69z2wepo/171740/
class Angularish extends React.Component {
constructor(props){
  super(props);
    this.updateSite = this.updateSite.bind(this);
    this.state =  { site:'foo' };
  };
  updateSite(e){
  this.setState({ site : e.target.value});
  };
  render() {
    return <div><input value={this.state.site} onChange={this.updateSite} /> {this.state.site}</div>;
  }
};

ReactDOM.render(
  <Angularish />,
  document.getElementById('container')
);

That's closer to the example presented in https://reactjs.org/docs/lifting-state-up.html
That seems like a surprisingly large amount of shitty boilerplate, tho... this.updateSite = this.updateSite.bind(this); is sort of uncool.

build your own bot

In the "to get to, someday, when I get a good idea" - How To Make a Twitter Bot in Under an Hour

the power of Sass

When doing basic website and web application stuff, my instinct has been to always keep things as "close to the metal" as possible. Basic html5, CSS, and javascript (especially flavored with a bit of JQuery and/or Handlebars) is pretty expressive - it's not like someone in 1994 saying everything should be in assembly language. In this view, it's terrific to have fewer layers to dig through when things don't act as expected.

A smart friend and ex-coworker of mine, Marco Morales, once mentioned that he really liked CSS preprocessors. I asked if he could put his finger on why - I wish I could remember how he put it, but my paraphrase is that he found that it let him speak semantically vs syntactically; he could more readily express his intentions in code.

Currently I'm doing a mini-project in Sass to get a feel for it. Skimming through the intro page gives an idea of what it offers. Variables are kind of a no brainer, for color definitions alone (and font families and the like). Nesting is my second favorite; it feels elegant to have the layout of the stylesheet mirror the structure of the DOM (though you have to be careful to think in terms of reuse, you can kind of get over-specific if you're not careful.)

Also, even if you're not using gulp or grunt, you can easily set up a watch to autotranslate your .scss into .scss - and you get a ".map" file to boot, which lets Chrome point you at the rule in the .scss file directly. The latter behavior removes one of my strongest reservations; when you're poking around in the DOM inspector, you don't want to have to manually/mentally unwind the raw CSS back to the actual code you wrote.

BONUS SASS MIXIN:
The <nobr> tag was an early "find" of mine, to make sure a string of text was kept on the same line. Of course, that kind of non-semantic instruction belongs in CSS, not markup...

@mixin nobr() {
    white-space: nowrap;
}

gets the job done, and then a CSS class can say

@include nobr;

Maybe it's not much more convenient than remembering white-space: nowrap; but to a grizzled web veteran such as myself, it's more concise.

note to self: lodash assign();

It wasn't clear to me what the advantage of
_.assign($rootScope.creative, { somejson: ‘map'} );
was vs
$rootScope.creative = { somejson: ‘map’};

What's going on in the first case is actually a merge; useful if $rootScope.creative already existed with some keys, somejson would be a new key in it. (or any old value of somejson would be replaced with 'map')

Learn something new every day! Some days, two things!