発行
第一回目はカンファレンスの概要とともに、会期中のサンフランシスコの様子や、Netlifyへの訪問をレポートします。
最終回は、これまでのサイト、Webアプリケーション開発のアーキテクチャの歴史を踏まえつつ、JAMstackを使うメリットをまとめます。フロントエンド・エンジニアとの親和性が高く、アドバンテージがあることがわかります。
特定の要素のサイズ変更を監視するAPI、Resize Observer APIを解説します。特定要素のサイズの変更によって、なんらかの処理を行いたい場合に使用できるAPIです。
発行
「何かを配置して、配置上で操作する」という特殊なUIにおいて、今回は拡大／縮小の基本的な動作の実装を行います。
後編ではスナップショットテストの運用について解説します。そもそもどのようなケースがスナップショットテストに向いているか、テストの留意点などを述べます。
後編では、デザイナーがフロントエンド・エンジニアとデータを共有して、コミュニケーションする場面での変化を紹介します。また、使ってわかった課題から、デザインツールに求めたい要件も見えてきました。
発行
Jestのマッチャーを用いてスナップショットテストを行う方法を解説します。前編では、テスト環境の導入と、テストの実施方法について解説します。
yarn workspaceの働きに焦点をあてて、yarn workspaceをどのように使っていくかを紹介します。yarn workspaceが気を効かせてくれている点や、少し不都合な部分などを理解し、この開発手法の使い分けを考えてみましょう。
Adobe IllustratorからFigmaへデザイン作成ツールを切り替えた筆者が、切り替え後の運用の変化とメリット、デメリットを書き下ろしました。前半はツールを切り替えたことで、従来のデータ作成とどのような違いが生まれたかを紹介します。
発行
「何かを配置して、配置上で操作する」という、少々特殊なUIの作成を紹介します。まずはオブジェクトを配置し、ドラッグによって移動できるところまでを実装してみましょう。
近年はCSS GridやFlexboxなどでレイアウトを行うことが多く、レイアウトのためにFloatを使うことは少ないかもしれません。しかし、Floatを理解することはCSSで行うレイアウトの重要な知識の理解につながります。
ここ1年ほどのCodeGridで公開されたシリーズの中から、「お気に入り」をした人が多かった10シリーズを紹介します。ふだん使わない技術でも、人気のあるシリーズをのぞいてみると新たな世界が広がるかもしれません。