LEARN THINK BLOG REPEAT

loops and things jen field loops and things jen field

How it started, how it’s going

My journey (so far) with JavaScript

My journey (so far) with JavaScript

At the beginning if this year I decided to learn JavaScript beyond just the “PM level,” which in my world means you know form.submit and navigator.credentials.get and the rest you fake.

The truth is, I’ve always liked building things. Myself. With my own hands (or keyboard). This unfortunately is something my PM career has caused me to put on the back burner much of the time. Beyond demo’s for events and sample apps for documentation, my work life tends to consist of encouraging others to build things, rather than building them myself.

I’d like to change that.

So I decided to start. And I picked JavaScript to start with for two reasons: one, it’s everywhere. It’s in the browser, it’s on the server, it’s in native and mobile apps via components like SFSafariViewController and frameworks like React. And two, it is the first use case for the WebAuthn protocol, which makes it highly relevant to the cause of good sign in.

I won’t bore myself writing everything I learned, but for fun here are a few random JavaScript learnings:

  • we play fast and loose with types here. but it’s a good idea to specify [] or {} for array or object declaration, respectively

  • an empty array ([]) is not falsey (an empty array’s array.length is though)

  • strings are UTF16, so characters are stored as single double-byte surrogate or surrogate pair (4 bytes total). this is abstracted away inside codepointat() so it can be hard to tell what’s going on.

  • i haven’t found something like “memory view” in Visual Studio Code or browser debuggers unless the variable is a buffer or array – this was very limiting when trying to figure out the item above 😠.

  • if the client js file is a module (which it is if it has an “import” statement at top), then the script element in html needs the attribute type=“module”, or it will not find the javascript and nothing will work

Anyway bottom line, here’s where we are currently: visit Fun with WebAuthn.

You’ll need to wait a minute (I’m still not paying for the always on feature).

Ok, maybe I’ll illustrate…

At the beginning I wrote a spec of sorts, outlining 7 requirements the “identity project” would need to meet. At this point I’ve met almost all. Requirement 6 ultimately became this blog. And current WebAuthn options (requirement 4) ended up being more about conditional mediation than credential management. I ended up cutting requirement 7 (React) as it was not a requirement, and it didn’t end up being necessary to meet the others.

Notebook showing 6 initial requirements for the identity project

My initial “spec” for the “Identity Project”

Then, I got to work building. The day I met the ubiquitous “hello world” milestone was memorable even if it seems underwhelming now:

Screen image showing browser displaying "hello world"

Hello, world.

Weeks and months of iterative progress later, I have something very close to what I envisioned originally, if not spot on. There’s always more work to do, and it’s not bug free, but it exists and it works. (Also it has five color schemes, my favorite depicted below).

Screen image of funwithwebauthn web app

Today

What’s next? There’s a bug with Safari on my iPhone, so I’ll be looking into that.

Read More