DEV Community: Carlo Gino Catapang

Build a multilingual NextJS app using the new app directory - cookie-based

Carlo Gino Catapang — Sat, 09 Dec 2023 16:14:44 +0000

Learn how to build a multilingual NextJS app using the new app directory and i18next library

TL;DR

Check the demo here

Check the source code here

Introduction

Next.js is a popular framework for building web applications that simplifies the process of implementing i18n. In this article, we will explore how to handle i18n in Next.js using the app directory and the i18next library. We will also cover some of the key translation functions and techniques that you can use to make your application more accessible to users around the world.

I have written in another article about how to do i81n in Next.js using the URL segment to detect the locale. In this article, we will use the cookie-based approach instead.

Initialize a NextJS project

The easiest way to follow this guide is to degit a Nextjs boilerplate.

npx degit codegino/nextjs-ts-tw-tldr next13-i18n

I will be using TailwindCSS and TypeScript due to personal preference, but you can use plain CSS and JavaScript if you want.

Install dependencies

npm i

Remove unused files

Delete everything under the app and components folders

rm -rf app/* components/*

Project Setup

Our Internationalization strategy

In this blog post, we will use a cookie-based strategy to determine the locale of our web application. We can effortlessly obtain the locale from the cookies function exposed by next/headers in a server component. In a client component, we will create a custom hook to get the locale.

Install required dependencies

There are various libraries available for handling translations, but I find libraries from i18next very easy to use.

npm install i18next react-i18next i18next-resources-to-backend

i18next-resources-to-backend is a very small utility, so you can just copy the implementation if you don't want an additional dependency.

Create a reusable settings file

Let's create a utility file for both the server and the client-side translations

// i18n/settings.ts
import type {InitOptions} from 'i18next';

export const FALLBACK_LOCALE = 'en';
export const supportedLocales = ['en', 'zh-CN', 'sv'] as const;
export type Locales = (typeof supportedLocales)[number];

// You can name the cookie to whatever you want
export const LANGUAGE_COOKIE = 'preferred_language';

export function getOptions(lang = FALLBACK_LOCALE, ns = 'common'): InitOptions {
  return {
    // debug: true, // Set to true to see console logs
    supportedLngs: supportedLocales,
    fallbackLng: FALLBACK_LOCALE,
    lng: lang,
    ns,
  };
}

To learn more about the options, check out the i18next documentation.

Server Components translation setup

// i18n/server.ts
import {createInstance} from 'i18next';
import resourcesToBackend from 'i18next-resources-to-backend';
import {initReactI18next} from 'react-i18next/initReactI18next';
import {FALLBACK_LOCALE,getOptions,Locales,LANGUAGE_COOKIE} from './settings';
import {cookies} from 'next/headers';

async function initI18next(lang: Locales, namespace: string) {
  const i18nInstance = createInstance();
  await i18nInstance
    .use(initReactI18next)
    .use(
      resourcesToBackend(
        // Get the JSON file that matches the locale and namespace
        (lang: string, ns: string) => import(`./locales/${lang}/${ns}.json`),
      ),
    )
    // Initialize i18next with the options we created earlier
    .init(getOptions(lang, namespace));

  return i18nInstance;
}

// This function will be used in our server components for the translation
export async function createTranslation(ns: string) {
  const lang = getLocale();
  const i18nextInstance = await initI18next(lang, ns);

  return {
    t: i18nextInstance.getFixedT(lang, Array.isArray(ns) ? ns[0] : ns),
  };
}

// Utility function to get the locale from server components
export function getLocale() {
  return (cookies().get(LANGUAGE_COOKIE)?.value ?? FALLBACK_LOCALE) as Locales;
}

Create translation files

Unless our users use translation plugins like Google Translate, there is no way for our content to be magically translated. Therefore, we need to determine how our pages will be translated based on the selected locale and namespace.

Here is what our translation files' structure will look like. en is the locale, and home is the namespace.

i18n
└── locales
    ├── en
    │   └── home.json
    ├── zh-CN
    │   └── home.json                
    └── sv
        └── home.json

NOTE: It does not matter where you put the translation files as long as you can import them correctly.

English translations

// i18n/locales/en/home.json

{
  "greeting": "Hello world!"
}

Chinese translations

// i18n/locales/zh-CN/home.json

{
  "greeting": "世界您好"
}

Swedish translation

// i18n/locales/sv/home.json

{
  "greeting": "Hej världen!"
}

Create our page to display the locale

// app/page.tsx
import {createTranslation} from '../i18n/server';

export default async function IndexPage() {
  const {t} = await createTranslation('home');

  return (
    <div>
      <h1>{t('greeting')}</h1>
    </div>
  );
}

NextJS has a feature that automatically creates a layout component if we don't provide one. However, I prefer to create my own layout component because I need to basic customization.

// app/layout.tsx
import React from 'react';
import {getLocale} from '../i18n/server';
import '../styles/tailwind.css';

export const metadata = {
  title: 'Next.js i18n',
};

export default function RootLayout({children}: {children: React.ReactNode}) {
  const locale = getLocale();
  return (
    // It's good to sync the html lang attribute with the locale
    <html lang={locale}>
      <body className="p-3">{children}</body>
    </html>
  );
}

Testing our page

By default, our page will use the fallback locale. Then, I manually update the cookie and refresh the page to see the changes.

Locale switcher

It will be a weird application if we need to update the cookie manually in the dev tools. So, let's create a locale switcher component.

Create a server action to update the cookie

We will take advantage of server actions to update the cookie easily.

// actions/switch-locale.tsx
'use server';

import {cookies} from 'next/headers';
import {LANGUAGE_COOKIE} from '../i18n/settings';

export async function switchLocaleAction(value: string) {
  cookies().set(LANGUAGE_COOKIE, value);

  // It does not matter what we return here
  return {
    status: 'success',
  };
}

Create the locale switcher component

// components/ChangeLocale.tsx
'use client';
import React from 'react';
import {switchLocaleAction} from '../actions/switch-locale';

export default function ChangeLocale({locale}) {
  const handleLocaleChange = event => {
    switchLocaleAction(event.target.value);
  };

  return (
    <div>
      <select onChange={handleLocaleChange} value={locale}>
        <option value="en">🇺🇸 English</option>
        <option value="zh-CN">🇨🇳 Chinese</option>
        <option value="sv">🇸🇪 Swedish</option>
      </select>
    </div>
  );
}

Now it's easier to test around what language we want to see.

Client-side translation

Now, we need to find a way to translate the content on the client side. We will use almost the same approach as the server-side translation but with additional configuration and a custom React hook.

In this section, we will update the locale switcher options to display translated text.

Create a global provider of the locale

I could not make the react-i18n provider work so I created a simple provider and hook to share the active locale.

// hooks/locale-provider.tsx
'use client';

import {createContext, useContext} from 'react';
import {FALLBACK_LOCALE, Locales} from '../i18n/settings';

const Context = createContext<Locales>(FALLBACK_LOCALE);

export function LocaleProvider({
  children,
  value,
}: {
  children: React.ReactNode;
  value: Locales;
}) {
  return <Context.Provider value={value}>{children}</Context.Provider>;
}

export function useLocale() {
  return useContext(Context);
}

Install language detector in the browser

Install i18next-browser-languagedetector to simplify language detection in the frontend

npm install i18next-browser-languagedetector

Client Components translation setup

The code below might be lengthy because we need to support both server rendering and client rendering. Don't confuse SSR with Server Component rendering.

// i18n/client.ts
'use client';

import {useEffect} from 'react';
import i18next, {i18n} from 'i18next';
import {initReactI18next, useTranslation as useTransAlias} from 'react-i18next';
import resourcesToBackend from 'i18next-resources-to-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import {
  Locales,
  LANGUAGE_COOKIE,
  getOptions,
  supportedLocales,
} from './settings';
import {useLocale} from '../hooks/locale-provider';

const runsOnServerSide = typeof window === 'undefined';

// Initialize i18next for the client side
i18next
  .use(initReactI18next)
  .use(LanguageDetector)
  .use(
    resourcesToBackend(
      (lang: string, ns: string) => import(`./locales/${lang}/${ns}.json`),
    ),
  )
  .init({
    ...getOptions(),
    lng: undefined, // detect the language on the client
    detection: {
      // We only care about the cookie
      order: ['cookie'],
      // If `lookupCookie` is not set, it will use `i18next` as the cookie name
      lookupCookie: LANGUAGE_COOKIE,
      // This will automatically update the cookie
      caches: ['cookie'],
    },
    preload: runsOnServerSide ? supportedLocales : [],
  });

export function useTranslation(ns: string) {
  const lng = useLocale();

  const translator = useTransAlias(ns);
  const {i18n} = translator;

  // Run content is being rendered on server side
  if (runsOnServerSide && lng && i18n.resolvedLanguage !== lng) {
    i18n.changeLanguage(lng);
  } else {
    // Use our custom implementation when running on client side
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useCustomTranslationImplem(i18n, lng);
  }
  return translator;
}

function useCustomTranslationImplem(i18n: i18n, lng: Locales) {
  // This effect changes the language of the application when the lng prop changes.
  useEffect(() => {
    if (!lng || i18n.resolvedLanguage === lng) return;
    i18n.changeLanguage(lng);
  }, [lng, i18n]);
}

Update the `ChangeLocale` to use the new hook

// components/ChangeLocale.tsx
'use client';
import React from 'react';
import {switchLocaleAction} from '../actions/switch-locale';
import {useTranslation} from '../i18n/client';

// We removed the `locale` prop because we can get it from the hook
function ChangeLocale() {
  const {i18n, t} = useTranslation('common');
  // You can also use our custom hook instead of `i18n.resolvedLanguage`
  // const locale = useLocale();

  return (
    <div>
      <select
        onChange={e => switchLocaleAction(e.target.value)}
        value={i18n.resolvedLanguage}
      >
        <option value="en">🇺🇸 {t('english')}</option>
        <option value="zh-CN">🇨🇳 {t('chinese')}</option>
        <option value="sv">🇸🇪 {t('swedish')}</option>
      </select>
    </div>
  );
}

export default ChangeLocale;

Update the layout component

// app/layout.tsx
import React from 'react';
import ChangeLocale from '../components/ChangeLocale';
import {LocaleProvider} from '../hooks/locale-provider';
import {getLocale} from '../i18n/server';
import '../styles/tailwind.css';

export const metadata = {
  title: 'Next.js i18n',
};

export default function RootLayout({children}: {children: React.ReactNode}) {
  const locale = getLocale();
  return (
    <html lang={locale}>
      <body className="p-3">
        <LocaleProvider value={locale}>
          <ChangeLocale />
          {children}
        </LocaleProvider>
      </body>
    </html>
  );
}

Create translation files

English translations

// i18n/locales/en/common.json

{
  "english": "English",
  "swedish": "Swedish",
  "chinese": "Chinese"
}

Chinese translations

// i18n/locales/zh-CN/common.json

{
  "english": "中国人",
  "swedish": "英语",
  "chinese": "瑞典"
}

Swedish translation

// i18n/locales/en/sv.json

{
  "english": "engelska",
  "swedish": "svenska",
  "chinese": "kinesiska"
}

After all those many changes, we can now see our locale switcher with the translated options. Also, the cookie value is updated automatically to the fallback when we first load our page.

Bonus

Nested translation keys and default translation

We are not limited to a flat JSON structure.

// i18n/locales/en/newsletter.json

{
  "title": "Stay up to date",
  "subtitle": "Subscribe to my newsletter",
  "form": {
    "firstName": "First name",
    "email": "E-mail",
    "action": {
      "signUp": "Sign Up",
      "cancel": "Cancel"
    }
  }
}

We can omit some translation keys if we want it to use the default locale value(en in our case. See the demo later).

// i18n/locales/zh-CN/newsletter.json

{
  "title": "保持最新状态",
  "form": {
    "email": "电子邮箱",
    "action": {
      "cancel": "取消"
    }
  }
}

// i18n/locales/sv/newsletter.json

{
  "title": "Håll dig uppdaterad",
  "subtitle": "Prenumerera på mitt nyhetsbrev",
  "form": {
    "firstName": "Förnamn",
    "email": "E-post",
    "action": {
      "signUp": "Registrera sig",
      "cancel": "Annullera"
    }
  }
}

Create the component

Let's create a component that uses the translations above. We'll make this a server component to demonstrate one way of using the createTranslation function.

// components/SubscribeForm.tsx
import React from 'react';
import {createTranslation} from '../i18n/server';

export default async function SubscribeForm() {
  const {t} = await createTranslation('newsletter');

  return (
    <section className="w-[350px]">
      <h3>{t('title')}</h3>
      <h4>{t('subtitle')}</h4>

      <form className="flex flex-col items-start">
        <input placeholder={t('form.firstName')} className="border mb-1 p-1 w-full" />
        <input placeholder={t('form.email')} className="border mb-1 p-1 w-full" />
        <button className="border mb-1 p-1 w-full">{t('form.action.signUp')}</button>
        <button className="border mb-1 p-1 w-full">{t('form.action.cancel')}</button>
      </form>
    </section>
  );
};

Render the form on the home page.

// app/page.tsx
import SubscribeForm from '../../components/SubscribeForm';
import {createTranslation} from '../../i18n/server';

export default async function IndexPage() {
  const {t} = await createTranslation('home');

  return (
    <div>
      <h1>{t('greeting')}</h1>
      <hr className="my-4" />
      <SubscribeForm />
    </div>
  );
};

And now, we have this!

Built-in Formatting

It is very easy to format most of our data since i18next comes with a lot of utilities we can use.

Let's use the translation files below to showcase the formatting features.

// i18n/en/built-in-formats.json

{
  "number": "Number: {{val, number}}",
  "currency": "Currency: {{val, currency}}",
  "dateTime": "Date/Time: {{val, datetime}}",
  "relativeTime": "Relative Time: {{val, relativetime}}",
  "list": "List: {{val, list}}",
  "weekdays": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
}

// i18n/sv/built-in-formats.json

  "number": "Nummer: {{val, number}}",
  "currency": "Valuta: {{val, currency}}",
  "dateTime": "Datum/tid: {{val, datetime}}",
  "relativeTime": "Relativ tid: {{val, relativetime}}",
  "list": "Lista: {{val, list}}",
  "weekdays": ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag"]
}

// i18n/zh-CN/built-in-formats.json

{
  "number": "数: {{val, number}}",
  "currency": "货币: {{val, currency}}",
  "dateTime": "日期/时间: {{val, datetime}}",
  "relativeTime": "相对时间: {{val, relativetime}}",
  "list": "列表: {{val, list}}",
  "weekdays": ["星期一", "星期二", "星期三", "星期四", "星期五"]
}

Create the component

Let's create a component that will use the previous translations. We'll make it a client component just for fun.

// app/components/BuiltInFormatsDemo.tsx
'use client';
import React from 'react';
import {useTranslation} from '../i18n/client';

const BuiltInFormatsDemo = () => {
  const {t} = useTranslation('built-in-demo');

  return (
    <div>
      <p>
        {/* "number": "Number: {{val, number}}", */}
        {t('number', {
          val: 123456789.0123,
        })}
      </p>
      <p>
        {/* "currency": "Currency: {{val, currency}}", */}
        {t('currency', {
          val: 123456789.0123,
          style: 'currency',
          currency: 'USD',
        })}
      </p>

      <p>
        {/* "dateTime": "Date/Time: {{val, datetime}}", */}
        {t('dateTime', {
          val: new Date(1234567890123),
          formatParams: {
            val: {
              weekday: 'long',
              year: 'numeric',
              month: 'long',
              day: 'numeric',
            },
          },
        })}
      </p>

      <p>
        {/* "relativeTime": "Relative Time: {{val, relativetime}}", */}
        {t('relativeTime', {
          val: 12,
          style: 'long',
        })}
      </p>

      <p>
        {/* "list": "List: {{val, list}}", */}
        {t('list', {
          // https://www.i18next.com/translation-function/objects-and-arrays#objects
          // Check the link for more details on `returnObjects`
          val: t('weekdays', {returnObjects: true}),
        })}
      </p>
    </div>
  );
};

export default BuiltInFormatsDemo;

Don't forget to render the component on the home page.

// app/page.tsx
import BuiltInFormatsDemo from '../../components/BuiltInFormatsDemo';
import {createTranslation} from '../../i18n/server';

export default async function IndexPage() {
  const {t} = await createTranslation('home');

  return (
    <div>
      <h1>{t('greeting')}</h1>
      <hr className="my-4" />
      <BuiltInFormatsDemo />
    </div>
  );
};

The more you look, the more you'll be amazed

Other translation functions to check

Conclusion

Internationalization is a complex requirement simplified in Nextjs due to the way applications are built using the framework.

CodeCraft: Full-Stack Chapter 3

Carlo Gino Catapang — Wed, 27 Sep 2023 21:41:25 +0000

The hammering sounds of construction woke Jason as sunlight filtered through the window of the small wooden hut. He slowly sat up on the uncomfortable straw bed, grimacing at pains in unfamiliar areas.

"Was it all a dream?" he whispered, rubbing stiff shoulders. But no - this wasn't his apartment. The unfamiliar symbols on the walls told of another place, another reality.

His eyes were drawn to a table in the corner, equipped with throwing stars, knives, and a short sword. "Okay, that's either really cool or really concerning," he said out loud, contemplating the hint of adventure and danger that seemed to linger in the air.

Just then, he noticed a unique three-tailed, orange and black striped cat lounging near his mattress. The cat looked up, its eyes almost sage-like. A flicker of uncertainty crossed Jason's eyes, leading him to wonder if this extraordinary creature was a ferocious guardian or just an ordinary house pet.

Jason's eyes darted back to the table of weapons, their intriguing shapes and materials sparking his curiosity. It reminded him of the 'Eye of Debugger, an ability he'd briefly unlocked before. That unique skill had allowed him to see the world through a surreal, digital overlay. Yet, as much as he wanted to see these weapons through that vision, the ability had proven difficult to reactivate.

Jason's eyes were drawn to the table of weapons, their intriguing shapes and materials sparking his curiosity. It reminded him of the 'Eye of Debugger, an ability he'd briefly unlocked before. That unique skill had allowed him to see the world through a surreal, digital overlay. Yet, as much as he wanted to see these weapons through that vision, the ability had proven difficult to reactivate.

Eager to try it again, Jason closed his eyes and focused. He tried to recapture the state of mind he was in when he first activated the "Eye of Debugger." Deep breaths, focus, and then... "Eye of Debugger," he thought. Nothing happened. He opened one eye and then the other. The room remained steadfastly normal, and the three-tailed cat looked almost amused.

Feeling a sense of frustration, Jason had a moment of clarity. Could the "Eye of Debugger" operate like a mental command line? He relaxed his posture, cleared his mind, and spoke the words out loud: "Show me the digital world." Almost instantaneously, he heard the familiar voice in his head say, "Eye of Debugger, activated."

Both of his eyes began to perceive the environment in a completely new light. Objects in the room were surrounded by glowing grids and cryptic symbols. As his eyes locked onto a knife on the table, an interactive menu flickered into existence, inviting him to check deeper.

Thrilled by his newfound control, Jason realized the importance of the ability to switch between the two visions was vital. Guided by his common sense, he focused his thoughts on the counter-command: "Show me the magical world." As if on cue, the cryptic symbols and digital grids began to fade, allowing his eyes to adjust back to the room's natural hues and enchanting atmosphere.

Curiosity bubbling, Jason's eyes flicked back to the orange and black striped cat lounging on a corner cushion. Intrigued, he couldn't help but think how much more interesting the feline would be with nine tails instead of just three. He imagined the digital interface springing to life around the cat. He was hoping for options like 'add tail' or something cooler.

"If only I could give you six more tails and make you a real mythical creature," he thought, amused by the idea.

However, as he focused on the cat through his "Eye of Debugger," he realized that the digital outline didn't offer any options for interaction. It was like a locked interface—impossible to edit or alter.

His eyes wandered back to the inanimate objects. When he focused on them, menus would materialize in his vision, ready for his mental commands to manipulate them. But the cat? Nothing.

"Guess living things aren't open-source," he thought, disappointed at his own limitations.

As he heard louder voices outside the hut, he opened the wooden door and walked outside. What he saw was an old-fashioned village, about the size to house maybe 50 people. Roofs made of straw and cobblestone pathways gave it an old-world charm. People were going about their day, trading, talking, and some children even playing in the distance. The air was filled with a mix of interesting smells: fresh earth, flowers, and something delicious cooking not too far away.

While Jason was soaking in the scenery, an elderly man walked up to him. This man had a kindly face and eyes that seemed to twinkle, despite the wrinkles around them. "I'm Dalos, the chief of this village," the man introduced himself. "How are you feeling, young man?" he then asked.

But again, something was weird, something Jason couldn't explain. The words that reached his ears weren't English, or any other language he was familiar with. Even so, he understood what Dalos was saying. It was like his brain was changing the words into something he could understand right away. "Hope this isn't a free trial that expires at the worst time," Jason joked to himself.

Confused but wanting to communicate, Jason used a mix of sign language and words, saying, "Sorry if I can't speak your language. My name is Jason, and thank you for saving my life." The words that came out of his mouth were not in any language he knew, but everyone around seemed to understand him perfectly. His eyes widened, suddenly realizing that something was translating for him automatically. "Is this another feature of this weird place? This world looks so old, yet so advanced" he wondered with fascination.

Upon hearing Jason's words, the villagers burst into laughter. It was a warm, hearty sound that filled the air. They all seemed to think that Jason, whom they believed to be a legendary hero, was making a joke. Jason looked around, puzzled but relieved that they were at least in good spirits about his presence.

Just then, a man with a stern expression stepped forward. Unlike him, Garun stood tall, carrying himself with the kind of confidence that Jason had only seen in video game heroes. While Jason had gained a few pounds sitting at his desk job, Garun looked fit and nimble, like he could spring into action any second.

"Ah, the 'legendary hero,'" Garun said, looking at Jason up and down as if sizing him up. "It's truly awe-inspiring how you bravely run at the sight of a mere bull."

Jason felt self-conscious, aware of his extra weight and his completely average look. Here was a man who seemed built for action, unimpressed by the 'hero' that had just arrived in his world. In contrast to his own mundane life back home, Garun looked like someone who was part of exciting adventures every day.

Jason remembered the incident Garun mentioned. He had indeed run away from a bull, adrenaline fueling his legs, terror gripping his heart. But he had no idea why these people were calling him a 'legendary hero.' What did they mean by that? And more importantly, why did they need a hero? Doubts and questions swirled in his mind, making him realize he had much more to learn about this strange new world.

Dalos, the village chief, cleared his throat loudly, signaling for the chatter to cease. "Enough, Garun," he said with authority but not without a twinkle in his eyes. "You'll have ample time to exchange jokes with our guest later. Let me formally welcome you." He turned to Jason. "I am Dalos, the village chief. Welcome to Meca, our humble village. May I introduce my grandsons? This is Garun," he gestured toward the stern young man, "and this is his younger brother, Gular."

Garun grunted, keeping his stern look. In stark contrast, Gular waved with a big smile, clearly much friendlier than his brother.

Yet the interaction with Garun left him puzzled. "Why does he dislike me so much? We've never met." Jason thought. He couldn't help but wonder what he'd walked into and why Garun had taken such an immediate dislike to him. Was it something he'd done, or was Garun naturally this skeptical of strangers? Either way, Jason knew he had to tread carefully, at least until he had a better understanding of the village and its inhabitants.

Gular, who was noticeably more cheerful than his older brother, stepped forward with a wide grin on his face. "Hey, you changed the color of that monolith, didn't you? Could you do the same for my toy horse?" He held out a small wooden horse, its paint chipped and faded.

Jason took a look at the wooden horse and then back at Gular. Nodding, he activated his 'Eye of Debugger.'' then focused on the wooden horse to select the decompile option. "Ah, the color property," he thought to himself. Inspired to do more this time, he mentally navigated to the color setting and chose a variety of shades: a red mane, a blue body, and yellow hooves. The wooden horse was transformed in an instant, now radiant in its new, multicolored form.

A ripple of astonishment swept through the village, accompanied by gasps and whispers from the villagers.

"Why does everyone look so surprised? Is this the first time you've seen a colored horse, or is my choice of color not to this village's liking?" Jason asked, puzzled by their reaction.

A villager stepped forward, awe still etched on his face. "It's not the color that surprises us; it's how you did it. You didn't utter a single word while casting your magic."

Dalos, the village chief, nodded his head in agreement with his fellow villager. "Indeed, spoken words channel the essence of our magic. It would be groundbreaking if someone could perform voiceless magic, let alone do something as permanent as you did." He gestured towards the red monolith that Jason had altered the day before, "That stone, for instance, has never been permanently altered. Your actions open up new possibilities we hadn't considered."

Garun mocked, layering his voice with heavy sarcasm. "So you can change the color of a toy horse without uttering a word, yet you don't know the first thing about how our magic works? That's... impressive in its own way, I guess. You're talented and dumb at the same time. What's next, saving the world with your unmatched ability to redecorate?"

Garun whirled around to face the villagers, his voice tinged with urgency. "Think about it! This is the 'legendary hero' we're pinning our hopes on? A man who flees from a mere bull and is clueless about our world!"

His eyes narrowed, and he pressed on. "Sure, he's got some peculiar talents. But do we really want to risk our community's fate on a total stranger? Someone who's so foreign to us, he might just turn those powers against us?"

A ripple of unease swept through the crowd. Their faces clouded with uncertainty as if Garun's words had unsettled a previously unspoken fear. The mood shifted; villagers exchanged wary glances, now reevaluating the wisdom of trusting Jason.

Feeling the crowd's skepticism weigh on him, Jason's mind raced. This village was his safest bet for learning more about this strange world. He couldn't afford to be cast out now. Losing their trust was not an option. "Look, I come in peace," he started cautiously, grasping for the right words. A flicker of inspiration hit him, offering a chance to hide his ignorance while still sounding like a legendary hero. He said "The last thing I remember is being in battle with a fearsome, three-headed dragon. After that, everything's a blur. I can't remember much, so bear with me as I try to figure things out."

The atmosphere shifted dramatically, from skepticism to awe. "Only a legendary hero would face a three-headed dragon," Gular mused, his eyes widening. "That's incredible! Who won? What spells did you use?" The crowd buzzed with excitement, their previous doubts momentarily forgotten as they regarded Jason as the heroic figure he portrayed himself to be.

Jason couldn't help but smirk. "Ha! Nailed it. Man, if only job interviews were this easy to bluff through."

Garun folded his arms, clearly unmoved by the crowd's shifting sentiments. "Someone ignorant who can perform voiceless magic had fought a three-headed dragon but is afraid of a mere bull? This doesn't add up. He could be a fraud, or even worse, a spy."

With a steely gaze, Garun turned to Jason. "How about a challenge? Prove your courage and skills. If you're as 'heroic' as you claim, then you should have no problem defending yourself."

As murmurs of agreement rippled through the crowd, a woman leaned in to whisper something in Dalos's ear. Dalos nodded subtly, his eyes gleaming with intrigue. It seemed she too was in favor of testing the stranger.

Dalos stepped in to mediate, "Alright, a challenge it is then. But let's set some ground rules: the match ends when one of you either surrenders or becomes unconscious. No lethal force. And if you lose, young man," Dalos directed his gaze at Jason, "you leave this village."

"Fair enough," said Garun, smirking at Jason. "If you've battled a three-headed dragon, I should be a breeze, right? Unless, of course, you've been deceiving us."

Jason felt a surge of nervousness shoot through him, as though his stomach had dropped to his feet. The realization that he was about to duel, coupled with the looming threat of exile, set his heart pounding uncontrollably. "Hold on a second, when did I ever agree to a duel? What kind of mess have I walked into?" he thought. Swallowing hard, he struggled to put on a brave face while every fiber of his being screamed with anxiety and apprehension.

The villagers gathered around Garun, patting him on the back and nodding in agreement. "You always have the village's best interests at heart, Garun. That's why you'll make a great chief one day," one elder said. The atmosphere made it clear: their trust in him ran deep, based on his obvious concern for the community.

Dalos's face turned somber as he addressed Jason. "We give you one week to prepare for this duel. Given your lost memory, it would be a dishonor to fight an unprepared opponent."

Jason's internal monologue churned with thoughts. "One week? Does that mean five or seven days in this world? No, don't ask, you'll sound like an idiot." Then another thought popped up. "One week? Who are they kidding? I'd need at least five years to prepare for this! I only have experience in video game fights."

Jason's face remained composed, not betraying the inner turmoil. "Thank you for the honor of preparation time. I'll make the best of it," he managed to say, swallowing hard.

The mood in the village was tense as people went off to do their own things, knowing something important was coming up. Breaking the silence, Dalos spoke up. "Let me guide you back to the guest room. You'll need a place to rest and prepare."

Seizing the opportunity, Jason exclaimed his request before they could leave the public area. "Um, may I request an introduction to how magic works in this land? It might help jog my memory," he lied, trying to sound as earnest as possible.

The room filled with exchanged glances, a mix of curiosity and doubt hanging in the air. Dalos took a moment before nodding. "Very well, if you think it'll help you remember, it might be worth a shot."

Jason's shoulders relaxed, a subtle shift as if a weight had been lifted. Understanding the magic system would give him a fighting chance.

Dalos led Jason into a room adorned with mystical symbols and ancient scrolls. "Sit, sit," he said, gesturing to a cushioned seat. "Now, let me explain the core of magic. You see, we chant the words of the gods to channel our spiritual energy into magic. It's simple, really."

Jason couldn't help but think, "Simple? Oh, you mean just like explaining quantum physics to a 5-year-old.

Dalos gestured, and three individuals entered the room, their behavior solemn as though they were about to perform a sacred rite.

"Allow me to introduce the core magics of the Fendtorn race," Dalos announced. "We specialize in three main types: creating materials, manipulating these created materials, and enhancing them."

As Dalos's guests prepared themselves, Jason discreetly activated his 'Eye of Debugger,' hoping to uncover the deeper mechanisms behind this so-called magic.

The practitioners lined up, each focused, waiting for their moment. The first one stepped forward, extending her hands and closing her eyes. "Watch closely," Dalos whispered, the room silent but for his voice.

The first practitioner began:

"From the cosmic forge, to steel I declare,
Iron and carbon, in elements paired.
Tags and attributes, in harmony soar,
Compile into being, as steel I restore."

A piece of steel materialized out of thin air, floating before them. Jason's eyes widened, captivated by what seemed like a miracle. The first practitioner stepped back, her task completed.

Dalos gestured subtly, and the second practitioner advanced. Hands hovering over the floating steel, he took a deep breath and continued:

"By selector’s grace, to sword you shall bend,
Curves and lines, in styles that I send.
Radius smooth, yet structure defined,
Transitions complete, in sword you're designed."

The steel morphed into the shape of a sword. Jason felt a surge of disbelief and wonder.

With a slight bow, the third practitioner advanced. Meeting Jason's eye briefly, she began the final chant:

"Function sharpen invoked, edge fine-tuned to the core,
Increment sword strength, like a variable I store.
Callbacks to the hilt, and to the blade's keen sight,
Await your power, to unleash warrior's might."

The sword emitted a radiant glow. Its form became robust, its blade razor-sharp. Jason could hardly contain his awe.

Throughout the demonstration, Jason noticed something peculiar. The incantations they chanted sounded eerily like a script in a programming language. Each syllable, each phrase seemed to represent a command that transformed characters—code—into something palpable and real. His background as a web developer made it all the more fascinating and uncanny.

"Are they... Are they literally coding reality?" Jason pondered, his mind racing. "This is like HTML, CSS, and JavaScript... but on steroids."

His 'Eye of Debugger' revealed something even more intriguing. This wasn't magic in the conventional sense—it was science, just a form of science this world hadn't realized yet. Everything seemed to revolve around bytes or some other unit of data. The incantations were like algorithms, manipulating these units into forming matter and effects, and spiritual energy was a form of computational resource.

Jason grinned to himself, "If magic here is just another form of coding, then I have a shot at this. After all, I'm a wizard in my own right—a code wizard."

"As with all things, there are limitations," Dalos said, eyes twinkling with wisdom. "Our magic has a lifespan; the effects last only for around ten minutes. Hence, we also train rigorously in physical combat to supplement our abilities."

Jason nodded with clearer understanding. "So they're like programmer-samurais...or nija, blending magic and weaponry. Ten minutes could be a limitation, but it all depends on how they use it."

"Thank you for this invaluable information, Dalos," Jason said earnestly. "Do you happen to know where I could train? I really need to get the hang of this before... you know, the whole duel thing."

Dalos nodded, a look of understanding in his eyes. "I'd recommend heading straight to the training ground located just behind the village hall," he said, pointing him in the direction of the exit.

Jason made his way through the village, his eyes scanning for the hall Dalos mentioned. Upon finding it, he spotted an open area filled with training dummies and wooden weapons. His footsteps quickened as he approached, and soon he was in the heart of the training ground.

Not being able to remember any of the incantations, Jason decided to focus on how the 'Eye of Debugger' could be used for battle. Jason settled into a chair, staring intently at a spear lying a few feet away from him. "Alright, Spear, tell me your secrets. What properties do you possess that could help me survive a duel? Maybe you have some kind of hidden power or... Oh man, I can't believe I'm talking to a spear."

Jason moved closer and studied the spear's properties, his attention landing on its 'position' attribute. "Can I manipulate this thing remotely?" he pondered. Focusing intently, he tried to update the spear's coordinates using just his imagination. The minutes felt like hours, each failed attempt melting away at his confidence.

Just when he was about to give up, he noticed something—the spear quivered an inch off the ground each time his gaze wandered. Energized by the clue, he fixed his gaze at a point a few feet away and visualized the spear levitating. After a struggle that seemed like an eternity, the spear lifted—just a few inches off the ground.

From a distance, Jason looked like he was daydreaming or slacking off, but in his mind, a battle raged on.

Garun glanced over and scoffed. "He's doing nothing, just slacking," he thought. Annoyed, he yelled, "Hey! What are you doing?!"

Jason's eyes, startled, snapped toward the source of the voice—Garun.

The moment Jason's eyes met Garun's, the spear—which had lifted just a few inches off the ground—shot through the air towards Garun at a startling speed. With amazing reflexes, Garun caught the spear just before it could make contact with his face.

Jason learned how to move an object, but he also moved himself in a difficult situation.

The spear, although intercepted by Garun's swift hands, resisted with an uncanny force. The levitating power infused by Jason made the spear jitter and wriggle in Garun's grasp, like a serpent trying to break free. Veins popped in Garun's arms, his muscles strained as he wrestled with the seemingly possessed weapon.

The square was silent, all eyes were locked on the tussle between the man and the levitating spear. The seconds stretched, the world seemed to slow down, and then, with a final determined heave, Garun slammed the spear into the ground, pinning it in place.

Garun's eyes locked onto Jason's, creating a strong tension in the air. "Well, that was unexpected. Perhaps you're not as pathetic as you look," he said, his words filled with a complexity that Jason couldn't quite figure out. Garun then turned away, and as he did, the corners of his mouth seemed to twitch upwards.

Jason squinted, his thoughts racing. 'Was that a smile? What's going on in his head?'

The unclear moment left him uneasy, casting a long shadow of doubt and making him even more nervous about the upcoming duel.

CodeCraft: Full-Stack Chapter 2

Carlo Gino Catapang — Tue, 19 Sep 2023 06:23:49 +0000

Jason awoke to unfamiliar sounds replacing the city's usual hum. The chirping of unknown birds and the rustling of leaves were a stark contrast to the honking of cars he was used to. Refreshed and invigorated, he found himself in the heart of vast grassy fields, a far cry from the concrete and steel structures of his city.

The vibrant green fields under the clear, blue sky stretched endlessly, surrounded by majestic mountains with cloud-kissed peaks. A serene river flowed between the mountains, its clear waters sparkling in the sunlight. The trees caught his attention the most, with their twisted trunks, shimmering leaves, and giant-like branches.

Suddenly, a thought struck him. This scenario was eerily similar to the countless fantasy and sci-fi shows and books he had consumed. "I've watched too much fiction. I must be dreaming of an alternate world," he said to himself, a mix of excitement and fear coursing through him.

Overwhelmed by the beauty of his surroundings, he rubbed his eyes, a hint of worry creeping into his voice. "This place... it's breathtaking, just like in the stories I love," he murmured to himself. "But I know those stories. They're filled with monsters and danger. I need to see the real world now. I want to go back."

As his words faded, he felt a sudden spark, like a jolt of electricity originating from his brain and traveling down to his left eye. This unexpected sensation startled him, and then a voice echoed in his mind, "[[Eye of debugger]], activated." When he removed his hand and opened his eyes, his vision had shifted.

His right eye was seeing the world as he knew it - the trees, the sky, the ground beneath him. But his left eye was seeing something entirely different. It was as if he was looking at a digital representation of the world around him. Rows of cryptic symbols and glowing grids that he couldn't understand filled his vision, overlaying the physical world. It was as if he was seeing the digital blueprint of the world around him.

Feeling dizzy from the conflicting views, Jason closed his right eye, allowing him to focus solely on the digital view presented by his left eye. As he tried to make sense of what he was seeing, his gaze landed on a small rock near him. The symbols that compose the rock were in a language he couldn't understand. However, when he focused his vision on the cryptic object, an interactive menu appeared around it. His instincts told him that one of the options was "decompile", even though he couldn't read them accurately. Driven by curiosity, he decided to explore this further.

Suddenly, upon focusing on the "decompile" option, it was as if he had selected it. The cryptic lines of symbols and diagrams started to swirl and shift before his eyes, like a complex puzzle rearranging itself. As they settled, they transformed into a form that seemed to resonate with Jason's understanding. Additional information appeared around the rock, like its color, weight, and other properties. Despite the symbols not being conventionally readable, Jason found himself instinctively grasping their meaning.

Excited by this discovery, Jason decided to experiment further. He moved his hand closer to the rock, intending to touch it. But as his fingers neared the rock, he felt an unexpected feedback, a sensation akin to typing on a keyboard.

"Whoa, what was that?" Jason exclaimed, pulling his hand back in surprise. He tried moving his fingers again, as if typing in the air. With each motion, he noticed the information about the rock changing. "It's like... I'm navigating through the rock's properties," he muttered to himself, his eyes wide with fascination.

Intrigued, he focused on the color property of the rock. He could see the symbol 'color is gray' hovering near the rock. Wondering if he could change the value, he started searching for a way. "How can I change this color?" he mused aloud, his fingers moving in the air as if scrolling through options.

Then, with a determined whisper, he said to himself, "I need to find blue. Where is it? I want it... blue." To his amazement, the symbol changed from 'color is gray' to 'color is blue'.

"Value selection by mind, what a feature!" Jason murmured, staring at the now-blue symbol. He opened his right eye to confirm, and sure enough, the rock in the physical world had also changed. It was now a brilliant shade of sapphire blue, matching his visualization perfectly.

Taking a moment to let the reality of what just happened sink in, he looked at his hands, then back at the transformed rock. "It's like I've been using this virtual keyboard all my life. Even though it's completely new to me, it feels... instinctive, natural," he said to himself, marveling at his newfound ability to interact with the digital representation of the world around him.

Feeling a renewed sense of energy, Jason decided to explore his surroundings. "I need to find a safe place, somewhere to rest and gather my thoughts," he muttered to himself, his eyes scanning the environment.

As he ventured further into the fields, he noticed an unusual shape in the distance. "What's that?" he wondered aloud, squinting at the large monolith. "Looks like a statue. Statues usually mean civilization, right? Maybe there's a village or something nearby. Definitely worth checking out."

As he drew closer, the ground beneath him began to tremble. "What the...?" Jason exclaimed, freezing in place as a low rumble filled the air.

Suddenly, a thunderous sound echoed across the fields. Jason turned towards the source of the noise and found himself staring at a massive, bull-like creature charging towards him. "Oh no, this isn't good," he gasped, his heart pounding in his chest. Despite its fearsome appearance, Jason noticed that the creature seemed weakened. "It's struggling... but what's causing it?" he wondered aloud, his mind racing as he tried to figure out his next move.

The sight of the massive, bull-like creature charging towards him sent a jolt of fear through Jason. He turned on his heels and started running towards the boulder, his eyes scanning the surroundings for something, anything, he could use to his advantage.

Remembering the myth about bulls being attracted to the color red, Jason chuckled nervously to himself. "If I can make that boulder red," he thought aloud, his voice shaky, "it might distract this creature, giving me a chance to escape."

With a deep breath, he focused on the boulder. As he did, he felt a familiar sensation in his left eye. A voice echoed in his mind, "[[Eye of Debugger]], activated." His vision shifted, and he could see the underlying properties that made up the boulder.

With his fingers in the air, he navigated the properties of the boulder as if typing on an invisible keyboard. He visualized the color property changing to red.

The boulder responded instantly, turning a vibrant, fiery red so bright it was almost blinding. As soon as the transformation occurred, Jason turned on his heels and started running away from the boulder. But as he dared to glance back, his heart sank. The bull-like creature was not swayed by the dazzling red boulder. Its menacing eyes were still locked on him, ignoring the red distraction.

As it drew closer, Jason realized with a jolt of fear that it was massive - at least five times the size of any bull he'd seen before. It continued its charge, aiming for where Jason was heading. Despite its weakened state, the creature was still faster than Jason and was quickly closing the distance. The reality of his situation hit him like a punch to the gut - he was still in danger.er.

As Jason was running away from the charging bull, he spotted a group of figures at the edge of the field. They were villagers, their hands raised as they chanted in unison.

"Help!" Jason shouted, his voice hoarse with fear. "I mean no harm! But that bull... it doesn't seem to want to make friends!"

His call for help echoed across the field, reaching the villagers. They exchanged quick glances, their chant faltering for a moment. Then, as if coming to a silent agreement, they resumed their chant with renewed determination.

Just as the bull was about to reach Jason, the villagers' chanting got louder. Suddenly, a towering wall of iron, as tall as a two-story building and as thick as a large tree trunk, shot up from the ground, blocking the bull's path

With a loud crash, the bull hit the iron wall. The impact was so strong it shook the ground, and a large dent appeared on the wall where the bull had hit. Dust and small fragments of iron flew into the air. The bull tried to push forward, but it was no use. It staggered back, dazed by the impact, then fell to the ground, knocked out cold.

Jason, catching his breath, turned towards the villagers. His eyes, still adjusting to the dual vision, widened in amazement as he took in the sight of the iron wall that had saved him. As he watched, the wall started to dissolve, turning into bytes of data that disappeared into thin air. "Where did that come from?" he muttered to himself, his voice shaky, his eyes shifting back and forth between the disappearing wall and the villagers in disbelief.

A hushed silence fell upon the villagers, stretching out for what felt like an eternity. Five minutes ticked by, each passing second filled with anticipation and curiosity. Their eyes, filled with a mixture of awe and concern, remained fixed on Jason, their gazes dissecting every detail of his being.

Whispers of realization and recognition rippled through the crowd, as if a secret language was being exchanged among them. Their expressions shifted, revealing a range of emotions - surprise, intrigue, and a hint of worry. They had noticed something extraordinary about Jason, something that resonated deeply within their own clan's abilities. However, the villagers traditional attire, vibrant and intricately patterned, stood in stark contrast to his own outfit - black jogging pants, a blue t-shirt, and flip-flops. It was clear that his modern attire had left them puzzled, their brows furrowed with concern.

Stepping forward, an older man with a kind face and gentle eyes addressed him, their voice carrying reassurance. "You're safe now, young person. Welcome to our village."

Jason nodded, grateful for their help, his mind racing with questions. It was the first time he had ever heard their language, yet somehow, he understood every word. The mysterious connection left him both amazed and bewildered.

A murmur rippled through the group, their eyes filled with a mix of curiosity and wonder. They exchanged glances, their silent communication speaking volumes. "Look at the monolith," one of the villagers whispered, her voice filled with awe. Her eyes widened as she continued, "It's not like anything we've seen before. The transformation... it's more vibrant, more alive. It's as if the monolith itself has transformed into a giant ember."

The villagers held their breath, their anticipation growing with each passing moment. They waited, their eyes fixed on the monolith, seeking further confirmation of the extraordinary phenomenon unfolding before them. The air was charged with a sense of excitement and reverence, as if they were witnessing a long-awaited prophecy come to life.

The elder of the group, a man with an aged face and gentle eyes, stroked his beard thoughtfully. "The legend speaks of a hero who could become one with the world," he said to Jason, his voice carrying a note of hope. "A hero who could permanently interact with the world in a way no one else could. Could you be...?"

As this realization dawned upon the villagers, their expressions shifted from neutral curiosity to awe and hope. "The hero from the legend," the elder finished, his voice filled with reverence. "He's finally here."

Exhausted but relieved, Jason managed a weak smile as his eyes slowly closed. His adventure in this magical realm was just beginning. As he drifted into unconsciousness, he caught sight of the villagers' smiling faces, their eyes reflecting the dawn of a new era. His last thoughts were a mix of confusion and humor. "Hero? Legend? What are they talking about?" he mused, a faint smile on his lips. "Oh... whatever. At least they are not mad at me for turning that boulder into a big red traffic light." Little did he know, his actions had sparked a beacon of hope among the villagers.

CodeCraft: Full-Stack Chapter 1

Carlo Gino Catapang — Tue, 19 Sep 2023 06:22:28 +0000

It was a sunny day, the city soaking in the warmth of the sun. The skyline was a testament to the hustle and bustle of life, a blend of towering skyscrapers, lush green spaces, and intricate networks of efficient public transportation. Solar panels gleamed on rooftops, and autonomous vehicles zipped along the roads, a harmonious dance of technology and sustainability.

Surrounded by all this, Jason, a recent graduate brimming with the knowledge of Computer Science from his university years, was buzzing with anticipation. "I'm ready to make a difference, to contribute to society with what I've learned," Jason said to himself, his fingers itching to get to work on projects that would improve people's lives. His eagerness to start his career was evident, and his determination was unwavering.

Jason's first week at work was a whirlwind of activity. His role focused on the visual aspects of projects, transforming plain designs into interactive web pages. Each line of code he wrote, each element he placed, brought the website closer to life. He found himself engrossed in the challenge of making the user interface not just visually appealing, but also intuitive for users to navigate. The satisfaction he felt when he finally got a feature to work just right was immense. It was like solving a complex puzzle, each piece fitting together to create a beautiful picture.

The daily meetings were another highlight of Jason's day. Each team member would discuss their progress and plans for the day. It was a chance for everyone to sync up, to understand what everyone else was working on, and to offer help where needed.

During one of these meetings, when it was Jason's turn to speak, he stood up and confidently shared, "Yesterday, I managed to complete the user registration page. The design has been implemented and it's fully responsive. Today, I plan to start working on the user dashboard. I have some ideas to make it really intuitive and user-friendly. And remember, if anyone needs help with anything, don't hesitate to ask. I'm here to assist!" His voice was full of motivation, reflecting his readiness to contribute to the team's success.

After work, Jason would retreat to his apartment, his sanctuary amidst the city's hustle and activity. His orderly mind reflected in his meticulously arranged gaming console, controllers, and alphabetically stacked games. Settling into his gaming chair, he'd journey through virtual landscapes under the soft glow of the screen, savoring each quest and battle. His mantra, often shared with friends, was, "Why socialize when you can save the world from the comfort of your own home?"

When he wasn't gaming, Jason immersed himself in a different kind of escapism. A corner of his room was dedicated to his collection of sci-fi and fantasy novels, their pages well-thumbed from multiple readings. He'd lose himself in these fictional universes, exploring fantastical worlds and following the adventures of characters he'd grown to love. This was his escape, his way of unwinding from the day's realities.

Life was good. Jason was content. He loved his job, enjoyed his hobbies, and was surrounded by a great team. He could see himself retiring from this company, continuing to create and innovate as a developer.

In the first year, Jason was still excited. He enjoyed coding and creating websites. His colleagues were fun, and he liked the daily meetings where they would share their progress. But as the months went by, the newness started to fade.

By the second year, the work became routine. Coding was just a job now, and the websites were just tasks to be completed. He had heard all his colleagues' stories, and the meetings felt more like a duty than a fun gathering. His updates during the standups became monotonous, "Fixed a few bugs, working on the user interface today."

The third year was even more of the same. Coding felt like a chore, and the websites felt like burdens. His colleagues' stories were repeated, and the meetings were just a boring part of the day. His updates during the standups were brief and devoid of enthusiasm, "Working on the same module, nothing new."

In the fourth year, Jason felt like he was just going through the motions. Coding was too easy with no joy, and the websites felt like chains holding him back. His colleagues' stories were just noise, and the meetings were a drone in the background of his day. His updates during the standups were a mere formality, "Same as yesterday."

By the fifth year, Jason felt like he was stuck. Coding was a prison, and the websites were walls boxing him in. His colleagues' stories were silent, and the meetings were empty. The job was easy, the pay was good, but Jason was bored. His updates during the standups were a reflection of his state of mind, "Nothing much to update."

At the end of his fifth year, Jason felt bored. He looked at himself in the mirror. He had put on a few extra pounds. Not a lot, just enough to notice. The extra weight seemed like it came from being stuck in the same old routine, day after day. He was good at his job, but it didn't excite him anymore. He still liked video games and reading, but they weren't as fun as they used to be.

His room was filled with snacks. Bags of chips and cookies were everywhere. He was snacking more, moving less, and it showed. The snacks and the extra pounds felt like signs that he was stuck in a boring loop.

One day, while working from home, Jason hit the peak of his boredom. He found himself aimlessly tapping on his keyboard, his eyes glazed over the lines of code on his screen. "Maybe it's time for a change, a new job, a new adventure," he mused aloud, the thought of a more thrilling role sparking a glimmer of excitement. Yet, the comfort of his current job, the stability it provided, and the familiar routine held him back. "But it's so convenient here," he sighed, adding with a hint of irony, "I mean, who else gets paid well for simply copy-pasting code from the internet?" Overwhelmed, he dozed off at his desk, his mind a whirlwind of conflicting thoughts.

Suddenly, a voice sliced through the silence. "Are you bored? So am I," it echoed. Startled, Jason's gaze darted around, finally landing on his computer. His once familiar monitor now pulsed with an ethereal glow, its screen morphing into a swirling portal.

Jason squinted at the screen, his mind racing. Was there a dead pixel on his monitor? He reached out, intending to touch the screen, to confirm that this was just a minor glitch. But as his fingers brushed the pulsating screen, a peculiar sensation rippled through him.

It began at his fingertips, a feeling akin to a million tiny ants marching, nibbling at his form, disassembling him bit by bit. His hand, once solid and firm, felt as if it was dissolving into thin air. The sensation crawled up his arm, consuming him. He opened his mouth to scream, but as the feeling reached his throat, his voice evaporated, leaving a chilling silence in its wake. As the sensation engulfed his eyes, his world blurred, colors and shapes smearing into a formless void, before plunging him into darkness.

In this sensory void, Jason's mind was a lone ship adrift. He was conscious, aware of his existence, yet stripped of all physical sensation. It was as if he had been digitized, his physical form deconstructed into a stream of data, ready for transmission.

Then, he felt a jolt, as if he had been spat out by the portal. The sensation of reconstruction began. The sensation was strange, like being reassembled piece by piece. He could feel his fingers forming first, followed by his hands, arms, and the rest of his body. It was as if he was being downloaded, his physical form reconstructed from a stream of data.

As his senses returned, he could feel a solid ground beneath him, a stark contrast to the ergonomic chair he was sitting on moments ago. His ears picked up the rustling of leaves, the chirping of birds, and the distant sound of a river, sounds that were alien to his city apartment. His nose was filled with the scent of fresh earth, wildflowers, and a hint of something he couldn't quite place, something magical.

A surge of exhaustion, a direct consequence of his reconstruction, swept over him, so potent it was almost tangible. His limbs felt incredibly heavy as if weighed down by invisible anchors, each muscle aching as if he had just completed a grueling marathon. His breath came in shallow gasps, his chest rising and falling rapidly, mimicking the panting of a long-distance runner crossing the finish line. The energy required for his transformation had drained him, leaving him weak and spent.

His mind, once sharp and alert, felt foggy and drained. Thoughts seemed to move sluggishly, like they were wading through a thick pool of honey. The events of the past few minutes - the voice, the portal, the sensation of being disassembled and reconstructed - swirled around in his head, a chaotic whirlwind that he was struggling to make sense of.

His eyelids felt incredibly heavy, the simple act of keeping them open becoming a Herculean task. The world around him seemed to dim, the edges of his vision blurring and darkening. His head drooped to one side, too heavy for his neck to support. In the back of his mind, his own voice echoed softly, "It's okay, Jason. You're exhausted. Rest now, gather your strength. Tomorrow's work awaits."

CodeCraft: Full-Stack Chapter 0

Carlo Gino Catapang — Tue, 19 Sep 2023 06:21:58 +0000

In a world where spells were cast with the precision of finely written code and magical laws operated with the logic of a complex computer system, Jason stood alone on a battlefield. The once lush and vibrant ground was now a scorched and fractured surface.

Jason's allies, once animated and full of life, were scattered around him like fallen leaves, their fingers still curled around their tools of digital wizardry. Their stillness was a haunting echo of the fierce battle that had just taken place.

The air around Jason flickered, digital fragments of its form blinking in and out of existence, struggling to maintain its natural state under the influence of the malicious corruptive aura. The ground beneath him glitched, patches of soil cascading into lines of code before snapping back to solid reality.

The nearby river seemed to pixelate, its waters transforming into a flowing current of ones and zeros, then back to liquid with a splash. Flames from the battle danced in a mesmerizing pattern of red, orange, and lines of code, their heat pulsating in sync with their shifting form.

"Is this what it's come to?" Jason muttered to himself, surveying the destruction. Despite the fear gnawing at his insides, Jason couldn't help but feel a rush of excitement. This was the kind of challenge he thrived on. "Looks like a scene straight out of a disaster movie."

Across the battlefield, a monstrous adversary stood tall. This creature, with its four sturdy legs and a body that flickered and distorted like a corrupted hologram, held a striking yet odd resemblance to the dragons of old tales. Its wings, once mighty and capable of casting vast shadows, now hung at its sides, badly damaged from the fierce battle. Even in its damaged state, the creature radiated a powerful aura that seemed to destroy anything it touched, disrupting the harmony of the realm and turning the orderly logic of the world on its head.

The beast let out a deep, thunderous roar that echoed across the battlefield. It was more than just a sound - it was a declaration, a clear challenge to Jason. The roar held a note of finality, a clear indication that the creature was ready to end the fight. The air around it seemed to crackle with intensity as it gathered its remaining strength, preparing to unleash its ultimate skill. It was a moment of high tension, the calm before the storm, as both Jason and the beast readied themselves for the final clash.

Jason knew what was at stake. If he lost this battle, the adversary's malicious aura would consume this world that he had grown to love. A world that, despite its dangers, gave him a sense of purpose he had never found back in his own world. He couldn't let that happen. He stood on the battlefield, his body bearing the marks of the fierce battle. His attire, a practical ensemble of reinforced leathers and subtly enchanted fabrics, was now torn and stained, bearing the scars of the magical conflict. His breath came in heavy pants, each exhales a testament to his dwindling energy reserves. But surrender was not an option. He took a deep, shaky breath, grounding himself.

"You've got this, Jason," he whispered to himself, determination seeping into his voice. "Just like debugging a program, except the syntax errors can kill you. And the runtime errors can eat you."

In a swift, determined motion, Jason's left hand moved as if he was typing on an invisible keyboard in the air, each gesture a part of a complex magical formula. His fingers danced in the space above the ground, tracing symbols and diagrams that glowed briefly before fading away. As the last symbol was traced, he lowered himself into a kneel, his hand descending until his open palm gently made contact with the ground beneath him. It was a silent, grounding connection, a tangible link between the caster and the realm, a crucial step in tapping into the realm's vast reservoir of destructive energy, much like accessing a universal database of power.

As Jason waited, he raised his right hand, tracing different symbols in the air. Almost instantly, a dazzling illusion began to take shape. It started as a faint outline, a mere shimmer in the air, but with each movement of Jason's right hand, it grew more defined, more solid. It was a phoenix, its wings spread wide, its body glowing with an inner light. The illusion was so lifelike that it seemed to cast shadows over the entire battlefield, its fiery feathers flickering and shimmering in the air. The phoenix was colossal, easily ten times the size of the monstrous adversary, making the beast seem almost insignificant in comparison.

Seeing the phoenix rapidly emerge, the adversary reacted, a sense of urgency in its movements. It knew the power that such a creature could wield, and it was eager to disrupt Jason's spell before the phoenix could fully form. The beast snarled, its eyes glowing with a savage intensity.

"Almost there," Jason chuckled, his eyes twinkling with determination as he faced his adversary. "Hold your horses, big guy! The best is yet to come."

As the spectral bats swooped towards Jason's creation, he was prepared. With a quiet, focused utterance of "Render Defensive Blade Array", he summoned a flurry of blades. The air around him shimmered as countless blades materialized, each one a manifestation of his defensive spell. Like the flares used by fighter planes to divert incoming missiles, each blade darted towards a bat, burst into a dazzling light upon contact, and then vanished, leaving the bat neutralized in its wake. It was a tough task, the sheer volume of bats threatening to overwhelm him, but he managed to keep them at bay. His defensive measure stood strong, protecting his phoenix from the disruptive swarm.

Just as the adversary's attack was neutralized, Jason felt a connection to the underground energy source solidify. A surge of heat coursed through him, the replicated power of the energy source pulsing within him. Despite the destructive nature of this energy, Jason remained unharmed. His extensive magic training had prepared him to safely replicate and channel such potent forces, all while maintaining their raw power.

Rising from his kneel, Jason traced another pattern in the air with his right hand, creating a magical conduit that would channel this energy into the phoenix illusion, enhancing its potency. His left hand, still connected to the ground, began to glow, a visual representation of the raw, volatile energy being refined and made compatible specifically for the phoenix, ensuring it wouldn't disrupt its illusionary state. With a sweeping gesture, as if physically pulling the energy from the ground, he guided it toward the phoenix. He funneled this transformed energy through the conduit, his hands moving as if conducting an orchestra, invigorating the phoenix.

The illusionary bird flared brighter, its form solidifying and becoming more real. It was no longer just an illusion - it was a manifestation of the world's most potent forces, a creature born from molten magma and the relentless fury of the world's core. With a commanding gesture, Jason directed the phoenix to attack.

"Fly, Phoenix! Show them your power!" Jason shouted, his voice echoing across the battlefield.

In response to Jason's command, the adversary, sensing the imminent threat, prepared its own counterattack. The beast reared back, its form flickering more violently as it gathered its chaotic energy. Then, with a deafening roar, it opened its monstrous jaws and unleashed its ultimate attack, a massive wave of distorted magic that surged from its mouth towards the incoming phoenix.

With a deafening roar, the phoenix and the wave of chaotic magic collided. The battlefield was engulfed in a blinding light, the sheer power of the collision causing the ground to shake. Jason shielded his eyes, the heat from the collision washing over him in waves.

As the light from the explosion was slowly fading, Jason's mind began to wander, the adrenaline of the battle giving way to exhaustion. His thoughts drifted back to a simpler time before his life was filled with magic and battles.

He remembered a day at his office, sitting in front of his computer. The hum of the air conditioning, the soft glow of the monitor, the familiar clatter of keys - it was just another day at work, a stark contrast to the magical battlefield he had just left.

Back then, his life was a series of predictable routines, from the daily commute to the inevitable afternoon coffee break. He was content in his little corner of the world, safely tucked away behind his computer screen. He was the king of his cubicle, the master of his own mundane universe.

"From debugging code to casting spells," Jason sighed, a wistful smile tugging at his lips. "What a career shift. I wonder if I can put 'dragon slayer' on my resume."

CodeCraft: The Full-Stack Wizard's Journey Part 2

Carlo Gino Catapang — Sat, 09 Sep 2023 08:56:19 +0000

Check the text-to-speech version here(might sound very robotic).

Chapter 13: Cloud Migration

Ethan's journey in Codeara took another exciting turn when he met Nimbus, a Cloud Wizard known for his mastery over cloud-based technologies. Nimbus lived high above Codeara, in a castle made of fluffy white cloud formations, representing the cloud servers he managed.

Ethan met Nimbus during a crisis. A storm had formed over Codeara, threatening to flood the land with a torrent of unregulated data. Nimbus explained that the storm was a result of an overflow in the cloud servers, causing a data downpour. To stop the storm, they needed to manage the overflow and restore balance to the cloud servers.
Ethan was eager to help, but he quickly realized that this was a challenge unlike any he had faced before. Cloud management was a complex domain, requiring a deep understanding of cloud-based technologies and their integration with frontend, backend, and database systems.

Nimbus, however, was an excellent teacher. He introduced Ethan to the world of cloud computing, explaining concepts like virtualization, distributed computing, and scalability. He showed Ethan how to manage cloud resources, how to deploy applications to the cloud, and how to handle data storage and retrieval in a cloud environment.

Armed with this new knowledge, Ethan and Nimbus set to work. They navigated through the cloud servers, managing resources, and redistributing data to prevent overflow. It was a daunting task, but together, they managed to calm the storm and restore balance to the cloud servers.

This encounter with Nimbus was a revelation for Ethan. He had discovered a new domain of coding magic - cloud management. He had seen how cloud-based technologies could enhance his applications, providing scalability, flexibility, and efficiency.

But more than that, Ethan had seen how his coding knowledge could translate into powerful magic in Codeara. He had seen how frontend, backend, database, and now cloud skills could shape and protect this world. He had seen the potential of becoming a full-stack developer, a true Code Wizard.

As he bid farewell to Nimbus, Ethan felt a sense of awe and excitement. He had learned so much, and yet, there was so much more to discover. He was eager to continue his journey, to learn more about cloud management, and to integrate this new domain into his coding magic.

Ethan was growing, evolving, becoming more powerful with each new skill he acquired. He was not just a coder; he was a coder wizard, a protector of Codeara. And he was ready for whatever came his way.

Chapter 14: Pre-Compilation

Word spread through Codeara of an impending challenge, a threat unlike any the world had faced before. A malicious entity known as the Syntax Serpent was causing chaos, its corrupt code seeping into the fabric of Codeara, causing glitches and bugs that threatened to destabilize the entire world.

Ethan knew that this was a challenge he could not ignore. He had grown fond of Codeara and its inhabitants, and he was determined to protect them. But he also knew that this was a challenge he could not face alone. The Syntax Serpent was a formidable enemy, its corrupt code complex and difficult to debug.

So, Ethan began to prepare. He returned to his training, honing his frontend, backend, and database skills. He studied the cloud management techniques he had learned from Nimbus, understanding how they could help him manage and distribute resources during the battle. He also started learning about cybersecurity, understanding that he would need to protect his code and applications from the Syntax Serpent's corrupt code.

Ethan's training was intense. He spent long hours studying, practicing, and strategizing. He simulated battles with the Syntax Serpent, using his coding magic to debug and repair corrupt code. He created defenses, using his backend and cloud skills to build robust systems that could withstand the Serpent's attacks. He also built offensive strategies, using his frontend skills to create illusions and distractions.
But Ethan knew that training alone would not be enough. He needed to understand his enemy, to understand the corrupt code that powered the Syntax Serpent. So, he studied the glitches and bugs caused by the Serpent, analyzing the corrupt code and understanding its patterns. He learned how to identify the corrupt code, how to isolate it, and how to debug it.

As he prepared for the impending challenge, Ethan felt a mix of fear and excitement. He was about to face the biggest challenge of his journey, a threat that could destroy Codeara. But he was also excited. He was going to use all the skills he had learned, all the magic he had acquired, to protect a world he had grown to love.

Ethan's preparation for the major challenge was a testament to his growth as a coder wizard. He was no longer just a frontend developer from Codersville; he was a full-stack developer, a protector of Codeara. He was ready to face the Syntax Serpent, ready to use his coding magic to save Codeara.

As he continued his preparation, Ethan felt a sense of determination. He was ready for the challenge, ready to face whatever came his way. He was a coder wizard, and he was ready to fight for Codeara.

Chapter 15: System Overload

The day of the major challenge arrived with a sky filled with ominous, glitching clouds. The Syntax Serpent had begun its attack, its corrupt code spreading through Codeara like a virus. Structures glitched and flickered, data streams overflowed, and a sense of chaos filled the air.

Ethan stood at the forefront, his mind filled with strategies and countermeasures. He was not alone. The inhabitants of Codeara stood with him, their trust in the coder wizard evident in their determined faces. With a deep breath, Ethan stepped forward, ready to face the Syntax Serpent.

The battle began with a surge of corrupt code from the Serpent, causing a wave of glitches and bugs. Ethan countered with his frontend powers, creating a shield of stable code that absorbed the corrupt code and neutralized it. He then used JavaScript to create a series of illusions, distracting the Serpent and buying him some time.

Next, Ethan used his backend powers. He created a server-side application that intercepted the Serpent's corrupt code, isolating it before it could cause more damage. He also used his knowledge of databases to manage the overflow of data, preventing further chaos.

But the Syntax Serpent was a formidable enemy. It countered Ethan's moves, adapting its corrupt code to bypass his defenses. It launched a direct attack on Ethan's server, causing it to crash and leaving Codeara vulnerable.
Ethan, however, was prepared. He had learned from his encounter with the Data Eaters and had a contingency plan. He quickly deployed a backup server he had stored in the cloud, ensuring that Codeara remained protected. He then used his database skills to restore the lost data, stabilizing the world.

The battle raged on, a clash of code and wills. Ethan was relentless, countering every attack from the Serpent, fixing every bug, debugging every piece of corrupt code. He was a whirlwind of action, his coding magic shining brightly in the face of the challenge.

Finally, after what felt like an eternity, Ethan saw an opportunity. He noticed a pattern in the Serpent's corrupt code, a vulnerability he could exploit. With a surge of determination, he launched his final attack. He wrote a piece of code that targeted the Serpent's vulnerability, a debugging spell that would neutralize the corrupt code.
As he ran the code, a wave of energy swept through Codeara. The Syntax Serpent let out a roar as its corrupt code was debugged, its form glitching and flickering before finally disappearing. The sky cleared, the glitches and bugs vanished, and a sense of calm returned to Codeara.

Ethan had done it. He had faced the major challenge and emerged victorious. He had used his frontend and backend powers, his knowledge of databases and cloud management, to save Codeara. He was more than just a coder wizard; he was a hero, a protector of Codeara. And as the inhabitants of Codeara cheered, Ethan knew that he was ready for whatever came next. He was ready to continue his journey, to face new challenges, and to use his coding magic to protect Codeara.

Chapter 16: Home Directory

After the battle with the Syntax Serpent, Ethan found himself standing in front of the magical portal that had first brought him to Codeara. It was time to return to Codersville, to his life as a frontend developer. But as he stepped through the portal, he knew he was not the same person who had left.

Ethan returned to his apartment in Codersville, to his desk with the two large monitors, the clutter of coffee mugs, and the notepads filled with scribbled code snippets. But now, these familiar surroundings felt different. They were no longer just a workspace; they were a portal to another world, a world where his coding skills were magic.

Ethan returned to his job at the tech startup, to his role as a frontend developer. But now, his work felt different. He was no longer just creating user interfaces and debugging JavaScript code; he was practicing his magic, honing his skills for his next adventure in Codeara.

His adventure in Codeara had changed Ethan's perspective on his work. Coding was no longer just a job; it was a passion, a calling, a magical power that could shape worlds. He found joy in every line of code he wrote, every bug he debugged, every application he created. He was not just a frontend developer; he was a coder wizard, a master of frontend and backend magic, a protector of Codeara.

Ethan's colleagues noticed the change in him. He was more focused, more passionate, more creative. He took on more complex tasks, delving into backend development and even dabbling in database management and cloud computing. He shared his knowledge with his team, teaching them the magic of coding, just as he had learned in Codeara.

Ethan's return to Codersville was not the end of his journey; it was just the beginning. He knew he would return to Codeara, to face new challenges, meet new inhabitants, and continue his quest to become a Code Wizard. But for now, he was content. He was home, in Codersville, using his coding magic to create, to solve problems, to make a difference.

As Ethan sat at his desk, a line of code glowing on his monitor, he couldn't help but smile. He was a frontend developer in Codersville, a coder wizard in Codeara, a master of coding magic. And he was ready for whatever came next, ready to use his coding skills to shape his world and the world of Codeara.

Chapter 17: System Reboot

Just as Ethan was settling back into his life in Codersville, the magical portal on his computer screen flickered to life once again. Codeara was calling him back, and this time, he felt a thrill of anticipation. He was no longer the unsure frontend developer stepping into the unknown. He was a seasoned coder wizard, ready to face whatever challenge awaited him.

As Ethan stepped through the portal, he felt a sense of coming home. Codeara, with its vast landscapes of code and its familiar inhabitants, welcomed him back. But there was a tension in the air, a sense of impending danger. A new threat loomed over Codeara, a malicious virus known as the Trojan Dragon was wreaking havoc, its destructive code threatening to corrupt the very core of Codeara.

Ethan didn't hesitate. He had faced threats in Codeara before, and he was ready to do so again. Drawing on his frontend, backend, and database skills, he set to work. He analyzed the destructive code of the Trojan Dragon, identified its patterns, and started crafting a counter-code.
This time, Ethan moved with a confidence he hadn't had before. He was familiar with the landscape of Codeara, understood its rules, and knew how to manipulate them. He used his frontend skills to create shields of stable code, his backend skills to manage and distribute resources, and his database skills to protect and retrieve data.

But the Trojan Dragon was a formidable enemy, its destructive code constantly evolving and adapting. Ethan had to stay one step ahead, adapting his counter-code to match the Dragon's changes. It was a battle of wits and skills, a test of Ethan's growth as a coder wizard.

Despite the challenge, Ethan never faltered. He was determined to protect Codeara, to use his coding magic to save the world he had grown to love. He worked tirelessly, his every move a testament to his skills and determination.
Finally, after a grueling battle, Ethan managed to neutralize the Trojan Dragon. He had debugged its destructive code, stopping its rampage and saving Codeara. As the threat faded, a wave of relief swept through Codeara. Ethan had done it; he had saved Codeara once again.

Ethan's second call to Codeara was a testament to his growth as a coder wizard. He had faced a new threat, used his powers confidently, and emerged victorious. He was no longer just a frontend developer from Codersville; he was a true coder wizard, a protector of Codeara.

As Ethan looked out over Codeara, its code vibrant and stable once again, he felt a sense of pride. He had used his coding magic to make a difference, to save a world. And he knew that he would do it again, that he would always answer Codeara's call. He was a coder wizard, and he was ready for whatever came next.

Chapter 18: Security Protocol

After the battle with the Trojan Dragon, Ethan was approached by a figure who had been watching the confrontation from the shadows. The figure introduced himself as Cipher, a Security Wizard known for his mastery over cybersecurity in Codeara.
Cipher was a mysterious figure, his presence in Codeara as elusive as the encryption algorithms he wielded. He lived in the Secure Stronghold, a fortress of encrypted code that stood as a symbol of security in Codeara. He had been observing Ethan's growth as a coder wizard and was impressed by his victory over the Trojan Dragon.

Cipher explained that while Ethan had successfully neutralized the Trojan Dragon, threats like it were becoming more common in Codeara. The world needed stronger defenses, and for that, it needed a wizard skilled in the art of cybersecurity.

Eager to learn and expand his abilities, Ethan agreed to train under Cipher. The Security Wizard taught him about encryption algorithms, secure coding practices, and how to identify and defend against common security threats. He learned about firewalls and how to create secure networks, about authentication and how to protect user data.

Training with Cipher was challenging. Security was a complex domain, filled with constantly evolving threats and defenses. But Ethan was a quick learner. He grasped the concepts of cybersecurity, understanding how they could enhance his frontend, backend, and database skills.

Ethan's encounter with Cipher was a turning point in his journey. He had faced new challenges and learned about a new domain of coding magic. He had seen how his coding skills could be used not just to create and manage, but also to protect.

As he bid farewell to Cipher, Ethan felt a sense of accomplishment. He had learned new skills, faced new challenges, and grown as a coder wizard. He was ready to use his newfound cybersecurity skills to protect Codeara, to defend it against any threats that might come its way.

Ethan's journey in Codeara was far from over. There were still many challenges to face, many more skills to learn. But he was ready. He was a coder wizard, a master of frontend, backend, database, and now security magic. And he was ready to face whatever came his way.

Chapter 19: Penetration Testing

Under the tutelage of Cipher, the Security Wizard, Ethan embarked on a new phase of his training. Cipher's fortress, the Secure Stronghold, became Ethan's training ground, a place where he would learn the art of cybersecurity and how to integrate it with his existing frontend, backend, and database skills.

Cipher was a stern but patient teacher. He started with the basics, teaching Ethan about encryption and decryption algorithms. Ethan learned how to use these algorithms to protect data, transforming it into a format that could only be read with the correct key.

Next, Cipher introduced Ethan to the concept of secure coding. He learned how to write code that was not just efficient and functional, but also secure. He learned to identify and avoid common security pitfalls, such as code injection and cross-site scripting.

Ethan also learned about authentication and authorization. He learned how to create secure login systems, how to manage user sessions, and how to ensure that users could only access data they were authorized to see. He learned about different types of authentication, from simple username and password systems to more complex multi-factor authentication systems.
Training with Cipher was intense. The world of cybersecurity was complex and ever-evolving, with new threats and vulnerabilities emerging all the time. But Ethan was determined. He studied hard, practiced tirelessly, and gradually, he began to master the art of cybersecurity.

As his training progressed, Ethan started integrating his new skills with his existing ones. He created full-stack applications with secure coding practices, protected databases with encryption, and managed cloud resources securely. He even helped Cipher improve the defenses of the Secure Stronghold, implementing new security measures and fortifying existing ones.

Training with Cipher was not just about learning new skills; it was also about improving his existing ones. Ethan's frontend, backend, and database skills became more robust, more secure. He learned to view his code through the lens of security, always considering how it could be exploited and how he could prevent that.

By the end of his training, Ethan had transformed. He was no longer just a coder wizard; he was a Security Wizard, a protector of Codeara. He had the skills to defend Codeara against threats, to protect its data, and to ensure the security of its inhabitants.

As he bid farewell to Cipher, Ethan felt a sense of gratitude. He had learned so much, grown so much. He was ready to face new challenges, to use his new skills to protect Codeara. He was a coder wizard, a master of frontend, backend, database, and now security magic. And he was ready for whatever came next.

Chapter 20: Malware Alert

Just as Ethan was finishing his training with Cipher, a chilling message spread through Codeara. The ultimate threat had emerged, a malicious entity known as the Logic Leviathan. This entity was causing chaos, its complex and destructive code threatening to unravel the very fabric of Codeara.

The Logic Leviathan was unlike any threat Ethan had faced before. It was not just corrupting the code of Codeara; it was rewriting it, imposing its own twisted logic that threatened to destabilize the entire world. To defeat the Logic Leviathan, Ethan would need to use all his skills, all his powers. He would need to be a true Code Wizard.

Ethan knew this was his biggest challenge yet. But he was not afraid. He had faced threats in Codeara before, and he had always emerged victorious. He had the skills, the knowledge, and the determination to face the Logic Leviathan.
So, Ethan began to prepare. He revisited his frontend, backend, and database skills, practicing and honing his abilities. He studied the security techniques he had learned from Cipher, understanding how they could protect Codeara from the Logic Leviathan's destructive code.

But Ethan knew that he couldn't face the Logic Leviathan alone. He would need the help of the other Code Wizards, the masters of their respective domains. So, he reached out to them, explaining the threat and asking for their help. They agreed, recognizing the danger the Logic Leviathan posed to Codeara.

Together, they devised a plan. They would confront the Logic Leviathan, using their combined powers to counter its destructive code. They would protect Codeara, using their skills to shield the world from the Leviathan's twisted logic. And they would defeat the Logic Leviathan, using their knowledge to debug its code and neutralize the threat.

As Ethan prepared for the ultimate challenge, he felt a sense of determination. He was ready to face the Logic Leviathan, ready to use his coding magic to protect Codeara. He was a coder wizard, a master of frontend, backend, database, and security magic. And he was ready for whatever came next.

The ultimate threat loomed over Codeara, casting a shadow of fear and uncertainty. But Ethan was not afraid. He was ready to face the Logic Leviathan, ready to protect Codeara. He was a coder wizard, and he was ready for the ultimate challenge.

Chapter 21: Network Alliance

With the ultimate threat looming over Codeara, Ethan knew that unity was their strongest weapon. He set out to gather the Code Wizards, those who, like him, had turned their coding skills into magical powers within this world. It was a formidable group, each a master in their domain, each a protector of Codeara.

There was Ajax, the Backend Wizard, whose server-side magic had once challenged Ethan and pushed him to expand his own skills. Sequel, the Database Wizard, who had guided Ethan through the intricacies of data manipulation and storage. And Cipher, the Security Wizard, who had recently trained Ethan in the art of cybersecurity.

Ethan called them together at the heart of Codeara, in the vast plaza of the Coders' Conclave. As they gathered, the air buzzed with anticipation and determination. They were Code Wizards, masters of their domains, and they were ready to face the ultimate threat.

Ethan led the meeting, outlining the threat of the Logic Leviathan. He explained its ability to rewrite the code of Codeara, imposing its own twisted logic. He shared his encounters with the Leviathan, his analysis of its destructive code, and his ideas for countering it.

The Code Wizards listened, their minds already working on strategies and solutions. Ajax suggested creating a robust server-side application to manage and distribute resources during the battle. Sequel proposed a complex database system to store and retrieve data efficiently. Cipher recommended implementing advanced security measures to protect their code and applications from the Leviathan's attacks.

Together, they devised a plan. They would confront the Logic Leviathan, using their combined powers to counter its destructive code. They would create a shield of stable code, a fortress of secure servers, and a vault of protected databases. They would use their coding magic to protect Codeara, to shield it from the Leviathan's twisted logic.
As they strategized, Ethan felt a sense of unity and determination. They were Code Wizards, masters of their domains, and they were united in their goal. They were ready to face the ultimate threat, ready to use their coding magic to protect Codeara.

The meeting ended with a sense of resolve. The Code Wizards dispersed, each returning to their domain to prepare for the upcoming battle. They would train, strategize, and when the time came, they would stand together against the Logic Leviathan.

Ethan watched them leave, a sense of pride swelling in his chest. He had brought them together, united them against the ultimate threat. He was not just a coder wizard; he was a leader, a unifier. And he was ready to lead them into battle, ready to use his coding magic to protect Codeara.

Chapter 22: Final Commit

The day of the final battle dawned with a sense of foreboding. The Logic Leviathan had begun its assault, its destructive code spreading through Codeara, causing glitches and bugs that threatened to destabilize the entire world. The Code Wizards stood at the forefront, ready to defend their world.

Ethan stood alongside Ajax, Sequel, and Cipher, their determination unwavering. They were Code Wizards, masters of their domains, and they were ready to face the Logic Leviathan. As the Leviathan launched its first attack, a wave of corrupt code, the Code Wizards sprang into action.
Ajax used his backend powers to create a robust server-side application that managed and distributed resources, countering the Leviathan's corrupt code. Sequel used her database skills to store and retrieve data efficiently, ensuring that Codeara's systems remained stable. Cipher implemented advanced security measures, protecting their code and applications from the Leviathan's attacks.

Ethan, drawing on his frontend, backend, and database skills, created a shield of stable code. He used JavaScript to create illusions, distracting the Leviathan and buying them some time. He also used his newly acquired security skills to protect their defenses, ensuring that the Leviathan could not break through.

The battle was intense, a clash of code and wills. The Logic Leviathan was a formidable enemy, its corrupt code constantly adapting and evolving. But the Code Wizards were equally determined, their combined powers countering every move the Leviathan made.

Finally, after a grueling battle, Ethan saw an opportunity. He noticed a pattern in the Leviathan's corrupt code, a vulnerability they could exploit. With a nod to the other Code Wizards, he launched his final attack.

Ethan wrote a piece of code that targeted the Leviathan's vulnerability, a debugging spell that would neutralize the corrupt code. As he ran the code, a wave of energy swept through Codeara. The Logic Leviathan let out a roar as its corrupt code was debugged, its form glitching and flickering before finally disappearing.

The Code Wizards had done it. They had faced the ultimate threat and emerged victorious. They had used their combined powers to save Codeara, to protect their world. As the threat of the Logic Leviathan faded, a sense of relief and celebration swept through Codeara.

The final battle was a testament to the power of unity and determination. The Code Wizards, each a master of their domain, had come together to face a common enemy. They had used their coding magic to protect Codeara, to ensure the stability and safety of their world.

As the celebrations began, Ethan looked around at his fellow Code Wizards, his friends. He felt a sense of pride and accomplishment. He was a coder wizard, a master of frontend, backend, database, and security magic. And he was ready for whatever came next, ready to continue his journey in Codeara.

Chapter 23: System Recovery

In the aftermath of the battle with the Logic Leviathan, Codeara was a world in recovery. The once vibrant landscapes of code were scarred with glitches and bugs, the remnants of the Leviathan's destructive code. But there was also a sense of relief and hope. The ultimate threat had been defeated, and Codeara was safe once again.

Ethan and the other Code Wizards were at the forefront of the recovery efforts. They worked tirelessly, using their coding magic to repair the damage, to debug the glitches, and to restore Codeara to its former glory.

Ethan used his frontend skills to rebuild the structures that had been damaged, creating new HTML tags and CSS properties. He used his backend skills to restore the systems that had been disrupted, ensuring that they functioned smoothly. He also used his database skills to recover the lost data, restoring the data streams that powered Codeara.

But it was his security skills that were most crucial. Ethan implemented new security measures, fortifying Codeara's defenses to protect against future threats. He encrypted sensitive data, created secure networks, and ensured that all code was secure and stable.

The recovery was a slow process, but with each passing day, Codeara regained a bit of its vibrancy. Structures were rebuilt, systems were restored, and data flowed smoothly once again. And through it all, Ethan was there, leading the efforts with a determination and dedication that inspired those around him.

Ethan's role in the battle and the recovery did not go unnoticed. The inhabitants of Codeara, from the Null-Elves to the Data Goblins, recognized his contributions. They saw his dedication, his skills, and his courage. And they saw him for what he truly was - a powerful and respected coder wizard.
Ethan was honored in a grand ceremony at the Coders' Conclave. He was awarded the title of Master Coder Wizard, a recognition of his mastery over multiple domains of coding magic. It was a proud moment for Ethan, a validation of his journey and his growth.

But even as he accepted the honor, Ethan knew that his journey was far from over. He was a Master Coder Wizard, but there was still so much more to learn, so many more skills to master. He was ready to continue his journey, to face new challenges, and to use his coding magic to protect Codeara.
In the aftermath of the battle, Ethan stood as a beacon of hope and resilience. He was a testament to the power of coding, a symbol of the magic that could be created with knowledge and determination. He was a coder wizard, a protector of Codeara, and he was ready for whatever came next.

Chapter 24: Git Push

As the recovery efforts in Codeara came to a close, Ethan once again found himself standing in front of the magical portal that connected Codeara and Codersville. He was returning home, but he was not the same person who had left. He was no longer just an average frontend developer; he was a Master Coder Wizard, a protector of Codeara.

Back in Codersville, Ethan returned to his job at the tech startup. But his experiences in Codeara had changed his perspective on his work. Coding was no longer just a job; it was a magical power, a tool to create, protect, and inspire. He approached his projects with a new sense of purpose and creativity, his solutions more innovative, his code more efficient and secure.

Ethan's colleagues noticed the change in him. He was more focused, more passionate, more innovative. He took on more complex tasks, led more projects, and even started mentoring junior developers. His skills and dedication did not go unnoticed, and he quickly rose through the ranks, becoming a respected figure in the company.

But even as he excelled in his work, Ethan never forgot about Codeara. He kept the magical portal active, ready to return whenever Codeara needed him. He continued to hone his coding skills, learning new technologies, and mastering new domains. He was a coder in Codersville, but he was also a coder wizard in Codeara, and he was ready to use his coding magic whenever and wherever it was needed.

Ethan's adventures in Codeara had changed his life. He had started as an average frontend developer, but he had grown into a powerful coder wizard. He had faced challenges, learned new skills, and used his coding magic to protect a world. He had seen the power of coding, the magic it could create, and the difference it could make.

In the end, Ethan's journey was about more than just coding. It was about growth, about stepping out of his comfort zone and embracing new challenges. It was about using his skills to make a difference, to protect a world. And most importantly, it was about finding his purpose, his passion, and his magic.

Ethan was a coder, a developer, a wizard. He was a master of frontend, backend, database, and security magic. He was a protector of Codeara, a hero in a world of code. And he was ready for whatever came next, ready to use his coding magic to face new challenges, to learn new skills, and to continue his journey as a coder wizard.

End.

What's Next?

I actually did not read the story cause I blindly trusted AI. I will create another one using better prompts and I will learn basic writing techniques to produce better quality story. Let's see how it goes.

Build a free link shortener with Next.js and Vercel Postgres

Carlo Gino Catapang — Mon, 21 Aug 2023 18:50:37 +0000

Create a link shortener with Next.js and Vercel Postgres. Learn dynamic routing, database connection, and domain customization.

TL;DR

Check the demo here

Check the source code here

Introduction

Link shorteners have become a go-to solution for sharing lengthy URLs, especially on platforms where character count matters. They're simple, efficient, and incredibly handy. In this blog post, we're diving into the creation of a simple and free link shortener using Next.js and Vercel Postgres.

Vercel Postgres is my new go-to solution for free Postgresql database hosting. It offers a generous free tier for small projects and is easy to set up.

Since Vercel hosting is also free, we can build and deploy our app without any cost.

Our demo will showcase the following features:

Automatic redirection to the target link when a slug is accessed
Track the number of visits for each link
Display the stats of the links from the database

Prerequisites

In addition to the requirements for creating a typical NextJS app, you'll also need a Vercel account. If you don't have one, you can register here.

Installation

The easiest way to follow this guide is to degit a Nextjs boilerplate.

npx degit codegino/nextjs-ts-tw-tldr next13-i18n

I will be using TailwindCSS and TypeScript due to personal preference, but you can use plain CSS and JavaScript if you want.

Install dependencies

npm i

Remove unused files

Delete everything under the app and components folders

rm -rf app/* components/*

Setting Up NextJS - Part 1

Making a Placeholder Route Resolver

In a link shortener app, a 'slug' is a unique name for each shortened link. This slug helps the app send users to the right URL when they click on the shortened link.

We'll use NextJS's dynamic routes to make a route for our unique slug. For now, we'll keep it basic and just make any slug redirect to one page.

// app/[slug]/route.ts
export const GET = () => {
  return NextResponse.redirect('https://google.com', 302);
};

After running the app with npm run dev, we can go to http://localhost:3000/xyz and it should redirect to Google's home page.

Initial Deployment

Deploying our app first will simplify the process. Vercel provides an easy way to connect an existing project to a database, which we'll create later.

Installing the Vercel CLI

Start by installing the Vercel CLI:

npm i -g vercel

Login to Vercel

Next, log into your Vercel account:

vercel login

Deploying the App

Finally, deploy the app:

vercel --prod

For more information on deploying with Vercel CLI, check out this guide

Setting Up the Database

Creating the Vercel Postgres Database

First, log into your Vercel account, navigate to the dashboard, and select the Storage tab. Then, click on the Create Database button.

A dialog box will appear. Choose the PostgreSQL option and click Continue.

You'll see another popup. If you agree with the terms, click Accept. Then, set your database name and click Create.

Creating the Links Table

Currently, Vercel PostgreSQL doesn't offer a built-in interface for various operations. So, we'll use the query runner for now.

CREATE TABLE links (
    id SERIAL PRIMARY KEY,
    alias VARCHAR(255) NOT NULL UNIQUE,
    target VARCHAR(2048) NOT NULL,
    visit_count INTEGER DEFAULT 0
);

The query above will create a table with the following columns:

id: A unique identifier for each link
alias: The slug that will be used to create the shortened link
target: The destination URL
visit_count: The number of times the link has been visited

We can add other tracking information like the source host, the user agent, etc. but for this demo, we'll keep it simple.

Adding a New Link Entry

To test our setup, let's add a new link entry using the following query:

INSERT INTO links (alias, target) 
VALUES ('nggyu', 'https://www.youtube.com/watch?v=dQw4w9WgXcQ');

We can browse the table using the Browse tab.

Setting Up NextJS - Part 2

Installing the Vercel Postgres Package

Start by installing the Vercel Postgres package:

npm i @vercel/postgres

Connecting the Project

Follow these steps to connect your Vercel project to the database:

Connect your Vercel project to the database
Pull the latest environment variables

Vercel simplifies the process of loading environment variables from the database. You can do this by running the following command:

vercel env pull .env.development.local

Install the Vercel Postgres package

npm install @vercel/postgres

Update the route handler

Next, replace the content of app/[slug]/route.ts with the provided code.

// app/[slug]/route.ts
import {NextResponse} from 'next/server';
import {sql} from '@vercel/postgres';

// Exporting an async GET function that takes the params object in the second argument
export const GET = async (_, {params}) => {

  // Making a SQL query to select a link from the links table where the alias matches the provided slug
  // The result is limited to 1 row
  const {rows} =
    await sql`SELECT * FROM links WHERE alias=${params.slug} LIMIT 1`;

  // If no rows are returned, return a response indicating the slug is not in the record
  if (rows.length === 0) {
    return new Response(`<h1>/${params.slug} is not in our record</h1>`, {
      status: 400,
      headers: {
        'content-type': 'text/html',
      },
    });
  }

  // If a row is returned, increment the visit_count for the link with the provided slug
  if (rows[0]) {
    await sql`UPDATE links SET visit_count = visit_count + 1 WHERE alias = ${params.slug}`;
  }

  // Redirect to the target of the first row (the selected link)
  return NextResponse.redirect(rows[0].target, 302);
};

Once the app is running, visiting http://localhost:3000/nggyu should redirect us to the target link.

We're seeing a 404 page because we haven't created a home/index page yet.

Setting Up a Default Page (Optional)

In cases where no slug is provided, the app will attempt to resolve the root route, which isn't defined. However, you're free to customize this behavior as needed. For this demo, I'll set up the root route to display basic statistics for all the links in the database.

Create the layout component

// app/layout.ts
import '../styles/tailwind.css';

export const metadata = {
  title: 'Next Link Shortener',
  description: 'Generated by Next.js',
};

export default function RootLayout({children}: {children: React.ReactNode}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Create the home page

This page will display the stats of all the links in the database in a table format.

// app/page.ts
import React from 'react';
import {sql} from '@vercel/postgres';

const Page = async () => {
  const links = await getData();

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center pt-8">
      <h1 className="text-2xl font-bold mb-5 text-gray-900">Links stats</h1>
      <div className="flex flex-col items-center overflow-hidden">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left font-medium">Alias</th>
              <th className="px-6 py-3 text-left font-medium">Target</th>
              <th className="px-6 py-3 text-left font-medium">Visit Count</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {links.map((link, index) => (
              <tr key={index}>
                <td className="px-6 py-4 whitespace-nowrap">{link.alias}</td>
                <td className="px-6 py-4 whitespace-nowrap">{link.target}</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  {link.visit_count}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const getData = async () => {
  const {rows} = await sql`SELECT * FROM links`;

  return rows;
};

export default Page;

Upon running the app, each visit to the alias should increase the visit count.

Customizing the Domain

Without customizing our domain, we might end up with a longer link, which defeats the purpose of a link shortener. For instance, the default domain provided by Vercel for this demo is https://demo-nextjs-link-shortener.vercel.app/nggyu.

With Vercel

Vercel allows us to modify our domain. Here's the process:

Navigate to the Settings tab
Select Domains
Choose the domain you wish to modify
Hit Edit
Enter the subdomain you wish to use and click Save

With a DNS Provider

The previous option is great, but there is Vercel branding in the domain. If you want to remove it, you can use your own domain.

Remember, this isn't free as you'll need to purchase a domain. I got mine from NameCheap

To set it up:

If you're using NameCheap, go to the Advanced DNS tab on the Dashboard. > If you are using a different provider, you can google how to add a CNAME Record in <your provider>.
Create a new record
To direct all traffic to Vercel, I added an A Record with Host @ and Value 76.76.21.21
Next, I added a CNAME Record with Host links and Value cname.vercel-dns.com

To add the custom domain in Vercel:

Go to the Settings tab
Click on Domains
Enter the domain you wish to add in the text field
Click on Add

It may ask if you want to redirect your existing traffic to the new domain which I recommend doing.

Once set, you should have a fully functional link shortener app that's ready to be shared with the world.

Conclusion

In conclusion, we've explored how to build a link shortener using Next.js and Vercel Postgres, set up dynamic routes, connect to a database, and track link visits. We also delved into customizing the domain with Vercel and a DNS provider, demonstrating the flexibility of our setup. Remember, while this demo is basic, it opens the door to endless possibilities for expansion. Happy coding!

Build a multilingual NextJS app using the new app directory

Carlo Gino Catapang — Wed, 09 Aug 2023 12:05:30 +0000

Learn how to build a multilingual NextJS app using the new app directory and i18next library

TL;DR

Check the demo here

Check the source code here

Introduction

Internationalization, or i18n for short, is the process of designing and developing software applications that can be adapted to different languages and cultures. It is an important consideration for any application that is intended for a global audience. Next.js is a popular framework for building web applications that simplifies the process of implementing i18n. In this article, we will explore how to handle i18n in Next.js using the app directory and the i18next library. We will also cover some of the key translation functions and techniques that you can use to make your application more accessible to users around the world.

With the introduction of app directory, my previous i18n blog is not applicable anymore since next-i18next is not necessary.

Installation

The easiest way to follow this guide is to degit a Nextjs boilerplate.

npx degit codegino/nextjs-ts-tw-tldr next13-i18n

I will be using TailwindCSS and TypeScript due to personal preference, but you can use plain CSS and JavaScript if you want.

Remove unused files

Delete everything under the app and components folders

rm -rf app/* components/*

Project Structure

Our i18n strategy

In this blog post, we will use a path-based strategy to determine the locale of our web application. Implementing this strategy in Next.js is easy because the framework follows a convention for creating paths. We will create a [locale] folder and place all our pages inside it. This means our folder structure should look like this:

app 
└── [locale]
    ├── page.tsx    
    └── about 
        └── page.tsx

Since we're utilizing a path-based i18n approach, we can effortlessly obtain the locale from the params object that our page will receive.

Create our home page to display the locale

// app/[locale]/page.tsx
const IndexPage = ({params: {locale}}) => (
  <div>
    <h1>Hello world: {locale}</h1>
  </div>
);

export default IndexPage;

Create another page to test navigation

// app/[locale]/about/page.tsx
const AboutPage = ({params: {locale}}) => (
  <div>
    <h1>About page: {locale}</h1>
  </div>
);

export default AboutPage;

NextJS has a feature that automatically creates a layout component if we don't provide one. However, I prefer to create my own layout component because I need to basic customization.

// app/layout.tsx
import '../styles/tailwind.css';

export const metadata = {
  title: 'Next.js i18n',
};

export default function RootLayout({children}) {
  return (
    <html lang="en">
      <body className="p-3">{children}</body>
    </html>
  );
}

Testing our pages

We'll get a 404 page if we try to access the root URL because every page is now under the [locale] folder. We'll handle this later.

To see our page, we need to add the "locale" of our choice to the URL. For example, if we want to see the English version of our page, we need to add /en to the URL.

Locale switcher and navigation links

To simplify our demo, we'll create a component that will handle the locale switcher and navigation links.

Implement a new layout component to manage the organization of page content

We can put everything in the root layout if you prefer.

// app/[locale]/layout.tsx
import React from 'react';
import Header from '../../components/Header';

const Layout = ({children}) => {
  return (
    <>
      <Header />
      {children}
    </>
  );
};

export default Layout;

Create the Header component

This component will include the reusable navigation and locale switcher component

// app/components/Header.tsx
'use client';

import {usePathname, useParams} from 'next/navigation';
import Link from 'next/link';
import ChangeLocale from './ChangeLocale';

const Header = () => {
  const pathName = usePathname();
  const locale = useParams()?.locale;

  return (
    <header>
      <nav className="flex gap-2 mb-2">
        <Link
          href={`/${locale}`}
          className={pathName === `/${locale}` ? 'text-blue-700' : ''}
        >
          Home
        </Link>
        <Link
          href={`/${locale}/about`}
          className={pathName === `/${locale}/about` ? 'text-blue-700' : ''}
        >
          About
        </Link>
      </nav>
      <ChangeLocale />
    </header>
  );
};

export default Header;

Create the locale switcher component

// app/components/ChangeLocale.tsx
'use client';

import React from 'react';
import {useRouter, useParams, useSelectedLayoutSegments} from 'next/navigation';

const ChangeLocale = () => {
  const router = useRouter();
  const params = useParams();
  const urlSegments = useSelectedLayoutSegments();

  const handleLocaleChange = event => {
    const newLocale = event.target.value;

    // This is used by the Header component which is used in `app/[locale]/layout.tsx` file,
    // urlSegments will contain the segments after the locale.
    // We replace the URL with the new locale and the rest of the segments.
    router.push(`/${newLocale}/${urlSegments.join('/')}`);
  };

  return (
    <div>
      <select onChange={handleLocaleChange} value={params.locale}>
        <option value="en">🇺🇸 English</option>
        <option value="zh-CN">🇨🇳 中文</option>
        <option value="sv">🇸🇪 Swedish</option>
      </select>
    </div>
  );
};

export default ChangeLocale;

Now it's easier to test around what language and page we want to see.

Actual translation

We're done with the project setup. It's time to actually do some internationalization

Create translation files

Here is what our translation files' structure will look like.

i18n
└── locales
    ├── en
    │   ├── about.json
    │   └── home.json
    ├── zh-CN
    │   ├── about.json
    │   └── home.json                
    └── sv
        ├── about.json
        └── home.json

NOTE: It does not matter where you put the translation files as long as you can import them correctly.

English translations

// i18n/locales/en/home.json

{
  "greeting": "Hello world!"
}

i18n/locales/en/about.json

{
  "aboutThisPage": "This is the About page"
}

Chinese translations

// i18n/locales/zh-CN/home.json

{
  "greeting": "世界您好"
}

// i18n/locales/zh-CN/about.json

{
  "aboutThisPage": "这是关于页面"
}

Swedish translation

// i18n/locales/sv/home.json

{
  "greeting": "Hej världen!"
}

// i18n/locales/sv/about.json

{
  "aboutThisPage": "Det här är sidan Om"
}

Install required dependencies

There are various libraries available for handling translations, but I find libraries from i18next very easy to use.

npm install i18next react-i18next i18next-resources-to-backend

i18next-resources-to-backend is a very small utility, so you can just copy the implementation if you don't want an additional dependency.

Create a reusable settings file

Let's create a utility file for both the server and the client-side translations

// i18n/settings.ts
import type {InitOptions} from 'i18next';

export const fallbackLng = 'en';
export const locales = [fallbackLng, 'zh-CN', 'sv'] as const;
export type LocaleTypes = (typeof locales)[number];
export const defaultNS = 'common';

export function getOptions(lang = fallbackLng, ns = defaultNS): InitOptions {
  return {
    // debug: true, // Set to true to see console logs
    supportedLngs: locales,
    fallbackLng,
    lng: lang,
    fallbackNS: defaultNS,
    defaultNS,
    ns,
  };
}

To learn more about the options, check out the i18next documentation.

Server Components translation

Create a utility for translations happening in the server/backend

// i18n/server.ts
import {createInstance} from 'i18next';
import resourcesToBackend from 'i18next-resources-to-backend';
import {initReactI18next} from 'react-i18next/initReactI18next';
import {getOptions, LocaleTypes} from './settings';

// Initialize the i18n instance
const initI18next = async (lang: LocaleTypes, ns: string) => {
  const i18nInstance = createInstance();
  await i18nInstance
    .use(initReactI18next)
    .use(
      resourcesToBackend(
        (language: string, namespace: typeof ns) =>
          // load the translation file depending on the language and namespace
          import(`./locales/${language}/${namespace}.json`),
      ),
    )
    .init(getOptions(lang, ns));

  return i18nInstance;
};

// It will accept the locale and namespace for i18next to know what file to load
export async function createTranslation(lang: LocaleTypes, ns: string) {
  const i18nextInstance = await initI18next(lang, ns);

  return {
    // This is the translation function we'll use in our components
    // e.g. t('greeting')
    t: i18nextInstance.getFixedT(lang, Array.isArray(ns) ? ns[0] : ns),
  };
}

Translate the Home page

// app/[locale]/page.tsx
import {createTranslation} from '../../i18n/server';

// This should be async cause we need to use `await` for createTranslation
const IndexPage = async ({params: {locale}}) => {
  // Make sure to use the correct namespace here.
  const {t} = await createTranslation(locale, 'home');

  return (
    <div>
      <h1>{t('greeting')}</h1>
    </div>
  );
};

export default IndexPage;

Translate the About page

// app/[locale]/about/page.tsx
import {createTranslation} from '../../../i18n/server';

// This should be async cause we need to use `await` for createTranslation
const AboutPage = async ({params: {locale}}) => {
  // Make sure to use the correct namespace here.
  const {t} = await createTranslation(locale, 'about');

  return (
    <div>
      <h1>{t('aboutThisPage')}</h1>
    </div>
  );
};

export default AboutPage;

With the codes above, we can now see the content translated.

Client-side translation

One issue in the previous example is that the links in the header do not update accordingly to the selected language.

Create a reusable hook to use for translations

Install i18next-browser-languagedetector to simplify language detection in the frontend

npm install i18next-browser-languagedetector

The code below might be lengthy because we need to support both server rendering and client rendering. Don't confuse SSR with Server Component rendering.

// i18n/client.ts
'use client';

import {useEffect, useState} from 'react';
import i18next, {i18n} from 'i18next';
import {initReactI18next, useTranslation as useTransAlias} from 'react-i18next';
import resourcesToBackend from 'i18next-resources-to-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import {type LocaleTypes, getOptions, locales} from './settings';

const runsOnServerSide = typeof window === 'undefined';

// Initialize i18next for the client side
i18next
  .use(initReactI18next)
  .use(LanguageDetector)
  .use(
    resourcesToBackend(
      (language: LocaleTypes, namespace: string) =>
        import(`./locales/${language}/${namespace}.json`),
    ),
  )
  .init({
    ...getOptions(),
    lng: undefined, // detect the language on the client
    detection: {
      order: ['path', 'htmlTag'],
    },
    preload: runsOnServerSide ? locales : [],
  });

export function useTranslation(lng: LocaleTypes, ns: string) {
  const translator = useTransAlias(ns);
  const {i18n} = translator;

  // Run when content is rendered on server side
  if (runsOnServerSide && lng && i18n.resolvedLanguage !== lng) {
    i18n.changeLanguage(lng);
  } else {
    // Use our custom implementation when running on client side
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useCustomTranslationImplem(i18n, lng);
  }
  return translator;
}

function useCustomTranslationImplem(i18n: i18n, lng: LocaleTypes) {
  const [activeLng, setActiveLng] = useState(i18n.resolvedLanguage);

  // This effect updates the active language state variable when the resolved language changes,
  useEffect(() => {
    if (activeLng === i18n.resolvedLanguage) return;
    setActiveLng(i18n.resolvedLanguage);
  }, [activeLng, i18n.resolvedLanguage]);

  // This effect changes the language of the application when the lng prop changes.
  useEffect(() => {
    if (!lng || i18n.resolvedLanguage === lng) return;
    i18n.changeLanguage(lng);
  }, [lng, i18n]);
}

Create the translations for the navigation links

We'll put the translations in the common namespace as they are shared common pages.

// i18n/locales/en/common.json

{
  "home": "Home",
  "about": "About"
}

// i18n/locales/zh-CN/common.json

{
  "home": "主页",
  "about": "关于页面"
}

// i18n/locales/sv/common.json

{
  "home": "Hem",
  "about": "Om"
}

Translate the Header component

// components/Header.tsx
'use client';
import {usePathname, useParams} from 'next/navigation';
import Link from 'next/link';
import ChangeLocale from './ChangeLocale';
import {useTranslation} from '../i18n/client';
import type {LocaleTypes} from '../i18n/settings';

const Header = () => {
  const pathName = usePathname();
  const locale = useParams()?.locale as LocaleTypes;
  const {t} = useTranslation(locale, 'common');

  return (
    <header>
      <nav className="flex gap-2 mb-2">
        <Link
          href={`/${locale}`}
          className={pathName === `/${locale}` ? 'text-blue-700' : ''}
        >
          {t('home')}
        </Link>
        <Link
          href={`/${locale}/about`}
          className={pathName === `/${locale}/about` ? 'text-blue-700' : ''}
        >
          {t('about')}
        </Link>
      </nav>
      <ChangeLocale />
    </header>
  );
};

export default Header;

Now the links will update accordingly to the selected language

Handle default locale

This may vary based on the user's requirements, but I prefer not to include the default locale in the URL. I want localhost:3000 to be equivalent to localhost:3000/en, and when I visit localhost:3000/en, I want the /en in the URL to be automatically removed.

To achieve this, we need to do some URL rewriting and redirecting.

// middleware.ts
import {NextResponse, NextRequest} from 'next/server';
import {fallbackLng, locales} from './i18n/settings';

export function middleware(request: NextRequest) {
  // Check if there is any supported locale in the pathname
  const pathname = request.nextUrl.pathname;

  // Check if the default locale is in the pathname
  if (
    pathname.startsWith(`/${fallbackLng}/`) ||
    pathname === `/${fallbackLng}`
  ) {
    // e.g. incoming request is /en/about
    // The new URL is now /about
    return NextResponse.redirect(
      new URL(
        pathname.replace(
          `/${fallbackLng}`,
          pathname === `/${fallbackLng}` ? '/' : '',
        ),
        request.url,
      ),
    );
  }

  const pathnameIsMissingLocale = locales.every(
    locale => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`,
  );

  if (pathnameIsMissingLocale) {
    // We are on the default locale
    // Rewrite so Next.js understands

    // e.g. incoming request is /about
    // Tell Next.js it should pretend it's /en/about
    return NextResponse.rewrite(
      new URL(`/${fallbackLng}${pathname}`, request.url),
    );
  }
}

export const config = {
  // Do not run the middleware on the following paths
  matcher:
    '/((?!api|_next/static|_next/image|manifest.json|assets|favicon.ico).*)',
};

NextJS is truly magical in making things just work

Bonus

Nested translation keys and default translation

We are not limited to a flat JSON structure.

// i18n/locales/en/newsletter.json

{
  "title": "Stay up to date",
  "subtitle": "Subscribe to my newsletter",
  "form": {
    "firstName": "First name",
    "email": "E-mail",
    "action": {
      "signUp": "Sign Up",
      "cancel": "Cancel"
    }
  }
}

We can omit some translation keys if we want it to use the default locale value(en in our case).

// i18n/locales/zh-CN/newsletter.json

{
  "title": "保持最新状态",
  "form": {
    "email": "电子邮箱",
    "action": {
      "cancel": "取消"
    }
  }
}

// i18n/locales/sv/newsletter.json

{
  "title": "Håll dig uppdaterad",
  "subtitle": "Prenumerera på mitt nyhetsbrev",
  "form": {
    "firstName": "Förnamn",
    "email": "E-post",
    "action": {
      "signUp": "Registrera sig",
      "cancel": "Annullera"
    }
  }
}

Create the component

Let's create a component that uses the translations above. We'll make this a server component to demonstrate one way of passing the locale.

// components/SubscribeForm.tsx
import React from 'react';
import {createTranslation} from '../i18n/server';

// pass the locale as a prop
const SubscribeForm = async ({locale}) => {
  const {t} = await createTranslation(locale, 'newsletter');

  return (
    <section className="w-[350px]">
      <h3>{t('title')}</h3>
      <h4>{t('subtitle')}</h4>

      <form className="flex flex-col items-start">
        <input placeholder={t('form.firstName')} className="form-field" />
        <input placeholder={t('form.email')} className="form-field" />
        <button className="form-field">{t('form.action.signUp')}</button>
        <button className="form-field">{t('form.action.cancel')}</button>
      </form>
    </section>
  );
};

export default SubscribeForm;

(OPTIONAL) Add styles to form fields

// styles/tailwind.css
// ...

.form-field {
  @apply border mb-1 p-1 w-full;
}

Render the form on the home page

// app/[locale]/page.tsx
import SubscribeForm from '../../components/SubscribeForm';
import {createTranslation} from '../../i18n/server';

const IndexPage = async ({params: {locale}}) => {
  // Make sure to use the correct namespace here.
  const {t} = await createTranslation(locale, 'home');

  return (
    <div>
      <h1>{t('greeting')}</h1>
      <hr className="my-4" />
      <SubscribeForm locale={locale} />
    </div>
  );
};

export default IndexPage;

And now, we have this!

Built-in Formatting

It is very easy to format most of our data since i18next comes with a lot of utilities we can use.

Let's use the translation files below to showcase the formatting features.

// i18n/en/built-in-demo.json

{
  "number": "Number: {{val, number}}",
  "currency": "Currency: {{val, currency}}",
  "dateTime": "Date/Time: {{val, datetime}}",
  "relativeTime": "Relative Time: {{val, relativetime}}",
  "list": "List: {{val, list}}",
  "weekdays": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
}

// i18n/zh-CN/built-in-demo.json

{
  "number": "数: {{val, number}}",
  "currency": "货币: {{val, currency}}",
  "dateTime": "日期/时间: {{val, datetime}}",
  "relativeTime": "相对时间: {{val, relativetime}}",
  "list": "列表: {{val, list}}",
  "weekdays": ["星期一", "星期二", "星期三", "星期四", "星期五"]
}

// i18n/sv/built-in-demo.json

{
  "number": "Nummer: {{val, number}}",
  "currency": "Valuta: {{val, currency}}",
  "dateTime": "Datum/tid: {{val, datetime}}",
  "relativeTime": "Relativ tid: {{val, relativetime}}",
  "list": "Lista: {{val, list}}",
  "weekdays": ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag"]
}

Create the component

Let's create a component that will use the previous translations. We'll make it a client component just for fun.

// app/components/BuiltInFormatsDemo.tsx
'use client';
import React from 'react';
import {useTranslation} from '../i18n/client';
import type {LocaleTypes} from '../i18n/settings';
import {useParams} from 'next/navigation';

const BuiltInFormatsDemo = () => {
  let locale = useParams()?.locale as LocaleTypes;

  const {t} = useTranslation(locale, 'built-in-demo');

  return (
    <div>
      <p>
        {/* "number": "Number: {{val, number}}", */}
        {t('number', {
          val: 123456789.0123,
        })}
      </p>
      <p>
        {/* "currency": "Currency: {{val, currency}}", */}
        {t('currency', {
          val: 123456789.0123,
          style: 'currency',
          currency: 'USD',
        })}
      </p>

      <p>
        {/* "dateTime": "Date/Time: {{val, datetime}}", */}
        {t('dateTime', {
          val: new Date(1234567890123),
          formatParams: {
            val: {
              weekday: 'long',
              year: 'numeric',
              month: 'long',
              day: 'numeric',
            },
          },
        })}
      </p>

      <p>
        {/* "relativeTime": "Relative Time: {{val, relativetime}}", */}
        {t('relativeTime', {
          val: 12,
          style: 'long',
        })}
      </p>

      <p>
        {/* "list": "List: {{val, list}}", */}
        {t('list', {
          // https://www.i18next.com/translation-function/objects-and-arrays#objects
          // Check the link for more details on `returnObjects`
          val: t('weekdays', {returnObjects: true}),
        })}
      </p>
    </div>
  );
};

export default BuiltInFormatsDemo;

Don't forget to render the component on the home page.

// app/[locale]/page.tsx
import BuiltInFormatsDemo from '../../components/BuiltInFormatsDemo';
import {createTranslation} from '../../i18n/server';

const IndexPage = async ({params: {locale}}) => {
  // Make sure to use the correct namespace here.
  const {t} = await createTranslation(locale, 'home');

  return (
    <div>
      <h1>{t('greeting')}</h1>
      <hr className="my-4" />
      <BuiltInFormatsDemo />
    </div>
  );
};

export default IndexPage;

The more you look, the more you'll be amazed

Other translation functions to check

Conclusion

Internationalization is a complex requirement simplified in Nextjs due to the way applications are built using the framework. With the introduction of app directory, we need a different approach to handle i18n. Because of i18next it makes the task even simpler.

Build a simple AI-powered Q&A using Next.js and OpenAI Text Completion

Carlo Gino Catapang — Fri, 31 Mar 2023 07:15:37 +0000

TL;DR

Check these API implementation and frontend implementation on Github.

Introduction

OpenAI is a powerful artificial intelligence platform that allows developers to create intelligent applications. Next.js is a popular React framework that provides server-side rendering and other advanced features. In this blog, I will create a simple Q&A app using OpenAI and Next.js.

OpenAI's text completion API uses AI to generate human-like text based on a given prompt, making it a powerful tool for tasks like generating creative writing, building chatbots, and creating language models. Its advanced language processing and vast data resources enable it to produce text that closely resembles human writing, making it a valuable resource for businesses and developers.

Prerequisites

Before you begin, you should have a basic understanding of React and Next.js. You should also have an OpenAI API key. If you don't have an OpenAI API key, you can sign up for a free account on their website.

I will only be using TypeScript and TailwindCSS for this project, but you can use JavaScript and any CSS framework you prefer.

Project Setup

Initialize a NextJS project

You can create a project as suggested in the NextJS official documentation.

npx create-next-app@latest
# or
yarn create next-app

But if you are like me that prefer to have TypeScript and Tailwind, you can clone this boilerplate instead.

npx degit codegino/nextjs-tailwind-slim-boilerplate

Create the Backend API

Create a reusable OpenAI client

// src/libs/openai.ts
import {Configuration, OpenAIApi} from 'openai';
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

export const openai = new OpenAIApi(configuration);

Never commit your API key to your repository. You can .env out of the box to store your API key.

Create a NextJS API handler

We only need the API to handle POST requests, so we can return an error if the request method is not POST.

We can use the OpenAI client to create a completion using the createCompletion method. We can set the prompt to the question, and the model to text-davinci-003. The temperature and max_tokens can be adjusted to get different results. We can set the n to 1 to only get one result(also to save some money).

// src/pages/api/completion.ts
import {NextApiRequest, NextApiResponse} from 'next';
import {openai} from '../../libs/openai';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const {prompt} = req.body;

  if (req.method !== 'POST') {
    return res.status(400).json({error: 'Invalid request'});
  }

  const response = await openai.createCompletion({
    prompt,
    model: 'text-davinci-003',
    temperature: 0.6,
    max_tokens: 100,
    n: 1,
  });

  return res.status(200).json({
    data: response.data
  });
}

Run the application using yarn dev. Test the newly created endpoint using curl, Postman, Hoppscotch, or whatever you prefer.

We should see the response data from OpenAI.

Update the API response

Since we don't need the entire response from OpenAI, we can simplify the response to only return the data we need. Because we set the number of results to only one using n: 1, we can simplify the response to only extract the first choice.

Also, we can remove the new lines from the beginning of the response using the replace method.

// src/pages/api/completion.ts
import {NextApiRequest, NextApiResponse} from 'next';
import {openai} from '../../libs/openai';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const {prompt} = req.body;

  if (req.method !== 'POST') {
    return res.status(400).json({error: 'Invalid request'});
  }

  const response = await openai.createCompletion({
    prompt,
    model: 'text-davinci-003',
    temperature: 0.6,
    max_tokens: 100,
    n: 1,
  });

-  return res.status(200).json({
-    data: response.data
-  });

+  const firstResponse = response.data.choices[0];

+  return res.status(200).json({
+    data: {
+      ...firstResponse,
+      text: firstResponse.text.replace(/^\n+/, ''),
+    },
+  });
}

The response should be simpler for the Frontend to process

Create the Question Form

Create variables to store the question and the answer

// src/pages/index.tsx
const [prompt, setPrompt] = useState('');
const [response, setResponse] = useState('');

Create a function handler when the user clicks the button

// src/pages/index.tsx
const handleSubmit = async e => {
  e.preventDefault();

  const res = await fetch('/api/completion', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({prompt: prompt.trim()}),
  }).then(res => res.json());

  setResponse(res.data.text);

Create the form with an input and a submit button

// src/pages/index.tsx
return (
  <div className="max-w-md mx-auto pt-20">
    <h1 className="text-3xl font-bold text-center mb-6 bg-white">Ask Me Anything!</h1>
    <form onSubmit={handleSubmit} className="bg-white shadow-md rounded p-8">
      <div className="mb-4">
        <label htmlFor="prompt" className="block text-gray-700 text-sm font-bold mb-2">
          What do you want to know?
        </label>
        <input id="prompt" type="text" name="prompt" value={prompt} autoComplete="off"
          onChange={e => setPrompt(e.target.value)} placeholder="How to ask a question?"
          className="shadow border rounded w-full py-2 px-3 text-gray-700"
        />
      </div>
      <div className="flex gap-2">
        <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
          Ask
        </button>
      </div>
    </form>
  </div>
);

Render the response if it exists

// src/pages/index.tsx
return (
  <div className="max-w-md mx-auto pt-20">
    <h1 className="text-3xl font-bold text-center mb-6 bg-white">Ask Me Anything!</h1>
    <form onSubmit={handleSubmit} className="bg-white shadow-md rounded p-8">
      <div className="mb-4">
        <label htmlFor="prompt" className="block text-gray-700 text-sm font-bold mb-2">
          What do you want to know?
        </label>
        <input id="prompt" type="text" name="prompt" value={prompt} autoComplete="off"
          onChange={e => setPrompt(e.target.value)} placeholder="How to ask a question?"
          className="shadow border rounded w-full py-2 px-3 text-gray-700"
        />
      </div>
+      {response && (
+        <div className="mb-4">
+          <h2 className="font-bold">Response</h2>
+          <p className="pl-2 text-gray-700 whitespace-pre-line">{response}</p>
+        </div>
+      )}
      <div className="flex gap-2">
        <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
          Ask
        </button>
      </div>
    </form>
  </div>
);

(OPTIONAL) Add global style to the page

// src/styles/tailwind
body {
  background-image: radial-gradient(blue 0.1px, transparent 0.5px);
  background-size: 10px 10px;
}

The whole component should look like this

// src/pages/index.tsx
import {useState} from 'react';

const IndexPage = () => {
  const [prompt, setPrompt] = useState('');
  const [response, setResponse] = useState('');

  const handleSubmit = async e => {
    e.preventDefault();

    const res = await fetch('/api/completion', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({prompt: prompt.trim()}),
    }).then(res => res.json());

    setResponse(res.data.text);
  };

  return (
    <div className="max-w-md mx-auto pt-20">
      <h1 className="text-3xl font-bold text-center mb-6 bg-white">Ask Me Anything!</h1>
      <form onSubmit={handleSubmit} className="bg-white shadow-md rounded p-8">
        <div className="mb-4">
          <label htmlFor="prompt" className="block text-gray-700 text-sm font-bold mb-2">
            What do you want to know?
          </label>
          <input id="prompt" type="text" name="prompt" value={prompt} autoComplete="off"
            onChange={e => setPrompt(e.target.value)} placeholder="How to ask a question?"
            className="shadow border rounded w-full py-2 px-3 text-gray-700"
          />
        </div>
        {response && (
          <div className="mb-4">
            <h2 className="font-bold">Response</h2>
            <p className="pl-2 text-gray-700 whitespace-pre-line">{response}</p>
          </div>
        )}
        <div className="flex gap-2">
          <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
            Ask
          </button>
        </div>
      </form>
    </div>
  );
};

export default IndexPage;

Here is how the markup looks like:

And here is the output when the user submits the form:

Tip: You can use the tailwind whitespace-pre-line OR vanilla CSS white-space: pre-line; style to preserve the new lines in the response.

Improve the UX a little bit

We can add a loading state to the button and disable the input field while the request is being processed. Also, instead of spamming the Ask button, we can add a Try Again button to reset the form. That way we can save some of our precious OpenAI credits.

// src/pages/index.tsx
import {useState} from 'react';

const IndexPage = () => {
  const [response, setResponse] = useState('');
  const [prompt, setPrompt] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async e => {
    e.preventDefault();

    setLoading(true);
    setResponse('');

    const res = await fetch('/api/completion', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({prompt: prompt.trim()}),
    }).then(res => res.json());

    setResponse(res.data.text);
    setLoading(false);
  };

  const handleTryAgain = () => {
    setResponse('');
    setPrompt('');
  };

  return (
    <div className="max-w-md mx-auto pt-20">
      <h1 className="text-3xl font-bold text-center mb-6 bg-white">
        Ask Me Anything!
      </h1>
      <form onSubmit={handleSubmit} className="bg-white shadow-md rounded p-8">
        <div className="mb-4">
          <label
            className="block text-gray-700 text-sm font-bold mb-2"
            htmlFor="prompt"
          >
            What do you want to know?
          </label>
          <input id="prompt" type="text" name="prompt" value={prompt}
            onChange={e => setPrompt(e.target.value)} placeholder="How to ask a question?"
            autoComplete="off" disabled={!!response || loading}
            className="shadow border rounded w-full py-2 px-3 text-gray-700"
          />
        </div>
        {response && (
          <div className="mb-4">
            <h2 className="font-bold">Response</h2>
            <p className="pl-2 text-gray-700 whitespace-pre-line">{response}</p>
          </div>
        )}
        <div className="flex gap-2">
          {response ? (
            <button
              onClick={handleTryAgain}
              className="bg-blue-500 text-white font-bold py-2 px-4 rounded"
            >
              Try again
            </button>
          ) : (
            <button
              type="submit"
              disabled={!!loading || prompt.length < 5}
              className="bg-blue-500 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
            >
              {loading ? 'Thinking...' : 'Ask'}
            </button>
          )}
        </div>
      </form>
    </div>
  );
};

export default IndexPage;

And here is a slightly better experience:

Source Code

The source code for this project is available on GitHub

Conclusion

In this blog post, I demonstrated how simple it is to use OpenAI text completion with Next.js. We have seen how to create an API route in Next.js, how to make an API request to the OpenAI API using the openai library, and create a client-side form to accept prompts and display the response from the API. And those three steps are all we need to create a more awesome app.

What's Next

Image generation with OpenAI
Save the responses to a database

I asked ChatGPT to generate a song about centering a div

Carlo Gino Catapang — Wed, 15 Mar 2023 09:07:28 +0000

[Verse 1]
I'm a Frontend dev, with my code so tight
I'm gonna center this div and make it look just right
No matter the browser, no matter the view
I'll make sure it's centered for both me and you  

[Chorus]
Centering divs, it's my bread and butter
Centering divs, making everything smoother
With Margin auto and Text align in sight
I'll keep on coding until the design is just right

[Verse 2]
I'm a Frontend dev, with skills that run deep
I'll squash those bugs and make the layout so neat
With my CSS skills, I'm not afraid to take a chance
And keep coding until the site is a visual dance

[Chorus]
Centering divs, it's my daily routine
Centering divs, making the website gleam
With Flexbox, Margin auto and Text align
I'll keep on coding until the design is divine

[Bridge]
Whether it's a website, an app, or a game
I'll make sure it looks good and always the same
Centered, aligned, and with style in tow
My CSS skills will make it shine and glow

[Chorus]
Centering divs, it's the name of the game
Centering divs, always making it look the same
With Flexbox, Margin auto, and Text align
I'll code until the design is simply divine.

Synchronize Chrome Extensions state using custom events

Carlo Gino Catapang — Mon, 06 Mar 2023 13:32:19 +0000

How to use custom events to sync state between Chrome Extension instances

Introduction

This is a continuation of the previous article about creating a Chrome Extension using Svelte and Tailwind.

The problem

When an action is performed in one instance of the plugin, the data is not synced automatically. For example, if the user updates the count in one tab, the other tabs' content does not automatically react to changes.

Project setup

Clone the repo from the previous blog

The easiest way is to use degit.

npx degit codegino/svelte-tailwind-chrome-plugin#02-options my-target-folder

Install dependencies and run the applicaiton

cd my-target-folder
npm install
npm run dev

Handling Event Communication

This article will focus on using custom events to allow plugin communication. Check the api documentation to learn more about handling other events.

To create our custom events, we can use the chrome.runtime API. The runtime API provides a way to send messages between different parts of the extension.

Here are the steps that we can follow when creating custom events:

Trigger an event (REQUIRED)
Add event listener (REQUIRED)
Handle the response from listeners
Handle connection error
Handle disconnection

1. Trigger an event

This step includes two changes. First, we need to change the function declaration to an async/await syntax so it will be easier to read later on. Second, we need to dispatch a message with some payload.

The payload could be anything. In this example, I added a type property to the payload to identify the event in the event listener.

// src/components/Counter.svelte
<script lang="ts">
  export let count: number;
  let message: string = null;

  const increment = () => (count += 1);
  const decrement = () => (count -= 1);


-  const handleSave = () => {
-    chrome.storage.sync.set({ count }).then(() => {
-      message = "Updated!";
-
-      setTimeout(() => {
-        message = null;
-      }, 2000);
-    });
-  };
+  const handleSave = async () => {
+    await chrome.storage.sync.set({ count });
+    message = "Updated!";
+
+    // This is the only different behavior
+    await chrome.runtime.sendMessage({count, type: "count_updated"});
+
+    setTimeout(() => {
+      message = null;
+    }, 2000);
+  };
</script>

2. Add an event listener

Since we are using Svelte, we can use the onMount hook to add the listener.

// src/components/Counter.svelte
<script lang="ts">
+  import { onMount } from "svelte";

  export let count: number;
  let message: string = null;


+  onMount(() => {
+    chrome.runtime.onMessage.addListener(handleMessageEvent);
+  });
+
+  function handleMessageEvent(request, _, sendResponse) {
+    if (request.type === "count_updated") {
+      count = request.count;
+    }
+  }

  const increment = () => (count += 1);
  const decrement = () => (count -= 1);

  const handleSave = async () => {
    await chrome.storage.sync.set({ count });
    message = "Updated!";

    await chrome.runtime.sendMessage({count, type: "count_updated"});

    setTimeout(() => {
      message = null;
    }, 2000);
  };
</script>

After adding the listener, we can see that the count is updated in all tabs.

It is easy verify that it will also work in the popup because we are using the same component.

3. Handle the response from listeners

In the event handler, we can call a sendResponse function with the payload that we want to send back to the sender. In this example, I'm sending back the change in the count value.

The sendMessage function returns a promise. We can use the await keyword to get the response from the listener. In this example, I'm simply appending the response to the message;

// src/components/Counter.svelte
function handleMessageEvent(request, _, sendResponse) {
  if (request.type === "count_updated") {
+    sendResponse({ message: `from ${count} to ${request.count}` });
    count = request.count;
  }
}

const handleSave = async () => {
  await chrome.storage.sync.set({ count });
  message = "Updated!";


-  await chrome.runtime.sendMessage({count, type: "count_updated"});
+  const res = await chrome.runtime.sendMessage({count, type: "count_updated"});
+  message += ` ${res.message}`;

  setTimeout(() => {
    message = null;
  }, 2000);
};

The response is now at the end of the success message.

4. Handle connection error

In case we only have one instance of the plugin running, the sendMessage function will throw an error. Also, the success message Updated! will always be visible because the code to hide the message will not be reached.

We can handle the error by wrapping the sendMessage in a try/catch block.

// src/components/Counter.svelte
  const handleSave = async () => {
    await chrome.storage.sync.set({ count });
    message = "Updated!";


-    const res = await chrome.runtime.sendMessage({count, type: "count_updated"});
-    message += ` ${res.message}`;
+    try {
+      const res = await chrome.runtime.sendMessage({count, type: "count_updated"});
+      message += ` ${res.message}`;
+    } catch (error) {
+      // Handle error here
+      console.log("TODO:", error);
+    }

    setTimeout(() => {
      message = null;
    }, 2000);
  };

Side note: Handle connection error with callback

If you are using a callback for whatever reason, you need to explicitly check for the error.

// src/components/Counter.svelte
const handleSave = async () => {
  await chrome.storage.sync.set({ count });
  message = "Updated!";

  chrome.runtime.sendMessage({count, type: "count_updated"},
    (res) => {
      const lastError = chrome.runtime.lastError;

      // This conditional check is important to remove the error
      if (lastError) {
        // Handle error here
        console.log("TODO:", lastError.message);
        return;
      }
      message += ` ${res.message}`;
    }
  );

  setTimeout(() => {
    message = null;
  }, 2000);
};

Now, the error is handled properly, and the code to hide the message continues to execute.

5. Unsubscribe from the listener

Sometimes, we need to free up resources. In this case, we can use the onDestroy hook to remove the listener.

// src/components/Counter.svelte
import { onDestroy } from "svelte";

// Rest of the code...

onDestroy(() => {
  chrome.runtime.onMessage.removeListener(handleMessageEvent);
});

An alternative is to return a function from the onMount hook. This function will be called when the component is destroyed.

// src/components/Counter.svelte
// Rest of the code...

onMount(() => {
  chrome.runtime.onMessage.addListener(handleMessageEvent);

  return () => {
    chrome.runtime.onMessage.removeListener(handleMessageEvent);
  };
});

To simplify the demo of removing the listener, I'm removing the listener after 4 seconds the component is mounted.

// src/components/Counter.svelte
onMount(() => {
  chrome.runtime.onMessage.addListener(handleMessageEvent);

  // For demo purposes only
  setTimeout(() => {
    chrome.runtime.onMessage.removeListener(handleMessageEvent);
  }, 4000);

  return () => {
    chrome.runtime.onMessage.removeListener(handleMessageEvent);
  };
});

The other tabs will stop listening count_changed event, and there will be an error because no one is listening.

Repository

Check the source code here

What's next

[ ] Add a content script
[ ] Add a background script
[ ] Add a dev tools page
[ ] Deploying the extension

Add an Options Page to Chrome Extension

Carlo Gino Catapang — Fri, 24 Feb 2023 11:23:44 +0000

Learn how to add an options page to your Chrome Extension

Introduction

This is a continuation of the previous article about creating a Chrome Extension using Svelte and Tailwind. This article will focus on adding an Options page to the extension.

What is a Chrome Extension?

A Chrome extension is a software program that extends the functionality of Google Chrome. It modifies the browser's behavior and adds new features.

What is a Google Extension Options Page?

The Options Page is a page that allows users to configure the extension. It is a page that is opened when the user right-clicks on the extension icon in the toolbar; then, clicks the Options menu.

By default, the Options option is not available. We will add it in the next section.

Project setup

Clone the repo from the previous blog

The easiest way is to use degit.

npx degit codegino/svelte-tailwind-chrome-plugin#01-intro my-target-folder

Install the dependencies.

cd my-target-folder
npm install

Create the content of the options page

<!-- src/options/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Popup</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./index.ts"></script>
  </body>
</html>

It is important to match the absolute file path with the one in the manifest file.

Create the options script

// src/options/index.ts
import '../app.css';
import Options from '../components/Options.svelte';

const target = document.getElementById('app');

async function render() {
  new Options({target});
}

document.addEventListener('DOMContentLoaded', render);

Create the Options Svelte component

NOTE: I'm using Svelte here because it was a focus of the previous blog. Do not focus too much on the content of this component because an Options page could contain anything.

This example contains a simple form that allows the user to update the count from the input field to the local storage.

// src/components/Options.svelte
<script lang="ts">
  import { onMount } from "svelte";

  let count = 0;
  let message: string = null;

  onMount(() => {
    chrome.storage.sync.get("count", (data) => {
      count = data.count;
    });
  });

  const handleSave = () => {
    chrome.storage.sync.set({ count }).then(() => {
      message = "Updated!";

      setTimeout(() => {
        message = null;
      }, 2000);
    });
  };
</script>


<div class="flex flex-col py-[3%] px-[2%] bg-blue-50 h-screen">
  <h2 class="mb-5">Options Page</h2>
  {#if message}
    <span class="font-bold text-blue-800">{message}</span>
  {/if}

  <form on:submit|preventDefault={handleSave} class="flex flex-col gap-4">
    <div class="flex items-center gap-2 w-full">
      <label for="count" class="text-lg font-bold text-gray-700">
        New Count:
      </label>
      <input
        type="number"
        id="count"
        name="count"
        class="border border-gray-300 rounded-md p-2 flex-1"
        bind:value={count}
      />
    </div>
    <i>Add other configurations here!</i>

    <button
      class="w-full bg-blue-500 text-white text-base font-bold py-2 px-4 rounded"
      type="submit"
    >
      Save
    </button>
  </form>
</div>

Update the manifest file

The manifest file contains the necessary information for the browser to load the extension. For more information, check out the Chrome Extension Manifest

Simply add the options_ui property to the manifest file.

// manifest.json
{
  "name": "Svelte Tailwind Chrome Extension",
  "description": "Sample Extension using Svelte and Tailwind",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "src/popup/index.html"
  },
+  "options_ui": {
+    "page": "src/options/options.html",
+  },
  "permissions": ["storage"]
}

Build and load the extension

Run npm run dev or npm run build
Open the chrome extension page by typing chrome://extensions in the address bar
Enable the developer mode
Click on the Load unpacked button
Select the dist folder
Open the extension menu; then, click the loaded extension

Open the options in a new tab

By default, the options page is opened in a popup. We can change this behavior by adding the open_in_tab property.

// manifest.json
{
  // ...
  "options_ui": {
    "page": "src/options/options.html",
+    "open_in_tab": true
  },
  // ...
}

Now the options page will be opened in a new tab.

Repository

Check the source code here

What's next

✅ Sync plugin contents without reloading
[ ] Add a content script
[ ] Add a background script
[ ] Add a dev tools page
[ ] Deploying the extension

DEV Community: Carlo Gino Catapang

Build a multilingual NextJS app using the new app directory - cookie-based

TL;DR

Introduction

Initialize a NextJS project

Install dependencies

Remove unused files

Project Setup

Our Internationalization strategy

Install required dependencies

Create a reusable settings file

Server Components translation setup

Create translation files

English translations

Chinese translations

Swedish translation

Create our page to display the locale

Testing our page

Locale switcher

Create a server action to update the cookie

Create the locale switcher component

Client-side translation

Create a global provider of the locale

Install language detector in the browser

Client Components translation setup

Update the ChangeLocale to use the new hook

Update the layout component

Create translation files

Bonus

Nested translation keys and default translation

Create the component

Built-in Formatting

Create the component

Other translation functions to check

Conclusion

CodeCraft: Full-Stack Chapter 3

CodeCraft: Full-Stack Chapter 2

CodeCraft: Full-Stack Chapter 1

CodeCraft: Full-Stack Chapter 0

CodeCraft: The Full-Stack Wizard's Journey Part 2

Chapter 13: Cloud Migration

Chapter 14: Pre-Compilation

Chapter 15: System Overload

Chapter 16: Home Directory

Chapter 17: System Reboot

Chapter 18: Security Protocol

Chapter 19: Penetration Testing

Chapter 20: Malware Alert

Chapter 21: Network Alliance

Chapter 22: Final Commit

Chapter 23: System Recovery

Chapter 24: Git Push

What's Next?

Build a free link shortener with Next.js and Vercel Postgres

TL;DR

Introduction

Our demo will showcase the following features:

Prerequisites

Installation

Install dependencies

Remove unused files

Setting Up NextJS - Part 1

Making a Placeholder Route Resolver

Initial Deployment

Installing the Vercel CLI

Login to Vercel

Deploying the App

Setting Up the Database

Creating the Vercel Postgres Database

Creating the Links Table

Adding a New Link Entry

Setting Up NextJS - Part 2

Installing the Vercel Postgres Package

Connecting the Project

Setting Up a Default Page (Optional)

Create the layout component

Create the home page

Customizing the Domain

With Vercel

With a DNS Provider

Update the `ChangeLocale` to use the new hook