Closed yanachuwan9sm closed 8 months ago
https://leerob.io/blog/2023 : Vercelの人の記事 CMS や Remark/Rehype をやめたよって記事。だってmdファイルとReactコンポーネントで解決できるやん?て事。
外部依存を減らしシンプルに 👉 ESLintを見直すことにする。
Flat Configに移行作業するにあたって、確かに従来の書き方だと結局どのようなconfigファイルになってるのかわかりづらいと思った。👉 実際に適応されるruleに関しては npx eslint --print-config ./xxx.tsx > text.txt
すれば、lint実行時の最終的なconfigは出力してくれる。
v9から Flat Config の方が デフォルトに変わるとは言いつつも、そもそも Flat Config をサポートするプラグインが充実してる訳ではないと学んだ。(typescript-eslint や eslint-config-next とか) 👉 一旦、旧式の「ママ」
https://github.com/typescript-eslint/typescript-eslint/issues/7694 https://github.com/vercel/next.js/issues/58411
https://t28.dev/blog/eslintrc-flat-compat-behavior/ https://robert-isaac.medium.com/migrate-eslint-to-the-new-flat-configuration-c7dc7b51266a https://zenn.dev/babel/articles/eslint-flat-config-for-babel https://zenn.dev/hrsh7th/articles/a1b7112ffd8c23
ちょっと見直しに時間かけすぎてるので、仮説 -> 検証 の素早いサイクルを回して、分からない or 解決しない場合は 外部リソースに流す。
📍タイポグラフィについての面白い記事も書いてる(知らないCSSプロパティばかり)
https://paper.dropbox.com/doc/CSS-wPD007Sd9dSeEDLP78jri
📍 Tailwind のプラグインって意外と簡単に作れるんやね。
https://tailwindcss.com/docs/plugins
https://gihyo.jp/article/2023/07/tailwindcss-practice-03#gh8VurQS0J
Tailwindで実装されてる標準のユーティリティのコード。プラグイン作る際に参考になるかも????
https://github.com/tailwindlabs/tailwindcss/blob/master/src/corePlugins.js
📍 rehype-pretty-code が動かない。
最新の rehype-pretty-code内部で使ってるunifiedの推奨version (11) が、 next-mdx-remote で使っている unified の依存バージョン (10) と異なっていたため。
📍 宇宙をcanvas2Dで再現する
昔のiMac + コズミックな First View にしたかったのでやってみる。 色々気づきも多かったので、忘れないうちに記事にする。
https://dev.to/eyudinkov/creating-the-effect-of-traveling-through-space-mfg
CanvasAPI (CanvasRenderingContext2D) -> https://developer.mozilla.org/ja/docs/Web/API/Canvas_API
WebGL API (WebGLRenderingContext)-> OpenGL ES 2.0 ベースの API で、GPUを用いて 2D や 3D アニメーションを 要素に描画する。 WebGL 2 API(WebGL2RenderingContext) -> OpenGL ES 3.0 の機能セットの大部分に対応
WebGL のプログラム -> JavaScript で記述する制御コード + GPUで実行されるシェーダーコード (GLSL) で構成される。
Canvas(2D) or WebGL(ライブラリなし)-> 奥行きを考えると、GUI使って高速で3D表現もできるWebGL?(スマホだとカクカクするかも、、?) 👉 外部依存はなるべく増やしたくないので、Three.js とかは採用しない。(ただ、WebGLでするなら採用する)
https://github.com/toji/gl-matrix 行列計算が必要なので gl-matrix
これ毎回忘れるから家の壁にでも貼っとくわ。
flex-grow (初期値 0) 親要素のflexコンテナの余っているスペースを子要素のflexアイテムに分配してflexアイテムを伸ばすプロパティ。 flex-growの数だけ、比率で計算する形。 とりあえず、余った幅分を [* 伸ばす] プロパティ。
flex-shrink (初期値 1) flexコンテナ内ではみ出した分をきっちり収まるように縮めるプロパティ
flex-basis(初期値 auto) flexアイテムの基準(初期サイズ)となる幅を設定するプロパティ。min-width的なやつ。 Auto -> コンテンツの大きさ(幅 or 高さ)に依存する。
flex: auto(1 1 auto)->. flexアイテムのサイズはコンテンツに基づいて決定する。 flex: 1 (1 1 0) -> flexアイテムを伸ばすために使うことが多いよね。
これローカルフォント2つ使ってて、片方は iOS/Safari でも動くんだよな〜、、、 next/font でも webkit でもなくローカルフォントが悪い説ある。 画像でも配布されてるけど、全部使うとなると 4MB。重いな〜〜〜。別の方法を考えたい。 https://github.com/SerenityOS/serenity/tree/master/Base/res/emoji
以前の開発途中のブログを以下の要件を満たす状態で完成させる。
(+α)