DEV Community: Sithuni Nudara

Beyond the API: Why the Agent Development Kit (ADK) is the New Backend Standard

Sithuni Nudara — Wed, 29 Apr 2026 16:09:53 +0000

For those of us who have spent years in the trenches of backend development—shuffling data between MySQL databases, perfecting Java logic, and micro-managing Cloud Run deployments—Google Cloud NEXT ‘26 felt like a bit of a "fork in the road" moment.

The keynote wasn't just about faster chips or cheaper storage; it was a clear signal that the era of the "static application" is being replaced by the era of the "reasoning agent." After digging through the announcements and diving into the new codelabs, one release specifically stood out as a game-changer for anyone building logic-heavy systems: the Agent Development Kit (ADK) and its companion, the Agent Engine.

The Shift from "If-Then" to Reasoning
Traditional backend engineering is built on predictability. We write a function, and we expect a specific output. But as we integrate LLMs into our workflows, that predictability breaks.

What I found most compelling about the ADK is how it bridges the gap between traditional software engineering and generative AI. It doesn't ask you to throw away your coding skills. Instead, it gives you a structured framework to build agents that can actually do things—like interacting with APIs or navigating complex database schemas—rather than just chatting about them.

Hands-on: Building with the ADK and A2UI
During the event, I spent some time exploring the "Build rich agent experiences" codelab, which focuses on the ADK and A2UI (Agent-to-User Interface).

If you’ve ever tried to build a UI for an AI agent, you know the "chat bubble" format is getting a bit tired. A2UI is Google’s answer to this. It allows the agent to move beyond text and generate high-quality, intuitive interfaces dynamically.

My Takeaway: The real power here isn't just the "agentic" reasoning; it's the Agent Engine. Being able to deploy these agents as containerized microservices that scale just like a standard Cloud Run instance is a massive win. It means we can treat an AI agent like any other part of our tech stack—monitor it, scale it, and secure it using IAM and Model Armor.

The "Underrated" Highlight: Google’s Official Skills Library
While the big keynotes focused on massive multi-agent systems, I think the launch of the Official Skills Library is being overlooked.

Think of Skills as "plugins" for your agents. Instead of writing custom logic for every single task (like translating text, querying a specific dataset, or processing an image), you can pull from a repository of pre-built, optimized skills. For a developer looking to move fast, this is the "npm" moment for AI agents. It reduces the boilerplate and lets us focus on the unique business logic of our applications.

A Critique: The Learning Curve
It’s not all sunshine and rainbows, though. While Google is doing a great job of making these tools accessible, the jump from "traditional dev" to "agentic dev" is steep. Understanding how to ground agents effectively—using tools like the Google Maps Platform or AlloyDB NL2SQL—requires a deep understanding of data relationships that many might find daunting at first.

The documentation is getting there, but I’d love to see more "bridge" content—tutorials that show how to migrate a standard PHP or Java backend service into an ADK-managed agent.

Final Thoughts
Google Cloud NEXT ‘26 proved that AI isn't just a feature we're adding to our apps anymore; it’s becoming the foundation. The ADK and Agent Engine are providing the scaffolding we need to build more than just "chatbots." We're building systems that can reason, act, and scale.

If you’re a developer still on the fence, I highly recommend checking out the Cloud Run: Zero to Production guide alongside the agent-specific codelabs. The future of the backend is here, and it’s agentic.

What about you? Which NEXT '26 announcement are you most excited to implement in your current projects? Let's discuss in the comments!

GoogleCloudNext #AI #WebDev #CloudComputing #SoftwareEngineering

Coding the Balance: Visualizing Gender Equity Through Frontend Art

Sithuni Nudara — Mon, 09 Mar 2026 09:20:52 +0000

This is a submission for the 2026 WeCoded Challenge: Frontend Art

Inspiration
For this challenge, I wanted to move beyond static images and use code to represent the weightless, yet powerful nature of equity. The concept is "Anti-Gravity Equity." In the tech industry, we often talk about the "glass ceiling." In this piece, I visualized the ceiling not just as a barrier to be broken, but as something that, once shattered, allows everyone to rise. I used floating elements and CSS animations to create a sense of weightlessness—representing a world where your gender doesn't "weight down" your career path.

The central focus is a balanced scale, built entirely with frontend logic (Flexbox and Grid), symbolizing that true balance is a deliberate architectural choice we make when building our communities.

My Code
The logic for the animations and the layout can be found in my repository here:

GitHub Repository: sithunitestings-source/Frontend-Art

I used a combination of:

CSS Keyframes: To create the drifting, anti-gravity effect for the UI components.

SVG & Clip-path: To design the "shattered glass" fragments that react to user interaction.

Flexbox: To ensure the "Balance" remains perfect across all screen sizes.

From Yellow Blocks to Backend Logic: My Journey of Staying "Updated"

Sithuni Nudara — Mon, 09 Mar 2026 08:36:03 +0000

This is a submission for the 2026 WeCoded Challenge: Echoes of Experience

The Spark: It All Started with a Block
If you told my younger self that I’d be building backend systems today, I probably would have laughed. My journey didn’t start with complex algorithms or black-and-white terminal screens. It started with a bright yellow block on Scratch.

I remember the pure joy of snapping those logic blocks together to make a character move or a game come to life. What started as "just for fun" quickly turned into an addiction. By the time I chose ICT for high school in Sri Lanka, coding wasn't just a subject—it was my favorite hobby. Today, as a Software Engineering student, that hobby has become my career. The most important thing I’ve learned is simple: Do what you love, and it will make you shine. When you’re passionate, the late nights feel less like work and more like an adventure.

The Challenge: The Mental "Context Switch"
As an underrepresented developer, I often felt I had to be a walking encyclopedia of code to prove I belonged. One of the hardest challenges I faced wasn't logic—it was syntax fatigue.

When you are learning and working across multiple languages, switching from the structure of Java to the web-logic of PHP or C#, your brain starts to feel like a browser with too many tabs open. It’s hard to remember every semicolon and bracket perfectly. The pressure to stay "constantly updated" is exhausting. Sometimes, when you focus so hard on mastering one language, the others start to feel like a foreign tongue again. Being in "always-on" mode is the silent hurdle many of us face.

The Lesson: Adaptability is the New Superpower
Through this journey, I’ve realized that being a developer isn't about memorizing a textbook. Whether I’m learning from a YouTube tutorial or a structured curriculum, the most vital lesson is this: Technology doesn't stand still, and neither can we.

In 2026, the game has changed. It’s no longer just about writing lines of code; it’s about adaptability. We have to learn how to dance with AI, how to use AI-integrated IDEs to bridge the gap in our memory, and how to stay updated without burning out.

To anyone out there who wants to be a full-stack developer, don't worry if you can't remember every bit of syntax. Focus on the logic, stay curious, and pick courses that look toward the future, not the past. If you can adapt, you can survive and thrive in this industry.

3D Cyber Clock

Sithuni Nudara — Wed, 18 Feb 2026 19:46:18 +0000

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRYSTAL CYBER · 3D ROUND CLOCK</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            min-height: 100vh;
            background: radial-gradient(circle at 30% 30%, #0b0f1c, #03050a);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Segoe UI', 'Avenir', 'Inter', system-ui, sans-serif;
            overflow: hidden;
            position: relative;
        }

        /* animated cyber background (time animation) */
        .cyber-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            opacity: 0.5;
            background: repeating-linear-gradient(0deg, 
                rgba0,255,255,0.02 0px, 
                rgba0,255,255,0.05 2px, 
                transparent 2px, 
                transparent 8px),
                repeating-linear-gradient(90deg, 
                rgba170, 0, 255, 0.02 0px, 
                rgba0, 255, 255, 0.03 3px, 
                transparent 3px, 
                transparent 12px);
            animation: bg-scroll 20s linear infinite;
            pointer-events: none;
        }

        @keyframes bg-scroll {
            0% { background-position: 0 0, 0 0; }
            100% { background-position: 40px 60px, -60px 40px; }
        }

        /* floating particles (extra magic) */
        .bg-particles {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .bg-particles span {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba0, 255, 255, 0.25;
            box-shadow: 0 0 12px #0ff, 0 0 20px #2ca0ff;
            border-radius: 50%;
            animation: float-particle 18s infinite alternate ease-in-out;
        }

        @keyframes float-particle {
            0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
            100% { transform: translate(40px, -60px) scale(1.8); opacity: 0; }
        }

        /* main container – movable 3d effect */
        .clock-container {
            position: relative;
            z-index: 30;
            transform-style: preserve-3d;
            transform: perspective(1200px) rotateX(4deg) rotateY(6deg) translateZ(20px);
            transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
            cursor: default;
            filter: drop-shadow(0 20px 30px #00000070);
        }

        .clock-container:hover {
            transform: perspective(1000px) rotateX(2deg) rotateY(12deg) translateZ(30px);
        }

        /* 3D glass ring + numbers */
        .round-clock {
            --glow: 0 0 30px #00ffff88, 0 0 70px #00a3ff66;
            --dark-cyan: #0e4b5e;
            --crystal-light: #b5f0ff;
            width: 360px;
            height: 360px;
            border-radius: 50%;
            background: radial-gradient(circle at 28% 30%, 
                rgba(20, 80, 100, 0.7) 5%, 
                #131f2b 60%,
                #0b141c 95%);
            box-shadow: 
                inset -6px -10px 20px rgba0,0,0,0.9,
                inset 15px 15px 30px rgba(170, 240, 255, 0.4),
                0 0 0 2px rgba(0, 255, 255, 0.3) inset,
                0 0 0 4px rgba(20, 40, 50, 0.8),
                0 20px 35px #000000cc,
                var(--glow);
            position: relative;
            backdrop-filter: blur(2px);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: box-shadow 0.4s, background 0.3s;
        }

        /* hover = light mode / cyan explosion */
        .round-clock:hover {
            --glow: 0 0 40px cyan, 0 0 100px #7ff0ff, 0 0 150px #2ad4ff;
            background: radial-gradient(circle at 30% 30%, 
                rgba(150, 250, 255, 0.4) 5%, 
                #1e3b48 50%,
                #0b1a24 95%);
            box-shadow: 
                inset -6px -10px 20px #000000aa,
                inset 20px 20px 40px #d0f4ff,
                0 0 0 3px #4ff5ff inset,
                0 0 0 5px #0099aa33,
                0 25px 45px #000,
                var(--glow);
        }

        /* crystal 3D facets (glass layers) */
        .clock-facet {
            position: absolute;
            inset: 8px;
            border-radius: 50%;
            background: repeating-conic-gradient(
                from 45deg,
                rgba(170, 240, 255, 0.05) 0deg 10deg,
                rgba(10, 30, 40, 0.3) 10deg 20deg,
                transparent 20deg 30deg
            );
            pointer-events: none;
            border: 1px solid rgba(0, 255, 255, 0.2);
            box-shadow: 0 0 20px rgba(0, 200, 210, 0.3) inset;
        }

        .clock-facet::after {
            content: '';
            position: absolute;
            inset: 20px;
            border-radius: 50%;
            background: radial-gradient(circle at 40% 40%, rgba(255,255,255,0.2) 2px, transparent 30%);
            opacity: 0.6;
        }

        /* digital numbers (cyan, mixed with gray/black crystal) */
        .digital-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 220px;
            height: 220px;
            background: rgba(8, 18, 28, 0.5);
            backdrop-filter: blur(4px);
            border-radius: 50%;
            border: 2px solid rgba(0, 255, 255, 0.25);
            box-shadow: 0 0 40px #0ff3, 0 0 20px #2e5f6b inset;
            transform: translateZ(12px);
            transition: all 0.2s;
        }

        .round-clock:hover .digital-display {
            background: rgba(20, 40, 50, 0.4);
            border: 2px solid #aaffff;
            box-shadow: 0 0 70px cyan, 0 0 30px #3ff inset;
        }

        .time {
            font-size: 3.6rem;
            font-weight: 400;
            letter-spacing: 6px;
            color: #00ffff;
            text-shadow: 0 0 12px cyan, 0 0 30px #0077ff, 0 0 45px #004466;
            font-family: 'Orbitron', 'Courier New', monospace;
            background: linear-gradient(135deg, #a0f0ff 20%, #38858f 70%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: text-shadow 0.3s;
            line-height: 1.2;
        }

        .round-clock:hover .time {
            text-shadow: 0 0 20px #f0fdff, 0 0 50px #3cc, 0 0 80px #0ff;
            background: linear-gradient(135deg, #efff ff 10%, #6ff0ff 90%);
            -webkit-background-clip: text;
            background-clip: text;
        }

        .date {
            font-size: 1.1rem;
            letter-spacing: 3px;
            color: #6baeb6;
            text-shadow: 0 0 10px #0ff;
            background: #121e24b3;
            padding: 4px 16px;
            border-radius: 40px;
            margin-top: 8px;
            backdrop-filter: blur(2px);
            border: 1px solid #2a8a9a;
            font-weight: 300;
            transition: 0.3s;
        }

        .round-clock:hover .date {
            background: #16363f;
            color: #e0ffff;
            border-color: cyan;
            box-shadow: 0 0 20px cyan;
        }

        /* seconds弧形指示 (extra cyber) */
        .second-ring {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            transform: rotate(-90deg);
        }

        .second-ring circle {
            fill: none;
            stroke-width: 5;
            stroke: #0ff;
            filter: drop-shadow(0 0 15px cyan);
            stroke-linecap: round;
            stroke-dasharray: 879.2; /* circumference for r=140 ~ 879.2 */
            stroke-dashoffset: 879.2;
            transition: stroke-dashoffset 0.1s linear;
        }

        .second-ring-bg {
            stroke: rgba0, 180, 200, 0.25;
            stroke-width: 5;
            fill: none;
        }

        /* 3D movable base reflection */
        .glass-reflection {
            position: absolute;
            top: 10%;
            left: 15%;
            width: 40%;
            height: 20%;
            background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(8px);
            mix-blend-mode: overlay;
            pointer-events: none;
        }

        .glass-reflection2 {
            bottom: 15%;
            right: 10%;
            width: 30%;
            height: 15%;
            background: radial-gradient(ellipse, #6fffff40, transparent 80%);
            position: absolute;
            filter: blur(12px);
            border-radius: 50%;
        }

        /* movable control: subtle rotate on mousemove */
        .clock-container.movable {
            transition: transform 0.08s;
        }

        footer {
            position: absolute;
            bottom: 16px;
            color: #1d7c84;
            font-size: 0.8rem;
            text-shadow: 0 0 4px cyan;
            z-index: 40;
            letter-spacing: 2px;
        }
    </style>
</head>
<body>
    <div class="cyber-bg"></div>
    <div class="bg-particles" id="particles"></div>

    <div class="clock-container" id="clockContainer">
        <div class="round-clock" id="roundClock">
            <!-- 3d crystal facets -->
            <div class="clock-facet"></div>
            <!-- seconds progress ring (svg) -->
            <svg class="second-ring" viewBox="0 0 360 360" width="360" height="360">
                <circle class="second-ring-bg" cx="180" cy="180" r="160" stroke="#097a8f55" stroke-width="6" fill="none"/>
                <circle id="secCircle" cx="180" cy="180" r="160" stroke="#0ff" stroke-width="8" fill="none" 
                    stroke-dasharray="1005.3" stroke-dashoffset="1005.3" style="filter: drop-shadow(0 0 25px cyan);" />
            </svg>
            <!-- digital core -->
            <div class="digital-display">
                <div class="time" id="timeDisplay">23:15</div>
                <div class="date" id="dateDisplay">2025-04-07</div>
            </div>
            <!-- extra glass glitter -->
            <div class="glass-reflection"></div>
            <div class="glass-reflection2"></div>
        </div>
    </div>

    <footer>❖ C R Y S T A L   C Y B E R   3 D ❖</footer>

    <script>
        (function() {
            // particles background magic
            const particleContainer = document.getElementById('particles');
            for (let i = 0; i < 36; i++) {
                let span = document.createElement('span');
                let size = Math.random() * 6 + 2;
                span.style.width = size + 'px';
                span.style.height = size + 'px';
                span.style.left = Math.random() * 100 + '%';
                span.style.top = Math.random() * 100 + '%';
                span.style.animationDelay = Math.random() * 15 + 's';
                span.style.animationDuration = 10 + Math.random() * 20 + 's';
                span.style.background = i % 3 === 0 ? '#7ff5ff' : '#3ea0cc';
                span.style.boxShadow = `0 0 30px #0ff, 0 0 50px #1fa0ff`;
                particleContainer.appendChild(span);
            }

            // time update + animation
            const timeEl = document.getElementById('timeDisplay');
            const dateEl = document.getElementById('dateDisplay');
            const secCircle = document.getElementById('secCircle');

            function updateClock() {
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                const seconds = now.getSeconds();
                timeEl.textContent = `${hours}:${minutes}`;

                const year = now.getFullYear();
                const month = (now.getMonth() + 1).toString().padStart(2, '0');
                const day = now.getDate().toString().padStart(2, '0');
                dateEl.textContent = `${year}-${month}-${day}`;

                // update second ring (circumference for r=160 = 2*pi*160 ≈ 1005.3)
                const radius = 160;
                const circumference = 2 * Math.PI * radius; // ~1005.3
                const offset = circumference - (seconds / 60) * circumference;
                secCircle.style.strokeDasharray = `${circumference}`;
                secCircle.style.strokeDashoffset = offset;
            }
            updateClock();
            setInterval(updateClock, 500);

            // 3D movable effect: follow cursor
            const container = document.getElementById('clockContainer');
            const roundClock = document.getElementById('roundClock');
            let bounds = container.getBoundingClientRect();
            let mouseX = 0, mouseY = 0;
            let currentRotateX = 4, currentRotateY = 6; // initial values
            const factor = 0.04; // sensitivity

            window.addEventListener('resize', () => {
                bounds = container.getBoundingClientRect();
            });

            document.addEventListener('mousemove', (e) => {
                // relative position to window
                const centerX = window.innerWidth / 2;
                const centerY = window.innerHeight / 2;

                // offset from center (-1..1)
                const normX = (e.clientX - centerX) / centerX;
                const normY = (e.clientY - centerY) / centerY;

                // target rotation angles (max ±12°)
                const targetRotateY = 6 + normX * 8;   // horizontal tilt
                const targetRotateX = 4 - normY * 6;   // vertical tilt

                // smooth-ish update
                currentRotateX += (targetRotateX - currentRotateX) * 0.1;
                currentRotateY += (targetRotateY - currentRotateY) * 0.1;

                container.style.transform = `perspective(1200px) rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg) translateZ(20px)`;
            });

            // extra hover light effect: but we keep hover in css, fine.
            // also add dynamic shadow enhancement on hover
            roundClock.addEventListener('mouseenter', () => {
                // optional: we could add class, but css handles it.
            });

            // add magic floating animation on digits randomly (extra spark)
            setInterval(() => {
                if (Math.random() > 0.7) {
                    timeEl.style.transform = `scale(${1 + Math.random() * 0.1})`;
                    timeEl.style.transition = 'transform 0.15s cubic-bezier(0.2,1,0.5,1)';
                    setTimeout(() => {
                        timeEl.style.transform = 'scale(1)';
                    }, 150);
                }
            }, 800);

            // also change the color of date for micro interaction
            setInterval(() => {
                if (Math.random() > 0.85) {
                    dateEl.style.textShadow = '0 0 18px #f0f, 0 0 30px #0ff';
                    dateEl.style.transition = '0.1s';
                    setTimeout(() => {
                        dateEl.style.textShadow = '0 0 10px #0ff';
                    }, 120);
                }
            }, 1300);
        })();
    </script>
    <!-- optional font for better digits -->
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500&display=swap" rel="stylesheet">
</body>
</html>