カテゴリー「技術」の記事一覧
- eslint-plugin-importによってVitestの設定ファイル上でエラーが発生する場合がある
vitest と eslint-plugin-import に依存している環境では、vitest.config.ts内で vitest/config をインポートすると Unable to resolve path to module 'vitest/config'. eslint(import/no-unresolved) というエラーが出る場合があります。
- Next.js + Vercel + microCMSなどを使ってほぼ無料でブログを運用する
当ブログのシステム構成について紹介します。構成を真似することでほぼ無料（後述）でブログを運営できます。
- ブログ記事を投稿するためのフォームを作った
はてなブログのMarkdownによる記事編集画面やesa - 自律的なチームのための情報共有サービスのように、本文の編集画面とリアルタイムプレビューが横並びになるような投稿フォームが個人的に好みです。
- ファミリーマート公式Twitterのツイートからより良い画像の代替テキスト(alt)を考える
ファミリーマートの公式Twitterのツイートに、画像の代替テキストを改善できそうなツイートがありました。
- ブログを国際化対応した
当ブログのUIで使う文言を国際化対応しました。
- AVA上でsinon.useFakeTimers()を複数のテスト内で実行するとエラーが出る
最近Sinon.JSのバージョンをv14.0.0に上げたときに、エラーが出てテスト実行が失敗するようになりました。
- 自分がアクセシビリティ向上に力を入れる理由
いま自分は、担当サービスのアクセシビリティ向上を推進する「アクセシビリティタスクフォース」を率いる立場になっています（アクセシビリティタスクフォースについては AbemaTV ABEMA iOS版アプリのアクセシビリティ向上支援 ｜ 事例紹介 ｜ 株式会社コンセント で少し触れられています）。
- Twitterの右側サイドバーを消す
Twitter のトレンドを見ると、イラつきを覚えるようになりました。そんなにイラつきを覚えるようなら見なければいいし、そもそも Twitter やめろという話はあります。
- PreactとTypeScriptを使った環境でStorybookを使う方法
Preact と TypeScript を使った環境で Storybook を使おうとしたら以下のエラーが出ました。
- WindowsでもmacOSのようなキー操作を実現する
前から macOS のように Windows でも Ctrl キーを使ったカーソル移動をおこないたいと思っていました。
- ブログの記事管理をContentfulからGitリポジトリに変更した
このブログは最初はてなブログで書いていて、1 年前にこっそり Next.js + Contentful という仕組みに変えて運用していた。
- WSL上のChromiumでPDF出力をする
Windows Subsystem for Linux(WSL)上で Headless Chrome を使って、PDF 出力をしてみました。
- TypeScriptでsetInterval()の型が合わない理由と解決方法
@types/node に依存した状態で以下のようなコードを書いたときに Type 'Timer' is not assignable to type 'number'. というエラーメッセージが出ます。
- Atomic Designを実案件に導入して運用してみた結果はどうなのか
かつてAtomic Design の考え方と利点・欠点という記事を書きました。
- CSSを破綻させない
12/3（土）にCSS を破綻させないという内容をbuilderscon tokyo 2016で話しました。
- Atomic Designの考え方と利点・欠点
Atomic Design はデザインシステムを作る方法論となります。
- Chromium のチャンネル間で変更された点を確認する方法
とある事情により、Chromium の stable と beta チャンネル間で変更された点から、バグが直されたコミットがどれなのか確認する必要に迫られました。
- Nicoのこれまでとこれから
Bootstrap Advent Calendar 2015 8日目の記事です。
- なぜ CSS や Grunt はつらいと言われるのか
少し主語を大きく書いてしまいましたが、\*.css と gruntfile.js についての話です。
- fs.exists()がdeprecatedになった理由
wearefractal/vinyl-fs の dest(folder, \[opt]) が出力先のディレクトリが無い場合でも、そのディレクトリを作ってくれないということで、自分で「ディレクトリの有無を確認して、無い場合はディレクトリを作る」という処理を作る必要がでてきました。
- MindBEMding の Modifier は元のクラス名と一緒に指定するべきか否か
MindBEMding の Modifier を定義する際、単一のクラスセレクタで書く方法と、複数のクラスセレクタで書く方法があると思います。
- GitHub の Contributions を Ingress の Resistance 色にする Chrome 拡張を作った
GitHub の Contributions を眺めていて「これって Enlightened の色だよね」と思ったので、Resistance の色に置き換えるような Chrome 拡張を作ってみました。
- 編集しやすいCSSにするために自分が心がけている事
CSS は、書くのが怖いと自分は感じます。
- background-imageは仕様上アニメーションを適用できない
CSSで @keyframes に background-image プロパティを指定してクロスフェード効果で背景画像の表示が切り替わるという動作を実装しようとしました。
- 神獄のヴァルハラゲートの CSS 設計
CSS Architecture Advent Calendar 2014 9 日目の記事になります。
- カラーコードを正規表現を使って判定する
カラーコードを判定するための正規表現を書きました。