javascript snippet: link-ify currently selected text in textarea

I'm rewriting my blog's backend edit features in PHP and vanilla javascript... admittedly that's a cringe-inducing mis-ambition of a target platform for some, but certainly a step up from the ancient Perl CGI and JQuery I was using before.

Features of my editing including managing image uploads w/ resizing and gallery-making, a tag system, special "blockquote" content, twitter quotes, etc. 

A while back I talked about linky, my preferred way of shortcutting having to type <a href=""></a> all the time - basically for the current selection only, if it starts with "http", assume that is a URL we are linking to, otherwise assume the selection is the clickable text.

Here is vanilla JS to do that (vs my earlier jQuery textrange() stuff)

function linky(textarea){
    const len = textarea.value.length;
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const sel = textarea.value.substring(start, end);    
    const replace = sel.indexOf('http') === 0 ? 
        `<a href="${sel}"></a>` 
        : `<a href="">${sel}</a>`;
    textarea.value =  textarea.value.substring(0,start) 
                + replace 
                + textarea.value.substring(end,len);
}

(vanilla text replace cribbed from here... don't know or care that much if this busts on IE)

"textarea" is the DOM element... I was thinking about how to know which textarea last had the focus, so I can apply the same function to multiple textareas without having to give each textarea its own launching link. I think I will add an onfocus to each textarea that is eligible for linky-fication to register itself globally, and the last such textarea to have done so will be the one used in the function. Crude but good enough.

Stepping back up to the UX of it... the fidliness/ugliness of <a href=""></a> was the kind of thing that led Aaron Swartz and John Gruber to invent Markdown - as Swartz put it "Why should I have to cover everything in annoying pointy brackets just so it knows what I mean?" 

I don't mind pointy brackets that much - I have a strong preference for working on the level of the target  platform (i.e. DOM markup and javascript that are consumed natively by the browser without a pre-processing step) so long as that level is still reasonably expressive and not too onerous, so I wouldn't consider a separate markup language. (The markdown-ish thing thing I do do, though, is replace \n with <br>...)

The other UX solution for composing links I often see is a popup dialog that has "URL" in one field and clickable text in another. I always get confused about which is which, so I find my "put in href initial boilerplate" method more well-suited to my thinking.

those little lego screens

The UX of LEGO Interface Panels

 

sticky feet! well, a footer

 Interesting, according to this page,

html, body { height: 100%;}

body > footer {
  position: sticky;
  top: 100vh;
}

is a nice sticky footer, even though it looks like it should be underneath the page.

some possibly false memories about the history of making false memories

The other day I sang the praises of "Pixelmator Pro" for Mac, which let me clean up this photo of a neighbor's pup (name of Star)

It was very easy to do with Pixelmator Pro's "repair" tool. Some Android phones having a built-in "Magic Eraser" is a significant (but I suspect temporary?) advantage over Apple iPhones, but I was able to make the same effect happen on the iOS version of Pixelmator, so the difference is just the advantage of having something built-in. (And the power of brand name/labeling)

I'm having a bit of possible Mandela Effect though, about similar retouching in history... in the 1984 Olympics, runners Mary Decker and Zola Budd bumped and head a tripping incident, and the aftermath was captured in some iconic photos by David Burnett, most notably this one:

I have a strong memory about this photo (even though I would have been in 4th grade at the time) Specifically: a version was published that had (digitally?) removed the walkie-talkie antenna that seems to be jutting from Decker's jaw, and that was considered controversial; but Google as I might, I can only find the un-retouched version, and no mention of such a controversy, so now I'm second guessing myself! Was it a big issue? Did I even see an article or watch a segment on it?

Of course, there are long-standing tropes about how not photo tells the complete truth. You never know what's outside the boundary of the photo; either physically out of frame or in the moments before and after. And with long-standing photo manipulation - culminating in deepfake videos - seeing will no longer be believing. (It almost makes Soviet Era Photo Retouching seem quaint.) 

With the rise of deepfakes... I don't know. Reputation (of the individuals in question and of news sources) is going to be increasingly important - like more and more will depend on how much you trust the chain of people saying they say what they said, or didn't say. (And in a nation with a long standing tradition of left-leaning but basically factually reliable news against more explicitly partisan and ideological "truthiness" sources on the right, this is a bad development.) But any newspaper or magazine has always been able to fabricate quotes, so having to trust your source is nothing new, but now even eyewitness video cannot be considered canonical evidence unless confirmed by the people in it.

debugging a mysterious webpack slowness

 I have always relied on the kindness of coworkers for managing build tools, so this case study in debugging a mysteriously slow webpack was eye-opening.

pixelmator pro is a great choice for mac

I've always been just a dabbler with Paintshop-style programs, but Pixelmator Pro is a pretty great, friendly tool, and for $40 is a worthy upgrade over the free version.

I especially dig "magic erase" and smart select tools. Here's me recreating an effect I first saw at the Second Line Brass Band website:

The new Select Subject tool got confused by the horn, understandably enough, but with the smart select it was easy to duplicate the main layer, use smart select to paint over the background and then delete, and then turn the background layer into B+W.

Maybe I should hunt down some tutorials, there's a lot this software can do. I've never gotten my head around tools for making vector graphics, it might be a good segway into that. 

thoughts on the oculus 2

Spending Thanksgiving week with my Mom and Aunt and we decided to get the house a Oculus 2 (my Aunt was really blown away by the VR they had at the Van Gogh exhibit.)

I already had the PS4 VR setup, but the Oculus 2 is so much better and has made me more sanguine about VR in general...  having the visor free and untethered is an absolute game changer. (Also the PS4 setup was an enormous pain in the butt to set up, all these connecting wires going every which way)

The Oculus controllers are a good mix of classic controllers (like with thumbsticks) and things that work as hand surrogates, with a convention of "mitten grip" button with the middle finger to grab items and the trigger finger to shoot.

The primary menu interface paradigm has use use either controller like a laser pointer pistol, with a thin beam always showing where you're pointing. (The Vader Immortal game I tried had an amusing UI with clunky virtual pushbuttons I liked as well.) 

Another frequent trope I've noticed in VR is often they have you move by pointing to where you want to stand next and then you "teleport", rather than more smoothly moving there like in a game. I think that might tie into preventing motion sickness? 

The visor uses a camera on the thing to aid with head tracking (it complained about the room being too dark when I turned off lights because of some leakage at the bottom of the visor.)  And there's a super cool mode it slips into where it shows you what the camera is seeing, albeit in grainy black and white.  So it's like you're in your space, but not really in your space.

Combining that "AR" showing of the room with the laser pointer guns - they cleverly have you use specify the boundaries it's safe to walk around in in your physical area, using the laser pointer gun almost like it was a big welding torch on the floor. Later, if you're in an immersive game and go too far, edges popup, kind of like the boundaries of the holodeck peeking through.  

I've heard rumors that the Apple Glasses will be AR, virtual objects projected on the background of your actual space, and the b+w room mode reinforces my idea that that might be the future - it was an interesting rebuttal temper one of the problems of VR, how isolated and vulnerable you are

Penny Arcade Sanctum 

Also, just having stereo speakers near your ears vs PS4 VR's ear buds felt much more real - albeit at the cost of annoying anyone in the vicinity.  Which is similar to one of the few drawbacks of the Oculus relative to the PS4 VR: by default it's not mirroring anything to an external screen, so any potential social-in-person aspect is greatly diminished.

Still looking for great games in it. I guess that's the other drawback relative to game consoles: there's not much in terms of first party development, like big names you know you can trust. 

Also it's a little light on some of the non-game "experiences", though maybe my aunt and I haven't looked hard enough.

Though typing this after about an hour or so of play, I realize I'm a little headachey. 

So yeah, pretty cool product overall, and while I'm not sure if VR will just become the next Kinect or 3D TV (just another passing fad that might stick around but barely) or if it's the future-future, this is a nice mid-price way to see some cool stuff. 

the Right Thing

Great Quote:

 These arguments were the lifeblood of the hacker community. Sometimes people would literally scream at each other, insisting on a certain kind of coding scheme for an assembler, or a specific type of interface, or a particular feature in a computer language. These differences would have hackers banging on the blackboard or throwing chalk across the room. It wasn't so much a battle of egos as it was an attempt to figure out what "The Right Thing" was. The term had special meaning to the hackers. The Right Thing implied that to any problem, whether a programming dilemma, a hardware interface mismatch, or a question of software architecture, a solution existed that was just . . . it. The perfect algorithm. You'd have hacked right into the sweet spot, and anyone with half a brain would see that the straight line between two points had been drawn, and there was no sense trying to top it. "The Right Thing," Gosper would later explain, "very specifically meant the unique, correct, elegant solution . . . the thing that satisfied all the constraints at the same time, which everyone seemed to believe existed for most problems."  

--Steven Levy in "Hackers: Heroes of the Computer Revolution" 

I stole a paperback of this from my Uncle's library back in the day. It covers the MIT / Tech Model Railroad Club of the 60s, the Apple II etc homebrew hackers of the 70s, and then the early home computer programmers of the 80s.

On a less dev-y note: The book probably was pretty inspirational for me, and I see how well this "Right Thing" attitude parallels how I see the world, the central relic of the religiosity of my youth... I have this sense that there is an ultimate objective Truth- the "view from God's Throne" of the world for matters of What We Should Do (whether or not there is a divine butt in that chair!) and any view holdable by humans is only an approximation of that divine perspective - and any earthly authority is only valid to the extent to the extent that it is an accurate reflection of that view. (This is in contrast to an everything is subjective view... it leans into uncertainty in a way that both hard core fundamentalism and post-modern-ish existenitalism lack.)

fun with filters and locale selectors

For work I'm refactoring our locale selector. We have content that varies by country, and then is offered in different languages within each country. 

Our old way of providing a language picker tended to provide the country and language in the locale of the current page... but that's a huge matrix! You have list each country/language IN each of the separate languages. It's error prone: here's a page where our Belgium-in-French page lists the name of the Spanish language in English:

Also, the file to maintain that was over 7000 lines of JSON. (Yes I'm sure it compresses but still.)

Plus I don't believe it's best practice, as FlagsAreNotLanguages puts it:

If you’re linking to pages in German and Chinese, label them as ‘Deutsch’ and ‘中文’ — not ‘German’ and ‘Chinese’. 

It's more complicated when you have different content in different counties - but we are using Flags correctly, for the country and not the language :-) 

I made the pitch to our PO, with screenshots from Disney+ and Salesforce.com. (I had to cherry pick my examples, sites can be all over the place with this stuff.)

I found it a rather pleasant exercise to refactor the redundant JSON from 7300 lines to around 200. 

The other pleasant part was using JS/ECMAscript's new(ish) array operators - ... notation, filter, map, reduce, etc... they are such a good match with JSON overall, both are very expressive without being too arcane. I mulled over a few styles of keeping the lists sorted (wanting this to be roughly alphabetical, but having the current locale first, and then followed by other languages in the same country, then everything else.) I tried some weird ideas with sorting, but then realized I could just preserve the original locale order as listed in the JSON file, but filtered as:

    // finally put the current locale first, 
    // followed by other languages in same country, 
    // then everything else

    return [
      ...items.filter(exactLocaleMatch),
      ...items.filter(justCountryMatch),
      ...items.filter(noCountryMatch),
    ];

with little helper functions above that

    const exactLocaleMatch = (item: { id: string }) => 
        item.id === currentLocale;
  const justCountryMatch = (item: { id: string }) =>
    !exactLocaleMatch(item) && item.id.substring(3) 
        === currentLocale.substring(3);
  const noCountryMatch = (item: { id: string }) =>
    item.id.substring(3) !== currentLocale.substring(3);

Very satisfying work.

excellent quote

"Programming is very Kafkaesque. You're dealing with this arbitrary system that no one will explain to you because no one actually understands all of it. There are bugs."

--official-kircheis 

escher-sketcher

I made an isometric doodling program escher-sketcher based on an old Antic magazine type-in program. You can see the first and second rough drafts that tried to recreate the old way of doing the isometric artwork... but really P5's WebGL 3D mode and "normalMaterial" coloring was kind of made for it. 

Arrow keys plus 'a' and 'z' draw (space bar toggles between drawing and moving) ...you can hit 'r' to have it generate random trails... 

Mouse changes the viewing angle, 't' toggles a classic "orthogonal" view vs regular perspective.. 'c' clears, space toggles drawing vs just moving, 's' for screenshots.

drawing and recording shapes, then scaling fun for a birthday card

 I like making little interactive virtual birthday and/or holiday cards for friends, usually in P5.

Since my friend Jon helped me with the 1D-fisheye zoom effect I put the same effect on x and y and came up with this fun zoomy effect card:

To record the freehand shapes (which, you know, add a personal touch relative to just having formatted text display) I wrote little programs for recording shapes using screen coordinates and recording normalized (0<n<1) values. You freehand draw shapes, and then press any key and it spits out the drawing commands. (I guess I could have recorded as JSON, but whatever). 

On a related note (the joy of making little art programs) this medium article Clive Thompson describing his doodling technique and a little browser app he made for it. Charming and pleasant!

lightweight frontend build tools

Three years ago I bemoaned the need for build systems for frontend work - or maybe more specifically, the assumption many libraries now make that you won't be solely relying on <script src="" />.

Asking around, besides parcel that I wrote about above, there's Snowpack and Vite. Here's an article comparing them.

I do miss the wild west days. I'm slow to really drink the assumption that "if something is worth making it's worth putting in git with a build process to deploy".