DEV Community

Cover image for http request
sudo-self
sudo-self

Posted on β€’ Edited on

1

http request

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

Image description

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.

Image description

  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";
Enter fullscreen mode Exit fullscreen mode

πŸ™‹πŸ»β€β™€οΈ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" } });
  }
Enter fullscreen mode Exit fullscreen mode

πŸ™‹πŸ»β€β™€οΈ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" } });
  }
Enter fullscreen mode Exit fullscreen mode

πŸ™‹πŸ½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" } });
  }
Enter fullscreen mode Exit fullscreen mode

πŸ™‹πŸΏβ€β™‚οΈ 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() };
  };
Enter fullscreen mode Exit fullscreen mode

Cloudflare R2 (storage)
Deno Typescript (playground)
Tailwind (CDN)
Dev.to (contest and inspirtation)
Github (workflow)

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

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs