Implementing Pagination while rendering examples

[Keshav-0907]

Increasing Access

Implementing pagination can enhance accessibility by :

• Improving load times,
• Enabling keyboard navigation
• Ensuring screen reader compatibility
• Enhancing compatibility with assistive technologies
• Providing better scalability
• Optimising for mobile devices,

Feature request details

Their should be pagination in the examples page, with a particular number of examples rendered each time

https://github.com/processing/p5.js-web-editor/assets/91189139/b87c736b-a1a9-4eec-990e-035dae21d9a3

I want to Work on this issue

[lindapaiste]

This has been raised before in #1814. Which is still open so I guess we want to do it? @raclim

A related thing that we might want to think about is returning only the essential data from the API. That is, don't include the files array on the the project list/search endpoint. If we do that then we would have to add/update some other API calls where we do need that information. So it's not a tiny thing, but possibly worth doing?

[Keshav-0907]

@lindapaiste, Regarding the idea of returning only essential data from the API, I understand it might involve some changes in other API calls. However, I believe it's worth considering for optimization, especially if it enhances the overall performance of the system.

To tackle these issues, I propose :

• Pagination Implementation
• API Data Optimization

Let's discuss how we can proceed with both the pagination and the optimization of API data. Any specific steps or considerations you have in mind for addressing these issues? @raclim, do you have any thoughts on this as well?

[raclim]

@lindapaiste @Keshav-0907 I personally do prefer pagination over scrolling in general, but I'm not sure what the general consensus about it is! This does seem a larger feature that might also benefit more from communal input/testing during development.

[DrizzyOVO]

Hi @lindapaiste @raclim, I implemented pagination to the sketches section. Hope y'all review it. Thank you.

[lindapaiste]

@lindapaiste @Keshav-0907 I personally do prefer pagination over scrolling in general, but I'm not sure what the general consensus about it is! This does seem a larger feature that might also benefit more from communal input/testing during development.

I'm team scrolling! I would do a lazy-load where it renders the first n items initially, then every time you hit the bottom it adds in the next n. But that's just my opinion. @Keshav-0907 raised some concerns regarding screen reader navigation and I'm honestly not too knowledgeable about that area.

[Keshav-0907]

I don't have a strong preference between Lazy Scrolling and Pagination. However, considering the limited number of examples we have, I personally think implementing pagination should be preferred. I believe @raclim could offer valuable insights on the best approach for this situation.

[DrizzyOVO]

I apologize for closing the pull request previously, there were some errors I was facing in my local codebase. But this is the final pull request that can solve the issue. Thank you.

[raclim]

Hmm @lindapaiste @Keshav-0907 I think scrolling might not be the best accessibility wise—these two articles by the Bureau of Internet Accessibility and Digital A11y provide some reasons why (though they mostly apply to 'infinite scrolling' over scrolling in general, which might be slightly different?) I think the second article also links to a good checklist that can serve as a starting point for confirming if we've met certain accessibility criteria in these types of elements.

This is going a little off topic, but I saw some articles discuss this and think it could also be interesting to explore what a satisfying, accessible scrolling implementation could look like!