あけまして、おめでとうございます。神社のおみくじで、人生はじめて大吉を引きました、silverbirder です。 普段の業務で、FigmaのデザイントークンやAPIのスキーマファイル、i18nのメッセージファイルなどを、フロントエンドへ同期するコミュニケーション…

南紀白浜とれとれヴィレッジへ行ってきました 2022年の終わりに近づきました。今年の振り返りをしようと思います。 これは、自分のために書いていくので、文章の構造化とか不適当にやります。 仕事 今年の1月から、新しい職場で働き始めました。人生2回目の…

DAZN の Luca Mezzalira さんが書かれたマイクロフロントエンド を読みました。簡単な書籍レビューを残しておこうかなと思います。 なぜマイクロフロントエンドを使うのか 従来のモノリスなフロントエンドから、マイクロフロントエンドに置き換えることで、…

WikiWikiWeb というコンセプトが好きで、そのコンセプトが含まれている Obsidian や Scrapbox が好きです。Obsidian には、obsidian-git という Git 連携のプラグインがあります。こちらには、デスクトップだけでなく、モバイルからでも Git Commit できます…

GraphQL Guild ってご存知ですか？ GraphQL 界隈だと、Code Generator が有名と思いますが、GraphQL Guild は、それら GraphQL 関連の OSS を開発しているグループです。(詳しくは、こちら) GraphQL Guild のエコシステムって便利だな〜って感じたことがあっ…

スクレイピングしたいときって、あると思います。 Crawlee という OSS が便利だったので、共有します。 背景 スクレイピングしようと思うと、得意な言語でクローリングプログラムを書いて、html をスクレイピングすると思います。 私は、Node.js が得意なの…

vercel 製の turborepo という ビルドシステムが爆速なモノレポツールがあります。 爆速にする機能の 1 つに、リモートキャッシュというものがあります。 この機能は vercel のキャッシュサーバを使うのですが、キャッシュサーバをセルフホストする方法もあ…

Stable Diffusion は、文章を渡すと画像を生成してくれる AI で OSS です。 これを自分の PC で動かそうとすると、GPU が必要になります。 (CPU で動かせるstable_diffusion.openvino というのもあります) できれば、どの PC でも使えるように、かつ、Slack …

ERNIE-ViLG というのが、"二次元キャラ" に強いという記事を目にしました。 https://news.yahoo.co.jp/articles/fc688762207216b29ba33e64ca8e831e3181e9c0 実際に使ってみようと、次のページで試したんですが、レスポンスがイマイチでした。 https://huggin…

Midjourney や StableDiffusion を使っていると、どういうフレーズを使えばよいかわからなくなります。 そこで、フレーズ集を作って、Prompt で役立てたいなと思っています。 練習場 どこで Prompt の練習したら良いか悩むので、まとめておきました。 お勧め…

前々から気になっていた、CI/CD の非ベンダーロックインな Dagger というツールを試してみました。 本記事では、試した内容について共有しようと思います。 CI/CD のパイプラインを書く Dagger では、CUE という言語を使って CI/CD のパイプラインを書きます…

connect-web の記事が、はてブでトレンドになっていました。気になったので、試してみました。 サンプルコードは、次のリポジトリに置いています。 https://github.com/Silver-birder/playground/tree/main/node/connect-web-example/frontend 前置き: gRPC …

GraphQL クライアントを使っていると、データ取得後にデータ変換がしたくなりませんか。私はしたくなります。 GraphQL クライアントの urql で、データ変換するのに、exchanges が使えそうだったので、それを共有します。 サンプルコードは、次のリポジトリ…

GraphQL を業務で使い始めました。 いつものように、GraphQL の歴史が気になったので、調べてみました。 参考資料 https://www.youtube.com/watch?v=VjHWkBr3tjI GraphQL の共同開発者で、GraphQL Foundation エグゼクティブディレクターである Lee Byron さ…

JavaScript の標準機能 debugger を使って、デバッグをしましょう。 標準機能なので、React などのライブラリでも使えます。 Browser 次の HTML ファイルを Chrome で開きます。 <button>Button</button> <script> document.querySelector("button").addEventListener("click", () =></script>…

ブラウザのレンダリングエンジンにおけるレイアウトやペイントについて気になったので、調べました。 その内容をまとめます。レンダリングエンジンは、Chrome の Blink を題材とします。 レンダリングエンジンの処理工程 レンダリングエンジンの処理工程は、…

私は、これまでプライベートでしか React を使っていませんでした。 最近、業務で React を使う機会が増えたので、学んだことを残そうと思います。 React の歴史 なんで React って生まれたんだろうって気になりました。 簡単ですが、ちょこっとだけ調べて、…

Micro Frontends(以降、MFE)で組成するフラグメントを Web Components で定義して Module Federation で共有する方法を、ざっくり紹介します。 サンプルコードは、次のリポジトリにあります。 https://github.com/Silver-birder/playground/tree/main/node/w…

結論 iframe.contentWindow から twttr オブジェクトを見つけて、event.bind("rendered", () => {}) の第二引数に、表示処理を書くことです。 iframe.addEventListener("load", () => iframe.contentWindow.twttr.events.bind("rendered", () => iframe.setA…

次の 2 つの Web Components を作成しました。 https://www.webcomponents.org/element/Silver-birder/o-embed https://www.webcomponents.org/element/Silver-birder/ogp-me 背景 自分のブログで、埋め込みコンテンツを表示したいな〜って思ってました。 if…

WebComponents で、oEmbed コンポーネントを開発し、公開しました。 https://www.webcomponents.org/element/Silver-birder/o-embed https://www.npmjs.com/package/@silverbirder/o-embed 開発していく上で、学んだことを列挙しようと思います。 スターター…

2022 年 1 月より新しい職場で、はじめて Ruby on Rails(以下、Rails)を使うようになりました。 これまで、PHP の CakePHP、Node.js の Express、Python の Flask の経験がある私ですが、 Rails に、なかなか慣れない苦労がありました。ゆるく、言語化しよう…

React は、どうして生まれたのか歴史について簡単に紹介します。(ちょっと調べただけ) 背景 最近、React を学び始めました。その過程で、どうして React って学ぶべきなのか、どういう特徴があるのか気になった次第です。 歴史 言語やフレームワーク問わず、…

Web Components を人にお勧めしたいんです。メリット・デメリットをかんたんにまとめたいと思います。 Web Components is 何 https://www.webcomponents.org/specs より引用します。 Web components is a meta-specification made possible by four other sp…

2022年1月24日、オミクロン株に感染しました。知らないことが多かったので、分かったことを書こうと思います。 ※ あくまで、私が経験した内容であり、一般的な内容かどうかは、知りません。 結論 オミクロン株は、本当に感染しやすい (感染した)私 ワクチン2…

皆さん、Chrome拡張機能をご存知ですか？ Chrome拡張機能は、Chromeブラウザをカスタマイズするための機能です。 私は、Chrome拡張機能を過去(数年前)に2つ作っていて、その当時は、Chrome拡張機能の仕様であるManifest V2に従っていました。 そして、今再び…

Markdownでブログやドキュメントを書いていますか？ 執筆活動に集中したいのに、Markdownだけだとかゆいところに手が届かないもどかしさ、感じたことありませんか？ そんな方に、MarkdownとWebComponentsがシームレスに統合できる静的サイトジェネレータ(以…

2021年も、もう残りわずかになりました。今年も、振り返りをブログに残そうと思います。 技術 フルスタックエンジニアリング 今年は、業務でフルスタックな開発を多く経験できました。 昨年までは、Webアプリケーションの開発が多かったのですが、今年はクラ…

みなさん、ご自身のプロフィール画像ってどう管理していますか？例えば、zennのプロフィール画像って、更新していますか？ 私は、プロフィール画像の更新は面倒なので、放置することが多いです。(GravatarみたいなSaaSが使えたら良いのに...) 最近、自身のポ…

BigQuery、皆さん使っていますか？ 私は、業務でBigQueryを使ったデータ構築をしています。 品質担保のため、BigQueryのSQLに対してテストをしたいと考えています。 本記事では、BigQueryだけで完結し、かつ、Mockデータを差し替え可能なユニットテスト手法…