search

yanachuwan9sm / til

Today's I Learned for me.
0 stars 0 forks source link

個人ブログの開発する #7

Closed yanachuwan9sm closed 8 months ago

yanachuwan9sm commented 9 months ago

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

（+α）

yanachuwan9sm commented 9 months ago

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 とか） 👉 一旦、旧式の「ママ」

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

yanachuwan9sm commented 9 months ago

memo-badge

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

yanachuwan9sm commented 8 months ago

一旦Done https://github.com/yanachuwan9sm/trash.97.me/pull/116

yanachuwan9sm commented 8 months ago

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

https://github.com/atomiks/rehype-pretty-code/issues/127

yanachuwan9sm commented 8 months ago

📍 宇宙を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 commented 8 months ago

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 commented 8 months ago

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

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 commented 8 months ago

ローカルフォントが 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 commented 8 months ago

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