ts^Σ=9

At first glance, it seems that React Testing Library (abbreviated RTL) await waitFor + get can be replaced with find everywhere, but it’s not so.

The typescript-eslint ESLint plugin’s rule prefer-optional-chain is buggy on 5.35.1, it’s blocking me from bumping all deps in the monorepo. It took me around 4 hours to investigate, extract and raise https://github.com/typescript-eslint/typescript-eslint/issues/5556

People also raised similar issues regarding the latest prefer-optional-chain.

I hope maintainers will fix it soon.

Until it’s fixed, don’t bump it beyond 5.33.1.

The latest TS doesn’t support the types key at the package.json root level. Paul Zaczkiewicz raised an issue on our GH tracker about it, and together we were able to come up with a repoduction (later I also discovered a related ticket on TS issues board). From there on, it was easy to solve; here’s how.

Syntax highlighting is done using either highlight.js or prism.js. Once you’ve picked one, you’ll have to set it up for code blocks: 1. within MDX and 2. outside MDX. That’s how it works on all kinds of frameworks, not just Remix, although I’ll post examples for Remix.

This setup is mostly a trivial task; however, there are a few niggles worth mentioning.

This weekend I was tinkering with string-strip-html GUI; I wanted to sync the state with URL params so that users could bookmark the page and visit later and automatically get those settings restored.

Here’s an MVP based on a forked Remix.js starter template on StackBlitz.

When building the string-strip-html GUI, I wanted: line wrapping, full-screen flexbox layout, with scrollbars on Codemirror box only. That’s a common layout seen on code-oriented sites like Codepen or Stackblitz. I created a minimal proof-of-concept sandbox to prove it works.

Consider a function written in TS, which multiplies two numbers…

A decade ago, Chris Coyier from CSS-Tricks described ways to consume SVG, which can be distilled into two groups: to link and to embed.

Fast forward to 2022, the market has shifted from WordPress+PHP to React+TypeScript, but the same dilemma “to link or to embed?” still applies because, at the bottom of it, we’re still dealing with the same HTML and CSS as we did a decade ago.

So what’s the best way to import SVG in MDX?

Back in the day, before native ES Modules, UMD builds were superior to IIFE because we could unit test them.

And while Rollup and Webpack can produce UMD, esbuild can only make IIFE, so that was an argument against using the esbuild.