Chrome DevTools（以下、開発者ツール）は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか？ この記事では開発者ツールの便利な機能をまとめて紹介します！筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含みます。 スクリーンショットをキャプチャする 端末の機能でもスクリーンショットをキャプチャすることはできますが、開発者ツールではより便利なスクリーンショットの機能が提供されています。 特定のノードのスクリーンショットをキャプチャする Elementsパネルからスクリーンショットをキャプチャしたいノードを選択します ノードを右クリックして「Capture node screenshot」をクリックします 選択したノードのスクリーンショットがダウンロードフォルダに保
前回の、社内プライベートポッドキャスト実現方法で、ポッドキャストサイトを静的配信しつつBasic認証をかけるというアイデアを書いた。しかし、Basic認証などなかなか使わなくなり、ネイティブでサポートしている静的ホスティングサービスも少ない。今回はCloudflare PagesのFunctions機能でリクエストをラップするミドルウェアを書けば実現できることが分かり、その方式を採用することにした。多少実装必要になるのと、認証周りを自前で書くのはあまりやりたくはないが、廉価に比較的省力で実現できるので受け入れる。 ネット上にいくつかサンプルは見つかるが、今回実装するにあたっては以下の点を留意した。 コード内に認証情報を載せない 複数ユーザーのIDとパスワードを管理できるようにする パスワードは定数時間比較してタイミング攻撃を防ぐ これらを以下のように解決することとした。 認証情報は環境変数
JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏（学習動画教材とかを作っている人）は、ChatGPTのフロントエンドのソースコードを分析し、OpenAIがRemixを採用した理由について独自の考察を展開しました。 www.youtube.com 緊急で動画を回すWes Bos氏 Wes Bos氏の分析によると、ChatGPTのア
先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents; とは？ 2-1. display:contents;の概要 display:contents;を指定した要素は、存在しないかのように扱われ、指定した要素の子要素が直接親要素内に挿入されます。 Mdn Web Docsでは以下のように説明されています。 これら
Remix on CloudflarePages + Prisma + Supabase で銀の弾丸を目指す 20240828
自分が思う最強の(かつ貧者の)構成を目指したログ。流行りの技術選定ってやつしたかった。 結論だけ言うと、まだ綺麗ではないが現実的に動く。動かし方を理解してないと事故る、かも。 この記事は自分がたどり着いた結論を順を追って記述するが、自分にとって自明な場所の差分を記録してないので、コードをなぞるより変更意図を追って各々自分で組み立てる、ということを推奨する。 動いてるリポジトリはここ。ただこの記事の説明を読まないと、その意図が伝わらない。 追記 20240829: DATABASE_URL で Connection Pool を有効にするのに ?pgbouncer=true を追加 https://supabase.com/partners/integrations/prisma このスタックの意図 Remix on cloudflare-pages コストとパフォーマンスを両立できる、20
最近になって Frontend Ops の傭兵として活動を始めました。 Frontend Ops 実践のモデルケースとして、 株式会社GiXo様で Next.js 仕事に取り組ませいただきました。今回、その内容を公開する許可を頂けたので、事例として公開させていただきます。 依頼主 株式会社GiXo様 以下、敬称略 相談内容 フロントエンド関連のリポジトリで、Next.js のビルドが遅くなってしまった。 重いことに起因して Vercel CI で OOM で確率的に落ちるようになった。CIが信用できなくなり、とりあえず再ビルドするクセがついてしまって、生産性が落ちている。 モノレポ内にとくに重いアプリケーションが一つあり、これを調査・解決してほしい。 仮ゴール: VercelCI 上のビルド時間を半分OOM が発生しないようにしたい 調査フェーズ リポジトリの閲覧権を頂き、プロジェクト構成
目的別データベースの実践: PostgreSQL 行レベルセキュリティと DynamoDB Outboxパターン - KAKEHASHI Tech Blog
カケハシのプラットフォームチームのテックリードとして組織管理サービスと認証基盤を開発している kosui (id:kosui_me) です。今回は、目的別データベースをプラットフォームチームではどのように実践しているかご紹介します。 この記事は秋の技術特集 2024の 13 記事目です。 背景 目的 事例1: PostgreSQL の行レベルセキュリティを活用する組織管理サービス 組織管理サービスとは PostgreSQL の行レベルセキュリティ 行レベルセキュリティを用いたトランザクションマネージャー 行レベルセキュリティの運用上の注意点 事例2: DynamoDB を活用する認証基盤と Outbox パターンの活用 カケハシの認証基盤刷新 DynamoDB で実現する高稼働率の認証基盤 DynamoDB の特性を考慮する CDC と Outbox パターン まとめ 背景 医療の分野で様
モダンなブラウザは JS API として gzip や deflate が使えます。 昔から Chrome に搭載してるのは知ってたんですが、今見たらだいたい搭載してました。 わかってる人向けに言うと、バンドルサイズ大きめの JS実装の pako や zlib.js が不要になって、ブラウザネイティブの(たぶんHTTP上のgzip展開と同等の)高速な実装が使えます。 // impl const encoder = new TextEncoder(); const decoder = new TextDecoder(); export async function compress(str: string): Promise<ArrayBuffer> { const cs = new CompressionStream("gzip"); const buf = encoder.encode(
サーバーレス技術の今と未来についてServerlessDays TokyoのPreEventで話してきました - めもおきば
𝕏にURL貼れなくなっているので、Zennにもマルチポストしています。 ServerlessDays Tokyo 2024 PreEvent 2024-09-21のServerlessDays Tokyo 2024にむけて、去年に引き続き、直前イベントでサーバーレス技術の今と未来について話してきました。 いよいよ明日からメインイベントですので参加お待ちしています！ Serverless Update 2024 文字起こし スライド全体はDocswellさんで公開しています。 PreEventはYouTubeでアーカイブがあります。 サーバーレスのおさらい 「サーバーレス」は、誤解を招きやすい技術用語で様々な定義がありますが、ここでは2つの視点で定義します。 運用者の視点としてのサーバーレスは、物理的なマシンや仮想マシン、EC2インスタンスのような「サーバー」を自分で管理するのではなく、そ
3点リーダーとは 3点リーダー（省略記号）とは、テキストが長くてボックスの領域を超えてしまう場合に「...」でテキストを省略表示する手法です。 3点リーダーを実装するために必要な4つの設定 1、ボックスのwidthの指定 テキストが表示される領域の幅を指定します。 2、white-space: nowrap; テキストの改行を禁止し、1行で表示します。 3、overflow: hidden; テキストが表示される領域の幅を超えた場合、その超えた部分を隠します。 4、text-overflow: ellipsis; 非表示の溢れた部分を3点リーダー（...）で表示します。 See the Pen Untitled by kidorina (@kidorina) on CodePen. 簡単に長いテキストを省略することができます。 Table内での3点リーダーの挙動 Table内で3点リーダー
JavaScript Primer v6.0.0をリリースしました 🎉 JavaScript Primer v6.0.0では、ECMAScript 2024の対応とNode.jsのユースケースを新たに増えたnode:utilのparseArgs関数やnode:testを使うように書き直しています。 JavaScript Primer Sponsors JavaScript Primer(jsprimer)では、Open Collectiveを通じてプロジェクトの更新に関わる資金を募っています。 JavaScript Primer - Open Collective 今回のv6リリースにおいては、次の方々にご支援いただきました！ 株式会社コクチョウさんは、Yearly Gold Sponsorとしてご支援いただいています。 ご支援ありがとうございます！ JavaScript Primerス
JSer.info #705 - webpackとの互換性を持つようにRustで書かれたbundlerであるRspack 1.0がリリースされました。 Announcing Rspack 1.0 - Rspack 0.7からの破壊的な変更もいくつか含まれているため、マイグレーションガイドも公開されています。 Migrating from Rspack 0.x - Rspack Safari Technology Preview 202がリリースされました。 Release Notes for Safari Technology Preview 202 CSSのbackground-clip: border-area/ruby-align、shape() function/@pageでjis-b4とjis-b5のサポートなどが追加されています。 また、ECMAScript Proposal
JSer.info #706 - Vue 3.5がリリースされました。 Announcing Vue 3.5 | The Vue Point パフォーマンス改善、definePropsの返り値をDestructureできるようになっています。 また、useId()の追加、data-allow-mismatch属性の追加、defineCustomElement() APIを追加しCustom Elementの対応を改善、useTemplateRef()、onWatcherCleanup()の追加なども行われています。 JavaScriptの入門書であるjsprimer v6.0.0がリリースされました。 JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新 | Web Scratch ES2024の対応とNode.jsのユースケー
普段から Svelte / SvelteKit を使っているので、その地味に好きなところを紹介します。 また、微妙なところも最後に紹介します。 Who are you? ryoppippi Frontend は Svelte メインで書いている React も書くが、少なめ Astro は書いている Solid でも簡単なものを作ったことがある Vue3 はほぼ触ったことがない Svelte の好きなところ👍 直感的に書けるところ Svelte は直感的に書けるところが好き。 見た目も html に近い。 エディタの支援もしっかりしているので、書いていてストレスがない。 速い、軽い、うまい 結構適当に作っても、speedInsight でいい点数を取りやすい。 また、ビルド後のファイルサイズも小さいので、デプロイもしやすい（特に Cloudflare Pages との相性がいい）。 型安
JSer.info #707 - Biome v1.9がリリースされました。 Biome v1.9 Anniversary Release | Biome CSSのFormatter/LinterがStableに、GraphQLのFormatter/Linterを追加されています。 GritQLを使ったbiome searchコマンドを追加、.editorconfigをサポートなども追加されています。 ESLint v8.xのサポートが2024年10月5日に終了することが発表されました。 Version support policy and ESLint v8.x end of life - ESLint - Pluggable JavaScript Linter ESLintの現在の最新バージョンはv9.xです。 マイグレーションガイドは次のページに公開されています。 Configura
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome DevToolsを使いこなしてフロントエンド開発を加速させる
Cloudflare PagesにそれなりにちゃんとBasic認証をかける | おそらくはそれさえも平凡な日々
ユーザー体験重視のSPAアーキテクチャ改 - laiso
display:contents;って何？どんな時に使うと便利なの？ - Qiita
ジャイアントパンダに注意 - Next.js のビルド改善 (株式会社GiXo様)
CompressionStream でブラウザで gzip 圧縮する
Table内の3点リーダーってどういう仕組み？max-width: 0ってﾄﾞﾕｺﾄ？ - Qiita
JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新
2024-09-01のJS: Rspack 1.0、Safari Technology Preview 202、Material UI v6
2024-09-09のJS: Vue 3.5、jsprimer v6、a11y-visualizer
Svelte/SvelteKit の地味に好きなところ
2024-09-16のJS: Biome v1.9、ESLint 8.xのEOL、TypeScript 5.6、ES5の現状