Curation / The Stream

The anti-social media stream. Otherwise known as my personal feed. Similar to Linus's stream by Linus Lee.

Jul 8, 2024, 2:58 PM
Intl Locale String with Timezone

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”.
Jun 26, 2024, 1:23 PM
jscodeshift Object Destructuring

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"')])
  ),
]);
```
Jun 20, 2024, 1:24 PM
Embed TikTok videos in Obsidian

How to embed TikTok videos in Obsidian’s editing/live preview and reading mode.
```
<iframe
  src="https://www.tiktok.com/player/v1/7382225350710824222?autoplay=0"
  allow="fullscreen"
  style="width:100%;height:50vh;"
/>
```
where 7382225350710824222 is the video id you get from TikTok from this example link: https://www.tiktok.com/@_jen_hamilton_/video/7382225350710824222.

The TikTok v1 player has a bunch of controls that you can use to modify from this documentation.

There’s still some wonky height issues, and I suspect this is the default height Obsidian has on the container around the editor. I gave it a good enough viewable height of 50vh, which should be enough.

Example Video

Reference links
Jun 20, 2024, 11:11 AM
Running ESM on Node REPL

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.
```
Jun 18, 2024, 11:19 AM

Package Dependency for @observable/plot

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.
Jun 14, 2024, 3:56 PM

Stochastic Parrots

From this ACM paper, On the Dangers of Stochastic Parrots, the hypothesis is maybe these LLMs are parroting back what we already know and aren’t learning. We can probably, maybe, safely say that is no longer the case.
May 2, 2024, 5:25 PM

Students Have the Right to Protest Apartheid

From The Progressive: Students Have the Right to Protest Apartheid. My lovely fiancé wrote a piece about the student protests for Palestine.

While the Republican-led Congress has used its power to condemn any protests on behalf of Palestinians, where was the same outrage and zealousness when white nationalists came to college campuses?
Apr 24, 2024, 11:16 AM
TIL importmap

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
] as I found countless others have, so I wrote a custom bun server to host this project. Hopefully there’s a better setup I can find with Vite using importmap in the future.
Apr 23, 2024, 2:32 PM
Start and end of day offsets for current system time zone offset using Luxon

Luxon datetime library defaults startOf and endOf methods to UTC. But this isn’t great for end users who don’t live in UTC / GMT. To offset this, we need to grab the time zone offset from the user’s system.
```
const systemTimeZoneOffsetInMinutes = new Date().getTimezoneOffset();  
const systemTimeZoneOffsetInHours = systemTimeZoneOffset / 60;
```
Then we can add the offset to the Luxon datetime object.
```
const now = DateTime.now();
const startOfLocalDay = now.startOf('day').plus({ hours: systemTimeZoneOffsetInHours });
const endOfLocalDay = now.endOf('day').plus({ hours: systemTimeZoneOffsetInHours });
```
Apr 18, 2024, 4:14 PM

The "Boring" Stack

I was listening to this podcast: The boring JavaScript stack featuring Kelvin Omereshone (K.O.O) (JS Party #319). My takeaway is I should be using a boring stack to build my business ideas. Leave the shiny new toys for tinkering and use something stable.

While Kelvin talks about the benefits of using Sails, I was thinking about the other “boring” things that constitute a boring stack. It goes beyond tecnologies, like how to run a business, how to organize your team, and how to market the product. And when those things are boring, they are unsexy and oftentimes neglected.

Related: Kelsey Hightower’s nocode

The best way to write secure and reliable applications. Write nothing; deploy nowhere.

Previous Page 2 Next

Curation / The Stream

Example Video

Reference links