<div className={style.buttons}> <Button type="button" color="secondary" startIcon={<FiRotateCcw size={18} />} > キャンセル </Button> <Button type="submit" color="primary" startIcon={<FiCheckCircle size={18} />} > 次に進む </Button> </div> このボタンの仕様はざっくりと以下の通りです。 color Prop は以下の2通りの文字列を指定可能 "primary" … 青い背景、白文字 "secondary" … 薄灰色の背景、黒文字 startIcon Prop として ReactNode を渡せる 省略可。渡されたアイコンを、ラベルの左側に配置する つまり、「コンポジション」

はじめに こんにちは、皆さん。今日は、シェルスクリプトを使った高度な自動化のベストプラクティスとパターンについて解説します。これらは、ちょっとした知識で実行でき、作業を大幅に効率化できるTipsです。シェルスクリプトは、特にUNIX系システムでの自動化タスクに欠かせないツールです。適切に使用すれば、複雑なタスクを効率的に、そして信頼性高く実行できます。 トイルとは、反復的でマニュアルな作業のことを指します。これには、例えば、手動でのシステムのスケーリングや、エラーのトラブルシューティング、ルーティンなメンテナンス作業などが含まれます。トイルを特定し、それを自動化することで、エンジニアはより創造的なタスクやプロジェクトに焦点を合わせることができます。 トイルを判別する方法としては、以下のような基準が挙げられます： 手作業であること 完全な手作業だけでなく、「あるタスクを自動化するためのスクリ

はじめに Playwright を使うことで比較的簡単に E2E テストを実装することができます。しかし、通常テストコードは実装したら終わりということではなく、継続的にメンテナンス（保守）が必要になります。その際に保守しやすいように実装するため、Playwright の公式ドキュメントに記載されているベストプラクティスの中で参考になりそうな部分を確認しておこうと思います。 テストの独立性を高める 可能な限りテスト間の依存が無いようにして、テストを分離すると良いというプラクティスです。各テストが独立していることで、 １つのテストが失敗しても他のテストに影響しない テストの順序を考慮する必要がない テストをシンプルに保つことができる あたりのメリットがあるかと思います。また、特定の処理（例えば特定の URL に遷移する処理）の繰り返し実装するのを避けるために before and after

[2024/07/11]Guardianとして生まれ変わった俺は攻めと守りの運用で無双する 〜守りの天才が考える、攻めの運用術〜

はじめに はじめまして、セキュリティエンジニアのSatoki (@satoki00) です。今回はブラウザの開発者ツールのネットワークタブから隠れて、Webサイト内の情報を送信する手法をまとめます。所謂Exfiltrationというやつです。中にはCSPの制限をBypassするために用いられるテクニックもあります。CTFなどで安全に使ってください。 前提 発端はWeb上でテキストの文字数をカウントできるサイトが閉鎖する際の話です。カウント対象のテキストデータがサイト運営 (やサイトを改竄した攻撃者) に盗み取られていないかという議論が巻き起こっていました。「盗み取られていない」側の主張は、ブラウザの開発者ツールのネットワークタブにリクエストを送信した形跡がないというものでした。ここで ブラウザの開発者ツールのネットワークタブに表示がなければ外部へデータを送信していないのか？ といった疑問が

The AWS Secrets Manager Agent is a client-side HTTP service that you can use to standardize consumption of secrets from Secrets Manager across environments such as AWS Lambda, Amazon Elastic Container Service, Amazon Elastic Kubernetes Service, and Amazon Elastic Compute Cloud. The Secrets Manager Agent can retrieve and cache secrets in memory so that your applications can consume secrets directly

真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く2024/07/14 14:36 nextjsreact このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたことを残しておきます。 ダークモードの実装方法一般に、ダークモードの実装方法は3タイプあります。 OSによるモード設定を反映する メディアクエリー@media (prefers-color-scheme: dark)を使うと、OS側でダークモードを指定している時だけ有効になるスタイルを書くことが出来ます。 JavaScriptでも判定が必要な場合はmatchMedia("(prefers-color-scheme: dark)")

テスト設計において何を考えてますか？ テスト設計の時、何を考えていますか？テスト対象の機能のこと。テストすべき観点のこと。テスト技法を適用すること。期待値を明確にすること。テスト条件を満たす手順や環境を定義すること。最終的にテストケースに落とし込むこと。色々と考えることはあると思います。 テスト設計のWhatとHow これら考えていることは大きくWhatとHowに分けることができます。Whatというのは、「何をテストするか？」を考えることです。一方、Howというのは、「どのようにテストするか？」を考えることです。普通テスト設計で考えることと言えば、何をテストするか、いわゆるテスト観点を抽出したりすることが大事と思われがちですが、Howのどのようにテストするかも同じくらい必要です。これは、これまでの経験上そうしていたといったことや、過去のプロジェクトのやり方を流用するなどして暗黙的になってい

CSS の @property ルールを使うことで、CSS のカスタムプロパティ を定義できます。カスタムプロパティを定義することでプロパティの構文チェック、初期値の設定、プロパティが値を継承するかどうかの設定が可能になります。 @property --my-color { /** red や #fff のように色のキーワードまたはカラーコードを代入可能 */ syntax: "<color>"; inherits: false; initial-value: red; } /* カスタムプロパティを使用 */ .my-element { --my-color: blue; color: var(--my-color); } @property ルールのメリット @property ルールを使うことで、以下のようなメリットがあります。 カスタムプロパティによりコードをドキュメント化する 誤

2024-07-13「大吉祥寺.pm」の発表資料です。 参考となる情報にはPDF中からリンクをしていますが、資料中のリンクは Speaker Deck 上ではクリックできないので PDF をダウンロードしてご覧ください。

この記事では、Next.js Middlewareのテストコードを書く方法を紹介します。Middlewareはリクエスト時に最初に処理されるパーツで、認証やリダイレクトなどに使われます。パスやCookieなどに応じて分岐するため十分にテストをしないと意図しないリクエストを受け入れてしまう可能性があります。 今回はユニットテストを使ってMiddlewareの動作確認をしていきます。 まずはテスト対象のMiddleware 以下は高階関数を用いて、2つの処理を結合しているMiddlewareコード例です。 IPアドレスのアクセス制限 restrictIp リダイレクト処理 redirectAccountsPath ちなみに今回は高階関数で書いていますが、必ずしも高階関数である必要はありません。素朴に書いてもテストコードは書けます。書きやすい方で問題ありません。 import { type Ne

「スクラムでやっているんですが、問題が多くて、スクラム合わないのかなと思って……」 「問題あるならスクラムが上手くいってますね」 という会話をした。 スクラムをやっていて、いろいろ問題が起きる。スプリントゴールがわからないとか、チームの協力が難しいとか、プロダクトオーナーの権限がないとか。スクラムちゃんとできないなあ、うちには合わないのかなあ、と思う人は多いようだ。 だが、こうした問題が起きているならば、スクラムは正しく機能している。スクラムはチームや組織の問題を検出し、明らかにする仕組みだ。みんなが問題を意識できているなら、上手くいっているわけだ。「うちは〇〇だから、スクラム難しい」と思ったなら、その〇〇を解消できれば仕事がもっと上手くいき、よりよい成果が作れる。 スクラムが上手くいくと、問題が次々に現れる。問題を次々に解消していくと、仕事しやすくなり、コミュニケーションがスムーズになり

Webフロントエンド界隈の文献などにあたっていると、「コロケーション (co-location)」という考え方が時々登場します。 コロケーションを簡単に説明すると、関連するリソース同士を近くに置いておく、という考え方です。 FooComponent.tsx と同じディレクトリに FooComponent.test.tsx を置く GraphQL fragment は、クエリを発行するコンポーネントファイル (pages/user.tsx) ではなく、fragment を利用するコンポーネントファイル (components/UserInfo.tsx) の中で定義する pages/user.tsx からはサブコンポーネントのファイルで定義されている fragment を import してきて、クエリを組み立てて発行する API ドキュメントは API.md に書くのではなく、コードの中にド

関数型ドメインモデリング ドメイン駆動設計とF#でソフトウェアの複雑さに立ち向かおう 日本語版出版に際し、訳者の猪股さんにご恵贈いただきました。ありがとうございます！ すでに原著の『Domain Modeling Made Functional』を読んでいて、そのときの感想は以前に書いたとおり。そこからの差分としては、はてな社内でこの本の輪読をはじめたこと。輪読がはじまったその週に日本語版の出版が告知され嘆息する一同でしたが、日本最速で輪読を開始できたのは間違いないと思う。 この本の特徴をひとつ挙げろと言われれば、実装に使われている言語がF#であること、というのが大方の回答になるとおもうが、一方でこの本をやるのにF#を実践する必要はない、と考えている。そういうわけで今回輪読における実装言語にはGoとTypeScriptを指名しており、その後Scala勢力も増えたのだけど、進度的には実際にコ

module: add --experimental-strip-types by marco-ippolito · Pull Request #53725 · nodejs/node It is possible to execute TypeScript files by setting the experimental flag --experimental-strip-typ... 💁‍♀️ まだマージされてない点に注意してください --experimental-strip-typesというフラグを実行時に付けることにより、Node.jsでTypeScriptのコードを実行できるようになるPRが出てきました。 背景 TC39でも型注釈の話題(議事録を読むとブラウザとの兼ね合いもあり道のりは長そう)が存在するほどJSのコードにおいて、型は当たり前となっています。 Node.jsと同

概要 フォームの入力中に離脱すると入力中の内容が失われてしまいます。離脱前に確認ダイヤログを挟むことで意図せぬ入力内容の消失を防ぐことができます。 離脱には以下の 2 種類があります。 ブラウザ操作による離脱: タブを閉じる、更新する、ブラウザナビゲーション（戻る、進む） Next.js のルーティングによる離脱: Next.js の機能で別ルートに遷移する このうち 2 は Next.js の router.events という機能でイベントを検知&キャンセルすることになりますが、この機能が App Router から使えなくなりました。 現在フィードバックが集まっていますがコントリビューターから明確な回答が得られておらず、この機能が復活するのかも不明な状況です。 2024年5月8日追記: Lee Robinson 氏より正式な回答が得られましたが依然ハッキーであるため、よりスマートな解

Find where your private info is exposed — and take it backWe scan data breaches to see if your data has been leaked and give you steps to fix it. Get free scanEnter your email address to check for data breach exposures. MozillaMonitorPasswords4xCredit cards3xBank account numbers2xOther1xEmail addresses4x14exposures Data breaches happen every 11 minutes, exposing your private information — but don’

javascripter です。ハローでは、初期メンバーとしてプロダクトのローンチ前からAutoReserve の開発に関わっています。 前回の記事に引き続き、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 前回の記事については、こちらを参照下さい。 Reactベストプラクティス: react-hooks/exhaustive-de

個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert