24 November 2022

Issue 001: Rewrite that messy package.json

Web Builders Digest — Issue 1

Rico Sta. Cruz @rstacruz

Happy November! Here’s a random grab bag of things I found interesting lately. If you find any of these interesting, you can follow me on Mastodon for more random stuff 🙂

Deno now supports npm

Deno released an update that allows using npm packages within Deno. Word is that it can run Vue, and there’s a 5-minute demo of it with Vite.

How does that work? ●●●
import chalk from "npm:chalk@5.18"

It supports many things available in npm, like the ability to run packages without explicitly installing them.

# run a command from a package (compare with "npx")
deno run npm:prisma init

Rewrite messy package.json’s with wireit

I find myself needing to chain some build commands, like when trying to couple Tailwind with create-react-app. Or Parcel with Eleventy. wireit is a small utility to help with that. Here’s an example of chaining tsc (TypeScript compiler) with rollup (bundler):

Short 15-line config example... ●●●
  "scripts": {
    "build": "wireit",
    "bundle": "wireit"
  "wireit": {
    "build": {
      "command": "tsc",
      "files": ["src/**/*.ts", "tsconfig.json"],
      "output": ["lib/**"]
    "bundle": {
      "command": "rollup -c",
      "dependencies": ["build"],
      "files": ["rollup.config.json"],
      "output": ["dist/bundle.js"]

Now one command can orchestrate the tsc -> rollup pipeline.

npm run bundle
# runs "build" (TypeScript) then "bundle" (Rollup)

npm run bundle --watch
# ...same, but comes with its own file watcher

Good things move to the core

An interesting observation about dev tools: it starts with having many choices, then the best ideas survive, then those ideas move to the core. This toot illustrates it like so.

Better diagrams with D2

D2 is a new text-to-chart language, similar to Mermaid and Graphviz. Some nice examples are available on text-to-diagram.com, and it seems D2 can handle some diagrams better than Mermaid or PlantUML. Source on GitHub.

How do D2 diagrams and code look like? ●●●

There’s also a D2 cheatsheet with some great examples on how to get started.


Windows automation with AutoHotkey

AutoHotkey is the leading automation tool for Windows, similar to Hammerspoon on the Mac. However, it’s a peculiar language compared to scripting languages of today - at least in my opinion.

AutoHotkey-jk is an extension to AutoHotkey that allows writing scripts in JavaScript. Documentation is very sparse, but the project is very promising. A script might look like this:

Read more... ●●●
// Bind a shortcut to ctrl-alt-a
hotkey("^!a", () => {
  winMove(0, 0) // move to screen top-left
  msgBox("Calculator is now open!")
Thanks for reading! I'm Rico Sta Cruz, I write about web development and more. Subscribe to my newsletter!