DEV Community: Tony Kharioki

Then Came the Pager: A DevOps Parody of Chad Gadya

Tony Kharioki — Wed, 25 Mar 2026 00:01:32 +0000

🐐 The Nursery Rhyme That Explains Your Last Postmortem

Chad Gadya is a well-known cumulative rhyme sung at the end of the Passover Seder. It begins innocently enough:

"Then came the Angel of Death who killed the butcher, that slaughtered the ox, that drank the water, that quenched the fire, that burnt the stick, that beat the dog, that bit the cat, that ate the goat, that Father bought for two zuzim."

Then chaos breaks loose in poetic sequence:

The cat eats the goat,

the dog bites the cat,

the stick beats the dog,

the fire burns the stick,

the water quenches the fire,

the ox drinks the water,

the butcher slaughters the ox,

the Angel of Death slays the butcher…

and on and on it goes.

Each line adds a layer of consequences in a domino-like chain. What starts with a humble goat ends in divine intervention.

As software engineers, does this remind you of… everything?

💻 The DevOps Parody: "Then Came the Pager"

Let’s translate this cumulative tale into the world of software development, cloud hosting, CI/CD, and good ol’ DevOps drama.

That junior pushed a commit

That broke the TypeScript build

That triggered the CI pipeline

That failed the automated tests

That skipped the staging deploy

That deployed to production

That crashed the backend API

That exceeded the Vercel limits

That hit the AWS EC2 fallback

That racked up the hosting bill

That triggered the budget alert

That paged the on-call engineer

That blamed the deploy script

That ran from the commit

That the junior pushed

That started it all

For two zuzim.

(Two zuzim ≈ unpaid internship experience + coffee)

🧠 Why This Hits Home

🔗 1. Dependencies Are Real

Just like in Chad Gadya, every part of the system relies on something else. One failure can ripple down the stack.

⚠️ 2. CI/CD Chains Can Be Fragile

From your linters to your deploy script to cloud infra—everything must go right. Or everything will go very wrong.

💸 3. Cloud Hosting Can Be a Silent Budget Bomb

You don’t know true horror until your dev mistake spikes your AWS bill at 3AM. (Hello, 100% CPU EC2 instance from a runaway cron job.)

🧑‍💻 4. Blameless Culture?

Despite best practices, we often default to blaming the engineer who made the final push. But the issue is usually systemic.

🙃 Takeaways

Understand your stack’s full dependency graph. That innocent change may impact billing, performance, or security.
Set guardrails in CI/CD. Don’t let tests fail quietly. Protect staging and prod like your startup’s future depends on it—because it does.
Monitor your infrastructure costs. Budget alerts are your goat-saving firewalls.
Practice true blameless retros. If you're blaming the goat, you're not looking deep enough.

If this rhyme made you laugh (or cry), share it with your team. Because sometimes, the only way to survive tech chaos… is to sing about it.

Anime-themed MTG Card Generator

Tony Kharioki — Fri, 01 Aug 2025 23:47:10 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

An Anime-themed MTG Card Generator. It generates cards for random anime characters and provides a brief description of their skills, mana levels, and characteristics.

Demo

Live Demo

My Experience

This project took only one prompt. Usually, on other services like Bolt, Replit, and Lovable, I have to write more than one prompt and need to guide the builder on the decisions.

🧘 Code Like Krishna Said: 'To Work You Have the Right, But Not the Fruits Thereof'

Tony Kharioki — Fri, 01 Aug 2025 15:34:51 +0000

There's this quote I love from the Bhagavad Gita;

🕉️ "You have a right to perform your prescribed duties, but you are not entitled to the fruits of your actions."

— Bhagavad Gita, Chapter 2, Verse 47

Here’s an ancient yet surprisingly modern piece of wisdom from the Bhagavad Gita, a 5,000-year-old philosophical text, that’s been quietly whispering to us:

"Do your work. But let go of the results."

In this post, I want to explore what that means for software engineers, team dynamics, and even how we relate to our tools — including AI.

🛠️ Doing the Work, Writing the Code

As developers, we push code, resolve tickets, squash bugs, ship features, and refactor for hours. But how often do we tie our sense of value to what happens afterward — the likes on a pull request, the product release praise, or even whether that feature gets used?

In the Gita, Krishna tells Arjuna: focus on action, not the outcome. In our world, that translates to:

Writing quality code
Thinking through edge cases
Designing scalable architecture
Reviewing PRs thoughtfully
Contributing to team health and documentation

Your effort, craft, and intent matter. That is your domain — your right.

But once the code is merged?

Once it's in the hands of users or product managers?

Once that startup pivot happens and your feature is shelved?

You are no longer in control. The "fruit" of your work may be used, abused, ignored, or never released.

And that’s okay.

💼 The Modern Workplace and Detachment

The Bhagavad Gita’s wisdom is not a call to apathy — it’s a call to detached responsibility.

In tech culture, we’re often taught to own outcomes — and yes, accountability matters. But unhealthy attachment to metrics like:

🚀 Feature adoption
⭐ GitHub stars
💰 Performance bonuses
📊 Story points completed

…can lead to burnout, resentment, or imposter syndrome.

Instead, what if we measured success by:

✨ Craft over clout
🛠️ Process over perfection
📈 Progress over praise

The Gita reminds us that detachment doesn’t mean disinterest — it means freedom from what you can’t control, so you can focus fully on what you can.

🤖 The AI Analogy: Action Without Attachment

Let’s take an AI model as an example.

A transformer-based model like GPT processes input and produces output based on probability-weighted patterns. It has no expectation, no ego, no desire for praise or criticism. It "works" — and then lets go.

You prompt it. It responds. The rest — your feedback, your use case, your success or failure — isn’t its burden.

Isn’t that kind of… divine?

While humans shouldn’t aim to be emotionless machines, we can learn from this:

act with full presence, release attachment to results.

🧪 Real-World Scenarios for Devs

Let’s bring it home with some examples:

🔹 You wrote tests and CI/CD scripts — but the deploy still failed.

→ You did your duty. Learn and move on.
🔹 You proposed a better architectural decision — but the team didn’t adopt it.

→ You voiced your perspective. That’s leadership.
🔹 Your open source library didn't go viral.

→ You built something useful. That’s creation. That’s enough.

🧘🏼‍♀️ Practical Takeaways for Developers

Here are ways to embody this Gita mindset at work:

✅ Shift focus from praise to process

✅ Celebrate small wins — writing clean code is its own reward

✅ Separate your self-worth from your JIRA board

✅ Offer ideas without clinging to being right

✅ Don't burn out for a fruit that was never yours to hold

🧑‍💻 Final Thought: Code with Intention, Release with Detachment

The Gita doesn’t say don’t care. It says:

→ care deeply about the work itself, not what it brings you.

In a profession where we solve endless puzzles and often don’t control what happens after we hit “merge,” that mindset isn’t just spiritual — it’s sustainable.

Whether you're shipping your first pull request, maintaining legacy code, or mentoring juniors — keep coding, keep learning, and let go of the fruit.

Your work is enough.

🙏 Thanks for reading.

If this resonated with you, drop a comment — or share your own dev-philosophy fusion stories!

🧠 The Code of Theseus: Is It Still the Same App?

Tony Kharioki — Tue, 29 Jul 2025 07:14:39 +0000

“If every part of a ship is replaced over time, is it still the same ship?”

– The Ship of Theseus

This ancient thought experiment has puzzled philosophers for centuries, from Heraclitus to John Locke. But in our world of software, we can ask a modern version of the same question:

💻 The Code of Theseus

If every line of code in a software project is eventually rewritten, every dependency upgraded or swapped, and every contributor replaced — is it still the same app?

It might still look the same. The branding, domain name, and user experience might remain familiar.

But under the hood? A total transformation.

🧩 Software Is Built to Change

In long-lived software projects, it’s rare for original code to survive untouched. Over time, things change:

Monoliths become microservices
Legacy frameworks are replaced (think AngularJS → React → Svelte)
APIs are versioned, then deprecated
Features are added, removed, or entirely reimagined
New engineers come in with fresh opinions and best practices

Ask anyone who’s worked on a product for more than a few years — it eventually becomes unrecognizable.

🤖 What Happens When AI Starts Writing the Code?

Today’s software is increasingly co-authored — or even fully written — by AI:

GitHub Copilot offers completions for entire functions
ChatGPT generates business logic, boilerplate, and tests
Prompt-driven code generation is emerging as a serious development model

What happens when most of a codebase is machine-generated?

If AI rewrites legacy code, is it the same software?
If the original human-written code disappears, who’s the real author?
If prompt engineering replaces manual coding, where does identity lie?

⚖️ So… What is a Software Project?

Let’s try to define a software project's identity by various factors:

Defined By	Is It Still the Same App?
Codebase	❌ Not if everything is rewritten
Feature set	🤷 Changes over time, but might preserve essence
UX / UI	❌ New design can change the perception completely
Domain / Brand	✅ Often the most stable part
Team	❌ Teams churn; culture evolves
Purpose	✅ If the core mission remains the same

Maybe the story behind the app — not the components — is what we really cling to.

🌱 Final Thought

Software is a living thing.

It evolves. It breaks. It grows new limbs and sheds old skin. With AI accelerating this transformation, we might see software reinvented completely in months, not years.

And still… the idea persists.

So is it the same app?

Well — it depends on what part of the ship you’re standing on.

💬 What do you think? Have you worked on a codebase that became unrecognizable over time? Or led a rewrite that still “felt” like the same product?

Let’s talk in the comments 👇

Horizontal Calendar - a simple date picker for React Native

Tony Kharioki — Sat, 01 Apr 2023 22:52:16 +0000

Trailer

I decided to write this to help someone who may need to build a simple horizontal calendar picker for your mobile app. Today we are going to do so without having to use the cumbersome third party packages.

Why?

Well, suppose you're building an app that requires you(or the user) to select a date and other events that would be dependent on the date selected e.g. movie booking, event planner, travel/event planner, flight/bus booking or even an appointment manager(which I'll be launching in a few weeks)

Okay, that's enough foreplay; lets dive into the cool stuff. I'll add a repo at the end.

Let the fun begin

Create a new project.

Initialize a new expo app - We are using Expo because its 2023 and its freaking cool.

npx create-expo-app HzCalendar
cd HzCalendar

Now you can run any of the following commands depending on which device/simulator you're testing with. As an added bonus, you can run it on web too(expo is that good)

npm run android
npm run ios
npm run web

Install dependencies

We're only going to need only moment for working with dates. You may choose to use others like date-fns if you wish.

npm install --save moment

1. Calendar Component

We are going to have a calendar component that takes two props, an onSelectDate and selected. The selected prop is so we change styles later. Lets create a components folder, then create a Calendar component.

we are going to track 3 states: an empty date to start with, a scrollPosition and a currentMonth.
later we will use the scrollPosition to track the current month.

First we are gonna use a for loop to generate the next 10 days. We will then parse the days with moment and update the dates state.

At this point I assume you understand the basic javascript functions, and how react works when passing props and state data. I'll also add a few styles, so I hope you understand how styling works in React Native.

Then we will display the dates in a horizontal scrollview.

2. Date Component

We need to abstract the date component. Lets create a Date component in the Components folder

This will be a simple TouchableOpacity button that will call onSelectDate
Our Date component will take 3 props, a date that will be displayed, the onSelectDate function we passed to calendar, and the selected prop too.
We'll use the selected prop to give the selected date different styling.

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import moment from 'moment'

const Date = ({ date, onSelectDate, selected }) => {
  /**
   * use moment to compare the date to today
   * if today, show 'Today'
   * if not today, show day of the week e.g 'Mon', 'Tue', 'Wed'
   */
  const day = moment(date).format('YYYY-MM-DD') === moment().format('YYYY-MM-DD') ? 'Today' : moment(date).format('ddd')
  // get the day number e.g 1, 2, 3, 4, 5, 6, 7
  const dayNumber = moment(date).format('D')

  // get the full date e.g 2021-01-01 - we'll use this to compare the date to the selected date
  const fullDate = moment(date).format('YYYY-MM-DD')
  return (
    <TouchableOpacity
      onPress={() => onSelectDate(fullDate)}
      style={[styles.card, selected === fullDate && { backgroundColor: "#6146c6" }]}
    >
      <Text
        style={[styles.big, selected === fullDate && { color: "#fff" }]}
      >
        {day}
      </Text>
      <View style={{ height: 10 }} />
      <Text
        style={[
          styles.medium,
          selected === fullDate && { color: "#fff", fontWeight: 'bold', fontSize: 24 },
        ]}
      >
        {dayNumber}
      </Text>
    </TouchableOpacity>
  )
}

export default Date

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#eee',
    borderRadius: 10,
    borderColor: '#ddd',
    padding: 10,
    marginVertical: 10,
    alignItems: 'center',
    height: 90,
    width: 80,
    marginHorizontal: 5,
  },
  big: {
    fontWeight: 'bold',
    fontSize: 20,
  },
  medium: {
    fontSize: 16,
  },
})

Then we call the Date component in the Calendar component and pass each date in the scrollview.

import { useState, useEffect } from 'react'
import { StyleSheet, Text, View, ScrollView } from 'react-native'
import moment from 'moment'
import Date from './Date'

const Calendar = ({ onSelectDate, selected }) => {
  const [dates, setDates] = useState([])
  const [scrollPosition, setScrollPosition] = useState(0)
  const [currentMonth, setCurrentMonth] = useState()

  // get the dates from today to 10 days from now, format them as strings and store them in state
  const getDates = () => {
    const _dates = []
    for (let i = 0; i < 10; i++) {
      const date = moment().add(i, 'days')
      _dates.push(date)
    }
    setDates(_dates)
  }

  useEffect(() => {
    getDates()
  }, [])

  return (
    <>
      <View style={styles.centered}>
        <Text style={styles.title}>Current month</Text>
      </View>
      <View style={styles.dateSection}>
        <View style={styles.scroll}>
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
          >
            {dates.map((date, index) => (
              <Date
                key={index}
                date={date}
                onSelectDate={onSelectDate}
                selected={selected}
              />
            ))}
          </ScrollView>
        </View>
      </View>
    </>
  )
}

export default Calendar

const styles = StyleSheet.create({
  centered: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  dateSection: {
    width: '100%',
    padding: 20,
  },
  scroll: {
    height: 150,
  },
})

Now we update our App.js file to display the Calendar component.

We'll add a selectedDate state that we shall pass to Calendar props.

import { StatusBar } from 'expo-status-bar';
import { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import Calendar from './components/Calendar';

export default function App() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <View style={styles.container}>
      <Calendar onSelectDate={setSelectedDate} selected={selectedDate} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Now we have a working Horizontal scroll calendar component that looks pretty much like this.(if you select a date, you'll notice the styling changes - that's that Stylesheet magic we added in the Date component)

Bonus - Current month

Now let's use the scrollPosition to determine the month to be displayed above our dates.

We'll update our Calendar component and track the scroll position on the horizontal scrollview and update the scrollPosition state.
Then we'll use the scrollPosition and moment to generate the current month of the date in view.

PS: this onScroll functionality may not be the best implementation. However I challenge you to come up with a better one. I know there's one. If you do, don't hesitate to open a PR on the repo.

import { useState, useEffect } from 'react'
import { StyleSheet, Text, View, ScrollView } from 'react-native'
import moment from 'moment'
import Date from './Date'

const Calendar = ({ onSelectDate, selected }) => {
  const [dates, setDates] = useState([])
  const [scrollPosition, setScrollPosition] = useState(0)
  const [currentMonth, setCurrentMonth] = useState()

  // ... same as before

  /**
   * scrollPosition is the number of pixels the user has scrolled
   * we divide it by 60 because each date is 80 pixels wide and we want to get the number of dates
   * we add the number of dates to today to get the current month
   * we format it as a string and set it as the currentMonth
   */
  const getCurrentMonth = () => {
    const month = moment(dates[0]).add(scrollPosition / 60, 'days').format('MMMM')
    setCurrentMonth(month)
  }

  useEffect(() => {
    getCurrentMonth()
  }, [scrollPosition])

  return (
    <>
      <View style={styles.centered}>
        <Text style={styles.title}>{currentMonth}</Text>
      </View>
      <View style={styles.dateSection}>
        <View style={styles.scroll}>
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            // onScroll is a native event that returns the number of pixels the user has scrolled
            scrollEventThrottle={16}
            onScroll={(e) => setScrollPosition(e.nativeEvent.contentOffset.x)}
          >
            {dates.map((date, index) => (
              <Date
                key={index}
                date={date}
                onSelectDate={onSelectDate}
                selected={selected}
              />
            ))}
          </ScrollView>
        </View>
      </View>
    </>
  )
}

export default Calendar

const styles = StyleSheet.create({
  centered: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  dateSection: {
    width: '100%',
    padding: 20,
  },
  scroll: {
    height: 150,
  },
})

Now we can see the month and when you scroll to a new month, it should change the month displayed above.

Fun exercise...

Try using the Animated API to center selected date or even make it feel like a wheel.

You can find all the code in this repo. PRs are welcome.

Zod 101 - A Typescript-first Schema Validation Library

Tony Kharioki — Mon, 20 Mar 2023 22:27:10 +0000

The Trailer

Typescript is great for checking variables at the top level, e.g.: you can specify that the age property for a User should be a number. However you can't always be sure what you're going to get from a form input. Typescript will present an error if it's not a number but on its own it doesn't know if a number is too low or too high to this usecase.

There's a similar problem with 3rd party API responses.

Why Zod?

Zod allows you to work around uncertainity by checking types at the runtime level as well at the type level.
Typescript checks type on the type level, Zod checks type on the runtime level.

What is Zod?

Zod is a Typescript-first schema declaration and validation library. It is designed to be very developer friendly. It aims to eliminate duplicative type declarations. With Zod you can declare a validator once and Zod will automatically infer the static Typescript type for you.

We'll be using Vitest to run the tests

Runtime Checking

consider the following code:

export const toString = (num: unknown) => {
  return String(num);
};

We are taking in a num variable that we've typed as unknown. We then return a stringified version of it unknown. This means that we can call toString() with anything we want on the type level, including object types or undefined.

toString(1); // "1"
toString("1"); // "1"
toString({}); // "[object Object]"
toString(undefined); // "undefined"

For now all these would work, but we want to prevent this at the runtime level. If we call toString() with a string, we want to throw an error and say it expected a number but received a string.

Solution - update the function to check the type at the runtime level:

const numberParser = z.number();

export const toString = (num: unknown) => {
  const parsed = numberParser.parse(num);
  return String(parsed);
};

// Tests
it("should throw a runtime error when called with not a number", () => {
  expect(() => toString("123")).toThrowError(
    "Expected number, received string",
  );
});


it("should return a strung when called with a number", () => {
  expect(toString(123)).toBeTypeOf("string");
});

We create a numberParser using the z.number() function. This is a ZodSchema object that we can use to parse the num variable. If the num variable is not a number, the parse() function will throw an error. This means that any variable we create by calling numberParser.parse() will be typed as a number, and our tests will pass.

Verify Unknown APIs with an Object Schema

Zod is commonly used for verifying unknown APIs. Consider the following API fetch:

const PersonResult = z.unknown();

export const fetchStarWarsPersonName = async (id: string) => {
  const data = await fetch("https://swapi.dev/api/people/" + id).then((res) =>
    res.json(),
  );

  const parsedData = PersonResult.parse(data);

  return parsedData.name;
};

In the above instance the PersonResult variable is created with z.unknown(). This means that we are saying that we don't know what the API response will be.

The test does pass - it's the issue of PersonResult being typed as unknown that we want to solve.

Solution - update the PersonResult variable to be a ZodObject:

const PersonResult = z.object({
  name: z.string(),
});

export const fetchStarWarsPersonName = async (id: string) => {
  const data = await fetch("https://swapi.dev/api/people/" + id).then((res) =>
    res.json(),
  );

  const parsedData = PersonResult.parse(data);

  return parsedData.name;
};

// Tests
it("should return the name", async () => {
  expect(await fetchStarWarsPersonName("1")).toEqual("Luke Skywalker");
  expect(await fetchStarWarsPersonName("2")).toEqual("C-3PO");
});

Any additional keys you add to the PersonResult ZodObject from the original API response will be included in the parsedData variable.

Create an Array of Custom Types

Consider the following API fetch:

const StarWarsPerson = z.unknown();

const StarWarsPeople = z.unknown();

export const fetchStarWarsPeople = async () => {
  const data = await fetch("https://swapi.dev/api/people/").then(response => response.json());

  const parsedData = StarWarsPeople.parse(data);

  return parsedData.results;
}

The correct way to solve this challenge is to create an object that references other objects. In this case StarWarsPeople will be a z.object that contains results.

Declaring arrays of objects like this is one of the most common use cases for z.array(), especially when referencing types you already created.

const StarWarsPerson = z.object({
  name: z.string(),
});

const StarWarsPeople = z.object({
  results: z.array(StarWarsPerson)
});

export const fetchStarWarsPeople = async () => {
  const data = await fetch("https://swapi.dev/api/people/").then(response => response.json());

  const parsedData = StarWarsPeople.parse(data);

  return parsedData.results;
}

// Tests
it("Should return the name", async () => {
  const people = await fetchStarWarsPeople();
  expect(people[0].name).toEqual("Luke Skywalker");
});

Extracting a Type from a Parser Object

In the above example we created a StarWarsPerson object that we used to parse the results array. We can extract the type from the StarWarsPerson object using the infer keyword.

type StarWarsPersonType = z.infer<typeof StarWarsPerson>;

This will allow us to use the StarWarsPersonType type in other places in our codebase.

import { z } from "zod";

const StarWarsPerson = z.object({
  name: z.string(),
});

const StarWarsPeople = z.object({
  results: z.array(StarWarsPerson)
});

const logStarWarsPeople = (data: z.infer<typeof StarWarsPeople>) => {
  data.results.map(person => console.log(person.name));
}

Make Schemas Optional

Zod is also useful for validating user input. Consider the following form:

import { expect, it } from "vitest";
import { z } from "zod";

const Form = z.object({
  name: z.string(),
  phoneNumber: z.string(),
});

export const validateFormInput = (values: unknown) => {
  const parsedData = Form.parse(values);

  return parsedData;
};

// TESTS

it("Should validate correct inputs", async () => {
  expect(() =>
    validateFormInput({
      name: "Matt",
    }),
  ).not.toThrow();

  expect(() =>
    validateFormInput({
      name: "Matt",
      phoneNumber: "123",
    }),
  ).not.toThrow();
});

it("Should throw when you do not include the name", async () => {
  expect(() => validateFormInput({})).toThrowError("Required");
});

The phoneNumber field is optional, but we want to make sure that the name field is required. We can do this by adding .optional() to the phoneNumber field.

const Form = z.object({
  name: z.string(),
  phoneNumber: z.string().optional(),
});

Set a Default Value

Consider the following form:

import { z } from "zod";

const Form = z.object({
  repoName: z.string(),
  keywords: z.array(z.string()).optional(),
});

export const validateFormInput = (values: unknown) => {
  const parsedValues = Form.parse(values);

  return parsedValues;
}

Suppose we want to default the keywords field to an empty array if the user does not provide any keywords. We can do this by adding .default() to the keywords field.

import { expect, it } from "vitest";
import { z } from "zod";

const Form = z.object({
  repoName: z.string(),
  keywords: z.array(z.string()).default([]),
});

export const validateFormInput = (values: unknown) => {
  const parsedValues = Form.parse(values);

  return parsedValues;
}

// Tests
it("Should include keywords if passed", async () => {
  const result = validateFormInput({ repoName: "vitest", keywords: ["test", "testing"] });

  expect(result).toEqual({ repoName: "vitest", keywords: ["test", "testing"] });
  expect(result.keywords).toEqual(["test", "testing"]);
});

it("Should not include keywords if not passed", async () => {
  const result = validateFormInput({ repoName: "vitest" });

  expect(result.keywords).toEqual([]);
});

The Input is Different than the Output
The validateFormInput function returns an object that is different than the input. The keywords field is always an array, even if the user does not provide any keywords.

If we create a FormInput and FornOutput type, we can use the z.infer keyword to extract the type from the Form object.

type FormInput = z.infer<typeof Form>;
type FormOutput = z.infer<typeof Form>;

Introducing z.input
The above input is not quite correct because when we input into validateFormInput, we don't pass in any keywords. We can use the z.input keyword to extract the input type from the Form object.

type FormInput = z.input<typeof Form>;
type FormOutput = z.infer<typeof Form>;

Being specific with Allowed Types

Consider the following form:

const Form = z.object({
  repoName: z.string(),
  privacyLevel: z.string(),
});

Suppose we want to make sure that the privacyLevel field is either public or private. We can do this by adding .enum() to the privacyLevel field.

const Form = z.object({
  repoName: z.string(),
  privacyLevel: z.enum(["public", "private"]),
});

Another way is to use the z.union keyword and pass in an array of z.literal objects. You can use .literal() to represent any literal value.

const Form = z.object({
  repoName: z.string(),
  privacyLevel: z.union([z.literal("public"), z.literal("private")]),
});

The .enum() keyword is arguably more readable, but the z.union keyword is more flexible.

Complex Schema Validation

Consider the following form:

import { z } from "zod";

const Form = z.object({
  name: z.string(),
  phoneNumber: z.string().optional(),
  email: z.string(),
  website: z.string().optional(),
});

export const validateFormInput = (values: unknown) => {
  const parsedData = Form.parse(values);

  return parsedData;
};

Suppose we want to add a few constraints on what the values can be. We want to validate that the name is at least 1 character, the phone number to have the right amount of digits, and we want the website to be a valid URL and email to be a valid email address.

import { z } from "zod";

const Form = z.object({
  name: z.string().min(1),
  phoneNumber: z.string().min(5).max(20).optional(),
  email: z.string().email(),
  website: z.string().url().optional(),
});

export const validateFormInput = (values: unknown) => {
  const parsedData = Form.parse(values);

  return parsedData;
};

Reducing duplicated code by composing schemas

Consider the following code:

import { z } from "zod";

const User = z.object({
  id: z.string().uuid(),
  name: z.string(),
});

const Post = z.object({
  id: z.string().uuid(),
  title: z.string(),
  body: z.string(),
});

const Comment = z.object({
  id: z.string().uuid(),
  text: z.string(),
});

There are a few ways we can refactor this code.

Simple solution
We can strip out the id into its own type. Then we can use the Id type in the User, Post, and Comment types.

const Id = z.string().uuid();

const User = z.object({
  id: Id,
  name: z.string(),
});

const Post = z.object({
  id: Id,
  title: z.string(),
  body: z.string(),
});

const Comment = z.object({
  id: Id,
  text: z.string(),
});

Better solution - use the Extend method
Another solution would be to create a base object ObjectWithId and extend it with the User, Post, and Comment types.

const ObjectWithId = z.object({
  id: z.string().uuid(),
});

const User = ObjectWithId.extend({
  name: z.string(),
});

const Post = ObjectWithId.extend({
  title: z.string(),
  body: z.string(),
});

const Comment = ObjectWithId.extend({
  text: z.string(),
});

Use Merge
We can also use the .merge keyword to merge the ObjectWithId and the User, Post, and Comment types.

const User = ObjectWithId.merge(
  z.object({
    name: z.string(),
  }),
);

Merging is generally used when two different types are being combined, rather than extending a single type.

Transforming Data from within a Schema

Another useful feature of Zod is manipulating data from an API response after parsing. Consider the following API response:

import { z } from "zod";

const StarWarsPerson = z.object({
  name: z.string(),
});

const StarWarsPeopleResults = z.object({
  results: z.array(StarWarsPerson),
});

export const fetchStarWarsPeople = async () => {
  const response = await fetch("https://swapi.dev/api/people/");
  const data = await response.json();

  const parsedData = StarWarsPeopleResults.parse(data);

  return parsedData;
};

We can use the .transform keyword to manipulate the data from the API response. In this case, we want to transform the name field and add a new field called nameAsArray.

import { z } from "zod";

const StarWarsPerson = z
  .object({
    name: z.string(),
  })
  .transform((person) => ({
    ...person,
    nameAsArray: person.name.split(" "),
  }));

const StarWarsPeopleResults = z.object({
  results: z.array(StarWarsPerson),
});

export const fetchStarWarsPeople = async () => {
  const data = await fetch(
    "https://www.totaltypescript.com/swapi/people.json",
  ).then((res) => res.json());

  const parsedData = StarWarsPeopleResults.parse(data);

  return parsedData.results;
};

// TESTS

it("Should resolve the name and nameAsArray", async () => {
  expect((await fetchStarWarsPeople())[0]).toEqual({
    name: "Luke Skywalker",
    nameAsArray: ["Luke", "Skywalker"],
  });
});

You can find the complete code on this repo

When you meet someone who is not using Vitest to test

Building a Fullstack Next.js app -> tRPC(v10), Tailwind, Prisma

Tony Kharioki — Sat, 18 Mar 2023 15:05:34 +0000

I made this write-up as a follow up to Francisco Mendes' post. While the post is a great way to get introduced to building with end-to-end type-safety in Nextjs, it was written on v9 of tRPC and as at this writing a lot has changed with v10.

I'll cover the same app setup the only changes will be tRPC setup will follow the current v10(as at this writing) configurations. Let's get to it:

What are the tools we'll use -> tRPC, Prisma, Zod

tRPC - Is a toolkit that enables us to build totally type safe applications by only using inference. It's a great tool for building APIs and it's very easy to use.

Prisma - is an ORM that enables us to write type safe queries to our database. It is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way. It is easy to integrate into your framework of choice => Next.js, Graphql, Apollo, nest, Express e.t.c. Prisma simplifies database access, saves repetitive CRUD boilerplate and increases type safety. Its the perfect companion for building production-grade, robust and scalable web applications.

Zod - is a TypeScript-first schema builder for data validation and parsing. It's a great tool for validating data before it gets to the database. It's very easy to use and it's very fast.

Prerequisites

Of course you'll need basic knowledge of:

Node
Typescript
Next.js
Tailwind
Npm

Okay, let's do this. Of course I'll add a link to the github repo at the bottom.

Getting Started

Next.js setup

We first spin up a next.js app and navigate to the project directory:
(note: when asked if you want src folder select yes. Also select @ as import alias. this tutorial is setup that way)

npx create-next-app@latest --ts grocery-list
cd grocery-list

Install and setup Tailwind CSS

npm install @fontsource/poppins
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

configure paths in the @/tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind directives to replace the styles in the @/src/styles/globals.css:

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

* {
    font-family: "Poppins";
  }

Setup Prisma

Install Prisma and initialize it:

npm install prisma
npx prisma init

Edit the schema.prisma file as follows:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

model GroceryList {
  id      Int      @id @default(autoincrement())
  title   String
  checked Boolean? @default(false)
}

Run prisma migration:

npx prisma migrate dev --name init

Now we can install prisma client:
Prisma Client is an auto-generated, type-safe query builder generated based on the models and attributes of your Prisma schema.

npm install @prisma/client

Configure tRPC

Next.js makes it easy for you to build your client and server together in one codebase. tRPC makes it easy to share types between them, ensuring type-safety for your application's data fetching.

Install dependencies:

npm install @trpc/server @trpc/client @trpc/react-query @trpc/next @tanstack/react-query zod

@trpc/react-query: provides a thin wrapper around @tanstack/react-query. It is required as a peer dependency as an idiomatic way to handle client-side caching in React applications.
Zod: for input validation to ensure that our backend only processes requests that fit our API. You can use other validation libraries like Yup, Superstruct, io-ts if you prefer.

Enable strict mode

If you want to use Zod for input validation, make sure you have enabled strict mode in your tsconfig.json:

"compilerOptions": {
   "strict": true
}

With dependencies installed we can create a server folder and a context.ts file to handle our context.

The context is used to pass contextual data to all router resolvers. In this case the context we pass is the prisma instance

// @/src/server/context.ts
import * as trpc from "@trpc/server"
import * as trpcNext from "@trpc/server/adapters/next"
import { PrismaClient } from "@prisma/client"

export async function createContext(opts?: trpcNext.CreateNextContextOptions) {
  const prisma = new PrismaClient()

  return { prisma }
}

export type Context = trpc.inferAsyncReturnType<typeof createContext>

Define our router

With our context created, we will now define our router and procedure helpers.

// @/src/server/router.ts
import { initTRPC } from '@trpc/server';
import { z } from "zod"

import { Context } from "./context"

const t = initTRPC.context<Context>().create();

// Base router and procedure helpers
const router = t.router;
const publicProcedure = t.procedure; 

export const serverRouter = router({
  findAll: publicProcedure
    .query(({ ctx }) => {
      return ctx.prisma.groceryList.findMany();
    }
  ),
  insertOne: publicProcedure
    .input(z.object({
        title: z.string(),
      })
    )
    .mutation(({ input, ctx }) => {
      return ctx.prisma.groceryList.create({
        data: { title: input.title },
      });
    }
  ),
  updateOne: publicProcedure
    .input(z.object({
        id: z.number(),
        title: z.string(),
        checked: z.boolean(),
    }))
    .mutation(({ input, ctx }) => {
      const { id, ...rest } = input;

      return ctx.prisma.groceryList.update({
        where: { id },
        data: { ...rest },
      });
    }
  ),
  deleteAll: publicProcedure
    .input(z.object({
        ids: z.number().array(),
    }))
    .mutation(({ input, ctx }) => {
      const { ids } = input;

      return ctx.prisma.groceryList.deleteMany({
        where: { id: { in: ids } },
      });
    }
  ),
});

export type ServerRouter = typeof serverRouter;

We export our serverRouter and its data type ServerType

Note: Avoid exporting the entire t-object since it's not very descriptive. For instance, the use of a t variable is common in i18n libraries.

Now we need to create an API route from Next.js to which we will handle our handler api. We will pass our router and our context (which is invoked on every request)

// @/src/pages/api/trpc/[trpc].ts
import * as trpcNext from "@trpc/server/adapters/next"

import { serverRouter } from "@/server/router"
import { createContext } from "@/server/context"

export default trpcNext.createNextApiHandler({
  router: serverRouter,
  createContext,
});

Now we configure the @/src/pages/_app.tsx file

import '@/styles/globals.css'
import '@fontsource/poppins'
import type { AppType } from 'next/app';
import type { ServerRouter } from '@/server/router'
import { createTRPCNext } from '@trpc/next';
import { httpBatchLink } from '@trpc/client';

function getBaseUrl() {
  if (typeof window === 'undefined') {
    return process.env.VERCEL_URL
      ? `https://${process.env.VERCEL_URL}/api/trpc`
      : `http://localhost:3000/api/trpc`
  }
  return '/api/trpc'
}

const { withTRPC } = createTRPCNext<ServerRouter>({
  config({ ctx }) {
    const links = [
      httpBatchLink({
        url: getBaseUrl(),
      }),
    ];
    return { links };
  },
  ssr: true,
});

const App: AppType = ({ Component, pageProps }) => {
  return <Component {...pageProps} />
}

export default withTRPC(App);

Then we create a tPRC hook to which we will add the data type of our router as a generic on the createTRPCReact() function from react-query, so that we can make api calls:

// @/src/utils/trpc.ts
import { createReactQueryHooks, createTRPCReact } from "@trpc/react-query";
import type { ServerRouter } from "@/server/router";

export const trpc = createTRPCReact<ServerRouter>();

Now we are done with most of the work, lets build our Frontend.

Frontend:

Lets put all the components in one folder @/src/components/index.tsx

import React, { memo } from 'react';
import type { NextPage } from 'next';
import { GroceryList } from '@prisma/client';

interface CardProps {
  children: React.ReactNode;
}

export const Card: NextPage<CardProps> = ({ children }) => {
  return (
    <div className="h-screen flex flex-col justify-center items-center bg-slate-100">
      {children}
    </div>
  );
};

export const CardContent: NextPage<CardProps>  = ({ children }) => {
  return (
    <div className="bg-white w-5/6 md:w-4/6 lg:w-3/6 xl:w-2/6 rounded-lg drop-shadow-md">
      {children}
    </div>
  );
};

interface CardHeaderProps {
  title: string;
  listLength: number;
  clearAllFn?: () => void;
}

export const CardHeader: NextPage<CardHeaderProps> = ({ 
  title, 
  listLength, 
  clearAllFn 
}) => {
  return (
    <div className="flex flex-row items-center justify-between p-3 border-b border-slate-200">
      <div className="flex flex-row items-center justify-between">
        <h1 className="text-base font-medium tracking-wide text-gray-900 mr-2">
          {title}
        </h1>
        <span className="h-5 w-5 bg-blue-200 text-blue-600 flex items-center justify-center rounded-full text-xs">
          {listLength}
        </span>
      </div>
      <button
        className="text-sm font-medium text-gray-600 underline"
        type='button'
        onClick={clearAllFn}
      >
        Clear All
      </button>
    </div>
  )
}

export const List: NextPage<CardProps> = ({ children }) => {
  return <div className="overflow-y-auto h-72">{children}</div>;
};

interface ListItemProps {
  item: GroceryList;
  onUpdate?: (item: GroceryList) => void;
}

const ListItemComponent: NextPage<ListItemProps> = ({ item, onUpdate }) => {
  return (
    <div className="h-12 border-b flex items-center justify-start px-3">
      <input
        type="checkbox"
        className="h-4 w-4 border-gray-300 rounded mr-4"
        defaultChecked={item.checked as boolean}
        onChange={() => onUpdate?.(item)}
      />
      <h2 className="text-gray-600 tracking-wide text-sm">{item.title}</h2>
    </div>
  )
}

export const ListItem = memo(ListItemComponent);

interface CardFormProps {
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  submit: () => void;
}

export const CardForm: NextPage<CardFormProps> = ({ 
  value, 
  onChange, 
  submit 
}) => {
  return (
    <div className="bg-white w-5/6 md:w-4/6 lg:w-3/6 xl:w-2/6 rounded-lg drop-shadow-md mt-4">
      <div className="relative">
        <input
          type="text"
          className="w-full py-4 pl-3 pr-16 text-sm rounded-lg"
          placeholder="Grocery item name..."
          onChange={onChange}
          value={value}
        />
        <button
          type="button"
          className="absolute p-2 text-white -translate-y-1/2 bg-blue-600 rounded-full top-1/2 right-4"
          onClick={submit}
        >
          <svg
            className="w-4 h-4"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M12 6v6m0 0v6m0-6h6m-6 0H6"
            />
          </svg>
        </button>
      </div>
    </div>
  )
}

We can now import the components and work on our main page @/src/pages/index.tsx

import Head from 'next/head'
import type { NextPage } from 'next'
import { useCallback, useState } from 'react'
import { trpc } from '@/utils/trpc'

import { 
  Card,
  CardContent,
  CardForm,
  CardHeader,
  List,
  ListItem,
} from '@/components'
import { GroceryList } from '@prisma/client'

const Home: NextPage = () => {
  const [itemName, setItemName] = useState<string>('');

  const { data: list, refetch} = trpc.findAll.useQuery();
  const insertMutation = trpc.insertOne.useMutation({
    onSuccess: () => {
      refetch();
    },
  });
  const deleteAllMutation = trpc.deleteAll.useMutation({
    onSuccess: () => {
      refetch();
    },
  });
  const updateOneMutation = trpc.updateOne.useMutation({
    onSuccess: () => {
      refetch();
    },
  });


  const insertOne = useCallback(() => {
    if (itemName === '') return;

    insertMutation.mutate({
      title: itemName,
    });
    setItemName('');
  }, [itemName, insertMutation]);

  const clearAll = useCallback(() => {
    if (list?.length) {
      deleteAllMutation.mutate({
        ids: list.map((item) => item.id),
      });
    }
  }, [deleteAllMutation, list]);

  const updateOne = useCallback(
    (item: GroceryList) => {
      updateOneMutation.mutate({
        ...item,
        checked: !item.checked,
      });
    },
    [updateOneMutation]
  );

  return (
    <>
      <Head>
        <title>Grocery List</title>
        <meta name="description" content="Grocery List" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <Card>
          <CardContent>
            <CardHeader
              title="Grocery List"
              listLength={list?.length ?? 0}
              clearAllFn={clearAll}
            />
            <List>
              {list?.map((item) => (
                <ListItem key={item.id} item={item} onUpdate={updateOne} />
              ))}
            </List>
          </CardContent>
          <CardForm
            value={itemName}
            onChange={(e) => setItemName(e.target.value)}
            submit={insertOne}
          />
        </Card>
      </main>
    </>
  )
}

export default Home;

Final result should look like this:

You can find all this in my repo here.

I hope this helps you get started with e2e type-safety.

Testing Library and why I use React Testing Library.

Tony Kharioki — Tue, 14 Sep 2021 01:02:23 +0000

The testing library is a family of packages that help you test UI components in a user-centric way.

The more your test resembles the way your software is used, the more confidence they can give you.

What problems does Testing Library solve?

You want to write tests that tell you your components are working for users.
You want your tests to avoid including implementation details so changes on components do not break your tests or slow down the team.

So why pick Testing Library?

The core library Dom Testing Library is a lightweight solution for testing pages by querying and interacting with DOM nodes.
The main utilities it provides include querying the DOM for nodes in a way that's similar to how the user finds elements on the page.
The core library has been wrapped to provide ergonomic APIs for several frameworks including React, Angular, Vue and also for React Native.

DOM Testing Library works with any environment that provides DOM APIs such as Jest, Mocha + JSDOM or a real browser.

What this library is not :(

A test runner or framework - RTL is different from Jest(I'll explain later)
Specific to a testing framework

What should you avoid with Testing Library?

Avoid testing implementation details like:

Internal state of a component
Internal methods of a component
Lifecycle methods of a component
Child components

for the sake of this write up, I'll introduce React Testing Library

React Testing Library(RTL)

React Testing Library builds on top of DOM Testing Library by adding APIs for working with React components

CRA projects have out-of-the-box support for RTL.
You can also install it via npm or yarn

npm install --save -dev @testing-library/react

Why do tests with React Testing Library?

Catch bugs - allows you to catch bugs easily.
Increases confidence in application - if all your tests pass, means all the parts of your applications are working correctly hence increasing the confidence in your application. This also translates to an increase customer satisfaction.
Speeds up QA time - if we were running a huge application and we implement a new feature, we'd have to manually test. If we write tests then all we have to do is run tests.
Tests can serve as documentation - if you're working with larger teams, sometimes code can be very confusing especially to new developers and by looking at tests, new devs can easily understand what the team is trying to accomplish.

Types of Tests

Before we continue, lets understand the different types of tests that there are.

Static tests - catch typos and type errors as you write code. Usually how a linter works e.g ESlint, TSlint
Unit tests - they test a piece of code/component in complete isolation. Basically testing a single unit works as expected.
Integration tests - test how different units/components interact.
E2E(End to End) tests - They simulate what the user flow would be like. It tests beginning to end. > RTL does not test end to end. For that you can use Puppeteer or Cypress.

Structure of Tests

To better understand tests, we need to know what goes into a test; describe blocks, test blocks, and assertions.

describe block - is a test suite that specifies a larger component or function. A test suite can have multiple test cases.
test block - (also called it block since its defined by an it function) is a test case.
assertions - assertions are basically what we put in the test block. They can be successful or erroneous. In the above example we use the expect function.

before we continue, lets see how we run tests and how RTL works alongside jest

If you're using create-react-app, React Testing Library and Jest come installed out-of-the-box. However if you're using another react framework or you've built your app with custom react and webpack configuration, you'll need to install jest and react testing library yourself.

Under the hood, jest test-runner will match all files with suffix test.js or spec.js or as per your own configuration.Jest then runs the tests in these files once you run the command npm run test or yarn test (again, or whatever test script you may have in your package.json)

Like I mentioned earlier, Jest is a test-runner, which gives you ability to run tests with Jest in the command line. On the other hand React Testing Library is a testing library to test react components, just like Enzyme.

While Jest provides us with a whole lot of functions; test suites, test cases and assertions, RTL provides more functionality that is geared towards DOM testing for react components e.g render, screen, query methods, assertion methods, and many more.

To better understand this, lets use some of my code and see a real-life example.

Lets dive into the above test suite;

render - inside the test suite we first render the component we want to test. We use { render } method from @testing-library/react.
screen - then we find the elements we want to interact with. Again we use { screen } method from @testing-library/react.
the next step is to interact with these elements.
assert - then we assert the results as expected. we use expect() method.

Query methods

okay now, lets look at some of those Query methods I mentioned earlier, some of which I have used in the figure above

	getBy	findBy	queryBy	getAllBy	findAllBy	queryAllBy
0 match	error	error	null	error	error	array
1 match	return	return	return	array	array	array
1+ match	error	error	error	array	array	array
Await	no	yes	no	no	yes	no

getBy, findBy, and queryBy - these methods get only one element. If they get more than one element, they throw an error.

getAllBy, findAllBy, and queryAllBy - Always return an array if they get multiple elements they return all elements.

findBy, findAllBy - we can use these methods if we are rendering items asynchronously.

queryBy - does not work with async, returns only one element and if no match it still passes.

Prioritising attributes

In react-testing library, we want to mimic the user interactions as much as possible inside of our tests.

so we utilize the attributes that follow that e.g:

Attributes accessible by everyone - getByRole (e.g. button, heading), getByLabelText, getByPlaceholderText, getByText.

Semantic Queries attributes - these are for when we have implemented certain a11y accessibility rules - getByAltText, getByTitle

Using TestID - in react sometimes we may need to test a specific component that has a unique testId. in such instances we use getByTestId.

This is already getting too long. I'll stop it here for now. I'll attach some links to certain articles that helped me prepare and improve my testing skills.

This cool article
This other article
These official docs
This youtube playlist

That's all for now, till next time, have a great time testing your applications. One more thing before I go, here's a sample implementation of how I use Testing Library with react-native.

Tailwind CSS: core concepts and JIT mode.

Tony Kharioki — Sun, 05 Sep 2021 02:58:50 +0000

What is Tailwindcss?

It is a utility-first css framework packed with classes and can be composed to build any design, directly in your markup.

Its like bootstrap or materialize but while frameworks give you fully built components, tailwind gives you low-level utility classes to make your own components.

Example: lets say we want to build a card component

What are the prerequisites to using tailwindcss?

To use tailwind, you'l need:

Basic understanding of both HTML and CSS

Using Tailwind CSS?

You can install Tailwind CLI using npm.
You'll need node.js installed on your computer

How Tailwind works?

We create a source file where we import Tailwind utilities and can even write our own css. Tailwind then processes that source file into vanilla css output file at build time with all the css which we link to our html pages.

Tailwind Core Concepts

Its Constraint Based- Provides an API for your design system.
Tailwind's utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values.
They make it easy to be consistent with color choices, spacing, typography, shadows and everything else that makes up a well-engineered design system.
Build anything - Build whatever you want, seriously
Because tailwind is so low-level, it never encourages you to build/design the came site twice. Even with the same color palette and sizing scale, its easy to build the same component with a completely different look in the next project.
Performance- Its tiny in production
Tailwind automatically removes all unused css when building for production. This means your final css bundle is the smallest it could possibly be. Usually less than 10kb
Mobile first - responsive everything
Tailwind lets you build responsive designs right into your html. You can add a screen size in front of any utility class and it will apply it at a specific breakpoint.
State variants - style different things on state changes
You can stick hover, focus, active, disabled, focus-within, focus visible or even tailwind's group-hover and would style something on these state changes.
Component driven - you can extract repeated utilities into a component.
If you're not into component frameworks, you can use Tailwinds @apply directive to extract repeated utility patterns into custom css classes just by copying and pasting the list of class names.
Dark mode - To enable dark mode in your configuration file throw dark: in front of any color utility to apply it when dark mode is active. This works for background colors, text colors, border colors and even gradients.
Customization - extend it, tweak it or change it
Use the tailwind.config.js to craft your own design system then let tailwind transform it into your own custom css framework.
Modern features - Tailwind provides first-class css grid suppo, composable transforms and gradients powered by css variables, support for modern state selectors like focus-visible e.t.c
Editor Tools - world class IDE integration
Tailwind css intellisense extension integrates perfectly with vs code providing you with intelligent autocomplete suggestions, linting, class definitions and more.
Ready-made components with Tailwind UI -
Tailwind UI is a collection of beautiful, fully responsive UI components, designed and developed by creators of Tailwind CSS.

Just-In-Time Mode

Just-In-Time(JIT) is a faster more powerful, on-demand engine for tailwind css v2.1+

It is a compiler for Tailwind css that generates your styles on-demand as you author your templates instead of generating everything in advance at initial build-time.

Why use JIT mode?

Lightining fast build times - this library can compile even the biggest projects in about 800ms(with incremental builds as fast as 3ms), no matter what tool you're using. This usually takes 3 - 8s to initially compile using CLI and 30-45s in webpack.
Every variant is enabled out-of-the-box - since the library generates styles on demand, you can use any variant you want, whenever you want. you can even stack them like sm:hover:active:disabled:opacity-75
Generate arbitrary styles without writing custom css - since styles are generated on demand, you can generate a utility for any ultra-specific value using square bracket notation like bg-[#ffa6d7]. This works with variants too eg md:bg-[#ffa6d7]
Your CSS is identical in development and production - you do not need to purge unused styles for production since you see the exact same css in all environments.
Better browser performance in development - since development builds are as small as production builds, the browser doesn't have to parse and manage multiple megabytes of pre-generated css.

How we use JIT mode?

To enable just-in-time mode, set the mode option to jit in the tailwind.config.js file.
You'll also need to configure the purge option in tailwind.config.js with all your template paths.

Configuring my VS Code Editor :)

Tony Kharioki — Sat, 19 Jun 2021 09:30:08 +0000

I have been meaning to write this article about how I configure my favorite IDE; VS Code. I'm writing this because I recently changed my PC and I had to sit through hours of configuration process all over again. I hope to use this post next time to get started quickly. I also hope this post helps you configure your VS Code in a way that it improves your productivity and coding skills.

Okay, here we go...

VS Code

it is a free code editor redefined and optimized for building and debugging modern web and cloud applications.
it is lightweight but powerful and runs on your desktop and is available for windows, macOS and linux.
it comes with built in support for javascript, typescript and NodeJS and has a rich ecosystem of extensions for more than a dozen other languages (c#, c++, Java, Python, PHP, Go, Dart among others)

Setup - it is as easy as downloading from the visual studio code site and you'll get started in a matter of minutes.
Cross-platform - runs on macOS, windows and linux
Monthly updates -enjoy new features and bug fixes every month with new releases. You may enable auto-updating if you want.
Insiders build - if you want to use the same version the vs-code dev team uses on daily basis, you can install the insiders build from the site.
Portable - VS Code has support for portable mode. Data created and maintained by VS Code lives near itself and can be moved across environments e.g by USB drive.

Extensions

Okay, so this is the main focus of this post.

Disclaimer: I will only cover the few extensions that I have been using on a daily basis for the last 4 years.

Marketplace

you can find all extensions for the visual studio family here at the marketplace.
You may also install them from your vscode editor. Simply use the command ctrl+shift+X for windows or shift+command+X for macOS.

Lets now look at my favorite extensions...

Themes

Although VSCode comes with a few theme options out-of-the-box, I like to configure my own.

Noctis -> by Liviu Schera

This is my favorite theme. I actually prefer light theme for my IDE (that being said)

Noctis is a collection of light and dark themes with a well balanced blend of warm and cold medium contrast colors.
Noctis has 11 versions as of this writing( 8 dark, 3 light).

My favorite is Noctis Lux.

Tools & Languages

There are hundreds of extensions that provide language support. these are the ones I use all the time.

ESLint

It integrates ESLint javascript into VSCode.
For those new to ESLint, it is a pluggable javascript linter. It statically analyzes your code to quickly find problems.
You'll need to have installed ESLint either locally or globally. You can do that by npm install eslint in the workspace or npm install -g eslint for global install.
I will not dive into eslint and what it can do, you can read all about it here.
For those who love redundancy and making your life harder on purpose, you can install TSLint extension too for typescript linting.

However this is not necessary as ESLint has typescript support and will automatically use/read your tsconfig.json rules

Beautify

Beautify, unpack or deobfuscate javascript, HTML or make JSON readable.
This extension simply beautifies your code.
VSCode uses js-beautify internally, but it lacks the ability to modify the style you wish to use. This extension enables running js-beautify in VSCode.

as usual you can read and play around with js-beautify here

Auto-Close Tag

Increase your coding productivity with AI code completions that automatically add HTML/XML close tag.
This extension

automatically adds closing tag when you type in the closing bracket of opening tag
automatically close self-closing tags
use keyboard shortcuts to add close tags manually

Better Comments

This extension helps you create more human friendly comments in your code. You'll be able to categorize your comments into:

Alerts
Queries
Todos
Highlights

Tip: when working with react-native, flutter, android studio reads your comments and makes it easy to navigate your codebase on the terminal

Rainbow Brackets

In simple terms, this extension puts same rainbow color on matching pair of brackets and any isolated right brackets are highlighted in red.
Works for round brackets, square brackets, and squiggly brackets.

I have found this particularly useful when debugging.

Syntax snippets

ES7 React/Redux/GraphQL/React-Native snippets

Simply put snippets are more like syntax shortcuts.
This extension provides snippets for react, redux, react-native and graphql in javascript and typescript with es7 syntax.
provides syntax shortcuts for these languages/file extensions

javascript(.js)
javascript react(.jsx)
typescript(.ts)
typescript react(.tsx)

examples of snippets are
imp -> import moduleName from 'module'
ime -> import * as alias from 'module'
fre -> arrayName.forEach(element => {})
sto -> setTimeout(() => {}, delayTime)

React 17 is also supported. Just prefix the snippet with _ (underscore) e.g
_rmc -> generates a memoized react component.

Javascript (ES6) Code Snippets

this extension contains code snippets for javascript in ES6 syntax for vscode javascript and typescript
provides syntax shortcuts for these languages/file extensions

javascript(.js)
javascript react(.jsx)
typescript(.ts)
typescript react(.tsx)
HTML (.html)
Vue (.vue)

React Native Tools

If you build lots of mobile apps with react native like me, you'll definitely love this extension. It provides debugging and integrated commands for react native.
As usual to use this extension you'll need to:

have setup a react native dev environment
have your react native project root folder open in VSCode. With this extension, you can run commands such as:
launch Android emulator
Run Android emulator
Run iOS simulator
Run expo
Start, Stop or Restart packager
Reload app
Start or Stop logcart
Run or Stop network inspector, and many more...

Flutter

When I am not building mobile apps with react native, I like to use Flutter (its younger, badder sister).
This extension adds support for effectively editing, refactoring, running and reloading flutter mobile apps and support for Dart language snippets too.

As usual this extension will require you to have flutter dev environment setup, dart language extension and an open flutter project.

Git stuff

GitLens - Git supercharged

This is an open-source extension for VSCode created, developed and maintained by Eric Amodio.
It helps you better understand code.
Simply glance into whom, why and when a line or code block was changed.
Go back through history to see how code evolved.
It is powerful, rich and highly customizable.
Main features include:

revision navigation - (backwards and forwards) through history
current line blame - an annotation at the end of line showing (on hover) commit and author who last modified.
side bar views - commits, repositories, file history, line history, branches, remotes, stashes and contributors view.
interactive rebase editor
rich remote provider - integrations with your git provider; Github, Gitlab, Gitea, Bitbucket, Azure DevOps for issue and pull requests linking.

Git blame

If you just want to know who to blame for the changes in the code and do not want all the other amazing functionality of GitLens, then use this extension.

I use both gitlens and git blame.

gitignore

I love this extension.
This extension lets you pull .gitignore templates from Github's gitignore repository

Intellisense

Intellisense is a general term for various code editing features including code completion, parameter info, quick info and member lists.
VSCode intellisense is provided for Javascript, Typescript, JSON, HTML, CSS, SCSS and Less out of the box.
Intellisense features are powered by a language service. A language provides intelligent code completions based in language semantics and an analysis of your source code. If a language service knows possible completions, the intellisense suggestions will pop up as you type. If you continue typing characters, the list of members(variables, methods, etc) is filtered to only include members containing your typed characters. Pressing Tab or Enter will insert the selected member.

That being said, here are some extensions I install to increase the scope of my editor's intellisense.

npm intellisense

This extension autocompletes npm modules in import statements.
By default NPM Intellisense scans only dependencies installed.
You can set scanDevDependencies to true to enable it to scan devDependencies too.

{
  "npm-intellisense.scanDevDependencies": true,
}

Path intellisense

This extension autocompletes filenames.
Path intellisense removes the file extension by default if the statement is an import statement.

Pylance

This extension provides fast, feature-rich language support for Python.
It works alongside Python in VSCode and is powered by Microsoft's static type checking tool; Pyright.

Cool fact: The Pylance name is a small ode to Monty Python Lancelot who was the first knight to answer the bridgekeeper's question in the Holy Grail

Pylance provides some awesome features:

Docstrings
Signature hhelp
Parameter suggestions
Code ccompletion
Auto Imports
Jupyter notebooks compatibility
Semantic highlighting

Jest

Test like a pro with this intellisense support for Facebook's Jest.
Features include:

start jest automatically when you're in root folder project with jest installed
show fails inside problem inspector
adds syntax highlighting to snapshot files
show test coverage info
help debug jest tests in vscode
support multiple test run modes.

HTML, CSS, Markdown stuff

Live Server

If you write or build with HTML a lot, you may wanna check out this extension.
This extension allows you to launch a development local server with live reload features for static and dynamic pages.
Some cool features include:

Quick development live server with live browser reload
Start or Stop server by a single click from status bar
customizable port number, server root, default browser
support for any browser
remote connection through WLAN (can test with mobile phone)
use a preferable host name
SVG support
https support
CORS enabled
multi-root workspace supported

Markdown Preview Enhanced

If you write markdown blogs or even use markdown on gatsby, this extension is for you.
Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as:

automatic scroll sync,
math typesetting,
mermaid,
PlantUML,
pandoc,
PDF export,
code chunk,
presentation writer, etc.

HTML CSS Support

Naturally support for emmet snippets is built right into vscode.

If the only Emmet you know is the amazing actor in the tv series 'switched at birth' played by the talented Sean Berdy; then that is not the Emmet we are referring to. I'm talking about Emmet the set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist.

Emmet abbreviations and snippet expansions are enabled by default in html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less, etc.
However I have noticed that sometimes this doesn't workas expected which is why I use this extension.
This extension provides features like:

HTML id and class attribute completion
support linked and embedded style sheets
support template inheritance - amazing when you're doing ejs templating
validate css selectors on demand

Color Highlight

This extension highlights and styles css or web colors in your editor.

Rainbow CSV

If you're a 10X dev like me, then you've played around with CSV files several times and you'll wanna have this extension for the next time.
This extension provides features like:

highlight columns in comma (.csv), tab (.tsv), semicolon and pipe separated files in different colors.
provide info about column on hover
CSVLint - automatic consistency check for CSV files
multi-cursor column edit - superhero style
Align columns with spaces and shrink (trim spaces)
Run queries in SQL-like language - avengers style.

Sass

Sass: Syntatically Awesome Style Sheets - cool name for a pet, huh?
This extension provides indented sass syntax highlighting, autocomplete and formatter.

SVG Viewer

This extension allows you to view SVGs in your vscode.
But there's more:
You can export SVG to PNG(even with explicit size), convert SVG to URI Scheme and copy to clipboard among other features.

vscode-styled-components

This extension uses CSS grammar built on top of language-scss and language-css to provide syntax highlighting and intellisense support for styled components.

vscode-icons

If you want to easily distinguish files in your project with icons, then you can install this extension.

And now...

The Really Cool S*#t

Thunder Client

This is my favorite extension of them all.

This extension provides a Rest API Client for vscode and a GUI based Http client.
Check this out :)

WakaTime

Wakatime provides metrics, insights and time tracking automatically generated from your coding activity.
To use it you'll need to register with wakatime to get your own unique api-key that you enter when you install this extension.
I like this extension because every Monday morning I receive a detailed report of my coding activity for the past week. Check this out

see, I only use vscode.

Extras

Fonts - I use Fira Code and Operator Mono. checkout this blog by Rakesh on how to install these fonts
vscode-shortcuts - again, checkout this post for some shortcuts.

I hope you enjoyed this long post. I enjoyed writing it. In the rare occurence that I discover/create a new cool extension, I will include it here in the future.

Behold, Recoil state management

Tony Kharioki — Sat, 12 Jun 2021 12:05:55 +0000

So what's recoil?

Recoil is a state management library for react created by the Facebook open-source team. (This means to use it you need to have react installed)

Okay, why do we need Recoil?
Depending on what you are building, there may come instances where using React useState, useContext API or state management libraries like Redux, MobX may not be performant.

In this write up we shall look through some of the edge cases that recoil solves and why.
also, all this information can be found on the Recoil documentation. - if anything is unclear, I would recommend visiting the docs. Recoil is fairly new, barely a year old so it may take some time to get used to.

Some of the characteristics of Recoil are

Minimal and React-ish - Recoil works and thinks like react. It gives you fast and flexible shared state.

Data flow graph - Derived data and asynchronous queries are tamed with pure functions and efficient subscriptions.

Cross-app observation - Recoil allows implementing persistence, routing, time travel debugging by observing all state changes across your app, without impairing code-splitting.

Recoil solves 3 basic issues

Flexible shared state - the ability to have different things(components) that are in sync at different parts of the React tree, thus enhancing performance.
Derived data and queries - the ability to compute things based on changing state in a way that is robust.
App-wide state observation - persistence, logging, routing and time-travel debugging.

Okey so let's do a simple deep dive into these 3 characteristics

1. Shared state

Assuming we have a react tree as below

The above two components have items that share common state.

If we were to use useState to share state - the approach would be to hoist the state up to the parent component.

the drawback would be, the parent component would have too much items and a re-render on each state change hence making the application slow.

What if we use context API?

A context state is passed directly from the provider to consumer.
But that too may not be efficient because we don't know how many items they would be hence we'd have different state and context providers for each. Our tree would look more like this

There's nothing wrong with this approach, but if you were to insert a new provider, the react tree needs to be re-rendered.

Another drawback is compiling - which will cause issues when you may need to code-split.
Sometimes you would have data coming from third-party plugins, CMS at item component level meaning you would have to declare them at top level.

But with Recoil...

We would have state that lies separate from app tree
Each piece of state will have its own component re-render when it changes.
These pieces of state are called Atoms
Atom - is a changeable, subscribable unit of state
RecoilRoot - provides the context for which atoms have values. Must be an ancestor of any component that uses any Recoil hooks

an Atom usually takes a unique key and a default value.

** So what if there are indefinite items which need to track their state changes?**

Basically we would want a different atom for each item id. So we would write a function that takes the id of the item and returns an atom for the item. This way each item would have its own atom/state.
And because we want one atom for each id, we should memoize the function so that we are just producing it the first time we see the id.

So now in the two components that render items we would replace the useState function with useRecoilState and as a value call in withId(id) and pass in item id.

You can build any data structures you want out of atoms.

2. Derived Data

Derived data refers to data computed from state and state changes. The old way (not recoil way) would mean having an extra state that is computed from other state.
The drawback with that would be that we would need to keep it in sync since it is dependent on other state, probably needing extra functionality and even a reducer.

In recoil we have selectors

Recoil solves the question of how do we recompute state and efficiently, as opposed to every time anything changes?

A Selector is basically a pure function with information on what state it depends on, so that when that state changes we can recompute and re-render the necessary components.

A selector can take two functions get and set.

if only a get function is provided, the selector is read-only and returns a RecoilValueReadOnly object.
if a set is also provided, it returns a writable RecoilState object.

Recoil manages atom and selector state changes to know when to notify components subscribing to that selector to re-render.

If an object value of a selector is mutated directly it may bypass this and avoid properly notifying, subscribing components. To help detect bugs, Recoil will freeze selector value objects in development mode.

in some cases it may be desirable to allow mutating of the objects stored in selectors that don't represent state changes. we can use dangerouslyAllowMutability to override freezing objects in development mode.

3. App-wide Observation

Recoil uses a snapshot object to represent immutable snapshots which are intended too standardize the API for observing, inspecting and managing global recoil state.

this feature is useful for dev-tools, state synchronization, history navigation e.t.c.
Recoil uses some hooks like useTransactionObserver which is notified whenever recoil state changes.

Some interesting stuff about Recoil

The API of recoil is designed to be compatible with con-current mode - something other state management libraries don't do.
You can create atoms for specific states and assign them to certain nodes.

Extras
How is it different from MobX?

It is simpler
it is potentially compatible with concurrent mode

Why are existing state management libraries not compatible with concurrent mode?

they have external state within which updates to it are not scheduled by react whileas recoil just uses local state under the hood.

Is recoil similar to react context API or based out of it?

the basis of recoil is multi-context
it is like a single provider that can provide any number of consumers.

Site tradeoffs: SEO vs Speed vs Ease of update

Tony Kharioki — Fri, 23 Apr 2021 05:10:01 +0000

I have been doing web development for five years now and I have never actually thought about the tradeoffs I make when deciding what frontend stack to use. So recently I came across this course that discussed some of the common tradeoffs we ignore when deciding what type of website to build.

So for this article, I'll discuss the different types of websites and how SEO(Search Engine Optimization), Speed, and ease of update; are some tradeoffs we make when developing websites.

Types of websites

Static websites

These are sites that use static Html pages with a little CSS and even JS.
The pages are uploaded to a CDN/Web host.
also known as multi-page applications

some of the drawbacks for this are:

slow - a fresh request to the server is made for every page.
Hard to update - a lot of rewriting the same code on every page.

✅ SEO ❌ Speed ❌ Ease to update

Single Page Websites(SPAs)

usually made with frameworks such as Vue, React, e.t.c
Only a single server request is made for the initial Html page
Everything else is handled by the SPA in the browser i.e routing, data, etc, making it even faster.

the tradeoff for this is:

These webpages are not SEO friendly - initial page requests usually return a blank Html page

❌ SEO ✅ Speed ✅ Ease to update

Server Side Rendered(SSR)

pages are rendered on the server after every request.
this is how traditional PHP, node JS websites that use templating engines like ejs, work.
the server sources data and uses templates to render Html then pages are sent back to the browser

the tradeoffs for this are:

speed - a fresh request needs to be made for every page. server requests can take time getting data and rendering pages.

✅ SEO ❌ Speed ✅ Ease to update

Static Site Generator(SSG)

also known as Modern site generators
examples are Gatsby and NextJS
static pages are completed at build-time (before deployment)
Pages are made using React components.
Static pages are then deployed to the web.
After the initial request, the site behaves more like a single-page application meaning routing is handled in the browser at no extra requests.

The advantage of this method is better SEO, speed - really fast and easy to update.

✅ SEO ✅ Speed ✅ Ease to update