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.
typescript-eslint rule prefer-optional-chain is buggyThe 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.
autoprefixerCodsen.com runs on Remix, the framework which won’t process anything CSS-related. To scale the styling task, some people use Tailwind; I use good old SASS on style-dictionary design tokens. SASS CLI watches the styles folder with .scss files from outside Remix and places the processed files inside the Remix project folder. From Remix’s point of view, CSS files just magically appear and update themselves.
Enter Autoprefixer. It doesn’t fit into this workflow! We either need to set up a proper JS-script pipeline (à la Gulp) or, two-level setup with an intermediary folder where Autoprefixer CLI’s watches the output of SASS directory (so two CLI’s watching), or some fancy terminal pipe contraption.
None of the options seem suitable.
The alternative is to run VSCode plugin manually, on .scss files.
I’m OK with that, this website needs to be simple.
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.
Our packages email-comb and html-crush had dedicated GUI websites and considerable amount of people have been using them. Over time, these two websites became hard to maintain; they were coded in vanilla JS without consistent components, tests and styling. Since they were created, a lot has changed; for example, Remix.js appeared and shook up everything. For example, the codsen.com theme toggle detects when a user switches the theme on the OS Preferences panel. There’s also no initial flash either. Those two old websites didn’t have this technology.
It took me a few weeks to recode them on codsen.com. Five minutes ago, I set up the redirects:
Plus, I created a playground for string-strip-html; it didn’t have a domain before.
The next one is https://detergent.io — the final remaining dedicated library GUI website. I have a few ideas on further improving both the package and its GUI, so I kept them to the last.
2022-SEPT-11 update: detergent.io has been migrated to codsen.com playground.
It’s a day off today and I’m adding exports to all unexported-yet TS types and interfaces defined in every program, especially Opts and Res:
like that⤴, on every single program-package.
PS. I can’t stop thinking about deno and being able to run TS natively. How nice would it be to have the whole monorepo in deno, on rust tooling! Theoretically, we could get rid of: prettier, uvu, c8, esbuild, benchmark, turbo, and (shocker) eslint.
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.
getby and findby interchangeabilityAt first glance, it seems that React Testing Library (abbreviated RTL) await waitFor + get can be replaced with find everywhere, but it’s not so.
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.
Mr Toh posted a good article comparing various means to strip tags from HTML, including our npm package string-strip-html.
To add 2p.
It’s not just about speed.
The primary reason why you’d use an npm package, rather than regex, is whitespace management. The string-strip-html ensures the stripped results looks as if a human deleted the tags. Our program can even be used to generate email text versions, placing URLs besides the stripped link labels.
The second reason is string-strip-html can tackle broken HTML, dirty HTML and HTML mixed with other languages.
The third reason is string-strip-html saves you time: writing unit tests, writing correct type definitions (you’re using TypeScript, right?) and tackling edge cases.
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.
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?
Codsen.com was previously on Eleventy, pure static HTML+CSS, served from the Edge via Cloudflare workers.
The problems with that setup were:
wrangler program which serves the sites is buggyI’m sure most of that could be solved one way or another. But I just outgrew the 11ty baby shirt.
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.
When you look closely at UK keyboard layout, it does not make sense: 1) useless keys… 2) …at located at strategic places; 3) plus weird key shape.
Maintaining npm packages is hard, and writing Open Source is already an achievement. But let’s not get complacent. Here I tried to compile a list of a few ideas to improve further. I haven’t implemented some of them yet. Few entries at the bottom are so novel that I think nobody in the world has either.
rollup vs esbuild: iife is not umdBack 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.
Don’t know if you noticed but many extraordinary developers mastered their code editors to such level, that they started teaching productivity, editor plugins and, heck, in some cases, writing code editors.
The first two quick examples that pop to my mind:
It does not matter what code editor you use but it’s imperative to master all keyboard shortcuts and tricks of the one you picked.
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.
“Our obsession with quality is renowned as every Jaeger‑LeCoultre watch undergoes strict “1,000 Hour Control” testing.”
—official websiteopens in a new tab
I wonder, what would be the Software Engineering field equivalent of that?
Interestingly, the scanerless-parser 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.
html-crush bug fixedOne line in Babel config, env preset’s loose set to true was causing a spread operator to disappear on only CommonJS builds (not ES Modules or UMD), which led to broken logic (program could not calculate opts.breakToTheLeftOf correctly any more), program inserted extra blank lines. A crazy bug, isn’t it?
Consider a function written in TS, which multiplies two numbers…
codsen-parser vs. hyntaxImagine the HTML: <a></b>.
Parser-wise, how would you design the AST architecture, considering cases like that?
chalk vs. coloretteTooling choices are a subjective matter. Lately, I’ve been observing colorette taking over erroding chalk, and I have few thoughts on this subject.
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.
object-path package is greatThe npm package object-path is a getter/setter for nested arrays and plain objects. Here we use it directly and also align our API’s to it. Here’s why.
Well, sort of.
As our npm package count grows, the README automation becomes more and more an issue. Installation instructions, badges, contribution guidelines can be automatically generated, but many other chapters can’t.
Here’s our story from a README perspective.
string-strip-html v.5 and lessons learnedFor an exported function, string-in, string-out API is awesome because it’s simple. The problem happens later when you want to add more to the output, for example, a log with time spent. Or an alternative output, like locations of string indexes. Or the version from package.json.
Few arguments in favour to BYOD company policies: