You submitted: ${flavor}

`,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n }\n else if (flavorNumber > 1) {\n return new Response(`

You submitted these flavors: ${flavorList}

`, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n }\n\n // For GET requests, return the HTML form.\n return new Response(\n `\n \n \n \n \n \n Desert Order\n \n \n

Ice Cream Order

\n \n Enter your favorite flavor:\n

\n \n

\n \n \n vanilla\n \n

\n \n \n chocolate\n \n

\n \n \n moose tracks\n \n

\n \n \n cookies and cream\n \n

\n Email:\n \n
\n \n \n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}","deleted","label","children",[],[99],{"_104":171,"_95":172,"_152":173,"_154":-5,"_155":138,"_156":101,"_158":22,"_106":174,"_100":175,"_161":162,"_163":176,"_165":22,"_166":-5,"_167":177,"_98":178},"c30f09a6-fb7c-11ef-b5ca-569c3dd06744","HTTPguide","296866de-f9d4-11ef-934b-569c3dd06744",["D",1741369873876],29,"/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\nimport { Hono } from \"https://esm.sh/hono@3.10.2\";\n// last stable version is 61\nconsole.log(\"[Init] Starting HTML_Guide val\", new Date().toISOString());\n\nexport const HTTP_Guide = (c: any) => {\n const html = `\n\n \n HTML Guide\n \n \n \n \n

How to use HTML in Val Town

The key vocabulary are: client, server, URL, request, response, HTTP, method, and path.

What is the Internet

At its core the Internet is one computer requesting information and another computer \n responding with that information. In Val Town the computer requesting information is called frontend or\n client. The computer responding with that information is called backend or server. I made a point of \n using request and response because that's the specific terminology used to describe the communication.

\n \n

HTTP, Hypertext Transfer Protocol, is a protocol that explains how computers are supposed to \n communicate with each other. It's effectively the common language computers use to communicate. Some \n versions of HTTP cannot communicate with each other. Additionally, it can be a security risk for \n different versions to interface since some versions are more secure.

\n\n

One way to think about it is two penpals communicating. The language that penpals communicate in is\n HTTP and the dialect is the version. One penpal writes a letter, make a request object. Writing the \n address, sending the request object to the server. Drop it in the mailbox, have the server give the \n first penpal the final address. Send it through the postal system, send the request object. The other \n pen pal receives a letter and writes a response, creates a response object. Write the address, sends \n it to the server. Drop their letter in the mailbox, have the server give them the final address. Send a \n letter through the postal system, send the repsonse object.

\n\n \n

When coding in Val town, you need to start by coding the front end. There you decide what gets \n inputted and how. Once you decided what the request object has and wrote the code to create it, you can\n work on the backend. In the backend you need to write the code so that when it receives the request \n object, it knows what data should be sent back to the frontend through a response object.

\n\n\n

If you're coding in a single val, you don't need a path. Otherwise, a request object requires\n three things. They are a path, a method, and data being requested. A path/URL is the location\n the request object is being sent. A method says what action should be taken. GET retrieves data.\n POST creates new data. PUT updates data. PATCH updates part of the data. DELETE deletes data.\n However just because a method is originally intended for one thing doesn't mean it can only \n do that. For example GET can send data by modifying the query string. POST is preferred to\n GET for sending data because POST has a body to hold data. If the front end is sending data \n to the backend to be processed, POST is preferred to get.\n\n

If you're using POST to send data, you need the backend to parse the request body. First you need to\n get the FormData object through the formData() method\n The FormData object

\n documentation has several ways to extract the data from the object, depending on your needs.\n \n \n

Here I'm going to break down how a path works specifically. First, I'm going to explain how \n a URL works.\n\n

          https://example.com/users/will\n                      │        │         └──┬────────────────────┘\n                      │        │            │\n                      protocol domain name  path

\n\n \n In https://example.com/users/profile, that means the path is /users/profile. If something ends with\n / it's leading to the homepage. After a / three things can happen. One thing is a section. Another is\n /selection/subselection. The final is /resource/identifier.\n\n

\n//NOTE TO SELF ADD EXAMPLES OF Paths.\n\n\n

The key vocabulary are: HTTP Request/Response, Request Line, Status Line, Headers, Body, \n Query Params, API, and JSON.

\n \n \n

A HTTP Request is data sent from the client to the server. It always has the minimum of two\n parts and sometimes has a third. The first is the request line that has three pieces of \n information. The first piece of information is the HTTP method. The second is the URL or path\n the information is going to. The third and final piece of information is the HTTP version \n number. The second part of a HTTP Request is a header which contains supplementary information about\n requesting key value pairs. When creating or modifying information, there will be a body

\n\n\n

There are five kinds of request hitters. They are Content-Type, Authorization, Accept, and Cookie.\n Content-Type headers tell the server what kind of data is being used so they know how to understand\n The authorization header act as ID or security clearance. The accept header states what type of\n data could be understood when the response object is sent back. User-Agent Heather say what is\n making the request. That's importing because phones and computers get very different things \n and different browsers work differently. Cookie headers allow the computer to do thing keep you\n logged in or allow you to browse in light mode.

\n \n

A HTTP Response is data sent from the server to the client. It always has three parts. The \n first part is the status line which has three components. The first component is the HTTP\n version number. The second is a three number response that states if there was a problem and if so, \n what it was, (200 or 404). The second part of a HTTP Response are the headers just like the HTTP Request.\n The final part is the body which contains the requested data. It's usually something like HTML or \n JSON.

\n\n

There are four types of response headers: Content-Type, Cache-Control, Access-Control-Allow-Origin, \n and Set-Cookie. Content-Type says what type of data is being sent back to the front end. Cache-Control\n says if the response is worth saving and how long if it is. Access-Control-Allow-Origin determines\n if a website is permitted to use the information. Set-Cookie send new cookies to the browser to store.

\n\n\n \n

there are five categories of response status codes. The first category 100–199 is informational and\n means the request is in progress. The second category is 200-299 and means the request is successful.\n The third category is 300-399 and means the request got redirected. The fourth category is 400-499\n and means there's a problem with the request. The fifth category is 500-599 it means there's a problem \n The server accepting the request. If you want more details read HTTP response status codes documentation.

\n\n // NOTE TO SELF make code examples of HTTP Request and Response\n \n

There are three ways to make a request object without knowing how to code. One way is to\n type an URL in then press enter. Another way is to press a link or button. The final way is to submit\n a form.

\n\n\n \n

An API (Application Programming Interface) is a set of rules and protocols designed to make it easy \n to communicate. For example OpenAI has an API designed to make it easy for ChatGPT to communicate with \n many different kinds of softwares. It's very common for front ends to call APIs. You don't literally \n call an API, you call it's endpoints. There are disadvantages to calling an API like the fact you're\n relying on a third party who can fail you, often a limited amount of requests, and they might cost\n money.

\n\n // NOTE TO SELF make code examples of calling an API\n \n

JSON (JavaScript Object Notation) is a lightweight data interchange format designed so that\n humans and machines can understand it. It's important because that way the programgers know exactly \n what the machines are getting.

\n\n

Fetch is a way for once server to request data from another server. A fetch requires requires \n two const variables to send data. The first is const response = await fetch(url). The second is \n const data = await response.json();. If you want to do something, besides just retrieve data,\n you need to add the method. He changed the first line from const response = await fetch(url) to\n await fetch(url, {\n method: 'any method except GET',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(data)\n});.

\n\n \n

\n\n \n`;\n\n return c.html(html);\n};\n\nconst app = new Hono();\napp.get(\"/\", HTTP_Guide);\nexport default app.fetch;",[],[172],{"_104":180,"_95":181,"_152":182,"_154":-5,"_155":138,"_156":183,"_158":22,"_106":184,"_100":185,"_161":162,"_163":186,"_165":22,"_166":-5,"_167":187,"_98":188},"439228bc-f6b7-11ef-a521-569c3dd06744","getDataTransfer","840b5ea6-f557-11ef-b5d0-569c3dd06744",97,["D",1740845244477],6,"import { email } from \"https://esm.town/v/std/email?v=11\";\n\nexport default async function(req: Request): Promise {\n if (req.method === \"get\") {\n // Extract form data from the POST request.\n const formData = await req.formData();\n // Retrieve the value from the input field with name \"flavor\".\n const emailAddress = formData.get(\"email\") as string;\n const flavor = formData.getAll(\"flavor\");\n const flavorList = flavor.slice(0, -1).join(\", \") + `, and ` + flavor.slice(-1);\n const flavorNumber = flavor.length;\n\n if (emailAddress) {\n await email({\n to: emailAddress,\n subject: \"Flavors\",\n text: `The flavor(s) you selected are: ${flavorList}`,\n });\n }\n\n if (flavorNumber === 1) {\n return new Response(\n `

You submitted: ${flavor}

`,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n }\n else if (flavorNumber > 1) {\n return new Response(`

You submitted these flavors: ${flavorList}

`, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n }\n\n // For GET requests, return the HTML form.\n return new Response(\n `\n \n \n \n \n \n Desert Order\n \n \n

Ice Cream Order

\n \n Enter your favorite flavor:\n

\n \n

\n \n \n vanilla\n \n

\n \n \n chocolate\n \n

\n \n \n moose tracks\n \n

\n \n \n cookies and cream\n \n

\n Email:\n \n
\n \n \n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}",[],[181],{"_104":190,"_95":191,"_152":192,"_154":-5,"_155":138,"_156":193,"_158":22,"_106":194,"_100":195,"_161":162,"_163":196,"_165":22,"_166":-5,"_167":197,"_98":198},"f0fb6778-f209-11ef-a249-569c3dd06744","logicalJadeCow","af5e5ec2-f206-11ef-857c-569c3dd06744",14,["D",1740330998333],13,"export default async function(req: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n cookie\n \n \n

ice cream!

\n \n \n \n`,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}",[],[191],"files",[150,170,179,189],"counts",{"_203":32,"_204":205,"_206":32,"_207":208},"pulls","branches",2,"forks","envVars",{"_209":32,"_210":32},"count","emptyCount","contents",[],"file",{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":22,"_106":215,"_100":160,"_161":162,"_163":164,"_165":22,"_166":-5,"_98":216},["D",1740687351464],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":225,"_148":230,"_199":243,"_213":244,"_211":246,"_247":-5,"_248":-5,"_249":-5,"_250":-5,"_251":252},{"_104":105,"_95":96,"_106":226,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":227,"_132":228,"_135":229,"_147":22},["D",1740329587152],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[231,234,237,240],{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":22,"_106":159,"_100":160,"_161":162,"_163":164,"_165":22,"_166":-5,"_167":232,"_98":233},[],[99],{"_104":171,"_95":172,"_152":173,"_154":-5,"_155":138,"_156":101,"_158":22,"_106":174,"_100":175,"_161":162,"_163":176,"_165":22,"_166":-5,"_167":235,"_98":236},[],[172],{"_104":180,"_95":181,"_152":182,"_154":-5,"_155":138,"_156":183,"_158":22,"_106":184,"_100":185,"_161":162,"_163":186,"_165":22,"_166":-5,"_167":238,"_98":239},[],[181],{"_104":190,"_95":191,"_152":192,"_154":-5,"_155":138,"_156":193,"_158":22,"_106":194,"_100":195,"_161":162,"_163":196,"_165":22,"_166":-5,"_167":241,"_98":242},[],[191],[231,234,237,240],{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":22,"_106":215,"_100":160,"_161":162,"_163":164,"_165":22,"_166":-5,"_98":245},[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

willthereader

HTTP101