DEV Community: Clara Situma

We Are Training Conversational AI Wrong!

Clara Situma — Tue, 27 Jan 2026 13:44:29 +0000

"Make it more human!"
"Make it shorter and less fluff."
"Sound more relatable."

These are instructions AI models hear constantly from real users interacting with systems like ChatGPT. The irony is striking: AI has already been trained on billions of words of human language. It understands grammar, sentence structure, social norms, and communication patterns.

So why do users still have to tell AI to "sound human"?

Because we are training it on the wrong kind of human language! Current AI training prioritizes polished, edited, formal text over the messy, emotional, context-rich way humans actually talk. The gap is not in language understanding but in conversational authenticity.

The Training Data Problem

Most large language models are trained on three main sources: web text, books, and curated dialogue datasets. These sources share a critical flaw: _they favor finished, edited communication over natural conversation.

Web text includes articles, blog posts, and forum discussions that have been revised and polished before publication.

Books represent carefully crafted prose that has gone through multiple drafts and editorial review.

Even dialogue datasets are often synthetic conversations created specifically for training, or transcripts that have been cleaned and standardized.

Real human conversation looks nothing like this. We use filler words, change direction mid-thought, interrupt ourselves, employ regional slang, and constantly check for understanding. We use, "like," and "you know." We ask, "Does that make sense?" or "Am I explaining this clearly?" These elements are systematically filtered out of training data because they look like noise.

The RLHF Mismatch

Reinforcement Learning from Human Feedback compounds this problem. RLHF evaluators typically reward responses that are clear, structured, grammatically perfect, and complete. They penalize rambling, hedging, or conversational meandering.

Critically, RLHF rewards structure and correctness, not pauses, hedges, or meta conversational checks, which are essential for natural dialogue. A response that says "Wait, are you asking about X or Y?" scores lower than one that immediately provides a complete answer, even when clarification would better serve the user.

The signal AI receives is clear: be more like an essay, less like a conversation. The result is AI that excels at formal communication but struggles with the informal, relational mode that users actually want for everyday interaction.

Formal Tasks versus Conversational Tasks

This training approach works well for certain use cases. When users need legal writing, code generation, or research summarization, they want precision and structure. AI trained on polished text performs excellently here.

But conversational AI serves different purposes. Users turn to it for brainstorming, emotional support, casual exploration of ideas, or simply companionship. These contexts require relational awareness, empathy, appropriate pacing, and the ability to read between the lines.

Current training does not distinguish between these modes.The same model, trained on the same data with the same reward signals, is expected to write a legal brief and also chat like a friend. It can do the former naturally but must be explicitly prompted to attempt the latter.

What Gets Lost in Translation

By 2025, Gartner predicted that seventy percent of customer interactions will involve AI in some form. As conversational AI becomes ubiquitous, the gap between technical accuracy and conversational effectiveness becomes increasingly critical.

Meta conversational moves are essential to natural dialogue. Studies show that twenty to twenty-five percent of human utterances involve clarification, verification, or relationship management (Clark and Schaefer, 1989). We say things like "Is this what you mean?" or "Do you want my advice or just someone to listen?" AI rarely initiates these moves because doing so was not rewarded during training.

Emotional context recognition matters more than we acknowledge. When someone asks about a school closure, they are not just seeking dates and logistics. They may be worried about childcare, concerned about their child's education, or relieved to have a break. Human conversation naturally acknowledges this subtext. AI trained on factual accuracy alone misses it entirely.

Consider this real-world interaction with ChatGPT:

 User: "I am really stressed about my kid’s school."

ChatGPT Response:

It sounds like you’re carrying a lot of worry right now. School can be stressful for both kids and parents, and it’s completely normal to feel overwhelmed. Sometimes just talking about what’s specifically worrying you like grades, social issues, or the workload, can help make it feel more manageable. If you want, I can help you break it down and come up with a few ways to reduce that stress for both you and your child. Do you want to do that?"

Human Response:

"Why? What happened?"

The AI response is technically correct, empathetic, and structured, but it is

long, cautious, and informational,

whereas a human naturally seeks immediate clarification and context. This highlights the gap: AI has empathy coded in, but it lacks conversational spontaneity and prioritization of relational signals.

Conversational Pacing, Rhythm, and Diversity

Conversational pacing and rhythm shape how we interpret meaning. Nielsen Norman Group research shows that people read only twenty to twenty-eight percent of words on a web page, relying heavily on context, formatting, and pacing to extract meaning. In conversation, we use similar shortcuts: pauses, tone shifts, topic transitions. AI optimized for information density without regard for pacing feels overwhelming or robotic.

Regional, generational, and cultural variation in language use is vast. The way a teenager in California talks differs dramatically from how a retiree in Georgia talks, which differs from how a professional in London talks. Training data that over represents formal, standard English creates AI that sounds generic and disconnected from real human diversity.

The Evaluation Problem

Why does AI training miss these critical conversational elements? Part of the answer lies in how we measure success.

Current benchmarks for conversational AI focus on factual correctness, BLEU or ROUGE scores for text similarity, and grammaticality. Few metrics capture empathy, relational alignment, or conversational pacing. What gets measured gets optimized, and conversational quality is rarely measured in ways that matter for human connection.

Evidence from Real World Applications

Customer Support

A 2023 Zendesk survey found that

sixty-nine percent of consumers still prefer human agents for complex or emotionally charged issues.

Chatbots fully resolve only twenty-nine percent of inquiries without human escalation. The most common complaint is not inaccuracy but tone:

"The bot answered my question but it felt like no one was listening."

Customer support is fundamentally relational. People want to feel heard, not just helped. AI trained to maximize answer accuracy without emotional awareness cannot deliver this experience.

Mental Health Applications

AI companions like Woebot and Wysa demonstrate what happens when conversational AI is trained with relational skills in mind. These systems show measurable improvements in user anxiety and depression scores, not because they are more accurate than general AI, but because they employ empathy, ask clarifying questions, and pace their responses appropriately (Fitzpatrick et al., 2017; Inkster et al., 2018).

The contrast is telling. When AI is deliberately trained to mirror human conversational strategies, it performs better in human contexts. The problem is not AI capability but training focus.

Personal Assistance

Users interacting with AI assistants frequently report frustration with tone and appropriateness even when factual responses are correct. A technically accurate answer delivered without awareness of context, urgency, or emotional state feels unhelpful. Users compensate by adding instructions like "be casual," "be brief," or "explain like I am five," essentially trying to manually correct for training deficiencies.

What Conversational AI Actually Needs

To train AI for genuine conversational fluency, we need fundamental changes in approach:

Different training data sources. Include unedited text messages, voice transcripts, casual social media threads, and real spoken conversation. Preserve filler words, false starts, topic shifts, and informal phrasing.

Annotation for relational context. Tag examples for emotional tone, relationship dynamics, conversational intent, and appropriateness. Teach AI to recognize when someone is venting, seeking advice, or needs levity versus seriousness.

Reward signals beyond correctness. RLHF should evaluate empathy, trust building, conversational awareness, and relational appropriateness alongside clarity and accuracy.

Cultural and demographic diversity. Training should include regional, generational, professional, and cultural variations to prevent generic or disconnected responses.

Explicit training on conversational strategies. Teach AI to employ clarification questions, meta conversational checks, pauses, and tone matching. These are learnable patterns that currently go untrained.

The Path Forward

Friendly conversational AI is not failing because it lacks language understanding.It is failing because it was trained in contexts that prioritize polish over authenticity, correctness over connection, and structure over spontaneity.

Formal AI tasks can tolerate this approach. Legal writing and code generation do not require empathy or relational awareness. Conversational AI cannot succeed without them.

The solution requires treating conversational fluency as a distinct skill requiring distinct training. We must train AI on how humans actually talk, not just how they write for publication. We must reward relational awareness, emotional intelligence, and conversational strategies, not just accuracy and clarity.

Until we do this, users will continue telling AI to "be more human" while it produces responses that are technically correct but emotionally flat, grammatically perfect but conversationally awkward, informationally complete but relationally empty.

We already have the language. We just need to teach AI the conversation.

References


Clark HH, Schaefer EF. Contributing to Discourse. Cognitive Science 1989;13:259–294.

Fitzpatrick KK, Darcy A, Vierhile M. Delivering Cognitive Behavior Therapy to Young Adults With Symptoms of Depression and Anxiety Using a Fully Automated Conversational Agent Woebot: A Randomized Controlled Trial. JMIR Mental Health 2017;4(2):e19.

Gartner. Top Strategic Technology Trends for 2022: AI Engineering. 2021.

Inkster B, Sarda S, Subramanian V. An Empathy Driven Conversational Agent for Mental Health Applications. Frontiers in Psychiatry 2018;9:1–10.

Nielsen Norman Group. How Users Read on the Web. 2021.

Zendesk. Customer Experience Trends Report. 2023.

USING VITE?, Upgrade to tailwindcss..version 4

Clara Situma — Tue, 10 Jun 2025 10:16:24 +0000

Tailwind v3 (and earlier): The documented integration is via PostCSS. You install tailwindcss, postcss, and autoprefixer, create a postcss.config.js, and a tailwind.config.js.....

Sooo much WORK,IKR?

THEN

import your CSS containing

@tailwind base;
@tailwind components;
@tailwind utilities;.

Vite’s dev and build steps then process Tailwind automatically. This is the stable method for Tailwind v3 projects

WHAT CHANGED

Tailwind v4 and later: Tailwind v4 introduced a first-party Vite plugin (@tailwindcss/vite) for even faster builds and “zero config” content detection.

If you upgrade to Tailwind v4, you ONLY install both tailwindcss (v4) and @tailwindcss/vite.No taliwind.config.js ....not postcss.config.js..... JUST ADD to your vite.config.js, tailwindcss() to plugins.

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Under the hood this still processes via PostCSS-like logic but with extra optimizations and automatic content scanning, so you don’t need manual content globs unless you have special cases.

and on your global css

@import "tailwindcss";

That's it!

hoisting

Clara Situma — Mon, 30 Dec 2024 09:27:17 +0000

HOISTING IN JS (REFERENCE ERROR!!)

Clara Situma ・ Dec 30 '24

#react #webdev #javascript #beginners

HOISTING IN JS (REFERENCE ERROR!!)

Clara Situma — Mon, 30 Dec 2024 07:37:44 +0000

Understanding Hoisting in JavaScript

Hoisting is one of the most fundamental concepts in JavaScript, yet it can be a source of confusion for beginners and even seasoned developers.

In this blog, we will demystify hoisting, explain how it works, and provide clear examples to help you fully understand this concept.

What is Hoisting?

Hoisting is a JavaScript mechanism where declarations of variables, functions, and classes are moved to the top of their scope during the compilation phase.

This means you can use these elements before they are actually declared in the code.

However, hoisting works differently for var, let, const, functions, and classes, and this is where confusion often arises

How Hoisting Works

When JavaScript code is executed, it goes through two phases:

Compilation Phase: During this phase, the engine hoists declarations to the top of their scope.
Execution Phase: The code runs line by line, respecting the rules of hoisting.

Hoisting Rules for Different Declarations

1. var

Variables declared with var are hoisted, but their value is not initialized. Before the initialization, they are set to undefined.


console.log(a); // Output: undefined
var a = 10;
console.log(a); // Output: 10

let and const

Variables declared with let and const are also hoisted but remain in the Temporal Dead Zone (TDZ). They cannot be accessed until their declaration is encountered in the code.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 30;

Functions

Function declarations are fully hoisted, meaning both their name and body are moved to the top. This allows you to call functions before they are declared.

greet(); // Output: "Hello, World!"

function greet() {
    console.log("Hello, World!");
}

However, function expressions are treated differently. They behave like variables declared with var, let, or const:

sayHi(); // ReferenceError: Cannot access 'sayHi' before initialization

const sayHi = function () {
    console.log("Hi!");
};

Classes

Classes are hoisted but remain in the Temporal Dead Zone, similar to let and const. You cannot access a class before it is declared.

const obj = new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization

class MyClass {
    constructor() {
        this.name = "Class";
    }
}

Understanding the Temporal Dead Zone (TDZ)

The Temporal Dead Zone is the period between the start of the scope and the point where the variable is declared. During this period, any access to let or const variables will throw a ReferenceError.

Key Takeaways

Declaration   Hoisted?       Behavior Before Initialization

var            Yes              undefined

let            Yes            ReferenceError (in TDZ)

const          Yes             ReferenceError (in TDZ)

Function Declaration  Yes       Fully hoisted, works before 
declaration

Function Expression  Partially (as var)   undefined or ReferenceError (if let/const)

Class           Yes              ReferenceError (in TDZ)

Conclusion

Understanding hoisting is critical for writing clean and predictable JavaScript code. While it may seem like magic at first, knowing the rules for var, let, const, functions, and classes will help you avoid common pitfalls. Always declare your variables and functions at the top of their scope to ensure clarity and reduce the chances of errors.

Happy coding!

Export .env Quick and Easy

Clara Situma — Sat, 07 Dec 2024 15:17:45 +0000

Export .env from Vercel: New Laptop, Old Project? No Problem!

Clara Situma ・ Dec 7 '24

#vercel #webdev #javascript #nextjs

Export .env from Vercel: New Laptop, Old Project? No Problem!

Clara Situma — Sat, 07 Dec 2024 13:09:30 +0000

Starting fresh on a new laptop or revisiting an old project doesn’t mean you’re stuck hunting for missing keys.

With Vercel, pulling down your environment variables is a breeze. Let’s dive in and get your project up and running in no time!

Exporting .env from Vercel

Here’s how you can seamlessly retrieve your .env file from Vercel:

Step 1: Install the Vercel CLI

Before you start, make sure the Vercel CLI is installed globally on your system. If not, install it via npm:

npm install -g vercel

Step 2: Link Your Local Project

Navigate to the root directory of your project and run the following command:

vercel link

Follow the prompts to select your account (personal or team) and link to the existing Vercel project.

If you’re linking to a specific project (e.g., buyrentzanzibarclient), the CLI will list it—simply select it.

Step 3: Pull the .env File

Once linked, pull down your environment variables directly into a local .env file:

vercel env pull

This creates a .env file in your project’s root directory, pre-filled with all the environment variables set in the Vercel dashboard.

Step 4: Verify the .env File

Open the .env file to ensure everything is in place. It should look something like this:

API_URL=https://api.example.com
DATABASE_URL=your-database-url
SECRET_KEY=your-secret-key

Pro Tip: Secure Your .env File
Once you’ve exported your .env file, add it to your .gitignore to prevent it from being pushed to your repository

5 Vercel Features Developers Absolutely Love

Clara Situma — Wed, 20 Nov 2024 19:42:39 +0000

Vercel has been a game-changer for developers, redefining how we approach web development with tools that make our lives easier, faster, and more collaborative. Here are the top five features developers can’t stop raving about

1. Edge Middleware: Smarter, Faster 🦸‍♂️

Edge Middleware allows you to intercept and modify requests at the edge, delivering faster responses and highly personalized experiences. Think of it as a smart traffic controller for your web app.

Why We Love It:

Blazing Speed: Processes requests close to the user, reducing latency.
Full Control: Customize routing, security, and content delivery effortlessly.
Flexibility: Merge edge performance with dynamic content without hassle.nt with edge performance seamlessly.

Real-Life Impact: Region-Specific Content

Serving region-specific content is a breeze. For example, US visitors can see a tailored homepage, while European users are seamlessly directed to their own-all with minimal overhead.

Code Example: Redirect Based on Location

import { NextResponse } from 'next/server';

export function middleware(req) {
  const country = req.geo?.country; // Access geolocation data

  if (country === 'US') {
    return NextResponse.rewrite(new URL('/us-homepage', req.url));
  } else if (country === 'DE') {
    return NextResponse.rewrite(new URL('/de-homepage', req.url));
  }

  return NextResponse.next(); // proceed if no conditions are met
}

2. Preview Deployments: Collaboration Made Easy 🤝

Vercel’s Preview Deployments make team collaboration effortless. Every pull request automatically gets its own live preview URL, ensuring everyone is on the same page—literally.

Why We Love It:

Instant Visibility: No setup required—preview links are generated automatically. -Streamlined Feedback: Share live previews with teammates, clients, or stakeholders. -Fewer Misunderstandings: Everyone can see proposed changes in real-time.

Real-Life Impact:

UI Reviews: Designers and developers can work together to finalize designs.
QA Testing: Share a live link for testers to check functionality and report bugs.
Client Demos: Show clients live progress without setting up a staging environment.

How It Works:

Push changes to a branch in GitHub, GitLab, or Bitbucket.
Open a pull request.
Vercel automatically generates a unique preview URL:

https://branch-name-your-project.vercel.app

Teams save hours on back-and-forth communication with this feature alone.

3.Global Edge Network: Performance Without Boundaries 🌍

Vercel’s Global Edge Network ensures your app’s content is served from the edge location nearest to your user. This guarantees lightning-fast performance, no matter where in the world your audience is located.

Why We Love It:

Scalability: Easily handle massive traffic surges during launches or sales.
Reduced Latency: Faster load times by serving content closer to the user.
High Reliability: Redundant edge locations keep your app online, even during failures.

Real-Life Impact:

For a global e-commerce store, customers in Asia, Europe, and the Americas will enjoy the same snappy experience because content is cached and served from the closest edge location.

Code Example: ISR with Global Edge Caching

export async function getStaticProps() {
  // Fetch data from an API or database
  const data = await fetch('https://api.example.com/data').then((res) => res.json());

  return {
    props: { data },
    revalidate: 60, // Regenerate the page every 60 seconds
  };
}

This example combines Instant Static Regeneration (ISR) with edge caching, ensuring users get fresh data quickly, without hitting your backend every time.

4. Intelligent Caching: Smarter Performance Boosts 🧠

Caching is critical for web performance, and Vercel takes it to the next level with intelligent caching. This feature gives you fine-grained control over what gets cached, for how long, and how updates are handled—all while seamlessly integrating with the edge network.

Why We Love It:

Customizable: Tailor caching rules for specific pages or assets.
Efficient: Cut server load and boost user experience.
Dynamic Updates: ISR keeps content fresh while maintaining speed..

Real-Life Impact:

For a high-traffic news site, you can cache API responses and regenerate pages every 60 seconds, ensuring users get the latest updates without overloading your backend.

Code Example: Setting Cache-Control Headers

export default function handler(req, res) {
  // Define caching rules
  res.setHeader('Cache-Control', 'public, max-age=3600, stale-while-revalidate=59');

  // Respond with JSON data
  res.json({ message: 'This response is cached!' });
}

Intelligent caching ensures your app stays fast and reliable, even as traffic grows. It’s the perfect balance between performance and flexibility, making it a must-have for any modern web project. ⚡

5. One-Click Rollbacks: Deploy Fearlessly 🛡️

Mistakes happen, but Vercel’s One-Click Rollbacks let you recover instantly. No downtime, no stress—just the confidence to innovate.

Why We Love It:

Instant Recovery: Revert to a previous version in seconds.
No Downtime: Rollbacks are seamless, Users won’t notice a thing.
Risk-free deployments: Experiment boldly, knowing you can undo mistakes.

Real-Life Impact

Imagine pushing a buggy release during a high-stakes launch. Instead of scrambling to fix it under pressure, simply roll back to the last stable version and resolve the issue at your own pace.

How It Works:

Go to the Vercel Dashboard.
Navigate to your project and select the Deployments tab.
Click Redeploy for the desired version—and you’re live.

One-click rollbacks are like having an undo button for your app, keeping stress at bay and workflows efficient.

Conclusion: Why Developers Choose Vercel

Vercel isn’t just a platform; it’s a partner in your development journey. From blazing-fast edge performance to seamless collaboration and stress-free rollbacks, Vercel empowers developers to build confidently and innovate freely.

Ready to experience the magic? Get started with Vercel today!

Deploying a Next.js application to Vercel (Beginner)

Clara Situma — Wed, 20 Nov 2024 14:32:04 +0000

Deploying your Next.js application to Vercel is an easy process that ensures your project is live and accessible with minimal effort.

Follow this step-by-step guide to achieve a successful deployment.

Prerequisites: 📑

A fully developed Next.js project.
An account on GitHub, GitLab, or Bitbucket.
A Vercel account.

Step 1: Prepare Your Next.js Application

Before deployment, ensure your application is production-ready(Build).

Navigate to your project directory and execute:

///This command compiles your application for production.
npm run build

Test Locally:

After building, start the application locally to verify its functionality:

npm run start

At this stage, we need to have the application hosted on a remote platform to facilitate deployment.

Step 2: Push Your Project to a Git Repository

Vercel integrates seamlessly with Git platforms to facilitate deployments.

Initialize Git:

If your project isn't under version control:

Create a Remote Repository

On your preferred Git platform (GitHub, GitLab, or Bitbucket), create a new repository, then, on your local terminal:

git init
git add .
git commit -m "Initial commit"

Now that our remote repository exists, let's Push our Code!:

Link your local repository to the remote one and push your code:

git remote add origin <repository-url>
git push -u origin main

Step 3: Deploy to Vercel

Sign-in to vercel using your Git provider

Click on "Add New" in the Vercel dashboard:

Select Project

Import Your Project/Next.js repository

Configure Project Settings:

Vercel automatically detects Next.js projects and sets the appropriate configurations. Review the settings and make adjustments if necessary.

Deploy 🥳

Click the "Deploy" button. Vercel will build and deploy your application. Once completed, you'll receive a unique URL to access your live application.

Step 4: Configure Custom Domain (Optional)

To use a custom domain, Update your domain's DNS records as instructed by Vercel to point to their servers.

Update your domain's DNS records as instructed by Vercel to point to their servers.

Step 5: Enable Continuous Deployment

Vercel supports automatic deployments on every push to your Git repository.

By default, Vercel redeploys your application on every push to the connected branch. You can manage these settings in your project's dashboard under the "Deployments" section.

Conclusion

Deploying a Next.js application to Vercel is efficient and user-friendly, offering features like automatic scaling, global CDN, and seamless integration with Git platforms. By following this guide, your application will be live and ready to serve users.

For more detailed information, refer to Vercel's official Next.js documentation.

Must know blockchain Terminologies.

Clara Situma — Mon, 01 Apr 2024 18:17:41 +0000

Hash: A hash is a unique string created to identify a specific set of data. It acts as a digital fingerprint for that data, ensuring its integrity and uniqueness.

Hash Algorithm: This is a specific computational function that takes an input (or 'message') and returns a fixed-size string of bytes. The output, known as the hash, is unique to each unique input. It's a one-way function, meaning that it's infeasible to invert or reverse the process to retrieve the original input from the hash.

Mining: Mining is the process of solving complex cryptographic puzzles/riddles to validate transactions and secure the blockchain network. Miners compete to find a solution to a mathematical problem, and the first one to solve it gets to add a new block of transactions to the blockchain.

Nodes: Nodes are computers connected to the blockchain network, each maintaining a copy of the blockchain. They participate in consensus processes and, in some blockchain models, are rewarded for mining or validating transactions.

Block: A block is a collection of transactions that have been verified and combined into a single data structure. Each block is cryptographically linked to its predecessor, forming a chain of blocks or a blockchain.

Nonce: A nonce is a number that is used only once in cryptographic communication. In blockchain, it refers to an arbitrary number used to vary the hash in block mining until a specific condition is met. It also refers to the transaction number in Ethereum transactions.

Private Key: A private key is a secure digital code known only to the owner, used to sign transactions. It proves the ownership of a blockchain address and allows the holder to access and spend their cryptocurrency.

Public Key: Derived from the private key using cryptographic algorithms, the public key is shared publicly. It allows others to verify the signature as valid, thus confirming the transaction's integrity without revealing the private key.

Address: The address is a hashed version of the public key. It acts as the recipient's location on the blockchain where cryptocurrencies can be sent.

Blockchain: A blockchain is a decentralized ledger or database that is distributed across the nodes of a computer network. It securely records transactions across many computers so that the record cannot be altered retroactively.

Consensus Mechanism: This refers to the method used to achieve agreement on a single data value or a single state of the network among distributed processes or systems. Consensus mechanisms ensure all participants in the network agree on the validity of transactions.

Examples include chain selection and mechanisms to prevent Sybil attacks (where one party tries to control a disproportionate number of nodes).

Sybil Resistance: A property of blockchain networks that protects against attackers creating multiple false identities to gain a disproportionately large influence.

Proof of Stake (PoS): A consensus mechanism where the probability of validating a new block is proportional to one's ownership stake in the cryptocurrency.

Proof of Work (PoW): A consensus mechanism that requires participants to perform computationally intensive work to validate transactions and create new blocks.(Mining)
It is used to deter denial of service attacks and other service abuses.

Longest Chain Rule: The principle that the path with the most blocks in a blockchain is considered the valid one, guiding network consensus.

Layer 1: The foundational layer of a blockchain infrastructure, supporting basic operations like transaction processing and consensus mechanisms.

Layer 2: Built on top of Layer 1, it enhances scalability and efficiency through solutions like sidechains or Lightning Networks, without altering the base layer.

Types of Attacks
Sybil Attack: An attacker creates numerous fake identities to gain major influence over the network, aiming to disrupt its operations.

51% Attack: An entity controls over 50% of the network’s power, allowing them to manipulate transactions and potentially double-spend cryptocurrencies.

WHAT IS GAS IN BLOCKCHAIN?

Clara Situma — Sun, 31 Mar 2024 10:39:21 +0000

Whenever a transaction is executed on a blockchain, a miner or validator—someone operating the blockchain software—receives a small amount of the blockchain's currency as compensation.

The amount they're paid depends on the gas fees associated with the transaction.

Gas is a unit of measurement that quantifies the computational effort required to execute a transaction. The more complex the transaction, the higher the gas fee required. For example, sending Ether (ETH) typically incurs a low gas fee, whereas minting a Non-Fungible Token (NFT) demands a higher fee due to its complexity.

Additionally, the overall demand on the blockchain influences gas prices; more transactions and higher activity levels mean higher gas fees, as the network becomes busier and more competitive for processing power.

The cost of a transaction is determined by the formula: GAS PRICE * GAS USED = TRANSACTION FEE. The "gas price" is the amount of currency (e.g., ETH) that one is willing to pay per unit of gas, and the "gas used" represents the total amount of gas necessary to complete the transaction.

React Usecallback for Kids/Beginners

Clara Situma — Thu, 08 Feb 2024 11:08:57 +0000

Let's say we're making a webpage where we want to draw a smiley face every time we click a button.

But drawing that smiley takes a lot of computer energy.

So, we tell React to remember how to draw a smiley face using useCallback.

Now, every time we click the button, React 'remembers' how to draw the smiley without using extra energy

import React, { useCallback } from 'react';

function SmileyComponent() {
  // This is our "spell" for drawing a smiley
  const drawSmiley = useCallback(() => {
    console.log("😊");
  }, []);

  return (
    <div>
      {/* A button that, when clicked, will use the memorized drawSmiley function */}
      <button onClick={drawSmiley}>Draw Smiley</button>
    </div>
  );
}

export default SmileyComponent;

Dependencies

Think of useCallback like a magic notebook for your robot friend that helps it remember how to do a task (like building a sandcastle) the best way possible, without wasting energy. But if something important changes (like the weather), the robot knows it needs to update its notebook with new instructions.

This way, your robot always builds the sandcastle perfectly, using the least amount of energy, and you both have more time to play and have fun at the beach!

import React from 'react';

const MyCustomButton = React.memo(({ onClick, children }) => {
  console.log(`Rendering button: ${children}`);
  return <button onClick={onClick}>{children}</button>;
});

import React, { useState, useCallback } from 'react';

function ColorBox() {
  const [weather, setWeather] = useState('sunny'); // The weather condition
  const [color, setColor] = useState('yellow'); // Color of the box

  const updateColor = useCallback(() => {
    switch (weather) {
      case 'sunny':
        setColor('yellow');
        break;
      case 'rainy':
        setColor('gray');
        break;
      case 'windy':
        setColor('blue');
        break;
      default:
        setColor('green'); // Default color if weather is not recognized
    }
  }, [weather]); // The dependency array

  return (
    <div>
      <h2>Weather: {weather}</h2>
      <MyCustomButton onClick={() => setWeather('sunny')}>Sunny</MyCustomButton>
      <MyCustomButton onClick={() => setWeather('rainy')}>Rainy</MyCustomButton>
      <MyCustomButton onClick={() => setWeather('windy')}>Windy</MyCustomButton>
      <MyCustomButton onClick={updateColor}>Update Box Color</MyCustomButton>
      <div style={{ width: '100px', height: '100px', backgroundColor: color, marginTop: '20px' }}>
        Box
      </div>
    </div>
  );
}

export default ColorBox;

Conclusion

useCallback with dependencies is a smart way for things (like your robot or a computer program) to remember how to do something efficiently, only changing their plan when they really need to, based on what's different. !

HTML IS JUST LIKE WRITING A WORD DOCUMENT

Clara Situma — Fri, 14 Jul 2023 12:08:27 +0000

Let's look at a quick word document:

Title: My First Document

Welcome to my Document!

This is a paragraph of text in my document. 
It's really quite an interesting paragraph, as paragraphs go. 
Here's a link to Google for more interesting content: www.google.com

Here is an image.
[IMAGE INSERTED]

Here is a list of my favorite fruits:
- Apples
- Oranges
- Bananas

Now let's make it onto a website,using HTML

<!DOCTYPE html>
<html>
<head>
  <title>My First Document</title>
</head>
<body>
  <h1>Welcome to my Document!</h1>
  <p>This is a paragraph of text in my document. 
 It's really quite an interesting paragraph, as paragraphs go. 
Here's a link to the <a href="http://www.google.com">Google</a> website for more interesting content.</p>
  <img src="your-image-source.jpg" alt="An image in my document" />
  <p>Here is a list of my favorite fruits:</p>
  <ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Bananas</li>
  </ul>
</body>
</html>

Think of HTML tags as the equivalent of different elements in a Word document

Each _tag _serves a specific purpose and has a specific representation on the webpage. Let's dive in using our example:

!DOCTYPE html: This line is necessary to declare the document type and version of HTML. In this case, it's HTML5.
html: This is the root of an HTML document. Every tag that is used to display something on a webpage goes inside this tag.
head: This tag includes elements like the title of the document (which appears as the name of the tab in your web browser), links to stylesheets (CSS), character encoding declaration, and more. It's important to note that the content inside the
tag does not appear on the webpage itself when viewed in a browser.
title: This tag is nested within the
tag, and is used to set the title of the webpage.
body: The body tag is where the content of the webpage goes - this is what users see when they visit your webpage.
h1: This tag is used to add a top-level heading, which is usually the title of the webpage or the highest-level section title.
p: This is a paragraph tag, which is used to denote text paragraphs.
GOOGLE: This tag creates a hyperlink. The text between the opening tag and the closing tag is the text that will appear as a clickable link on your webpage. The URL of the page you want to link to is specified in the href attribute.
img: This tag is used to embed images into your webpage. The source of the image (src) points to the location of the image file, while the alt attribute provides alternative text for the image if it cannot be displayed.
ul and li : These tags are used to create unordered (bulleted) lists.

The ul tag denotes the start of the list, and each list item is wrapped in an li tag.