JavaScript
JavaScriptでプログラミングをしていて、ある程度規模が大きくなると、扱っている変数にはいるオブジェクトがどんなメソッドやプロパティをもっているのかを、静的に（プログラムを動かさずに）知りたくなります。 すわTypeScriptとなるところですが すでに…
jQueryやそのプラグインはESモジュールになっていないので、そのままだとesbuildで上手く依存関係が解決されません。 とくにRails 7では、esbuildが推奨されているので、躓く人も多そうです。 そこの対応方法の動画がありました。見ましたが試していません。…
developer.mozilla.org にあるように、cutイベントはほとんどのブラウザで使えます。 しかし、次のようにHTML要素にイベントリスナーを設定すると、イベントリスナーが実行されないことがあります。 editorHTMLElement.addEventListener('cut', (event) => c…
Standard Version を使ってコミットログから自動的にバージョン番号を生成しています。 バージョン番号にマーケティング的な意味がない場合は、自動的に決定されるのがとても便利です。 今回BREAKING CHANGEに当たる変更だと思い、次のように書きました。 BR…
ブラウザはpasteイベントを監視すると、ペーストされてきた情報を参照できます。 DataTransferItemというオブジェクトから取得できます。 各種のサービスやアプリケーションがどういった情報をクリップボードに保存しているのか確認しやすくするためにCodepe…
Firefox 95.0でAsynchronous Clipboard APIのwrite, read, readText関数を使うには以下の設定が必要です。 高度な設定 Firefoxのアドレスバーにabout:configと打ち込むと、高度な設定が出来ます。 Firefoxのアドレスバーにabout:configを入力して高度な設定…
結論 function isAndroid() { return /Android/.test(navigator.userAgent) } にしました。 経緯 AndroidのChromeブラウザでは、一番上までスクロールしてさらに下方向にドラッグするとリロードします。 このときだけ window.onbeforeunload = () => true を…
https://w3c.github.io/clipboard-apis/#override-copy To override the default copy event behavior, a copy event handler must be added and this event handler must call preventDefault() to cancel the event. window.addEventListener('copy', (e) …
Clipboard API and events を読んでいたらclipboardchangeイベントというsyustem clipboardに変化があったら発火する、便利そうなイベントがありました。 次のようなコードを試してみました。 window.addEventListener('clipboardchange', () => { console.l…
Clipboard API and events を読みました。 Asynchronous Clipboard APIを使ったサンプルをCodepenで作りました。 Google Chromeだと、全部動きます。 FirefoxだとwriteTextしか動きません。writeはwriteで書き込むためのClipbordItemがサポートされていない…
stackoverflow.com を参考にして、次の関数で判定してみました。 function () { return ( 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 ) } タッチ出来るかどうかで判定します。 これだとsurfaceみたいなタ…
Subjectの値を編集するボタンの配置を考えました。 レスポンシブデザインというか、スマートフォンでも見れるようにダイアログの要素はなるべく縦に並べてあります。 PCの画面でみて横幅に余裕があるときでも、縦に並べると今風のデザインになるみたいです。…
Firefoxでdragenterイベントが2重に発火する現象を見つけました。 再現するCodepenを作りました。 See the Pen dragenter by shigeru.nakajima (@ledsun) on CodePen. ファイルを青い四角にドラッグすると表示が変わります。 このときFirefox 94.0.2 (64 ビ…
普通はPromiseって次のように書くと思います。 const myPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve('foo'); }, 300); }); 別に次のように書いてもいいんですね。 let resolveFunc = null const myPromise = new Promise((res…
github.com Node.jsとWebpackのコミッターさんです。 github.com Prettierのコミッターさんです。 github.com ESLintのコミッター（たぶん）さんです。
僕がNode.jsを熱心に勉強していた頃に、スーパープログラマとして憧れていた人たちが、今何をやっているのか調べてみました。 github.com Express.jsなんかを作っていたtjは、Go言語がメインに書いているようです。 OSS活動自体あまりやっていなさそうです。…
現象 WSLにfish shellを入れnvmを入れた状態で、gitのコミットフックを設定してあるリポジトリで、VSCodeからGitコミットしたら次のエラーが起きました。 VSCodeからGitを操作したときのエラー Git: /usr/bin/env: 'bash\r': No such file or directory とい…
結論 最新のnpmを使えば良いです。 nvmでnvm install latestとすると、必ずしも最新のnpmがインストールされないので、再発することがあります。前にも対応したはずなのに？一体？という気持ちになります。 現象 ledsun@MSI:~/textae►npm update npm WARN ol…
{ // 判定 } こういう何もしないJavaScriptファイルがあります。 Windowsのcscriptコマンドで実行するとあるときはコンパイルエラーをおこし コンパイルエラーがおきます あるときはコンパイルエラーを起こしません。 コンパイルエラーがおきません JavaScri…
npm install debounce してあるディレクトリで次のように、script type="module"を使って、debounceを読み込んでみましょう。 <html> <head> <script type="module"> import { debounce } from './node_modules/debounce/index.js'; </script> </head> </html> debounceはunderscore.jsのdebounce関数だけを切り出したC…
いきなり既存のアプリケーションにimport mapsを導入するのはつらいことがわかりました。 もっと小さなアプリケーションから試して行きましょう。 まずは、type="module”だけをつかって、Hello worldします。 index.htmlです。 <html> <head> <script type="module"> import { sayHello } from </script></head></html>…
VSCodeがinvalidなJSONを検出してくれない VSCodeが次のようなInvalidなJSONをかいても検知してくれないこと。 <script type="importmap"> { "imports": { "action-stream": './node_modules/action-stream/index.mjs', } } </script> JSONなので、シングルクォートもケツカンマも許容されませ…
npmにESモジュールとCommonJSモジュールを両方公開すること - @ledsun blog の続きです。 npmにESモジュールとCommonJSモジュールを両方公開するために、ESモジュールからCommonJSモジュールを自動生成する方法を考えます。 先行事例 世の中にはいくつかの方…
Node.js 12からESモジュールがサポートされています。 ブラウザでもESモジュールをサポートしています。 ということで、Node.jsむけのパッケージもESモジュールで書きたいです。 自分がESモジュールで書くと言うことは、依存ライブラリもESモジュールで書か…
www.npmjs.com Foremanみたいに複数のプログラムを並列に起動してくれるnpmパッケージです。 npmなので、npmスクリプト中で使うのに、環境設定の面で有利です。 主にwatchスクリプトで使います。 使用例 例えば、次の例ではngcコマンドとesbuildコマンドを両…
2009年に発表されたCommonJSの夢。この夢が叶えられるかもしれない時がきています。それもJavaScriptではないRuby on Railsによってです。 JavaScriptのライブラリ管理の歴史を紐解いてみましょう。 モジュール前夜 jQueryによるプラグイン管理がありました…
ドキュメントにサンプルコードを書くことがありますが、しばしば壊れていることがあります。 読む方からすると、ちゃんとチェックして欲しいと思いますが、 書く方からすると、文章のどこにスクリプトがあるか探すのも大変だし、それをいちいち動かして確認…
sprockets-css-purgerの姿を想像する - @ledsun blogの続きです。 tailwindcssからPurgeCSSを呼び出している箇所 https://github.com/tailwindlabs/tailwindcss/blob/v2.2.15/src/lib/purgeUnusedStyles.js#L188-L220 const purgeCSS = new PurgeCSS() purge…
DHHはsprockets-css-purgerというCSSをパージするための汎用的なGemが欲しいようです。 github.com This is btw and open invitation to anyone who'd like to work on this とありますので、誰がやっても良いようです。ところで、このbtwってどういう意味…
体感として、npm auditが出してくる警告は、利益より手間の方が多いように感じてはいます。 とはいえセキュリティに関わることなので、手間でも対応しなきゃなあと、頑張って対応しています。 僕自身は、主にアプリケーションのメンテナンスだけなので、それ…
