hogashi.*

日記から何から

JavaScript

GitHub ActionsでJestのログに色をつけられる

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

aタグで#topにリンクするとページ先頭にスクロールするのは仕様

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

ブラウザで:has()セレクタが実装されてjQueryの:has()セレクタの挙動が変わった話の続き

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

ページ内のどの要素でscrollイベントが発火しているかとにかく見るには全部の要素にイベントリスナをつけると便利

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

ブラウザで:has()セレクタが実装されてjQueryの:has()セレクタの挙動が変わったの調べた

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

ASCIIコード表でZとaの間には記号がある

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

見えてる一番上の記事のタイトルのSHA-1でブログタイトルの文字色変える

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

Monaco Editorをシンタックスハイライトされたコードブロックとして使う

昨日*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) のシンタックスハイライトでめっちゃいい感じみたいなものがあんまり…

文字列をコピーするブックマークレットで使うクリップボードのAPI改めて見てた

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

ブログのpreにコピーボタンつける

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

cpanfileをなんとなくパースする正規表現書いた

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

Chrome拡張機能をManifestV3に上げる活動

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

JavaScriptでは変数名に三点リーダが使えない/識別子におすすめUnicode文字セット

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

pt-query-digestのJSON出力の型書いた

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

monaco-editorをmonaco-editor-webpack-pluginで使う言語を絞ってwebpackでバンドルする

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

monaco-editorをwebpackでバンドルしたらいろんな言語のファイルが登場するけどいっこしか必要なくて困ってる

(追記 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 …

Gitの情報からGitHubのパーマリンクをクリップボードにコピーするVSCode拡張機能

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

欲しいタグが現れるまで待つ

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

JavaScriptでCSSをまるごとコピー

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

拡張機能「twitter画像原寸ボタン」v2.1.8公開

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

拡張機能「twitter画像原寸ボタン」v2.1.4不具合について

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

twitter画像原寸ボタンの現状

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

chrome拡張機能「twitter画像原寸表示」の不具合?

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

GoogleChrome機能「twitter画像原寸表示」ver. 1.5.1公開

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

GoogleChrome拡張機能「twitter画像原寸表示」のソースを公開

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

GoogleChrome拡張機能「twitter画像原寸表示」ver1.3 公開

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

Javascript setTimeoutの再帰

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

GoogleChrome拡張機能「twitter画像原寸表示 ver1.1」公開

GoogleChrome拡張機能「twitter画像原寸表示 ver1.1」を公開しました。 主に動作の改良、操作方法の追加の2点で更新です。 ダウンロードは以下: https://www.dropbox.com/sh/a8i1hrxv6594ni1/AABSnjHVqVNfTu0XKFe98CAXa?dl=0 以下readme.txt————————- | twi…