This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.
Production
Playground
https://dash.deno.com/playground/deno-html-json
calling friends with a request.
๐๐ฝSERVER
๐๐ฟโโ๏ธTEXT
๐๐ปโโ๏ธHTML
๐๐ฝJSON
๐๐ฟโโ๏ธAUDIO
ย ย Imagine you're at a party, and you ask a friend to message the DJ across the room. In HTTP, your browser sends a request to a server asking to drop the bass. The DJ processes your request and sends back the track. This exchange is the essence of an HTTP request.
ย ย To demonstrate this browser action I chose to use a single typescript file main.ts developed via deno playground. https://deno-html-json.deno.dev.
๐๐ฟโโ๏ธserver.ts
// deno server.ts
import { listenAndServe } from "https://deno.land/std@0.111.0/http/server.ts";
๐๐ปโโ๏ธhtml
if (pathname.startsWith("/html")) {
const html = `
<html>
<p><a style="color:green">html<b class="text-blue-500"></b><br><marquee style="1"><img src="https://api.iconify.design/logos:html-5.svg?color=%23669c35" alt="HTML Icon" class="inline h-5 w-5 mx-1"></a></p>
</html>`;
return new Response(html, { headers: { "content-type": "text/html; charset=UTF-8" } });
}
๐๐ปโโ๏ธtext
if (pathname.startsWith("/text")) {
const text = "This is plain text. I like to keep things simple around here";
return new Response(text, { headers: { "content-type": "text/plain; charset=UTF-8" } });
}
๐๐ฝjson
if (pathname.startsWith("/json")) {
const json = JSON.stringify({ "json": "could not find a valid date for my structure" });
return new Response(json, { headers: { "content-type": "application/json; charset=UTF-8" } });
}
๐๐ฟโโ๏ธ java
// Random Words
const getRandomWord = () => {
const words = ["text", "audio", "html", "json", "pdf"];
const randomIndex = Math.floor(Math.random() * words.length);
return { word: words[randomIndex], color: getRandomDarkColor() };
};
Cloudflare R2 (storage)
Deno Typescript (playground)
Tailwind (CDN)
Dev.to (contest and inspirtation)
Github (workflow)
Top comments (0)