タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
「zeit/swr」のpagination exampleでScroll Position Restoreを試す - Qiita
こちらはNext.js Advent Calendar 2019の22日目の記事です。 はじめに 例えばYoutubeをスマホで見ていたときに、↓のように一度ページ遷移をしてからブラウザバックしたときにスクロール位置が一番上まで戻ってしまった経験はないでしょうか。 これはSPAが抱える課題の1つで、解決するためには「Scroll Position Restore」と呼ばれる「スクロール位置の保持」とその「リストア（復元）」が必要です。 また、それ以外にも「もっと読む」などで画面内に非同期で要素が追加された場合はその要素も合わせて復元しないと正しいスクロール位置には戻れません。これには複雑なStateの管理も必要になってきます。 このように「Scroll Position Restore」を実現するにはいくつか超えなくてはいけない壁があります。 zeit/swr の登場 2019年10月、
Introducing FastPage: Faster offset pagination for Rails apps — PlanetScale
We’d like to introduce FastPage, a new gem for ActiveRecord that applies the MySQL “deferred join” optimization to your offset/limit queries. Here is a slow pagination query in Rails:
ライブラリの実装からCursor-based paginationにおけるcursorのフォーマットのベストプラクティスを探る - Qiita
ライブラリの実装からCursor-based paginationにおけるcursorのフォーマットのベストプラクティスを探るGraphQL この記事は GraphQL Advent Calendar 2020 13 日目の記事です。 前回の記事は @maaz118 さんの GraphQL の @defer, @stream ディレクティブを試してみる でした。 GraphQLにおける2つのPagination方式 Offset-basedとCursor-based GraphQLにおけるpaginationには、Offset-based paginationとCursor-based paginationの2つが主な方法としてあります。 GraphQLの公式ページには3つの例が載っています。 https://graphql.org/learn/pagination/#pagination
受託案件では制限のない限り、プラグインを利用したページネーション（ページナビゲーション）を設置することが多いのですが、大人の理由でプラグインが使えなかったり、テーマの中で動作を管理したい場合にはthe_posts_pagination()という関数を使うことで、WordPressが標準で用意しているページネーションを設置することができます。 今回は、こちらのthe_posts_pagination()を利用する際に、よく使う情報や、簡単にマークアップ構造（CSSクラス名とか）などを変更したい際のフィルターフックなどを紹介します。 the_posts_pagination()の使い方 使い方と言っても、PHPで書けば良いだけなんで何ってわけではないのですが、こんな感じで配列で設定をカスタムすることができます。 <?php the_posts_pagination( array( 'base'
Design better pagination
Pagination separates groups of content into multiple pages. It typically takes the form of a horizontal list of numbers linking to each page with buttons to navigate forward and back. Pagination makes it easier for users to transverse many results by presenting them in defined amounts per page. Pagination can also improve loading time by fetching a set amount of results on each page load instead o
Laravelのページネーションを使用したり、カスタマイズしたページネーションを実装したりしたことがあるので、思い出しながら復習してみます！ Laravelでページネーションを使うには？ コントローラでpaginateを使って呼び出す Modelからデータを読み出すときにpaginateを使うと LengthAwarePaginatorの形式で返ってくるので、それをviewに渡して使うといいです。 下記が作った掲示板のコードの一部で、一覧をコントローラから渡しているところです。 $board = new Board(); $board_list = $board->orderBy("created_at", "desc")->paginate(env("PAGE_MAX_LIMIT")); return view('top_list', ['board_list' => $board_li
The only pagination you'll ever need 1️⃣2️⃣3️⃣4️⃣5️⃣ (a React hook example)
The only pagination you'll ever need 1️⃣2️⃣3️⃣4️⃣5️⃣ (a React hook example) There are a lot of things to take into consideration when creating a table pagination component. I never had the chance to use a ready one, but I assume that every pagination component or hook needs at least these in order to work. interface UsePaginationProps { /** Total number of rows */ count: number; /** The current pa
Faster pagination in HEY
Recently we focused on improving the performance of HEY. Fixing slow database queries for some of the HEY pages was a challenge, so I thought it would be worth writing up a technique we used. Background HEY currently runs on Amazon Aurora with MySQL 5.7 compatibility. It uses the InnoDB storage engine. In InnoDB, table and indexes are stored in a variation of a B+ tree data structure. The tree is
If you’d prefer to watch rather than read: https://youtu.be/v9E7moqUJ40 Pagination is a simple navigation technique that allows you to divide content into pages. It is very useful when you want to display a large recordset on multiple pages, for example in a table with a huge amount of data. In this article, I’ll be teaching you how to use a React Table with client-side pagination using react-rain
Prisma Client supports both offset pagination and cursor-based pagination. Offset pagination Offset pagination uses skip and take to skip a certain number of results and select a limited range. The following query skips the first 3 Post records and returns records 4 - 7: const results = await prisma.post.findMany({ skip: 3, take: 4, }) To implement pages of results, you would just skip the number
What Happens If Canonicalizing E-Commerce Pagination Pages to the First Page? - BoostRoas
The long question is how canonicalizing e-commerce pagination pages to the first page will affect SEO and Google’s crawl intent regarding products included in other pages? I prefer to simplify complex things, and I would like to explain what I mean by “canonicalization pagination pages” on e-commerce or other websites. Let’s assume that your website has more than 2 pages on the product category: T
LaravelはJavascriptをいじらなくても、簡単にページネーションを使えます。 ただTailwind CSSのデフォルトのページネーションは、日本語がちょっとおかしかったり、現在のページに色が着かなかったりと残念なところがあります。 こういった部分を修正し、Laravel9でTailwind CSSを使って、簡単に美しくページネーションを搭載する方法を紹介します。 *なおBootstrapご利用の場合は、下記をご覧ください。
GitHub - planetscale/fast_page: Blazing fast pagination for ActiveRecord with deferred joins ⚡️
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
We recommend reading Core pagination API before learning about considerations specific to cursor-based pagination. Using list element IDs as cursorsSince numeric offsets within paginated lists can be unreliable, a common improvement is to identify the beginning of a page using some unique identifier that belongs to each element of the list. If the list represents a set of elements without duplicat
LaravelにはJavascriptをいじらなくても、簡単にページネーションを使えます。 ただLaravel8ではデフォルトのCSSフレームワークがBootstrapからTailwind CSSになったので、表示がおかしくなることも。 Bootstrapを使って、簡単に美しくページネーションを搭載する方法を紹介します。 *Tailwind CSSの場合は、下記をご覧ください。
If your graph includes thousands or millions of books, this query probably returns much more data than you need. To resolve this issue, GraphQL servers can paginate their list fields. When a client queries a paginated list field, the server returns only a portion (or "page") of the list's elements. The client's query includes arguments that indicate which page the server should return: GraphQL ser
Firestoreのクエリでは、ドキュメント数を簡単にカウントする機能や何番目からというのを指定して取得（MongoDBのskipのような）するような機能が無いため、通常のページネーションを実装するのが難しく、下記のドキュメントのようにInfiniteScrollが前提とされています。 Firebase - クエリカーソルを使用したデータのページ設定 https://firebase.google.com/docs/firestore/query-data/query-cursors?hl=ja InfiniteScrollのメリット/デメリットについてはともかく、この記事ではあえて「前へ」/「次へ」ボタンのある通常のページネーションでFirestoreのコレクションを表示する例を実装してみます。 要件はざっくりと以下のような感じです。 Web上の管理画面の実装を想定 Reactを使用 複
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
the_posts_paginationの使い方と簡単なマークアップカスタマイズ方法 | オレインデザイン
Laravelのページネーション(Pagination)について（カスタマイズするには）
Using a React Table with Client-Side Pagination
Pagination (Reference) | Prisma Documentation
Laravel9でPaginationを簡単に美しく実装する方法【Tailwind CSS利用】
Cursor-based pagination
Laravel8 でPaginationを簡単に美しく実装する方法【Bootstrap利用】
Pagination in Apollo Client
Firestoreでクエリ検索+Paginationを実装してみる - Qiita
dounagadachs.hatenablog.com
x.com
l.smartnews.com
recruit.gmo.jp
fujiraji.diary.to
gazlog.jp