Run Prettier command on Deno

Since v1.26, Deno introduces npm improvements without older --compat option.

For example, Prettier can run on Deno with a wrapper as follows:

#!/usr/bin/env -S deno run --unstable --allow-read --allow-env --allow-write --allow-sys

import("npm:prettier/cli.js")
  .then(cli => cli.run(Deno.args));

This is rewritten from its node.js version bundled with Prettier npm.

Since a wrapper runs outside of node polyfilled env, it needs to be written in a Deno way:

  • use shebang for deno with lengthy options
  • use import() with npm: resolution instead of require()
  • replace process.argv with Deno.args

Original script has an extra version check, removed because it depends on Node.js.

Save the above as “prettier” with exec bits, and you can run on Deno.

⁋ Nov 10, 2022↻ Nov 7, 2024
中馬崇尋
Chuma Takahiro
implement gRPC-Web client
When you want to access gRPC services from browsers, you need to implement gRPC-Web clients. Browsers’ fetch lacks several functionalities to implement full spec gRPC for years. While gRPC and protobuf was initially led by Google, protobuf-javascript is not maintained actively. At this time, ConnectRPC’s web client and protobuf-es set is more active.……
Graceful degradation of Custom Elements
WebComponents provides rich extra UI components for websites. You can create original HTML tags with Custom Elements API, or introduce external Javascript libs. Libs will be distributed as a separate JS files, and sometimes network error disrupts building Custom Elements on rendering. CSS for Not upgraded Custom Elements Custom Elements like <md-button></md-button> have its own definition.……
reveal.js: integrate slides
reveal.js is a Javascript library embedding presentations to HTML. Starting boilerplate with markdown functionality is as follows: <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/black.min.css" /> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script> <script> Reveal.initialize({ plugins: [ RevealMarkdown ] }); </script> </body> The above code doesn’t include slides yet. It can be implemented any part inside of <body>.……
Build Sass with dart
Dart Sass provides a stable Sass compiler. It’s commonly used as sass npm via several JS bundler plugins. You can also use dart interface directly as CSS build itself has no relationship with Javascript in most cases. Dart Library section in the official instruction describes comilation procedure with dart script.……
Layout with D3.js
Rendering postion is a key point to draw a graph. D3.js has its own abstruction layer translating stastical values into SVG pixel postions. Render data to visual coordinates For basic graph area rendering, d3 provides a set of d3-scale sub-modules. The API reference shows example: var x = d3.scaleLinear() .domain([10, 130]) .……