HTMLのアンカータグ(aタグ)でページの特定部分までスクロールしたら微調整が必要かもという話
aタグでページ内の特定部分へスクロールすると、固定ヘッダーの後ろにコンテンツが隠れてしまいます。JavaScriptで高さを引く代わりに、本来の要素より少し上に空のdivを置いてidを移すHTMLとCSSだけの解決策を紹介します。Vueならcssへの値バインドでコンポーネント化もできます。
HTMLのアンカータグ(aタグ)でページの特定部分までスクロールしたら微調整が必要かもという話
aタグでページ内の特定部分へスクロールすると、固定ヘッダーの後ろにコンテンツが隠れてしまいます。JavaScriptで高さを引く代わりに、本来の要素より少し上に空のdivを置いてidを移すHTMLとCSSだけの解決策を紹介します。Vueならcssへの値バインドでコンポーネント化もできます。
Vue Fes Japan 2023に参加し、VueとNuxtについて学んだこと
Vue Fes Japan 2023の参加レポートです。Evan You氏の基調講演から、Vue2からVue3への移行が大変だった反省点(破壊的変更の多さ、エコシステムへの影響の過小評価、段階的にリリースしなかったこと)と、TypeScriptフレンドリー化やComposition API導入といった成果を紹介します。
Box SDKを使って勤怠予定のSlack報告を自動化してみました
勤怠ルールの変更で、リーダーが毎週BoxのエクセルシートをスクショしてSlackで共有する運用になりました。Box SDKでファイルを取得し、必要な情報を抜き出して画像化し、Slackへ投稿してGitHub Actionsで自動実行するまでの実装を紹介します。トヨタフォントの適用も番外編として扱います。
SvelteKitをAWSにデプロイ - Svelte不定期連載-06
Svelte不定期連載の第6回は、SvelteKitのSSRアプリをAWSへデプロイします。adapter-nodeとExpressの設定から、EC2インスタンスの作成と接続、Node.jsのセットアップ、Nginxのプロキシパス設定、そしてpm2でNodeサーバーを永続化するまでを追います。
多国籍で英語がチームの共通語となっているフロントエンドチームのリーダーに就任して1年、その振り返りです。一人が複数プロダクトを担当する体制の中で果たしてきた役割と、ジュニアメンバーの育成、新しいフレームワークの学習、バックエンド領域への理解促進という気をつけたいことを語ります。
Vueでpropsとslotを使って再利用コンポーネントを開発する話
Vueで再利用可能なコンポーネントを作るとき、propsだけでは柔軟性が足りず、slotは自由度が高すぎて品質担保が難しくなります。タイトル付きテーブルを例に両者を比較し、どの部分にどこまで自由を与えるかを関係者と決めてから使い分けるという考え方を提案します。
世界共通のデザインシステム開発にStorybookを導入した
20か国以上に展開するKINTOで、国ごとに異なる開発体制の中で一貫したUI/UXを実現するため、デザインシステム開発にStorybookを導入しました。コンポーネントをStory単位で開発・管理する方法、ドキュメントの持たせ方、自社らしいUIへの調整、そしてライブラリ化という次の一手を紹介します。