DEV Community: Benjamin Koimett

Building Real-Time Collaboration: A Simple Guide to Operational Transformation in Go

Benjamin Koimett — Thu, 12 Mar 2026 06:26:33 +0000

Ever wondered how Google Docs or Figma allow multiple people to edit the same document at the same time without destroying each other's work?

The magic behind this is called Operational Transformation (OT) .

OT sounds like complex academic jargon (and it can be), but the core concept is beautiful in its simplicity. Today, we're going to demystify OT by building a tiny, working example in Go.

The Problem: The "Late Comer" Conflict

Imagine two users, Alice and Bob, editing the same text document: "Hello".

Alice decides to insert a space after "Hello". The document becomes "Hello ".
Bob, at the exact same time, decides to insert an exclamation mark at the end. The document becomes "Hello!".

If we just apply these changes in the order they arrive at the server, we have a problem. If the server applies Alice's change first, then Bob's, we get "Hello !" (which is fine). But if it applies Bob's first, then Alice's, we might get "Hello !" as well? Actually, let's look closer:

Server State: "Hello"
Bob's Action: Insert '!' at position 5.
Alice's Action: Insert ' ' at position 5.

If the server applies Bob's change first:

Server applies Bob's insert: "Hello!" (length 6, '!' at index 5).
Now it needs to apply Alice's insert (space at position 5). But position 5 is now occupied by Bob's '!'. The space gets inserted before the '!', resulting in "Hello !".

If the server applies Alice's change first, we get "Hello !" as well. So in this case, we are fine because the operations are commutative (order doesn't matter). But let's look at a case where it does matter.

The Real Conflict: Insert vs. Delete

Let's start with "Hello".

Alice highlights "ell" and deletes it. Desired result: "Ho". Her operation: Delete(start: 1, end: 4).
Bob decides to insert an 'X' at position 1 (between 'H' and 'e'). Desired result: "HXello". His operation: Insert(position: 1, char: 'X').

What happens if the server applies Bob's insert first?

Server: "Hello"
Apply Bob (Insert 'X' at 1): "HXello" (Indices: H=0, X=1, e=2, l=3, l=4, o=5)
Apply Alice (Delete from 1 to 4): We look at the current document. Delete from index 1 to 4. That means deleting indices 1, 2, 3, and 4. That's "Xell". The result is "Ho". This is correct! ("H" + "o").

Now, what if the server applies Alice's delete first?

Server: "Hello"
Apply Alice (Delete from 1 to 4): "Ho" (Indices: H=0, o=1)
Apply Bob (Insert 'X' at 1): Insert 'X' at position 1 of "Ho". This yields "HXo".

Uh oh! The final document is "HXo", but it should be "HXo"? Wait, let's check the desired result. If Bob wanted "HXello" and Alice wanted "Ho", the final result if they were truly collaborating would be "HXo". Actually, in this case, "HXo" is the correct, converged state!

So why do we need OT? Because in a real distributed system, the server might not be the one deciding the order. The clients need to be able to apply changes optimistically and then reconcile them. The key is that every client must end up with the same final state, regardless of the order they saw the operations.

OT solves this by transforming operations against each other so they can be applied in any order and still converge.

The Core Idea of OT

OT works by treating every edit as an operation (Op). When two operations happen concurrently, instead of just applying them in a raw order, we transform one operation against the other.

We need a function: transform(a, b) -> (a', b')

This function takes two operations that were applied to the same document state and returns two new operations. The guarantees are:

Inclusion Property: Applying a then b' results in the same document state as applying b then a'.
Context: a' is a adjusted to make sense after b has been applied, and vice-versa.

Building OT in Go

Let's implement a simplified text OT system in Go. We'll handle two operations: Insert and Delete.

1. Defining Our Operations

First, we define what an operation looks like.

package main

import "fmt"

// OpType defines the kind of operation
type OpType int

const (
    Insert OpType = iota
    Delete
)

// Operation represents a single change
type Operation struct {
    Type  OpType
    Pos   int // Position in the document (0-indexed)
    Data  string // The text to insert or delete
}

func (op Operation) String() string {
    if op.Type == Insert {
        return fmt.Sprintf("Insert('%s' at %d)", op.Data, op.Pos)
    }
    return fmt.Sprintf("Delete('%s' from %d)", op.Data, op.Pos)
}

2. Applying an Operation to a Document

We need a way to apply an operation to a string to see the result.

// Apply performs an operation on a given document state
func Apply(doc string, op Operation) string {
    switch op.Type {
    case Insert:
        return doc[:op.Pos] + op.Data + doc[op.Pos:]
    case Delete:
        return doc[:op.Pos] + doc[op.Pos+len(op.Data):]
    default:
        return doc
    }
}

3. The Heart of OT: The Transform Function

This is where the magic happens. We need to handle all combinations of operations (Insert vs Insert, Insert vs Delete, Delete vs Insert, Delete vs Delete). For simplicity, we'll assume deletions always delete the exact string present (so we store the Data in the delete op).

// Transform takes two operations that were applied to the same state
// and returns two operations that can be applied in reverse order
// to achieve the same final state.
func Transform(a, b Operation) (aPrime, bPrime Operation) {
    // Case 1: Both are Inserts
    if a.Type == Insert && b.Type == Insert {
        if a.Pos < b.Pos {
            // a happens before b in the document.
            // b's position needs to shift right by the length of a's insertion.
            aPrime = a
            bPrime = b
            bPrime.Pos += len(a.Data)
        } else if a.Pos > b.Pos {
            // b happens before a in the document.
            // a's position needs to shift right by the length of b's insertion.
            aPrime = a
            bPrime = b
            aPrime.Pos += len(b.Data)
        } else {
            // Same position. We need a rule. A common strategy is to use a tie-breaker
            // like UserID or in this case, we'll just say the second one (b) goes after.
            aPrime = a
            bPrime = b
            bPrime.Pos += len(a.Data)
        }
        return aPrime, bPrime
    }

    // Case 2: Both are Deletes
    if a.Type == Delete && b.Type == Delete {
        // This gets complex quickly with overlapping ranges.
        // For this simple example, we'll assume non-overlapping deletes for now.
        // A real implementation must handle overlapping ranges carefully.
        // Simplified: If a deletes something entirely before b's delete,
        // b's position needs to shift left by the length of a's deletion.
        if a.Pos+len(a.Data) <= b.Pos {
            aPrime = a
            bPrime = b
            bPrime.Pos -= len(a.Data)
        } else if b.Pos+len(b.Data) <= a.Pos {
            aPrime = a
            bPrime = b
            aPrime.Pos -= len(b.Data)
        } else {
            // Overlap! In a real system, you'd merge these.
            // We'll panic for this demo.
            panic("overlapping deletes not handled in this simple example")
        }
        return aPrime, bPrime
    }

    // Case 3: a is Insert, b is Delete
    if a.Type == Insert && b.Type == Delete {
        if a.Pos <= b.Pos {
            // Insert happens before the delete.
            // The delete's position needs to shift right.
            aPrime = a
            bPrime = b
            bPrime.Pos += len(a.Data)
        } else if a.Pos > b.Pos+len(b.Data) {
            // Insert happens after the deleted region.
            // The insert's position needs to shift left.
            aPrime = a
            bPrime = b
            aPrime.Pos -= len(b.Data)
        } else {
            // Insert happens inside the deleted region.
            // The insert is deleted! So aPrime becomes a no-op? Or we shift it.
            // In a real system, this is handled by the delete including the inserted text.
            // We'll simplify: move insert to the delete position.
            aPrime = a
            bPrime = b
            aPrime.Pos = b.Pos
        }
        return aPrime, bPrime
    }

    // Case 4: a is Delete, b is Insert (symmetrical to case 3)
    if a.Type == Delete && b.Type == Insert {
        // Transform (Delete, Insert) by swapping and using case 3, then swapping back.
        bPrimeSwapped, aPrimeSwapped := Transform(b, a)
        // aPrimeSwapped is the transformed Delete, bPrimeSwapped is the transformed Insert.
        return aPrimeSwapped, bPrimeSwapped
    }

    // Should never reach here if all cases covered
    panic("unknown operation combination")
}

Note: This Transform function is simplified for educational purposes. Production OT systems (like in ShareDB or Google Wave) handle hundreds of edge cases, especially around cursors, selections, and overlapping deletes.

Putting It All Together: A Test

Let's simulate a real concurrent edit scenario to see if our transformation works.

func main() {
    // Start state
    doc := "Hello"
    fmt.Printf("Start: '%s'\n", doc)

    // Two clients start from this state
    aliceOp := Operation{Type: Delete, Pos: 1, Data: "ell"} // Wants "Ho"
    bobOp := Operation{Type: Insert, Pos: 1, Data: "X"}     // Wants "HXello"

    fmt.Printf("Alice wants: %v\n", aliceOp)
    fmt.Printf("Bob wants: %v\n", bobOp)

    // Server receives Alice's op first, then Bob's (or vice versa).
    // To make them work concurrently, we transform them.

    aPrime, bPrime := Transform(aliceOp, bobOp)

    fmt.Printf("\nTransformed Alice: %v\n", aPrime)
    fmt.Printf("Transformed Bob: %v\n", bPrime)

    // Scenario 1: Apply Alice, then Transformed Bob
    state1 := Apply(doc, aliceOp)
    state1 = Apply(state1, bPrime)
    fmt.Printf("\nAlice first, then Bob': '%s'\n", state1)

    // Scenario 2: Apply Bob, then Transformed Alice
    state2 := Apply(doc, bobOp)
    state2 = Apply(state2, aPrime)
    fmt.Printf("Bob first, then Alice': '%s'\n", state2)

    // Check if they converge
    if state1 == state2 {
        fmt.Printf("\n✅ Convergence! Final state: '%s'\n", state1)
    } else {
        fmt.Printf("\n❌ Divergence! '%s' vs '%s'\n", state1, state2)
    }
}

Expected Output

When you run this, you should see:

Start: 'Hello'
Alice wants: Delete('ell' from 1)
Bob wants: Insert('X' at 1)

Transformed Alice: Delete('ell' from 2)
Transformed Bob: Insert('X' at 1)

Alice first, then Bob': 'HXo'
Bob first, then Alice': 'HXo'

✅ Convergence! Final state: 'HXo'

It works! We started with "Hello". The final document is "HXo". This makes sense: Alice deleted "ell" from "Hello" leaving "Ho", and Bob inserted an "X" right after the "H", resulting in "HXo".

By transforming Alice's operation from Delete at 1 to Delete at 2, we accounted for Bob's "X" being inserted before the deleted region.

What's Next?

This is just the tip of the iceberg. A real-world OT system needs:

Cursors & Selections: Transforming cursor positions so they don't jump around.
Undo/Redo: A robust stack system that works with transformed operations.
Networking: A way to send operations between clients and a server (WebSockets in Go are great for this).
Durability: Saving the operation log to a database.

If you're interested in exploring further, check out these excellent resources:

ShareDB: A real-time database backend based on OT.
The original OT paper by Ellis and Gibbs (1990).

OT is a fascinating field that bridges the gap between distributed systems and UX. Go's concurrency model and performance make it a fantastic language to build these real-time collaboration features.

Happy coding! 🚀

Building a Modern Portfolio with Tailwind CSS v4, React, and Vite

Benjamin Koimett — Wed, 18 Feb 2026 00:33:41 +0000

github : https://github.com/bkoimett/bkoimett-portofolio.git

Looking to build a sleek, modern portfolio that stands out? In this comprehensive guide, I'll walk you through creating a professional portfolio from scratch using the latest Tailwind CSS v4, React, and Vite. We'll build a fully responsive site with dark mode support and backend integration.

🚀 Why This Stack?

Vite: Lightning-fast build tool with instant hot module replacement
React: Component-based architecture for reusable UI elements
Tailwind CSS v4: Utility-first CSS with JIT compilation and dark mode support
React Router: Seamless client-side navigation
Axios: Promise-based HTTP client for API integration

📋 Prerequisites

Node.js (v18 or higher)
npm or yarn
Basic knowledge of React and Tailwind

🛠️ Step-by-Step Implementation

1. Project Initialization

# Create a new Vite project with React
npm create vite@latest my-portfolio -- --template react
cd my-portfolio

# Install dependencies
npm install tailwindcss @tailwindcss/vite @vitejs/plugin-react
npm install react-router-dom axios

# Start development server
npm run dev

2. Configure Vite for Tailwind v4

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

3. Set Up Global Styles

src/index.css

@import "tailwindcss";

/* Custom theme variables */
@theme {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Dark mode support */
:root {
  color-scheme: light;
}

:root.dark {
  color-scheme: dark;
}

/* Smooth theme transitions */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

4. Theme Context for Dark/Light Mode

src/context/ThemeContext.jsx

import React, { createContext, useState, useEffect, useContext } from 'react';

const ThemeContext = createContext();

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

export const ThemeProvider = ({ children }) => {
  const [isDark, setIsDark] = useState(() => {
    const savedTheme = localStorage.getItem('theme');
    if (!savedTheme) {
      return window.matchMedia('(prefers-color-scheme: dark)').matches;
    }
    return savedTheme === 'dark';
  });

  useEffect(() => {
    if (isDark) {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    }
  }, [isDark]);

  const toggleTheme = () => setIsDark(!isDark);

  return (
    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

5. Key Components

Theme Toggle Button - src/components/ThemeToggle.jsx

import React from 'react';
import { useTheme } from '../context/ThemeContext';

const ThemeToggle = () => {
  const { isDark, toggleTheme } = useTheme();

  return (
    <button
      onClick={toggleTheme}
      className="fixed top-6 right-6 p-3 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors z-50 shadow-md"
      aria-label="Toggle theme"
    >
      {isDark ? (
        <svg className="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
          <path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
        </svg>
      ) : (
        <svg className="w-5 h-5 text-gray-700" fill="currentColor" viewBox="0 0 20 20">
          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
        </svg>
      )}
    </button>
  );
};

export default ThemeToggle;

6. Building the Main Pages

Home Page - src/pages/Home.jsx

import React from 'react';

const Home = () => {
  return (
    <div className="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
      <div className="max-w-3xl mx-auto px-6 text-center">
        <h1 className="text-5xl md:text-6xl font-light text-gray-900 dark:text-white mb-6 tracking-tight">
          Alex Chen
        </h1>
        <p className="text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto">
          Software Engineer specializing in Cloud Infrastructure, DevOps, 
          and Embedded Systems
        </p>

        <div className="flex flex-wrap justify-center gap-3 mb-12">
          {['☁️ AWS', '🚀 Kubernetes', '💻 React', '🔧 Embedded C', '📦 Terraform', '🤖 CI/CD'].map((skill) => (
            <span
              key={skill}
              className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium"
            >
              {skill}
            </span>
          ))}
        </div>

        <div className="flex justify-center space-x-4">
          <a 
            href="/projects" 
            className="px-6 py-3 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors font-medium"
          >
            View My Work
          </a>
          <a 
            href="/about" 
            className="px-6 py-3 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:border-gray-900 dark:hover:border-white hover:text-gray-900 dark:hover:text-white transition-colors font-medium"
          >
            About Me
          </a>
        </div>
      </div>
    </div>
  );
};

export default Home;

Projects Page with Filtering - src/pages/Projects.jsx

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Projects = () => {
  const [projects, setProjects] = useState([]);
  const [filter, setFilter] = useState('all');
  const [loading, setLoading] = useState(true);

  const categories = ['all', 'Cloud', 'DevOps', 'Web Dev', 'Embedded'];

  useEffect(() => {
    const fetchProjects = async () => {
      try {
        // Replace with your actual API endpoint
        const response = await axios.get('http://localhost:3001/api/projects');
        setProjects(response.data);
      } catch (error) {
        console.error('Error fetching projects:', error);
        // Fallback sample data
        setProjects([
          {
            id: 1,
            title: 'Cloud Infrastructure Automation',
            description: 'Scalable AWS infrastructure using Terraform and Kubernetes',
            category: 'Cloud',
            image: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=600&auto=format',
            technologies: ['Terraform', 'AWS', 'K8s'],
          },
          // Add more projects...
        ]);
      } finally {
        setLoading(false);
      }
    };

    fetchProjects();
  }, []);

  const filteredProjects = filter === 'all' 
    ? projects 
    : projects.filter(p => p.category === filter);

  return (
    <div className="min-h-screen bg-white dark:bg-gray-900 pt-24 pb-16">
      <div className="max-w-6xl mx-auto px-6">
        <h2 className="text-3xl font-light text-gray-900 dark:text-white mb-8">
          Featured Projects
        </h2>

        {/* Filter buttons */}
        <div className="flex flex-wrap gap-2 mb-10">
          {categories.map((cat) => (
            <button
              key={cat}
              onClick={() => setFilter(cat)}
              className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
                filter === cat
                  ? 'bg-gray-900 text-white dark:bg-white dark:text-gray-900'
                  : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
              }`}
            >
              {cat === 'all' ? 'All Projects' : cat}
            </button>
          ))}
        </div>

        {/* Projects grid */}
        {loading ? (
          <div className="text-center py-12">
            <div className="inline-block animate-spin rounded-full h-8 w-8 border-4 border-gray-300 dark:border-gray-600 border-t-gray-900 dark:border-t-white"></div>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {filteredProjects.map((project) => (
              <div
                key={project.id}
                className="group bg-gray-50 dark:bg-gray-800 rounded-xl overflow-hidden hover:shadow-xl transition-all duration-300"
              >
                <div className="overflow-hidden">
                  <img
                    src={project.image}
                    alt={project.title}
                    className="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                </div>
                <div className="p-6">
                  <div className="flex items-center justify-between mb-3">
                    <span className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      {project.category}
                    </span>
                    <div className="flex gap-2">
                      {project.technologies.slice(0, 3).map((tech) => (
                        <span
                          key={tech}
                          className="text-xs px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded"
                        >
                          {tech}
                        </span>
                      ))}
                    </div>
                  </div>
                  <h3 className="text-xl font-medium text-gray-900 dark:text-white mb-2">
                    {project.title}
                  </h3>
                  <p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
                    {project.description}
                  </p>
                  <button className="text-sm font-medium text-gray-900 dark:text-white hover:underline">
                    View Case Study →
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default Projects;

7. Main App Component

src/App.jsx

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ThemeProvider } from './context/ThemeContext';
import Navbar from './components/Navbar';
import ThemeToggle from './components/ThemeToggle';
import Home from './pages/Home';
import Projects from './pages/Projects';
import About from './pages/About';

function App() {
  return (
    <ThemeProvider>
      <Router>
        <div className="min-h-screen bg-white dark:bg-gray-900">
          <Navbar />
          <ThemeToggle />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/projects" element={<Projects />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </div>
      </Router>
    </ThemeProvider>
  );
}

export default App;

🔌 Backend Integration

To make the portfolio dynamic, you can set up a simple Express backend:

server/index.js

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

// Projects API endpoint
app.get('/api/projects', (req, res) => {
  const projects = [
    {
      id: 1,
      title: 'Cloud Infrastructure Automation',
      description: 'Scalable AWS infrastructure using Terraform and Kubernetes',
      category: 'Cloud',
      image: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=600&auto=format',
      technologies: ['Terraform', 'AWS', 'K8s'],
    },
    // Add more projects...
  ];
  res.json(projects);
});

app.listen(3001, () => {
  console.log('Server running on port 3001');
});

✨ Key Features Implemented

Dark/Light Mode Toggle - Persistent theme switching with system preference detection
Responsive Design - Mobile-first approach using Tailwind's responsive utilities
Project Filtering - Category-based filtering with smooth transitions
Loading States - Spinner indicators for async operations
Backend Ready - Axios integration for API calls
Smooth Animations - Hover effects and transitions
Clean Navigation - React Router with active link highlighting

🚀 Deployment

Build for Production

npm run build

Deploy to Vercel (Recommended)

npm install -g vercel
vercel

Deploy to Netlify

npm run build
# Drag and drop the 'dist' folder to Netlify

📈 SEO Optimization Tips

Add meta tags in index.html:

<meta name="description" content="Portfolio of Alex Chen - Software Engineer specializing in Cloud, DevOps, and Embedded Systems">
<meta name="keywords" content="software engineer, portfolio, cloud, devops, react, tailwind">

Use semantic HTML (header, main, section, article)
Add alt text to all images
Implement proper heading hierarchy (h1, h2, h3)

🎨 Customization Ideas

Add a blog section with MDX support
Implement a contact form with EmailJS
Add smooth scroll animations with Framer Motion
Include a resume download button
Add testimonials carousel
Implement portfolio item modals

📚 Resources

Tailwind CSS v4 Documentation
React Documentation
Vite Documentation
Unsplash - Free images for your projects

💡 Pro Tips

Performance: Use lazy loading for images and code splitting for routes
Accessibility: Ensure proper contrast ratios and keyboard navigation
Testing: Add unit tests for components using Jest and React Testing Library
Analytics: Integrate Google Analytics or Plausible for visitor insights

🎯 Conclusion

You've now built a modern, professional portfolio with cutting-edge technologies! This setup gives you:

✅ Lightning-fast development with Vite
✅ Beautiful, responsive design with Tailwind CSS v4
✅ Dark mode with system preference detection
✅ Dynamic content with API integration
✅ Clean, maintainable code structure

The best part? You can easily extend this foundation with additional features like a blog, case studies, or even an admin dashboard.

Ready to make it your own? Fork the code, customize the content, and deploy your portfolio today!

Found this guide helpful? Share it with your network! Have questions? Drop them in the comments below.

Tags: #React #TailwindCSS #Vite #WebDevelopment #Portfolio #Frontend #JavaScript #DevOps

This tutorial was originally published on Dev.to. Follow me for more web development content!

github: https://github.com/bkoimett/bkoimett-portofolio.git
linkedIn: https://www.linkedin.com/in/benjamin-koimett-699959366/

Pointers in Go: A Practical Guide for Developers

Benjamin Koimett — Tue, 03 Feb 2026 10:32:06 +0000

Understanding the Basics

Pointers in Go are often misunderstood by developers coming from languages that hide pointer complexity or don't have them at all. At their core, pointers are simply variables that store memory addresses rather than actual values.


var x int = 42
var ptr *int = &x  // & gets the address, *int declares a pointer type

Why Pointers Matter in Go

1. Performance and Memory Efficiency

When you pass large structs to functions, Go copies the entire struct by default. Pointers let you pass a reference instead:


type User struct {
    ID   int
    Name string
    // ... 20 more fields
}

// Inefficient - copies entire struct
func processUser(u User) {
    // ...
}

// Efficient - passes reference
func processUserPtr(u *User) {
    // ...
}

2. Modifying Function Arguments

Go passes arguments by value, meaning functions receive copies. To modify the original, you need pointers:


func increment(x int) {
    x++ // Only modifies the copy
}

func incrementPtr(x *int) {
    *x++ // Dereferences and modifies the original
}

func main() {
    val := 10
    increment(val)     // val is still 10
    incrementPtr(&val) // val becomes 11
}

3. Working with Methods

Go has both value and pointer receivers for methods, which affects mutability:


type Counter struct {
    value int
}

// Value receiver - works on a copy
func (c Counter) Get() int {
    return c.value
}

// Pointer receiver - can modify original
func (c *Counter) Increment() {
    c.value++
}

func main() {
    c := Counter{value: 5}
    c.Increment() // Go automatically converts to (&c).Increment()
    fmt.Println(c.Get()) // Output: 6
}

Common Pointer Patterns

The nil Pointer Check

Always check for nil pointers before dereferencing:
go

func printName(user *User) {
    if user == nil {
        fmt.Println("User is nil")
        return
    }
    fmt.Println(user.Name)
}

Pointer to Pointer (Rare but Useful)

Sometimes you need multiple levels of indirection:
go

func allocateMatrix(rows, cols int) **int {
    matrix := make([]*int, rows)
    for i := range matrix {
        row := make([]int, cols)
        matrix[i] = &row[0]
    }
    return &matrix[0]
}

Returning Pointers from Functions

Returning pointers to local variables is safe in Go thanks to escape analysis:
go

func createUser(name string) *User {
    return &User{Name: name} // Go allocates this on the heap
}

When to Use Pointers (and When Not To)

Use pointers when:

Structs are large (prevents copying)
You need to modify the original value
Working with methods that change receiver state
Dealing with optional parameters (nil pointer = not provided)

Avoid pointers when:

Working with basic types (int, bool, string) unless modification is needed
The struct is small (copying is cheaper than dereferencing)
You want immutability by default
Working with concurrency (pointers require careful synchronization)

Gotchas and Best Practices

1. Pointer Arithmetic is Not Allowed

Unlike C, Go doesn't allow pointer arithmetic for safety:
go

// This won't compile in Go
ptr := &arr[0]
ptr++ // Error: invalid operation

2. Maps and Slices are Already References

Maps and slices already contain pointers internally, so you often don't need pointers to them:
go


func modifySlice(s []int) {
    s[0] = 100 // Modifies the original slice
}

3. Interface Values Can Hold Pointers

When storing structs in interfaces, be aware of the pointer/value distinction:
go

type Speaker interface {
    Speak() string
}

type Dog struct{ name string }

func (d *Dog) Speak() string { return "Woof!" }

func main() {
    var s Speaker
    d := Dog{name: "Rex"}
    // s = d     // Error: Dog doesn't implement Speaker
    s = &d       // OK: *Dog implements Speaker
}

4. Use new() vs. Composite Literals

// Both are valid, but have different use cases
u1 := new(User)     // Zero-valued User, returns *User
u2 := &User{ID: 1}  // Initialized User, returns *User

Performance Considerations

Go's compiler performs escape analysis to determine whether variables should be allocated on the heap or stack. Don't prematurely optimize by using pointers everywhere - let the compiler do its job and profile your code first.

// The compiler will determine where to allocate
func createUser() *User {
    u := User{Name: "Alice"} // Might be stack or heap allocated
    return &u
}

Testing with Pointers

When testing functions that use pointers, remember that &User{} creates a pointer:
The key to mastering pointers is practice. Start with simple cases, understand when data is being copied versus referenced, and gradually work up to more complex patterns. Happy coding!

func TestProcessUser(t *testing.T) {
    user := &User{Name: "Test"}
    result := processUserPtr(user)
    // Test assertions
}

## Conclusion

Pointers in Go strike a balance between C's explicit memory control and higher-level language safety. They're essential for:

Writing efficient code with large data structures
Implementing mutable method receivers
Creating flexible APIs with optional parameters

Remember the golden rule: Use pointers when you need to share or modify data, otherwise prefer values. This approach gives you performance when needed while maintaining code clarity and safety.

The key to mastering pointers is practice. Start with simple cases, understand when data is being copied versus referenced, and gradually work up to more complex patterns. Happy coding!

Strings vs Slices: a Love Triangle with Characters 💔🧵

Benjamin Koimett — Thu, 29 Jan 2026 10:53:46 +0000

Every developer eventually stands at this crossroads:

“Do I treat this string like a civilized adult…
or do I slice it into little byte goblins and hope for the best?”

If you’ve ever printed "🙂" and got four mysterious numbers instead, congratulations—you’ve met UTF-8 in a dark alley.

Let’s break it down. No gaslighting. No sugar. Just facts, vibes, and a little brain rot.

Option 1: Treating strings as bytes

(a.k.a. “It works on ASCII, ship it”)

In languages like Go, a string is basically:

“Here’s a read-only bag of bytes. Do not ask questions.”

Pros

🚀 Fast. Like ‘blink and you missed it’ fast

🧠 Simple mental model

📦 No extra memory allocations

Perfect for:

Protocols
File formats
ASCII-only data
When performance is king and Unicode is a rumor

Cons

💥 UTF-8 will humble you
Slicing can split characters in half
(congrats, you’ve invented emotional damage)
Counting characters? ❌
You’re counting bytes. Very different beasts.

s := "Go🙂" fmt.Println(len(s)) // 6 (bro what?)

This is the programming equivalent of:

“I asked for vibes and got taxes.”

Option 2: Converting to rune slices

(a.k.a. “I respect human languages”)

Enter: []rune.

This says:

“I want characters, not byte soup.”

Pros

🌍 Unicode-safe

🧩 One rune = one character (mostly, calm down linguists)

✂️ Safe slicing, reversing, indexing

You won’t accidentally bisect an emoji like a psycho

r := []rune("Go🙂")
fmt.Println(len(r)) // 3 (nature is healing)

Cons

🐢 Slower (conversion costs)

🧠 More memory

Overkill if you know you’re dealing with ASCII

This is the “touch grass” option. Mature. Responsible. Slightly heavier.

So… which one is best? 🤔

Here’s the cold truth:

Neither is “best.” Context is king.

Use raw strings / bytes when:
You’re doing low-level work
Performance matters more than feelings
Input is guaranteed ASCII
You’re parsing, not presenting

Use rune slices when:

You’re manipulating text for humans
You care about correctness
Emojis, accents, or non-English text exist
You don’t want bug reports titled
“App deletes half my name 😭”

The Big Brain Take 🧠✨

Default to strings.
Switch to []rune the moment you manipulate characters.
Switch back when you’re done.

Yes, converting back and forth feels annoying.

So does debugging Unicode bugs at 2 a.m.
Pick your poison.

Final Thought (read in a dramatic narrator voice)

Bytes are fast.
Runes are safe.
Unicode is inevitable.

Choose wisely, or the emojis will unionize.

If this saved you from slicing an emoji in half, smash that like button, sacrifice a semicolon, and may your strings always be valid UTF-8.

Stay hydrated. Stay compiled. 🫡

From Hello, World to “Wait… I Can Explain This?”

Benjamin Koimett — Sun, 18 Jan 2026 17:50:57 +0000

I didn’t start coding because I was some prodigy kid dismantling radios at age nine.
I started because curiosity refused to shut up—and because Google kept saying “learn to code” like it was a life hack I hadn’t tried yet.

My first lines of code were ugly.
Not “wabi-sabi” kindly ugly you know?. I mean crime-scene ugly type-shi.

Things broke. Often.
Semicolons went missing like your girlfriends when rally in Naivasha..... I digress😂😂.
Errors stared back at me with zero empathy and full confidence.

But somewhere between debugging at 2 a.m. and celebrating a button that finally worked, something clicked:

Code isn’t magic. It’s communication.~ FKiche 25'

You’re talking to a machine.
You’re also talking to future-you.
And if you’re brave enough—other humans too.

The Silent Struggle of New Devs (Yes, That One)

Early on, I thought real developers didn’t ask questions.
Spoiler: they do. Constantly. Loudly. Yes, be it AI or Stack Overflow, we need answers and we need them now dammit.

I thought documentation was boring.
Another spoiler: bad documentation is boring. Good documentation saves lives. Or at least deadlines.

I’d learn something today, forget it tomorrow, re-learn it next week, and swear I’d “write it down next time.”
Next time never came… until it did.

That’s when technical writing snuck up on me.

Why I Started Writing (Besides Therapy)

I didn’t wake up one day and declare, “I am now a technical writer.”
Nope. I just got tired of re-learning the same things. And Stacy mentioned it severally😂

So I wrote:

Notes that turned into explanations

Now join me in turning these explanations turned into posts

Posts that somehow helped other people

And that feeling?
That moment when someone says “this finally made sense”?

Yeah. That hits different.

The idead of writing forced me to slow down.
To stop pretending I understood something just because the code ran.
If I couldn’t explain it simply, I didn’t understand it deeply. Period.

dev.to Felt Like the Right Place

dev.to doesn’t demand perfection.
It welcomes honesty.

You can show up as:

a beginner

a learner

a developer mid-confusion

a developer mid-breakthrough

That’s powerful.

This platform feels less like a stage and more like a campfire.
We’re all swapping stories about bugs that humbled us and wins that kept us going.

What I’m Writing About (And Why)

I’m not here to act like an expert.
I’m here to document the climb.

Expect posts about:

- Learning curves that felt vertical
- Concepts that clicked after frustration
- Tools that confused me before they empowered me
- Mistakes I don’t want you to repeat

If it helps one person shave an hour off their debugging time—or feel less alone in the struggle—worth it.

Final Thought (No Sugar, Just Truth)

Coding will humble you.
Writing about coding will humble you faster.

But together?
They sharpen each other.

So here I am—
still learning, still breaking things, still asking “why,”
and now, finally, writing it down.

If you’re starting out too:
you’re not late.
you’re not behind.
you’re right on time.

See you in the comments.
Let’s build. Let’s explain. Let’s get better—out loud. 🚀