Tag
フロントエンド
アクセシビリティカンファレンス福岡 参加メモ
福岡で開催されたアクセシビリティカンファレンスの参加して聞いた発表内容のメモ書きです。
- フロントエンド
- a11y
Playwrightでビジュアルリグレッションテストを導入して安全にCSSライブラリを置き換える
今回は自分のプルリクエストを自分でレビューをするメリットについて話をしたいと思います。
- フロントエンド
- テスト
Reactでフォーカス中にのみ表示される要素をChromeのdevtoolsでデバッグする
フォーカス中にのみ表示されるDOM要素をChromeのdevtoolsでデバッグする方法について解説します
- フロントエンド
Reactのプロダクトにmarkuplintを導入する
ISUCON11に参加した記録です
- フロントエンド
- React
個人ブログのアクセシビリティー・チェックと改善を実践してみた
freeeさんが公開しているアクセシビリティー・チェックリストを活用して個人のブログのアクセシビリティーをチェックして改善をしてみました。
- フロントエンド
- アクセシビリティ
Reactのパフォーマンス改善を体験できる練習問題を作ってみた
業務でReactのパフォーマンス改善をする機会があったので問題を一般化して練習問題を作ってみました
- フロントエンド
- React
- パフォーマンス
アクセシビリティを考慮してチェックボックスのデザインを変更する
アクセシビリティを考慮したカスタムなCheckboxを実装する方法です。
- フロントエンド
- テスト
mswをラップした便利関数をつくる
mswをラップして便利なutil関数を実装します。
- フロントエンド
- テスト
Node.js18の環境でmswを使ったらハマった話
Node.js18の環境でmswを使った時にネットワークをインターセプトできない問題にハマった話です
- フロントエンド
- テスト
バグ修正から始めるフロントエンドのTDD入門
この記事は YAMAP エンジニア Advent Calendar 2021 の22日目の記事です。現在、輪読会で「テスト駆動開発」（TDD）を読み進めています。本を読んで色々と知識が入ってきているので、業務でアウトプットしてみたいなと思い、バグ修正からTDDを初めてみたら良かったので紹介します。
- フロントエンド
- テスト
僕がフロントエンドのコードレビューをする時に意識していること
この記事はYAMAP エンジニア Advent Calendar 2021 の10日目の記事です。コードレビュー難しいですよね。今年で6年目になりますが未だにコードレビューが出来ると胸を張って言うことができません。予定よりも時間をかけてしまったり、そこまで指摘しなくても良かったなーという点を細かくレビューしてしまったり、逆に指摘すべき箇所を見逃してしまったりします。
- フロントエンド
コンポーネントの入力と出力を意識してユニットテストを書いてみよう
初めてフロントエンドでコンポーネントのユニットテストを書く時に「何をテストするのか」が分からず、上手くテストが書けないという事があります。この記事ではコンポーネントの入力と出力を意識することでユニットテストで「何をテストするか」について、まとめています。
- React
- フロントエンド
- テスト
複数行テキストの省略と-webkit-boxについて
複数行テキストの省略時に使用される-webkit-boxについて簡単に調べました。
- フロントエンド
- css
iOS端末でのフォームの拡大表示に対応する
iOS端末でフォームの入力要素にフォーカスした時に発生する自動拡大への対応策をまとめています。
- フロントエンド
ESLintをちゃんと理解する
ESLintは毎回プロジェクト開始の最初だけ設定して、その後あまり触ることが無く毎回なんとなくで設定して、新しく設定する時に設定項目を忘れてしまう事が多いので、各設定項目や導入プラグインの目的をちゃんと理解したいと思い、まとめました。
- フロントエンド
Next.jsで作ったブログのパフォーマンス改善
年末年始にこの技術ブログを GatsbyJS から Next.js にリプレースを行っていました。レプレースを実施した結果、Lighthouseのパフォーマンス結果が低下してしまったので、原因の調査と改善を実施しました。
- フロントエンド
- Next.js
- パフォーマンス
WebAssemblyでオセロを作った話
WebAssemblyの速度を体感するために、WebAssemblyでオセロのゲームアルゴリズムを実装しました
- フロントエンド
GatsbyJSで認証サイトを実装する
GatsbyJSで認証サイトを実装するチュートリアルをやった時のまとめです。
- フロントエンド
- GatsbyJS
Material-UI + webpack のアイコン読み込みでハマった
Mateial-UI + webpack の環境でアイコンのパッケージ読み込み方法がビルド時間に影響する問題について紹介しています。
- フロントエンド
Next.jsでStorageオブジェクトを使う
Next.jsでブラウザの Storage オブジェクト を使う時の対応策をまとめています。
- フロントエンド
- React
- Next.js
JavaScriptで小数点の桁数を指定してフォーマット表示
JavaScriptで小数点の桁数を指定してフォーマットする方法です。
- フロントエンド
フォーム実装にformタグを使うかdivタグを使うか
フォーム実装にformタグを使うかdivタグを使うか
- フロントエンド
Rustの所有権と借用を理解する
Rustの所有権と借用を理解する
- フロントエンド
- Rust
WebセキュリティのためのHTTPレスポンスヘッダー
WebセキュリティのためのHTTPレスポンスヘッダー
- フロントエンド
- セキュリティ
Gatsby製のブログにGoogleタグマネージャー経由でGoogleアナリティクスを導入する
Gatsby製のブログにGoogleタグマネージャー経由でGoogleアナリティクスを導入する
- フロントエンド
- GatsbyJS
gatsby-starter-blogでコードのシンタックスハイライトを設定
gatsby-starter-blogでコードのシンタックスハイライトを設定
- フロントエンド
- GatsbyJS
GatsbyJS + Netlify CMS でエンジニアブログを立ち上げる
GatsbyJS + Netlify CMS でエンジニアブログを立ち上げる
- フロントエンド
- GatsbyJS