フロントエンド

UIコンポーネントにおけるInteraction StatesとState Layerの考察

この記事は Goodpatch Advent Calendar 9日目の記事です。アドベントカレンダー2つ目の記事をなんとか書くことができた大角です。 今回はインタラクティブなUIコンポーネントの状態変化において、一貫性を持ちながら、効率よく実装するために「Interaction …

エンジニアのためのデザイン4大原則

この記事はGoodpatch Advent Calendar 2022 の5日目の記事です。 こんにちは!エンジニアの藤井(@touyou_dev)です。先日宣言型UIフレームワークを比較してみたという記事を出したばかりですが、今年も昨年のアドベントカレンダー同様、2日目と5日目の二日…

宣言型UIフレームワークを比較してみた

この記事はGoodpatch Advent Calendar 2022の2日目の記事です。 こんにちは!エンジニアの藤井(@touyou_dev)です。今年もアドベントカレンダーの季節がやってきましたね 今年は特に気温が極端かつ変則的で、季節感が迷子な一年でしたが、それに負けず劣ら…

Node.js 19のwatchモードとBrowsersyncを組み合わせて試してみた

ソフトウェアエンジニアの池澤です。 Node.js v19.0.0が2022/10/18にリリースされました。 v19にはwatchモードがexperimental(実験的)版として備わっています。watchモードというのは開発中のディレクトリ内のファイルに変更があったら、自動でNode.jsを再…

HTML の適切な数字入力について調べてみた (type, inputmode, pattern)

適切な数字入力とは? 2022/7/25 更新 ・ 論点を明確にするために、この記事で扱う郵便番号の仕様を、7桁の数字 => 3桁 + 4桁の数字 に変更しました。 Design Div 所属フロントエンドエンジニアの上垣です。 Webサービスを作成するにあたり、フォーム周りのユ…

これから始めるReact Testing - ②カスタムフックのテスト

先日、同僚と京都にワーケーションに行きまして、京都の良さを改めて感じている大角です。 goodpatch-tech.hatenablog.com 前回はReact Componentのテストについて書きましたが、今回はカスタムフックのテストについて書きたいと思います。 React Component…

これから始めるReact Testing - ①React Componentのテスト

最近、韓国ドラマと個人開発に勤しんでいる大角です。 Webサービスを提供する上でテストを自動化するケースも多いと思いますが、今回はReact Testing Libraryを使った基本的なテストの書き方についてご紹介したいと思います。これからReactでユニットテスト…

タグ入力UIのパターンをまとめてみた

タグ入力UIについて、パターンをまとめ、それぞれのメリット・デメリットについての考察

普段よく見るテック系サイトは?

この記事は Goodpatch Advent Calendar 2021 4日目の記事です。 フロントエンドの池澤です。 今日は12月最初の土曜日、早いもので後4週間程で新年となりますが皆様いかがお過ごしでしょうか。 さて、今回は普段よく見るテック系サイトと題して、ITニュースや…

My Strap!! オンラインホワイトボードStrapをChrome機能拡張でカスタマイズしてみた

Goodpatchでフロントエンドエンジニアをしている池澤です。 この記事はGoodpatchが提供しているオンラインホワイトボードStrap について、Chrome機能拡張でカスタマイズしたお話です。 Strap はその直感的に分かる操作性と学習コストなく馴染めるUXが特徴の…