lots to know

Man, the footprint of basic HTML/CSS is getting kind of big! Actually that's a link to new/upcoming stuff. Which has the additional question of if it's safe to use yet...     

inside stories

 Really cool set of internal iPod scans and a fun walk down memory lane with designer Tony Fadell at scanofthemonth...

breakpoints breaking? remember: mobile first

I was refactoring a component (a complex two-box search that was a horizontal layout on desktop but stacked vertically on mobile) to be more responsive, vs more or less reactive; an earlier rendition basically had the whole component encoded in React twice, one for small devices one for large.

I was using a mix of 

@media screen and (min-width: 768px) {

and

@media screen and (max-width: 768px) {

because somethings made more sense to my head as "think of the vertical case, then horizontal is the special case" and other time the opposite. 

Well, predictably, that works fine in 99.9% of cases, but at the exact breakpoint of 768px, you are at risk for getting an ugly incompatible mix of layout behaviors. 

I guess the answer is to pick one direction and stick with it. On my project, that's generally "min-width". But how to remember and get it straight to my head? Easier: MOBILE FIRST. Literally. Code the mobile version then have mix-width breakpoints let the desktop-ness burst forth to modify it. That's a little annoying when Desktop is using more of the "defaults" for styles but that's a small price to pay for consistency and not having ambiguous breakpoints.

nicer looking cancel / clear button on search input

There's a King Missile song "Take Stuff from Work" that starts

Take stuff from work

It's the best way to feel better about your job

Well, today I taking this little "clear/cancel search" icon button. When you have an input type="search" you get a little X icon to undo the text (very useful on mobile):

but at work we want it to look like thi

Here's some code for that...

   input[type='search']::-webkit-search-cancel-button {

    position: relative;

    right: -10px;

    height: 35px;

    width: 35px;

    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTAgMEwzMiAwIDMyIDMyIDAgMzJ6IiBvcGFjaXR5PSIuODciIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04MTggLTExNjEpIHRyYW5zbGF0ZSg1MTUgMTAwMykgdHJhbnNsYXRlKDMwMyAxNTgpIi8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZmlsbD0iIzc1NzU3NSIgZD0iTTE2IDIuNjY3QzguNjI3IDIuNjY3IDIuNjY3IDguNjI3IDIuNjY3IDE2UzguNjI3IDI5LjMzMyAxNiAyOS4zMzMgMjkuMzMzIDIzLjM3MyAyOS4zMzMgMTYgMjMuMzczIDIuNjY3IDE2IDIuNjY3em01LjczMyAxOS4wNjZjLS41Mi41Mi0xLjM2LjUyLTEuODggMEwxNiAxNy44OGwtMy44NTMgMy44NTNjLS41Mi41Mi0xLjM2LjUyLTEuODggMC0uNTItLjUyLS41Mi0xLjM2IDAtMS44OEwxNC4xMiAxNmwtMy44NTMtMy44NTNjLS41Mi0uNTItLjUyLTEuMzYgMC0xLjg4LjUyLS41MiAxLjM2LS41MiAxLjg4IDBMMTYgMTQuMTJsMy44NTMtMy44NTNjLjUyLS41MiAxLjM2LS41MiAxLjg4IDAgLjUyLjUyLjUyIDEuMzYgMCAxLjg4TDE3Ljg4IDE2bDMuODUzIDMuODUzYy41MDcuNTA3LjUwNyAxLjM2IDAgMS44OHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04MTggLTExNjEpIHRyYW5zbGF0ZSg1MTUgMTAwMykgdHJhbnNsYXRlKDMwMyAxNTgpIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=)

      no-repeat left center;

    background-size: contain;

    -webkit-appearance: none;

  }

musicians type the darndest things

One thing I've learned from doing websites for Porchfests is that musicians are going to push any input assumption you might think of. Ask them to put choose a genre for themselves with a small input box, and you might get something like "indie surf dad-rock with nu-wave techno emo edge". Give them a small textfield to describe themselves and you might get 3 paragraphs of their press release.

In the case of Somerville Porchfest, it was decided it could do more to encourage people to support the musicians, so a tipjar field to solicit donations was added. Whoever setup the form did this prompt:

Support the Band

Place a link to fundraising or music download site.

 

So a lot of musicians dutifully entered wellformed links beginning with "http" - and honestly I don't blame the ones who just put in a url without the http, that would be a pretty geeky ask, but the pile of non-http-starting "links" looked like this: (blatantly non-link/site things bolded)

thesestainsarewhoiam.bandcamp.com
instagram.com/bigravband
plumesplumesplumes.bandcamp.com
venmo@Todd-Bleckley
www.venmo.com/Kenneth-Lafler
missbones.bandcamp.com
jefczekaj.bandcamp.com
Venmo: @Melissa-Nilles
connorstorms.bandcamp.com
by dancing!
Just go to Ball Square Fine Wines and pick us up a six pack if you must, we're not picky
Venmo @JennyJuggler
Venmo @Andre-LaPan
Don't encourage us
www.venmo.com/Jeff-Jam-1
Doublelibra.Bandcamp.com
ensmb.bandcamp.com
TBA
@cyclopolitan on Venmo
birdlanguagema.bandcamp.com

So I needed a heuristic to translate these into URLs (like by slapping https:// on the front) if they seemed like a URL, or to a venmo link if they looked like a venmo thing (but we had a few patterns for that, including Venmo URLs and then cyclopolitan who put the phrase "on Venmo" after). For everything else, I made up a system to alert() the text they entered.

Long story short here's what I came up with:

  function mungeSupportLink(info){
    if(! info) return;
    if(info.toLowerCase().includes('venmo') && info.includes('@')) {
        const regExp = /\@(\S*)(.*?)$/;
        const matches = regExp.exec(info);
        if(matches) {
            const username = matches[1];
            return `https://account.venmo.com/u/${username}`;
        } else {
            console.log(matches,'for',info)   
        }
    }
    if(! info.includes(' ') && info.includes('.')) return `https://${info}`;
    return info;
}

The non-URL venmo links all had a "@" in them, so I used a regex to isolate the username (assuming non-whitespace usernames, especially important for "@cyclopolitan on Venmo").

For the non venmo stuff, I figured the URLs didn't have spaces (I already trim()d them) but WOULD have at least a "." subdomain separator, and if not we just return it as is for inclusion as an alert...

adieu ipod adieu

Daring Fireball reported on the farewell of the iPod Touch. I remember being blown away by how slender the first generation was - like Gruber says, it was hot on the heels of the first iPhone, but the thinness of the iPhone-minus-the-phone-part was a glimpse of the future of Apple form factors: in 2007 it was astonishing that a capable web browser could work on the thing.

Of course this closes the door on the iPod in general. I write about getting one in 2004 - ripping my supply of CDs into my own library actually kept me stuck with Apple ever since. (And I still don't quite get the appeal of streaming... owning music, but selecting it by the single song, is musical nirvana to me.)

But my favorite was the iPod Nano I bought in 2007, product shot shown here.

It was such a perfect minimalist piece of hardware... just thick enough to fit a headphone jack, that terrifically satisfying scrollwheel, and a nice little screen to help with navigation.

(Every once in a while I get the urge to try to be less online, go back to the less-connected time before the iPhone, maybe go back to the simplicity of a PalmPilot... But at the very least my pockets would be full of an iPod, a camera, a PDA, a regular cellphone... not to mention needing a GPS for my car...so just wishful thinking.)

scrolling so an item is halfway up the screen

Once again I helped the Somerville Porchfest with a mobile-friendly, light-on-the-server version of their map for the big - you can see the 2022 Design Here.

The current design was based on work from the "Stay at Home" Somerville Couchfest 2020 - not sure  what web designer did the core work but it was much more visually appealing than what we had in 2019 and so we carried it forward to 2021, a nice card-based design.

One request was to make the map bigger. Treating it as "sticky" worked pretty well, so I made it so it was always half the height of the window. I think the resulting design scales pretty well to both desktop and mobile:

There was also a request that when the user clicked on a porch on the map, it should show the band below, since it's the band card that would have the photo I was worried how to make that work - there's already a filter for the name and genres, but treating it as "just another filter" and hiding all the OTHER band cards might just be weird. So I thought I would highlight the corresponding band card with a color, and scroll to it.

 But because the map is perma-pinned to the top half , Element.scrollIntoView() didn't quite work - it didn't take the "sticky header" map into account and so scrolled up behind it. 

Here's the code I ended up with:

    const bandblock = document.getElementById(`bandblock${bandid}`)
    bandblock.classList.add('open');
    const elementRect = bandblock.getBoundingClientRect();
    const absoluteElementTop = elementRect.top + window.pageYOffset;
    const middle = absoluteElementTop - (window.innerHeight / 2);
    window.scrollTo({ top: middle - 20,left: 0, behavior: 'smooth'});

 The DOM element has an id based on the bandid, I added an "open" class to color it, then I do a little math to figure out the top of the element and use a smooth scroll to place it just a little lower than half way down.

 

dot dot dot

 Heh, you know, every once in a while to think about some of the "new" basics stuff in JS, like rest vs spread...

HELLO Hello hello from the echo chamber...

I always appreciate pieces that argue things I intuitively believe like You Don’t Need A UI Framework.

(And to keep up the high-risk-of-people thinking I'm a caveman stuck in the early-2000s - The Appeal of Using Plain HTML Pages. I admit I sort of play around this realm, albeit without the brutalist look, with my Porchfest sites - I mean PHP and also Static Builders are adjacent to this kind of thinking. (Like recently I had to change Fenway Porchfest's sites from being .html to .php when they asked for the header to be placed on all the pages...))

peering into "the algorithm"

 It's interesting thinking about various ways of ordering posts - Gizmodo has been releasing some documents from Facebook as they ponder how their own sausage is made...

I'm not sure what the ideal algorithm would be. Part of me wants to say the secret is to empower users to say "show me everything from this group of people I select" but I wonder if that violates Zach Holman's admonition of Don't Give Your Users Shit Work, i.e. make them go through a big manual winnowing and curating process. 

Still, it's frustrating that it's the most trivial crap I post (or that is to say repost from other source like tumblr) that gets the most feedback, and I'm not sure how much of that is the "fault" of my friends, the algorithm, or maybe a snowball effect where the algorithm noticed early positive response to shallow stuff and then focuses on putting that stuff in front of other people, with a "rich get richer, poor get poorer" amplification effect...