I’ve never known exactly what I want to be in life. But at any given moment, I’ve always had a sense of what I do NOT want to do and more importantly, who I do NOT want to be.

Back in O Level, one thing was clear: I wanted absolutely nothing to do with mathematics. Or anything remotely connected to it. Not because I hated it but because I was genuinely incapable. I tried. I tried again. And then I accepted my fate: math was for the special breed of people, and I was not one of them.

I worked hard (read: painfully hard) and the best grade I ever scraped together in O level math was 40% (I am being very generous here). Eventually, I had a eureka moment: maybe I didn’t have to subject myself to this academic torture forever. Naturally, I concluded that in A level, I would choose a combination with no math whatsoever.

But life had other plans. And by life, I mean my mother. Due to circumstances I can not publicly share (this is Medium, not therapy), I ended up staying at the same school for A level. The only available combination? MCB — Mathematics, Chemistry and Biology. Fantastic.

How I Accidentally Got Okay at Math

I’ve never been the smartest person in the room but I’ve had some pretty great luck with people in it. This article is, in many ways, an ode to my friend, Fidele, the person who taught me math and unknowingly, taught me persistence, patience, and possibility along the way.

Fidele was a math genius, if such a thing exists. And because we were friends, we spent a lot of time hanging out. During breaks, study sessions, and basically whenever we weren’t being chased off by a schedule, he was solving math problems. I sat beside him and tried to understand what was happening.

He wanted me to get better so, every break, we’d sit together and work through problems. In the beginning, “solve” might be a generous word. He solved, I spectated. Eventually, something shifted. I started solving one problem. Then another. Then another. Turns out, proximity to problem-solving does rub off if you stick around long enough.

For the record, I still didn’t ace my O level national exams. I genuinely do not remember my grade. I am choosing to believe that’s dissociative amnesia protecting me. I just know it wasn’t good.

Fast forward a year later in A level: I’d fully accepted that math was my fate. I was not doing well in Chemistry either. Biology was the only subject I actually liked. Math? Still felt like the necessary evil.

And then the A Level results came in.

I got an A.

In math.

Not in Biology. Not in Chemistry. Just… math.

Let that sink in.

A in Math = A Changed Life

That A in math felt like unlocking the cheat code. Not just for school but for life. It transformed how I approached every other course. It was not about the grade. It was about belief. The belief that If I can pass math, maybe I can pass anything.

Suddenly, everything felt learnable. Hard? Sure. But impossible? Not anymore. That confidence — the quiet voice saying “I can figure this out” followed me to the university. Whenever I hit a wall in a new subject, I reminded myself: “I passed the high school Maths. I can do this, too!”

As my English teacher used to say, “In Cauda Venenum.” (It turns out, this does not mean what he thought it meant, but I am still rolling with it). He used it to mean that if you sit your a** down long enough and study, even the hardest subjects get easier. Fair enough.

Full-Circle Moment

Today, I’m teaching Applied Mathematics. Yes, me. The same person who once declared math off-limits. Who scraped through O level and only stuck with math in A Level because there was no other option. And the cherry on top? I’ll me mentoring the future Math Olympiads. Students who can probably solve more problems than I can now. But that’s the beauty of it.

Teaching math is more than a job for me. It’s personal. It is a statement and a quiet reminder that I can do hard things. And hopefully, a living message to my students (and anyone who needs to hear it) that they can too. Because sometimes the only real prerequisite for learning is staying in the room long enough not to give up.

Learning With Joy — African Olympiad Academy

In true generalist fashion, I’ve dabbled in many things — teaching, software engineering, startups, and whatever else felt interesting at the time. I’ve never followed one path, but I’ve always followed one guiding question: “Will this be fun to build, and will I enjoy the people I’m building it with?”

That is how I found my way to the African Olympiad Academy or more accurately, how it found me.

AOA isn’t just a school. It is a movement. A team of wildly brilliant, deeply passionate humans — filmmakers, designers, engineers, math lovers and educators coming together to build the high school we wish we had gone to.

We’re on mission to develop math and science talent across Africa and turn students into world-class problem solvers with a commitment to the continent. Not just competitive but deeply grounded in purpose.

And for once, I care about everything — the team, the mission, the students, the late-nights and everything that pushes the AOA’s mission forward.

“Teaching is not about filling the bucket, but lighting the candle.”
@ Richard Muller

Here’s to lighting a few more.

And maybe, just maybe, setting a few things on fire. The good kind ;)

A few months into Toastmasters, I had a curious realization: I was different there. Like, noticeably different.

At Toastmasters, I was more cheerful, more social, more … fearless. I cracked jokes (some of which even landed), and actually enjoyed being on stage. Which was weird because these were the same kinds of people I’d see in classroom — where I was far less charming, confident or coordinated.

So what changed? What was it about Toastmasters that made me feel like a mildly extroverted version of myself? After some post-meeting soul-searching (read: overthinking), I stumbled on something oddly profound: I perform better at Toastmasters because I believe everyone is rooting for me. That belief — whether grounded in reality or not — changes everything.

Clap First, Worry Later

Toastmasters is a place where they clap for everything. You finish a speech? Clap. You forget your line? Clap. You completely derail mid-sentence, say “anyway, that’s my time” and walk off stage? You guessed it — clap.

This environment convinced me that no matter how bad I bomb, nobody’s booing. The belief that the audience is supportive (even if I’m projecting just a little) gives me the courage to try, to speak, to wing it when I have no idea where my sentence is going.

And so, I named this magical mindset shift: the power of positive illusions (not very creative, I know!)

What Are Positive Illusions, Anyway?

Positive illusions are exactly what they sound like: mental tricks where you assume the best — about people, situations, or yourself — even when reality might be a bit more … grey. The catch is, illusions only work if you forget they’re illusions.

In my case, I started applying them outside of Toastmasters. Notably, in one of life’s least joyful arenas: job interviews.

Job Interviews: Weaponizing the illusion

Let us get one thing straight: I’ve never met a single person who enjoys job interviews. The small talk, the resume interrogation, the mental gymnastics of staying upbeat while guessing what the interviewer is thinking — it’s exhausting. Soul-draining, even.

So, I had to hack it. And here’s the illusion I started believing: “If they’re interviewing me, they want me to succeed.”

Think about it. They’ve read my resume, booked a time slot, summoned energy, maybe even skipped lunch. They could be catching up on emails or at the very least, gossiping with co-workers, but they’re here, on Zoom, with me. That counts for something, right?

So I show up believing they want me to get the job. That they’re rooting for me to be the one, so they can finally stop interviewing people and get back to doing… whatever non-interview things they do.

This illusion calms me. It makes the whole thing feel more like a conversation and less like a cross-examination. I’m more present. I ask questions. I admit when I don’t know something and turn it into a learning moment. Spoiler: I still don’t always get the job (In fact, I rarely do). But I leave most interviews feeling good — which, honestly, is a win.

Belief Over Reality

Now, before you get the wrong idea: I’m not delusional (well, not completely). I know I don’t have the greatest track record when it comes to getting offers. But having a good experience, being able to show up as myself, and walking away a bit more confident than I came in? That’s worth something.

And as long as these positive illusions keep working — as long as they keep tricking my brain into not panicking — I’m keeping them. I’ll keep believing people want me to succeed. I’ll keep imagining applause even if it’s just in my head. I’ll keep standing on stages and sitting in interviews with the quiet confidence of someone who’s a little bit delusional — but in a good way.

Because sometimes, to become your best self, you’ve got to believe the best about everyone else first.

Somewhere in the chaotic beauty of 2019, my then-mentor (also my line manager at ALU) gave me feedback that was as gentle as it was painfully true: “You might want to work on your social and public speaking skills”. Why? Because being his teaching assistant apparently meant talking to people. Leading class sessions. Interacting. You know, human stuff. Unfortunately, at the time, I was about as good at that as a potato is at public debate.

But credit where it’s due — he didn’t just drop that critique and walk away. We brainstormed actionable steps, which included two things:

1. Talk to a stranger every day
2. Join Toastmasters

Now, if you know me, you know I clearly didn’t ace the “talk to a stranger every day” challenge (Sorry, Obed, if you’re reading this — I still freeze up around unfamiliar humans). But Toastmasters? That one stuck. And weirdly enough, it became the beginning of something transformational.

Fear of Public Speaking? Sign Me Up for More!

They say necessity is the mother of invention, but in my case, it was more like “panic is the mother of growth”. I figured if I just kept standing in front of people when all I wanted was to crawl under the nearest table, I’d eventually stop wanting to crawl. That was the theory anyway.

Someone didn’t show up and a role opened up? I’m in. Two roles in the same meeting? What could possibly go wrong? (Answer: a lot, but that’s beside the point)

The key idea was: repetition. the more times I put myself in that discomfort zone, the smaller the monster seemed. Sure, I still got nervous, but I also got… better?

From Full-on Scripts to Freestyle Jokes

In the early days, I used to write out entire speeches. Every. Single. Word. Then I’d try to memorize the whole thing and hope I didn’t black out halfway through. During a conversation with my then Toastmaster’s mentee — how ironic (Hi, Sharon!), she mentioned that she only writes bullet points. Just key ideas. No script. She just “runs with it”. It sounded as if she told me that she can breathe underwater. Wild.

But a few months later? There I was. Freestyling. Bullet points. Random stories. A book I read. A mildly traumatic event. Whatever. I’d talk about it. And the shocking part? The quality didn’t nosedive. Sometimes it even got better. (Okay yes, humble flex intended.)

Practice Over Perfection

Somewhere along the way, I noticed I could do things I couldn’t before. Talk to people without panicking. Use gestures like I meant them. Crack a joke without rehearsing it seventeen times in the mirror.

And no, it wasn’t because I suddenly became a speechwriting guru. It was because I had logged hours on stage. Awkward hours. Forgetful hours. Sweaty-palms hours. But hours, nonetheless.

That’s when it hit me: comfort on stage matters more than crafting the perfect speech.

TL;DR — Quantity First, Quality (Hopefully) Later

The biggest lesson Toastmasters taught me? If you want to get better at something — speaking, writing, coding, dancing — don’t wait until it’s perfect. Just do it. A lot. Even if it’s bad. Especially if it’s bad.

Want to write? write a ton. Even it is ugly. Want to code? Build random stuff that barely compiles. Forget the perfect idea — just start. Momentum is a better teacher than inspiration.

Because maybe, just maybe, the good stuff sneaks in when you’re not trying so hard to be perfect.

About seven years ago, I wrote my first Medium article titled “What it’s like being an introvert when it’s unwelcome”. I don’t know if I wrote it to make peace with myself, to inform the public, or just to rant the only way I know how — through a keyboard and mild existential dread. What I do know is this: I felt misunderstood. You can practically hear the frustration in my voice, and if you listen closely, a soft undertone of resignation. As if to say, “Well, this is just how I am. Not much to be done”

Revisiting it now feels a little surreal. Some things haven’t changed — I am still an introvert. But a few things have: I have more friends (crazy, I know), and I’ve developed a slightly more generous view of my own introversion. That shift, I think, has less to do with “fixing” anything and more with figuring out how to live well with it.

Recently, an old friend messaged me. She asked if I’m still an introvert and what exactly happened in the last few years because — and I quote — “you shine more now”. She even asked if I had followed some secret program. At the time, I had no idea how to answer her. So, I did what do I best: I said I’d send her a text once I’d thought about it, and that “text” quietly turned into this blog.

So, M- this one’s for you.

Still An introvert. Just With Better Lighting.

Let’s get one thing clear: I’m still very much an introvert. And to spice things up, I’m also shy. (Yes, really.) Together, it is a bit of a deadly combo — imagine being both quiet and awkward and you’ll get the idea. But I’ve gotten a little less shy, and I think a huge part of that came from not taking myself so seriously anymore. There’s something freeing about realizing the world isn’t watching your every move — and if it is, it’s probably already scrolled past.

Everyone has cringe-worthy memories that creep in whenever they are happy to restore the balance and remind them that you can not be happy always. One of mine? A networking session back at ALU. we were required (yes, required) to mingle with students from ALUSB. The scene: an open space on the second floor of Kigali Heights, with too few sofas, too many pillars, and far too much empty space. I remember shrinking into one of the pillars like I was trying to merge with it. You’d think I was part of the architecture. I wanted nothing more than to disappear. I swear, if I could choose a superpower in that moment, it would be invisibility. Networking? No, thank you.

I Hate Networking (But Also Somehow… Kinda Do It?)

Here’s the thing: I hate the idea of networking — the part where you pretend to care about small talk just because the person might be able to “open doors”. I admire those who can do it, but I’m not one of them. What I can do is hold meaningful one-on-one conversations. You tell me what you do, and I will absolutely go down a rabbit hole of questions — not because I want anything, but because I’m curious.

So… am I good at networking? Maybe. Just not the “here’s my business card” kind. It turns out I’ve built a pretty great network over the years — I just did it in my own way, without feeling like I was selling pieces of myself for access.

In fact, around 90% of the jobs I’ve landed came through friends and people I’d built trust with over time. (Also, side note: how do people apply to jobs and actually get them? Like, seriously. Show yourselves.)

The Secret Formula: Be Useful, Be Kind, Be There

So how does it work, exactly? Simple: do your part during group assignments. Be the person people can count on. Help when you can. Connect people with opportunities. That’s it. If everyone around you is growing and finding success, some of it inevitably comes your way too — not because you networked like a boss, but because you showed up.

At some point, I realized I sucked at conventional networking and — honestly — didn’t want to get good at it. So I decided to build an audience instead. Because here’s a hot take: It’s not about who you know. It’s about who knows you. And writing? Writing is within my control. It’s how I show up in the world. It’s where I can shine without needing to shout.

Final Thoughts: Take the Shell With You

I’m still shy. I’m still introverted. But neither has stopped me from making friends, growing in my career, or creating connections. I’ve just done it in a way that feels right for me.

If there’s one thing I’ve learned, it’s that introversion doesn’t have to be a barrier: You can still shine — just not by trying to be someone you’re not. Maybe the trick isn’t to “step out of your shell” like everyone says, but to carry it with you, like a turtle with purpose.

Go everywhere, shell and all.

“It’s fun, a little clumsy at times, but most importantly, it’s helpful and everywhere.” That’s my take on JavaScript. Originally designed to add pizzazz to web pages within your browser, JavaScript has broken free! It’s now powering backends with Node.js, and if you’re feeling extra adventurous, you can even use it to build AI models with TensorFlow.js.

But enough about JavaScript’s resume, let’s dive into some of its most head-scratching concepts. Understanding these quirks is key to truly appreciating JavaScript’s magic and becoming a better (or rather, a less confused) developer.

Single-Threaded

A thread (in this context) is a sequence of instructions that your machine processes. A process is a program in execution. Being single-threaded means JavaScript operates on a single call stack, processing on task at a time. While this might seem like a limitation, it is actually a core strength that contributes to the JavaScript’s efficiency and simplicity. However, the single-threaded nature does not mean that JavaScript can’t handle asynchronous operations like network requests or user interactions. This is where the even loop and callback queue come into play, enabling JavaScript to manage these operations in non-blocking manner, which we will explore in the next section.

Event loop (In context of Node.js)

Funny story (which is also a bit embarrassing): I was asked to explain how the event loop works in detail during the interview and the next 4 minutes were so cringeworthy that my brain decided to erase the memory (probably a self-preservation mechanism). As a reasonable next course of action, I went on and read about it. So, as a form of redemption, here is another attempt to explain like I should have done months ago:

What in heaven is the event loop anyway? JavaScript, being single-threaded, can only do one thing at a time. The event loop is a mechanism which allows JavaScript to simulate multiple tasks running at the same time. It works by maintaining a queue of events and processing them one at a time.

When we call a function in JavaScript, It is placed onto a call stack, a data structure with LIFO(Last In First Out) principle. This ensures that if function A calls function B, function B is executed and completed before function A resumes. The call stack keeps track of the execution order of functions.

However, when a function’s execution isn’t immediate (asynchronous), It is offloaded (popped from the stack) to Libuv API. This API, built in C++, empowers Node.js to handle operations in parallel, preventing the main thread to be blocked. Consequently, JavaScript proceeds with the next item on the call stack while the asynchronous code runs independently via the Libuv API.

So, how does JavaScript’s V8 Engine get to know when the Libuv API has processed the asynchronous code? Upon completing asynchronous operations, the Libuv API sends callbacks to the event queue. The event loop continuously monitors this queue, and when the call stack is empty, it picks up the first item from the event queue and places it onto the call stack for processing.

Promises

Promises are JavaScript’s way of dealing with asynchronous operations (those tasks that take their sweet time, like a network request). They let you write code that will be executed when the asynchronous operation finally decides to finish.

A promise can be in one of three states:

Pending: The promise is still waiting for a resolution (like a watched pot that never boils).

Fulfilled: The operation was successful (hooray!).

Rejected: An error occurred (Oops!).

Requesting data from a server is a classic example of using a promise. When you make the request, it’s pending. If the data arrives successfully, the promise is fulfilled. If there’s an error, the promise is rejected.

Async and Await

Async/await is a new feature in JavaScript that allows you to write asynchronous code in a synchronous way. It makes your code more elegant and manageable but works exactly the same as promises. Await works inside an async function, pausing the code execution until a promise is settled (either fulfilled or rejected).

Prototype

The prototype is a special property of every object in JavaScript. The prototype is used to inherit properties and methods from other objects. This allows you to create new objects without having to duplicate code. If you are familiar with OOP, you can think of a prototype as a way to implement instances of a class (Object in our case) and you can access its methods and implement inheritance.

Hoisting

In JavaScript, the code runs from the top to bottom in order. Hoisting makes it possible to call a function or use the value of a variable that are defined below their actual execution lines in your code. Hoisting is the the process by which the interpreter move the declaration of functions, variables, or imports to the top of their scope before the execution. However, hoisting does not work with let, const and class (they are very stubborn).

First-class Function

First-class functions are functions that can be treated like any other variable. You can assign them to variables, pass them as arguments to other functions, and even return them from functions. This gives you a lot of flexibility and allows you to write reusable code.

const greet = function(name){
console.log(`Hello, ${name}`);
}
greet('Alice');

In this example, the `greet` function is assigned to a variable, demonstrating its first-class status.

By understanding these core concepts, you’ll be well on your way to mastering the quirks and becoming a JavaScript wizard!

Javascript: A Sneak Peek at Its Core was originally published in Dev Genius on Medium, where people are continuing the conversation by highlighting and responding to this story.

If the above joke rings true, you may have encountered the bad parts of JavaScript.

Let’s face it, JavaScript is everywhere. You will likely use it when you’d rather not because the browser insists. But fear not! There are ways to tame this beast, and one effective approach is to embrace its superset: TypeScript.

TypeScript is an open-source programming language developed by Microsoft. It is designed to make large JavaScript applications easier to scale and maintain. Remember, it’s a superset of JavaScript, meaning any valid JavaScript code is also valid TypeScript. The magic lies in Typescript’s optional static typing, which helps catch errors early in development (before they wreak havoc at runtime). Plus, Typescript offers non-JavaScript features like interfaces and generics, giving you tools to keep your code organized and robust.

In this article, We’re diving into the “must-know” Typescript topics to add this powerful tool to your programming arsenal. If you’re ready to leverage TypeScript alongside your existing JavaScript knowledge, here are the concepts you’ll want to master (or at least get comfortable with).

Types: The Typescript’s Superpower

The official TypeScript website describes TypeScript as “JavaScript with syntax for types”. This highlights the importance of types in TypeScript, making them the first thing on your “To Know” list.

Types are your allies in the fight against errors, helping you identify and squash them before your code even runs. Say goodbye to those dreaded runtime surprises.

Consider the JavaScript code snippet below. If you are getting the input from the user (think of HTML form), it might be a string. If you were expecting two numbers so that they can be added but you receive the string, the return will be ‘23’ because of the string concatenation, not the expected 5. This is the kind of error that only reveals itself at runtime, because oh, well, It’s JavaScript!

function add(num1, num2){
  return num1 + num2;
}
console.log(add('2', '3'));

Sure, you could sanitize input or validate using JavaScript to ensure you are passing integers as arguments. But developers are humans, and humans make mistakes. It is better to have a safety net in place.

Now, let’s add some TypeScript magic

function add(num1: number, num2: number){
  return num1 + num2;
}
console.log(add('2', '3'));

By adding types to the ‘add’ function, we’ve explicitly stated that the parameters must be numbers. TypeScript will now detect the error before you even run the code. If you try to compile anyway, you will get a friendly compilation error message:

Error: Argument of type ‘string’ is not assignable to parameter of type ‘number’ — compilation error

See? Types are your trusty sidekicks in the quest for bug-free code.

While you can define custom types, Typescript gives us core types out of the box. Below are the core types:

• number — for integers and floats. 1, 4.5 and -10 all belong the number type.
• string — for all your text values
• boolean — the classic true or false

Type Inference: TypeScript’s Mind-Reading Trick

Type Inference is a Typescript’s way of figuring out the type you intended, even if you didn’t explicitly declare it.

let age = 5;
age = "five";

Even though we didn’t say “Hey Typescript, age is (fighting hard the urge to add ‘just’ here) is a number”, it cleverly infers that based on the initial assignment of 5. When you later try to change ‘age’ to “five”, Typescript will raise an eyebrow (and an error).

Interface: A Contract for Your Objects

Interface in Typescript describes the structure of an object. It acts as a custom type (not a blueprint of an object itself).

interface Person {
  name: string;
  age: number;
  greet(phrase: string):void;
}

So, what is the point of using an interface? It allows you to type-check an object

let user1: Person;

And voila! Now, Typescript knows that ‘user1’ must adhere to the ‘Person’ contract, meaning it should have a ‘name’, an ‘age’, and a ‘greet’ method.

Enum: Keeping Things in Order

Enum, short for enumerated types are data structures for constant length that holds a set of constant values. They are handy when setting properties or values that can only be a certain number of options. Think of a user role in a learning system, which might be limited to “student”, “teacher” or “admin”.

Generics: The Swiss Army Knife

Generics allow developers to pass types as parameters to another type, function or other structure to improve code flexibility and remove duplication. Typescript supports generics as a way to introduce type-safety into components that accept arguments and return values whose type will be indeterminate until they are consumed later in your code. In short, generics allow you to create components that can work over a variety of types rather than a single one (Your truly “one-size-fits-all”).

You’ve probably already encountered some built-in generics, like the trusty Array and Promise types. They’re like the classic white T-shirt and jeans of the programming world — Versatile, reliable, and always in style.

const names: Array<string> = []; // string[]

const promise: Promise<string> = new Promise((resolve, reject) => {
  setTimeout(()=> {
    resolve("This is done!");
  }, 2000)
})

But the real fun begins when you start creating your own generic functions. It is like designing your own custom-made outfit — tailored precisely to your needs.

function merge<T, U>(objA: T, objB: U) {
  return Object.assign(objA, objB);
}

const mergedObj = merge({name:'Max'}, {age: 30});

Optional Chaining: A Key to Safe Access

Optional chaining is the ability to immediately stop running an expression if a part of it evaluates to either null or undefined. It is like having a safety net for your code. You know these moments when you are reaching for something and you are not quite sure it’s there? Optional chaining is like extending your arm with a gentle “tap tap” to check if the object you are looking for exists before you grab it. If it’s not there, no harm done — you simply move on.

const course = {
  name: 'Intro to Software Engineering',
  about: {
    semester: "Spring",
    prerequesite: "Data Structures and Algorithms"
  }
}
const sem = course?.about?.semester; // Spring
const prof = course?.about?.professor; // undefined

In the example above, optional chaining gracefully navigates the nested properties of the ‘course’ object, always checking for the presence of the next property before proceeding. Typescript infers types correctly at each level by accounting for the possibility of undefined. If any part in the chain is null or undefined, the chain evaluates to undefined. This helps avoid runtime errors when trying to access methods or properties of objects that might be null or undefined. Note that optional chaining works the same with JavaScript.

With these Typescript concepts under your belt, you’re well on your way to becoming a Typescript maestro. And remember, while Typescript’s adoption might not have been universally requested (who asks for more rules, right?), Its widespread use in modern development makes it a skill worth mastering. So, embrace the power of Typescript, and let your code shine!

Typescript: Adding Types to JavaScript was originally published in Dev Genius on Medium, where people are continuing the conversation by highlighting and responding to this story.

React.js is now synonymous with modern frontend development because of its recent wild adoption. However, one needs to know why React to understand its virality.

React.js is an unopinionated library to build modern user interfaces. It combines two attributes to be performant and easy to use: Being a single page application and building re-usable components. Being a single page application means that when the page is rendered in the browser, it is one big component with nested components and when one nested component is changed (we will learn more about state management and DOM), React.js re-renders the components changed and not the entire page. Another benefit of React.js is that you can create and re-use components which makes development faster and makes it easy to scale the React.js apps.

Virtual DOM in React.js

When the browser renders the web page, it constructs a logical, tree-like structure from the HTML to show the user the requested page. The tree like structure is known as DOM (Document Object Model) and it acts as an interface that scripting languages like Javascript can use to add, remove and update elements on the web page.

When the app data changes and triggers an update, the re-rendering is done which can be expensive and when using React.js, that is when Virtual DOM comes to the rescue.

Virtual DOM provides the mechanism to minimize DOM operations when re-rendering UI. When the Virtual DOM is updated, React compares it to a snapshot of the Virtual DOM before the update to determine the elements that changed then updates only the changed elements on the real DOM. This increases the performance of React.js applications.

Components and Jsx

React applications are made entirely out of components. All React does is assembling components into a web page.

A component is a piece of UI that has its own data, logic and appearance. You can re-use, nest inside each other and pass data between two components.

Between components, the data flows one way: from parent to the child component and not vice versa. This makes apps more predictable and easier to understand and debug.

React syntax uses jsx, a syntax extension of Javascript which allows bundling together HTML, CSS and Javascript in one file. JSX allows React to render logic, data and UI into one component.

In the example below, we declare a variable name and use it inside jsx by wrapping it in curly braces, just the React way:

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

Events, State and Props

Just like HTML DOM events, React can perform actions based on user events like click, change, mouseover, etc. React events are written in camelCase syntax and event handlers are written inside curly braces:

<button onClick={shoot}>Take the Shot!</button>

Note that the event “onClick” is camelCased and it calls the function shoot. It is also important to note that shoot is not called

There are two main types of data in React application: state and props

State is internal data that can be updated by the component’s logic while Props (short for properties) is data coming from outside the component. Props are immutable (read-only) and if you need to mutate props, it is likely a sign that you should have used state instead.

To understand better events and state; let us build a program that increments or decrement a number based on the button clicked.

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [step, setStep] = useState(0);

  const handleIncrement = () => {
    setStep((s) => s + 1);
  };
  const handleDecrement = () => {
    setStep((s) => s - 1);
  };
  return (
    <div className="App">
      <h1>Hello React</h1>
      <h2>This is where the learning of React Happens!</h2>
      <div>{step}</div>
      <button onClick={handleDecrement}>-1</button>
      <button onClick={handleIncrement}>+1</button>
    </div>
  );
}

Our beautiful app shown above increment the number by 1 when the button with +1 is clicked and decrement the number (step) by 1 when the button -1 is clicked. The event “onClick” calls function to decrement or increment numbers and they change the state of the step.

To create state in React apps, you can do the following 3 steps:
1. Create/define state variable — In our app, we used useState hook that comes out of the box with React. Note that you can use different libraries for state management like Redux and contextAPI. for simplicity, we are using useState hook.

2. Use state variable in your code — In our app, it where there is <div>{step}</div>. Step variable has the value of the current state of the step.

3. Update the state in the event handler — In our app, the event handlers are handleIncrement and handleDecrement.

Now that we understand how events and state works, there is something important we have not looked at yet: Passing and Receiving props.

Passing and Receiving Props

Remember that props are passed from the parent to the child components only? Let us say we need to include the profile in the app to show the app designer. You might include the profile section as a component inside the parent App component. Below is the code:

import "./styles.css";
import { useState } from "react";

function Profile(props) {
  return (
    <>
      <h1>Name: {props.name}</h1>
      <p>Email: {props.email} </p>
    </>
  );
}
export default function App() {
  const name = "Innocent";
  const email = "innocent@gmail.com";
  const [step, setStep] = useState(0);

  const handleIncrement = () => {
    setStep((s) => s + 1);
  };
  const handleDecrement = () => {
    setStep((s) => s - 1);
  };
  return (
    <div className="App">
      <h1>Hello React</h1>
      <h2>This is where the learning of React Happens!</h2>
      <Profile name={name} email={email} />
      <div>{step}</div>
      <button onClick={handleDecrement}>-1</button>
      <button onClick={handleIncrement}>+1</button>
    </div>
  );
}

Note how we created the Profile component inside the App component? App component is now the parent of the Profile component and you can pass data from App to Profile component as props. The props are passed to the Profile component as attributes: name and email. The Profile component receives props as function parameter and they are accessed inside of it. Since props is received in Profile component as an object, you can easily access its elements like name and email using props.name and props.email. Note that you might also use object destructuring instead to make it more clear like this:

function Profile({name, email}) {
  return (
    <>
      <h1>Name: {name}</h1>
      <p>Email: {email} </p>
    </>
  );
}

And voila, you now know the fundamentals of React and you are ready to fly (or should I say react?)

If it still sounds like magic, hold on a bit and read more about different parts. If anything, I hope you know what DNS (It is not Do Not Smoke policy, I promise)in full is by the end of this article.

Now onto the main things, what happens when you type google.com and press Enter?

wait a bit, if you check the URL in the browser, it looks like this: https://google.com

The first part HTTPS tells the browser to connect to the server using a protocol HTTPS. HTTPS is a more secure protocol than HTTP because the connection is encrypted using SSL.

The second part of the URL is the domain: google.com. The domain name is how the browser knows how to reach a particular server. This process is called DNS lookup. Think of it in this way:

People are not very good at memorizing numbers and while the server is referenced by its IP address, memorizing something like 124.124.0.1 for every website you visit would be a nightmare (rather impossible) so the DNS server takes the role of mapping the domain name to their IP addresses. It is like a dictionary you use to check the IP address by searching the name.

After getting the IP address from the domain name through DNS lookup, the browser established a TCP connection with the server using that IP address. This takes a handshake to establish a TCP connection. Remember when I mentioned HTTP and HTTPS protocols? If the connection is using HTTPS, the process of establishing a connection is more involved as it requires an SSL/TLS handshake to establish the encrypted connection between the browser and the server. Finally, the browser sends an HTTP request to the server over the established TCP connection. With the HTTP protocol, the browser sends the request, the server processes it and sends back a response. The browser receives the response that renders the HTTP content.

But wait, google has more than 4 billion active users, which means at any particular time, there is a lot of traffic requesting information from their servers and different services. That means you can not use just one server to accommodate all users.

What is a server to begin with?

According to Paessler, a server is a computer or system that provides resources, data, services, or programs to other computers, known as clients over a network.

The computer you are using to type google.com in the browser is the client while the computer which serves you the information you are requesting is the server. There are different types of servers but the main ones are web servers and application servers.

A web server exclusively handles HTTP requests, whereas an application server serves business logic to application programs through any number of protocols.

While the server serves the data to the client, it is usually stored in the database (consider this as another type of server — database server). A database is an organized collection of data, stored and accessed electronically. Some of the common databases used are relational databases like MySQL and PostgreSQL and non-relational databases like MongoDB.

To handle traffic when you need to use many servers (like how Google does for billions of people to use its services), you need a load-balancer. A load balancer’s role is to distribute requests to different web servers. This improves the performance of applications by decreasing the burden on individual servers or services and distributing the demand across different compute servers to help maintain the application.

As the client sends a request to the server or server sending back responses, malicious actors might interfere and send data which can harm and it is important to have a mechanism to protect the servers from different kinds of attacks. This could be allowing requests from a certain region only, certain types of information, etc. To prevent unauthorized access to the network, a firewall is needed.

A firewall is a network security device or software that monitors both incoming traffic and outgoing traffic using a predefined set of security to detect and prevent threats. Different types of firewalls include packet filtering, proxy service and stateful inspection. For security purposes, each request to Google’s servers passes through the firewall and if you are using Chrome browser, your requests are served using an HTTPS connection via port 443 which is the standard port for HTTPS traffic.

The visual representation of what happens when you type google.com and press enter:

In short, when you type google.com in the browser, the DNS server sends a request to get google.com’s corresponding IP address. an encrypted HTTP request is sent to the IP address which passes to the load balancer first to be sent to Google’s servers (application and web server). The web server returns the page while the application server creates the web page. The application server queries data from a database that is needed, creates the page and the web server sends back the response and voila, you now have the Google search web page rendered in your browser.

If we’ve ever crossed paths outside of the classroom, you’ve likely heard me gush about these books on numerous occasions. If that’s the case, I apologise for the repetition — but here’s another chance to hear about them! And if you are new to my book recommendations, I hope you find these 5 titles intriguing enough to add to your 2024 reading list.

How to Not Die Alone: The Surprising Science That Will Help You Find Love

It is not what you think, I promise. Or maybe, it is. This book is not about dying alone. Rather, it is a guide on what to look for and what not to value when navigating the world of relationships. Logan Ury, a behavioural scientist at Hinge and previously at Google, distinguishes genuine relationship qualities from fleeting infatuations and her insights offer a fresh perspective on what to care about when pursuing companionship, grounded in scientific research and practical advice.

Algorithms to live by: The Computer Science of Human Decisions

Ever wondered why you think your current partner is the best you can get? Or perhaps you’re questioning whether getting married is to them is “settling” for less than you deserve? Well, this book by Brian Christian and Tom Griffiths explores how computer algorithms can be applied to everyday decision-making, including the realms of love and commitment. From the “optimal stopping” theory to the benefits of randomness, this book provides a unique lens through which to view our personal and professional lives. The authors use the secretary problem and other algorithms to dish out surprisingly practical life advice. Optimal stopping, Caching, you name it. It’s like your love life, coded.

Naked Money: A Revealing Look at What It Is and Why It Matters

While it might not account for everything you need in life, money is a significant aspect of our lives, and it does not help when you try to learn about anything beyond inflation and you are hit with jargon after jargon. Charles Wheelan demystifies the complex ecosystem of global economics and his clear, witty prose breaks down abstract concepts of money, monetary policy, and financial systems into digestible, engaging narratives. This book is an essential read for anyone looking to understand the economic forces that shape the world, without the jargon or pretence that is often found in economic literature. Oh, while at it, you might also want to check out his other books: Naked Economics, Naked Statistics and whatever book of his you can find that has Naked in the title.

Indistractable: How to control your attention and choose your life

I first encountered Nir Eyal’s work in 2021 while researching addictive apps. His book “Hooked: How to Build Habit-Forming Products” helped me understand what makes apps so captivating. I could not resist diving deeper into Eyal’s insights, which led me to his book “Indistractable”. How come some folks can go on for 4 hours without checking their phone? How is it humanly possible to sit without your phone in sight and not die of extreme anxiety? In this beautifully written book, Nir explores what makes you distracted using behavioural psychology and a trigger-action-reward framework. Through an exploration of psychology and practical advice, Eyal equips readers with the tools to master internal triggers and cultivate a life of greater purpose and productivity.

Marry Him: The case for settling for Mr. Good Enough

Do not get it twisted; I am not pitching my own love life here. But this book? despite its provocative title, Lorie Gottlieb’s book offers a thoughtful examination of the modern dating scene, advocating for a balance between idealistic expectations and the realities of finding a partner. She argues for a focus on compatibility and shared values over the pursuit of the elusive perfect match. The narrative resonates across genders, urging readers to evaluate what truly matters in a lasting relationship.

It may seem counterintuitive to assert that friendships require significant effort. Shouldn’t they be effortless, evolving naturally? In a utopian world, perhaps, but reality often dictates otherwise. Our friendships typically arise from shared contexts, and if I we know each other, it is likely because we met at school, toastmasters or a book club. If we are friends, it is mostly because we made a conscious decision to put work into developing and nourishing our friendship. As the adage goes “grass is always greener where it is watered”.

Consider my high school friends. Although we don’t spend copious amounts of time together, we consciously maintain our bond. It could be as simple as a greeting when someone is in town or an occasional phone call. This enduring connection, spanning almost a decade post-school, owes partly to our shared formative experience. There is something about bonding over the trials of adolescence and, in our case, subpar cafeteria food, that cements a friendship.

I had always taken a laid-back approach towards building relationships. Who needs to go out, meet random people and build towards having great relationships? not me. Do not get me wrong, I have got great friends but the bigger number of great friendships you have, the more fulfilling life becomes.

It does not help that I am itching to get home before the professor says I will see you next week. Building friendships, like any relationship, demands time, effort, and sometimes financial investment. I won’t deny that. But does this effort somehow diminish the value of these relationships? I think not. It is unwise, in my opinion, to stay cooped up at home, bemoaning the lack of meaningful connections, especially if one avoids opportunities to forge them.

Let us face it — making friends is not always easy and might even be expensive. It can be daunting to step out of our comfort zones, to engage with new people, to invest in potential friendships without the guarantee of them flourishing. But the rewards, in the end, are invariably worth it.

So, here’s a thought: next time you find yourself hesitating at the threshold of a social gathering, remember the potential friendships waiting on the other side. It is about taking that first step — one group hike or dance class (maybe a dance class is a huge step but you get the idea), however small, towards cultivating a richer, more connected life.

> I am not even talking to you, I am talking to me.

Until next time