Articles

a thought  · 

Exporting types too

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:

Fig 1. Adding type exports

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.

a thought  · 

Stripping HTML

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.

a thought  · 

Learning as you lint

Besides pairing, I think the greatest practical learning comes from well-configured linting rules. For example, ESLint plugins for React hooks or RTL.

Since you'll see a suggestion only if you make a mistake, it's perfectly-relevant.

Article  · 
Importing SVG in Remix MDX

Importing SVG in Remix MDX

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?

Read article
a thought  · 

Arguments against Eleventy

Codsen.com was previously on Eleventy, pure static HTML+CSS, served from the Edge via Cloudflare workers.

The problems with that setup were:

  1. Flashing when navigating between pages
  2. Components written in Nunjucks — not as universal as JSX
  3. Absence of MDX
  4. A poorer DX in general, stemming from Nunjucks itself — for example, compare the Nunjucks and TS linting
  5. Cloudflare Workers can be fragile, the wrangler program which serves the sites is buggy
  6. Being on edge, without a server, doesn't mean you spend any less than using a server + CDN
  7. Unable to share Nunjucks components in tester web apps driven by Vue

I'm sure most of that could be solved one way or another. But I just outgrew the 11ty baby shirt.

Article  · 
Syntax highlighting in Remix

Syntax highlighting in Remix

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.

Read article
Article  · 
Better npm packages

Better npm packages

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.

Read article
a thought  · 

Mastering the tooling

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:

  • Wes Bos (online educator) has once published a Sublime Text Power User book
  • Steve Francia (creator of Hugo the static site generator and many famous Golang libraries) has his Vim

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.

Article  · 
`html-crush` bug fixed

html-crush bug fixed

One 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?

Read article
Article  · 
Automated vercel redirect maintenance on Eleventy

Automated vercel redirect maintenance on Eleventy

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.

Read article
Article  · 
`string-strip-html` v.5 and lessons learned

string-strip-html v.5 and lessons learned

For 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.

Read article
a thought  · 

In favour of BYOD

Few arguments in favour to BYOD company policies:

  1. Passwords
  2. Notes
  3. Snippets
  4. ZSH aliases
  5. Time wasting syncing all above
  6. Money wasting on two sets of licences