Nuxt.js の Sitemap Module を SSR 環境下で利用する
Nuxt.js の Sitemap Module について、何故か Generate による Static Page / Full Static でしか利用できないと思いこんでいたのでメモ。
Nuxt.js の Content Module(nuxt/content) を利用している Web サイトを AMP に対応させる
@nuxtjs/amp に投げていたパッチが無事マージ・リリースされたので、 @nuxt/content を利用した静的 Web サイトを AMP 対応させる方法について紹介したいと思います。
2020年やっていた仕事などのまとめ
2020 年は一般的なソフトウェアエンジニア。というよりは少し経路が違う仕事を主にやっていたので、良い機会なのでまとめようと思います。
採用技術問わずWebサイトに設置できるソーシャルシェアボタンを Web Component として開発する
先日、「”地上最強”のエンジニア向け情報サービス」を謳うTechFeed Proが新規アップデート。様々な機能追加がなされ、更に多くの情報収集が可能となりました。今回はそんな TechFeed のアップデートで追加された URL 共有機能の導線として、 techfeed-share-button パッケージを OSS として公開した記録を紹介します。
私が東京脱出できない3つの理由
今年はフルリモートを契機に、東京都心から郊外や関東4県へ引っ越すケースを TL や職場でよく見る一年でした。「家賃は下がる上に静かだし部屋も広くなった」みたいな話を聞くたびにそれも良いなと思いつつも、冷静に考えると私は都心以外で生活できる場所はかなり限定されるなと思うので、その辺りについて改めて残しておこうと思います。
2020年のフロントエンドエンジニアの技術スタックの一例
年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。
Front-End Study #1 の企画・運営と司会をした
11/09 に開催された Front-End Study #1 について、Forkwellとの共催で運営・企画並びに司会に携わりました。参加登録者2,552人、同時視聴者も1,500人を超えるバケモンとしか言えないイベントになったわけですが、無事終わって何よりというところで一筆。
GitHub Actions で Cypress の end-to-end test を実行する
LitElement を利用した Custom Element の開発をしていて、 enzyme や vue-test-utils のようなコンポーネントのテストを記述したい。
Vue 3 ではコンポーネント単位で delimiters を変更できる
サーバーサイドのテンプレートエンジンと Vue.js が混在しているプロジェクトを経験したことがある人には馴染み深い(?) Vue の delimiters オプションですが、Vue 3 になってからコンポーネント単位で設定できるようになっていました。仕事で Nuxt.js の app.html の仕様の説明ついでに、 mustache 記法について説明を行った際に書いた Vue 3 サンプルで初めて気づいたので、メモ程度に残しておきます。
通知してほしいけど Inbox に残ってほしくない Pull Request 通知メールなどを自動で整理する
今や有効活用している人はかなりすくなったように思えるメールボックス。ログインのための Identifier とそれに関する通知システムとしてのみ使っている人も多いかと思います。
ポケモンと勝率の話
この間の連休で生産的な活動をやったので、その分の休憩としてここ一週間ほど仕事以外の時間をポケモンに捧げていた。一ヶ月あるポケモンのシーズンの中で、9月期に3桁を目標としていたが、結果としては1,300位。惜しいところまではいったが、もう一歩頑張りたいところではあった。
Moment.js 送別会を開催した
9/25(金)に Moment.js の送別会を YouTube Live / Discord で行いました。フロントエンドから卒業することになった Moment.js の思い出と、今使っている時刻操作ライブラリなどについて語る会となります。当日のYouTube Liveアーカイブ
2020年秋の連休ふりかえり
かなり濃い連休を過ごせた気がするので、できたこと・できなかったことをふりかえってみる。
ブログに Buy Me a Coffee の投げ銭導線を設置した
最近 zenn.dev がソーシャルで流行っている。サービスコンセプトであったりアプリケーションの品質だったりといろいろな観点で各々が言及しているけれど。個人的には情報を発信した人に対して金銭的なインセンティブがある点がかなり面白いなと。
JavaScript での時刻操作に Moment.js ではなく Day.js を利用し続けている理由
昨日、拙作の Nuxt.js プラグインである @nuxtjs/dayjs の v1.2.0 をリリースしたので、改めてなぜ Day.js を利用しているのかを書こうと思います。
standard-version で chore や doc をリリースノートに入れる方法
Conventional Commits にも参照がある chore や doc 形式のコミットメッセージが、standard-version でリリースノートに含まれないことが不満に思っていたけれど、昨日ようやくカスタマイズ方法を知ったので残しておきます。
rehype-plugin-image-native-lazy-loading を NPM package として公開した
9/2 に書いた記事で紹介した、 nuxt/content で Markdown 内の画像に Native Lazy-Loading をつけるコードに需要がありそうだったので、rehype plugin としてそのまま切り出しました。
Stencil でつくられた Custom Element を React/TypeScript 環境から呼び出したい
会社で Stencil で作られた Web Component の NPM パッケージが OSS として公開されていて、Vue.js のアプリケーションではこれまでも利用していたけれど、React でも利用したくなった。が、やってみるとドキュメント以上の工夫が必要だったのでメモ。
CDN 版の LIFF SDK に型定義をつける
つい最近 NPM パッケージ版が出たばかりの LIFF(LINE Front-end Framework)ですが、まだ NPM パッケージ版は Stable ではなく、現場によっては CDN 版を継続して使っているところも多い印象です。
Gyazo API を Node.js の Buffer から直に使おうとしたらハマった話
久々に Node.js 環境の axios で multipart/form-data を扱ってたら Gyazo API のレスポンスの謎さも相まって辛かったという話です。
イマドキの cron は GitHub Actions / CircleCI でやりたい
昔は cron といえば Heroku と Heroku Scheduler だったけれど、Heroku Scheduler が
nuxt/content で作成した Web サイトで Markdown 内の画像を Native Lazy-loading を行う
ブログや技術メモを書くとき、お手軽な画像ホスティングとして Gyazo を使うけれど、 Gyazo のリンクコピーをそのままやると画像でサイトが重くなるので lazy loading を追加した話。
nuxt-jsonld と schema-dts を利用して型安全で宣言的な JSON-LD を定義する
JSON-LD、結構書くの面倒ですよね。細かな仕様を都度 https://schema.org/ に見に行ったり
Factory 関数の引数は Object にしてほしいという話
自明だと思っていたけれど、割と見かけるので。Factory 関数やそれに相当するようなものは、得てして作成時点、あるいは将来的にかなりのオプションを取る可能性があります。
Vue.js 3 の TSX を TypeScript Compiler だけで動かす方法について
先日の v-tokyo #11 の懇親会で質問されたので、Native TSX Support される Vue 3 でなぜ tsc だけで TSX が動作しないのかを聞かれたのでメモとして残して置こうと思います。