Read on Twitter
／
Next.js初の世界規模カンファレンス
10月に無料オンライン開催決定
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎊" title="Konfettiball" aria-label="Emoji: Konfettiball">
初心者から上級者まで大歓迎！
＼
登録はこちらから。GitHub認証すると自分オリジナルのチケット画像を生成できますhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="🎟" title="Eintrittskarte" aria-label="Emoji: Eintrittskarte">
https://nextjs.org/conf/tickets/chibicode
当ページの実装の大部分を担当しました。皆様のチケット番号教えてください">https://nextjs.org/conf/tick...https://abs.twimg.com/emoji/v2/... draggable="false" alt="☺️" title="Lächelndes Gesicht" aria-label="Emoji: Lächelndes Gesicht">
Next.js初の世界規模カンファレンス
10月に無料オンライン開催決定
初心者から上級者まで大歓迎！
＼
登録はこちらから。GitHub認証すると自分オリジナルのチケット画像を生成できます
https://nextjs.org/conf/tickets/chibicode
当ページの実装の大部分を担当しました。皆様のチケット番号教えてください">https://nextjs.org/conf/tick...
チケットの画像がポインタの動きに合わせて傾くのですが、これにはVanilla-tilt.jsというライブラリを使用しています
https://micku7zu.github.io/vanilla-tilt.js/
↓ソースコード
↓私のチケットページ
シェア用URLをコピーする機能にはiOSのSafariでも最近使えるようになったブラウザAPIを利用しています。
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
コードはこれだけ↓
navigator.clipboard.writeText(url)
昔はFlashを使っていたのが懐かしいですね…">https://developer.mozilla.org/en-US/doc...
各チケットページ ( https://nextjs.org/conf/tickets/chibicode)">https://nextjs.org/conf/tick... にはNext.jsのインクリメンタル静的生成機能を利用しているので高速です。
↓ソース
#L77-L82">https://github.com/vercel/next-site/blob/006456536137fb775c731f4e92c5edb4fb5f02a0/pages/conf/tickets/%5Busername%5D.tsx #L77-L82
↓unstable_blockingは最近canary版に追加されました
Next.jsカンファレンスページ実装のこだわりポイントそのhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="3️⃣" title="Tastenkappe Ziffer 3" aria-label="Emoji: Tastenkappe Ziffer 3">各チケットページ ( https://nextjs.org/conf/tick... にはNext.jsのインクリメンタル静的生成機能を利用しているので高速です。↓ソース https://github.com/vercel/ne... href=" https://github.com/vercel/next.js/pull/15672">https://github.com/vercel/ne..." title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="😎" title="Lächelndes Gesicht mit Sonnenbrille" aria-label="Emoji: Lächelndes Gesicht mit Sonnenbrille">Next.jsカンファレンスページ実装のこだわりポイントそのhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="3️⃣" title="Tastenkappe Ziffer 3" aria-label="Emoji: Tastenkappe Ziffer 3">各チケットページ ( https://nextjs.org/conf/tick... にはNext.jsのインクリメンタル静的生成機能を利用しているので高速です。↓ソース https://github.com/vercel/ne... href=" https://github.com/vercel/next.js/pull/15672">https://github.com/vercel/ne..." class="img-responsive" style="max-width:100%;"/>
チケットOGP画像の生成方法
・チケットのみ表示するページを作成
・そのページをPuppeteerでスクショするサーバレス関数をNodeで書く
・関数を @vercelにデプロイし実行結果はCDNにキャッシュ
↓を流用してます
https://github.com/vercel/og-image ">https://github.com/vercel/og...
Next.jsカンファレンスページ実装のこだわりポイントそのhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="4️⃣" title="Tastenkappe Ziffer 4" aria-label="Emoji: Tastenkappe Ziffer 4">チケットOGP画像の生成方法・チケットのみ表示するページを作成・そのページをPuppeteerでスクショするサーバレス関数をNodeで書く・関数を @vercelにデプロイし実行結果はCDNにキャッシュ↓を流用してます https://github.com/vercel/og..." title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="😎" title="Lächelndes Gesicht mit Sonnenbrille" aria-label="Emoji: Lächelndes Gesicht mit Sonnenbrille"> Next.jsカンファレンスページ実装のこだわりポイントそのhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="4️⃣" title="Tastenkappe Ziffer 4" aria-label="Emoji: Tastenkappe Ziffer 4">チケットOGP画像の生成方法・チケットのみ表示するページを作成・そのページをPuppeteerでスクショするサーバレス関数をNodeで書く・関数を @vercelにデプロイし実行結果はCDNにキャッシュ↓を流用してます https://github.com/vercel/og..." class="img-responsive" style="max-width:100%;"/>
リンク等にCSSで :hover を使うとスマホでタップ時に遅延しますよね。
↓のPostCSSプラグインを導入すれば、自動で全てのhover記述がhover: hoverというmediaクエリで囲まれ、スマホでhoverを無効化できます！
https://github.com/saulhardman/postcss-hover-media-feature">https://github.com/saulhardm...
Next.jsカンファレンスページ実装のこだわりポイントそのhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="5️⃣" title="Tastenkappe Ziffer 5" aria-label="Emoji: Tastenkappe Ziffer 5">リンク等にCSSで :hover を使うとスマホでタップ時に遅延しますよね。↓のPostCSSプラグインを導入すれば、自動で全てのhover記述がhover: hoverというmediaクエリで囲まれ、スマホでhoverを無効化できます！ https://github.com/saulhardm..." title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="😎" title="Lächelndes Gesicht mit Sonnenbrille" aria-label="Emoji: Lächelndes Gesicht mit Sonnenbrille"> Next.jsカンファレンスページ実装のこだわりポイントそのhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="5️⃣" title="Tastenkappe Ziffer 5" aria-label="Emoji: Tastenkappe Ziffer 5">リンク等にCSSで :hover を使うとスマホでタップ時に遅延しますよね。↓のPostCSSプラグインを導入すれば、自動で全てのhover記述がhover: hoverというmediaクエリで囲まれ、スマホでhoverを無効化できます！ https://github.com/saulhardm..." class="img-responsive" style="max-width:100%;"/>
当ページは @vercelのデザイン責任者で正体不明?のデザイナー、Evil Rabbit @evilrabbit_ が設計しました。
このハンドルネームは直訳すると「悪のウサギ」で、チケット番号も悪魔の数字である666を取得したそう。
(とても優しい方です)
Next.jsカンファレンスページ実装のこだわりポイントそのhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="6️⃣" title="Tastenkappe Ziffer 6" aria-label="Emoji: Tastenkappe Ziffer 6">当ページは @vercelのデザイン責任者で正体不明?のデザイナー、Evil Rabbit @evilrabbit_ が設計しました。このハンドルネームは直訳すると「悪のウサギ」で、チケット番号も悪魔の数字である666を取得したそう。(とても優しい方です)" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="😎" title="Lächelndes Gesicht mit Sonnenbrille" aria-label="Emoji: Lächelndes Gesicht mit Sonnenbrille"> Next.jsカンファレンスページ実装のこだわりポイントそのhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="6️⃣" title="Tastenkappe Ziffer 6" aria-label="Emoji: Tastenkappe Ziffer 6">当ページは @vercelのデザイン責任者で正体不明?のデザイナー、Evil Rabbit @evilrabbit_ が設計しました。このハンドルネームは直訳すると「悪のウサギ」で、チケット番号も悪魔の数字である666を取得したそう。(とても優しい方です)">
Next.jsカンファレンスページ実装のこだわりポイントそのhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="6️⃣" title="Tastenkappe Ziffer 6" aria-label="Emoji: Tastenkappe Ziffer 6">当ページは @vercelのデザイン責任者で正体不明?のデザイナー、Evil Rabbit @evilrabbit_ が設計しました。このハンドルネームは直訳すると「悪のウサギ」で、チケット番号も悪魔の数字である666を取得したそう。(とても優しい方です)" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="😎" title="Lächelndes Gesicht mit Sonnenbrille" aria-label="Emoji: Lächelndes Gesicht mit Sonnenbrille"> Next.jsカンファレンスページ実装のこだわりポイントそのhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="6️⃣" title="Tastenkappe Ziffer 6" aria-label="Emoji: Tastenkappe Ziffer 6">当ページは @vercelのデザイン責任者で正体不明?のデザイナー、Evil Rabbit @evilrabbit_ が設計しました。このハンドルネームは直訳すると「悪のウサギ」で、チケット番号も悪魔の数字である666を取得したそう。(とても優しい方です)">
Next.jsカンファレンスページ実装のこだわりポイントそのhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="6️⃣" title="Tastenkappe Ziffer 6" aria-label="Emoji: Tastenkappe Ziffer 6">当ページは @vercelのデザイン責任者で正体不明?のデザイナー、Evil Rabbit @evilrabbit_ が設計しました。このハンドルネームは直訳すると「悪のウサギ」で、チケット番号も悪魔の数字である666を取得したそう。(とても優しい方です)" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="😎" title="Lächelndes Gesicht mit Sonnenbrille" aria-label="Emoji: Lächelndes Gesicht mit Sonnenbrille"> Next.jsカンファレンスページ実装のこだわりポイントそのhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="6️⃣" title="Tastenkappe Ziffer 6" aria-label="Emoji: Tastenkappe Ziffer 6">当ページは @vercelのデザイン責任者で正体不明?のデザイナー、Evil Rabbit @evilrabbit_ が設計しました。このハンドルネームは直訳すると「悪のウサギ」で、チケット番号も悪魔の数字である666を取得したそう。(とても優しい方です)">
Next.jsカンファレンスページ実装のこだわりポイントそのhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="6️⃣" title="Tastenkappe Ziffer 6" aria-label="Emoji: Tastenkappe Ziffer 6">当ページは @vercelのデザイン責任者で正体不明?のデザイナー、Evil Rabbit @evilrabbit_ が設計しました。このハンドルネームは直訳すると「悪のウサギ」で、チケット番号も悪魔の数字である666を取得したそう。(とても優しい方です)" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="😎" title="Lächelndes Gesicht mit Sonnenbrille" aria-label="Emoji: Lächelndes Gesicht mit Sonnenbrille"> Next.jsカンファレンスページ実装のこだわりポイントそのhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="6️⃣" title="Tastenkappe Ziffer 6" aria-label="Emoji: Tastenkappe Ziffer 6">当ページは @vercelのデザイン責任者で正体不明?のデザイナー、Evil Rabbit @evilrabbit_ が設計しました。このハンドルネームは直訳すると「悪のウサギ」で、チケット番号も悪魔の数字である666を取得したそう。(とても優しい方です)">
