[emotion]含む[openchakra]参考[https://engineering.mercari.com/blog/entry/20210823-a57631d32e/ メルカリShops のフロントエンド | メルカリエンジニアリング]

印象的なことをつらつらと書いていきます。[*** Work][** 仕事系振り返り]引き続きTSUKURUBA社で働いている。新卒入社3年目~4年目表彰

[Chakra UI]のv3へのupdateで、[Panda CSS]を利用せず、[style React]の利用検討してるらしいhttps://www.chakra-ui.com/blog/00-announcing-v3背景動的なものを静的に変えるのが大変っぽい。[style React]の方が[Chakra UI]の書き換えには合っているみたい。

[https://panda-css.com/ Panda CSS - Build modern websites using build time and type-safe CSS-in-JS][https://github.com/chakra-ui/panda chakra-ui/panda: 🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️]

https://web-study.connpass.com/event/321711/[*** エンジニア視点で見る、組織で運用されるデザインシステムにするには][スライド https://speakerdeck.com/shunya078/enziniashi-dian-dejian-ru-zu-zhi-deyun-yong-sarerudezainsisutemunisuruniha]デザインシステムの課題感と概要

[Chakra UI]の後継[zag.js]ベースのComponentライブラリ[https://github.com/chakra-ui/ark/discussions/1136 When to use this library over zagjs? · chakra-ui/ark · Discussion #1136]この質問と回答がわかりやすかった。> zagjs ではなくこのライブラリを使用するのはどのような場合ですか?

[Panda CSS]のの公式記事 https://www.adebayosegun.com/blog/panda-css-the-origin-story　を読むこのscrapboxは、大分省略しているので、あくまで自分の理解用に書いている。TODO: コンセプトキーワードはScrapbox化して利用するようにしたい。課題感[Chakra UI]における[WebPlatformApp Performance]の課題があった。

[Patterns panda]のRoadmap出たので、[https://www.adebayosegun.com/blog/panda-v1-roadmap Panda v1 Roadmap - Segun Adebayo]を読む概要Roadmapの出来たことと進行中roadmapどこかになかったけ？これ。[https://panda-css.canny.io/ Panda Feedback]

予め[UI Framework]によって定義された汎用的なスタイルクラスやプロパティを組み合わせて[UI]を構築する手法[コンポーネント指向]との相性が良い課題が解消された[inline styles インラインスタイル]風な記述ができる[inline stylesの従来の課題をUtility Firstな考えで解消]a

[Web front-end]の[Architecture アーキテクチャ]周りシステムに対する理解(What)既存システムの理解リアーキテクトするシステムに追加する要件技術に対する理解(How)

[Web Frontend Engineer Skills]周りの整理主に、近況で必要なもの、足りないもの周り整理したい↓のものある程度固まるとnotionへシンプルに直近で積みたいパターン(細かい論理0、直感的)フレームワーク

[Chakra UI]&[TypeScript]のレポジトリ見るメモ目的利用方法で参考になる所見つけるパターンの把握前提

[https://www.smashingmagazine.com/2022/05/you-dont-need-ui-framework/ You Don’t Need A UI Framework — Smashing Magazine]利用することへの反論や意見デザインをUI Frameworkに頼るな。コンポーネントを捻じ曲げることに時間をあまり費やすな...pros,cons、最適用途書かれている

[https://final-form.org/react React Final Form]他の[UI Framework]と使う[Chakra UI][https://final-form.org/docs/react-final-form/examples/chakra Final Form Docs – Chakra UI]code sandboxの一例しか無いから、もう少し資料欲しい

あくまで、[Web front-end]がメイン他の分野は深く突っ込まない[Engineer Base Skills][Backend Engineer Skills]TODO:そのうち、Web platform に変えるかも

[Chakra UI][dart sass][vue-svg-loader][SVG Scalable Vector Graphics][Slot スロット Vue]

主に、[Test テスト Testing]に使う、[モック Mock]データ作成メンドイので、[FactoryMethod ファクトリーメソッド パターン]の関数用意テストデータと精度本番データにどれだけ近づけるか？[types 型定義]を利用して自動化するのか？

[モック Mock][画像 Image]をある[デバイスモック]に載せられるやつ[https://app.shotsnapp.com/# shotsnapp - Create beautiful device mockup presentation]

[モック Mock][gif]をある[デバイスモック]に載せられるやつ[https://animockup.com/ Animockup — Free Animated Mockup Maker]

[JSON]の[モック Mock][API]ライブラリ[https://github.com/typicode/json-server typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)][*** 遅延]`json-server -d 1500 db.json`

[*# A dashboard to play around with the data in your box.][JSON][モック Mock]サーバー[https://jsonbox.io/dashboard.html?box=box_4885552b08c6fbdae391 jsonbox.io | HTTP based JSON storage][https://riotz.works/articles/lulzneko/2019/10/07/ideal-as-a-mock-server-of-webapi-jsonboxio/ Web API のモックサーバーとしても活躍、jsonbox.io | Articles | Riotz.works]