はてなブックマーク

以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty

最近はサーバーレスの SQLite が人気みたいですが、個人的には sql.js-httpvfs が好きです。 個人開発で運用コストをゼロにしたいなら、こちらのほうが気楽です。 sql.js-httpvfs は Accept-Ranges を利用して、 DB のすべてのデータを fetch することなく、必要な時にバイト単位での fetch を実現します。 つまり DB をフロントエンドに置いた運用開発ができます。 バイト単位での fetch を実現する Accept-Ranges の仕組みは、フロントエンド新時代を支える技術になる気がしています。 静的 DB はフロントエンドへ移行する ほとんどの開発において DB / ネットワークが最初にボトルネックになります。 昔から bytes-level fetch ができればフロントエンドに DB を置けるのにとは思っていたので、 Accept

WineHQ 5.0 を入れました。 WineHQ / Wine は大型アップデートの度に、よく環境が壊れるアプリで、今回もやはり壊れてしまいました。 たまに出る「壊れた変更禁止パッケージ」の良い例だったので、直し方をまとめておきます。 まずはマニュアル通りにインストールしていって、以下のエラーが出たことを想定します。 古いバージョンを入れていた人は遭遇するのではないでしょうか。 $ sudo apt install --install-recommends winehq-stable パッケージリストを読み込んでいます... 完了 依存関係ツリーを作成しています 状態情報を読み取っています... 完了 インストールすることができないパッケージがありました。おそらく、あり得 ない状況を要求したか、(不安定版ディストリビューションを使用しているの であれば) 必要なパッケージがまだ作成されて

wineで久々に依存関係でハマりました。 わかりやすい事例だったのでdpkgやapt-get関連でエラーが出た時の対処法をまとめてみます。 まず以下のようなエラーが出ている状況を想定します。実際に出て困った訳ですけど。 $ sudo apt-get install wine-stable パッケージリストを読み込んでいます... 完了 依存関係ツリーを作成しています 状態情報を読み取っています... 完了 wine-stable はすでに最新バージョン (3.0-1ubuntu1) です。 これらを直すためには 'apt --fix-broken install' を実行する必要があるかもしれません。 以下のパッケージには満たせない依存関係があります: wine32:i386 : 依存: libwine:i386 (= 3.0-1ubuntu1) しかし、インストールされようとしていません

最近、マルウェア化するソフトウェアが増えてきています。 特にGoogle Chromeの拡張機能の自動アップデートは危険で、 自動アップデートの停止が難しい上、管理も面倒、マルウェア判定も難しい。 私は拡張機能自体ほとんど使ってませんが、 前の投稿で説明した拡張を使ってユーザCSS、ユーザスクリプトを管理する行為を行っていました。 しかしこれもかなり危険に思ってきました。 (1)どう頑張っても拡張がすべてのページに対してアクセス権を持ってしまう事や、 (2)ユーザスクリプトでのマルウェア報告が増加しているためです。 例を挙げると最近では以下のような被害があります。 HTTP Headers という 5万人が使っている Chrome 拡張のマルウェア疑惑。セッション盗まれて BTC も盗まれそうになった話。 Googleがストアから削除。一見｢広告ブロック｣のChrome拡張機能、裏でユーザ

JavaScript の Grid ライブラリも最近また進化してきて、比較する必要性が出てきたので、まとめてみました。 このページでの選択基準は、私が使いたかった機能の機能性、ロード速度、スマホ対応、更新頻度です。 機能面で私が必要としているのは、最低限は外部ファイル読み込みとソート機能です。ないものは評価対象外です。 キーボード操作、カラム選択、カラム範囲選択、フィルタリング、列フィルタリングはどうしても欲しい。 カラム選択は項目毎にクリックせず複数選択可能なら◎、選択に手間が掛かるなら○、選択機能がなければ×です。 フィルタリングは全体検索ができるかどうかと使いやすさで評価を多少変えています。 列フィルタリングは数値で範囲検索ができれば◎、一致検索しかできなければ△、機能がなければ×です。APIはあってもUIやサンプルがなければ×にしています。 スマホ対応に関しては、水平スクロール対応