私が歌川です

@utgwkk が書いている

技術

年末恒例・大sketchリポジトリ棚卸祭

はじめに これは はてなエンジニア Advent Calendar 2022 6日目の記事です。昨日は id:momochi29 さんで「口癖を自動で検出する手法」でした。口癖って自分ではなかなか気づけないですよね。 tjmtmmnk.hatenablog.com アプリケーションエンジニアの id:utgwk…

吉祥寺.pm 31でLTした #kichijojipm

kichijojipm.connpass.com 今回も一句用意してから臨みました。 speakerdeck.com 機能追加やバグ修正以外にも、Pull Requestにはマージされる以外の使い道がある、という話をしました。普段の活動を5分に凝縮してダイジェストする、という意識で発表していま…

Relayのfetch policyは取得したデータをキャッシュするかどうかに影響を与えない

Relay 14.1.0 で確認した。Fetch Policies | Relay を読んでもRelayが取得したデータをキャッシュストレージに格納するかどうかについては言及されておらず、実験して確認した。 fetch policyはあくまでGraphQLクエリを発行するときにキャッシュを使うかどう…

JavaScriptで任意のHTML要素を画像化する取り組みのメモ

表題のことについてちょっと調べていて、だいたい以下のようなアプローチに分類できそう、と思ってきたのでメモです。 SVGの <foreignObject> にHTMLを突っ込む SVGには <foreignObject> という要素があり、SVG以外の要素を描画することができる。ここにHTMLを丸ごと突っ込んだ上でSVGを画</foreignobject></foreignobject>…

RubyKaigi 2022にオフライン参加した #rubykaigi

RubyKaigi 2022にオフライン参加しました。参加するのは2016年の会*1以来で、これで2回目です。 トーク トークを聞いたときのメモはScrapboxに残していました。 scrapbox.io 2016年の会に参加したときは全然理解が伴っていなくて、なんだかすごい話が行われ…

代替テキストが指定されていないimg要素をハイライトするブックマークレット

……というものを書いたので、どうぞご利用ください。 let.hatelabo.jp (() => { const highlight = (element) => { element.querySelectorAll("img").forEach((img) => { // alt属性が指定されていたら緑の線、指定されていないなら赤線で囲まれる img.style.…

TODOコメントを列挙して棚卸しする行い

表題のような活動をやった。今あるTODOコメントを全部抜き出して、Scrapboxのページに並べた上でコメントしていく。すでに解決しているもの・今のうちに対応を考えておくべきもの・まだ前提が揃っていないもの などいろいろあると思うけど、現状どうなってい…

input type="text" にpatternを指定してもrequiredでないなら空のとき検証成功する

CSSで検証成功したときにinputの背景色を変えるようにしています。 .input-20220720:valid { background-color: green; } <form action="#"> <input type="text" class="input-20220720" pattern="[a-zA-Z0-9]{4}" maxlength="4"> </form> <form action="#"> </form>

sqlxで無理やり複数カラムに対するINクエリを書く

小ネタだしプロダクションで試したことはないです。ISUCONの練習をしていたらふと、これで複数カラムのINクエリが書けるのでは?? と思いついたのでメモ。 package main import ( "fmt" "log" "strings" "github.com/jmoiron/sqlx" ) type WhereInArg struct …

社内ISUCONでISUCON11予選問題を解いて840,504点を記録した

こんにちは。社内ISUCONで優勝しました。ネタバレ防止のために「続きを読む」を挟みます。

味玉のレシピをMakefileで記述する

最近よく味玉を作っているのだけど、ジップロックに日付を記入し忘れたり、ボウルに水を入れてから氷を入れようとしたりしていて、手順の依存関係を意識しないとめちゃくちゃになる。 Makefileは依存関係と成果物を記述できるので、レシピをMakefileの形で書…

エディタ歴

Atom の sunsetting によりエディタ歴を晒す流れが社内で発生してたが,私は HSPスクリプトエディタ -> Terapad -> Eclipse -> NetBeans -> Vim -> Neovim です.— (@ryotakameoka) 2022年6月9日 おもしろいので、思い出せる限りで書いてみます。特定言語向…

relay-compilerでinline fragmentのある型定義を生成するときのコツ

relay-compiler 13.2.0で確認した。つい昨日にRelay 14が出ていたので試してみたけど同様の結果になった。 特定のinterfaceに対するinline fragment内に、interfaceが共通して持つフィールドも都度列挙して書くと、直和型の __typename フィールドによる型の…

「適切な変更の粒度」とは何なのか

「適切な変更の粒度」について考えることが増えたので、考えていることを流しておきます。 関連する変更がまとまってると嬉しい 1つのPRでついでにやらない、という話は以前もブログに書いた。コードレビューする側に立っても、このPRでやりたいことが何なの…

ISUCON本を頂きました

達人が教えるWebパフォーマンスチューニング 〜ISUCONから学ぶ高速化の実践作者:藤原 俊一郎,馬場 俊彰,中西 建登,長野 雅広,金子 達哉,草野 翔技術評論社Amazon レビューに参加した「達人が教えるWebパフォーマンスチューニング 〜ISUCONから学ぶ高速化の実…

GraphQLの規格には書いてあるけど意外と知らなかったこと

はじめに 2021/10 時点の規格を読んでいきます。ご存知でしたか? 意外と知らなかったこと 不要なfragmentの定義を含めたクエリを書いてはいけない https://spec.graphql.org/October2021/#sec-Fragments-Must-Be-Used 「不要なfragmentの定義を含めたクエリ…

GraphQL Code GeneratorでTypeScript向けのenumの型だけを生成してみる

tl;dr プラグインを作る (改造する) と実現できることは分かった 既存のプラグインのオプションを調整するだけで実現できるかは不明 背景 GraphQLスキーマファイルを生成するためにGraphQL Code Generatorを使っており、GraphQLクエリに関するコード生成はre…

YouTube Data APIをラップしたGraphQL APIを作る

はじめに 表題のものを途中まで作った。指定したチャンネルにアップロードされた動画ぐらいは取れるというステータス。 developers.google.com 基本的にはAPIドキュメントを読みながらGraphQLスキーマを作ってリゾルバを実装していけばよい。けど、このAPIで…

デプロイ用のIAMユーザーぜんぶ捨てる

GWなので断捨離です。やったこととしては、以下の記事を参考にしつつIDプロバイダやロールを作ってworkflowを書いたぐらい。 Configuring OpenID Connect in Amazon Web Services - GitHub Docs GitHub Actions OIDCでconfigure-aws-credentialsでAssumeRole…

nginxのaccess_logとerror_logのログファイル名に変数を使えるかどうか

tl;dr access_log には変数を使えるけど制約が多い。error_log には使えない。ホスト名の数だけ server directiveを列挙した方が早そう。 nginx 1.21.1 で確認した。 変数を使えるかどうか 表題のことが気になったので調べた。部内k8sクラスタにアプリケーシ…

grapheneでナイーブなnodesクエリを実装する

複数のIDを指定してデータを一括で取得したい場合があって、手作りした。ナイーブにはこういう感じでいける。N+1クエリになるのでもうちょっとうまくやる必要がありそう。 import graphene class Query(ObjectType): # 中略 nodes = graphene.Field( graphen…

GoでGraphQLクライアントを書くために github.com/hasura/go-graphql-client を使ったら便利だった

あらすじ Go言語でGraphQL APIを叩くクライアントを書くことがあって、クエリをベタ書きするのはともかく返り値にマッピングされるようなstructの型を用意するのが面倒すぎる。正常系だけならそれでもまだなんとかなるかもしれないけど、異常系のことも考え…

吉祥寺.pm 29でトークした #kichijojipm

kichijojipm.connpass.com レギュレーションに則って*1一句用意してから臨みました。発表資料は以下です。 speakerdeck.com 自分にとって馴染みのない分野の業務に飛び込むという「挑戦」だったけど、振り返ってみればこれまでと変わらない方法で着実に身に…

Pythonのテストで常にHTTPリクエストをモックする

HTTPリクエストをモックするには PythonでHTTPリクエストをモックするには、どうしたらいいか。unittest.mockを使ってHTTPリクエストを投げるメソッドをモックする方法が思い付くかもしれない。しかし、どこをモックして何を返すようにしたらよいのかは自明…

Gitのコミットメッセージを複数行書くときは2行目を常に空行にするとよさそう

Git (GitHub) のコミットログに Co-authored-by を書くときに、2行目を空行にしないとGitHub上で共同編集したような表示にならない、ということがあった。2行目を空行にしてcommitし直したら出るようになった。 この挙動自体はドキュメントを読むと書いてあ…

Webフォントを分割して読み込む際にunicode-rangeを指定しなかったらどうなるのか

表題のことについて検証してみましょう。 目次 目次 前提 Webページ上で独自のフォントを読み込むには フォントファイルのサイズ フォントファイルのサイズを抑える工夫 フォントファイルを分割し、必要に応じて読み込む フォントファイルを圧縮する 前提お…

さくさくコードレビューしまくる問題

GitHubからPRのレビュー依頼通知が来たら、作業の手を止めてコードレビューに入る暮らしをしていた。PRがマージされるまでの時間が短くなるのはいいけど、コードレビューしすぎてしまう問題があった。自分の作業は回っているけど疲れるような、実はもっとパ…

GitHub Actions上でdocker composeコマンド経由でpytestを走らせると何も出力されない現象

はじめに 2022/3/13 時点で、表題の現象を確認しています。また、以下のいずれかの手段で解決することを確認しています。 docker compose ではなく docker-compose コマンドを使う docker compose run を実行する際に -T (--no-TTY) コマンドライン引数を渡…

dot言語のプログラムをPerlとして動かすには

speakerdeck.com YAPC::Japan::Online 2022のLTで話したことの補足です。タイトルにあるjust epic. の話は時間内にできたのですが、それ以降の、dot言語をPerlとして解釈させる話をするところで時間切れになったので、この記事でお伝えします。 dot言語はPer…

linear-gradientでCSSでプログレスバーが書ける

表題のことに気づいたのでシェアーします。 (() => { let progress = 0; const maxProgress = 1000; window.setInterval(() => { const progressPercentage = progress / maxProgress * 100; document.querySelector('#linear-gradient-progress-bar').style…