position: stickyで貼り付いたときだけ境界線を出す(JavaScriptを使わない) - hogashi.*
貼り付く見出し 貼り付く見出し スクロールしてこの見出しが画面上部に貼り付いたときだけ、見出しの下に境界線を出したい。 技として、境界線用の要素をいっこ用意して、それを見出しの裏に忍ばせておく方法がある。見出しが画面上部に貼り付いたときに、下に境界線が出てくる。 画面上部に貼り付いたときに境界線が下に出る 貼り付く見出し 貼り付く見出し どうなってるかというと、背景色を透明にするとこう。 見出しの要素に margin-top: -1px; をつけることで、境界線の要素を覆い隠して見えなくしておく sticky の top の値を、見出しの縦幅 + 1px 分にして、 1px 下に貼り付くようにする 境界線が躍り出る空間を得るために、外側の包む要素の縦幅は、見出しの縦幅 + 1px 分にしておく むずいけど、これで、見出しが貼り付いたときに、境界線がちょうど背景色のすぐ下に躍り出る。 こうい
Docker Compose 1.27.0以降ではdocker-compose.ymlにversionを書く必要がなくなっていた - hogashi.*
あらすじ docker-compose.yml でトップレベルの version 要素を指定していると、 WARN[0000] (...)/docker-compose.yml: `version` is obsolete と表示される。インターネットを見ていくと version は指定しなくて良い、消したらいい、という記事がたくさん出てくるし、たしかに公式のドキュメントにも obsolete と書かれている Version and name top-level elements | Docker Docs。 Version top-level element (obsolete) The top-level version property is defined by the Compose Specification for backward compatibility. It is
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 を成功させてみる (外部サイトへの通信は、認証情報や秘密の情報の漏洩などに気をつ
GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*
ここのことです*1。 真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている 目次 目次 シンタックスハイライトはどうしているのか？ 上に表示されている div ならその文字もマウスカーソルで選択できるはずでは？ なぜこうしたのか？ 困ることはないのか？ たしかこないだまでは普通に div ？ で、テキストをマウスカーソルでドラッグアンドドロップで選択したりするような感じだったはずだけど、最近？になって、選択できる部分は textarea になっていて、点滅するカーソルが出るので、キーボードでエディタのように移動・選択することができる (もちろん編集はできない *2 )。 選択範囲の一番右に白く点滅するカーソルが登場している シンタックスハイライトはどうしているのか？ textarea は部分的に色を変えるとかはできないはずだし、スタイルの様子を見ると
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/
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:
ワンタイムパスワード(OTP)のベストプラクティスじゃない入力フォームに出会う - hogashi.*
こんにちは、 id:hogashi です。 masawada Advent Calendar 2022 - Adventar の 2日目です。 目次 目次 OTP 入力フォーム まずベストプラクティスを見る それでは本題です ちなみに ちなみに2 むすび OTP 入力フォーム なぜか id:masawada さんとたまにワンタイムパスワード (OTP) の話をする印象があります。偶然生成された「ホホンドホド」という文字列*1が TOTP で出そうな見た目じゃん、とか。 最近もまた微妙に使いづらい入力フォームに出会いました。そこで、世に存在するベストプラクティスとそれに沿わないフォームを見て、ベストたる所以をなんとなく感じてみる回をお送りします。結果的に GitHub がなんかむずい感じになっているという記事になりましたが、もちろん各サービスそれぞれ良いと思ってやっているはずなのであくまで個
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件しか検索できないという
Gitのサブコマンド眺めたりgit help help見たりした - hogashi.*
git help help を初めて見た。 #102: Do Developers Really Know How to Use Git Commands? A Large-scale Study Using Stack Overflow – Misreading Chat で Git のサブコマンドの話をしていて、 140個ある！って言っててマジか、と思って git help --all とかに辿り着いたりした。サブコマンドがジャンルごとに紹介されている。 $ git help --all --no-external-commands --no-alias | grep '^[^ ]' See 'git help <command>' to read about a specific subcommand Main Porcelain Commands Ancillary Command
Slackはハイライト部分をU+E000とU+E001で囲って表していそう - hogashi.*
Slack は、メッセージのどこからどこまでハイライトするかを、 Unicode の私用領域 *1の U+E000 と U+E001 を使って表しているらしく、こういう HTML を glitch とかで書いて、 <html> <head> <meta property="og:title" content="Slackでタイトルをハイライトする" /> <meta property="og:description" content="Slackで説明も好きな部分をハイライトする" /> </head> </html> そのページを Slack で展開させたりすることで、好きな部分を勝手にハイライトできて面白い *2 *3。 ちなみに printf "\ue000寿司\ue001が光ったら成功"
ブラウザで:has()セレクタが実装されてjQueryの:has()セレクタの挙動が変わったの調べた - hogashi.*
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 － Publickey を読んだので、調べたものとあわせてまとめる。 三行 原因 forgiving-selector-list Chrome と Safari の状況の違い されている対応と今後 感想 三行 かねてから jQuery には拡張した CSS セレクタとして :has() がある :has() Selector | jQuery API Documentation Safari 15.4 と Chrome 105 で CSS セレクタとして :has() が実装された :has() pseudo class - Chrome Platform Status :has() CSS relational pseudo-class | Can I u
雑談の肴になるものがあると気楽に話せる気がする - hogashi.*
よっしゃ雑談するぞ、と思って人と面と向かうと何も思い浮かばない、ということがよくあって、雑談難しいですねって言っていたのだけど、普段自分が自然と雑談していた場面を考えると、雑談以外にやることがあって、たとえば手元にお酒があって飲んでるとか、話しながらゲームやってるみたいなことが多かった。大学の研究室でみんなで飲むときは、 Google Maps と国土地理院の地図を開いた PC をプロジェクタで映して、住んでる場所の地形の話とか、電車の通り方の話とか、こないだこの辺歩いてさ〜とかみたいな話をしていて、そこから自然と普段の暮らしや最近の出来事の話につながるという感じだった。 多分個人的に人に対して世間話を切り出すのが苦手で、脈絡を異常に気にしているからだと思うのだけど、お酒やらゲームやらをきっかけに、そういえば、と切り出すのが話しやすいなと思ってきた。あと話が続かなくて気まずい、みたいなこと
今日の落書き - hogashi.*
before 疑似要素でブログを書くとどうなるのか、と思ったけど、改行ができないことがわかってきた。それ以外は見た感じは変化がなくて、カーソルを持ってくると文字列選択ができないことがわかるくらいで、素朴に文字をどんどん書いていくだけなら before でもやっていけそう。どういうメリットがあるかは不明。 この文章も before に入っています。 <span class="hogashi-blog-w-before">ここに本文</span> <style> .hogashi-blog-w-before { display: none; } </style> <script> const style = Array.from(document.querySelectorAll('span.hogashi-blog-w-before')).map((span, i) => { const i
Gitの情報からGitHubのパーマリンクをクリップボードにコピーするVSCode拡張機能 - hogashi.*
VSCode の拡張機能をつくる練習として、開いているワークスペースの Git の情報から、 GitHub のパーマリンクをクリップボードにコピーする拡張機能を作った。練習なので壊れているかもだけどよければお使いください。 marketplace.visualstudio.com remote (origin) の URL 、 HEAD のハッシュ、開いているファイル名、カーソル行の行番号をくっつけた、 https://github.com/hogashi/sketch-20200411-vscode-ext-git/blob/47b96dd6cc7c521d9ab017ce7760d62536cbb4cc/src/extension.ts#L4 みたいな URL をクリップボードに入れる。選択範囲で見ているので、複数行選択しているときはその範囲の URL になる ( https://gi
Scrapboxの編集履歴をスライダーで眺められるUserScript - hogashi.*
Scrapbox のページの編集履歴を、スライダーで動かしながら眺められる UserScript を書きました*1。 scrapbox.io ページメニューに追加されたボタンを押すと、そのページの編集履歴を取得して、履歴ビューを表示します (メンバーでないプロジェクトでは API で取得できないので見られません)。 上にあるスライダーを右へ左へ移動すると、新しくなったり古くなったりします。 詳しく Scrapbox の編集履歴 API を使っています。 scrapbox.io 全く同じように編集履歴を取得し、commits の changes のひとつごとに、ページの内容の状態をつくり、スライダーが動いたらその状態を表示する感じです。 最初は、 change ごとの、その時々のページの状態を持つようにしていました。ページの状態とは、行の id とその行に書いてある文字列の、ページ全体分です
はてなインターーーーーーン - hogashi.*
はてなサマーインターン2017に参加しました！ 僕 (id:hogashi) は はてなブログコース での参加でした。 実を言うとこの文を書いている時点ではまだ参加していて、今は最終日の9/8(金) の午後です。もっと言うと今はまだ最終発表の順位が不明で、後のお楽しみということになりそう、おそらく書き上がるあたりでは新幹線に乗っているはず。時間を感じてください。 結論から言うとめっっっちゃ楽しかったので はてなインターンに参加してくれ！！ 応募 前半期間 1週目 2週目 週末 後半期間 全体感想 雑談・追記会場 他インターン生の記事一覧 応募 応募は割と前からしたいと思っていて、というのは大学の先輩で何人も参加していて常々最高だと聞いていたからです。(インターン中もお世話になった id:masawada さん、インターン中の会話に何度も名前が登場した id:miki_bene さんなど)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
progress要素並べまくるとスペクトラムアナライザみたいな表示ができる - hogashi.*