Friday, February 21, 2020

rip larry tesler

Daring Fireball is eulogizing Larry Tesler, a giant in the field of UI, who codified terms like copy and paste, helped invent WiFi and Arm chips, and a host of other things. But this twitter thread DF links to makes me wonder:  -- specifically
We were content to literally put a string on the clipboard and insert it at the insertion point. As a 20-year-old college dropout tech writer I was not going to argue with Steve Capps. But Larry wanted it done better.
He wanted the spacing around words to adjust automatically.
I wonder if I consider that a good thing. When I do UX and UI, I often think in terms of "The Dao of Programming" - a program should aways do that which surprises the user least. Auto-adjusting spacing around copy and paste text... that is a flavor of "Guess What I Mean" in interface, vs "Do What I Say"

When it hits the sweet spot, it's great... but when then heuristic isn't perfect, it can be extremely frustrating to have to undo. Many editors today have similar problems, like when you copy a URL into a document that then gets turned into a clickable link, say... but then the editor has to decide if the letters you type right after are part of the link, or not. Usually not. But when you do want to change the link? Or when the editor has to figure out if you're changing the target URL or just the visual representation...there was a reason why many users back in the bad old days of Word Perfect 5.1 loved "reveal codes" so they could see that weird markup and get things precise.

Of course I'm not calling for a return to pre-WYSIWYG days, or arguing everyone should be writing in markdown or html or whatever... just saying that it wasn't just engineer laziness that would vote for Espinosa keeping paste as "just put the string into the insertation point" - there's a decent UX principle where it's better to risk making the user do a little more work than a LOT more work to undo a mis-guess, and to always be clear about what just happened.

(This entry lightly modified from me pontificating on the Lost in Mobile WhatsApp group - come join us if it sounds interesting!)

Thursday, February 20, 2020

css: sub-pixel borders

So in CSS, it looks like borders of less than one pixel width aren't really a thing, but you can achieve something similar with a CSS box shadow:
.thingy {
  0 0 0 0.5px white;
}

The first 0s are for the horizontal and vertical offset, we don't want a blur, and then we're trying for a 0.5 spread.

The result is something like this:
versus, regular border (with border-radius)
UPDATE: we want back to a simple 1 pixel border... the background image had a zoom effect on hover that would cause the badge to lose its "border" on the bottom, momentarily - very distracting.

Tuesday, February 18, 2020

neumorphism

Cult-of-Mac wondering if neumorphism could bring balance to the force of old-style real-world skeuomorphism and the flat-look that has been big ever since iOS 7:

Roughly speaking, everything looks like a paper cutout version of itself.

It makes me think about Win 3.1/Win95. In their own way they were an attempt at a kind of skeuomorphism, but restricted by the screen resolutions of the era...

Definitely meant to look like a physical button rising out of the screen, and the shadowing would flip when the button was in a pressed state...

Friday, February 14, 2020

note to self: disclosure panels in html5

I was forgetting the term "disclosures" - in html5 they are the summary/details pairs that let you make accordion-like things easily. (Technically accordions only show one thing at a time, but that's the name that sticks in my head.)



An Example Now that's what I'm talking about


Seems Pretty Easy! Glad that it's in html5!

Tuesday, February 11, 2020

css - ellipsis after multiple lines vs after one line

CSS Quickie - So, there's the old trick of adding ellipsis like

text-overflow: ellipsis;     
overflow: hidden;     
white-space: nowrap;


which works pretty well for multiple line
not quite ready for primetime, "line clamping"
is more a less  a thing now:

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

Browser support is still meh though.

One note, empirically it seems line-clamping tends to break on whitespace, while the old ellipsis will chop up parts of words.

Heh, I remember doing something like this in jQuery, I made a little open source jquery thing called TrunKit... it had automagic "show the full thing on hover" which was kind of fun...

Tuesday, February 4, 2020

the alternate worlds of a better apple

Like a lot of Apple fans, I pay attention to John Gruber's Daring Fireball blog and the associated podcast ("The Talk Show", which I still think is a corny name.) Recently on an episode with Ben Thompson - they're trying to figure out, on the iPad's 10th anniversary, "why did it stop breaking new ground"...

One thing Ben Thompson points out is the restrictions of the app store - specifically in not having a "reduced price for future upgrades" option - that it stopped companies from getting as serious about making full apps, from pushing the envelope of what was possible on a tablet. This restriction was mitigated a bit when Apple came up with subscription models, but it turns the game from "you own this software, pay us if you like it and want to keep with the current version" of paid upgrades to "keep renting this from us or lose access to your stuff" - which is like how every  damn thing in streaming land works, come to think of it.

And combine that both with "what app should cost more than buck? or $3-5 if extravagant" thinking from the iPhone store, thedevaluing of apps in general... It seems life would have been better if Apple had had a refund policy. Wouldn't it be cool if you could pay like $5-$20 for an app that really makes your life better, and nothing for all these garbage apps? But you weren't stuck paying more if the app couldn't pull its weight (I don't think so many apps are "one time use only", so that a deceitful user would get all the value of the app and then get a refund...)

Another thing Gruber writes about is : what was lost with iOS 7 minimalism - not just skeuomorphism, but a voluntary giving up of tons of other cues about focus and what not - it's funny how in both homes and software the drive for minimalism can cause people to shoot past healthy decluttering to unhelpful paring down

Getting back to the first point (which I think is more significant), the forced purchase models: whenever some is like "oh, these new phones are lame, where's the innovation these days??" I tend tochallenge that person to come up with at least one innovative idea themselves - ideally a brainstorm in the realm of feasibility - otherwise I kind of dismiss them as someone who might not be thinking about how all design is compromise, so often you have to give up something to get anything.... (or in the case of UI minimalism, maybe you give up too much...)

BUT... maybe I'm a hypocrite because I don't know what, exactly, we may have lost by not having a segment of the industry that could fund the development and sustaining of a higher tier of apps and soar above both the current race to the bottom, price-wise, the garbage-ad driven software, and even avoid "pay us forever or lose all your stuff" of subscriptions. It still feels like it's something.

Wednesday, January 29, 2020

css trickery: ellipsis for the FRONT of the string, not the end...

Or should I say
...not the end

One bit of infuriating design laziness of github is this:

For mysterious reasons, the full file path is limited to 600px, and then uses CSS ellipsis to hide the rest... you know, the rest, like where the actual file name is, vs the path blah blah blah that's the same for every file.

One easy fix comes from davidwalsh.name/css-ellipsis-left:
.ellipsize-left {
    /* Standard CSS ellipsis */
    white-space: nowrap;                   
    overflow: hidden;
    text-overflow: ellipsis;  
    width: 200px;
    
    /* Beginning of string */
    direction: rtl;
    text-align: left;
}
I highlighted the new bit, beyond the standard ellipsis.

Heh, I remember my old trunkit jQuery hack for this, that would surgically lop off stuff til text fit, and then would reappear on hover...

Saturday, January 25, 2020

making time

Yesterday on the Lost in Mobile WhatsApp group we got to thinking about alternate time visualizations - the conversation started with me linking to Slow-Watches - I really like how their watches have a single hand that takes 24 hours to make a complete revolution - and how they put midnight at the bottom, where to my intuitive mind it "belongs" - letting the tip of the hand follow the sun, roughly.

BobD pointed out Tokyoflash - that also have some watches with super fun alternative ways of displaying the time.

It got me to revive an old artsy 60 second timer I wrote when I was first learning Processing  - I really like it! Plus it's practical for games that need such a timekeeper - unlike Pictionary's ordinary sand timer, you don't have to wait for it to finish before resetting it, just click.

Making virtual timepieces is pretty cool. I wish I liked wearing watches more... and also wish that Apple Watch would let people design their own watch faces, I would so love to have a physical version of TIMISH a purposefully inexact expression of the current time in words. I really think we get so hung up on thinking of time as a series of numbers... it's so harsh and mechanical...

Tuesday, January 21, 2020

pay by palm and the ugly mess of tap to pay

WSJ: Cash, Plastic or Hand? Amazon Envisions Paying With a Wave. Articles linking to WSJ coverage say it might be no-touch:
A patent application dated Dec. 26, 2019 from Amazon Technologies, the company’s Mumbai-based electronic manufacturing arm, for a “non-contact biometric identification system,” describes a hand scanner, which can capture images of users’ palms with wrinkles and “deeper characteristics” like veins.
It reminds me what a stupid mess the tap-to-pay rollout has been in the USA, and how it has left the door for new solutions even wider than it would be otherwise. The problem with tap Point of Sale systems is multifold:

  1. Many places don't accept tap. Or I've seen some where they have a tablet rigged up as Point of Sale device with a magnetic strip reader, and they support tap but it's a separate dongle they have to haul out.
  2. The iconography that "tap is available" is unclear, and often the "tap target zone" isn't clearly marked, and I don't think there's a single above screen/below screen standard.
  3. The UIs sometimes have a weird wait before they're ready to go... the system needs to be in a certain state to receive the tap, which is bad enough if sort of understandable, but then the UI isn't making the procedure clear for the user.
(To be fair, "3." is an issue for chipreaders and swipe systems as well... it's ridiculous how many places make the customer play the "can I do it now?" games. It's challenging because even if when the information to wait is clear on screen, no one reads screens. Maybe some kind of universal iconography, like a green/red light -- except in the shape of a tape recorder stop/go symbol so it's colorblind friendly? Ideally there might be a physical forcing function, but that might be more expensive or prone to breaking down...)

Come to think of it- I just realized I think of tap-to-pay as a virtual wallet on phone thing, but that's not the case- I guess my cards could have a little soundwave/speaker/wifi-like logo on them if they could be used, but they don't. Still - ambiguity reigns with these things.

Of course "Wave to Pay"... it reminds me of that old Hitchhilker's Guide Line where the salesman/priest/spokesman says "Now, let us all bow our heads in payment..." I love how prescient Douglas Adams was about gesture systems in general...

Tuesday, January 14, 2020

longevity vs reincarnation for our companion gadgets

Shaun McGill of the brilliant Lost in Mobile also runs Snowflakes and Shields concerning his love of wristwatches. A while back he wrote a touching story about his father's watch and I was struck by this scene:
[My father] treasured [his Bulova Accutron Snorkel 666 feet watch] a lot and I remember watching him staring at it for much longer than he needed to when he was checking the time.
More recently Shaun wrote
When I check the time on the Omega I spend a second longer than I need to because it is such a joy to look at and to wear
That was on a piece about how he was giving up the Apple Watch even though he thinks it's a brilliant device and its tracking features aided him as he lost 100 lbs.

The funny thing is, I get the that same "linger a while, thou art so fair" effect with the iPhone - even though it is not quite the same class of engineering- still black glass and silicon is a little sterile relative to moving metal - but I get this silly little frisson of delight about seeing the calendar app and todo add a structure to my life, and then I take a moment to enjoy the heft of it (especially with my large iPhone 11 Pro Max in its substantive silicone case) by flipping it over and over a few times using one hand.

In that article Shaun also writes
Can you name one tool with a practical use that could be 50 years old and yet still perform its function perfectly every day without any intervention at all? A tool with history, provenance and which only goes up in value (both emotionally and financially) the longer you wear it? A tool that becomes so familiar that it would feel like a loss to not have it attached to you. Only a watch ticks those boxes.
I tried to think of some counter-examples: a classic ink pen has the use and longevity but not quite always with you, eyeglasses can be even more fundamental to your identity (as seen by others) but don't have the longevity, a ring or necklace might have the longevity but not the engineered functionality. So watches may be it!

But swinging back to my "pocketwatch", the iPhone - and before that, the PalmPilot which gave me similar happy gadget twinges despite being less of a physically satisfying artifact (at that point the design pleasure was how so much useful structure to my life was added by what was basically a GameBoy screen and child's toy stylus) One of the reasons I had such loyalty to both lines was longevity - not of individual devices, but with synching based continuity - gadget reincarnation, so to speak... Like, my current device holds the reincarnation of all my important information - music files that dates back to me ripping old CDs for my iPod in 2004, and (manually transferred, sadly) datebook entries from the PalmPilot in the 90s. That's pretty cool!

So I'd recommend any of Shaun's sites, of course, and if you like talking about this kind of stuff - from gadget news to more thoughtful ideas about technology, I'd invite you to seek out the companion WhatsApp group Shaun runs for it...

Monday, January 13, 2020

programming since y2k...

Half funny, half serious: How is computer programming different today than 20 years ago?  I disagree with some bits like
A pixel is no longer a relevant unit of measurement.
It's relevant; just not coherent. I think "desktop will be around 800-1000px across" will be with us for a long time.

The one that also stuck out to me:
Unit testing has emerged as a hype and like every useful thing, its benefits were overestimated and it has inevitably turned into a religion.
Hmm.

Thursday, January 9, 2020

goofy little filter shortcut

I needed to add a filter to ignore null data elements in a collection I wanted to render in react:
stuff.filter(thing=>!!thing)
worked but a coworker pointed out
stuff.filter(Boolean)
read a bit cleaner. (Though now that I think about it if the collection is large is it doing too much object creation?)

Thursday, January 2, 2020

a 2020 view of js

https://2019.stateofjs.com/ - the URL is slightly confusing, since I think it is talking about a survey done during that year (but according to the Wayback machine that URL wasn't around 'til mid-December so...)

I really love the visualization at the overview page - up and down are how many folks used it, and the X-axis is the general positive sentiment about its future, so you can get a great feel for the current vibe and direction...