TypeScriptのセミコロンはつける派が多いのかつけない派が多いのか
サイトヘッダーをstickyで固定した場合のscroll-padding、scroll-marginについて
サイト上部にサイトヘッダーやナビゲーションバーなどの要素を position: sticky;
や position: fixed;
で固定した場合、https://example.com/post#heading
のようなアンカーリンクでの移動のズレを無くすための設定について。
:root {
scroll-padding-top: 64px;
}
上記のように全体に scroll-padding-top
を指定するよりも、以下のようにアンカーの部分に scroll-margin-top
を指定した方が良さそう。
.heading {
scroll-margin-top: 64px;
}
<h2 id="heading" class="heading">見出し</h2>
scroll-padding-top
を使った場合に、shadcn/uiのDropdown Menuの挙動がおかしくなった。Dropdown Menuを閉じたときに変なスクロールが発生した。
Next.jsのサーバーコンポーネントでusePathnameのように現在のパスを取得したい
Next.js Server ComponentでCurrent URLを取得したい
zenn.dev
![Next.js Server ComponentでCurrent URLを取得したい](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2F6ac5f8ee-428d-41da-b66f-55dfce5dd61f.png&w=3840&q=75)
今のところはサーバーコンポーネントで取得するにはmiddlewareを使うしかないらしい。クライアントコンポーネントにして usePathname
を使うことにした。
Add get-pathname function by vordgi · Pull Request #59909 · vercel/next.js
Since this PR is not being merged, I'll leave a recommendation to use @nimpl/getters at the top here.
Adding a feature
What?
Ability to obtain the path in server components
Why?
I understand the c...
github.com
![Add get-pathname function by vordgi · Pull Request #59909 · vercel/next.js](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2F6b512600-dd59-4660-88d0-60b789fbd3c2.png&w=3840&q=75)
getPathname
が早く使えるようになったらいいのに。
TypeScriptのセミコロン
セミコロンに関する ESLint ルール - Qiita
まえがきESLint seems like the light saber of the ASI Wars these days.— Nicholas C. Zakas (@slicknet) 2…
qiita.com
![セミコロンに関する ESLint ルール - Qiita](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2Fde01153a-6634-481f-901f-4b87eec57914.jpeg&w=3840&q=75)
つけない派なのだが、つけた方がいいのか悩んでいる。