DEV Community

Cover image for Colorful Counter
sudo-self
sudo-self

Posted on

Colorful Counter

upstash-rediss.deno.dev

counters may be dime a dozen however a vast space for creativity is there. serverless. Another page view counter in production.

Typescript with deno is straight forward.

// server.ts
Deno.serve((_request: Request) => {
  return new Response("serverless data with Upstash");
});

Enter fullscreen mode Exit fullscreen mode

Wasting no time head over to Upstash create a Redis serverless database.

Once complete there are two key pieces of info were gonna grab for the project that make up the rest API were gonna use to access our data....

Image description

UPSTASH_REDIS_REST_URL

UPSTASH_REDIS_REST_TOKEN

copy them to a temporary file or leave a tab open then move them them directly to .env via playground.

deno runtime.

curl -fsSL https://deno.land/install.sh | sh
Enter fullscreen mode Exit fullscreen mode

In the quickstarts we find the handler function. all the work is done here just grab this and start a new deno playground. Deno Playground

import { serve } from "https://deno.land/std@0.142.0/http/server.ts";
import { Redis } from "https://deno.land/x/upstash_redis@v1.14.0/mod.ts";

serve(async (_req: Request) => {

    if( ! _req.url.endsWith("favicon.ico") ) {
        const redis = new Redis({
            url: '**YOUR ENDPOINT**',
            token: '**YOUR TOKEN**',
        })

        const counter = await redis.incr("deno-counter");
        return new Response(JSON.stringify({ counter }), { status: 200 });
    }


});

Enter fullscreen mode Exit fullscreen mode

save & deploy.

The url should now return a json.

{"count":197}
Enter fullscreen mode Exit fullscreen mode

Json

Upstash endpoint and token moved to .env via playground settings.


const token = Deno.env.get("UPSTASH_REDIS_TOKEN");
const redisUrl = Deno.env.get("UPSTASH_REDIS_URL");

Then all were doing in that same space is rendering html with a tailwind CDN.

const counter = await redis.incr("deno-counter");
${counter}

//deno.json

{
  "tasks": {
    "dev": "deno run --watch main.ts"
  }
}
Enter fullscreen mode Exit fullscreen mode

implement in production, another project, or keep creating.

export to GitHub direct from playground.

Image description

upstash-rediss.deno.dev

//Generating random colors

const randomColor = generateRandomHexColor();

function generateRandomHexColor() {
    const randomColor = Math.floor(Math.random()*16777215).toString(16);
    return "#" + randomColor;
}
Enter fullscreen mode Exit fullscreen mode
//html with tailwind CDN and GitHub buttons 

 <!DOCTYPE html>
            <html lang="en">
            <head>

                <script async defer src="https://buttons.github.io/buttons.js"></script>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Counter</title>
                <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
            </head>
            <body class="bg-gray-100 flex flex-col items-center justify-center h-screen">
                <div class="max-w-md w-full mx-auto rounded-lg p-6 mb-4" style="background-color: <u>${randomColor};</u>">
                    <div class="bg-white shadow-md rounded-lg p-6">
                        <h1 class="text-3xl font-semibold text-center mb-4 cursor-pointer text-green-500 hover:text-green-600" onclick="location.reload()">Counter</h1>
                        <div class="text-center">
                            <p class="text-5xl font-bold mb-4"><u>${counter}</u></p>
                            <p class="text-lg text-gray-500 mb-4">https://upstash-rediss.deno.dev</p>
                            <a class="github-button" href="https://github.com/sudo-self/upstash-deno" data-color-scheme="no-preference: dark; light: dark; dark: dark_high_contrast;" data-icon="octicon-star" data-size="large" aria-label="Star sudo-self/upstash-deno on GitHub">Star</a>
                            <p class="text-lg text-gray-500 mb-4">MAC address: ${macAddress}</p>
                        </div>
                    </div>
                </div>
            </body>
            </html>
Enter fullscreen mode Exit fullscreen mode

Guthub.com/sudo-self/upstash-deno

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay