DEV Community: Devvill Monki Ventures

My Kubernetes Background Jobs Were Running 3x (Here's the Simple Fix)

Devvill Monki Ventures — Wed, 17 Sep 2025 08:54:55 +0000

Had a background job in Kubernetes. Super simple - check for pending work every 5 minutes:

setInterval(() => {
  checkPendingJobs(); // Send emails, process data, cleanup tasks
}, 5 * 60 * 1000);

Deployed to 3 pods for "high availability." Big mistake.

What Actually Happened

Monday morning: Users getting duplicate emails, database CPU spiking. Checking logs:

Pod-A: Processing job #123 - sending welcome email
Pod-B: Processing job #123 - sending welcome email  
Pod-C: Processing job #123 - sending welcome email

All 3 pods wake up at the exact same time, query the database, find the same pending jobs, and process them in parallel.

Classic race condition.

How I Fixed It (Wrong Way First)

Tried database locks. Tried Redis locks. Tried leader election. All complex, all brittle.

Then realized something obvious: Why am I trying to coordinate 3 workers when I only need 1 job to run?

The Simple Solution

Deleted the setInterval. Made it an HTTP endpoint:

app.post('/jobs/process', async (req, res) => {
  await checkPendingJobs();
  res.json({status: 'done'});
});

Added external scheduler (GCP Cloud Scheduler):

gcloud scheduler jobs create http my-job \
  --schedule="*/5 * * * *" \
  --uri="https://myapp.com/jobs/process"

That's it. Scheduler hits the endpoint, load balancer picks one pod, job runs once.

Why This Beats Locking

No race conditions possible - only one request
Way less code - no coordination logic
Better reliability - managed scheduler vs app timers
Easier debugging - clear request logs
Works everywhere - AWS EventBridge, cron, whatever

The Pattern

Stop asking "How do I coordinate multiple instances?"

Start asking "Do I need multiple instances doing this?"

Most background jobs are perfect for external triggers:

File processing → storage events
Cache warming → deployment hooks
Cleanup tasks → schedulers
Health checks → external monitoring

Been running this for months. Zero duplicate jobs. Zero 2 AM alerts.

Sometimes the best distributed systems solution is... not distributing the work.

Similar war stories? Drop them below.

Roles & Permissions: Building a Secure and Efficient Full-Stack Product

Devvill Monki Ventures — Mon, 30 Jun 2025 08:58:47 +0000

Role-based permissions are more than just toggling features on or off—they’re a foundation for scalable, maintainable products. As a Senior Engineer eyeing a Technical Architect path, you’ll often decide who sees what, ensuring security, consistency, and efficiency across your stack.

In this post, we’ll explore:

The importance of role-based access in UI + backend.
A Strategy Pattern implementation to keep logic clean and flexible.
Best practices to future-proof your approach.

1. Why Roles & Permissions Matter

Better User Experience: Show only what’s relevant. Users aren’t overwhelmed with irrelevant features.
Security & Compliance: Minimize accidental or malicious access.
Cleaner Code: Centralize permission checks; no more copy-paste checks scattered everywhere.

2. Frontend Implementation: Hiding UI Elements

Imagine a React app where certain features (like “Delete User” or “Edit Billing”) are visible only to specific roles. We can use the Strategy Pattern to decide at runtime which set of permissions apply:

// strategy/permissionStrategies.js

// [Strategy Pattern] Each strategy defines a permission set for a specific role.
export const adminPermissions = {
  canDeleteUser: true,
  canEditBilling: true,
  canViewAnalytics: true
};

export const managerPermissions = {
  canDeleteUser: false,
  canEditBilling: true,
  canViewAnalytics: true
};

export const userPermissions = {
  canDeleteUser: false,
  canEditBilling: false,
  canViewAnalytics: true
};

// A helper to get the right strategy object for the current user role
export const getPermissions = (role) => {
  switch (role) {
    case "admin":
      return adminPermissions;
    case "manager":
      return managerPermissions;
    default:
      return userPermissions;
  }
};

// components/FeatureButton.jsx

import React from "react";
import { getPermissions } from "../strategy/permissionStrategies";

function FeatureButton({ role, feature, onClick, children }) {
  const perms = getPermissions(role);

  // Only render button if user has the correct permission
  if (!perms[feature]) return null;

  return (
    <button
      onClick={onClick}
      className="p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
    >
      {children}
    </button>
  );
}

export default FeatureButton;

How it works

Strategy Objects (adminPermissions, managerPermissions, userPermissions) define capabilities per role.
In the component, we lookup permissions based on the user role at runtime.
If the user cannot perform the feature, we simply don’t render the button.

This approach:

Keeps UI logic simple—no big if-else blocks in every component.
Centralizes permission definitions for easy future updates.

3. Backend Implementation: Enforcing Access

Hiding UI elements is good, but server-side checks are crucial. Otherwise, a savvy user could still call APIs directly. Let’s implement a Strategy Pattern in Node.js (Express):


// controllers/permissionStrategyController.js

// [Strategy Pattern] Each strategy defines backend logic for handling roles differently.
const adminStrategy = {
  canDeleteUser: () => true,
  canEditBilling: () => true,
  canViewAnalytics: () => true,
};

const managerStrategy = {
  canDeleteUser: () => false,
  canEditBilling: () => true,
  canViewAnalytics: () => true,
};

const userStrategy = {
  canDeleteUser: () => false,
  canEditBilling: () => false,
  canViewAnalytics: () => true,
};

function getBackendStrategy(role) {
  switch (role) {
    case "admin":
      return adminStrategy;
    case "manager":
      return managerStrategy;
    default:
      return userStrategy;
  }
}

// Example: Deleting a user in the backend
exports.deleteUser = (req, res) => {
  const { userRole } = req.body; // e.g., 'admin', 'manager', 'user'
  const strategy = getBackendStrategy(userRole);

  if (!strategy.canDeleteUser()) {
    return res.status(403).json({ error: "Unauthorized action" });
  }

  // Proceed with deletion...
  // ...
  return res.json({ message: "User deleted successfully" });
};

Key Points

Strategy Pattern: Each role has an object that encapsulates its capabilities.
Centralized logic: All permissions are in one place, preventing accidental oversights.
Consistent with Frontend: If the UI hides a feature, the backend also rejects it if requested directly.

4. Why This Makes a Great Product Feature

User-Centric: Restricting the UI to relevant features improves usability.
Security: Minimizes potential abuse or accidental misuse by ensuring checks at both the frontend and backend.
Extensibility: Adding a new role (e.g., supervisor) is as simple as adding another strategy. No rewriting everywhere else.
Maintainability: Developers quickly find and update permission rules without wading through scattered checks.

5. Areas for Improvement & Best Practices

Database Storage: Instead of hardcoding, store roles & permissions in a database.
JWT / Session Management: Ensure user roles in requests are validated (e.g., via tokens).
Caching: Caching permission sets for frequent lookups can boost performance.
Logging & Auditing: Keep track of role changes or permission overrides for compliance.
Test Coverage: Unit tests for each strategy ensure no accidental changes break permissions.

Conclusion
Roles and permissions might seem trivial until your product hits scale or faces security issues. By aligning frontend UI checks with backend server enforcement, using a Strategy Pattern, you keep your code organized, your product safe, and your users happy.

Feel free to adapt this approach to suit your stack—just don’t forget that a well-thought-out permissions system is a massive competitive advantage in any tech product.

Thanks for reading!
If you found this helpful, share your own roles/permissions tips in the comments and let’s learn together.

Pixelated Image Animation with Framer Motion

Devvill Monki Ventures — Mon, 30 Jun 2025 08:54:48 +0000

Creating a Stunning Pixelated Image Animation with Framer Motion

Ever wanted to create that mesmerizing effect where an image appears to assemble itself pixel by pixel as you scroll? Today, I'll walk you through building a captivating pixelated image animation using React and Framer Motion that will make your portfolio stand out from the crowd.

🎯 What We're Building

We're creating an animated component that:

Breaks an image into a grid of individual pixels
Scatters these pixels randomly across the screen initially
Assembles them into the complete image as the user scrolls
Provides smooth, performant animations using Framer Motion

🛠️ The Tech Stack

React - For component structure
Framer Motion - For smooth animations and scroll-based triggers
TypeScript - For type safety and better developer experience
Tailwind CSS - For styling (optional but recommended)

🎨 The Animation Breakdown

The magic happens in two main components:

1. The PixelatedImage Component

This is our main orchestrator that sets up the grid and manages the overall animation.

2. The Pixel Component

Each individual pixel that knows how to animate itself from a random position to its final location.

💻 Implementation

Let's dive into the code:

// PixelatedImage.tsx
"use client";
import { motion, useTransform, MotionValue } from "framer-motion";
import { useMemo } from "react";

interface PixelProps {
  i: number;
  src: string;
  gridSize: number;
  width: number;
  height: number;
  scrollYProgress: MotionValue<number>;
}

const Pixel = ({
  i,
  src,
  gridSize,
  width,
  height,
  scrollYProgress,
}: PixelProps) => {
  const row = Math.floor(i / gridSize);
  const col = i % gridSize;

  // Calculate which part of the image this pixel should show
  const backgroundPosition = `${(col / (gridSize - 1)) * 100}% ${(row / (gridSize - 1)) * 100}%`;
  const backgroundSize = `${gridSize * 100}% ${gridSize * 100}%`;

  // Generate random initial positions (cached with useMemo)
  const [initialX, initialY] = useMemo(
    () => [
      (Math.random() - 0.5) * width * 1.5,
      (Math.random() - 0.5) * height * 1.5,
    ],
    [width, height]
  );

  // Calculate animation timing for staggered effect
  const numPixels = gridSize * gridSize;
  const pixelProgress = i / numPixels;
  const animationStart = pixelProgress * 0.8;
  const animationDuration = 0.2;

  // Create smooth transforms based on scroll progress
  const x = useTransform(
    scrollYProgress,
    [animationStart, animationStart + animationDuration],
    [initialX, 0]
  );
  const y = useTransform(
    scrollYProgress,
    [animationStart, animationStart + animationDuration],
    [initialY, 0]
  );
  const opacity = useTransform(
    scrollYProgress,
    [animationStart, animationStart + animationDuration],
    [0, 1]
  );
  const scale = useTransform(
    scrollYProgress,
    [animationStart, animationStart + animationDuration],
    [0.5, 1]
  );

  return (
    <motion.div
      className="w-full h-full"
      style={{
        backgroundImage: `url(${src})`,
        backgroundPosition,
        backgroundSize,
        x,
        y,
        opacity,
        scale,
      }}
    />
  );
};

interface PixelatedImageProps {
  src: string;
  width: number;
  height: number;
  scrollYProgress: MotionValue<number>;
}

const PixelatedImage = ({
  src,
  width,
  height,
  scrollYProgress,
}: PixelatedImageProps) => {
  const gridSize = 20; // 20x20 grid = 400 pixels
  const numPixels = gridSize * gridSize;

  return (
    <div className="relative w-[250px] h-[250px] md:w-[400px] md:h-[400px]">
      {/* Background circle for aesthetic */}
      <div className="absolute inset-0 rounded-full bg-gray-200 dark:bg-gray-800" />

      {/* Pixel grid */}
      <div
        className="relative z-10 w-full h-full grid"
        style={{
          gridTemplateColumns: `repeat(${gridSize}, 1fr)`,
          gridTemplateRows: `repeat(${gridSize}, 1fr)`,
        }}
      >
        {Array.from({ length: numPixels }).map((_, i) => (
          <Pixel
            key={i}
            i={i}
            src={src}
            gridSize={gridSize}
            width={width}
            height={height}
            scrollYProgress={scrollYProgress}
          />
        ))}
      </div>
    </div>
  );
};

export default PixelatedImage;

🔍 How It Works

1. Grid Setup

We create a 20x20 CSS Grid, giving us 400 individual pixels. Each pixel is a div that shows a specific portion of the source image using CSS background-position and background-size.

2. Background Positioning Magic

const backgroundPosition = `${(col / (gridSize - 1)) * 100}% ${(row / (gridSize - 1)) * 100}%`;
const backgroundSize = `${gridSize * 100}% ${gridSize * 100}%`;

This calculates exactly which part of the image each pixel should display. Think of it like cutting a photo into a jigsaw puzzle - each piece knows exactly where it belongs.

3. Staggered Animation

const pixelProgress = i / numPixels;
const animationStart = pixelProgress * 0.8;

Instead of all pixels animating at once, we stagger them based on their index. This creates a beautiful cascading effect where pixels assemble in sequence.

4. Smooth Transforms

Using Framer Motion's useTransform, we create smooth transitions for:

Position (x, y) - From random scatter to final position
Opacity - Fade in effect
Scale - Subtle zoom-in for extra polish

🎪 Usage in a Scroll-Based Layout

Here's how to integrate it into a scroll-triggered section:

const About = () => {
  const scrollRef = useRef(null);
  const { scrollYProgress } = useScroll({
    target: scrollRef,
    offset: ["start start", "end end"],
  });

  const imageScrollYProgress = useTransform(scrollYProgress, [0, 0.8], [0, 1]);

  return (
    <section ref={scrollRef} className="py-16 h-[500vh]">
      <div className="sticky top-0 container mx-auto flex items-center h-screen">
        <div className="w-1/2 flex items-center justify-center">
          <PixelatedImage
            src="/your-image.png"
            width={250}
            height={250}
            scrollYProgress={imageScrollYProgress}
          />
        </div>
        {/* Your content here */}
      </div>
    </section>
  );
};

⚡ Performance Considerations

useMemo for Random Values: We cache the random initial positions to prevent recalculation on every render.
CSS Grid Over Absolute Positioning: CSS Grid is more performant than calculating absolute positions for hundreds of elements.
Transform Instead of Layout Properties: Using transform for animations is hardware-accelerated and doesn't trigger layout recalculations.
Reasonable Grid Size: 20x20 (400 pixels) provides good visual quality without overwhelming the browser.

🎨 Customization Ideas

Want to make it your own? Try these variations:

Different Grid Sizes: Smaller grids (10x10) for a more chunky pixel effect, larger grids (30x30) for smoother transitions
Animation Patterns: Instead of sequential, try animating from center outward or in a spiral pattern
Color Effects: Add color transitions or filters during the animation
Multiple Images: Create a slideshow effect with multiple pixelated images

🚀 Browser Support

This animation works great in all modern browsers that support:

CSS Grid (IE11+)
CSS Transforms (IE9+)
ES6 features (or with appropriate polyfills)

🎉 Conclusion

This pixelated image animation is a perfect example of how modern web technologies can create engaging, performant visual effects. The combination of CSS Grid, Framer Motion, and clever mathematical calculations results in an animation that's both visually stunning and technically solid.

The key takeaways:

Break complex animations into smaller, manageable pieces
Use CSS features like Grid and transforms for performance
Leverage Framer Motion's scroll-based animations for smooth interactions
Cache expensive calculations to maintain 60fps

Ready to add some pixel magic to your next project? Give it a try and let me know what creative variations you come up with!

Found this helpful? Follow me for more web animation tutorials and React tips! 🚀

🔗 Resources

Mobile App with Expo & Firebase Auth - Part 1: Setup

Devvill Monki Ventures — Sun, 06 Apr 2025 16:33:26 +0000

In this first post, I'll show you how to set up your Expo project and configure Firebase for authentication.

Step 1: Create Your Expo Project

Open your terminal and run:

expo init MyAuthApp
cd MyAuthApp
expo start

This initializes your project and starts the Expo development server.

Step 2: Set Up Firebase

Go to the Firebase Console and create a new project.
In the Authentication section, enable Email/Password and Google sign-in.

Install Firebase in your project:
npm install firebase

Create a file named firebaseConfig.js with your Firebase credentials:

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  // ...other settings
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export { firebase };

Step 3: Create an Auth Context

Make a new file called AuthContext.js inside a context folder:

import React, { createContext, useState, useEffect } from 'react';
import { firebase } from '../firebaseConfig';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged(currentUser => {
      setUser(currentUser);
      setLoading(false);
    });
    return unsubscribe;
  }, []);

  return (
    <AuthContext.Provider value={{ user, loading }}>
      {children}
    </AuthContext.Provider>
  );
};

Then, wrap your main component with the Auth Provider in App.js:

import React from 'react';
import { AuthProvider } from './context/AuthContext';
import Routes from './Routes';

export default function App() {
  return (
    <AuthProvider>
      <Routes />
    </AuthProvider>
  );
}

Conclusion
In this post, we set up an Expo project, configured Firebase for authentication, and created a simple Auth Context to handle user sessions. Next time, I'll cover building the login and sign-up screens.

Happy coding!

From Full Stack to Full Circle: My Journey Towards Technical Architecture

Devvill Monki Ventures — Fri, 28 Mar 2025 05:19:55 +0000

“You’re either building the product… or you’re building yourself while building it.”

I’m Vinay, a full-stack engineer from Bengaluru—Node.js, React, and an obsession for clean, scalable systems. But beyond code, my journey is shaped by crossing roles, carving paths, and confronting assumptions.

🎢 From Developer to Product Whisperer

I started as the typical “heads-down” dev. Feature tickets in, PRs out. But I always found myself asking:

Why are we building this? Who is this really for?

That curiosity led me to blur the lines between engineering and product ownership. Soon, I was leading conversations—not just commits. I wasn’t just writing logic; I was shaping it.

Challenge?

Earning credibility while wearing multiple hats. When you don’t "look the part," you often have to prove the part tenfold.

🎯 The Vision Now: Becoming a Technical Architect

My next chapter? Stepping into the shoes of a Technical Architect—someone who can:

Design systems that scale,
Mentor minds that grow,
And connect business goals with beautiful code.

It’s not just a career pivot—it’s a mindset shift. From “What code solves this?” to “What architecture empowers the team?”

💡 Lessons I’ve Learned

Titles follow impact. Don’t wait for a designation to lead.
Bridge tech and people. Code is easy. Communication is the boss level.
Mentor as you grow. There’s always someone behind you and someone ahead.

👋 To My Fellow Underdogs

To those underrepresented in tech: You’re not alone. Visibility matters. Your story matters. And your unique lens can reshape how we build for the world.

If no one's handing you the blueprint—draw your own.

Leveraging Currying to Optimize React

Devvill Monki Ventures — Tue, 16 May 2023 17:51:20 +0000

Introduction:

When working with forms in React, efficient and concise code is essential to improve readability and maintainability. In this article, we'll explore how currying can be used to optimize form handling in React components. We'll compare the initial implementation with the optimized version and discuss the benefits of using currying.

Initial Implementation

Initially,we create separate event handler functions for each input field, resulting in repetitive code. While this approach works, it can lead to code duplication and reduced maintainability as the number of form fields increases.

import React, { useState } from 'react';

function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [notes, setNotes] = useState("");

  const handleNameChange = (e) => {
    setName(e.target.value);
  };

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handleNotesChange = (e) => {
    setNotes(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={handleNameChange}
        placeholder="Name"
      />
      <br />
      <input
        type="email"
        value={email}
        onChange={handleEmailChange}
        placeholder="Email"
      />
      <br />
      <textarea
        value={notes}
        onChange={handleNotesChange}
        placeholder="Notes"
      ></textarea>
    </div>
  );
}

Optimized Implementation with Currying

To optimize the code, we can leverage currying to create a reusable event handler function. Currying allows us to generate specialized event handler functions on the fly by partially applying arguments. Here's the optimized implementation using currying:

// Optimized Implementation with Currying
// ...

const handleChange = (stateFunc) => (e) => {
  stateFunc(e.target.value);
};

// ...

<input
  type="text"
  value={name}
  onChange={handleChange(setName)}
  placeholder="Name"
/>

// ...

In the above, we define a single handleChange function that takes a stateFunc as an argument. This function returns a new function that is used as the onChange event handler for each input field. By currying the stateFunc, we create specialized event handlers for each input field without duplicating code.

Check Source Code here

Benefits of Currying

Code Reusability
Concise and Readable Code
Flexibility and Scalability

That's all, Bye & thanks

Reload other tabs with a value change in current tab

Devvill Monki Ventures — Tue, 16 May 2023 17:15:09 +0000

Have you ever faced the need to reload multiple tabs of your web application after a user changes some settings, like switching their account? One solution to this problem is to use the localStorage API to communicate changes across multiple tabs.

I will explain how to do this in a react application. I'll be explaining in class based component so it will be easily understood.

Let's consider an example where User is switching his profile, and considering accountID is the unique value which changes on account/profile switch and we will store that in local storage of the browser.

Using the Storage Event
The storage event is fired on the window object when a key in the localStorage object is updated. You can use it to detect changes in the values stored in localStorage and perform any necessary updates in your application.

const accountID = "abc" // getting a new unique account ID
localStorage.setItem('accountID', accountID);

Window: storage event

The **storage event **is fired on all window objects (i.e., all open tabs), but we only want to handle changes made in the current tab.

class MyComponent extends React.Component {
  componentDidMount() {
    window.addEventListener('storage', this.handleStorageChange);
  }

  componentWillUnmount() {
    window.removeEventListener('storage', this.handleStorageChange);
  }

  handleStorageChange = e => {
    if (e.storageArea != localStorage) {
      return;
    }
    if (e.key === 'accountID') {
      // Reload all other tabs here
    }
  }

  render() {
    // Your component's rendering logic here
  }
}

The Reload logic is given below:

Either you can reload the same page

window.location.reload();

or you can load them back to home page of your app
window.location.replace(window.siteURL);

That's all folks you can achieve by doing go. You can replicate the same logic in function based component also.

Let's Talk About Intl in JavaScript

Devvill Monki Ventures — Thu, 11 May 2023 09:17:33 +0000

Are you tired of dealing with pesky internationalization issues in your JavaScript code? Fear not, my friend! The Intl object is here to save the day!

What is Intl and Why Should You Use It?

Have you ever written code that displayed dates or numbers in a specific format based on the user's locale? It's a common problem when building applications that cater to a global audience. Enter Intl, the savior of internationalization woes!

With Intl, you can easily format dates, times, numbers, and currencies in a way that is appropriate for the user's locale. No more manually parsing strings or relying on third-party libraries! And the best part? Intl is built-in to modern browsers, so no need to worry about external dependencies.

The Intl library provides several classes and methods for i18n, including:

Intl.Collator: used for string comparison
Intl.NumberFormat: used for formatting numbers
Intl.DateTimeFormat: used for formatting dates and times
Intl.PluralRules: used for pluralization
Intl.ListFormat: used for formatting lists
Intl.RelativeTimeFormat: used for formatting relative time

How to Use Intl?

1. Formatting numbers
To format a number using Intl, you can create a new Intl.NumberFormat instance and pass in the locale you want to format the number for. Here's an example:

const number = 123456.789;
const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

console.log(formatter.format(number)); // $123,456.79

2. Formatting dates
To format a date using Intl, you can create a new Intl.DateTimeFormat instance and pass in the locale you want to format the date for. Here's an example:

const date = new Date();
const formatter = new Intl.DateTimeFormat('en-US', {
  dateStyle: 'medium',
  timeStyle: 'medium',
});

console.log(formatter.format(date)); // May 11, 202

Why use Intl?

When building web applications that are meant to be used by people all over the world, it's important to consider the language, cultural norms, and formatting preferences of your users. Using Intl can help you create a more user-friendly experience by providing localized and culturally-appropriate formatting for text, numbers, and dates.

Here are a few reasons why you might want to use Intl in your web applications:

1. Improved user experience
Using Intl can help create a more seamless and user-friendly experience for your users by providing localized formatting that matches their language and cultural norms. This can help improve user engagement and reduce confusion or frustration caused by unfamiliar formatting.

2. Simplified development
Instead of manually implementing complex formatting rules for each language and locale, Intl provides a set of standardized APIs that simplify the process of formatting text, numbers, and dates for different cultures. This can save development time and reduce the likelihood of errors caused by manual formatting.

3. Reduced maintenance
By using Intl, you can rely on the library to handle i18n formatting concerns, rather than building and maintaining your own custom formatting solutions. This can reduce the amount of code you need to write and maintain, and help ensure that your application stays up-to-date with changing i18n standards.

Conclusion

Say goodbye to internationalization headaches with Intl in JavaScript! It's a simple and powerful tool that can save you time and frustration in your coding journey. Give it a try and see for yourself! And who knows, maybe one day you'll even get a call from the United Nations thanking you for making their lives easier. Okay, maybe not, but still, it's worth a shot!

DON'T MAKE ME THINK

Devvill Monki Ventures — Thu, 25 Feb 2021 19:43:02 +0000

Don't Make Me Think is a book by Steve Krug about human-computer interaction and web usability. The book's premise is that a good software program or web site should let users accomplish their intended tasks as easily and directly as possible.

In this blog, I will try to summarize the book in a short and simple way...

What is UX?

User experience is about how a user interacts with, and experiences, a particular product, system or service. It includes a person's perceptions of utility, ease of use, and efficiency.

What is UI?

In the industrial design field of human-computer interaction, a user interface is a space where interactions between humans and machines occur.

1. First Law of Usability

The first view of the website should tell the User what that website is about and what it will do.
If the website has Navbar in Header or Sidebar, highlight the section to tell the user where they are in the website.

2. Design for Scanning, not Reading

People don't read, they just scan the website.
So highlight the Keyword.
Keep the content Short and Simple.

3. Make Click mindless

Try to have minimum clickable as much as possible for a viewport.
Choose important Key clickables and highlight that more.
Don't confuse the user with too many interactions.

4. Less is More

Keep a minimum amount of content on a viewport.
Avoid irrelevant/unnecessary content.
Avoid instructions on the page.

5. Help Users to Navigate

Navigate people around all the pages like a journey from different sections of the web page.

6. User Testing

The main step for any development is user testing.
You develop the webpage by keeping in mind all the above points.
Later you need to give the webpage for human testing and have to collect their experience details with the website and should improve on those points.
This step has to be done periodically.

These are the above points that I have noted down from the book. Please feel free to improve the content or correct me if I'm wrong.

Thank you!!!

React Ref to add className

Devvill Monki Ventures — Fri, 30 Oct 2020 14:17:12 +0000

Hey there React developers! Wanna Know how to add className dynamically with some really cool example? Then you are in right place. Go through the post to understand in-depth.

What is React?

React is a JavaScript library for building user interfaces.
Click here to know more.

What is React Ref?

Refs provide a way to access DOM nodes or React elements created in the render method.
Click here to know more.

Let's consider an example where you create a list of buttons using the map function.

const buttonsArray = ['Button 1', 'Button 2' , 'Button 3']
buttonsArray.map((button)=>{
      return(
   <button>{button}</button>
   )
 }
)

Now let's create ref to list of buttons. I have created refs as “callback refs”

const buttonsArray = ['Button 1', 'Button 2' , 'Button 3']
buttonsArray.map((button,index)=>{
    return(
    <button ref={a => this.buttonElement[index] = a} >{button}</button>
  )
 }
)

Along with this, you need to declare "this.buttonElement" inside the constructor.

 constructor(props) {
    super(props);
    this.buttonElement = [];
  };

Now starts the magic, let's consider you have written all the necessary CSS. From the list of buttons, you want the first button to be active on page loading. How to make it? Check the below code...
considering "active" is the CSS className

   componentDidMount() {
    this.buttonElement[0].className = this.buttonElement[0].className+"active";
  }

You can also add different styles for all 3 buttons...

   componentDidMount() {
    this.buttonElement[0].className = this.buttonElement[0].className+"active";
    this.buttonElement[1].className = this.buttonElement[1].className+"foo";
    this.buttonElement[2].className = this.buttonElement[2].className+"bar";
  }

Explaination:

'this.buttonElement' is a list of buttons so in order to make the first element to be active we added 'active' className to index=0 element.

Extra:

You can also make a click event to the first button.

   componentDidMount() {
    this.buttonElement.click();
  }

If you have need of the above code, then you don't need to add className, because the click event in-turn make the button to active and CSS will take care of that condition.

Here just to make the code snippet understandable, I have implemented using a button. You can make use of any HTML element or any event.

Thank You,

Create Your Own Simple Virtual Assistant

Devvill Monki Ventures — Fri, 17 Jul 2020 20:24:06 +0000

What is Virtual Assistant?

Definition: An intelligent virtual assistant (IVA) or intelligent personal assistant (IPA) is a software agent that can perform tasks or services for an individual based on commands or questions.

In simple words, it's a set of programs that will do tasks on its own which decreases users work on a machine over a set of commands.

There are different kinds of Virtual System in the industry for general-purpose, social media, marketing etc.

Difference between a Chatbot and Virtual Assistant:

Generally, a chatbot provides service through text message, they possess limited functionality and have no need for high-level algorithms.
On the other hand, Virtual assistants provide a more interactive platform. Virtual assistants provide a more interactive platform. Advanced NLP techniques and other complex algorithms are used.

Now what are we building??

Popular Virtual assistants like Alexa from Amazon, Siri from Apple, Cortana from Microsoft make use of highly sophisticated algorithms.

But I'm going to create a simple virtual assistant for our local machine which can perform simple tasks on my voice command built using basic concepts of Python and using its libraries.

Lets get started...

Firstly you need to install python on your machine.
Click here to download.
I recommend python3.6 or above

Packages need to installed:

Open the command prompt and install these packages using the below commands

pip install SpeechRecognition
pip install gtts
pip install playsound

After all the installation we need to download pyaudio. Open the link and download the file based on your machine.
Set the downloaded file location with pip install

pip install 'file name with its absolute path'

So now we are good to go...
Before that, let me explain two major packages that we are using,

Speech Recognition: This python library converts the spoken words to text.
Google Text-to-Speech: This python library converts text to speech.

Our Implementation Idea:

Using Speech Recognition, we going to convert user voice commands into words and machine perform tasks based on keyword from those converted texts. After performing the task the result is converted into speech using gtts(Google Text-to-Speech) library.

Lets code

Create a new python file with .py extension.

First import all the required package

import speech_recognition as sr
from gtts import gTTS
import playsound
import os

Now will create a listen() function which converts the voice received from microphone into text.

def listen():
    r = sr.Recognizer()
    with sr.Microphone() as source:
        print("I am listening..")
        audio = r.listen(source,phrase_time_limit = 10)
    data=""
    try:
        data = r.recognize_google(audio,language='en-US')
        print("You said:"+data)
    except sr.UnknownValueError:
        print("I cannot hear you")
    except sr.RequestError as e:
        print("Request Failed")
    return data

After listening, there should be a response, so will create a respond() function.

def listen():
    print(String)
    tts = gTTS(text=String,lang="en")
    tts.save("Speech.mp3")
    playsound.playsound("Speech.mp3")
    os.remove("Speech.mp3")

Then we need to create our Virtual Assistant. It checks the pattern using if conditions and performs the set of instructions inside the if body.

def voice_assistant(data):
    if "Who are you" in data:
        listening = True
        respond("I am your assistant")
    if "how are you" in data:
        listening = True
        respond("I am well")
try:
        return listening
    except UnboundLocalError:
        print("TimedOut-->Re-Launch")

After creating all the required functions, we need to call those functions.

time.sleep(2)
respond("Hello, What can I do for you?")
listening = True
while listening == True:
    data = listen() #calling the listen()
    listening = voice_assistant(data)

Now you can modify the responses and also can build more interactions in voice_assistant() function.

After this run file by opening command prompt

python filename.py

The overall working, data flow all explained in the below image,

Now let us make our virtual assistant to tell the current date and time So for that, we are importing time module

import time
from time import ctime

Now add the below if condition in voice_assistant() function

if "time" in data:
        listening  = True
        respond(crime())

Get the full code here
Try to increase the lively interactions with virtual assistant using more if conditions.
If any doubts feel free to comment down.
Stay tuned to know more what else our virtual assistant can do.

Thank you

git Cheat Sheet

Devvill Monki Ventures — Tue, 14 Jul 2020 18:39:18 +0000

What is git?

Git is a version control management system.

Why git?

Git helps in keeping track of changes made to code.

It also synchronize code between different people.

Helps in testing the changes to code without losing the
original.

Able to revert back to any older versions of code.

What is GitHub?

GitHub is a online platform which allows to store git
repositories.
There are other websites like GitHub such as Gitlab,
BitBucket, GitBucket etc..

What is Repository?

Repository is simply a place to keep track of code and all
the changes to code.
There are two kinds of repositories, Local and
Remote. Local repository is the one that is in your
local machine and Remote repository is stored on a server like github.

Now will jump into Git commands

git clone 'url' : downloads the remote repository from server into the local machine
git init : to initialize git to the current working directory
git status : shows the current activity on the repository
git add 'filename' // 'filenames' // '.': add the files to staging area which needs to be included in the next commit
git commit -m "message": saves the changes made to the repository with the message
git push : pushes local repository to remote repository
git pull : pulls remote repository to local repository (for any remote changes)
git log : lists all the commits that have been made to the repository
git reset --hard 'commit' : revert backs the repository to the given commit
git branch 'branch name' : creates a new branch
git checkout 'branch name' : to switch between the branches of the repository
git merge: to merge the branch and master

Still there are other git commands but I listed down some of the important and commonly used.