TL;DR 2017年ごろから発生していた scrollIntoView を同時に複数実行すると 1つしか動作しないバグが存在する。*1 次バージョン v130 でやっと修正される予定*2 それ以前のバージョンでサポートしたい場合は scrollTo を使うことで回避できる scrollIntoView…

ブラウザ拡張機能作っていますか？そこで eval を実行したいというケースは多くあると思います。 例えば、 options ページにてユーザーが任意のコードを入力できるようにしてそれを実行するケースなどです。任意の JavaScript コードを実行する際には eval …

皆さんはソースコード上にコメントを書くだろうか？個人で開発していると // TODO などは書きがちだがチーム開発ではコメントはコードの意味を修飾する、もしくは経緯や歴史を示すものとして重要な要素となりえる。 コメントの良い書き方というのは CleanCod…

私のいる開発チームは自分が入社する前からある。そのため、異動してしまってすでにチームにいない人が実装したものがたくさんある。 最近、そういった実装に多く悩まされることがある。なぜ実装したかの経緯が残っていないのだ……どういう実装がされているか…

iPadからsshで自宅のサーバーに接続したいと思ったことありませんか？え？自宅にサーバーがない？それだと話が終わってしまうので「あるある〜」という前提でこの記事は書いていきます。 Tailscale は WireGuard の技術を使用したVPNのSaaSです。 tailscale.…

現在、Web上にはたくさんのWebサイトが存在しています。見る側も昔と比べ格段に増え、現在はスマホをもつ世界中の人々がアクセスしてきます。 そのため、なにかしらWebサイトを立ち上げる際には現在はCDNなどを使用したキャッシュの仕組みが欠かせません。こ…

3行まとめ CloudRunはX-Forwarded-Forを上書きしてクライアントのIPアドレスにしてしまう User - CDN - CloudRun としている場合、X-Forwarded-Forの値はCDNのIPアドレスになってしまう 解決策はCDN独自のヘッダーを付与してアプリケーション側で読むしか方…

バックエンドとフロントエンドが分かれていたり、細かいルーティングを行うWebアプリケーションではローカルの開発環境でnginxをプロキシサーバとしてかますことが多いと思います。 しかし、docker compose upで立ち上げた初期はバックエンドのアプリケーシ…

追記 2024年6月4日 4757 - chromedriver - WebDriver for Google Chrome - Monorail のissueを見てみると status が fixed になっており、修正されていそうです。 とはいえ、まだ最新版はパッケージマネージャーに降ってきていないのでまだ待つ必要がありそ…

この記事は はてなエンジニアのカレンダー | Advent Calendar 2023 - Qiita の22日目の記事です。 qiita.com developer.hatenastaff.com 前日は id:utgwkk さんの 知見がどんどん集まってくるところが見た〜い - 私が歌川です でした。 突然ですが、 こんに…

注意 この記事ではgo-webauthnを使用したバックエンド側のWebAuthnの実装について解説しています。 1からWebAuthnを実装したい場合は RFC や W3C を参照してください。 この記事は、四工大アドベントカレンダーのカレンダー | Advent Calendar 2023 - Qiita …

これは、Go歴1年未満の初心者の戯言です。はてブなんかで指摘していただけると嬉しいです。 Goでアプリケーションを書くときに、クリーンアーキテクチャに則って実装するのは厳しいのではないかということをよく考えている。というのも、Goはディレクトリご…

Cloud Runをバックエンドにし、前段にFastlyなどのCDNをかますといった構成をすることは多いと思います。しかし、CDNはデプロイ時にキャッシュをパージしないと古い内容が残ってしまうという問題があります。Next.jsなどは特にパージしてあげなければならず…

Cloud Run には セッション アフィニティ という機能があります。説明には 同じクライアントからのリクエストを可能な限り同じコンテナ インスタンスにルーティング。 とあるように、Cloud Runで複数のインスタンスが立ち上がっている状態でも可能な限り同一…

Fastly はVarnish上に構築されているCDNです。 そのため、VCLを自由に書くことができます。これを使用することで CDN - Orign 間通信にBasic認証を追加することも可能です。 TL;DR FastlyのVCL snippets 設定で以下をvcl_missとvcl_passに追加します。値はus…

* この記事はドライバのダウンロードなどを説明していますが、行う際はすべて自己責任でお願いします。 *2 震度表示などをしたい場合は 余談: seismometer ファームウェアを使用する セクションを参照してください。 EQIS-1という素晴らしい商品があります。…

コンテナ化しているプロダクトをローカルで動作させる場合、MySQLのコンテナを用意しdocker composeで管理することが多いかと思います。 スキーマのマイグレーションは別スクリプトになっていて初回セットアップ時の手順で「docker compose upをした後、マイ…

追記 2023/10/25 ミドルウェアを使用している際にX-Middleware-Prefetchヘッダを付与して送信すると{}がキャッシュされることで攻撃者は容易にキャッシュを{}にすることができるためこちらの問題にCVEが付きました。 13.4.20-canary.13で修正されているので…

2行まとめ include文が追加された include:で外部のcompose.yamlをロードできる 本文 docker compose の v2.20.0 に include文というものが追加されました。 github.com これは、yamlに、 include: - ./docker/compose.yaml - ../hogehoge/compose.yaml のよ…

SQLBoilerでは、Debug Loggingという機能があり、これを有効にするとSQLクエリが実行されるたびに標準出力されます。 boil.DebugMode = true このデバッグログの出力先はデフォルトでos.Stdoutになっていますがboil.DebugWriterを使用することで自由に上書き…

はじめに RecoilというReactの状態管理ライブラリが存在します。 自分はよく、/user/meから取得したユーザー情報をこのRecoilのStateに入れて保管しています。 しかしただログイン状態を入れるだけでは、複数タブで同じページを開いている場合に片方がログア…

remark.jsというのを知っていますか？知らない方向けに一言で説明すると、マークダウンをHTMLに変換するJavaScriptのツールです。 react-markdownなんかも内部はこれで動いています。 remark.jsはプラグインをサポートしており、自分で自由に構文を作成する…

TL;DR ChakraUIには@chakra-ui/storybook-addonという便利なアドオンがある これを使用するとStorybookで簡単にChakraUIを使用できる しかし、ツールバーのテーマボタンはconst {setColorMode} = useColorMode();などが効かない 解決するには、.storybook/pr…

株式会社はてなに入社しました 株式会社はてなに入社しました - hitode909の日記 4月1日です。今日はエイプリルフールですが、この記事は本物です。 タイトルにある通りに株式会社はてなに入社します。はてなとは1年ほど前からアルバイトをさせていただいて…

TL;DR Sign your Git commits with 1Password | 1Passwordを使用するとGitのコミット署名を1passwordで管理することができる。 GPG keyを使用する場合よりもかんたんに署名することができ、管理もしやすくて最高 コミット署名には苦い思い出があった Gitには…

TL;DR 記事タイトルを[カテゴリー]タイトルのようにすると[]の中が自動的にカテゴリーになる。 カテゴリーを複数設定する場合は、[カテゴリー1][カテゴリー2]タイトルのように連続にする。 ？？？ 少なくともヘルプには書いていないので隠し機能（？） help.…

TL;DR github.com/go-rod/rodを使うと簡単にできる package main import ( "path/filepath" "github.com/go-rod/rod" "github.com/go-rod/rod/lib/proto" "github.com/go-rod/rod/lib/utils" ) func main() { browser := rod.New().MustConnect() page := br…

Goのxmlパーサである、encoding/xmlのパースベストプラクティス（自分調べ）です。 通常のパース <data> <item> <title>hogehoge</title> <link>https://cateiru.com</link> </item> </data> type Data struct { Item struct { Title string `xml:"title"` Link string `xml:"link"` } `xml:"item"` } go.dev 複数…

2022-12-15T06:12:47+09:00の形式をパースします。 TL;DR d := "2009-10-01T13:48:00+09:00" parsedTime, err := time.Parse(time.RFC3339, d) ... Playground go.dev

この記事は Calendar for 東京電機大学 | Advent Calendar 2022 - Qiita の10日目です。 ITエンジニアしていますか？私は日々、クソコードを量産したり研究室で発狂しています。 さて、このブログではITエンジニアに向けて料理という趣味について紹介をして…