ブックマーク / blog.hog.as (6)

  • Chrome113でHTTPヘッダを上書きしていろんな状態をお試しできる - hogashi.*

    Chrome 113 で、 DevTools の Network ペインで HTTP ヘッダを好きなように編集して、いろんな状態をお試しできるようになっている。 What's New in DevTools (Chrome 113) - Chrome Developers で紹介されている。 GitHub から example.com を fetch してみる GitHub の CSP ヘッダを上書き example.com の CORS のヘッダを上書き 途中で指定したフォルダの中身は何? 上書きをやめるには? 感想 GitHub から example.com を fetch してみる 試しに、 CSP で外部への通信がそれなりに制限されている GitHub から、 example.com への fetch を成功させてみる (外部サイトへの通信は、認証情報や秘密の情報の漏洩などに気をつ

    Chrome113でHTTPヘッダを上書きしていろんな状態をお試しできる - hogashi.*
    toshikish
    toshikish 2023/05/14
  • GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*

    ここのことです*1。 真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている 目次 目次 シンタックスハイライトはどうしているのか? 上に表示されている div ならその文字もマウスカーソルで選択できるはずでは? なぜこうしたのか? 困ることはないのか? たしかこないだまでは普通に div ? で、テキストをマウスカーソルでドラッグアンドドロップで選択したりするような感じだったはずだけど、最近?になって、選択できる部分は textarea になっていて、点滅するカーソルが出るので、キーボードでエディタのように移動・選択することができる (もちろん編集はできない *2 )。 選択範囲の一番右に白く点滅するカーソルが登場している シンタックスハイライトはどうしているのか? textarea は部分的に色を変えるとかはできないはずだし、スタイルの様子を見ると

    GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*
    toshikish
    toshikish 2023/04/10
  • GitHub ActionsでJestのログに色をつけられる - hogashi.*

    Jest は TTY では色つきのログを出すが、そうでないときは色なしになる https://jestjs.io/docs/cli#--colors --colors オプションか、環境変数で FORCE_COLOR=true するととにかく色つきのログを出せる GitHub Actions では色つきのログに対応している A better logs experience with GitHub Actions | The GitHub Blog That’s why we are increasing the color support, including: ANSI colors 8-bit colors 24-bit colors https://github.blog/2020-09-23-a-better-logs-experience-with-github-actions/

    GitHub ActionsでJestのログに色をつけられる - hogashi.*
    toshikish
    toshikish 2023/01/12
  • aタグで#topにリンクするとページ先頭にスクロールするのは仕様 - hogashi.*

    はてなエンジニア Advent Calendar 2022 - Hatena Developer Blog の 2023/1/5 の記事です。 id:hogashi です。 目次 目次 3行 こういうやつ 仕様を眺める 追記1: おまけ 追記2: id="top" な要素があるときは? 3行 a タグの href 属性に #top と書くと、クリックしてページの先頭にスクロールできる、という話をしているのを見て、 それって仕様なんだっけ、と思って調べたところ、 仕様でした こういうやつ クリックしてこのページの先頭にスクロールする <a href="#top">クリックしてこのページの先頭にスクロールする</a> 仕様を眺める MDN の a タグのページにちょろっと書いてあって、 HTML の仕様に定義されているよ、とある <a>: The Anchor element - HTML:

    aタグで#topにリンクするとページ先頭にスクロールするのは仕様 - hogashi.*
    toshikish
    toshikish 2023/01/05
  • z-indexバトル観戦 - hogashi.*

    こんにちは、 id:hogashi です。 whywaita Advent Calendar 2022 - Adventar 3日目です。 目次 目次 z-index バトル z-index が 100 より小さいもの z-index が正の値のもの 統計 z-index バトルの頂点はどこか あそびかた むすび z-index バトル id:whywaita さんの好きなアルファベットは流石に Y ということでした。ありがとうございます。 やはり僕も id:whywaita さんの id を眺めていて、 w とか y とかから z-index を想起しまして、世の中の z-index バトルがどのように繰り広げられているのか見たいと思い、 GitHub で language が css と scss のコードを検索しました。 API でバリバリ検索したら 1000件しか検索できないという

    z-indexバトル観戦 - hogashi.*
    toshikish
    toshikish 2022/12/04
  • Slackはハイライト部分をU+E000とU+E001で囲って表していそう - hogashi.*

    Slack は、メッセージのどこからどこまでハイライトするかを、 Unicode の私用領域 *1の U+E000 と U+E001 を使って表しているらしく、こういう HTML を glitch とかで書いて、 <html> <head> <meta property="og:title" content="Slackで&#xE000;タイトルをハイライト&#xE001;する" /> <meta property="og:description" content="Slackで&#xE000;説明&#xE001;も&#xE000;好きな部分をハイライト&#xE001;する" /> </head> </html> そのページを Slack で展開させたりすることで、好きな部分を勝手にハイライトできて面白い *2 *3。 ちなみに printf "\ue000寿司\ue001が光ったら成功"

    Slackはハイライト部分をU+E000とU+E001で囲って表していそう - hogashi.*
    toshikish
    toshikish 2022/10/06
  • 1