個人ブログの開発する

[yanachuwan9sm]

以前の開発途中のブログを以下の要件を満たす状態で完成させる。

• Contentful で記事や画像を管理する事はやめて、mdxファイルでブログコンテンツを管理する。
• 静的ファイル（主に画像）はストレージサービスではなく一旦、Public配下にコンテンツ名と同じフォルダ名を引っ提げて、管理するようにする。
• 外部依存を減らしシンプルにする。（remark/rehype周りもmdxファイルなら処理はもっとシンプルに出来そう）
• CSSソリューションは、 CSS Modules -> Tailwind CSS に切り替える（マークアップとCSS はコロケーションの方がやりやすいと個人的には感じたから）
• ディレクトリ構成や各種設定周りは Next Way に乗っかる。（Vercel公式が出している Next Learn のレポジトリやベストプラクティスからは外れない）

（+α）

• メタデータを設定する
• OGP画像やfaviconを設定しておく
• aboutmeページ作っとく
• スマホからだとフォントが環境依存にもので、読み込めなかった。（別の方法を考えるべき）

[yanachuwan9sm]

Tips

シンプルisベストがいいよね

https://leerob.io/blog/2023 : Vercelの人の記事
CMS や Remark/Rehype をやめたよって記事。だってmdファイルとReactコンポーネントで解決できるやん？て事。

Flat Config調査

外部依存を減らしシンプルに 👉 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 とか）
👉 一旦、旧式の「ママ」

typescript-eslint/typescript-eslint#7694
vercel/next.js#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

[yanachuwan9sm]

ちょっと見直しに時間かけすぎてるので、仮説 -> 検証 の素早いサイクルを回して、分からない or 解決しない場合は 外部リソースに流す。

[yanachuwan9sm]

一旦Done
yanachuwan9sm/trash.97.me#116

[yanachuwan9sm]

📍タイポグラフィについての面白い記事も書いてる（知らない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) と異なっていたため。

rehype-pretty/rehype-pretty-code#127

[yanachuwan9sm]

📍 宇宙をcanvas2Dで再現する

昔のiMac + コズミックな First View にしたかったのでやってみる。
色々気づきも多かったので、忘れないうちに記事にする。

https://dev.to/eyudinkov/creating-the-effect-of-traveling-through-space-mfg

https://stackblitz.com/edit/twtsreact-tbcogp?file=README.md

[yanachuwan9sm]

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

https://developer.mozilla.org/ja/docs/Web/API/WebGL_API

https://webglfundamentals.org/webgl/lessons/ja/

[yanachuwan9sm]

これ毎回忘れるから家の壁にでも貼っとくわ。

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アイテムを伸ばすために使うことが多いよね。

[yanachuwan9sm]

ローカルフォントが iOS / Safari のみ表示されないバグ調査中

https://stackoverflow.com/questions/77506094/custom-local-font-not-applying-in-safari-or-ios-device-but-works-on-chrome-firef

https://developer.apple.com/forums/thread/671608

https://note.com/onopko/n/n804e69b0ac96

[yanachuwan9sm]

これローカルフォント2つ使ってて、片方は iOS/Safari でも動くんだよな〜、、、
next/font でも webkit でもなくローカルフォントが悪い説ある。
画像でも配布されてるけど、全部使うとなると 4MB。重いな〜〜〜。別の方法を考えたい。
https://github.com/SerenityOS/serenity/tree/master/Base/res/emoji