sort-package-json v2 pure ESMThe npm package sort-package-json migrated to ES Modules in their v2 release and indirectly broke their named exports which our packages have been consuming. It was a major semver bump, but breaking changes slipped from their changelog and readme radar, so I wanted to explain what actually happened there.
As you know, JSDelivr broadcasts all npm content from its CDNs for free. You can access any file of any package’s version ever published to npm. For example, there are “ever-green” URLs:
https://cdn.jsdelivr.net/npm/detergent/dist/detergent.umd.js
and exact versions:
https://cdn.jsdelivr.net/npm/detergent@3.2.0/dist/detergent.umd.js
Besides this cdn. URL, there’s also a purge URL — replace cdn. with purge.:
https://purge.jsdelivr.net/npm/detergent/dist/detergent.umd.js
Calling that URL will trigger JSDelivr to purge the CDN assets and fetch the latest from npm. That’s handy with ever-green UMDs because they power GUI’s (like these), and it can take up to a day for CDN to fetch the latest.
Few people asked me how I count, how much is any arbitrary text “worth” in kilobytes, how I calculate that in my web apps. The answer is simple.
react-codemirror instancesWhen 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.
Frameworks come and go — Remix, Next, Gatsby, WordPress, Hugo, Hexo, TextPattern — but the “classic” CSS styling tactics stay. If you still use SASS and embrace the CSS inheritance — you’re probably already using this technique.
string-truncator in actionWe’ve just published a new npm package, string-truncator. First and foremost, it’s for our own use. A picture is worth a thousand words; here’s our <aside>, before and after:
The string truncation is optimised to fit in as much letters as possible within “X line length across Y lines”.Check it out!
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.
I used to believe that three-theme UI toggle (auto-dark-light) was superior to the two-theme, dark-light. But I don’t think that way anymore.
Interestingly, the non-parsing algorithm of string-strip-html is paying off. It strips JSX tags from MDX! I’m using it myself, on this website, to build the fuse.js search indexes.
Vercel, our static website hosting service, makes it easy to set up page redirects, you can have up to 1024 redirects. It’s all controlled from a single JSON file. Many things can go wrong in that file, stakes are quite high (starting with SEO) and any redirect mistakes can be hard to spot.
Here’s our automated checking setup.