DEV Community: Kevin MARVILLE

I will update the https://dev.to/polliog/i-replaced-redis-with-postgresql-and-its-faster-4942

Kevin MARVILLE — Thu, 22 Jan 2026 22:50:12 +0000

I Replaced Redis with PostgreSQL (And It's Faster)

Polliog ・ Jan 9

#postgres #redis #database #performance

I Replaced Redis with PostgreSQL (And It's Faster)

Polliog ・ Jan 9

#postgres #redis #database #performance

Chess Player Game 🎉 Building a Vue.js

Kevin MARVILLE — Fri, 26 Jul 2024 16:51:23 +0000

A Fun Journey with Pawns, Knights, and Kings! 👑

Hey Dev.to community! 🌟

I've been on quite an adventure lately, and I'm excited to share my latest creation with you: a chess game built with Vue.js! 🏰♟️

Now, I know what you're thinking: "Chess in Vue.js? Really?" But hear me out. It's been a fun ride, and I promise you, no rooks were harmed in the making of this project. 😉

The Inspiration 🧠💡

Every developer loves a good challenge, and what's more challenging (and rewarding) than creating a classic game like chess? It all started when I stumbled upon an old chessboard while cleaning my attic. After a few games with my imaginary opponent (who was surprisingly good), I thought, "Why not bring this to life in Vue.js?"

The Setup ⚙️🔨

Let's dive into the nitty-gritty. Setting up a chessboard in Vue.js involves some interesting twists and turns. Here’s a sneak peek into the magic:

Initializing the Board

First, we need to set up our chessboard:

data() {
  return {
    board: this.initializeBoard(),
    pieceImages: {
      wp: "path/to/white-pawn.png",
      // ... other pieces
    }
  };
},
methods: {
  initializeBoard() {
    return [
      "br", "bn", "bb", "bq", "bk", "bb", "bn", "br",
      "bp", "bp", "bp", "bp", "bp", "bp", "bp", "bp",
      "", "", "", "", "", "", "", "",
      // ... empty squares
      "wp", "wp", "wp", "wp", "wp", "wp", "wp", "wp",
      "wr", "wn", "wb", "wq", "wk", "wb", "wn", "wr"
    ];
  }
}

Rendering the Board

Next, we render the board with a simple grid layout:

<div class="board">
  <div
    v-for="(square, index) in board"
    :key="index"
    class="square"
    :class="getSquareColor(index)"
    @click="handleSquareClick(index)"
  >
    <img v-if="square" :src="getPieceImage(square)" alt="Piece" />
  </div>
</div>

Handling Moves

Handling moves involves some basic logic to ensure pieces move correctly:

methods: {
  handleSquareClick(index) {
    if (this.selectedSquare === null) {
      if (this.board[index] && this.board[index][0] === this.turn[0]) {
        this.selectedSquare = index;
      }
    } else {
      const validMove = this.isValidMove(this.selectedSquare, index);
      if (validMove) {
        this.board[index] = this.board[this.selectedSquare];
        this.board[this.selectedSquare] = "";
        this.selectedSquare = null;
        this.turn = this.turn === "white" ? "black" : "white";
      } else {
        this.selectedSquare = null;
      }
    }
  }
}

Check It Out! 🎉

If you're curious to see the code in action, check out this Pen I made:

Feel free to fork it, tweak it, and maybe even teach it a few new tricks! I’d love to see what you come up with. 🎨👨‍💻

Final Thoughts 💭❤️

Creating this chess game has been a blast, and I hope you find it as enjoyable to play and modify as I did to build. Vue.js makes it super easy to manage the state and logic, and who knew that pawns could be so much fun?

Until next time, happy coding! And may your pawns always find their way to the other side of the board. 🏁♟️✨

Vision Week (test)

Kevin MARVILLE — Sun, 16 Jun 2024 21:09:09 +0000

Vision Week: A Journey into the Virtual Zoo

I'm thrilled to share my latest project with you all – Vision Week, an immersive virtual zoo experience that combines interactive maps, VR tours, and a user-friendly interface to bring the wonders of wildlife directly to your screen.

Project Overview

Vision Week is designed to offer a seamless and engaging experience for users of all ages. The application features various sections, each meticulously crafted to ensure an intuitive and enjoyable journey through the virtual zoo.

Key Features

Home Screen
- Welcome message and introduction to Vision Week.
- Latest posts and animal conservation statistics.
Virtual Tour Screen
- VR viewer for an immersive experience of the Arctic exhibit.
- Detailed information about the habitat and animals like polar bears, seals, and more.
Interactive Map Screen
- A 3D map to navigate through the zoo.
- Locate different sections and learn about various exhibits.
User Profile Screen
- Manage profile information and subscription details.
- View personal stats and achievements.

Interactive Elements

To enhance user engagement, I’ve incorporated various interactive elements such as animations, pop-ups, and geometric shapes. The application is fully responsive, ensuring a smooth experience across all devices.

Check it Out!

I'm excited to invite you to explore Vision Week on CodePen. Here’s the link to the project: Check out this Pen I made!

Your feedback and suggestions are highly valued, so please feel free to share your thoughts. Together, we can make Vision Week an even better experience!

Happy exploring! 🌍🦊

Welcome to Celebration Website 🌍 Earth Day !

Kevin MARVILLE — Sun, 28 Apr 2024 03:34:16 +0000

Preview is here

As we approach April 22, we're thrilled to introduce you to our Earth Day Celebration website. This platform is dedicated to raising awareness about environmental issues and inspiring action to protect our planet. 🌍✨

Explore Our Website

Our Earth Day Celebration website is a comprehensive resource for all things related to Earth Day. From educational materials to interactive activities, we aim to engage and inform visitors about the importance of environmental conservation. Dive in and discover how you can make a difference!

Get Involved

The source code for our Earth Day project is available on GitHub. We encourage developers and enthusiasts alike to contribute and help us enhance this project. 🌱 Repository Link

Key Features

Reduce, Reuse, Recycle

Learn about the 3 R's: Reduce, Reuse, and Recycle. Our website offers practical tips and resources to help you minimize waste and adopt sustainable practices. Start making small changes today that can lead to a big impact. 🔄

Volunteer for Cleanups

Join local clean-up efforts to remove litter from parks, beaches, and waterways. Our site provides information on how to get involved and make a tangible difference in your community. #CommunityService #Volunteer

Conserve Resources

Discover simple yet effective ways to conserve water, save electricity, and reduce your carbon footprint. Our website provides actionable advice to help you live more sustainably every day. 💧💡

Plant Trees 🌳

Trees are essential for combating climate change. Explore our site to learn about tree-planting initiatives and find out how you can participate in reforestation efforts. Every tree planted makes a difference! #PlantATree #ForestRestoration

Interactive Activities

Earth Day Quiz

Test your environmental knowledge with our engaging Earth Day quiz. Learn new facts and find out how you can contribute to a healthier planet. 🌟 Take the Quiz

Calculate Your Carbon Footprint

Use our easy-to-use tool to estimate your carbon footprint based on your energy consumption, transportation habits, and more. Understanding your impact is the first step towards reducing it.

// Description: Calculate carbon footprint
function calculateCarbonFootprint() {
    let carbonFootprint = 0;
    // Calculate carbon footprint based on energy consumption, transportation, etc.
    return carbonFootprint;
}

Inspiring Quotes

"The environment is where we all meet; where we all have a mutual interest; it is the one thing all of us share." - Lady Bird Johnson

"We do not inherit the Earth from our ancestors; we borrow it from our children." - Native American Proverb

Join the Community

Participate in Earth Day Events

Our website features a calendar of local and global Earth Day events. Whether it’s a clean-up, tree-planting event, or educational workshop, your participation can make a significant impact. Check out more events and activities in the app store.

Conclusion

Our Earth Day Celebration website is more than just a platform; it's a call to action. By coming together as a community, we can work towards a sustainable future for generations to come. Explore our site, get involved, and let's make every day Earth Day. 🌎💚