{"id":49451589,"url":"https://github.com/abenteuerzeit/contact_app","last_synced_at":"2026-04-30T02:41:21.306Z","repository":{"id":242292061,"uuid":"809180662","full_name":"abenteuerzeit/contact_app","owner":"abenteuerzeit","description":"Notes and App built based on Hypermedia Systems by Carson Gross et al.  ","archived":false,"fork":false,"pushed_at":"2024-06-02T07:07:07.000Z","size":74,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-06-03T01:25:47.601Z","etag":null,"topics":["flask","htmx","jinja","postgresql","python","sqlite","vercel"],"latest_commit_sha":null,"homepage":"https://contact-pimx60mqt-abenteuerzeits-projects.vercel.app","language":"JavaScript","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/abenteuerzeit.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}},"created_at":"2024-06-01T23:50:53.000Z","updated_at":"2024-06-02T07:19:19.000Z","dependencies_parsed_at":"2024-06-02T01:25:47.019Z","dependency_job_id":"d3300098-b49b-4281-98f6-b1da31153fe9","html_url":"https://github.com/abenteuerzeit/contact_app","commit_stats":null,"previous_names":["abenteuerzeit/contact_app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/abenteuerzeit/contact_app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abenteuerzeit%2Fcontact_app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abenteuerzeit%2Fcontact_app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abenteuerzeit%2Fcontact_app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abenteuerzeit%2Fcontact_app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abenteuerzeit","download_url":"https://codeload.github.com/abenteuerzeit/contact_app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abenteuerzeit%2Fcontact_app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32452746,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T22:27:22.272Z","status":"online","status_checked_at":"2026-04-30T02:00:05.929Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["flask","htmx","jinja","postgresql","python","sqlite","vercel"],"created_at":"2026-04-30T02:41:20.453Z","updated_at":"2026-04-30T02:41:21.301Z","avatar_url":"https://github.com/abenteuerzeit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Demo Hypermedia-Driven Multi-Page Application\n\n## Contact.app\n\n### Stack\n\n|                    |        |\n|--------------------|--------|\n|Programming Language| Python |\n|Web Framework       | Flask  |\n|Templating Language | Jinja  |\n\n\n### Installation (Windows):\n\n- [ ] Install virtual environment: `py -3 -m venv .venv`\n- [ ] Activate `.venv\\Scripts\\activate`\n- [ ] Install dependencies `pip install -r requirements.txt`\n- [ ] Start server `flask --app contact_app.py run`\n\n\n### Features\n\nAs a user, I can:\n\n- [ ] Read a list of contacts\n- [ ] Search contacts\n- [ ] Create a new contact\n- [ ] Read a contact's details\n- [ ] Update a contact's details\n- [ ] Delete a contact\n\n\n## What is the simplest thing that could possibly work?\n\nThis document provides an overview of web hypermedia systems, focusing on the\nRESTful network architecture where the server and client communicate using\nhypermedia.\n\n- Powerful, interactive, and simple aproach.\n- Tolerant of content and API changes.\n- Leverages web browser features.\n- Server-side application value\n- Flexible server-side logic, poly-linguistic and multi-framework\n- Universal web language\n- API versioning not necessary\n\n**Hypermedia On Whatever you'd Like (HOWL)**\nEXAMPLES: Python, Lisp, OCaml, Haskell, Julia, Nim, Ruby, JavaScript\n\n## Definitions\n\n### Hypermedia System\n\nA system that adheres to RESTful network architecture. Made up of:\n\n- a hypermedia, e.g. HTML\n- a network protocol, e.g. HTTPS\n- a server providing a hypermedia API responding to HTTP requests with HTTP responses,\n- a client that processes hypermedia responses, e.g. a web browser, and takes advantage of the uniform interface.\n\nSee: Roy Fielding, Architectural Styles and the Design of Network-Based Software Architectures.\n\n### Hypermedia\n\nHypermedia is a dynamic, non-linear, branching structure that enables\ncommunication between points within the media with embedded hypermedia controls.\n\n**Example:** Hypertext Markup Language (HTML)\n\n### Hypermedia Control\n\nA hypermedia control is a self-contained element within a hypermedia system\nthat encodes and manages interactions by directly incorporating all the\nnecessary information required for the interaction within its own structure,\nwithout relying on external resources.\n\nThis allows the hypermedia control to govern and facilitate communication\nbetween the user and the system, often involving exchanges with a remote server.\n\nThe self-contained nature of the hypermedia control ensures that the interaction\ncan be initiated and completed solely based on the information contained within\nthe control itself.\n\n**Example:** HTML anchor (`\u003ca\u003e`) and form (`\u003cform\u003e`) tags.\n\n### Uniform Resource Locator (URL)\n\nA string referencing a network location from where a resource can be retrieved,\nand how it can be retrieved.\n\n\n```text\n[scheme]://[userinfo]@[host]:[port][path]?[query]#[fragment]\n```\n\n### Representational State Transfer (REST)\n\na network architecture, a technique to architect a distributed system\nassociated with HTML and Hypermedia\n\nConstraints on the behvaior of a RESTful system\n\n- [ ] Is it a client-server architecture?\n- [ ] Is it stateless? Does every request encapsulate all information necessary to respond to the request, with no side state or context stored on neither the client nor the server?\n- [ ] Does it allow for cahcing with explicit information on the cachability of responses for future requests of the same resource?\n- [ ] Does it have a *uniform interface* (Identification of resources, manipulation of resources through representations, self-descriptive messages, and hypermedia as the engine of application state)?\n- [ ] Is it a layered system?\n- [ ] *OPTIONAL* Does it allow for Code-On-Demand, i.e., scripting?\n\na browser and Apache Web Server communicating through a network connection.\nSession cookies violate the stateless constraint.\nHTTP caching\nURL as ID.\nResponse has all information necessary to display and operate on the data being represented.\n\n```html\n\u003chtml lang=\"en\"\u003e\n\u003c!-- ... --\u003e\n\u003cbody\u003e\n    \u003ch1\u003e Response \u003c/h1\u003e\n    \u003cdiv\u003e\n        \u003cdiv\u003e Email: contact1@email.com \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n        \u003cp\u003e\n            \u003ca href=\"/contacts/1/archive\"\u003e Archive \u003c/a\u003e\n        \u003c/p\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n\n```\n\n\n## Navigating Between Server Resources\n\nTo navigate between server resources, an HTTP GET request is sent with metadata\nto the URL specified in the `href` attribute. The page content and navigation\nbar are updated with the URL and HTML from the HTTP response.\n\n\n**Example:**\n```html\n\u003ca href=\"#\"\u003ehyperlink\u003c/a\u003e\n```\n\n## Updating a Server Resource State\n\nTo update a server resource state, an HTML form is used. When the form is\nsubmitted, it sends an HTTP POST request to the specified `action` URL, with\nthe data encoded in the form fields.\n\n**Example:**\n```html\n\u003cform action=\"/create\" method=\"POST\"\u003e\n    \u003cselect name=\"choice\"\u003e\n        \u003coption value=\"first\"\u003eFirst Value\u003c/option\u003e\n        \u003coption value=\"second\" selected\u003eSecond Value\u003c/option\u003e\n        \u003coption value=\"third\"\u003eThird Value\u003c/option\u003e\n    \u003c/select\u003e\n    \u003cbutton\u003ecreate\u003c/button\u003e\n\u003c/form\u003e\n```\n\n## htmx-powerd button\n\n```html\n\u003cdiv id=\"contact-ui\"\u003e\u003c/div\u003e\n\u003cbutton hx-get=\"/contacts/1\" hx-target=\"#contact-ui\"\u003e Fetch \u003c/button\u003e\n```\n\nHTTP response\n```html\n\u003cdetails\u003e\n    \u003ch2\u003eContact 1\u003c/h2\u003e\n    \u003cdiv\u003e\n        \u003ca href=\"mailto:contact@email.com\"\u003e E-mail \u003c/a\u003e\n    \u003c/div\u003e\n\u003c/details\u003e\n```\n\n## References\n\n1. C. Gross, A. Stepinski, D. Akşimşek, and W. Talcott, *Hypermedia Systems*. Independently published, 2023.\n2. Vannevar Bush, *As We May Think*. 1945. Available: \u003chttps://archive.org/details/as-we-may-think\u003e\n3. https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching\n4. https://ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_1_6\n5. https://html.spec.whatwg.org/multipage/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabenteuerzeit%2Fcontact_app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabenteuerzeit%2Fcontact_app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabenteuerzeit%2Fcontact_app/lists"}