Thursday, April 25, 2019

ow it hertz!

Reading this tweet thread about Hertz suing Accenture for a failed massive project is interesting.

clever "nobr" for typography finesse in responsive design

Work is shifting to a more designer-centered approach.

On a new page, we had a headline with an ampersand, along the lines of:
Getting to Know Our Dedicated & Talented Professional Staff

Our Director of UX was wondering that if we could take the line that was breaking after the ampersand like this:
Getting to Know Our Dedicated & 
Talented Professional Staff

and switch it to the more typographically standard
Getting to Know Our Dedicated
& Talented Professional Staff

Easier done than said, right? Just put a <br /> in there after "Dedicated" and call it a day? Well, no, I realized after a little bit - there's a risk that mobile might have different ideas about the break:
Getting to Know Our 
Dedicated
& Talented Professional 
Staff

Whoops!

But what's the fix? I have tags and CSS to say "don't line break this" but not so much for "break here first if you have to". My first thought was "huh... maybe a media query so that linebreak only appears when the width is wide enough to be needed?" but that seems hacky.

Turns out "don't line break this" is what we want - we want to keep "& Talented" together as a unit, so either "Dedicated & Talented" all fits on the line, or "& Talented" starts the next one.

The oldschool, not-quite-standard way is to use <nobr> - a more modern way way (but still has non-semantic markup) is a span with the style "white-space: no-wrap;".

Wednesday, April 24, 2019

order in the court

Historically my company had the inmates engineers running the joint, but as the company has matured, we added specialized product managers, UX, and now, dedicated designers.

Designers and UI engineers have to establish the boundaries for "pixel perfection" vs. what is expedient in the current code base, and with ideas such as making things as responsive as possible, even when there are varying designs for mobile vs desktop.

In one job (which of course was part of a hair-on-fire we need to get this out tonight rush) the desktop looked like this:
And the mobile might collapse that into two columns:
The astute might observer might notice some tweaking going on - especially in the order, assuming these were flexbox'd or otherwise allowed to flow/ wrap.... from a designers point of view, it's maximizing (or rather, minimizing) use of space, and also with an eye toward keeping matching icon colors apart.  From an engineers point of view, it's a bit messy to have one code base that can do either...

Anyway, the short of it is, flex-box items can have an "order" CSS property that let me line up things in the most space efficient way. Now, my good engineer soul thinks that feels a bit awkward to have to apply to all items, but to get a little responsive mojo working it's pretty handy - there was already a parent class that was different in mobile mode (this part of the site is reactive though we are designing more and more in a responsive kind of way, so we could also use media queries) so just applying the order in the mobile case was easy.

Tuesday, April 23, 2019

imagemagick fixed heights suitable for thumbnail sheet

A while back I mentioned using ImageMagick to make CSS thumbsheets.

I do this for the Somerville Porchfest website and every year it feels like a wrestling match - with all these bandphotos some are "quirky", either portrait mode when everyone else is landscape, or else just "really weirdly long landscape.

My process is a bit clunky, but I use so many command-line-ish tools I'm not sure it's worth automating fully... instead I generated a webpage that constructs shell commands to run by hand.

The first step is to take the raw JSON from the Somerville Arts Council site and parse it into a file I call "bandjson.js". My webpage shows me a list of all band IDs and the corresponding thumbnail URLs that I can inspect by hand for any weirdness.

For each of those I extract the extesnion (usually jpg or png or JPG or jpeg or JPEG)  then I construct a
`wget -O ${bandid}.${extension} "${thumbailurl}"`;
which gathers all the files locally and normalizes the filenames to bandid.ext

I make a bit of .js then that maps bandid to bandid.ext

The painful bit for this year was working out this normalization, say for 46702.jpg:
convert '46702.jpg' -resize 100x67 -background white -gravity center -extent 100x67 '46702.jpg';

the background/gravity/extent arguments are what makes sure the image is at LEAST as big as those dimensions (centered on a white background in this case). Without that, I'd have to do weird work to read and track the size of each thumbnail separately.

After that I make a single honking big Imagemagick command line argument to glue them together, using \ at EOL so I don't overrun my shell's limit for single commands
convert \
 'bandid1.ext'\
'bandid2.ext'\ 
-append thumbsheet.jpg

I then build another js file mapping bandid to it's offset # in the sheet- I can then multiply that number by 67 (the height I requested on the convert operation) to generate the CSS - each image is width 100px, height 67px, and then the background for say the second one is:
background: url(thumbsheet.jpg) 0 -67px;

I'm not positive if all the work is worth it, maybe I should just have the 153 images on the page, but that feels weird to me still.

Friday, April 19, 2019

use your words, gadgets!

For a few year I've been partial to BeatsX headphones - honestly all wireless audio solutions lack gravitas - the Borg look of oldschool Bluetooth handsfree things, the double Uhura of Airpods - even over-the-ear big headphones look like earmuffs, or maybe Lobot from Empire Strikes Back. The "librarian eyeglass holder strap" look of BeatsX weren't so bad by comparison, and I liked how they use the same Apple W1 chip as Airpods - but you can take one out for a bit without having to hold it or put it away or have your music stop.

But I'd been through too many pairs - lost one, misplaced another, and then my main ones started losing sound on one side. (The build-quality / feel of them is great, but the durability just so-so.) So I went to Best Buy and discovered cheapish (~$30) earbuds of decent quality are now a thing! I bought a pair of Sony's WI-C300. This review agrees the sound quality is pretty decent, which is all I need - I tend to use other things for music, and have these for walking around to podcasts, and despite being a musician I'm not much of an audiophile.

Overall they aren't as comfortable as the BeatsX - the wire is a bit short, and that wire's skinniness is much less appealing than the Beats ribbon, and the buds don't have magnets (in theory useful to complete and secure the "necklace" feel when not in use, in practice it's just pleasing to have magnets to play with) but in one simple way it's much more comfortable - when you power them up, a chime plays and you hear a voice say "power on". As the things connect to your phone, another chime plays and it says "bluetooth connected".

That is SO much better than the little musical blurbles BeatsX play. There's kind of one that goes up to say "on" or something, and another to say "powering down", and maybe some chirp when it connected to the phone but I was always having to yank the control bit around to look and see if the little light on it was shining or not, because it was pretty ambiguous. (This is not helped on modern iPhones, where they don't have display area to spare to always show you if you're in headphones mode or not.)

Good old Bluetooth plus a voice explaining the status is way better than anything I thought I was getting from Apple's W1 chip plus nearly meaningless musical ditties! I think there's a simple UX takeaway here - just use words! (Ideally with an option to change languages, but I'd rather have a human language I didn't know than try to decode the musical language of Beats designers.)

(After getting the Sony's, I also grabbed a pair of neon green iLuv Sound Air 2 - it also has simple voice feedback, but the connection wire is closer to the flat ribbon of the Beats, also a bit longer than the Sony one.)

Sunday, April 14, 2019

really old web design

I was looking at the late-90s rendition of my website, back when they were called "homepages" (Hooray for the Internet Archive Wayback machine! That site,along with the original versions of Google, Youtube, and Shazam, are things where the magnitude of what they were doing just flabbergasted me and still impresses.)

Anyway, I had to pull up the devtools inspector, because it wasn't clear at a glance how I achieved the layout of my photos page - it has a kind of pleasing irregularity to it. I knew it was tables, of course - turns out it's a rough two-column layout, with on-again-off-again use of the img align tag - I may have just been playing around with how to sort-of-align a set with portrait, landscape, and square cropped photos.

I'm thinking of this time in part because of the 25th anniversary of Tufts sQ!, my college acapella group. And I remembered that my early web designer self was strongly influenced by my camrade Erica's sQ Official Homepage - both the "columns but not rows design" and the use of transparent-background photo icons (in particular, the airplane on that page) were strong influences on my early sites.

Sometimes when I'm looking at my old raw HTML I'm delighted to see it all in caps - a habit I believe I got from Perl and other technical documentation at the time. )It's not clear if I had outgrown the habit when I designed that page)  These days it's unacceptably uncool (probably even deprecated, since xhtml-stuff was in all lower case, I think by mandate) - on par with using tables for simple flexible layouts - but honestly, in an age before fancy highlight editors, it made it very easy to discern what was content and what was markup...

Wednesday, April 10, 2019

the underbrush

As I go through and groom old blog entries and see just how many broken links predominate, how the old geek vision that "urls can be forever" is almost completely unrealized, but sometimes I can use a search engine to find a replacement for a yanked Youtube video, I realize that one purpose of Google is weeding out the underbrush of fallen sites, if search wasn't a constantly renewed process and we relied on old archives we'd be choked in a forest of dead wood.