JavaScript で、 querySelectorAll の結果を map したいことがあるが、そのままだと map できない。 Array.from を使って、 Array インスタンスにしてあげると良い。

Jest は TTY では色つきのログを出すが、そうでないときは色なしになる https://jestjs.io/docs/cli#--colors --colors オプションか、環境変数で FORCE_COLOR=true するととにかく色つきのログを出せる GitHub Actions では色つきのログに対応している A be…

はてなエンジニア Advent Calendar 2022 - Hatena Developer Blog の 2023/1/5 の記事です。 id:hogashi です。 目次 目次 3行 こういうやつ 仕様を眺める 追記1: おまけ 追記2: id="top" な要素があるときは？ 3行 a タグの href 属性に #top と書くと、ク…

前回までのあらすじ blog.hog.as ブラウザで :has() を実装した結果、 :querySelectorAll() で :has() を扱えるようになり、 jQuery で :has() を使ったときの挙動が変わってしまっていた。 その後 結局、 :is :where 以外のセレクタ (含む :has()) を unfor…

スクロールしたときどの要素で scroll イベントが発火しているか探すのが大変なことがあるけど、とにかく全部の要素にイベントリスナをつけて、実際にスクロールしてみることで、とにかく発見することができる。 document.querySelectorAll('body *').forEac…

Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 － Publickey を読んだので、調べたものとあわせてまとめる。 三行 原因 forgiving-selector-list Chrome と Safari の状況の違い されている…

ASCII コード表で、大文字 Z と小文字 a の間には [ \ ] ^ _ ` の 6つの記号が含まれている。正規表現で [A-z] とか指定してしまうと、アルファベットだけではなくこれらの記号も含まれてしまうことになる。www.cs.cmu.edu なんでこれを見てたかというと、そ…

トップのタイトルはブログを投稿するごとに色が変わって、各記事を見てるときのタイトルは記事ごとに色が違うことになる。透明度も含めて変えているので、運が良ければブログタイトルがめっちゃ薄いときもありそう。編集画面のプレビューで確認できてしまう…

昨日*1の続き。寝る前にぼんやりしながら glitch.me で頑張っていたのをやめて、机に座ってよく調べると、ちゃんと npm install とかをすっ飛ばして script タグだけで Monaco Editor が出せるらしい (How to run the Monaco editor from a CDN like cdnjs? …

HTML にコードを書くときのシンタックスハイライト、 highlight.js *1 みたいなのを使ったり、 Vim から HTML にしたり*2、色々やりようがあるけど、 TypeScript (特に TypeScript React) のシンタックスハイライトでめっちゃいい感じみたいなものがあんまり…

ブックマークレットで文字列をコピーする (クリップボードに入れる) というのをよく書く。 昔ググってへ〜と思ったまま Document.execCommand() - Web API | MDN をずっと使っていた。(あと HTMLInputElement.select() - Web APIs | MDN も知らなくて、 Sele…

素朴に button をつけて pre の innerText を textarea に入れてコピーする感じで書いた。たまに便利。 こういう感じ/* pre に copy ボタンつける */ [...document.querySelectorAll('article.entry pre')] .map(pre => { const button = document.createEle…

github.com Module::CPANfile のテスト (t/parse.t) を見ながら JavaScript でつくりました。まだ完全ではなさそう (他にもテストあるし) だけど、それなりになったのでオ〜という気持ちで、うまく使って何かやりたい。文字種とかかなり雑なので、読む用がよ…

規模の小さい chrome-usercss-hogashi - Chrome ウェブストア から始めてみている。 Manifest V3 migration checklist - Chrome Developers を見ると結構色々ある。いっこずつ対応していったらよいのだけど、難関だったのは background pages の Service Wor…

TL;DR JavaScript で変数名に三点リーダが使えない JavaScript の変数名は、 Unicode で用意されている ID_Start と ID_Continue の文字を使えることにしている そこに三点リーダが入っていない

型を公開する練習として、 pt-query-digest *1 で --output json したときに出力される JSON の型を書いてみた。 JSON.parse() したものにつける型を想定している。github.com index.d.ts とかを書いて、 package.json に types として指定しておくと完成ら…

microsoft/monaco-editor を素朴に webpack でバンドルするといろんな言語のファイルがついてきて大変、なんとかしたい、ということを書いたところ色々教わった、ありがとうございます。blog.hog.as 教わったのは IgnorePlugin | webpack と microsoft/monac…

(追記 2020/12/31) →こういうことのようだった: monaco-editorをmonaco-editor-webpack-pluginで使う言語を絞ってwebpackでバンドルする - hogashi.* monaco-editor 使って webpack でバンドルするといろんな言語の？ファイルが登場するけど UserCSS の拡張…

回る円盤を書いた。hogashi.github.io 回っているわけではないけど、なんとなくそれなりの速度で回っているのかもなと思えるような見た目をしている。実装としてはランダムで円弧を描いているだけ。 様子 index.html で <script src="./index.js"></script> とか書いておいて tsc -w index.ts …

VSCode の拡張機能をつくる練習として、開いているワークスペースの Git の情報から、 GitHub のパーマリンクをクリップボードにコピーする拡張機能を作った。練習なので壊れているかもだけどよければお使いください。marketplace.visualstudio.com remote (…

Chrome 拡張機能でbodyタグを取得して何かしようとしたら、スクリプトが読まれるの結構早くて、DOMContentLoadedを待たないとbodyタグが現れない？ときがあるのだけど、拡張機能はなぜかDOMContentLoadedのイベント発火を取れない？らしくて、力技を使った。…

任意のサイトの CSS をまるごとそっくり手製のページに入れてみたくなったものの、 style タグに URL を指定するのは CORS とかで怒られるらしい(やっていない)ので、取れる範囲でいいから値だけコピーした。 document.styleSheets で取得したシートにそれぞ…

GoogleChrome拡張機能「twitter画像原寸ボタン」v2.1.7 v2.1.8 を公開しました。 (追記180623/07:32) さらに考慮漏れがあったので修正しました。 変更点 TweetDeck で画像を新しいタブに正しく開けなかったので、正しく開けるように修正しました。 詳細 Twee…

拡張機能「twitter画像原寸ボタン」v2.1.4 を使っていただいてありがとうございます。仕様変更で使えなくなっているという声が少し聞こえたものの、手元で再現しないので、再現し次第対応できればと思っています。 具体的には、画像のURLのフォーマットが変…

twitter画像原寸ボタンをお使い頂いてありがとうございます。作ったものを使ってもらえるのは嬉しいお話です。 現状としては、気力をこれに注ぐことができていないので、更新はしていないというところです。TweetDeckのギャラリーとかにつけると便利そうだな…

chrome拡張機能「twitter画像原寸表示」、大分多くの方にお使いいただいてるようで何よりです。 が、なんだか「Originalボタンが表示されない」という症状を風の噂*1で聞きました。なんてこった。 不具合や不満な点は、なるたけ作者にお申し出ください(症状…

GoogleChrome拡張機能、「twitter画像原寸表示」のver. 1.5.1を公開しました。 GoogleChromeの「拡張機能」から「拡張機能を今すぐ更新」するか、以下からお使い下さい。 Chromeウェブストア: 「twitter画像原寸表示」 https://chrome.google.com/webstore/d…

GoogleChrome拡張機能「twitter画像原寸表示」のソースコードをGitHubに公開し(て)ました。 GitHub: 「twitterOpenOriginalImage」https://github.com/hogashi/twitterOpenOriginalImage MITライセンスにしたのでどんどん改善してください(報告してくれると…

twitterの画像の原寸表示を補助するGoogleChrome拡張機能、「twitter画像原寸表示」ver1.3を公開しました。主に”画像ツイートへのリプライ画像ツイート”に対応、の点で更新です。 ・機能 twitterのツイート詳細画面にOriginalボタンを追加します。追加された…

再帰的にsetTimeoutを起こすと、イベントが増えに増える仕様のようで、ぎゅんぎゅん処理していて怖かったので覚書をば。 とりあえずNGソースを。 以下NGソース————– var timerid;document.addEventListener("keydown", function(e){ ... hoge(); }); functio…