はてなブックマーク

ワイワイあらすじ: blog.hog.as 以来この木の椅子だけで生活していました。特に直近で買い直すつもりはなかったけど、この間の Amazon ブラックフライデーで ストレスレストーキョー、Amazonのやつよく見たら白色だけ半額になっててすごい— r7kamura (@r7kamura) 2023年12月1日 白だけ半額になっていたこの椅子を買いました。 ワイワイ これは何 ストレスレストーキョーという名前の椅子で、上にツイート(便宜上の単語)を貼った r7kamura さんの記事を読んでいいな〜と思いつつ、 r7kamura.com ただ、 Amazon で見ると 25万円とかで、おまけに結構大きいので、今の家に置くのは流石にシュッと購入はできないなと踏みとどまりつつ、広い部屋に引っ越したりできたら買う候補かな、くらいの気持ちで暮らしていました。 EKORNES [正規品]ストレス

<marquee scrollamount="1" direction="right"> <div style="width: 100px; height: 100px; background-color: green;"></div> </marquee> <marquee scrollamount="10" direction="right"> <marquee scrollamount="9"> <div style="width: 100px; height: 100px; background-color: green;"></div> </marquee> </marquee> <marquee scrollamount="10" direction="right"> <marquee scrollamount="10"> <div style="width: 100px; h

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 を成功させてみる (外部サイトへの通信は、認証情報や秘密の情報の漏洩などに気をつ

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

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/

はてなエンジニア 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:

目次 目次 実際の例 NVD CVE 番外編: Security NEXT むすび こんにちは、 id:hogashi です。 はてなエンジニア Advent Calendar 2022 - Hatena Developer Blog の 30日目の記事です。昨日は id:stefafafan さんの はてなのエンジニアとして日々意識しながらやっていることを紹介します - stefafafan の fa は3つです でした。年の瀬MAXですね。 僕は業務でセキュリティ会というものに参加していて、毎週の定例で脆弱性情報を眺めています。脆弱性情報、特に CVE Record などにはなんとなく正確さを期待しますが、人間が運用している以上ミスはあるもので、たまに typo など誤記があることもあります。 そういうものに気づいたときには、修正してもらえるよう問い合わせてみたりしています。よく見ると

こんにちは、 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件しか検索できないという

Mend Renovate: Automated Dependency Updates を使うと、リポジトリに勝手に pull request を作ってくれるけど、その description に書かれる github.com 以下のリンクは、ドメインが ( github.com ではなく) togithub.com になっている。 これはバックリンクが作られてしまうことを防ぐためのものらしい。確かに、 GitHub 内で他の issue などのリンクを貼ると貼られた側にバックリンクが誕生して便利だけど、 Renovate のような機械的に大量に p-r を作るタイプのものだと困りそう。 github.com ちなみに togithub.com は誰が運用しているのか、と思って whois したら Redacted for Privacy になっていた。が、 Renovate のコードには

こんにちは、 id:hogashi です。 masawada Advent Calendar 2022 - Adventar の 2日目です。 目次 目次 OTP 入力フォーム まずベストプラクティスを見る それでは本題です ちなみに ちなみに2 むすび OTP 入力フォーム なぜか id:masawada さんとたまにワンタイムパスワード (OTP) の話をする印象があります。偶然生成された「ホホンドホド」という文字列*1が TOTP で出そうな見た目じゃん、とか。 最近もまた微妙に使いづらい入力フォームに出会いました。そこで、世に存在するベストプラクティスとそれに沿わないフォームを見て、ベストたる所以をなんとなく感じてみる回をお送りします。結果的に GitHub がなんかむずい感じになっているという記事になりましたが、もちろん各サービスそれぞれ良いと思ってやっているはずなのであくまで個

CSS に counters() というのがあって、 1.1 とかをカスタマイズできておもしろい。 counters() - CSS&colon; Cascading Style Sheets | MDN 言 葉 庭 というのをシンボルに使うことにして、繋ぎを の にするとこうなる。 @counter-style kotonohanoniwa { system: fixed; symbols: 言 葉 庭; suffix: " "; } ol { counter-reset: kounter; } ol li { counter-increment: kounter; margin-left: 30px; } ol li::marker { content: counters(kounter, 'の', kotonohanoniwa) ") "; } 実際に ol で見るとこう。 1 1,

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が光ったら成功"

仕事でコードを書くときは大抵 pull request にしてレビュワーに見てくださいって言うことになる。 description には「これをやらないと (今のままでは) こう困る」というのを書くように意識している。 多分こんなことは本やインターネットで無限に言われていると思うけどやっぱりそうだなと思って書く。 pull request をつくった身からするとどうしても変更に意識がいきがちで、「これがやりたい」「ここをこう変えた」ということを description にまず書くのだけど、レビューする立場から見ると「今の何がいけないのか」がわからない。変更しなくて済むならそれが一番*1なので、いや〜どうしても変えないと困るんですよね、という点を理解したい。 なので、 (さっきまず書いた内容に加えて) 「今のこれが壊れてて困る」「これがやりたいけど今のこの機能だとこれが足りない」みたいなこと

motemen.hatenablog.com 色々設定してるけど普段使ってるの何かな〜と思って見ました。 $ history | perl -pe 's|^ *[^ ]+ +||' | grep -E '^git ' | awk '{print $1 " " $2}' | sort | uniq -c | sort -nr | head -5 470 git gr 352 git df 344 git sc 294 git cam 293 git push alias.gr=grep -n grep するほとんどの場合で行番号がほしい alias.grn=grep -n --name-only はワンライナーに便利 alias.df=diff 左手だけでシュッと打てて便利 空白の変更を無視する alias.dfi=diff --ignore-space-change とかもしててこれも便利

masawada Advent Calendar 2021 - Adventar 10日目の記事です。昨日の id:Sixeight さんに見事に釘を刺されてしまったので、ありがたく受け取り、whywaita Advent Calendar 2021 - Adventarはこちらに書きました → 秘蔵UserCSS大放出祭 - hogashi.*。大目に見てください！ id:masawada / id:whywaita Advent Calendar 七五三おめでとうございます。 7, 5, 3 と素数ですね*1。ゴルゴ13が好きな id:hogashi です。 七五三は 11月 15日にやるそうです。 11 は素数だし、 15 は 3＋5＋7 ですね。 3×5 でも 15 になります。 能では、 7歳ごろから稽古を始めるので、このあたりを初心というそうで*2、世阿弥曰く、このころに自然に

ブックマークレットで文字列をコピーする (クリップボードに入れる) というのをよく書く。 昔ググってへ〜と思ったまま Document.execCommand() - Web API | MDN をずっと使っていた。(あと HTMLInputElement.select() - Web APIs | MDN も知らなくて、 Selection を使って頑張って文字列選択していた。) const value = 'これをコピーしたい'; // input をつくって body に入れる const input = document.createElement('input'); document.querySelector('body').appendChild(input); // フォーカスしたときスクロールされてしまわないように画面内に出す input.style = 'positio

素朴に button をつけて pre の innerText を textarea に入れてコピーする感じで書いた。たまに便利。 こういう感じ/* pre に copy ボタンつける */ [...document.querySelectorAll('article.entry pre')] .map(pre => { const button = document.createElement('button'); pre.parentNode.insertBefore(button, pre); button.textContent = 'copy'; button.classList.add('hogashi-pre-copy'); let timer; button.addEventListener('click', () => { const textarea = documen

web サイトの html のうち、 body タグ以下のタグをランダムで選んで様子を変える、というのを思いついて遊んでいた。 ランダムで灰色背景・白文字になっていく google.com let count = 0; const timer = setInterval(() => { const allElements = document.querySelectorAll('body *'); const randomIndex = Math.floor(allElements.length * Math.random()); const targetElement = allElements[randomIndex]; console.log(count++, targetElement); targetElement.style.background = 'gray'; targe

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

こんにちは、 id:hogashi です。 masawada Advent Calendar 2019 - Adventar の 8日目の記事です。昨日は id:mazco さんでした。 参加したいけど全然アイディア無いな……と思っていたんですが、 1日目の記事*1 で遊んだ途端に作りたくなって作りました。 まさわだまわしです。 ここで遊べます → https://hogashi.github.io/masawada-mawashi この記事上で遊ぶ masawada さんの 3D モデルを 6人同時にまわすことができます。 タイトル画面の様子 強く押すボタンをクリックで始まります マウスカーソルを動かすと、 6人の masawada さんがめいめいにまわります 最初は様々な方角を向いていると思うので、 6人全員に正面を向いてもらえる場所を探してください(ゲームの枠内にあるはずです) 40

Scrapbox のページの編集履歴を、スライダーで動かしながら眺められる UserScript を書きました*1。 scrapbox.io ページメニューに追加されたボタンを押すと、そのページの編集履歴を取得して、履歴ビューを表示します (メンバーでないプロジェクトでは API で取得できないので見られません)。 上にあるスライダーを右へ左へ移動すると、新しくなったり古くなったりします。 詳しく Scrapbox の編集履歴 API を使っています。 scrapbox.io 全く同じように編集履歴を取得し、commits の changes のひとつごとに、ページの内容の状態をつくり、スライダーが動いたらその状態を表示する感じです。 最初は、 change ごとの、その時々のページの状態を持つようにしていました。ページの状態とは、行の id とその行に書いてある文字列の、ページ全体分です