boop

boop

(react implementation of a nice little hover effect, a bit of jiggle vs a transition to a steady hover state)

timearch

A while back I started playing with timelines - I wanted to be better able to see the footsteps of my life so far. 

That's one thing about life: it's easy to forget how much of it many of us our blessed with. Days rush by, weeks drags, and years can fly past - but there's a lot in there if you pay attention. That's good news if you're living a life (as long as you're having a reasonable time of it!) but bad news if you're trying to make an information-rich detailed graphical representation of it.

In making my main timeline, full of photos of places and people that I've loved, I experimented with different visual displays. This weekend I put together one more form: the rainbow-like arch: 

As usual with the experiments, I condensed things to where I've lived, jobs I've had, and people I've had some kind of romantic connection with. 

Using a divided arch was interesting - it's more bounded than a simple linear timeline, and the curve gives a bit more room to cram stuff in, making better use of the plane. 

Although Tufte famously warns against pie charts, I think this display does invite comparisons of ranges, without too much distortion. 

(Also, I was thinking a bit about the Jastrow illusion where two identical thick curved rails appear vastly different in size depending on how they're nested.)

more hot links: the rise of the front end developer

The Rise of the Front End Developer... really liked the wide industry view of this.

interesting CSS trick for autogrowing textareas

The Cleanest Trick for Autogrowing Textareas... nifty

storybook composition embedding static storybooks - the CORS silver bullet (get it? like the beer? oh never mind)

TLDR: if you're needing to make an end run around CORS/Access-Control-Allow-Origin errors while hitting a locally running http server, you can try running 

npx http-server . -p 9999 --cors='*'

(Obviously you can pick your own content directory and port besides . and 9999)

Giant pain tracking this down.

It's trivially easy to embed an existing running storybook into your "local" storybook

Just add something like 

  refs: {
   'design-system': {
     title: "Storybook Design System",
     url:"http://localhost:9999/"
   }

to the modue.exports in main.js or ts or whatever.

But what if that other storybook is static? (i.e. the files you generate with npm run build-storybook?)

At first it won't work, and you may see requests for /stories.json

The docs aren't crystal clear on it, but you need to run 

npx sb extract

in order to generate that file. 

But once that was done I was still seeing:

Access to fetch at 'http://localhost:9999/stories.json' from origin 'http://localhost:6008' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Luckily bardiarastin on this github page had an answer:

npx http-server . -p 9999 --cors='*'

That seemed to clear it up and Storybook composition worked.

when the storybook panels disappear

I generally ask more questions than I answer on forums, but on Storybook discord I was pleased to give the answer-er in this exchange:

When I build static storybook page I have a toolbar with controls and events, but when I run it with start-storybook -p 6006 there is no toolbar. How can I fix this?

Have you tried hitting "A" and "D"  (show add-ons and change orientation, from the "..." menu)? I've found sometimes the panel below gets hidden offscreen - sometimes a combination of A + D along with resizing the window (especially if it used to be on my portrait mode monitor) gets it back

Thank you! Changing addons orientation helps me! 

Trying to field the easy questions so maybe the experts will help me more with my tougher ones... 

death of the net, film at 11

Recently there's been some kerfuffle about all apps on Macs phoning home and privacy concerns in general on Apple products. I haven't been tracking too closely to know if Apple's explanation and promise about not logging stuff, mostly using it as an anti-malware measure, satisfies those concerns.

It does remind me of the role of government in general. I value freedom but I'm no Libertarian, and I think one of the essential purposes of government is to stop exploitation of the weak by the more powerful. In some ways I do want a "bigger brother" because I more fear what groups at intermediate levels of power will do, especially with nothing like a ballot box to put them in check.

I see a pretty obvious parallel, then, with what Apple's doing. Free Software stalwarts like Stallman would absolutely stress the need to unfettered use of general purpose computation as a human right! But I think for many of us, the "walled garden" approach - so long as the walls aren't too high or confining - suffices.

I've also been thinking about this answer to Is Google in Decline? Borislav Agapiev uses this chart about the number of websites (even though some estimate 1/4 of them are parked domains) to point to a "Yes" answer:

Agapiev goes on to say how this means Google's fundamental assumption of fresh links and being the start page for everything on the web is not wellfounded: 

First there are big vertical silos, starting with Amazon, but also including other big walled gardens such as Facebook, Twitter and a host of others such as Netflix, Spotify, Shopify, eBay, Craigslist etc. So the best deals, social chatter and tweets, song and shopping recommendations, auction deals, free ads etc. are to be found elsewhere.

The same really goes for basically every vertical. Way back (remember Googlebase?) it was thought nobody should bother with any vertical as Google had it in there anyway. Googlebase is long gone and people go to CarGurus or Carvana for cars, Zillow for online house listings, Indeed and others for job postings etc., the list goes on and on.

Heh, happy to have worked at CarGurus, even as I'm at one of "and others for job postings" right now. 

It also reminds me of a recent 99% Invisible podcast I enjoyed, The Lost Cities of Geo, about Geocities, a remarkably egalitarian way to get people putting stuff up on the early web. I suppose Facebook is even more egalitarian, for better or worse! And I think they still benefit from being the only place in the US market to really connect people's real life persona to their online one, in a way Twitter or Tumblr hasn't. People have a lot of privacy reservations and what not about the place, and some have decided that remote family members and old classmates don't have that much of interest to say, but I understand the continuing appeal of it, and rely on it as my best connection to any kind of audience. Its proficiency as a vector for disinformation not withstanding...

I still bumble around on the independent blogosphere, because well-established patterns die hard with me - (almost 20 years of daily posts with hardly a day missed at kirk.is!) and I find great value in being able to look up every half-remembered quote, as well sharing and looking back on old photos and what not. 

Ah well, just some thoughts about the state of the online world!

when MDXCreateElement shows up in storybook

 I've had a frustrating Sprint with Storybook; as the dev who was working on it before put it:

I was trying to make that work - pull the args from prop definition - but wasn't able to get that working […] As I discovered, it could be explained by anything, including position of planets. At least that stable it  felt.   :-)

The Template.bind() method suggested in the docs ends up putting MDXCreateElement rather than the actual JSX component names behind the "Show code" button. Luckily this comment in a github ticket pointed to a way to fix it (even in pure MDX, some of the other suggestions assumed you were in jsx/tsx) by bypassing the bind. 

A sample page I ended up with was

import { Meta } from '@storybook/addon-docs/blocks';
import { Checkbox } from './checkbox.component';
import { useState } from 'react';

import { Canvas, Story, ArgsTable } from '@storybook/addon-docs/blocks';

# Checkbox

<Meta title='Components/Checkbox' component={Checkbox} />

<Canvas>
  <Story name='Example' args={{ label: 'Example' }}>
    {(args) => {
      const [checked, setChecked] = useState(false);
      return (
        <Checkbox
          {...args}
          checked={checked}
          onChange={() => setChecked(!checked)}
        />
      );
    }}
  </Story>
</Canvas>

<ArgsTable story='Example' />

which uses useState to let the pure functional stateless component still do what QA expects it do when a user clicks on it...

web stuff

An ever so slightly PG13 intro video to ARIA + Web Accessibility...

A piece on Flex Grow and Shink pointed back to the CSS Tricks Alamanac that seems worth a browse.

quicknote: better dates and time in javascript

A medium article claims Luxon.js is the new hotness of date and time manipulation - usually when I have a need I tough it out in the standard Date object, but I should probably be quicker to look for some help... interesting to think about "immutability" in date objects as well, as long as you can trivially construct a new object based on an old one plus an offset I think it's good...

sets and maps instead of objects and arrays

When Not to Use Objects and Arrays to Store Data: ES6 has other ways of handling data structures and values in the form of Set and Map

It seems pretty cool to use these things... but I'm not sure if they will ever achieve their full place when object keys and arrays work "good enough" and have a bit more syntactic sugar- especially in terms of JSON... 

(I am convinced that the cleanliness of JSON - combined with the sheer power of arrays and key/value pairs, and the trivialness of "parsing" JSON - has been somewhat responsible for JS' ascendency, and DEFINITELY for JSON being preferred over XML for many config tasks. Though a little weird that JSON is stricter than JS - like JS can have "bare" label keys but JSON only has strings... (really annoying if you have an eslint that says all strings should be single quoted...)

back to the tech - and what to do when you get errors in storybook

Interesting aside from this page on alternatives to SPAs:

But the main caveat is that they assume that you know JavaScript and the DOM, which are not necessarily universal skills anymore. A lot of developers growing up on React have acquired a real blind spot for native browser APIs.

A manager mentioned something like that to me before, when I was wondering what my long-range experience brought to the table when young hot-shots who are quicker to find and use a good library than I sometimes am could make such cool stuff-- he claims he's interviewed folks who just really have no solid concept of the DOM. For better or worse my working knowledge of declarative languages such as Angular and React were built on the transition from "CGI"-style whole pages through pages turbocharged with JQuery. But some of these whipper-snappers are at a loss to really understanding what the DOM means...

Anyway!

I haven't had a lot top say on this blog last month, sometimes that's a reflection of what I'm having to gear up for in my job. October had a lot of wrangling with storybook. Storybook is more of a dynamic work in progress than I prefer. (Also I find it interesting that their main support community is on Discord!) Right now they're playing catch up with the new version of React - while React 17 is a stability release without a lot of contract changes, libraries gradually switching over their dependencies can create conflicts. One bit where I tried to "pay it forward" and be a helper rather than a helpee on the discord:

If you [have a blank screen on starting storybook] and see something like "Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:" [in the console] you are probably caught in the local hassles w/ React upgrading. The general advice is to "run with --no-dll", I did that my having these two lines in my package.json instead of just the first:

   "storybook": "start-storybook -p 6006 -s public",

    "storybook-no-dll": "start-storybook --no-dll -p 6006 -s public",

and then running npm run storybook-no-dll instead of npm run storybook

(I could reproduce the problem by running:

npx create-react-app my-app

cd my-app

npm start

and then 

npx sb init

npm run storybook

) 

The other biggest hassle I dealt with was, before upgraded storybook version, we kept using "*.storybook.*" as our filter for what storybook should find, even though the new standard is "*.stories.*". That seemed to work ok, until I wanted to start publishing "*.storybook.mdx" - you should really stick with stories.* OR be prepared to get deep into the webpack config - webpack is doing special processing to process the "mdx" Markdown + JSX stuff.