The Origins of He-man & She-ra

So I watched and loved the new She-ra on Netflix, and that made me interested in how all of this came about. He-man is a bit strange in that unlike most superheroes, the toy came first and then came all the mythology & the storyline around it. But the story definitely appealed to kids: it still has one of those phrases I’ll never forget from when I was a kid: “By the power of Grayskull! I have the power!”

Power of Grayskull on Netflix

So it’s interesting to learn how the character was crafted and built, and what was good, and what went wrong in He-man history. Watch: Power of Grayskull on Netflix.

Advanced Typescript: Inference

So in part 1 of this series, we looked at how the typeof operator can be used to infer the Typescript type of an object. There’s a bunch more ways to infer types, and it makes working with Typescript pretty interesting as you can make the type inference do the work for you. Here’s a few of them:

Infer the ReturnType of a function

Works like you’d expect:

> function isEmpty(s: string | null | undefined) { return s === "" || s === null || s === undefined }

> let a: ReturnType<typeof isEmpty>

> a = "hello"
[eval].ts:3:1 - error TS2322: Type '"hello"' is not assignable to type 'boolean'.

3 a = "hello"
  ~

undef

Note the slightly weird construction: ReturnType <typeof isEmpty>. That’s because ReturnType (just like all Typescript types) expects a type as a parameter, and not a value.

Infer the type of an instance from the Class Name

Just like ReturnType, there’s also InstanceType:

> class Trigger { x = 0; y = 0 }

> let g: InstanceType<typeof Trigger> = "hello"
[eval].ts:14:5 - error TS2322: Type '"hello"' is not assignable to type 'Trigger'.

Infer the type of Props of a React Component

Here’s a code fragment from Reactist test suite that illustrates this:

    const getAvatar = (
        props?: Omit<React.ComponentProps<typeof Avatar>, 'user'> & {
            user?: { name?: string; email: string }
        }
    ) => (
        <Avatar
            user={{ name: 'Henning Mus', email: 'henning@doist.com' }}
            size="xl"
            {...props}
        />
    )

As you can see React.ComponentProps works pretty much like ReturnType, so you don’t really need to export Props from a component ever. (h/t Janusz)

Typescript has far more complex inference (the infer keyword comes to mind), but this is good enough to start and really simplifies a lot of use-cases, and avoids unneeded type exports from a library.

Recommending: Grab Chai

I’ve been having a virtual cup of chai and good conversation with interesting folks through Grab Chai for a month or so now.

The tagline pretty much speaks for itself.

It’s been great. Like-minded people who I would’ve otherwise never connected to and random folks who do interesting stuff, both. Here’s a couple of photos I clicked:

Do check it out!

gifify: easy video to GIF maker

Update: I’ve switched to using Gifski instead, as that provides a progress bar & a UI!

I’ve been using videos to illustrate points for quite some time now in pull requests and code issues. Since I switched to Github, I couldn’t really directly upload videos to an issue or a comment without uploading them somewhere, and that was kinda frustrating.

Enter: gifify

It’s a command-line tool that does the job well, and is a simple brew install gifify away. It does install a ton of dependencies though, but combined with the new Shift-⌘-5 shortcut, it’s super-easy to quickly record something to show folks on your Mac.

Tailblocks for Tailwind

So I’m a big fan of Tailwind. I think the framework makes CSS grok-able again by providing a subset of the language that has been mostly well-thought out, but still has enough escape hatches so you can do anything CSS can do (mostly)—without writing CSS.

Because Tailwind is so flexible and open-ended though, it’s hard to get started with a more complete layout, part of the reason why Tailwind UI—a component framework that built on top of Tailwind, and by the original creators—sold so well. We ended up purchasing Tailwind UI at Lucideus at the last project I worked on just for this reason: to give a new team more experience with how to build with Tailwind.

Well now, we have an open source alternative: Tailblocks.

Tailblocks seems to be focusing mostly on more fully-fledged layouts now, compared to Tailwind UI that provides more granular components:

But nevertheless, this is really good news. More libraries and code examples for Tailwind—for free—never will hurt 🙂