http request

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Production

https://denodock.deno.dev

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)

Source https://github.com/sudo-self/http-request.git

Blog

sudo-self

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Production

Playground

Join Our Newsletter. No Spam, Only the good stuff.

Related