{"id":29379203,"url":"https://github.com/gotpop/web-platform-showcase","last_synced_at":"2026-04-14T10:31:26.006Z","repository":{"id":279950960,"uuid":"940145369","full_name":"gotpop/web-platform-showcase","owner":"gotpop","description":"First pass at using a plethora of new web platform features to build a cohesive experience using Deno 🦕","archived":false,"fork":false,"pushed_at":"2025-07-15T17:02:07.000Z","size":1036,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-18T09:05:29.929Z","etag":null,"topics":["css","deno","html","javascript","nobuild","nunjucks","nunjucks-templates","webcomponents"],"latest_commit_sha":null,"homepage":"https://web-platform-showcase.deno.dev","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gotpop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-27T17:28:43.000Z","updated_at":"2025-07-15T17:02:10.000Z","dependencies_parsed_at":"2025-04-05T13:27:46.097Z","dependency_job_id":"ff9bd6cc-cc91-407a-a787-922e0ce50f5c","html_url":"https://github.com/gotpop/web-platform-showcase","commit_stats":null,"previous_names":["gotpop/deno-server","gotpop/deno-web-components","gotpop/web-platform-showcase"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gotpop/web-platform-showcase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gotpop%2Fweb-platform-showcase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gotpop%2Fweb-platform-showcase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gotpop%2Fweb-platform-showcase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gotpop%2Fweb-platform-showcase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gotpop","download_url":"https://codeload.github.com/gotpop/web-platform-showcase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gotpop%2Fweb-platform-showcase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31793212,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","deno","html","javascript","nobuild","nunjucks","nunjucks-templates","webcomponents"],"created_at":"2025-07-10T02:01:14.656Z","updated_at":"2026-04-14T10:31:26.001Z","avatar_url":"https://github.com/gotpop.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Platform Features Showcase\n\nWith so many exciting new web platform features being adopted this site aims to\ncombine as many possible together to see what tomorrow's build may look like.\n\n## Web Platform Features Used\n\n| Feature                         | Type    | Description                                                                  | Implementation                                                            |\n| ------------------------------- | ------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------- |\n| **CSS Anchor Positioning**      | CSS     | Position elements relative to other elements using `anchor()`                | Used in nav popovers with `anchor-name` and `position-anchor`             |\n| **CSS View Transitions**        | CSS/JS  | Smooth transitions between DOM states using `document.startViewTransition()` | Page navigation with custom transition types and performance optimization |\n| **CSS Paint API (Houdini)**     | CSS/JS  | Custom paint functions with `paint()` and `registerPaint()`                  | Grid patterns in worklets for background images                           |\n| **CSS Properties \u0026 Values API** | CSS/JS  | Register custom CSS properties with `CSS.registerProperty()`                 | Type-safe custom properties with syntax validation                        |\n| **CSS Typed Object Model**      | JS      | Typed CSS values instead of strings using `attributeStyleMap`                | Performance-optimized style manipulation                                  |\n| **Custom Elements**             | JS      | Define custom HTML elements with `customElements.define()`                   | Web components for feature cards and navigation                           |\n| **Popover API**                 | HTML/JS | Native popover behavior with `popover` attribute                             | Mobile navigation and feature detection dialogs                           |\n| **CSS Container Queries**       | CSS     | Style queries with `@container style()`                                      | Code syntax highlighting based on language                                |\n| **CSS Functions**               | CSS     | Custom CSS functions with `@function`                                        | Layout utilities, media queries, and design tokens                        |\n| **CSS Scope**                   | CSS     | Scoped styles with `@scope`                                                  | Component-level styling isolation                                         |\n| **CSS Values Level 5**          | CSS     | Math functions like `calc-size()`, `round()`                                 | Responsive sizing and grid calculations                                   |\n| **CSS Mixins**                  | CSS     | Reusable style blocks with custom properties                                 | Theme variables and component styling                                     |\n| **field-sizing**                | CSS     | Content-based form sizing                                                    | Auto-resizing inputs and textareas                                        |\n| **corner-shape**                | CSS     | Alternative border shapes like `notch`                                       | Custom icon styling                                                       |\n| **View Transition Names**       | CSS     | Named transitions with `view-transition-name`                                | Coordinated page animations                                               |\n| **Performance Observer**        | JS      | Monitor web performance metrics                                              | Adaptive animations based on device capabilities                          |\n| **CSS Paint Worklets**          | JS      | Background generation in separate thread                                     | Grid and pattern generation                                               |\n| **Speculation Rules**           | HTML    | Prefetch and prerender hints                                                 | Performance optimization for navigation                                   |\n\n## Available Scripts\n\n- `deno task dev` - Run in development mode with hot reloading\n- `deno task start` - Run in production mode\n- `deno task test` - Run tests\n- `deno task lint` - Lint code\n- `deno task fmt` - Format code\n\n## Getting Started\n\n1. Install Deno:\n   ```bash\n   curl -fsSL https://deno.land/x/install/install.sh | sh\n   ```\n\n2. Run the development server:\n   ```bash\n   deno task dev\n   ```\n\n3. Access the server at `http://localhost:8000`\n\n## Development Flow\n\n\u003cdetails\u003e\n\u003csummary\u003eView Development Flow Diagram\u003c/summary\u003e\n\n```mermaid\nsequenceDiagram\n    participant Browser\n    participant Server\n    participant FileSystem\n    \n    Browser-\u003e\u003eServer: Request page\n    Server-\u003e\u003eFileSystem: Read static files\n    FileSystem-\u003e\u003eServer: Return file contents\n    Server-\u003e\u003eBrowser: Serve HTML/JS/CSS\n    \n    loop Hot Reload\n        FileSystem-\u003e\u003eServer: File change detected\n        Server-\u003e\u003eBrowser: Push update\n        Browser-\u003e\u003eBrowser: Update content\n    end\n```\n\n\u003c/details\u003e\n\n## Requirements\n\n- Deno 2.2 or higher\n- Modern browser (for development)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgotpop%2Fweb-platform-showcase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgotpop%2Fweb-platform-showcase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgotpop%2Fweb-platform-showcase/lists"}