Masthead image of a light brown and white barn owl, its head cocked
    completely sideways, looking at you inquisitively.
Keith's avatar
Keith J. Grant

Front end developer working primarily in React. Currently at Red Hat working on Ansible Controller.

I live in the great Pacific Northwest. I care about people and believe in the open web.

  1. Keith's avatar

    I just stumbled across your site... I love the design! That is so much fun!

  2. Keith's avatar

    “Own your own website” is definitely a big part of it, but also the Indieweb includes a lot of emphasis on open interoperability standards, like webmentions, micropub, and ActivityPub.

    For example, I wrote this post on my website, and you are getting a response via Mastodon thanks to some webmention magic I have wired up.

  3. Keith's avatar

    I definitely agree! Thanks for the nudge; I just edited the post to say that :)

  4. Keith's avatar

    Honestly, I’d totally forgotten about unpkg.

    I suppose the one key difference would be the client-side decision (based on semver) whether to make a network request for the package or use one already in cache that matches e.g. ^1.3.4.

    There’s probably no reason a lightweight browser extension couldn’t do that for unpkg today, though you’d have to drive adoption somehow.

  5. Keith's avatar

    DNS is dark magic. When it takes it's sweet time propagating and there's no way to know whether it's slow or you screwed something up… 😫

  6. Keith's avatar

    also, sometimes I reply to stuff via my website, which counts as a contribution.

    This tweet just gave me a green box!

  7. Keith's avatar

    Not combative, no worries ;)

    It’s typically the sort of problem you don't hit until you’re 20k lines into an app. Non-contrived examples are tough…

    First thing that pops into mind is when you find you need to mix & match multiple directives at the same time. Not just a loop through array, but a loop with a filter and a two-dimensional sort. That kind of thing.

  8. Keith's avatar

    Component-based development is only one of React’s revolutionary changes in frontend dev.

    Other significant ones to consider are the ability to declarative modify the DOM, application of functional programming ideas to the front end, uni-directional data-flow with a single source of truth, and now (with hooks) major improvements in code organization and re-use of common patterns.

    Web Components are fantastic, but they are low-level. The do NOT provide these other significant benefits.

  9. Keith's avatar

    The state-based description makes sense to me. I’ve argued before that selectors are if statements: If this description is true of an element (it has this class name, it is a descendant of that, etc.), apply these styles. :hover is not really any different than JS adding or removing a class.

  10. Keith's avatar

    There are definitely some interesting ways Grid meets up with our current modular styling best practices. You can fix that stretched button with align-self/justify-self properties, but do you really want to make it aware of its grid context like that?

    I posted this a while back on how the old Separate Structure from Skin OOCSS rule needs some attention again:

  11. Keith's avatar
  12. Keith's avatar

    That’s amazing. Particularly considering it’s less than a week old. In my experience, there’s typically a “Buffer delay” between when a popular post gets published and when it really takes off—because everyone tends to throw the links into their Buffer, which is usually backed up a couple weeks.

    So I have a feeling you’re going to see that number really take off 💪🏻

  13. Keith's avatar

    I’ve been meaning to do some write-ups of all this. It all uses W3C standards, so there’s a lot of interop :)

    There are a lot of little pieces. No one of them is too difficult, but piecing it all together in a way that provides a decent workflow took a little doing.

  14. Keith's avatar

    The key is getting webmention support setup. Then there’s a service called to bridge webmentions in and out of twitter/facebook.

  15. Keith's avatar

    Nice! Subscribed!

    Looks like you’re missing the <link rel="alternate"> for discoverability, though

  16. Keith's avatar
  17. Keith's avatar

    I use bullet journal loosely for tracking what I'm working on. Not as super religious about it as I was when I started, but I still find its annotation symbols useful

  18. Keith's avatar

    I love a good sour. Definitely not keto, but my favorite is with real maple syrup instead of simple syrup 😍

  19. Keith's avatar

    For extra credit, this reply is posted to my site, too 😁

  20. Keith's avatar

    I assume you already have mine?

  21. Keith's avatar

    I haven't written anything up but feel free to hit me up with any questions as you go.

    I did a very SMACSS-y folder organization. All modules in a src/modules directory & subdirs, src/base, directory, src/layouts, /src/mixins, etc.

    In the src directory I have multiple top-level stylesheets (four for each brand, as I've chunked up the styles). I basically have my preprocessor crunch each of these and output each of them compiled in a build directory.

  22. Keith's avatar

    All right, I’m kidding myself. I’m not going to get to this today, at least not in full depth. But I do want to say this much: I hope you don’t take that subtweet of mine as criticism.

  23. Keith's avatar

    Is it just me, or is React getting more demanding about adding keys to everything?

    It’s complaining to me now about a perfectly normal <div><label /><input/><button/></div> structure not having keys 🙄

  24. Keith's avatar

    It needs to be as thin as a credit card, Jonathan! 🙃

  25. Keith's avatar

    “building react into css” -> I assume you mean into JS?

    React the library will be outdated eventually, but I think it has brought enormous shifts to how we build out component-based architectures that will last. JS can now be written in a more declarative way, and centralized state management plus uni-directional data flow makes code much simpler and less error prone.

    I really hope those benefits can make their way into the web platform.

  26. Keith's avatar

    I wouldn’t want React or Vue on the platform, but I want the platform to be informed by them (specifically: declarative, uni-directional data flow)

    If CSS just copied preprocessor variables, we wouldn’t have the amazing custom props. WC should strive to do the same thing.

  27. Keith's avatar

    Exactly, though it may need to be more carefully done in some circumstances.

    Page.js does this._onpopstate.bind(...), but it doesn’t define that function if window.onpopstate doesn’t exist, so the error pushed down a layer instead of fixed entirely.

  28. Keith's avatar

    That’s better than I do. I tend to leave my lunch on the landing where I put on my shoes 😖

  29. Keith's avatar

    TIL if you put a wallet in a US mailbox, the post office will deliver it to the address on the ID card within, free of charge.

  30. Keith's avatar

    Thanks! I'm hoping to add support for full articles next 😀

  31. Keith's avatar
  32. Keith's avatar

    I figured it out. This was caused because I had Cmd-V as a global shortcut for “Paste and Match Style”

  33. Keith's avatar

    Dooooo it! I’ll send you one when you’re set up :)

  34. Keith's avatar

    For instance, I should have written that reply on my site first. But I’m a lazy bum

  35. Keith's avatar
  36. Keith's avatar

    Whoops. I did not intend to send my entire article as a reply WM. Please feel free to delete that!

  37. Keith's avatar

    There are standards emerging to do social networking on the open web, I write, using said standards.

  38. Keith's avatar

    Some very interesting possible ramifications of this, broken down by @adactio—including its effect on web advertising and Google analytics

  39. Keith's avatar

    Didn’t you just redesign your site a few months ago?

    I love the typeface you’ve got. When I redid my site, I spent ages looking at fonts thinking, “it’s not as good as Ethan’s font”

  40. Keith's avatar

    Re “That’s not how the Force works”:

    I think that’s a big point this film is trying to make: the Force is bigger than we’ve previously believed. It’s not just about moving rocks. It can connect two minds from light years apart. It can be used to project an image of yourself across the galaxy. A force ghost can summon lightning.

    If it can do all that, I have no qualms accepting Leia can do what she did.

  41. Keith's avatar

    Though I suppose if I really meant it, I would reply to you using webmentions 😜

  42. Keith's avatar

    I hope we see a day where Readers and Micropub editors are baked into every browser.

  43. Keith's avatar

    I do have one nitpick: em-based sizing doesn’t mean everything must be sized in ems: particularly images and layout. False equivalence.

  44. Keith's avatar

    I’m a strong fan of normalizing. Resets tend to undo a lot of stuff I would rather have in place. And normalize.css has historically fixed a lot of odd browser quirks that resets may or may not address.

    I’m also wary of over-reacting to this one change by Chrome. Yeah, it may result in some odd bugs, but I don’t want to become heavy-handed in defending against it in the future, as it’s an extremely rare circumstance.

  45. Keith's avatar


    So are you replying to this post to earn my book? I was more hoping to get somebody who is new to the IndieWeb 😝

  46. Keith's avatar

    I’ve got to learn to repeat the questions for the mic at the end of my talks. I always forget that part 😖

  47. Keith's avatar
  48. Keith's avatar

    When I wrote this a couple years ago, I did not know the work already well underway on the IndieWeb. I’m glad to see the progress made since then, and I even gave a talk on it last week:

  49. Keith's avatar
  50. Keith's avatar