UIミートアップ11/19

[Eigo-Mt-Fuji]

• なぜコピペで使うコンポーネント集を利用するのか？

  • https://speakerdeck.com/mottox2/nasekohiheteshi-ukonhonentoji-woli-yong-surunoka?slide=20
  • https://ui.shadcn.com/examples/dashboard

• Next.js の Intercepting Routes と Parallel Routes

  • Parallel Routes https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
    • 同じレイアウトで
    • 1 つ または 複数のページを
    • 同時にレンダリングできます
    • または条件付きでレンダリングできます。
  • Intercepting Routes https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes
    • 特定のルートをインターセプトして
    • 別のルートを表示できます

• Storybook

  • https://storybook.js.org/docs/

• css-layout collection https://phuoc.ng/collection/css-layout/

  • https://github.com/phuocng/csslayout/tree/master

• Why is white space design important for websites? https://www.justinmind.com/blog/white-space-design/

  • ユーザがコンテンツを視認する際の負荷と誤認識してしまう割合を減らす
  • Space around graphics and images
  • Margins, paddings and gutters
  • Line-spacing and letter-spacing within text content
  • Space between columns
  • Clarity
  • 明快さ、透明さ
  • 気体や液体の透明度、澄み具合
  • 音や音色の明瞭さ、澄み具合
  • 画質の高さ
  • 頭脳の明晰さ、頭の回転の速さ、理解力
  • 思考の明確さ
  • 文章や論理の明快さ、明確さ、平明さ
  • 芸術作品の明確さ、迫真性
  • 目的や見通しなどの明確さ、将来の見通し

• Font

  • Why customize/commitment font?

  • 15 Best Google Fonts by the Numbers (Plus Tips on Using Them) https://kinsta.com/blog/best-google-fonts/#why-use-google-fonts

    • Why Use Google Fonts?
    • What to Look For in a Google Font?
    • The 10 Best Google Fonts (According to the Wisdom of the Crowds)
    • Bonus Fonts + Up-And-Comers
    • How to Create the Best Google Fonts Combinations?
    • Best Practices for Using Google Fonts on WordPress
    • How to Add Google Fonts to WordPress?

  • What is font

  • *.ttf file

  • How to use font

  • @font-face syntax

    • https://developer.mozilla.org/ja/docs/Web/CSS/@font-face

  • Category of font

[Eigo-Mt-Fuji]

どの順番でどう動く? なぜ関心もったかは整理しておく できることをやるしかない 即効性 応用範囲 気になるもの

今の案件で何を設計してる? 前に進む力になるもの。

[Eigo-Mt-Fuji]

[Eigo-Mt-Fuji]

https://speakerdeck.com/mugi_uno/next-dot-js-app-router-deno-mpa-hurontoendoshua-xin?slide=16

[Eigo-Mt-Fuji]

• Intercepting Routes Intercepting Routesを使ってモーダル実装する
  • Intercepting routes allows you to
  • load a route from another part of your application within the current layout.
  • This routing paradigm can be useful when you want to display the content of a route without the user switching to a different context.
  • For example,
  • when clicking on a photo in a feed, you can display the photo in a modal, overlaying the feed.
    • In this case, Next.js intercepts the /photo/123 route, masks the URL, and overlays it over /feed.

For example, when clicking on a photo in a feed, you can display the photo in a modal, overlaying the feed. In this case, Next.js intercepts the /photo/123 route, masks the URL, and overlays it over /feed.

https://github.com/vercel-labs/nextgram/blob/main/src/app/layout.tsx

• Parallel routes are created using named slots.

  • Slots are defined with the @folder convention
  • Slotをsame-level layoutのpropsに渡す
  • Slotとは、@から始まるフォルダに定義されるコンポーネント
    • Slots are not route segments and do not affect the URL structure.
    • The file path /@team/members would be accessible at /members.
  • and are passed to the same-level layout as props.

• Parallel Routing allows you to

  • define independent error and for each route
  • define loading states for each route
  • as they're being streamed in independently.
  • conditionally render a slot based on certain conditions, such as authentication state. This enables fully separated code on the same URL.
  • such as authentication state.
    • This enables fully separated code on the same URL
  • Slotコンポーネントを使うことでロジックの隠蔽・分割ができる
    • Slotコンポーネントを使うことで親コンポーネントにある処理を子コンポーネントの中で走らせることができます

import { Slot } from "@radix-ui/react-slot";

function Anchor({ props }) {
  return <Slot {...props} />;
}

export default function App() {
  return (
    <div className="App">
      <Anchor href="/about">
        <a>Link</a>
      </Anchor>
    </div>
  );
}

実際のAppの描画結果は以下のようになり、aタグにhrefが渡されます。

<div class="App">
  <a href="/about">Link</a>
</div>