Writing

A curiosity sparked because my co-worker pointed out the Spring Framework is currently owned by Broadcom. That’s because VMware is now part of Broadcom, and Spring Framework was part of VMWare prior. I had an inkling there was a scandal Broadcom had awhile ago. Low and behold: SEC Charges Four Current and Former Broadcom Officers for Backdating Options (Press Release No. 2008-87, May 14, 2008). In 2010, the charges were dropped - Chipmaker Broadcom stock options backdating case ends. That’s not all though. Their first CEO, Henry Nicholas had criminal charges. The SEC dropped those charges in 2010, but that was enough to disgrace the people involved. Their former SEO left Broadcom before the SEC investigation back in 2003 to “work on his marriage”. He was sleeping with prostitutes.

Read: Henry T. Nicholas III: A human tragedy. And the follow-up a decade later with Orange County tech billionaire Henry T. Nicholas III charged with drug trafficking following Las Vegas arrest.

The court filings in the past case painted Nicholas as a ruthless entrepreneur who slipped drugs to competitors without their knowledge, who threatened the lives of employees he believed had turned against him, who had the means and motive to flee beyond the reach of justice in his private jet.

His start was in researching ICs, and later that’s what Broadcom sold. He was given awards for his research. He’s like a walking contradiction, trying to save his name with his philanthropy while making wildly bad decisions. File under downfalls.

It’s always fun when the MDN documentation doesn’t tell us what the options are within the methods page, I you have to dig deeper into the constructor. The TypeScript bindings don’t always make sense.

MDN - toLocaleString

Anyways, I needed a datetime string with the date, time in hours and minutes, and the timezone. I’ve made the timezone explicit and came up with this snippet.

date.toLocaleString("en-us", {
  year: "numeric",
  month: "short",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
  timeZone: "America/Los_Angeles",
  timeZoneName: "short",
});

This would return something like “2024-07-03, 12:00 PM, PDT”.

The shorthand option is must be used in object destructuring to remove redundant prop: value to be prop.

What I wanted was this shorthand:

const { asFragment } = render(container);

But what codemod generated was the following:

const { asFragment: asFragment } = render(container);

While both are true, I would rather have the shorthand, as that’s what we have strictly for eslint rules. This Github Issue helped describe the solution on how to implement in your transform file.

const code = j.objectProperty(j.identifier("h"), j.identifier("h"));
code.shorthand = true;

j.variableDeclaration("const", [
  j.variableDeclarator(
    j.objectPattern([code]),
    j.callExpression(j.identifier("require"), [j.identifier('"packagename"')])
  ),
]);

d3 v7 is packaged as ESM only. That made it difficult to use in the Node.js REPL. From this StackOverflow thread, I found a solution.

let d3;
import("d3").then((module) => {
  d3 = module;
});
// Then you can use d3 anywhere once the promise is resolved.

Extremely esoteric bug. I’ve had an open issue for the past three months related to this other issue. I couldn’t figure out why npm’s registry would pull an older version of d3-scale-chromatic when I upgraded the @observable/plot library. As a future note for myself, if I run into this issue again, I’ll have to go into the package-lock.json file and update d3-scale-chromatic to v3.1.0.

I forked a small demo from Wes Bos and ran in on my own sandbox. It seems much cleaner than using a script tag per each dependency, and works on all major browsers.

In my little demo app, I placed the importmap in the head of the document. I’m using react as well as my own utils file to test out the functionality.

<script type="importmap">
  {
    "imports": {
      "react-dom": "https://esm.sh/react-dom",
      "react": "https://esm.sh/react",
      "utils": "./utils.js"
    }
  }
</script>

Read more about importmap on MDN

From there, I imported these libraries in a script module.

<body>
  <div id="app"></div>
  <script type="module">
    /* eslint-disable */
    import { useState } from "react";
    import { createRoot } from "react-dom";
    import { formatMoney } from "utils";
    createRoot(document.querySelector(`#app`)).render(formatMoney(100.2365));
  </script>
</body>

I had a hiccup with [plugin:vite