From 2fe850804b2397fe03dd7a5855330155022bbbd3 Mon Sep 17 00:00:00 2001 From: David Dias Date: Sun, 9 Feb 2025 23:28:17 -0500 Subject: [PATCH] feat: add new definitions for pagination --- content/en/glossary/aria-attributes.mdx | 39 ++++++++++++++ content/en/glossary/pagination.mdx | 28 ++++++++-- content/en/glossary/progressive-loading.mdx | 35 +++++++++++++ content/en/glossary/semantic-html.mdx | 51 +++++++++++++++++++ content/en/patterns/navigation/pagination.mdx | 43 ++++++++-------- 5 files changed, 172 insertions(+), 24 deletions(-) create mode 100644 content/en/glossary/aria-attributes.mdx create mode 100644 content/en/glossary/progressive-loading.mdx create mode 100644 content/en/glossary/semantic-html.mdx diff --git a/content/en/glossary/aria-attributes.mdx b/content/en/glossary/aria-attributes.mdx new file mode 100644 index 0000000..3643df8 --- /dev/null +++ b/content/en/glossary/aria-attributes.mdx @@ -0,0 +1,39 @@ +--- +title: "ARIA Attributes" +description: "HTML attributes that provide accessibility information to assistive technologies" +--- + +# ARIA Attributes + +ARIA (Accessible Rich Internet Applications) attributes are HTML attributes that provide additional information about web content and UI components to assistive technologies, such as screen readers. They help make web applications more accessible to users with disabilities. + +## Common ARIA Attributes + +- `aria-label`: Provides a text label for elements +- `aria-current`: Indicates the current item in a set +- `aria-expanded`: Shows if an expandable element is open +- `aria-hidden`: Hides elements from assistive technologies +- `aria-live`: Announces dynamic content changes + +## Best Practices + +- Use semantic HTML elements when possible +- Only add ARIA attributes when necessary +- Test with screen readers +- Keep labels clear and concise + +## Implementation Examples + +```html + + +``` + +## Related Patterns + +- [Pagination](/patterns/navigation/pagination) +- [Navigation Patterns](/patterns/navigation) diff --git a/content/en/glossary/pagination.mdx b/content/en/glossary/pagination.mdx index ffe5706..9913034 100644 --- a/content/en/glossary/pagination.mdx +++ b/content/en/glossary/pagination.mdx @@ -1,6 +1,6 @@ --- title: "Pagination" -description: "A navigation pattern that divides content into separate pages, allowing users to browse through large sets of data or content in manageable chunks." +description: "A navigation pattern that divides content into separate pages to improve usability and performance" category: ["Pattern", "Navigation"] related_patterns: ["/patterns/navigation/pagination", "/patterns/navigation/infinite-scroll"] @@ -18,6 +18,28 @@ import { GlossaryStructuredData } from "@app/_components/glossary/structured-dat # Pagination -## Definition +Pagination is a fundamental user interface pattern that divides large sets of content into smaller, more manageable chunks called "pages". This pattern helps users navigate through extensive collections of data, such as search results, product listings, or blog posts. -Pagination is a user interface pattern that breaks down large sets of content into smaller, more manageable pages that can be accessed through navigation controls. It helps users navigate through extensive content while maintaining performance and usability. +## Key Characteristics + +- Breaks content into discrete pages +- Provides navigation controls (previous/next, page numbers) +- Maintains user orientation within large datasets +- Supports bookmarking and sharing specific pages + +## Benefits + +- Improves page load performance +- Reduces cognitive load on users +- Enables better content organization +- Supports efficient server-side data handling + +## Related Patterns + +- [Pagination Pattern](/patterns/navigation/pagination) +- [Infinite Scroll](/patterns/navigation/infinite-scroll) +- [Load More](/patterns/navigation/load-more) + +## Learn More + +For detailed implementation guidelines and best practices, see the [Pagination Pattern](/patterns/navigation/pagination) documentation. diff --git a/content/en/glossary/progressive-loading.mdx b/content/en/glossary/progressive-loading.mdx new file mode 100644 index 0000000..3ad39e7 --- /dev/null +++ b/content/en/glossary/progressive-loading.mdx @@ -0,0 +1,35 @@ +--- +title: "Progressive Loading" +description: "A technique that loads content gradually to improve initial page load times and user experience" +--- + +# Progressive Loading + +Progressive Loading is a performance optimization technique that loads content and resources gradually rather than all at once. This approach improves initial page load times and provides a better user experience, especially for users with slower internet connections. + +## Key Concepts + +- Content is loaded in stages or chunks +- Initial load focuses on essential content +- Additional content loads as needed +- Can be triggered by user actions or automatically + +## Common Applications + +- Image loading (thumbnails before full resolution) +- Paginated content loading +- Infinite scroll implementations +- Large data table loading + +## Benefits + +- Faster initial page loads +- Reduced server load +- Better user experience +- Improved perceived performance + +## Related Patterns + +- [Pagination](/patterns/navigation/pagination) +- [Infinite Scroll](/patterns/navigation/infinite-scroll) +- [Load More](/patterns/navigation/load-more) diff --git a/content/en/glossary/semantic-html.mdx b/content/en/glossary/semantic-html.mdx new file mode 100644 index 0000000..ddcb5c4 --- /dev/null +++ b/content/en/glossary/semantic-html.mdx @@ -0,0 +1,51 @@ +--- +title: "Semantic HTML" +description: "HTML elements that carry meaning about their content structure and purpose" +--- + +# Semantic HTML + +Semantic HTML refers to using HTML elements that clearly describe their meaning and purpose, rather than just their presentation. This practice improves accessibility, SEO, and code maintainability by providing clear structural information about the content. + +## Key Elements + +- `