DEV Community: Gift Egwuenu

Build a Bookmark Manager with the HONC Stack

Gift Egwuenu — Wed, 05 Mar 2025 14:12:05 +0000

What Even is the Best Stack? 🤔

As developers, we are constantly in pursuit of the best way to build applications that are frictionless, scalable, and a joy to work with. The ecosystem is filled with countless frameworks, libraries, and tools, each promising to make development easier. But what if there was a stack that combined performance, simplicity, and flexibility?

Enter the HONC Stack.

What is the HONC Stack?

HONC is a modern full-stack development approach optimized for speed, developer experience, and global scalability. It stands for:

H – Hono: A lightweight, fast, and Edge-first web framework for building APIs and applications.
O – Drizzle ORM: A type-safe ORM designed for SQL databases with a great developer experience.
N – Name your Database: Whether it's Cloudflare D1 (SQLite on the Edge), Neon (serverless Postgres), or any other preferred database, HONC allows for flexibility.
C – Cloudflare: A powerful developer platform offering Workers, KV, R2, D1, and more, making it an ideal environment for deploying modern apps at the Edge.

Why the HONC Stack?

The HONC stack is designed to take advantage of modern cloud and Edge computing principles, enabling developers to:

⚡ Build fast, globally distributed applications with Cloudflare Workers and Hono.
🛡️ Ensure type safety and maintainability with Drizzle ORM.
🗃️ Use a flexible database solution depending on the use case.
🚀 Deploy effortlessly with Cloudflare’s robust global infrastructure.

Getting Started with HONC

Want to try the HONC stack for yourself? Setting up a new project is as easy as running:

npm create honc-app@latest

This command sets up a new application with Hono, Drizzle ORM, and Cloudflare Worker bindings pre-configured. During setup, you’ll be prompted to choose a template. Select the D1 base template to ensure your application is optimized for Cloudflare D1 as the database solution.

Build a Bookmark Manager with the HONC Stack

To showcase the HONC Stack in action, let's build a simple Bookmark Manager that allows users to:

Add bookmarks (title, URL, description, tags)
View saved bookmarks
Delete bookmarks

Set Up Your HONC App

This part was already done in the step above, go ahead and run the application using:

npm run db:setup
npm run dev

Configure Cloudflare D1

Let's create a new D1 database:

npx wrangler d1 create bookmarks_db

Add it to wrangler.toml and update the database name in package.json scripts accordingly:

[[d1_databases]]
binding = "DB"
database_name = "bookmarks_db"
database_id = "<your-database-id>"
migrations_dir = "drizzle/migrations"

Define the Database Schema (Drizzle ORM)

Update the schema.ts to define the bookmarks table:

import { sql } from 'drizzle-orm';
import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';
export type NewBookmark = typeof bookmarks.$inferInsert;

export const bookmarks = sqliteTable('bookmarks', {
  id: integer('id', { mode: 'number' }).primaryKey(),
  title: text('title').notNull(),
  url: text('url').notNull(),
  description: text('description'),
  tags: text('tags'),
  createdAt: text('created_at')
    .notNull()
    .default(sql`(CURRENT_TIMESTAMP)`)
});

Create API Routes with OpenAPI (Hono)

Next, update the index.ts to define API endpoints with OpenAPI support:

import { drizzle, type DrizzleD1Database } from "drizzle-orm/d1";
import { eq } from "drizzle-orm";
import { createFiberplane } from "@fiberplane/hono";
import { OpenAPIHono, createRoute, z } from "@hono/zod-openapi";
import * as schema from "./db/schema";

type Bindings = {
  DB: D1Database;
};

type Variables = {
  db: DrizzleD1Database;
};

const app = new OpenAPIHono<{ Bindings: Bindings; Variables: Variables }>();

app.use(async (c, next) => {
  const db = drizzle(c.env.DB);
  c.set("db", db);
  await next();
});

const BookmarkSchema = z.object({
  id: z.number().openapi({ example: 1 }),
  title: z.string().openapi({ example: "My Bookmark" }),
  url: z.string().url().openapi({ example: "https://example.com" }),
  description: z.string().optional().openapi({ example: "A useful link" }),
  tags: z.string().optional().openapi({ example: "tech, coding" }),
}).openapi("Bookmark");

const getBookmarks = createRoute({
  method: 'get',
  path: '/api/bookmarks',
  responses: {
    200: {
      content: { 'application/json': { schema: z.array(BookmarkSchema) } },
      description: 'Bookmarks fetched successfully',
    },
  },
});

const createBookmark = createRoute({
  method: "post",
  path: "/api/bookmark",
  request: {
    body: {
      required: true,
      content: {
        "application/json": {
          schema: BookmarkSchema,
        },
      },
    },
  },
  responses: {
    201: {
      content: {
        "application/json": {
          schema: BookmarkSchema,
        },
      },
      description: "Bookmark created successfully",
    },
  },
});

const deleteBookmark = createRoute({
  method: 'delete',
  path: '/api/bookmark/{id}',
  responses: {
    200: {
      content: {
        'application/json': { schema: z.object({ message: z.string() }) },
      },
      description: 'Bookmark deleted successfully',
    },
  },
});

app.openapi(getBookmarks, async (c) => {
  const db = c.get("db");
  const bookmarks = await db.select().from(schema.bookmarks);
  return c.json(bookmarks);
});

app.openapi(createBookmark, async (c) => {
  const db = c.get("db");
  const { title, url, description, tags } = c.req.valid("json");
  const [newBookmark] = await db
    .insert(schema.bookmarks)
    .values({ title, url, description, tags })
    .returning();
  return c.json(newBookmark, 201);
});

export default app;

Seed the Database

To populate the database with actual sample bookmarks, update the existing scripts/seed.ts file to include:

import { bookmarks } from './src/db/schema';
...
const sampleBookmarks = [
  {
    title: "Hono Framework",
    url: "https://hono.dev",
    description: "A lightweight web framework for building APIs and applications.",
    tags: "hono, framework, edge",
  },
  {
    title: "Drizzle ORM",
    url: "https://orm.drizzle.team",
    description: "A type-safe ORM designed for SQL databases.",
    tags: "orm, database, typescript",
  },
  {
    title: "Cloudflare D1",
    url: "https://developers.cloudflare.com/d1/",
    description: "Cloudflare’s globally distributed, serverless database.",
    tags: "cloudflare, database, d1",
  },
  {
    title: "HTMX",
    url: "https://htmx.org",
    description: "A library that allows access to modern browser features directly from HTML.",
    tags: "htmx, frontend, html",
  },
  {
    title: "MDN Web Docs",
    url: "https://developer.mozilla.org",
    description: "Comprehensive documentation for web technologies.",
    tags: "documentation, web, mdn",
  },
];

seedDatabase();

async function seedDatabase() {
  ...
  try {
    await db.insert(bookmarks).values(sampleBookmarks);
    console.log('✅ Database seeded successfully!');
    if (!isProd) {
    }
  } catch (error) {
    console.error('❌ Error seeding database:', error);
    process.exit(1);
  } finally {
    process.exit(0);
  }
}

Build a Frontend with Hono JSX Renderer

Use Hono's JSX renderer to serve the frontend dynamically:

import { jsxRenderer } from 'hono/jsx-renderer';

app.use('*', jsxRenderer());

app.get('/', async (c) => {
  const db = c.get('db');
  const bookmarks: Bookmark[] = await db.select().from(schema.bookmarks);

  return c.render(
    <html>
      <head>
        <title>Bookmark Manager</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <script src="https://unpkg.com/htmx.org@1.9.5"></script>
      </head>
      <body class="bg-gray-100 min-h-screen">
        <h1 class="text-4xl text-center font-bold mb-4 my-6">📌 Bookmark Manager</h1>
        <div class="max-w-xl w-full mx-auto bg-white p-6 my-6 rounded shadow-md">
          <form
            hx-post="/api/bookmark"
            hx-target="#bookmarkList"
            hx-swap="beforeend"
            class="flex flex-col gap-2 mb-4"
          >
            <input
              type="text"
              name="title"
              placeholder="Title"
              required
              class="border p-2 rounded"
            />
            <input
              type="url"
              name="url"
              placeholder="URL"
              required
              class="border p-2 rounded"
            />
            {/* Description and Tags (optional) */}
            <input
              type="text"
              name="description"
              placeholder="Description"
              class="border p-2 rounded"
            />
            <input
              type="text"
              name="tags"
              placeholder="Tags (comma-separated)"
              class="border p-2 rounded"
            />
            <button
              type="submit"
              class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700"
            >
              Add Bookmark
            </button>
          </form>

        </div>
        <ul id="bookmarkList" class="space-y-2 max-w-xl w-full mx-auto">
            {bookmarks.map((b) => (
              <li class="p-2 border rounded flex justify-between items-center bg-white" id={`bookmark-${b.id}`}>
                <div class="flex flex-col">
                  <span class="font-semibold">{b.title}</span>
                  <small>{b.description}</small>
                  <small class="text-gray-500">{b.tags ?? ''}</small>
                </div>
                <div class="space-x-2">
                  <a
                    href={b.url}
                    target="_blank"
                    class="text-blue-600 hover:underline"
                  >
                    Visit
                  </a>
                  <button
                    hx-delete={`/api/bookmark/${b.id}`}
                    hx-target={`#bookmark-${b.id}`}
                    hx-swap="outerHTML"
                    class="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600"
                  >
                    Delete
                  </button>
                </div>
              </li>
            ))}
          </ul>
      </body>
    </html>
  );
});

To serve the frontend with JSX, rename your entry files to .tsx (for example, index.tsx) instead of .ts, ensuring that Hono can properly compile and serve JSX. For the full code checkout the GitHub Repo.

Deploy Everything to Cloudflare

Afterwards, run the migration script for production and optionally seed the database:

npm run db:migrate:prod
npm run db:seed:prod

Finally, deploy to production:

npm run deploy

The Bookmark Manager is now live with a minimal frontend!

Wrapping Up

The HONC stack makes it easy to build modern, efficient applications. Try it out and start building today!

Nevertheless, Gift Continues to Thrive in 2022

Gift Egwuenu — Wed, 09 Mar 2022 06:04:55 +0000

I have written a SheCoded post every year since 2018. I always like to come back to them on this day to see how much progress I've made with my tech career.

Nevertheless, Gift Coded

Gift Egwuenu ・ Mar 6 '18

#wecoded

Nevertheless, Egwuenu Gift Coded

Gift Egwuenu ・ Mar 7 '19

#wecoded #vuevixens

Nevertheless, Gift Egwuenu Coded ✨

Gift Egwuenu ・ Mar 5 '20

#wecoded

Nevertheless, Gift Egwuenu Coded ✨

Gift Egwuenu ・ Mar 5 '20

#wecoded

Throughout my career in tech, I have had to proof myself in some way, and all withstanding the imposter syndrome I struggle with when taking on new challenges but I'm still here thriving.

My biggest achievement this year is switching gears and starting a new career in Developer Relations.

I now work as a Developer Advocate at a great company and this is just a start to the great things I will do this year.

My goal is to continue to be my best self, share the work I do and advocate for other women like myself in the industry.

There is no limit to what we, as women, can accomplish. -- Michelle Obama.

Let's keep breaking the bias!

My Experience using Polywork!

Gift Egwuenu — Tue, 15 Jun 2021 21:46:54 +0000

I joined Polywork a few weeks ago, it's been an amazing experience and I thought it'll be great to pen down my thoughts as an early adopter of the platform. In case you are not familiar with Polywork, that's not a problem I can give a tl;dr explanation of what the platform is but I'll recommend you check it out yourself the landing page does a great job of explaining the platform in the most creative way.

Polywork is a platform for Multiplayers - creatives, developers, designers, anyone who is looking to build a platform with their personal and professional work and achievements that allow you to represent who you are and the value you create.

You know how you have always wanted a tool to exist for the things you needed so bad that you carve into the side-projects hell and decide to make that tool yourself or just find another solution? I was exactly at this point earlier in the year, I wanted a unified way of sharing all the things I was doing in one place - (from my writing, videos, speaking, etc) I do these outside my 9-5 job and it's been a big part of my career so I wanted to have one place where I can track all of these activities for myself and for others to find as well.

One place for all my work!

So I got thinking, I already had a Blog, Channel, Twitter profile and so many more but where do I collate all of the things that I was doing, that's exactly the problem I had. I found a tool - Linktree that I decided to give a try but it wasn't exactly what I needed. This only helped direct people to all the other platforms where my content lived but not exactly showing them the content in one place.

I went with it regardless at the time I thought it might be nice to build something for myself similar to Linktree and have that live on my domain but I never got to it. Thanks to Stephanie Morillo for the idea though.

Down the line, I came up with a different idea to start a weekly newsletter with all the content and work I created for the week and share that. That was not a bad idea I thought so I went with that. This worked but for a few weeks, I would almost miss sending the update for the week, and the week after that when I don't create any content I feel there's no need to send an issue, and the big picture I wanted all content in one place to access at any time was not exactly working with this solution.

Imagine I want to check what I did for the month I have to go back and read four issues of my newsletter which is not a terrible idea, but you know if there's a better solution definitely will pick that over this. So I decided to move the newsletter to a monthly recurring update where I share all the things I did for the month.

The Future of Professional Networking!

Well, I finally found the tool I needed - Polywork, and I'll tell you why in a bit but thanks to my Twitter timeline I've been seeing this pop up for a few days unsure what it is I just skimmed through the tweets until I decided to do a google search! I was hooked from reading up what the platform is about so I immediately signed up and joined the waitlist.

Remember how I wanted to have all the work I've done in one place? Polywork solves exactly that for me and even offers more and that's why I'm very excited about it. The platform gives you space where you can share your work, be yourself and you can blend both your professional and personal interests without feeling like it's not the right place for you to share them. Other platforms I've tried - "LinkedIn" for example I mostly feel awkward sharing my vlog content when I make them because I see it as a "professional", "strictly-work" platform even though I've seen other people share this kind of content there I still feel very weird about it.

Polywork is a social and professional network for people like me that want to express themselves, share the work we're doing, and generally connect with other like-minded individuals. Before I go on with what I like about the platform and some of its features, I just thought it'll be nice to self plug my profile 😉 check out my Polywork Profile still updating previous years' work need all of it documented. So, the first thing that struck my attention has the be the superb illustrations and the minimal design used on the platform it gives off a very modern vibe and general good UX for users of the platform. The other thing I also like is how they allow me to track all my achievements in a timeline where I can share all the work I've done from the start of my career that's just great and what I wanted in the first place, problem solved!

In addition, you can create activity tags for your post this is where I enjoy just randomly checking what activities tag already exist and I also just discovered I can create my own ain't that cool!

A part of this that just makes absolute sense to me is the fact that you don't get likes and comments on your posts like other social media platforms I once read a book that justified why having these metrics could be damaging.

Do you know what else is possible? You can set up a custom domain for your profile and a couple of days ago I published a guide on how to set up a custom domain with Netlify and Namecheap check it out!

Connections and Collaboration

Unlocked Polywork isn't just a platform where you can share your work, it's also a connected network of professionals. I like to think of it as where the future of work is going where there's less barrier in finding and connecting to other professionals based on their work and interests. Multiverse is one place where you can find all of these. You can explore trending badges, featured people, collaboration possibilities and so much more this is what I've been missing from other platforms and to think this is just the start of all of this.

I'm excited to see where the platform goes in terms of adoption from the community and overall growth, it's still in early beta and looking this good already, I'm looking forward to trying all the cool updates the team is building to make this a unified platform for multiplayer.

Optional Chaining In JavaScript

Gift Egwuenu — Wed, 07 Apr 2021 08:44:56 +0000

Are you always frustrated when you try to access a value from an object/array and it returns this error Uncaught TypeError: Cannot read property 'value' of undefined because the value is not available yet or does not exist? Let's see an example, say we have countries object with values like this:

countries = {
  name: 'Nigeria',
  region: 'Africa',
  population: 186988000,
  currency: {
    code: 'NGN',
    name: 'Nigerian Naira',
    symbol: '₦',
  }
};

and we try to return a value that is not yet available or doesn't exist yet:

console.log(countries.languages.name);

we will get back an error from the browser that the value is undefined. How do we tackle this problem? we can validate that each reference in the nested property is available with an expression like this:

console.log(countries.languages && countries.languages.name);

Now, this won't throw an error and will return undefined if a value doesn't exist. To avoid doing that extra step of validating we can use a different method - Optional Chaining.

Introducing the Optional Chaining Operator

The JavaScript Optional Chaining Operator is a native feature introduced in ES2020 that allows you to safely access deeply nested properties of an object without having to check for the existence of each of them.

Optional Chaining uses the ?. operator to access the properties of objects. The usage of the ?. operator is similar to the typical . operator, but when a reference is undefined or null, rather than throwing an error, it would return undefined.

The syntax for optional chaining can be used in any of the following positions:

obj?.prop       // optional static property access
obj?.[expr]     // optional dynamic property access
func?.(...args) // optional function or method call

In our previous example, we can then change the expression to this:

console.log(countries?.languages?.name);

This will check if the parent value exists and if it doesn't it returns undefined. Optional chaining can be used often when we are fetching responses from an API we may not be 100% sure if a certain object exists in our API response.

Browser Support

The Optional Chaining Operator is currently supported in all browsers except Internet Explorer as seen from CanIUse.

Resources

MDN Resource: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
TC39 Proposal Optional Chaining: https://github.com/tc39/proposal-optional-chaining

Video Format

Git: Delete Multiple Branches

Gift Egwuenu — Tue, 23 Mar 2021 13:13:04 +0000

Have you been piling up so many branches you don't even use anymore and want to clean them up? In this article, I'll share snippets you can use to do that quickly from your terminal.

Note: Only use this if you're sure the branches are not needed anymore.

Deleting Local Branch

You can delete a local branch that has been merged into the remote and also delete an un-merged local branch. You want to make sure you know which branch is merged in or not and to do that you can use the following commands:

git branch - to list out all local branches
git branch -r - to list all remote branches
git branch -a - to list both local and remote branches
git branch --merged - to list all the branches that have been merged
git branch --no-merged - to list all branches not merged

Now to delete the local branches, you want to do either of these:



# delete fully merged branch
git branch -d 'name-of-branch' 

# I use the git alias a lot so this also applies
gbd 'name-of-branch'

# delete branch (even if not merged)
git branch -D 'name-of-branch'

# alias 
gbD 'name-of-branch'

Deleting Multiple Local Branches

Feeling confident enough and you want to delete multiple local branches you can do so using the command:

Note: You need to be careful when doing this so you don't delete a branch that is not merged in yet and adding the --merged flag helps ascertain that you don't do that.



git branch --merged | egrep -v "(^\*|master|main|develop)" | xargs git branch -d

To further explain the command above, git branch --merged will list out all the merged branches, egrep -v "(^\*|master|main)" will ensure the master and main branch is not deleted, you can add other branches you want to exclude here. xargs git branch -d will go ahead and delete the remaining branches.



# ⚠️ adding --no-merged and -D flag will go ahead and delete unmerged branches
git branch --no-merged | egrep -v "(^\*|master|main|develop)" | xargs git branch -D

# ⚠️ use this for when you want to delete all the branches both merged and unmerged
git branch | egrep -v "(^\*|master|main|develop)" | xargs echo git branch -D

Deleting Remote Branches

In a case where you need to delete a remote branch because you are done working on it and it had been merged into the remote master branch. You can delete a remote branch using the --delete flag and a git push to the remote branch:



git push origin --delete 'name-of-branch'

Deleting Multiple Remote Branches

When you need to delete multiple remote branches and don't want to do them individually with the command previously stated, you can do so using:



git branch -r --merged | egrep -v "(^\*|master|main|develop)" | sed 's/origin\///' | xargs -n 1 git push origin --delete

This will delete all remote merged branches excluding master and main. To further explain the command:

git branch -r --merged - will list out all the remote branches that are merged
egrep -v "(^\*|master|main)" - exclude branch master and main
sed 's/origin\///' - because the remote branches are prefixed with origin/ this command will filter that part out so it returns only the branch name.
xargs -n 1 git push origin --delete - deletes the remaining branches.

Now if you're feeling very confident and want to delete all un-merged branches or all the remote branches use this:



// ⚠️ deletes all un-merged branches from remote 
git branch -r --no-merged | egrep -v "(^\*|master|main|develop)" | sed 's/origin\///' | xargs -n 1 echo git push origin --delete

// delete all branches including merged and unmerged 🙊 
git branch -r | egrep -v "(^\*|master|main|develop)" | sed 's/origin\///' | xargs -n 1 echo git push origin --delete

I added the echo command to print what I'll be doing to the screen so I'm sure I know what I'm about to delete.

Now you can take the echo command out:



# ⚠️ deletes all un-merged branches from remote 
git branch -r --no-merged | egrep -v "(^\*|master|main|develop)" | sed 's/origin\///' | xargs -n 1 git push origin --delete

# delete all branches including merged and unmerged 🙊 
git branch -r | egrep -v "(^\*|master|main|develop)" | sed 's/origin\///' | xargs -n 1 git push origin --delete

That's it! I hope this was helpful for you. I know I will be referencing this again when I need it.

Deployment with Cloudflare Pages

Gift Egwuenu — Thu, 18 Mar 2021 08:12:25 +0000

Cloudflare Pages was recently just released in public beta and I'm very happy to give it my first try. In this tutorial, we'll walk through a step-by-step process of deploying a Nuxt.js application using Cloudflare Pages.

What is Cloudflare Pages?

Pages is a platform for deploying your frontend application. It is super-fast, always up-to-date, and deployed directly from your GitHub account.

Getting Started

Let's start with creating a Nuxt.js website. I wanted the core of the tutorial to be Cloudflare Pages so I went with a minimal demo. To set up a new Nuxt.js app you need to use the command:

npx create-nuxt-app cloudflare-demo 
or 
yarn create nuxt-app cloudflare-demo

You'll get prompted to answer some questions like what UI framework, Linter, Testing Framework you want to use. we'll skip all that but pick Tailwind CSS as the UI library of choice instead of writing our CSS from scratch.
After following this, all the dependencies will be installed and our project is now ready to work with.
To start your local environment and get into coding, run the following:

cd cloudflare-demo 
yarn dev

The application should now be available on localhost:3000!

Designing the Demo

With our application now running, you get a landing page template from Nuxt as a default but instead of just deploying this. Let's twerk it a bit before deploying.
If you want to learn more about Nuxt.js, I wrote a getting started guide on it.
For this demo, we'll make a few edits to the already existing pages/index.vue.

<template>
  <div>
    <div>
      <img src="https://giftegwuenu.com/deployment-with-cloudflare-pages/~assets/cloudflare.svg" alt="Cloudflare Pages" width="350">
      <h1>
        Deploy your Jamstack Website with <a href="https://pages.cloudflare.com/"> Cloudflare Pages.</a>
      </h1>
    </div>
    <div>
      <a href="https://pages.cloudflare.com/">
        Learn More
      </a>
    </div>
  </div>
</template>

And a few changes made to the styling:

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family:
   -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-weight: 400;
  color: hsl(0, 30%, 10%);
  letter-spacing: 1px;
}
</style>

All code snippets can be found on the GitHub Repo.

Deploy to Cloudflare Pages

Now, let's get to the fun part. To deploy the app we just created we need to follow a couple of steps which I'll outline: First, you need a Pages account if you don't have one yet, you can create yours now.

Next, we can create a new project.

Click the create a project button, and that leads to a page where you can connect your GitHub account. After connecting to GitHub you can select the project you want to deploy from the list of repos displayed.

After you select a project from GitHub, we need to set up the build commands so that when a commit is triggered Cloudflare knows to use the command set to build your website.

You can set a custom name you want to use as a hostname on pages.dev and also select the production branch in our case this is the master branch.

You also need to set up build settings, there are different framework presets to choose from which makes it easier for you if you don't find the framework you are using or feel you don't need to use any of this then you can directly input your commands in the fields provided. We'll use the Nuxt.js preset for this and if there's a need to set up a default root directory or add environment variables you can also do that here.

We don't need any of that, so let's click the save and deploy button to kick off the first build process. You'll be redirected to a page with a deploy log and details where you can see the current progress of the ongoing deployment.

After the build completes and is successful you get a deploy URL where you can see the version of the app that was deployed. This was fast and this screenshot isn't the first build I made but the first build took around 7 secs to deploy and I'm very impressed with that.

What else can you do?

You can set up a custom domain for your website and also access the deployment settings incase you need to change anything.

Resources

Cloudflare Pages Docs
A first look at Cloudflare Pages

If you prefer a video version of this tutorial. I made one on my channel check it out and please subscribe 😁

Nevertheless, Gift Coded

Gift Egwuenu — Mon, 08 Mar 2021 10:25:07 +0000

I love the #SheCoded initiative from DEV and I've been involved for 4 years now. I just looked up what I shared in 2018, 2019, 2020, and I'm very happy to see my growth in this industry.

Well, this year is no different. I'm quite happy with what I've done so far even with the obstacles and challenges that I face every day.

My most recent achievement was when I got the award for MVP in developer technologies from Microsoft MVP Program.

// Detect dark theme var iframe = document.getElementById('tweet-1357603634972868608-640'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1357603634972868608&theme=dark" }

This was a huge deal for me because it makes me feel like the work I put into creating value for developers is being recognized and celebrated.

Advocating for myself means always showing up, putting my work out there as I've learned if you don't advocate for yourself no one else will.

"Put yourself and your work out there every day and you'll start meeting some amazing people." — Bobby Solomon

My biggest goal is to be the best version of my version in everything I do. In my work as a developer, in contributing back to the community and navigating my passion for content creation.

My advice for allies to support underrepresented folks who code is:

Know when it's right to step in and help pivot our voices.
Support and Donate to Women-led non-profit organizations: Frontend Foxes, She Code Africa, Black Girls Code.

I love being in Tech and I'm excited to do even more as long as I'm here!

Show Your Work!

Gift Egwuenu — Mon, 08 Mar 2021 08:25:52 +0000

What do you mean by "Show your work!"? This is what my brain tells me the first time I stumbled upon this book. I already do that no? I think I already do but I was so sure I will take out more from reading this book and I was not wrong. After reading lots of reviews on GoodReads I decided to get a copy and see what I'm doing wrong or need to start doing. In this article, I'll share the insights I learned from reading Austin Kleon's: Show Your Work!

You don’t have to be a genius

The first chapter starts with this very statement we always shy away from when thinking of putting our work out in the world. I personally have this problem when I think I'm not a genius so I shouldn't be talking or sharing about a specific topic and I'm certain a lot of us feel that way too. In this chapter, Austin proves that is not a good yardstick for measuring what work we should put out.

We should all be Amateurs because amateurs are willing to try different things, learn in public and share all the knowledge, rinse and repeat without the burden of thinking we have to be an expert.

Think process, not product

I like this statement so much! He's calling on us to start thinking of our work as a process and not a product. I can decide to create a book, course, tool, or even a library in private and come back with the finished product this is how a lot of artists and creators think.

This idea is different it's calling on us to share all the process behind the scenes of creating our work. You might think this is not a great idea may be because your process is messy and not streamlined for anyone to understand. Share it anyway!

People want to see how we create the things we create, from ideation to result and it's important to make them part of the journey to the product. You can think of it as a way of documenting your work out in the open.

Share something small every day

Once a day, share some part of your work it might be unfinished yes, remember think process nor product. Doing this will create compounded results as you see small changes leads to remarkable results.

"Put yourself and your work out there every day and you'll start meeting some amazing people." — Bobby Solomon

The format for sharing doesn't matter, we have many different platforms like Twitter, Instagram, YouTube for showing our work. It's also important to have a domain on the internet where we own our own content and it's great for your brand.

"Carving a space for yourself online, somewhere where you can express yourself and share your work, is still one of the best possible investments you can make with your time" — Andy Baio

Open up your cabinet of curiosities

Don't be a hoarder. Be open to sharing your process as well as where you get your inspiration and ideas from. The people you follow are interested in learning how you come up with all that you do and seeing as creatives it is evident we collect inspiration from different sources we should be open to sharing that too. Also remember, attribution is very important and we should attribute when necessary. How do you know when to do that I love this sketch flow that shows exactly how.

Tell good stories

We should all be good storytellers. When it comes to showing your work we should be able to tell great stories about the work we do and not selling your self short because you're either trying to be humble or modest.

Teach what you know

Learn to share your knowledge by teaching others too, this is by far the best way to keep improving yourself. Teaching people doesn't subtract value from you it actually adds to it.

By teaching people what you've learned you get to solidify that knowledge more giving you even more leverage than you get if you just keep it to yourself.

Don’t turn into human spam

Sharing what you do online is great until you start overdoing it and only open to promoting your work without promoting or reading other people's work. It's always good to know when you're turning into spam. The people you're trying to reach care about your work the moment you make it all about yourself they sense it and can stop supporting or patronizing you.

Be open and genuine, don't focus on the follower count or how many subscribers you have let that be organic, and remember people connect with you because they enjoy your work don't make them think you're just after the numbers or popularity.

Learn to take a punch

Be ready to take a punch. When you share your work publicly be ready for the good, bad, and ugly. People can be mean on the internet especially with relaying feedback or criticism. Don't feed the trolls if you get bad comments from your audience try to ignore or block them out. Only focus on the good things and the audience that finds value in what you're doing.

Sell out

It's okay to charge for the value you create. Many people are made to believe as content creators we all should be doing free work. It's okay to start putting out work for free but the moment you feel it's time to start charging them don't feel guilty about it. We put in all the work and effort and we also have bills piling upright so that's certainly a valid reason to charge for your work.

Remember to pay it forward too when you are successful be open to pivoting other voices so they also can make it to where you are.

Stick around

It's not always going to be rosy. we can either feel success from all the work we've done or feel like absolute failures but it helps to think of this as a journey. The road to success isn't going to be smooth at all times and keeping at what we do regardless of the outcome should be something we always hold on to.

Of course, it's easier said than done when you feel you need to quit, take a break instead and continue when you feel alright to start again not start all over from scratch. it's hard to start over because our work still exists and all the knowledge gained from previous work still remains with us.

Conclusion

I really enjoyed reading this book. It was a very insightful read and I took away a lot from reading it. It's the type of book I can always pick up to go over again and again and still learn something from it. I really liked the artwork incorporated into it as well.

I'll rate this book 5 stars because it changed how I view myself as a creative person. If you are trying to build a brand or put more work out in the open as a content creator this should be the next book you read.

Get the book here :)

5 Ways to Make Passive Income in Tech

Gift Egwuenu — Tue, 05 Jan 2021 12:58:29 +0000

Many developers work a 9-5 and that's great! I do too :) But are you aware you can consistently make passive income by investing some time outside of your full-time job? In this video, I'll share proven ways of making a side income as a developer and tips on how to go about it.

⏰⌛️ Video Timestamps

0:00 Intro

0:13 What this video is about?

1:41 Content Creation

6:34 Build an App / Website

7:42 Create an E-book or Online Course

9:06 Affiliate Marketing

11:28 Freelance Projects

12:20 Outro & Subscribe

🔗 Links Mentioned

Web Monetization with Coil

Carbon Ads

List of Publications that pay up to $600

Hope you enjoy the video :)

How to Craft a Developer Resume

Gift Egwuenu — Mon, 09 Nov 2020 09:38:50 +0000

Do you want to stand out in your job applications, show the recruiter at one glance your abilities and strength? This video will give you tips and ideas for creating a great tech resume that you can be sure will make you stand out in the pool of job applications.

🌱 Timestamps

0:00 Intro

1:28 Why you need a great resume?

2:11 Tools for creating a Resume

4:50 Key sections to include in your resume

14:17 Tips for creating a resume that stands out

20:18 Outro & Subscribe ❤️

Canva Resume Demo

Hope you enjoy the video :)

Vuejs Global 2020: A Recap

Gift Egwuenu — Wed, 30 Sep 2020 10:50:39 +0000

A couple of weeks ago, I had a fantastic time speaking and attending Vue.js Global, a global online conference held on September 17th and 18th. This article will share my thoughts and experience from attending the conference and some of my takeaways.

Overall, I'll say I had such a good time at the conference, even though it was online and we all miss attending in-person conferences. This one didn't feel so much like that because the community made it come alive. There were so many memorable moments during the conference.

I had the chance to be a part of the Speaker's Dinner a day before the conference, and it was so much fun. You can tell my face is missing from the zoom call, but I was present 😉. We had so much fun playing a Pub Quiz hosted by Israel Roldan (PS: My manager, I'm so proud to be working with him!)

TL: DR; The conference was so much fun and I took away so many things and looking forward to exploring and using them.

The conference was a two-day conference packed with so much goodness and some exciting news everyone was looking forward to... I'm sure you already know what that is but more on that later.

Conference Day 1 (September 17th)

We kicked off the conference with Jos Gerards' opening remarks and welcomed both attendees and speakers. I liked many cool things about the conference. I'll share some hints as we go on, and you can also let me know if you feel the same way.

Our hosts for the conference were Maria Lamardo and Ben Hong and they took over with speaker introductions and QnA Moderation. I must say they both did a fantastic job pulling together and keeping everyone hyped for two days. That's no easy task, not that I've hosted a conference before, but I can tell it must have taken a lot of work to pull it off.

Here's a rundown of some talks I attended from the first day of the conference. Watch out for yours truly!

Test Driving Vue 3 by Anthony Gore

Anthony Gore is the creator of VuejsDevelopers and a Vue Community Partner. In his talk, he takes Vue 3 on a Test Drive and explains why some changes were made from the way it works in Vue 2 and the ideas behind Vue 3. He shows how to use Vue 3 to build a reusable modal detailing some of the new features like Fragments, Teleports, and Composition API.

The Future of VueX by Kai King

Kia King is a member of the Vue Core Team, and he focused his talk on the current state of VueX and what's coming in the future of VueX. VueX 3 support will work for Vue 2; likewise, VueX 4 will work with Vue3. The focus of Vuex 4 is for compatibility. He also shares the new installation process and some of the new features coming in Vuex 4, such as new bundles aligned with Vue 3 and slightly better TypeScript support. He also shares the direction for the future "Vuex5" which is still in the RFC stage, and he shared features that this new version will ship with.

Migrating a big old codebase to Vue 3: what I'm excited about! by Natalia Tepluhina

https://www.youtube.com/watch?v=K1JoWmXh4qA&t=58s

Natalia Tepluhina is a member of the Vue Core team and Staff Frontend Engineer at GitLab. In her talk, she shared how she plans to migrate a big old codebase(Gitlab Codebase) to Vue 3 and some of the things she's excited about. In general, she pointed out things to watch out for like mixins, and she recommends as a go-to use Stateful components as Functional components can grow performance gains by 2.x.

Experience of the new Vue by Rahul Kadyan

Rahul Kaydan is also a Vue.js core team member and works as a software engineer at Grammarly. His talk is about his experience with Vue 3 and its ecosystem. He shares his experience working with Composition API, Compiler, and Vite.

Vue 3 Reactivity Under The Hood by Marc Backes

Marc Backes is a freelance developer and host of Whiskey Wednesdays. In his talk, he shared in a demo how Vue 3 Reactivity works under the hood by building a simplified version from scratch. He took us through how Reactivity worked in Vue 2 and showed how Vue 3 reactivity works differently.

Introduction to Vite & Vitepress by Tim Benniks

Tim's talk was one of the best in terms of delivery...he went all out on this one and made us all look like amateurs! His talk covered Vite and Vitepress, and it was an excellent introduction to Vite for me personally. I've never used it in a project. I only remember when it was released, and it was nice to see how Vite and Vitepress work from scratch.

The Exciting New Features for Routing in Vue3; Vue Router 4 by Eduardo San Martin Morote

Eduardo is the creator of Vue Router. He shared some exciting new features coming in Vue Router 4. His talk showed features no longer supported and some useful features that's coming in the latest version.

JAMstack FTW- Static Site Generation With Gridsome by Gift Egwuenu

I gave a talk, and it covered an introduction to Gridsome and the possibilities of what you can achieve with the Jamstack. I showed how you could also extend the functionalities of a Gridsome Application by leveraging the API's it ships with. At this point, technical difficulties set in, and I wasn't able to complete my talk(it was prerecorded, and the video was skipping). No worries though, I have a link to my slides and the recording if you missed it or want to see the full version of the talk on my channel.

Creating a JAM Stack product from scratch by Alex Jover

Alex Jover is the creator of Vue Dose and Organizer of Vue.js Spain. In his talk, he shared the process of rebuilding Vue Dose from the ground up with Nuxt and Storyblok. He also showed the problems with the first version and what needed to be improved, and the seven steps he went through to recreate a new version of Vue Dose.

Dynamic from static with the right (JAM)stack by Maya Shavin

Maya Shavin is a Senior Frontend Developer at Cloudinary. In her talk, she shares what the Jamstack is and explores some tools in the Jamstack ecosystem. She mentioned something I think I needed to pay attention to because we have so many options to choose from, doesn't mean you have to use every tool in your application but instead think from the performance perspective. So asking the question does adding all of these services make my app more performant?

Conference Day 2 (September 18th)

The second day of the conference kicked off with the organizer Jos Gerards welcoming attendees back for another day of great content. The talks for the day were all packed with news and great content in the Vue community. Ranging from a lineup of Nuxt.js seasoned featured speakers and the most anticipated presentation - Evan You's announcement(Wait for it...)

Here's a rundown of some of the talks from the second day of the conference.

Optimizing for Super Sonic Speed in Vue.js & Gridsome by Shopido Ayomide

Shopido Ayomide was the first speaker for the day. He's a developer Advocate at Fleek and also Community Organizer. His talk focused on optimizing speed in Vue & Gridsome.

Chakra UI Vue by Jonathan Bakebwa

Jonathan is the creator of Chakra UI Vue and UI Engineer at Akkadu. He shows us some Chakra UI Vue capabilities with demos of some popular websites he recreated with Chakra UI Vue in his talk. The component library is built from the ground up with accessibility in mind. I'm a big fan of Chakra UI and love that it's a fast-growing component library and one of my goto libraries to use in a project.

The state of Nuxt by Sebastien Chopin

Sebastien Chopin is the co-author of Nuxt.js. His talk focused on the state of Nuxt and recent features that were introduced in the current release Nuxt v2.14 including Full Static Mode, Smart Generate that skips webpack build when there are no code changes. He also shared some stats from this year, a project from the Nuxt team called Vue Telemetry, and finally talked about some changes coming in Nuxt.js v3.0

Nuxt.js Architecture by Pooya Parsa

Pooya Parsa is the head of framework at Nuxt.js. In his talk, he goes through a deep dive of Nuxt architecture updates and an in-depth look at some of the features coming in Nuxt v3.0 - Typescript Support, updates to Builder 3, multi-app support. He also shared there's ongoing work in creating a guide for migrating from Nuxt 2 to Nuxt 3.

Nuxt.js as a headless CMS by Debbie O'Brien

Debbie O'Brien is the head of learning at Nuxt. She shared one of the new features in Nuxt that I'm excited about Nuxt Content Module. She explained what a headless CMS is and how Nuxt content works and demonstrates how to get the Content module up and running.

SEO in a Vue.js world by Alexander Lichter

Alexander is a Nuxt.js core maintainer and web developer consultant. In his talk, he walks through what SEO is and the importance of optimizing SEO and detailing the three pillars of SEO - on-page, off-page, and technical and shared some tips for improving SEO on Vue.js applications.

What you'll love in Vue 3 by Alex Kyriakidis

Alex Kyriakidis is the founder of Vue School. In his talk, he shares some exciting features we'll love in Vue 3. I enjoyed learning about some features of Vue 3 from Alex as he talked through them with examples. No more Reactivity Caveats in Vue 3, introduced teleports with some use cases, and how composition API will help with logic reuse and code organization flexibility.

The State of Vue 3 featuring Evan You's Announcement

This was one of the sessions we've been waiting for and anticipating to hear what news Evan You had for us in his Keynote, which streamed live. I guessed right on this one, and I was right.

Vue 3 "One Piece" was released on September 18th at 4:45 pm(WAT). I even got the time right; that's to show you how excited I was! You can watch the recording directly. I want to say I appreciate the work that went into the release of Vue 3 when Evan shared the journey to Vue 3. It took two years of active development to get this out the door so thank you to every member of the Core Team and Community doing the excellent work of contributing to make Vue the fantastic framework that it is.

Following the announcement, there was a live QnA session where some members of the community and Panel got to ask Evan some questions. It was so good and nicely put together.

After Party and Community Connections

Well, after the talks ended for the conference, you'd think it was the end of the conference since it's online and there's no physical after party. That was not the case for us. We had a great time during the conference, yes but still had many people hanging around waiting for the after-party! 🎉

Jos Gerards played some lovely music. We even had a conference Spotify Playlist where people can add cool songs from where their locations. I liked that the Hopin platform had almost the same experience you'll get from attending an in-person conference. I checked out the Sponsors Booth and did a couple of networking with some attendees for me. This was one of the things I appreciated about the conference. The chat was so lively, and everyone was excited, and you could feel it from wherever you're connected from around the world.

Takeaways and What I'm looking forward to next time!

The conference was very well put together, and I had a lot of fun participating in it. Kudos and great job to the team for putting on such a great event.

Vue.js Amsterdam 2021 is freeeeee! Meaning you get the same experience from this year with even more vibes, but for free, isn't that just great! You can sign up for a ticket now. I've already got my ticket! 😅

I'm looking forward to the awesomeness we create next year. Vue Global conference is brought to the community by Passionate People - a developer consultancy in Amsterdam, where I work(shameless plug 😜).

The videos from the conference will be available on Youtube with some already uploaded and on the Conference Video Portal, so keep an eye on there to catch the talks you missed.

Build a Blog using Nuxt.js Content Module

Gift Egwuenu — Mon, 10 Aug 2020 16:23:33 +0000

Nuxt.js is one of the technologies I'm really interested in and I made this video showing you how to use the Nuxt Content. Nuxt.js Content is one of the newest additions to Nuxtjs. In this tutorial, we'll create a blog using Nuxt.js content as a Headless CMS.

https://content.nuxtjs.org/

GitHub Repo: https://github.com/lauragift21/nuxt-content-video

Timestamps ✨
0:00 - Intro
0:55 - What is Nuxt.js?
1:47 - Setup a Nuxt app
2:13 - What is Nuxt Content?
4:45 - Install Nuxt Content
5:18 - Creating Content
7:31 - Fetching and Displaying Content
15:42 - Live Editing in Dev Mode
16:16 - API Endpoints Preview
16:54 - Static Deployment
18:04 - Outro and Subscribe :)

Hope you enjoy the video :)