makotot

Resources

• The how and why of flexible React components - Speaker Deck
• Defining Component APIs in React

  • The fewer new things you need to learn, the easier it is for others to know how to use the components that you create, making them more reusable.

    • コンポーネントのAPIが少ないほど、読み手が学ぶことは少なく済む

  • Apropcalypse

    • props増加 → コンポーネントの責任増加を意味する
• Avoid soul-crushing components | Epic React by Kent C. Dodds
• レイアウトプリミティブ

makotot

https://docs.astro.build/en/guides/migrate-to-astro/from-nextjs/

• 類似点
  • .astroとJSXのシンタックス
  • SSG, SSR
  • ファイルベースルーティング

> npm create astro@latest

makotot

https://tailwindcss.com/

• インストール
  • https://tailwindcss.com/docs/installation
  • create-next-appなら最初の対話形式で選択肢がある
• @tailwindは何をしているか
  • https://tailwindcss.com/docs/functions-and-directives
  • tailwindlabs/discuss#397
  • https://qiita.com/oedkty/items/68461080515ec1012980#tailwind
• base

makotot

https://code.visualstudio.com/api/get-started/your-first-extension

npm install -g yo generator-code

❯ yo code

     _-----_     ╭──────────────────────────╮

makotot

figma REST apiについて

• https://www.figma.com/developers/api
  • REST APIなのかFigma APIなのか
    • Figma APIぽい

  • Figma's mission is to make design accessible to everyone.

  • Figma APIは読み取りとインタラクション？をサポートしている
  • オブジェクトやレイヤーのプロパティーを抽出して、Figmaの外部で扱うことができる
  • 認証
    • アクセストークン or OAuth2
      • パーソナルアクセストークンを生成するのがAccount Settingsからできる

makotot

• useQueryのfetch statusが更新されないことはあるか
  • useQuery randomly not returning data and stuck in loading
    • このissue自体はv2からv3へ移行したら発生したというもの
    • キャッシュが複数ある、ということはないであろう前提
    • 関連する？
      • Query data not updated on instances of a successful query
    • retryやstealTimeがどのように設定されているか
    • staleTime: Infinity？
      • これが再現条件に必要なものかといえば違いそう
• アプリケーションを起動したときだけ起こる？

makotot

test ok

makotot

# Ref: https://zenn.dev/catnose99/scraps/2d0abd8f32f91e#comment-6936e4d21939b4

SHEET_ID='foo' # スプレッドシートのURLに含まれる文字列
GOOGLE_SERVICE_ACCOUNT_EMAIL='foo@bar.iam.gserviceaccount.com' # サービスアカウントのアドレス
GOOGLE_PRIVATE_KEY='-----BEGIN PRIVATE KEY-----\nabcdefg...' # サービスアカウントのkeyのJSONに含まれる`"private_key"`の値をそのままコピペする

makotot

Expect.js

should.jsをベースに開発されたBDDアサーションライブラリ。

特徴

• IE6+, Firefox, Chrome, Safari, Operaで動く

• 全てのテストフレームワークで使用可能

makotot

import { globby } from "globby";
import matter from "gray-matter";
import fs from "node:fs";

const articles = await globby(["./articles/*.md"]);

const articleStats = articles.map((article) => {
  const content = fs.readFileSync(article, { encoding: "utf-8" });

  return {