azukiazusa のテックブログ2
Storybook の interaction testing と jest を組み合わせる
Storybook の Component Story Format 3.0 では新機能として `play()` 関数が追加されました。 `play()` 関数は Storybook 上で ユーザーのクリックやフォーム入力のようなインタラ
すべて
azukiazusa のテックブログ2
Vite だと require() が使えないよ〜
皆様はすでにプロジェクトに Vite は導入されていらっしゃいますでしょうか？私はできていません。 Vite はフロントエンドのビルディングツールであり、従来の Webpack 等と比較して高速に動作するといった特徴があります。Vue.j
azukiazusa のテックブログ2
フロントエンドのテストのモックには msw を使うのが最近の流行りらしい
最近のテスト手法として API コールをモックする際に Jest ではなく [Mock Service Worker](https://mswjs.io/) (以下 `msw` ）を使用する手法が注目されています。実施にどのように使用されて
blog.jxck.io
画像最適化戦略 AVIF 編
本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい AVIF 形式を提供し、対応ブラウザに配信するようにした。フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。画像最
azukiazusa のテックブログ2
【Vue.js】ref vs reactive
さて、そんな Compositon API ですがリアクティブなデータを定義する際に `reactive` と `ref` の2つの方法が用意されています。 `reactive` と `ref` どちらを使用するのがよいのか公式からも推奨す
blog.jxck.io
2021 年をふりかえる
例年通り 2021 年を振り返る。
azukiazusa のテックブログ2
Vitest と呼ばれるテスティングフレームワークがめちゃくちゃ早いらしいな
Vitest は Vite ベースの JavaScript のテスティングフレームワークです。
azukiazusa のテックブログ2
Vuetify 3 Alpha の主な変更点
[Vuetify](https://vuetifyjs.com/) は Vue.js で多く使われている UI コンポーネントです。現在のバージョンは Vue 3 には対応していません。 現在 Vue 3 に対応する Alpha 版の V
azukiazusa のテックブログ2
Nuxt3 の新しい機能いろいろ
現在 Nuxt.js は バージョン3がパブリックベータ版として提供されています。 Nuxt.js が 2 → 3 に移行するにあたってたくさんの新機能が追加されました。
blog.jxck.io
Web のセマンティクスにおける Push と Pull
筆者は、Web のセマンティクスに対する実装の方針として、大きく Push 型の実装 と Pull 型の実装 があると考えている。もっと言えば、それは実装方法という具体的な話よりも、開発者のセマンティクスに対する態度を表現することができる。
azukiazusa のテックブログ2
CSS で印刷用のスタイルを設定できる
大抵のブラウザでは Web ページを印刷することができます。 しかし Web ページをそのまま印刷しようとすると改ページがおかしくなったりレイアウトがおかしくなってしまうことがあるでしょう。そもそも Web ページはディスプレイで表示するこ
blog.jxck.io
自作 Markdown プロセッサベースの blog.jxck.io v2 リリース
本サイトは自作の Markdown ビルダを使っていたが、色々と気に食わない部分があったのでフルスクラッチで作り直し、それにともなってサイトの刷新を実施した。必要だった要件や、意思決定を作業ログとして記す。
azukiazusa のテックブログ2
フォーカストラップとは? 〜アクセシブルなモーダル〜
フォーカストラップ(またはループ)とは、ウェブページをキーボードで操作する際にフォーカスをとある領域からはみ出さないようにすることです。フォーカス可能な要素を抽出してその中をループすることで実現ができます。 登場シーンとしてはモーダルで使
azukiazusa のテックブログ2
Webpack5 Module Federation ではじめるマイクロフロントエンド
Webpack5 の Module Federation を使用してマイクロフロントエンドを作成します。
azukiazusa のテックブログ2
Youtube すごい裏ワザ！！！
Tab キーでページを操作した時のみ表示される「ナビゲーションをスキップ」は一般にスキップリンクと呼ばれるものであり、ウェブアクセシビリティのガイドライン (W3C 勧告) である WCAG 2.0にあるブロックスキップと呼ばれる達成基準を
azukiazusa のテックブログ2
npm の人気パッケージ 「coa」と「rc」にマルウェアが埋め込まれた
2021/11/5 npm パッケージ 「coa」と「rc」がハイジャックされ、パスワードを盗むマルウェアが埋め込まれました。現在の時点では問題のあったバージョンはすべて取り除かれています。
azukiazusa のテックブログ2
ボックスモデル
CSS にはボックスという概念があります。ブラウザは文書をレイアウトする際に、それぞれの要素を CSS のボックスモデルに基づいた長方形の箱（ボックス）として表現します。つまりは、HTMLの個々の要素はすべてボックスにからできており、それら
azukiazusa のテックブログ2
【TypeScript】type-challenges 中級編
[type-challengs](https://github.com/type-challenges/type-challenges) の medium レベルをやります。
blog.jxck.io
ABNF Parser の実装
IETF の RFC では ABNF 形式の表現がよく使われ、たまに実装することがある。しかし、実装するたびに前のコードを引っ張り出して思い出す、を繰り返しているので、自分用にメモとしてやり方をまとめる。完全に我流であり、目的は「その AB
azukiazusa のテックブログ2
【TypeScript】type-challenges で学ぶ高度な型
type-challengesを知っていますか？ これは TypeScript の型についての問題集で、問題文の条件を満たす独自のユーティリティ型を作るチャレンジです。いわゆる「型パズル」ってやつですね。 問題の回答はPlaygroun