@ledsun blog

Hのキーがhellで、Sのキーがslaveだ、と彼は思った。そしてYのキーがyouだ。

JavaScript

FirefoxでAsynchronous Clipboard APIのwrite, read, readText関数を使う方法

Firefox 95.0でAsynchronous Clipboard APIのwrite, read, readText関数を使うには以下の設定が必要です。 高度な設定 Firefoxのアドレスバーにabout:configと打ち込むと、高度な設定が出来ます。 Firefoxのアドレスバーにabout:configを入力して高度な設定…

JavaScriptでご利用の端末がAndroidか確かめる

結論 function isAndroid() { return /Android/.test(navigator.userAgent) } にしました。 経緯 AndroidのChromeブラウザでは、一番上までスクロールしてさらに下方向にドラッグするとリロードします。 このときだけ window.onbeforeunload = () => true を…

Clipboard Events APIではpreventDefaultを呼ぶ必要がある

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) …

clipboardchangeイベントは実装されていない

Clipboard API and events を読んでいたらclipboardchangeイベントというsyustem clipboardに変化があったら発火する、便利そうなイベントがありました。 次のようなコードを試してみました。 window.addEventListener('clipboardchange', () => { console.l…

FirefoxではAsynchronous Clipboard APIを使ってもクリップボードから読み込めない

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重に発火することがある

Firefoxでdragenterイベントが2重に発火する現象を見つけました。 再現するCodepenを作りました。 See the Pen dragenter by shigeru.nakajima (@ledsun) on CodePen. ファイルを青い四角にドラッグすると表示が変わります。 このときFirefox 94.0.2 (64 ビ…

PromiseのresolveをPromiseインスタンスの外から呼ぶ

普通はPromiseって次のように書くと思います。 const myPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve('foo'); }, 300); }); 別に次のように書いてもいいんですね。 let resolveFunc = null const myPromise = new Promise((res…

Node.js製ツールチェーンの開発に参加している日本人プログラマー

github.com Node.jsとWebpackのコミッターさんです。 github.com Prettierのコミッターさんです。 github.com ESLintのコミッター(たぶん)さんです。

Node.jsのスーパープログラマ達の今

僕がNode.jsを熱心に勉強していた頃に、スーパープログラマとして憧れていた人たちが、今何をやっているのか調べてみました。 github.com Express.jsなんかを作っていたtjは、Go言語がメインに書いているようです。 OSS活動自体あまりやっていなさそうです。…

WSLにいれたfish shellで使っているnvm.fishにデフォルトバージョンを設定する

現象 WSLにfish shellを入れnvmを入れた状態で、gitのコミットフックを設定してあるリポジトリで、VSCodeからGitコミットしたら次のエラーが起きました。 VSCodeからGitを操作したときのエラー Git: /usr/bin/env: 'bash\r': No such file or directory とい…

npm updateで表示されるnpm WARN old lockfile を解消する

結論 最新のnpmを使えば良いです。 nvmでnvm install latestとすると、必ずしも最新のnpmがインストールされないので、再発することがあります。前にも対応したはずなのに?一体?という気持ちになります。 現象 ledsun@MSI:~/textae►npm update npm WARN ol…

JScriptコンパイルエラーの怪

{ // 判定 } こういう何もしないJavaScriptファイルがあります。 Windowsのcscriptコマンドで実行するとあるときはコンパイルエラーをおこし コンパイルエラーがおきます あるときはコンパイルエラーを起こしません。 コンパイルエラーがおきません JavaScri…

script type moduleでCommonJSモジュールを読み込むとどうなるのか?

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…

Hello script type module

いきなり既存のアプリケーションにimport mapsを導入するのはつらいことがわかりました。 もっと小さなアプリケーションから試して行きましょう。 まずは、type="module”だけをつかって、Hello worldします。 index.htmlです。 <html> <head> <script type="module"> import { sayHello } from </script></head></html>…

importmapを手書きするとつらいこと

VSCodeがinvalidなJSONを検出してくれない VSCodeが次のようなInvalidなJSONをかいても検知してくれないこと。 <script type="importmap"> { "imports": { "action-stream": './node_modules/action-stream/index.mjs', } } </script> JSONなので、シングルクォートもケツカンマも許容されませ…

ESモジュールをCommonJSモジュールにバベル

npmにESモジュールとCommonJSモジュールを両方公開すること - @ledsun blog の続きです。 npmにESモジュールとCommonJSモジュールを両方公開するために、ESモジュールからCommonJSモジュールを自動生成する方法を考えます。 先行事例 世の中にはいくつかの方…

npmにESモジュールとCommonJSモジュールを両方公開すること

Node.js 12からESモジュールがサポートされています。 ブラウザでもESモジュールをサポートしています。 ということで、Node.jsむけのパッケージもESモジュールで書きたいです。 自分がESモジュールで書くと言うことは、依存ライブラリもESモジュールで書か…

concurrently

www.npmjs.com Foremanみたいに複数のプログラムを並列に起動してくれるnpmパッケージです。 npmなので、npmスクリプト中で使うのに、環境設定の面で有利です。 主にwatchスクリプトで使います。 使用例 例えば、次の例ではngcコマンドとesbuildコマンドを両…

Rails 7 はユニバーサルJavaScriptモジュールの夢を叶えるか?

2009年に発表されたCommonJSの夢。この夢が叶えられるかもしれない時がきています。それもJavaScriptではないRuby on Railsによってです。 JavaScriptのライブラリ管理の歴史を紐解いてみましょう。 モジュール前夜 jQueryによるプラグイン管理がありました…

文章中のサンプルコードが壊れていませんか?

ドキュメントにサンプルコードを書くことがありますが、しばしば壊れていることがあります。 読む方からすると、ちゃんとチェックして欲しいと思いますが、 書く方からすると、文章のどこにスクリプトがあるか探すのも大変だし、それをいちいち動かして確認…

sprockets-css-purgerのAPIを考えるために、tailwindcssとPurgeCSSの境界を考える

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…

sprockets-css-purgerの姿を想像する

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は有益なのか?

体感として、npm auditが出してくる警告は、利益より手間の方が多いように感じてはいます。 とはいえセキュリティに関わることなので、手間でも対応しなきゃなあと、頑張って対応しています。 僕自身は、主にアプリケーションのメンテナンスだけなので、それ…

HTMLのscriptタグのdefer属性

HTMLのscriptタグにdefer属性があります。 これを使うと何が嬉しいのでしょうか? スクリプトがDOM構築に与える影響 スクリプトはdocument.write を実行してHTMLを操作することが許されています。 このため、ブラウザは<script>タグを見つけると、DOM構築を一度停止…

echoするAngularJSアプリケーションを新Angularの環境で動かす

Angularには、AngularJSからの移行を支援するための@angular/upgrade/staticがあります。これを使ってみましょう。 まず、Angular CLIで新Angularの環境を作ります。 次のように簡単なAngularJSアプリケーションを組み込みます。 <html lang="en"> <head> <meta charset="utf-8"> <title>MyApp</title> <base href="/"> </base></meta></head></html>

PPLサマースクール2021

ss2021 - 日本ソフトウェア科学会 プログラミング論研究会 (JSSST-SIGPPL) (Special Interest Group on Programming and Programming Languages) に参加というか、視聴しました。 例えば、あるHTML要素の上にマウスカーソルがあるときに マウスの左ボタンを…

Angular CLI

Angularの開発環境はRuby on Railsと同じくらい複雑です。 最小でindex.htmlファイル1つで動かせるAngularJSと比べると驚きです。 このような環境を手動で作るのは大変なので、自動的に作成してくれるコマンドがあります。 これがAngular CLIです。 Ruby on …

echoするAngularJSアプリケーション

See the Pen とてもシンプルなAngularJSアプリケーション by shigeru.nakajima (@ledsun) on CodePen. AngularJSはng-app属性が付いたHTML要素に対して機能を追加していきます。 ng-app属性をつける代わりに、次のようにangular'bootstarp関数に対象のHTML要…