この OGP は "Draw open graph protocol by AI." っていう言葉で作った OGP だ。graph に引っ張られすぎだろ... ブログの OGP このブログの入稿は のようにフォルダに visual.png という名前でフォルダに保存して、 --- path: /draw-ogp-by-ai created: "2022-08-24" title: OGP の生成をAIですれば楽な気がしてきた visual: "./visual.png" tags: ["OGP"] userId: sadnessOjisan isFavorite: false isProtect: false --- の visual でパスを visual.png に指定すれば適用できるようになっている。 なので日頃は ユーモア ある画像を入稿するようにしている。 が、最近はそれがめんど

で使えるようになる。 詳しくは https://vim-jp.org/vimdoc-ja/pi_netrw.html なぜ netrw を使っているのか 一言で言うと、公式や標準以外のものが嫌いだからです。とはいえ「特に Vim においてはプリセットなものをそのまま使うのは不便なのでは」という指摘はあるだろうし、事実そうです。なので今日はそれを使いやすくするための設定をしていきます。 使いやすい設定とは NERDTree が使いやすかった 自分が一番使いやすいファイラは VSCode のもので、ファイル操作、ペインの表出管理が気に入っています。 VSCode の体験を提供してくれたものがNERDTree でした。 ctrl + t でペイン表示を切り替えたり、ツリーの移動も直感的にしやすく、ファイル操作もできました。 netrw 標準だと何が使いにくいか 一方で素の netrw だとそうい

OGP はリコリス・リコイル４話的な何かです。語感的にもはや何の繋がりもないのですが、前に書いたCake Pattern で DI してみた 繋がりで仕方なくこうなっています。 はじめに 先日 Cake Pattern を紹介しました。これは constructor injection に頼らない DI の方法です。 Scala であれば、その本質は自己型アノテーションで、 継承元の trait を自己型アノテーションに指定しておけば、その trait を実装やテストごとに差し替えられることができて、DI が可能になるというものです。 前に scala を使ったのは原点から学びたかったためです。いきなり Rust で学ぶと難しかったからです。今日は Cake Pattern をある程度理解しているので、Rust でやっていきます。と、思いきや「実は Cake Pattern 使わなくていい

OGP はリコリス・リコイル４話的な何かです。 はじめに Cake Pattern という DI の方法があります。普通 DI というと Constructor Injection だとは思いますが、Rust のような constructor がない言語だと依存を注入するのが難しかったり、ライフタイムや所有権の制約で難しい場面があったりします。そのようなとき、Cake Pattern と呼ばれる方法があることを知りました。これは Scala が発祥のテクニックで、構造がケーキのように水平に何段にも重ねたようにも、垂直にきりだしたようにもみえるのでそのように名付けられたもの とのことです。 具体的には、 trait ConfigurationComponent { val configuration: Configuration } trait AComponent { this: Conf

そろそろブログの依存ライブラリが古くなってきたので更新を考えていて、そのときについでにそもそも作り直すかということを検討していた。 で、2022 年における SSG FW は何が良いかと調べていたところ、結局 Gatsby を選ぶことになりそうなので、自分の要望や調べたことについて書いておく。 ちなみに現時点での選択肢は、Gatsby, Next, Astro, 11ty だ。 SSG を前提 まずブログは静的サイトとしてホスティングしたい。これは SSR させると Node を動かすプロセスが必要となり、コストが嵩むし TTFB 的にもよくないからである。Vercel を使えば TTFB 対策の CDN 込みでコスト面では許容範囲かもしれないが、料金プランの改定はいつあってもおかしくないと思っているので、依存したくはなかった。静的ホスティング一択である。 tsx を使いたい 自分が思う最

Rust でモザイク加工を実装し、それを WebAssembly として Web アプリから利用する2022-07-11 Twitter のアイコンが本人とかなり乖離してきたため、職場の人に「え、誰ですか？」と言われることが多々あり、そろそろアイコンを変えようかなと思っていました。でもアイコンを変えると認識できなくなると思ったので、少しずつアイコンにモザイクをかけていこうと思い、モザイクツールを自作していました。自作しなくても既存のツールがあるのではと思うかもしれませんが、車輪は再発明するものなので再発明しました。ただ車輪の再発明とは言っても、Wasm で動作（=クライアントで加工してくれるからサーバーに送らなくていいし Web で使える）という点では比較的新しい車輪の再発明な気がしています。 それがこの umie です。ファイル選択して送信するとこのようにモザイクをかけられます。 ちなみ

Windows terminal からも消えた。 Qiita の記事などによると、設定からアンインストールできるが、Windows Terminal から指定できたり、中のファイルが残っていてうまくいかなかったので、先のコマンドで消した。（この記事を書く前にも D ドライブに入れる実験とかしていた影響かもしれない） wsl install install できるディストリビューションを調べる > wsl --list --onlin NAME FRIENDLY NAME Ubuntu Ubuntu Debian Debian GNU/Linux kali-linux Kali Linux Rolling openSUSE-42 openSUSE Leap 42 SLES-12 SUSE Linux Enterprise Server v12 Ubuntu-16.04 Ubuntu 16.0

少し前に婚活をしていてまして、そのご報告ブログを書きました。(https://gohoukoku.ojisan.dev) 今日はこれをどう作ったかについて書きます。 なぜご報告ブログを書いたか つい最近までマッチングアプリをしていました。 嬉しいことに僕の誕生日を祝ってくれた人たちがいまして、その人たちから Pairs 代をもらったことがきっかけです。 ただ投資を受けたからには投資家への説明責任が発生するので、そのためにご報告ブログを書きました。 どのようなブログを書いたか ご報告ブログを書くにしても、投資家には何か優待が必要になると思いましたので、投資家の方々にしか見れないような仕組みを作りたくなりました。いろいろ検討した結果、 uhyo さんの職務経歴書を思い出したのでそのフォーマットに乗りました。 ただ、そのままパクるだけであれば芸がないので、黒塗りブログ界での最速を目指すこととしま

毎年無限スクロールの実装をしているのだが正直なところ実装したくないので依頼されたときの反論材料として実装したくない理由を言語化しておこうと思う。 無限スクロールとは 無限スクロールが何を指すかを知らない人のために解説すると、ページにコンテンツを足す方式でページネーションする UI を指している。例えば Twitter のように下にどんどんコンテンツが伸びていく UI が良い例だろう。そのような UI を無限スクロールと呼ぶことが正式なのかは知らないが、このような体験の実現を支援するライブラリに infinite-scroll というものがあり、少しは普及している呼び方なのだと思い無限スクロールという言葉を使う。一方で WEB フロントエンド文脈で無限スクロールと言うと複雑 GUI やドローイングツール実装における "無限平面" のようなニュアンスもあるが、今は無限平面のことを指しているわけ

いろいろ教えてもらったので修正中 昔、基本情報処理試験の教科書や 「プログラムはなぜ動くのか」 で、「プログラムは、CPU がスタックとヒープに書き込み・読み込みながら動く」みたいなことを習った記憶があります。 先週末これが本当なのか気になってCompiler Explorerという面白いサイトを教えてもらったこともありアセンブリの解読をしていたのですが、なぜかうまく stack が使われないケースばかり出会いました。 そこで stack に積ませるための試行錯誤します。 言語は Rust を選択し、アセンブリは Compiler Explorer で確認します。 スタックを使う スタックはなぜプログラムの実行に必要なのか これは関数呼び出しのときに、引数を呼び出し先から取り出せるようにするため、処理を呼び出し元に戻すために必要となります。スタックに積んでおけばスタックから取り出すだけで（

プログラミングに関することで偶然見つけたり教えてもらったことのうち、面白かったものランキングです。 みんなも自分のお気に入りを教えてね。 第 3 位: Jeff Dean 伝説 Qiita のこの記事を読んだ時めちゃくちゃ笑いました。 FYI: https://qiita.com/umegaya/items/ef69461d6f4967d5c623 Jeff Dean とは、 Google の Senior Fellow. Google の基盤となる分散システムのほぼ全てに中心的に関わり、圧倒的なエンジニアリング能力を発揮したらしい。あまりにも尊敬されているため、IT 業界において全盛期のイチロー伝説のような破天荒なホラ話のネタにされている人。 とのことです。 特に面白かったのは、 Jeff Dean にとっては NP は"No Problem"をあらわす。 Jeff Dean は抽象クラ

分かってしまえば簡単な話ではあるがいろいろ回り道をしたのでメモ。 この辺の設定は偉大なる先輩方や同僚方にすでにしてもらっていることもあってよく分かっていない。 事実、Gatsby の DSG を Fastly で実現する を書いたときは分かっていなかったので設定できていなかったりもする。 ドメインの追加をする Fastly の設定画面にドメインを追加する導線がある。 なのでまずはここにドメインを登録すればいい。 ただ自分の持っているドメインと紐づけるのであれば、そのドメインに対して CNAME を設定する必要がある。 その値は何であろうか。 Adding CNAME records を確認してみよう。 "Non-TLS hostnames and limiting traffic" の節を読むと、HTTP しかサポートしない場合であれば nonssl.global.fastly.net.

next-nest-ng っていうとても紛らわしい URL になってしまいましたが、今日話したいことはずばりそれです。 結論: 理由が完全には分からなかった(追記修正: 理由わかった。) が、ちゃんと HTML は書きましょう。 ある日、 Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server.

この記事はもしかしたら誤りを含むかもしれません。 今週ツイッター眺めてたら色んな人が javy のリンクを共有していて、なんじゃこれ？と思ったのでそのまとめ。 FYI: https://github.com/Shopify/javy javy は Run your JavaScript on WebAssembly. と説明されていて、要するに JS を wasm で実行するものである。ただこのモチベーションなどがよく分からなかったので、wasm とは何かということから周辺知識をおさらいしつつ javy を理解しようとしてみる。 wasm とは こういうのは MDN を見る WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマンス向上を提供する新しい種類のコードです。基本的に直接記述ではなく、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル