Issue 001: Rewrite that messy package.json
Web Builders Digest — Issue 1
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 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
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
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.
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? ●●●
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", () => {
run("calc.exe")
winWait("Calculator")
winMove(0, 0) // move to screen top-left
msgBox("Calculator is now open!")
})