Gift Egwuenu

Migrating My Blog to Astro 6

Wed, 11 Mar 2026 00:00:00 GMT

Astro 6 just dropped and I couldn't resist upgrading my blog right away. I've been running on Astro 5.16 for a while and the release notes had a few features that caught my eye immediately. Let me walk you through the migration, what stood out, and the features I'm most excited about.

TL;DR

Migrated from Astro 5.16 to Astro 6 in about an hour.
The biggest wins for me: first-class Cloudflare support (migrated from Pages to Workers and consolidated a standalone likes API into the main codebase) and the built-in Fonts API (goodbye render-blocking Google Fonts imports).
Live Content Collections are now stable, bringing request-time content fetching to Astro's content layer.
Zod now imports from astro/zod instead of astro:content.
Enabled experimental queued rendering for faster builds.
Zero errors on the first build. Smoothest major version upgrade I've done with Astro.

The Features I'm Loving

First-Class Cloudflare Support

This is the big one for me. I was previously deploying my blog to Cloudflare Pages with the old @astrojs/cloudflare adapter. It worked, but the dev experience had rough edges: the adapter didn't run workerd locally, so I was always testing against Node.js and hoping nothing broke in production. I also had a per-post like counter running as a separate Worker with its own wrangler config and deployment pipeline. It was a small API, but maintaining it as a standalone project just to increment a number felt like overkill.

With Astro 6, the rebuilt adapter now runs workerd at every stage: dev, prerender, and production. That gave me the confidence to migrate the blog from Pages to Workers. I consolidated that standalone likes API directly into the Astro project. One codebase, one deployment, full access to bindings during development. It's the setup I always wanted.

Built-in Fonts API

This is the other feature I was really excited about. Before Astro 6, I was loading Inter and JetBrains Mono via Google Fonts @import in my CSS. This is render-blocking, sends user data to Google, and honestly just feels wrong for a static site that cares about performance.

Now I just configure fonts directly in astro.config.ts:


	fonts: [
		{
			provider: fontProviders.google(),
			name: "Inter",
			cssVariable: "--font-inter",
			weights: [400, 500, 600, 700],
			styles: ["normal"],
			fallbacks: ["sans-serif"],
		},
		{
			provider: fontProviders.google(),
			name: "JetBrains Mono",
			cssVariable: "--font-jetbrains-mono",
			weights: [400, 500],
			styles: ["normal"],
			fallbacks: ["monospace"],
		},
	],
});

Then add a `` component in my layout's <head>:

---

---

<head>
	
	
</head>

Astro downloads the fonts at build time, generates optimized fallbacks, and serves them from my domain. No more third-party requests. No more render-blocking imports. The fonts are just there, and they're fast.

Experimental Queued Rendering

My blog has 25+ posts with OG image generation for each one, so build performance matters. The new queued rendering replaces Astro's recursive rendering with a two-pass approach: first traverse the component tree, then render it in order. Early benchmarks show up to 2x faster rendering.

Enabling it is just a config flag:


	experimental: {
		queuedRendering: {
			enabled: true,
		},
	},
});

I've enabled this and I'm curious to see how it performs as I add more content.

Live Content Collections

Live Content Collections are now stable in Astro 6. Content collections have always required a rebuild when content changed. Live collections flip that: they fetch content at request time using defineLiveCollection() and getLiveEntry(), with no rebuild needed. Your content updates the moment it's published.

You define a live collection in src/live.config.ts:





const updates = defineLiveCollection({
	loader: cmsLoader({ apiKey: process.env.MY_API_KEY }),
	schema: z.object({
		slug: z.string(),
		title: z.string(),
		excerpt: z.string(),
		publishedAt: z.coerce.date(),
	}),
});

Then query it in your page with built-in error handling:

---


const { entry: update, error } = await getLiveEntry("updates", Astro.params.slug);

if (error || !update) {
	return Astro.redirect("/404");
}
---

<h1>{update.data.title}</h1>
<p>{update.data.excerpt}</p>
<time>{update.data.publishedAt.toDateString()}</time>

I'm not using this yet since my blog posts are all Markdown files in the repo, but now that I'm running on Workers with full binding access, I can see pairing this with a CMS or D1-backed content source down the line. The fact that live and build-time collections use the same APIs (getCollection(), getEntry(), schemas, loaders) makes it easy to adopt incrementally.

Zod 4

The Zod upgrade is mostly invisible if your schemas are straightforward. The main change is where you import it from. Instead of importing z from astro:content, you now import it from astro/zod:

If you're using .default() with .transform(), check the Zod 4 changelog because the behavior around default values changed.

How I Migrated

The actual migration took about an hour. Here's the rough process:

Created a branch. Always migrate on a separate branch.
Ran pnpm dlx @astrojs/upgrade. This handles the package version bumps automatically.
Updated Zod imports. z from astro/zod instead of astro:content.
Migrated fonts. Removed Google Fonts @import, configured the new Fonts API, added `` to my layout.
Migrated from Pages to Workers. Switched to the rebuilt @astrojs/cloudflare adapter and consolidated my standalone likes API Worker into the Astro project.
Enabled experimental features. Queued rendering for faster builds.
Built and tested. pnpm build + pnpm check, zero errors on the first try.

What I'm Planning Next

Now that I'm on Astro 6, there are a few things I want to explore:

Live Content Collections with a CMS. Now that I'm on Workers with full binding access, I want to pair live collections with a headless CMS so content updates go live without a rebuild.
Responsive images. Astro's image handling keeps getting better and I'm not using srcset/sizes anywhere yet.
View Transitions. I've been putting this off, but Astro's `` has matured a lot since it was introduced.
Tailwind v4. The @astrojs/tailwind integration works fine for now, but Tailwind v4 with its native Vite plugin is the future.

If you're still on Astro 5, I'd recommend giving the upgrade a try. The migration path is smooth and the new features are worth it. Have you upgraded yet? I'd love to hear how it went.

Resources

Setting Up a Custom Email with Zoho Mail and Cloudflare

Mon, 02 Feb 2026 00:00:00 GMT

I've always wanted a professional email address for my domain - something like hello@giftegwuenu.com instead of a generic Gmail address.

I've tried using Cloudflare Email Routing in the past, and while it works great for forwarding emails to your personal inbox, I was missing having an actual custom mailbox - a dedicated inbox where I could send and receive emails as my custom address.

After exploring a few options, I landed on Zoho Mail. Here's how I set it up with my Cloudflare-hosted domain.

Why Zoho Mail?

There are several providers for custom domain email - Google Workspace, Microsoft 365, Fastmail, and more. I chose Zoho Mail for a few reasons:

Free tier available - Up to 5 users with 5GB storage each
Clean interface - Modern UI without the clutter
Privacy-focused - No ads, even on the free tier
Good deliverability - Emails actually land in inboxes

If you're a freelancer, creator, or just want a professional email without paying monthly fees, Zoho's free tier is hard to beat.

What You'll Need

Before we start, make sure you have:

A domain name (I'm using my domain)
Access to your Cloudflare DNS dashboard (or if your domain is hosted elsewhere, access to that dashboard to change DNS settings)
About 15-20 minutes of your time

Step 1: Sign Up for Zoho Mail

Head to Zoho Mail and click "Sign Up Free". Choose the Personal email which includes:

Up to 5 users
5GB storage per user
Web access + mobile apps
Email hosting for one domain

During signup, you'll enter your domain name and the email address you want to create (e.g., hello@giftegwuenu.com).

After signing up, head over to the Zoho admin panel.

Step 2: Verify Domain Ownership (One-Click Method)

Zoho needs to confirm you own the domain. The good news is that Zoho offers a one-click verification method that makes this incredibly easy. If you use one-click verification, you can also configure your MX, SPF, and DKIM records using the same method - no manual DNS editing required!

Using One-Click Verification (Recommended)

In the Zoho setup wizard, look for the One-click verification option
Authenticate with your DNS provider (Cloudflare, in my case)
Zoho will automatically add the verification TXT record to your domain
Once verified, you can use the same one-click method for MX, SPF, and DKIM records

This is the method I used, and it took less than a minute to configure everything. Zoho handles all the DNS record creation for you.

Manual Method (If One-Click Isn't Available)

If one-click verification isn't available for your DNS provider, you can add the records manually. Zoho will give you a verification code that looks something like:

zoho-verification=zb12345678.zmverify.zoho.com

Add this TXT record in Cloudflare:

Log in to your Cloudflare dashboard
Select your domain
Go to DNS > Records
Click Add record
Configure the record:

Type	Name	Content	TTL
TXT	@	zoho-verification=zb12345678.zmverify.zoho.com	Auto

Click Save and head back to Zoho to verify. It usually takes a few minutes for DNS to propagate.

Step 3: Configure MX Records

If you used one-click verification, you can configure MX records the same way - just click the button and Zoho handles it automatically.

For manual configuration, MX (Mail Exchange) records tell the internet where to deliver emails for your domain. This is the most important step.

In Cloudflare, add the following MX records:

Type	Name	Mail server	Priority	TTL
MX	@	mx.zoho.com	10	Auto
MX	@	mx2.zoho.com	20	Auto
MX	@	mx3.zoho.com	50	Auto

The priority numbers matter - lower numbers have higher priority. If the primary server (mx.zoho.com) is unavailable, email routes to the backup servers.

Step 4: Set Up SPF Record

Again, if you used one-click verification, Zoho can add this automatically for you.

SPF (Sender Policy Framework) helps prevent email spoofing by specifying which servers can send email on behalf of your domain.

For manual setup, add this TXT record:

Type	Name	Content	TTL
TXT	@	v=spf1 include:zoho.com ~all	Auto

Note: If you already have an SPF record (maybe from another service), don't create a duplicate. Instead, merge them:

v=spf1 include:zoho.com include:other-service.com ~all

Step 5: Configure DKIM

One-click verification supports DKIM too! If you're doing it manually, here's how:

DKIM (DomainKeys Identified Mail) adds a digital signature to your emails, proving they came from your domain. This improves deliverability significantly.

In Zoho Mail:

Go to Admin Console > Email Authentication > DKIM
Click Add Selector
Zoho will generate a TXT record value for you

Add the DKIM record in Cloudflare:

Type	Name	Content	TTL
TXT	zmail._domainkey	v=DKIM1; k=rsa; p=MIGfMA0GCS... (your key)	Auto

The selector name might be different (like default._domainkey or zoho._domainkey) - use whatever Zoho provides.

Step 6: Add DMARC Record (Optional but Recommended)

DMARC ties SPF and DKIM together and tells receiving servers what to do with emails that fail authentication.

Add this TXT record:

Type	Name	Content	TTL
TXT	_dmarc	v=DMARC1; p=none; rua=mailto:hello@giftegwuenu.com	Auto

The p=none policy means you're just monitoring for now. Once you're confident everything works, you can change it to p=quarantine or p=reject.

Final DNS Configuration

Here's what your Cloudflare DNS records should look like when you're done:

# MX Records
@    MX    mx.zoho.com     10
@    MX    mx2.zoho.com    20
@    MX    mx3.zoho.com    50

# TXT Records
@              TXT    zoho-verification=zb12345678.zmverify.zoho.com
@              TXT    v=spf1 include:zoho.com ~all
zmail._domainkey    TXT    v=DKIM1; k=rsa; p=MIGfMA0GCS...
_dmarc         TXT    v=DMARC1; p=none; rua=mailto:hello@giftegwuenu.com

Testing Your Setup

Once everything is configured:

Send a test email from your new address to a Gmail account
Check email headers - Look for SPF=pass and DKIM=pass
Use a testing tool like mail-tester.com to check your deliverability score

If SPF or DKIM fails, double-check your DNS records and wait for propagation (can take up to 48 hours, though usually much faster).

Accessing Your Email

You can access your Zoho Mail through:

Web: mail.zoho.com
Mobile: Zoho Mail app for iOS/Android
Desktop client: Configure IMAP/SMTP in your preferred email client

IMAP/SMTP Settings

If you want to use a desktop client like Apple Mail or Thunderbird, here are the settings. Note that IMAP/POP access requires a paid Zoho plan, so if you're optimizing for free, you'll want to stick with the web and mobile apps.

Incoming (IMAP):

Server: imap.zoho.com
Port: 993
Security: SSL

Outgoing (SMTP):

Server: smtp.zoho.com
Port: 465
Security: SSL

Wrapping Up

Setting up a custom email might seem intimidating at first, but Zoho's one-click verification makes it incredibly straightforward - you can have everything configured in minutes without touching DNS records manually. Even if you go the manual route, it's really just a matter of adding a few DNS records. With Zoho's free tier and Cloudflare's DNS management, you get a professional email setup without any monthly costs.

Now when I send emails from hello@giftegwuenu.com, they land in inboxes properly authenticated. That's a win!

Have you set up custom email for your domain? I'd love to hear what provider you chose and why.

Resources

Zoho Mail Setup Guide
Cloudflare DNS Documentation
SPF Record Syntax
DMARC Explained
Mail Tester - Check your email deliverability score

What is llms.txt and Why Your Website Might Need One

Mon, 14 Apr 2025 00:00:00 GMT

There’s been so much going on in the AI space lately, and I’ve been spending time catching up, both with Workers AI at work and just staying plugged in to what's happening across the AI ecosystem. As always, I like writing down the things I’m learning, for future me and for anyone else who finds this stuff interesting.

So, let’s talk about something I recently discovered: llms.txt.

What even is llms.txt?

At first glance, it sounds a bit like robots.txt, and while there’s a tiny resemblance in concept, it actually serves a different purpose. llms.txt is a proposed standard, basically a markdown file you can place at the root of your website (like giftegwuenu.com/llms.txt) to help large language models (LLMs) better understand what your site is about.

Unlike web crawlers that index your site for search, this is meant for LLMs at inference time. So, not exactly for training, but for those moments when someone prompts an AI and it tries to pull context from your website. The idea is to provide a simple, structured overview of your content to make it easier for these models to find the important stuff.

Why does this matter?

LLMs aren’t great at digging through cluttered web pages. They can get distracted by navbars, ads, or just irrelevant content. And because they have a limited context window (aka how much they can “see” at once), giving them a shortcut to the good stuff just makes sense.

With llms.txt, you can:

Highlight key sections like docs, tutorials, or guides
Help AI tools give users better answers
Control what parts of your site should be prioritized

Basically, this whole concept lets you say, “Hey AI, here’s what you should check out first.”

What does a llms.txt file look like?

Here’s a sample format for a llms.txt file:

# My Website

> A brief description of what the site is about.

## Docs
- [Getting Started](https://example.com/docs/start): A quickstart guide.

## Blog
- [Latest Post](https://example.com/blog/llms-txt): Covers how to use llms.txt.

## Optional
- [API Reference](https://example.com/api): Full list of endpoints.

You can get fancier with more sections or use llms-full.txt if you want to go deeper, but the standard is intentionally lightweight.

How do you create one?

You can absolutely write one manually (it’s just markdown!), but if you want a head start, tools like Firecrawl make it super easy to get started. They’ll crawl your site and generate the file for you.

Who’s already using `llms.txt`?

This isn’t just a niche idea, some major players in the industry are already experimenting with llms.txt for their docs:

Cloudflare, we’ve rolled it out on our docs too
Anthropic, helping their AI models better parse internal resources
Perplexity AI, making it easier for their LLM-powered search to reference accurate content
ElevenLabs, guiding AI to their most relevant documentation

Curious who else is on board? Check out the llms.txt directory to browse a growing list of websites using this format.

Final thoughts

I think it’s a smart and simple way to make our websites more AI-accessible, without needing to change anything.As someone who builds and writes a lot on the web, it just feels like a nice step toward being intentional with how AI interacts with our content.

Especially in a world where LLMs are becoming the new interface to the internet. It’s also very easy to pass the file to ChatGPT, Cursor, or whatever AI tool you’re using, so it can quickly understand your site’s structure and context.

Would you consider adding llms.txt to your site?

Build a Bookmark Manager with the HONC Stack!

Tue, 04 Mar 2025 23:00:00 GMT

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:



	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:







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);
});

Seed the Database

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


...
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:



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="min-h-screen bg-gray-100">
				<h1 class="my-6 mb-4 text-center text-4xl font-bold">📌 Bookmark Manager</h1>
				<div class="mx-auto my-6 w-full max-w-xl rounded bg-white p-6 shadow-md">
					<form
						hx-post="/api/bookmark"
						hx-target="#bookmarkList"
						hx-swap="beforeend"
						class="mb-4 flex flex-col gap-2"
					>
						<input
							type="text"
							name="title"
							placeholder="Title"
							required
							class="rounded border p-2"
						/>
						<input type="url" name="url" placeholder="URL" required class="rounded border p-2" />
						
						<input
							type="text"
							name="description"
							placeholder="Description"
							class="rounded border p-2"
						/>
						<input
							type="text"
							name="tags"
							placeholder="Tags (comma-separated)"
							class="rounded border p-2"
						/>
						<button
							type="submit"
							class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
						>
							Add Bookmark
						</button>
					</form>
				</div>
				<ul id="bookmarkList" class="mx-auto w-full max-w-xl space-y-2">
					{bookmarks.map((b) => (
						<li
							class="flex items-center justify-between rounded border bg-white p-2"
							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="rounded bg-red-500 px-2 py-1 text-white 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!

2024 Year In Review

Tue, 31 Dec 2024 23:00:00 GMT

Writing year-in-review posts has always been a tradition I deeply enjoy. They offer a chance to pause, reflect, and celebrate the journey, something I haven’t done in recent years as consistently as I’d like. This lapse is partly due to blogging less frequently, but I’ve always found value in keeping a record of my accomplishments throughout the year. It helps me appreciate how far I’ve come, and this year was no different.

In fact, I tried something new this year, I started keeping a Wins Jar.

Inspired by a tweet I saw early in the year, I adopted the idea of writing down small wins and storing them in a mason jar. The concept is simple yet powerful, by the end of the year, you can revisit those moments, triggering a sense of joy and accomplishment. It's a tradition I’m excited to carry forward in the years to come.

Now, onto my 2024. This year was a mix of the anticipated and the unexpected. While I had envisioned some of these, I didn’t foresee how quickly they would unfold. Here's a look back at my year across the key aspects of my life:

Life

You know that feeling when you’ve prayed for something, trusting in God’s infinite mercies, and He answers in a way that exceeds your expectations? That’s exactly how this year unfolded for me. For some time now, I’ve been thinking about settling down and starting a family, but I envisioned it as something that would happen over the next couple of years.

However, God had His own perfect timing in mind. This year, I reconnected with a longtime friend, and what began as a simple reconnection quickly blossomed into something beautiful. Before I knew it, we were married and, to our absolute joy, expecting our first child, all within the first seven months of the year.

The pace at which everything happened was unexpected, but it’s a testament to how God’s plans for us are often better than anything we could imagine. What I thought would take years unfolded in months, and I couldn’t be more excited and grateful. This year has been a whirlwind of blessings, and I’m stepping into this new chapter with immense joy and faith.

Career

This year, one of my major highlights was getting promoted, a milestone I’ve been working toward for a while. It was incredibly rewarding to see my efforts recognized and to step into a role with more responsibility and impact.

Another highlight was publishing my second LinkedIn Learning course, this time focusing on web accessibility, a topic I’m deeply passionate about. Sharing my knowledge and helping others understand the importance of creating inclusive digital experiences was both fulfilling and inspiring.

I also had the opportunity to engage in public speaking and travel extensively for work, which allowed me to connect with new communities and share my expertise. Toward the end of the year, I reduced my travel commitments as I prepared for my growing family, but I’m proud of how much I accomplished in the earlier months.

As I reflect on this year, I feel proud of my achievements and grateful for the opportunities I’ve had. In 2025, I’m excited to challenge myself further, grow in my career, and make the most of the opportunities that come my way.

Health

At the start of the year, I had high hopes for my fitness journey. I began strong, with clear intentions to commit, but over time, I found myself slipping back into old patterns. This seems to be a recurring theme for me, setting goals but finding excuses along the way. However, this year, I had a valid reason: I was expecting!

While I couldn’t commit to intense workouts, I focused on staying active in ways that felt manageable and safe for my pregnancy. It wasn’t perfect, but I’m proud that I made an effort to prioritize movement during such a transformative time in my life.

Looking ahead to next year, I want to approach my health with renewed energy. My goal is to adopt a more balanced and sustainable approach, including improving my diet and cutting down on carbs. As I recover from pregnancy and adjust to life postpartum, I’m looking forward to making gradual changes that will benefit both my physical and mental well-being.

Looking Ahead

As 2024 comes to a close, I’m filled with gratitude for the wins, both big and small, and the unexpected surprises that shaped this year. The Wins Jar reminded me that every step forward matters, and it’s those small moments that build a life well-lived.

In 2025, I hope to continue growing in my personal and professional life, embracing new opportunities, and cherishing the journey as it unfolds. Here’s to more wins, more growth, and more joy in the year ahead! I wish everyone a happy new year!

Dealing with Burnout!

Tue, 19 Nov 2024 23:00:00 GMT

Well, well, well! It’s time I faced the truth, I’ve struggled with burnout for most of the last two years (2023-2024, I see you). This has been the lowest I’ve ever felt, both energetically and creatively, when it comes to work and my passion projects.

A Trip Down Memory Lane

Back in early 2019 through to 2023, I was bursting with energy and excitement about exploring new paths in my career. And I did just that! During those years, I achieved so much:

Grew my online audience
Published two courses
Tons of Speaking Opportunities
Joined ambassador programs

…and celebrated countless wins along the way. However, as time passed, I began to feel increasingly stressed, and slowly but surely, burnout crept in.

Why Did This Happen?

Looking back, I realise I might have stretched myself too thin. Life happened, and this year especially, has been overwhelming in ways I couldn’t anticipate. One of the biggest changes? I got married and I’m currently 9 months pregnant. So, yeah, there’s a lot going on.

Why am I writing this? Well, I’ve evaluated my situation and decided it’s time to climb out of this burnout hole. I want to return to doing the things I love and enjoy, the things that make me feel fulfilled.

The Wake-Up Call

Recently, I read an article recommended by Amy Hoy from Stacking the Bricks. It included a checklist of burnout symptoms, and many of them resonated deeply with me both in my personal projects and work life.

Job burnout symptoms

To find out if you might have job burnout, answer these questions:

Do you question the value of your work?
Do you drag yourself to work and have trouble getting started?
Do you feel removed from your work and the people you work with?
Have you lost patience with co-workers, customers or clients?
Do you lack the energy to do your job well?
Is it hard to focus on your job?
Do you feel little satisfaction from what you get done?
Do you feel let down by your job?
Do you doubt your skills and abilities?
Are you using food, drugs or alcohol to feel better or to numb how you feel?
Have your sleep habits changed?
Do you have headaches, stomach or bowel problems, or other physical complaints with no known cause?

As I read through this list, I saw myself reflected in so many of these symptoms. It was a tough pill to swallow, but also a moment of clarity.

Moving Forward

Now that I’m aware of the problem, I’m determined to take actionable steps to help myself heal and grow. I refuse to let my potential go to waste or feel like I’m being left behind.

Here’s to rediscovering what fuels my spirit, reigniting my motivation, and building a life that feels balanced and fulfilling again. You can expect to see me back to blogging, creating videos, and sharing my love for technology with renewed energy and purpose.

Hey! While you're still here, please subscribe to my YouTube channel, I’ve got some exciting content coming your way!

The Best Time to Learn to Code is Now

Mon, 12 Feb 2024 23:00:00 GMT

Are you considering learning to code but keep putting it off because you need more time or experience? The truth is, there is no better time to start learning than now.

The demand for skilled coders has never been higher. With the rapid growth of technology in every industry, companies seek individuals who can create, maintain, and improve their digital products. This means that the developer job market is constantly expanding, and the opportunities are endless.

Note that although there have been layoffs in the tech industry, this is not a permanent problem. The demand for skilled coders remains high, and the industry is expected to bounce back. Learning to code now can still provide you with valuable skills and open up opportunities in the long run.

Coding is no longer a skill reserved for computer science majors or tech enthusiasts. With the abundance of online resources, coding has become accessible to anyone interested and willing to learn. You can find free or affordable courses, tutorials, and coding communities online to get you started.

Another reason to start learning to code now is that it can benefit you in any career. The ability to code is an invaluable asset in today's digital age. It allows you to automate tasks, analyze data, and create digital solutions to problems. Even if you don't plan on becoming a professional developer, having the ability can make you a more competitive candidate.

So, what is making you stall? With the demand for skilled developers on the rise and the abundance of accessible resources, there is no better time to start than now. Get started on your coding journey today.

Delete Multiple Branches in Git

Mon, 22 Mar 2021 23:00:00 GMT

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.

Show Your Work!

Tue, 02 Mar 2021 23:00:00 GMT

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.

Video Review

Get the book here :)

Buddy vs. Travis CI: A Detailed Comparison

Wed, 10 Feb 2021 23:00:00 GMT

Continuous Integration(CI) and Continuous Deployment(CD) are both software development techniques mainly used in modern development practices.

The concept of continuous integration is a process that involves the practice of merging all developers working branches on a shared repository several times a day. Each branch goes through an automated build check which in turn runs tests to ensure no errors are found before merging.

The main goal of CI is to prevent integration problems, referred to as "integration hell" in its early adoption. On the other hand, Continuous Deployment is closely related to Continuous Integration and refers to a software engineering approach in which software functionalities are delivered frequently through automated deployments.

In this post, we’ll take a look at two of the most popular CI/CD tools and outline the features of both, and also get to know each of them better. Let’s get right into it, shall we?

What is Buddy?

Buddy is a smart CI/CD tool for development designed to provide a suite of automation tools that modern development teams can use to accelerate their development lifecycle from coding, to testing and delivering the products to their customers. It uses delivery pipelines to build, test and deploy software from GitHub, BitBucket, and GitLab. The pipelines are created with over 100 ready-to-use actions that can be set up in different ways.

Buddy is configured to perform predefined actions in a sequence which are called Pipelines. These pipelines can be triggered automatically on push, manually, or recurrently. Let’s take a look at some features Buddy comes bundled with.

Key Features

Buddy offers the following benefits:

Native Docker support.
Flexible Build Configuration - Allows both UI and YAML configuration for creating Pipelines.
Over 100+ ready-to-use actions.
Support Instant Deployments to FTP/SFTP, AWS, Google Cloud, Digital Ocean, Heroku, Kubernetes, etc.
Integration with GitHub, GitLab, and BitBucket out of the box.
Builds are run in isolated containers with cached dependencies.
5-minute setup of the complete environment.

What is Travis CI?

Travis CI is a hosted continuous integration service that is free for open-source projects and used to build and test software projects. Travis CI is focused on enabling users to quickly test their code as it’s being deployed. It has support for both small and large code changes, and it watches when a change is detected, It can provide feedback if the change was successful or not. Travis CI is configured by adding a file named .travis.yml, which is a YAML format text file, to the root directory of the repository.

Travis CI has support for container builds, and also supports Linux Ubuntu and Mac OS platforms as well as have support for other different programming languages, such as JavaScript, Ruby, PHP, Java, C#, and a lot more.

Key Features

Setup in seconds- Getting up and running with Travis CI is as easy as enabling a project, adding basic build instructions to your project, and committing code.
Pull Request Support - Test every pull request in your project before it gets merged.
Bundled with support for 20 different languages out of the box, including Javascript and Node.js, Ruby, PHP, Python, Mac/iOS, as well as Docker.
Different Platform support- Pre-installed database services and can simply be enabled in your build configuration, MySQL, PostgreSQL, ElasticSearch, Redis, Memcached, etc.
Supports automatic deployment for passing builds.

Detailed Comparison Between Buddy vs Travis CI

	Buddy	Travis CI
Build Configuration	All configurations are driven by the web platform and as well as a YAML file depending on the option you decide to go with.	All configurations are driven by YAML files within the code.
Web UI	Intuitive UI as well as ability to get up and running in 5 minutes and setup configuration on the UI or with YAML files.	Decent UI that outlines all the benefits of the platform but one will have to set up configuration using a YAML file.
Continuous Delivery Pipelines	With Buddy, you can define multiple actions for a pipeline. I.e upload files to a server and update assets on every push.	Travis has a similar workflow which is called Build Stages. It allows you to group and build jobs in parallel.
Docker Support	Buddy comes bundled with Docker support.	Travis CI support Docker only in a specific environment. It doesn’t have support for Docker on macOS at the moment.
Version Control	Buddy is available on both GitHub, GitLab, and BitBucket.	Travis CI only offers limited support for projects hosted on GitHub.
Platforms	Buddy is compatible with all platforms including Mac and Linux.	Travis has support for only Mac, Linux, and iOS platforms.

Wrapping Up

In this article, We have seen a comparison between Buddy and Travis CI automation tools and we looked at both of them extensively. Now that we have a good understanding of what Buddy and Travis CI can do and also have an idea of the best use case for each of the tools. With this, we can then go ahead and decide which tool to use for our projects going forward.

Vuejs Global 2020: A Recap

Tue, 29 Sep 2020 22:00:00 GMT

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

https://www.youtube.com/watch?v=ajGglyQQD0k

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 works from scratch.

https://www.youtube.com/watch?v=gojCkw5Ih7E

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.

https://www.youtube.com/watch?v=E3kyCodVVOM

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

https://www.youtube.com/watch?v=U3oYroX1LCQ

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. He shared why speed should be treated as a feature and the importance of performance optimization in Vue.js applications.

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.

https://www.youtube.com/watch?v=vykQhui3tfE

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.

https://www.youtube.com/watch?v=Vp5ANvd88x0

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.

Deploy a Gridsome App on Azure Static Web Apps

Sun, 07 Jun 2020 22:00:00 GMT

Microsoft Build happened a few weeks back, among the various exciting news, one of my favorite ones was the newly unveiled Azure Static Web Apps. I'm excited to give it a try and show you how to deploy a Gridsome web application. There's already enough tutorials about this why write more? Well, because I couldn't find one with a Gridsome example and I decided to take on the opportunity, there's never enough written tutorials on a subject.

What is Azure Static Web Apps?

Azure Static Web Apps is a service that automatically builds and deploys full-stack web apps to Azure from a GitHub repository.

These are some of the features it ships with out of the box:

Free web hosting
Free SSL Certificates
Authentication Integrations
Custom Domains
Globally distributed

Here's a more detailed guide on how Azure Static Web Apps Works.

In this tutorial, We'll go over how to deploy a static website to Azure using the Static Web Apps service. For this example, I have a Gridsome app I'll like to deploy to this service, and I'll walk through how to set up and deploy my app.

Prerequisites

To follow this guide, you need to have basic knowledge of Vue.js, have an Azure account, Node.js installed, and a GitHub account handy.

Step 1:

Install Gridsome CLI tool:

npm install --global @gridsome/cli

Step 2:

I’m using a starter project I created to get things moving fast here. Go ahead and run the command to create a new Gridsome project.

gridsome create my-blog https://github.com/lauragift21/gridsome-minimal-blog

Now run your app locally with the command.

npm run develop

Step 3:

We have our Gridsome application up and running, Let's push the app to GitHub we'll do so using the following commands:

git add.

git commit -m 'my new gridsome blog'

Next, create a repository on GitHub called my-fancy-blog or use any fancy name you want and run the following commands:

git remote add origin git@github.com:<YOUR-USER-NAME>/my-fancy-blog.git`

git push -u origin master

We've now added our application to GitHub successfully. Let's move on to the last step.

Step 4:

This is where we deploy the web app on Azure Static Web Apps.

You need to have an active Azure account to follow these next steps.

Login to your Azure account and navigate to Azure Portal
Click on create a resource

Search for Static Web Apps and click create

Next, pick a subscription from the dropdown and pick a resource group in my case, I selected the default subscription and created a new resource group.
Give your app a name and choose a region that’s closest to you.
Click on the sign in with the GitHub button. It'll enable you to connect your repository to Azure Static Web Apps.

Once you have GitHub connected, you can choose your GitHub repository and choose the branch you want to deploy.

Specify a folder location to store static output in my case I’m using the dist directory.

Azure sets up a default npm run build in my GitHub actions workflow which can be customized to a different command. In my case, I didn't need to set that up since it's the default command.

In the last step, we can review our configuration to make sure we have everything set up correctly and click create to get the app deployed.

That's it! You'll get redirected to a page showing your app deployment is ongoing.

To check how things are working under the hood, Log on to GitHub and check the actions tab on your repo.

You should see the actions running, and when that ends, your app should be live. Check back on the Azure portal you should see a browse button by clicking on it will take you to your deployed app🎉

Conclusion

That was fun! I'm quite impressed with how straightforward it was to get this working. In just a few clicks, I deployed version of my site. If you're interested in learning more about how to deploy another kind of application, The Azure team has a well-documented guide on how to do that. I hope this was helpful as much I enjoyed writing and trying out Azure Static Web Apps.

Soft Skills Every Software Developer Should Learn

Thu, 30 Apr 2020 22:00:00 GMT

Hello People! Let's move away from core technical things for a bit. In this video, I share soft skills that I feel every developer should learn and improve.

https://www.youtube.com/embed/b4b_z6gFmlY

<br>

The norm that technical skills are important than the core soft skills does not hold true in the industry today. We all have to balance both to stay relevant in the industry.

I learned a lot from Pluralsight this month already and I decided to learn a bit more about soft skills. Here are some courses that I really enjoyed taking.

Developing a Killer Personal Brand - Jason Alba

The Art of Speaking: Scott Hanselman

How to Be a Great Mentor: Get More out of Mentoring - Jason Alba

Enjoy the video :)

Applying CSS :focus-within

Wed, 12 Feb 2020 23:00:00 GMT

In my quest to learn something new every week. I came across a not so new pseudo-class element :focus-within. Let's take a look at how it works and how to apply it to our styles.

The :focus-within pseudo-class represents an element that is paired with the :focus pseudo-class or has a descendant that is matched by :focus.

NB: the focus here means when you click, tap or tab through an element such as a form input or a link.

I like how Chris Coyier explains it in simple terms:

It selects an element if that element contains any children that have :focus.

How is this different from `:focus`?

The :focus pseudo-element works differently, an element receives focus when the :focus element is applied to it, but, in a case when you have a collection of child elements it is not common to use :focus pseudo-class to select the parent element. The :focus pseudo-class applies only to the focused element itself.

https://codepen.io/lauragift21/pen/VwLLggX?tabs=result,css

This is what :focus-within is able to solve. We can use :focus-within pseudo-class if we want to select an element that contains a focused element or elements that has descendants matched by :focus. Let's see how to achieve that.

Applying :focus-within

:focus-within is useful for different use-cases. You can think of using it:

To highlight an entire form when one of its input fields is in focus.
Highlight rows of a table and change the background color when a user clicks on it.

Here's an example, for highlighting an entire <form> container when the user focuses on one of its <input> fields.

https://codepen.io/lauragift21/pen/gOppEVP?tabs=result,css

Browser Support

As of 2020, This CSS feature is widely supported only IE browsers don't have support yet. Here's a table of current browser that fully supports :focus-within.

Final Thoughts

The :focus-within element is an accessibility win for developers and users on the web. We should always keep it in mind while coding it's way better to reach for this than use JavaScript to accomplish the same task.

Resources

CSS Focus Within Spec

MDN Docs

CSS Tricks :focus-within

TIL: CSS Media Queries

Thu, 06 Feb 2020 23:00:00 GMT

I have been working on the web for a few years now but I haven't paid any attention to the W3C standards or visited the website to see where all the magic on the web happens.

Well, a few days ago I stumbled on Rachel Andrew's smashing article celebrating the W3C at 25 and one thing led to another I landed on the CSS working group page several clicks down the line and I'm lost and amazed at what I had no idea existed.

The web is an open platform and there are a lot of amazing people working together to build and manage the web standards we all work with from accessibility, CSS, JavaScript and a lot more. Why I'm saying all of this is because from my crazy search I learned something new and I'll like to share with others.

TIL - Today I Learned

Now we've come across the @media CSS rule but did you know that they are cool things you can do with it asides making your website responsive? The syntax of a media query is composed of an optional media type(such as print or screen) and any number of media feature expressions. In this article, I'll share some media features I previously didn't know about and hope you learn and share them too.

NB: Some of the features I'll share are part of the CSS Working Group Draft and are not finalized yet. The features are part of the Media Queries Level 5 specifications and should be used

Prefers-Color-Scheme

The prefers-color-scheme CSS media feature is used to detect if the user has requested the system to use a light or dark color theme. This is very useful for aesthetics and accessibility purposes and a lot of developers now adopt the dark mode feature, most websites I have visited lately have the dark mode feature implemented mine included. This media feature can be implemented with these modes:

no-preference: Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the boolean context.
light: Indicates that the user has notified the system that they prefer an interface that has a light theme.
dark: Indicates that the user has notified the system that they prefer an interface that has a dark theme.

Here's a short demo of how this feature works.

https://codepen.io/lauragift21/pen/ZEGYzXB?tabs=result,css

This feature was added in Media Queries Level 5 spec and is supported by major browsers you can try this out right now by switching the default theme of your device. The can I use embed give a detailed view of browsers that are fully supported.

Prefers-Reduced-Motion

The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses. This feature is super important for people with the vestibular disorder or motion sickness this can be uncomfortable for them visiting a website with a lot of animation and motion so this feature is a great way to minimize or turn motion off. Luckily, Operating systems like Android, iOS, macOS, or Windows in their accessibility settings have allowed users for a long time to reduce motion wherever possible.

This media feature can be implemented with these modes:

no-preference: Indicates that the user has made no preference known to the system.
reduce: Indicates that the user has notified the system that they prefer an interface that minimizes the amount of movement or animation, preferably to the point where all non-essential movement is removed.

Here's a demo of how this feature works. The box will remain animated unless you switch the reduce motion option on let's try doing that by checking the accessibility settings on your device you'll immediately notice the animation is turned off.

https://codepen.io/lauragift21/pen/WNvbNGR?tabs=result,css

Added in Media Queries Level 5 spec and is supported by major browsers you can try this out right now by switching the default theme of your device. The can I use embed give a detailed view of browsers that are fully supported.

Prefers-Contrast

The prefers-contrast CSS media feature is used to detect if the user has requested that the web content is presented with a higher (or lower) contrast.

This feature is still experimental and it's currently in the process of being added to the web platform.

The media feature can be implemented with these modes:

no-preference: Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the boolean context.
low: Indicates that the user has notified the system that they prefer an interface that has a lower level of contrast.
high: Indicates that the user has notified the system that they prefer an interface that has a higher level of contrast.

Note: No browser currently implements this feature so I can't show an example of how it works but I look forward to seeing this feature ship.

Prefers-Reduced-Transparency

The prefers-reduced-transparency CSS media feature is used to detect if the user has requested that the system minimize the amount of transparency used across elements.

This feature is still experimental and it's currently in the process of being added to the web platform.

The media feature can be implemented with these modes:

no-preference: Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the boolean context.
reduce: Indicates that the user has notified the system that they prefer an interface that minimizes the amount of transparent or translucent layer effects.

Note: No browser currently implements this feature so I can't show an example of how it works but I look forward to seeing this feature ship.

Prefers-Reduced-Data

The prefers-reduced-data media feature is used to detect if the user has a preference for being served alternate content that uses less data for the page to be rendered.

The media feature can be implemented with these modes:

no-preference: Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the boolean context.
reduce: Indicates that the user has expressed the preference for lightweight alternate content.

Note: No browser currently implements this feature but here's an example of how it works from Adam Argyle tweet.

https://twitter.com/argyleink/status/1225240181822742529

Conclusion

I'm excited about these additional media features and can't wait to start using them in my web projects. Like I mentioned earlier a few of them are still in the working draft for Media Queries Level 5 and there's no browser support for now. But 2020 is the year more capability grows on the web and I'm here to experience all of it. Share your thoughts on these if you have used it or have any thoughts on this specification.

Resources

https://drafts.csswg.org/mediaqueries-5

https://web.dev/prefers-color-scheme

https://a11y-101.com/development/reduced-motion

https://developers.google.com/web/updates/2019/03/prefers-reduced-motion

2019 In Review; My Year of Grace

Sun, 29 Dec 2019 23:00:00 GMT

The year is 2025, and I’m randomly scrolling through my blog and I come across this post I’ve written, one thing is certain I’ll have a sheepish smile on my face. The purpose of writing a year-end review is to reflect on how well you did, check yourself and set goals for the next year. I started doing this in 2018 and I know there’s value here and it helps reinforce the fact that I’m doing great and hitting my long term goals.

I resolved at the beginning of the year to create a list of things I wanted to achieve before the year runs out I used Notion for tracking my progress which I find helpful. I’m happy to say I accomplished all my goals for the year. Well, except a few like learning how to drive but I’ve moved those to my 2020 goals.

Highlights of the year ✨

I tagged 2019 my year of grace because a lot of events that happened in my life didn’t go the way I had planned it they were even better than I expected. I am so sure God is looking out for me because I had a good year.

In 2019, I…

Got promoted at work in January
Hosted 3 events for Vue Vixens Nigeria
Started a the JAMstack Community with William and hosted 2 events
Spoke 5 times this year and gave 1 workshop
Traveled to 3 countries and visited 6 cities
Invited to 3 International Conferences
I became a Media Developer Expert for Cloudinary
Started a YouTube Channel and created 12 videos and got up 464 subs in less than 6 months
Published 23 posts on my blog and my blog traffic grew to 15,000 page views and on Dev.to 129,000 post views.

Work

Overall I think my growth pivoted this year, Things started great at work as I got promoted in January, I was involved with a lot of open-source projects. I contributed to Gridsome Docs, Storefront UI, Learning Resource Roadmap. In total, I had 1017 contributions on GitHub. I created a starter for Gridsome called Minimal Blog Starter which I’ve seen a couple of people using.

Writing, Speaking & Community

I wrote a total of 23 articles both on my blog and other publications and traffic on my blog grew by over 15,000 page views. I shared a lot of tutorials and decided to try video tutorials as well. I created 12 videos on my YouTube Channel and grew my subscribers to 464 amazing subs.

My favorites among articles I wrote:

and YouTube Videos:

I spoke at 5 events, one of which was a meetup in Denver my first ever international speaking opportunity and gave a Vue Vixens workshop at Concatenate Conference.

I was super active in the community this year. This comes with a lot of hard work and opportunities. I helped organized 6 events (meetups and a conference). The Vue Vixens Nigeria chapter I help run had 3 events with over 150 women introduced to Vue.js. JAMstack Lagos a community I started with a friend William Imoh now has almost 600 members on Meetup with two events under our belts I look forward to doing more in 2020. I also helped co-organize one of the biggest conferences in Africa Concatenate Conference with other amazing folks (Sarah, Simona, Christian, and Silm) this is my biggest highlight of the year.

My dream to attend an international conference came to pass! Not only did I get a chance to attend one but I attended three different conferences. Microsoft Ignite, GitHub Universe and AWS re:Invent. This by far was one of the biggest events in my life this year and I’m grateful because not only did I attend I got to meet some of my heroes and made new connections not to forget the tons of knowledge gained on this adventure.

I got recognized as a Media Developer Expert for Cloudinary. They started the program this year and MDEs are unique software and design advocates who share their knowledge, expertise, and insights at community events and across the social web, aided by Cloudinary’s products and resources. I was a guest on 3 podcasts in 2019 alone!! Views on Vue , That’s my JAMstack , and Front End Happy Hour.

Life

My life was quite interesting nothing out of the blue. I was more intentional about self-care and looking out for myself. Also, like my friend will say trying to live my best life.

I read about 3 books not proud of this because I wanted to do more but didn’t dedicate time to reach my set goal. I promise myself I’ll do better by investing in audiobooks.
I turned 24 and it feels like I’m getting old omg!!
I traveled to 6 cities in 3 countries. This was such an amazing experience and I look forward to doing more trips in 2020.
I decided to cut my hair. Best decision ever as I now feel free I never liked making my natural hair it was so painful.

The L's in My Life

I'll be lying to myself if I said the entire 2019 was great and only good things happened to me. Well, life they say is not always a bed of roses. I had different points in my life when I doubted myself and dealt with depression. Not even going to think about the amount of times I felt like an imposter. A shitty place to be in life is when you can't find happiness I was in this block for a period and I hated it. I got rejected from getting things I was really hoping I would secure but that didn't stop me from trying again when I failed because if anything I won't give up. I kept the energy high and my attitude to those rejections is to keep trying I'm taking this same energy into 2020.

Humans of 2019

I couldn't think of a better name for this section. I had grateful list in mind but decided to change it last minute. A special list of people who came through for me this year in one way or another and I want to thank them for taking a chance on me. These are people I now call friends and happy I have them in my life. Sarah Drasner, Franca Rotwukka, Simona Cotin, Karissa Peth, Adora Nwodo, Seyi Adeleke

What’s Next?

I have a couple of things planned out for 2020. I also look forward to doing even more work and creating more impact than I did this year. It’s been such an exciting and scary journey I’ve had and I sincerely look forward to what I do with myself in 2020. My mantra for 2020 is to Do The Work!! Some plans I’ve in the works and hope to achieve include:

More Speaking Engagements: I hope to speak at more events in 2020 and also improve my skills as a speaker.

Keep the Fire Burning; Learn In Public: I love the concept of Learning in Public and I want to be intentional about this in 2020. The act of learning in public means you get to share your skill development and your works in progress online, even before you think you’re ready. I want to continue sharing content on my blog, YouTube and help build communities.

Release Egghead Lessons: I became an Egghead Instructor this year and I’m working on a couple of lessons and hoping they get released in 2020.

Write a Book and release a Course: I started working on this project this year but I look forward to releasing them in 2020.

Land a New Job: I want to explore more opportunities by 2020 that includes finding a new job. I’m open to working remotely or relocation. If you have any leads please let me know thanks!

That wraps up my year! It was a great one I can’t wait to see what I do in 2020 as it’s the start of a new decade I’m so excited to keep growing and making an impact in my community.

Reflections from Microsoft Ignite 2019

Sat, 09 Nov 2019 23:00:00 GMT

This past week, I had the opportunity to attend Microsoft Ignite as a community leader. This is by far one of the best things that have ever happened to me this year. Over the last few years, I started my career in tech I've always wanted to attend an international conference I just didn't know when I'll get the chance to.

https://twitter.com/lauragift21/status/1191056103045550080

Microsoft Ignite is an annual conference put together by Microsoft with over 25k attendees ranging from IT Professionals, developers, architects, and data professionals who want to expand their proficiencies. The event features learning paths providing unmatched opportunities to explore the latest tools, receive deep technical training, and get specific questions answered by Microsoft experts.

https://twitter.com/lauragift21/status/1191449564458475528

The conference ran for 5 consecutive days and I had a lot of sessions scheduled but all I was looking forward to is Learn, Explore and Connect while at the conference.

Day 1 (Vision Keynote)

The first day of the conference was insightful I had first-hand experience attending Satya's keynote session where he made a couple of announcements of new products and improvements to other Microsoft products. One of my favorites was announcing Visual Studio online and Live share support.

https://twitter.com/lauragift21/status/1191368024588206080

Other announcements include:

Azure Stack Edge
Azure Arc
Azure Synapse
Autonomous Systems
Azure Quantum
Microsoft Edge announcements

I also got the chance to attend other sessions which I found interesting so much content to digest with a wide range of topics and interesting sessions to attend. I was able to attend these sessions as well.

Travel the world, meet the community - Elaiza Benitez
Creating an inclusive community event - Lars Klint

https://twitter.com/lauragift21/status/1191411453519171585

The Partner Expo area is also one place I liked visiting because I got the chance to learn about products from Microsoft's Partner on the work they do and how they are leveraging Microsoft in their products and another perk you get is free swags who doesn't like free swags right??

https://twitter.com/lauragift21/status/1192570538960576512

Day 2 (Developer Keynote)

The developer keynote themed "Application development for everyone" was one session I was looking forward to and I was not disappointed because the keynote speaker was Scott Hanselman and oh well we know he's an amazing speaker.

Here are my takeaways from the Keynote:

https://twitter.com/lauragift21/status/1191725350910341120?s=20

Visual Studio Online - You can create a dev environment in minutes just online and it works the exact way as Visual studio with access to the full extension marketplace.
Azure functions now have new languages support .Net Core 3.0 and Powershell.
Intellicode AI-assisted IntelliSense saves you time by putting what you’re most likely to use at the top of your completion list.
Live share support which lets you do real-time collaboration.

We had several other demos on stage from other amazing speakers.

Another session was an AMA with Scott Hanselman put together for the community leaders and that one was certainly one of my favorite I have a lot of favorites sessions you know! We got the chance to ask Scott any question we had in mind and he also shared his story with the entire room.

https://twitter.com/lauragift21/status/1191749405185126400

https://twitter.com/lauragift21/status/1191768696978649088

The last session I was in was something I was looking forward to listening to and it was another session from Scott Hanselman you can say it was a Scott Hanselman dedicated day! 😆

https://twitter.com/lauragift21/status/1191831297972408323

Day 3 & 4 (More Sessions)

The following days were really busy as I tried to attend as many sessions as I could. I missed some interesting sessions I scheduled but the good thing is it's all recorded and available to watch after. I prioritized meeting people from attending the sessions because I know I can always go back and watch them.

I also had a short interview with the channel 9 team and I talked about what community means to me and how being at Ignite has impacted me.

https://twitter.com/lauragift21/status/1191843689582211072

I also met Brian Holt omg!! 🤯

https://twitter.com/lauragift21/status/1192366791886024705

A lot of interesting places in the hub worth mentioning but one of the best was the therapy animal area with lot of pets to play with. Trust me I spent some time there.

https://twitter.com/lauragift21/status/1192459305531908096?s=20

Day 5 (Explore)

This was the last day of the conference after a long week I got the chance to explore since this was the last chance I had. One area I loved was the Diversity and Inclusion Lounge.

It had pictures and videos telling stories of people and the impact of Diversity and Inclusion. I think this is great to have this sort of thing at a conference because it creates a safe space for people not knowledgeable in this area to learn as much as they can.

I made two recap vlogs during the conference on my YouTube channel check that one out as well.

This conference was a big win for me because I got to learn and make connections that I never would have thought was possible I'll like to thank the following people for helping out in one way or another Simona Cotin, Nitya, Piyali, Sarah, Adam, and Meghan.

The Benefits of Owning a Personal Blog

Sun, 27 Oct 2019 23:00:00 GMT

As developers, We always tend to look up solutions to a bug or an error on Google and half the time we do this we are redirected to a blog written by another developer or even yourself in some cases. This is one of the ultimate reasons for owning a personal blog - teaching other developers.

In this post, I'll outline the benefits of blogging and why it's important to start a blog as a developer and also share several ways you can get your blog up and running.

I became aware of the benefit of personal blogging in February 2018. This was when I started my own blog. I initially took a course on Pluralsight about personal branding and it was a goal to complete at least one of the steps outlined in the course. I went ahead to start with blogging by purchasing my domain name even though I had no clue what content I will write about.

Let's start with the good stuff I'll share the benefits of starting a personal blog and further explain how to get a blog up and running. Because I think it's important I share, I'll also write about my process and share resources needed to move forward.

Benefits of Blogging

These are some of the reasons I feel it's really important to start your blog.

Sharing Knowledge: Most times you find yourself trapped trying to solve a specific problem and with all of Google's help you still can't find a solution. You are finally able to fix the bug and instead of hoarding that knowledge you decide to write an article on how you fixed the problem helping thousands of other developers. This is by far one of the importance of blogging you teach others and this is a very fulfilling experience especially when you get sent messages of how your article helped other developers.
Develop your Brand: Blogging helps boost your brand. You become known for your work and this will improve your reputation in the community.I have met a lot of people because I started blogging consistently and also gotten opportunities to grow my network.
Learning New Tech: Blogging is a good way to learn about new technologies and concepts. As developers, learning never stops for us it's a continuous journey so how do you keep up and still stay sane? I've discovered one way to make the best out of this is to learn a new concept and teach it that way you end up teaching other people and also solidifying those concepts.
Introduce yourself to the Community: When you consistently create helpful content and share it with the community. You become known as a teacher in your field. An example is if you create content on web development you become known in the web development community and that's a great way to make friends and connect with people in the community. Some platforms that will enable this happen are Twitter and Dev.to.

How do you start?

Now that you know the benefits of blogging how do you start your blog? I always get asked how I created mine and where I host my blog. I'll share all the details here. Now there are several ways to go about this and I'll recommend creating a blog and having a domain name that is closely related to your name. That way it is easy to find you on the internet. But feel free to disregard my recommendation and do what fits your needs.

Pick a Domain or Field: This should always be your first thought before going on to publish your first post. Think about what you want to specialize in. Are you more interested in web, mobile, security, or career guides? This is the best time to pick a domain you can as well do as much as you want but make sure you are specific to get a target audience that will always return to your blog.
Create a Platform: This is the interesting part that I love. You get to choose a platform that best suits your needs. I'm going to outline some platforms that I think is great and you make the choice.
- Build your blog! You can either decide to use Wordpress which is a pre-generated CMS or pick a static site generator like Gatsby and Hugo and create a custom made blog for yourself.
- Medium: You can create an account and post directly to medium the downside to this is you don't own your content.
- Dev.to: This platform allows you to post your content and has a huge developer community and also allows you to cross-post your content more on that later.
- Hashnode: Hashnode is also a great platform for blogging with a huge number of developer centered content.
Syndicate your content: I recently learned a concept called POSSE - Publish (on your) Own Site, Syndicate Elsewhere. This means you get to keep your content on your site and share on other platforms like Medium, Dev.to, and Hashnode and you keep ownership of your content.
Post on Social Media: Social media is a tool you can use to gain more readership. When you publish a new post remember to share across all your social media platforms to gain more audience.
Stay Consistent: Remember to stay consistent when you start your blog. That way you can always learn, teach and connect with the community and you can measure your success over time.

My Process

I follow the same process I've outlined above but I'll go ahead and share in detail how I create my content.

My blog is built using Gridsome static site generator hosted on Netlify and I write my content in Markdown.
I have a Notion Page dedicated to collecting blog post ideas when I think of an idea I add it on there.
I start an article by researching on the topic if it's new to me and coming up with an outline. After I complete the article I syndicate to Dev.to and share it on social media(Twitter, Instagram, Linkedin).
I also do this thing where I share after about 3 weeks on social media to gain more audience.

Thanks for reading! I hope you find this post helpful and if after reading this you decide to start blogging please share with me here or on Twitter.

More Resources

You should make a blog!
Why Blogging is Awesome
How to do technical blogging
10 Killer Tips: How to Format a Perfect Blog Post
Thoughts on blogging after six months on dev.to

Building A Career In Tech As A Newbie

Fri, 12 Jul 2019 22:00:00 GMT

The tech industry is ever evolving, what this means is the industry is growing rapidly and there’s no chance for you to be comfortable with an acquired skill without trying to grow or level up on a skill.

In this article, I’ll be sharing what it means to start out as a developer and how to keep building your career as you embark on this journey.

Starting Point 📍

Let’s begin this journey, Are you a newbie or you’re currently on the verge of switching careers and you are certain you want to venture into software development. I applaud your courage and I’m happy you’ve made that decision because you won’t regret it I assure you. I know it might be a bit overwhelming when you start out but with time everything will ease in and you will begin to understand how things work.

The tech industry today is one of the most supportive industries I’ve ever been a part of. Regardless of the path you have decided to take on be it Front-End Development, Back-End Development, Full Stack Development, Mobile App Development, and Data Science, etc, this article still relates to you and by following through with it I’m certain you’ll gain useful knowledge from it.

Now as a newbie in the tech world where do you start from? How do you get updates about the latest happenings, how do you get help when you’re stuck, how do you connect with other developers like yourself all of these are what is running through your mind and I totally get you. This is why I’m writing this article, to share the basic knowledge on how you can kickstart your career from scratch. Now to get you in the boat of what steps you should take to be successful. I'll be highlighting several ways you can kick start your career in tech.

Tips On How To Fast Track Your Developer Career

Building a career will involve you try out several ways on how you can be successful in the path and that you are involved in. The steps I’ll be outlining have proven to work for a number of developers including myself. so let’s get right into it. some ways you can leverage in building your career include:

Community
Online Resources
Mentorship

Community

Being involved with a community either online or in-person will go a long in helping you improve your career. There are several local communities that help foster the growth of developers both by organizing events like meetups and also by organizing workshops.

As developers, it is important that we have a community we belong to based on the fact that we get to learn how other developers think, we network with other developers at these events and we also get hear other people’s story on how they kicked off their journey in tech. Also being in a community gives you the opportunity to meet new friends or a potential employer which is a great way of breaking into the tech ecosystem if that is something you are looking out for.

A large number of developer communities exists across the world all you just need to do is find them. I’m a member of the GDG community and forloop Africa community and I can’t describe the benefits of joining communities enough. I’ll just urge you to find a local community and join.

Online Resources

This is a no brainer as we need to learn the tech right. That is the whole essence of starting the journey in the first place. Figuring out where to start your journey can be overwhelming but then that is why you have the Internet and Google to help us figure out these things.

They are a lot of online resources both free and paid that can help you in your journey of becoming a world class developer. After you’ve mapped out the path you want to take the next thing I’ll advice is to start learning the technologies you need to succeed. Defining a guided path for yourself is very important and setting goals for what you want to achieve is also important.

One of the many resources out there I’ll also recommend freecodecamp as a starting point if you’re interested in Front end development. Because it is very interactive and provides a guided path from beginner to advanced and lastly for the community behind it.

I’ll like to plug in a project I worked on for beginners venturing into front end development. It will also serve as a guide for you on your journey. Above all, the internet is flooding with a lot of great resources that will help you win in your new chosen career path.

Mentorship

Mentorship is the act of seeking the guidance provided by a mentor, especially an experienced person in a company or industry. Getting a mentor is also an important step you can take as an effort for building your career.

We as humans can succeed on our own as we are trained to fend for ourselves but we can do better by following the footsteps of those that are ahead of us. One of the most important thing you can do as a developer is to get a mentor that is interested in your growth and passionate about helping you become successful. In our career path, everyone has a role model right because I know I do.

One thing I learned while finding ways I can improve and build my career is not only seeking physical mentorship, by the way, it is great to go for it if you can. But also by following the steps of my role models. Who do you look up to in the industry? Find out how they started their journey what worked for them and what did not. This is in actual fact a great way to learn because you won’t be making obvious mistakes because you’ve learned from mistakes from others.

So really pick what works best for you in this case, a mentor that can check up on you from time to time and see how you’ve improved or follow the steps of the leaders in your field. If you’re up to it you can do both and that is great.

Advice For Developers

I want to share advice regarding your career and I think this is a great way to do it. I’ve always wanted to share with developers starting out what worked for me and how I think following in the same footsteps can be beneficial to others. So here we go.

Celebrate Your Small Wins: This is as important as every other thing you do, regardless of how small the progress you’ve made in your journey always learn to celebrate it. Doing this as often as possible makes you realize you’re not doing a terrible job after all and you’ll gain more confidence in your abilities which I think will make you want to do more and explore further possibilities.
Find Your Learning Style: Everyone learns differently, and I think finding out what method works for you earlier will influence how you learn over time. There are people who are more comfortable with traditional learning through bootcamps, others prefer watching videos tutorials and taking online courses or reading articles to grasp fundamental concepts. whichever method works for you, make it a habit and also stick to it as this will make your learning smooth and you avoid overwhelming yourself.
Don’t Be Afraid To Seek Help: A lot of people find it difficult to ask for help when they get stuck. I did too when I was starting out but I’ll say we should not be a victim and fall into the pit of having to figure everything out ourselves. Because it gets overwhelming as you’re learning and it is okay to ask for help and seek advice from more experienced developers and they’re a lot of ways this can be done. i.e Stack Overflow, Forums, Community Slack Groups, and mentors can be of help when you get stuck and need answers.
Learn By Doing: This is as important as other advice I’ve given, I think this is very relevant when you’re starting out. Learning by doing here means you’re not just watching that youtube video or reading that article on CSS Grid, but you’re also practicing what you’re learning because, to be honest, that is the most efficient way to learn. When you learn a new concept and you go ahead to tinker with the code I think you’ll have that knowledge stick as compared to just reading that article or watching that course. Always remember to try out what you just learned, improve on it and even go ahead and build your own based on what you’ve learned.

Wrapping Up

In this article, I outlined ways new developers can break into the tech industry and also sustainably build their career. My takeaway from my years in tech and what I think should be general knowledge to everyone is that you never stop learning as a software developer.

This journey of building your career never ends because you have to continue sustaining what you’ve built and in this ever-changing industry we are in, the only way to do it by staying abreast with the technologies you work with and look for means to gain new knowledge as time goes on. Once you know this and understand it then you are going to do well regardless of your chosen career path.

Love At Second Sight With TailwindCSS

Tue, 28 May 2019 22:00:00 GMT

Imagine my thoughts when I first saw the TailwindCSS Framework, in my head I already thought this was one of the usual frameworks like Bootstrap, Bulma, and Foundation, etc that I have tried using before and I took my eyes off it for a second.

Until recently I decided to give it another look after I saw the recent release of v1 and to my greatest surprise, I fell in love with TailwindCSS. In this article, I’ll be introducing you to TailwindCSS and why I think it is a different ball game entirely with useful examples. Let’s get right into it, shall we?

Introduction

TailwindCSS is a utility first CSS framework for building custom user interface designs. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Why TailwindCSS?

One of the common reasons why I think I got love struck with TailwindCSS is that I found out I can get the following out of the box:

Customization on the fly: Tailwind is easily customizable to fit your needs. You can customize your own colors, border-sizes, shadows, spacing and a whole lot more. You're the limit as far as customization is concerned with TailwindCSS.
Component-friendly: TailwindCSS is also a component friendly CSS framework, what this means is that instead of having repeated utility classes for your UI, you can combine common patterns and abstract it out as component classes that eventually become reusable.
Responsive to the Core: TailwindCSS comes bundled with responsive variants for different screen sizes that can be adopted in your UI by only prefixing the screen size to the class.

Getting Started

To get started with TailwindCSS in your project you will need to install it as a dependency or you can use it as a CDN. But mind you it's not a recommended choice to use the CDN option because some features that make tailwind awesome won't be available for use.

<!--using CDN-->

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />

# using npm
npm install tailwindcss -save-dev or

# using yarn
yarn add tailwindcss --dev

After installation, we will need to inject tailwind's styling into our CSS using the @tailwind directive. So let's go ahead and add Tailwind's base, components, and utility styles into our styles.css

@tailwind base;

@tailwind components;

@tailwind utilities;

With the recent release of v1.0, the good news is we won't need to create tailwind.config.js file anymore as this is now optional.

Using TailwindCSS CLI

Now, we can use tailwind's CLI to build out our CSS into tailwind's styles using the command below.

npx tailwind build style.css -o output.css

The tailwind command is simply taking our default CSS file style.css as the input and processing the styles into output.css as the output file.

Instead of using style.css as the stylesheet in our HTML you can now use output.css to ensure tailwind styles are being applied to our HTML content.

<link rel="stylesheet" type="text/css" href="output.css" />

Let's now go ahead and create some examples that we can utilize to explore the capabilities of TailwindCSS. We can also spin up tailwindcss on codepen or have it on our local computer whichever one works for you.

Example 1: Creating a Card

Let's create a card using TailwindCSS and see how seamless this process is without writing any line of CSS.

<div class="mx-auto my-3 max-w-md overflow-hidden rounded shadow-lg">
	<img
		src="https://images.unsplash.com/photo-1557310717-d6bea9f36682?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&h=400&w=634&q=80"
		class="w-full"
		alt="a platter of cookies"
	/>
	<div class="px-6 py-4">
		<div class="mb-2 text-xl font-bold">Chocolate Chip Cookies</div>
		<p class="text-base text-gray-700">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et
			perferendis eaque, exercitationem praesentium nihil.
		</p>
	</div>
	<div class="px-6 py-4">
		<span
			class="mr-2 inline-block rounded-full bg-gray-300 px-3 py-2 text-sm font-semibold text-gray-700"
		>
			#photography
		</span>
		<span
			class="mr-2 inline-block rounded-full bg-gray-300 px-3 py-2 text-sm font-semibold text-gray-700"
		>
			#food
		</span>
		<span
			class="inline-block rounded-full bg-gray-300 px-3 py-2 text-sm font-semibold text-gray-700"
		>
			#cookies
		</span>
	</div>
</div>

Example 2: Custom Buttons

The second example we'll be looking at is how to create buttons using TailwindCSS.

<button class="my-2 rounded bg-blue-400 px-5 py-2 font-bold text-white">Button</button>
<button class="my-2 rounded bg-red-600 px-5 py-2 font-bold text-white">Button</button>
<button class="my-2 rounded bg-gray-600 px-5 py-2 font-bold text-white">Button</button>
<button class="my-2 rounded bg-green-500 px-5 py-2 font-bold text-white">Button</button>

I absolutely enjoyed playing around with the docs to create these examples and one thing you can also leverage is extracting utility classes as a component.

Extracting Utility Classes as Components

You can additionally extract utility classes as a component as I mentioned earlier. Tailwind advocates for Utility-first workflow but when you find out that you're reusing the same styles over again then this is when you should think of extracting them into components. Here's how to accomplish just that.

From example 2 above, We can further reduce the number of utility classes by extracting it out as a component using @apply.

<button class="btn btn-blue">Button</button>
<button class="btn btn-gray">Button</button>

<style>
	.btn {
		@apply my-2 rounded px-4 py-2 font-bold text-white;
	}
	.btn-blue {
		@apply bg-blue-500;
	}
	.btn-blue:hover {
		@apply bg-blue-700;
	}
	.btn-gray {
		@apply bg-gray-500;
	}
	.btn-gray:hover {
		@apply bg-gray-700;
	}
</style>

And you still get the same result but with a lot, fewer utility classes applied. Note that variants like hover:, focus:, and {screen}: can't be applied directly, so instead apply the plain version of the utility to the appropriate pseudo-selector or media query.

I absolutely had fun exploring TailwindCSS and I can't wait to work with it in my projects. Have you tried TailwindCSS or used it in a project? What are your thoughts about it?.

How To Supercharge Your Productivity As A Developer

Thu, 23 May 2019 22:00:00 GMT

I gave a talk about this topic a couple of months ago at forloop Summit Lagos, Nigeria. I decided to write a blog post out of it so here it goes.

As developers, we are constantly trying to churn out work and we often find ourselves distracted from doing the actual work. In this article, I'll be sharing tips on how you can stay productive as a developer and also share tools to help automate this process.

What is Productivity?

Productivity is an act of getting quality work done without the need for adding extra effort.

This is my definition of productivity and I am sure a lot of developers are already familiar with the term productivity. Daily in our lives, we all try to churn out meaningful work, tick that task off our to-do list and the cycle continues. One hard truth I'll like us to think about is how many developers around the world actually struggle with being unproductive daily due to different circumstances.

Here's a fun fact. I think this is the case for most developers we don't work actively for straight 8 hours mind you if you do this then it's totally fine, this is just my point of view because I know in order to work efficiently you need breaks so please don't come for me :).

Causes Of Low Productivity

I'll be brief and butcher these points on why I think these are some causes of low productivity for developers.

Distractions: Our phone notifications, unread emails, and meetings are some of the biggest distractions that can cause us to be less productive during our working hours. I personally turned off notifications from all my devices when working yet there's still an urge to pick up my phone while working.
Low Work-Life Balance: Burnout is real, when you spend your time working past your usual hours or when you are supposed to spend time away from work this will eventually lead to low productivity because all you eventually concerned about is work and the other part which is You is lacking.
Unhealthy Company Culture: An unhealthy company culture can also trigger low productivity in several ways. Working in a toxic environment significantly affect developers. People have to deal with some unpleasant scenario at the workplace and this tends to affect the quality of work they produce.
Stress: Learning when to take a break is also key, A lot of developers are guilty of this act. If you overwork yourself you become stressed and that eventually leads to low work output and lack of productivity.
Lack of Growth Opportunities: Working at an organization that doesn't align with your goals or you are in a position where you keep doing the same task over and over without learning anything new or you don't see your self getting that promotion anytime soon then that can cause low productivity towards your work output.

Recommended Tips To Supercharge Your Productivity

Minimize Distractions: The best way to get rid of distractions is by restricting it entirely. What this means is you'll have to figure out ways to reduce the notifications and email you get. You can either mute notifications on your mobile devices or make sure you don't have it close to you when working. Use whatever works for you but the goal is to reduce distractions. Some tools that can help you are Stay Focused, Self Control for Mac, gofuckingwork.
Automate Your Process: As developers, this is one of the things I think we should be interested in because repeating a task can become daunting when we can automate it then why not. If you figure out you spend more than 2 minutes doing the same thing every day then you should find a way to automate that task. Tools for automating your process. .dotfiles, ohmyzsh, cheatsheet.
Time Management: Managing your time is another important tip you can leverage to stay productive. when you plan ahead efficiently it'll help boost your productivity. Some tools to leverage Tomato Timer.
Work With Right Tools: It's important to work with the right tools, this way we don't spend a lot of time figuring out why the task we are trying to complete is not working as expected when we are using the wrong tool.
Take Breaks and Rest: This is as necessary as every other tip I've shared. Take breaks when you need to and rest. If there's anything I've learned then it is I and my life comes first before any work because at the end if you're not healthy you won't be able to the work eventually.
Prioritize Your Work: This works for a couple of people, in fact, I've tried it and I saw the need to use this technique. Making sure to prioritize our work is one way to improve your productivity. You can either choose to do the hard and time-consuming task first and then do the easy ones last or vice versa whichever works for you but make sure you prioritize.
Plan Ahead With Note Taking: I love note taking it's a habit for me and I've found that it's one way the works for me I take notes of what I want to accomplish for the day and at the end of the day I can visualize the amount of work I've been able to achieve. I must confess on some days this gives me chills and goosebumps other days I'm disappointed but still, I don't give up. Tools I use Notion, Numi, Taskade.
Break Tasks Into Chunks: I can't emphasize this enough make sure you break up your tasks into smaller chunks that way you're able to visualize them in bits size and it doesn't become overwhelming for you to achieve.
Schedule Your Time: Lastly, use your calendar. Schedule activities for the week so that you don't skip or forget things you're supposed to do. Personally, I use Google Calendar

How Do You Define Success?

After going through these steps and applying these tips, how do you know when you've succeeded.

Improved Time Mangement: You know you've succeeded when you can now effectively manage your time and stick to it and there's a noticeable improvement in the work you churn out.
Gain Focus And Stability: You are now very focused and stable because you have dedicated time to rest and take breaks so you feel refreshed when working.
Career Advancement: The amount of valuable work you achieve now leads to possible promotion including better opportunities.
Work-Life Balance: You now have proper work-life balance, no signs of burnout and you can take time outside work to go on a vacation or spend time with family.

I hope you found these few tips helpful and you can start using them in your daily workflow to improve your productivity as a developer.

You can find the talk slides here

Guide to using Alternative Text on Images

Sun, 31 Mar 2019 22:00:00 GMT

Today, A lot of developers are conversant with the alt attribute on images. I can say most of us know that it is one way of making webpages accessible but do we really understand the scope of the alternative text, when to make use of it, how to use it. I agree it is one step to being an accessibility advocate so that is why in this article, I'll be explaining in detail the alt attribute and how practicing it can improve web accessibility in a long run.

Truthful confession here, before I became really involved with accessibility I didn't understand the importance of having a descriptive text for all images on the web. I'm mostly guilty of leaving the alt attribute blank. Now that I know better I can't keep it to myself which is one of the reasons I'm writing this article to share this new knowledge gained with everyone.

What is Alternative Text?

Alternative text or alt text as it is fondly called is a written text description for an image on the web. Alt text is really useful and can come in handy in any of these scenarios:

people using assistive technology such as screen readers and so on.
people that have images turned off on their devices due to a poor internet connection.
it helps improve SEO for the webpage.

Writing good alt text for images is very important and shouldn't be sidelined. To show how important this is the Web Content Accessibility Guidelines document WCAG 2.1 have it has the first rule which shows that it's really important.

Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

How to Use Alt Text

Typically, when adding an image to a webpage, we use the HTML image element to represent the image and the alt attribute on the image tag to give a description of the image. Here's an example:

<img src="./burger.png" alt="A girl holding a hamburger." />

The above alt attribute describes the context of the image. In this case, if a screen reader is being used on this page. It'll read the alt text instead and the user gets a very descriptive context of the image used. There are other things to consider when writing alt text this is just a primer to writing descriptive alternate text for images. I'll be going over the important concepts to take note of when using images on the webpages.
All images on the web must have alternative text that describes the function of the image. There are seven concepts for using images on the web I'll be outlining each of them and they include:

Informative Images: Informative images are images that describe a piece of information or concept. The information described can be anything from an emotion/impression to a label or the file format used in a link. The text alternative for an informative image should convey the meaning or content of the image. Here's an example:

<img src="./girl.png" alt="A girl smiling happily." />

The image illustrated above shows the emotion of a girl. The idea therefore, is to make the alternative text convey this information.

Decorative Images: Decorative images are images that don't necessarily convey meaning or information. These images don't add information to the content of the page mainly because the content description is already provided or the image is used for styling purposes. Therefore, the alt attribute is not provided or left empty (alt=""). The reason for this is to avoid assistive technologies such as screen readers from reading a redundant text to its users. Leaving the alt attribute out entirely is not a good practice because some screen readers will announce the file name of the image instead. An example is shown below:

<img src="./line.png" alt="" />

Functional Images: Functional images are images that convey an action to be taken rather than informative images that only conveys the information of the image. They are mostly used in links, buttons, and other interactive elements. The alternative text should convey the action to be taken rather than the description of the image. For example, having an alternative text that says search list instead of a microscope or print page instead of image of a printer. Having an empty alt attribute won't be helpful too because you want to be able to notify users using screen readers to navigate your site that you want them to take an action at that point. Here's an example:

<input type="image" src="search.png" alt="search this page" />

Images of text: Images of text like the name implies is describing the text illustrated in an image. This is rarely used because with most modern browsers we can use CSS to style text to look exactly the way we want it rather than using images to represent text. Using text instead of images to display content has more advantages as the text can easily be scaled or resized without losing clarity but with images, the text becomes distorted and loses image quality. In the event that the only possible option available is to use images to describe a text then the alternative text must also contain the text in the image. For example, we can have:

<img src="text.png" alt="For sale: baby shoes, never worn." />

Group of Images: This type of images represent images that are grouped together to convey a single piece of information. An example can be a collection of heart icons to represent a rating. When adding descriptive text for each image, the alt attribute for only one of the image should have a description of the group of images, while the other images have an empty alt attribute so they are ignored by screen readers. Here's an example:

<img src="full-heart.png" alt="1.5 of 3 hearts" />
<img src="half-heart.png" alt="" />
<img src="empty-heart.png" alt="" />

Complex Images: Complex images convey a very detailed and substantial amount of information. These type of images ranges from graphs to bar charts, maps showing locations and diagram or illustration, etc. In these cases, two text alternative description is provided. The first one being the short description of the image. The second is the long description of the image to fully explain the information conveyed by the image. Here's an example:

<figure role="group">
	<img src="bar.png" alt="Bar chart showing population of animals in SA and LA zoos." />
	<figcaption>
		<p>
			The bar chart shows a population of the animals in South African Zoo compared to Los Angelos
			Zoo. With the number of giraffes, monkeys and orangutans compared in both zoos.
		</p>
	</figcaption>
</figure>

Image maps: Image maps are images that have been divided into various regions, each region represented by the area elements. An example can be an organizational chart. Image maps are created using <img> and <map> elements. The text alternative is needed on both the img elements and each area element. The example below illustrates an organization chart with each node represented to identify an individual in the organization.

<img src="orgchart.png" alt="Board of directors and related staff: " usemap="#Map" />
<map name="Map" id="Map">
	<area shape="rect" coords="176,14,323,58" href="…" alt="Davy Jones: Chairman" />
	...
</map>

With all these images types listed, how do you know which one to use when implementing alt text. The Alt decision tree is a guide provided to help you make that decision. So when in doubt use the alt decision tree.

Tips To Note When Writing Alternative Text

End the alt text with a full stop. This will make the screen readers pause for a bit before reading other content. which improves the experience for the user.
Don't start alt text with image of or photo of.
Be specific when describing the image.
Avoid cramping in keywords for SEO purposes.
Don't add line breaks in the alt text. This can cause a weird pause when the screen reader is describing the image.
Use the empty alt attribute alt="" for decorative images. for example, the background image of a website because understanding the context used here is not required.

Conclusion

In this article, I've explained in detail the benefit of using alternative text for images and how to go about using them in a different context. I'm happy you read this far and my ask therefore is not to only read this but also learn to practice it. I believe the web will become more accessible with a collective effort from everyone.

Web Accessibility For Beginners

Thu, 21 Mar 2019 23:00:00 GMT

Building accessible applications or websites is not the norm today. This is because the idea of accessibility is known to most developers, while in actual sense it is often neglected and not a common practice today in the world of web development. According to World Bank Statistics about 15% of the world population experience some form of disability. This amounts to almost half the population of the web.

In this tutorial, I’ll be explaining what web accessibility is to us as developers, how it affects the users of the web, and also ways to improve our application and tools to leverage to improve accessibility in our workflow.

What is Web Accessibility?

Web Accessibility or a11y as it is often called is a practice whereby websites, tools, and technologies are designed and developed so that people with disabilities can use them.

Accessibility" is often denoted as "a11y" because there are 11 letters between the "A" and "Y" in the word "Accessibility". This pattern is known as a Numeronym.

Accessibility is all about making the web accessible to everyone. This includes people with all forms of disabilities including the following:

cognitive
neurological
physical
speech
visual
auditory disabilities.

Accessibility encompasses disability and still account for cases whereby the people using the web have the following limitations:

Poor Internet connectivity.
Temporary injury i.e broken arm.
People using devices with smaller screens such as Smartwatches, Smart TVs.

The POUR principle

The POUR principle is what guides building accessible websites. This principle helps put people at the center of the process. Every website should fulfill the following principles:

Perceivable

Content on the web should be perceivable, This means the web should be available to the senses (vision, touch, and hearing) either through the browser or through assistive technologies like screen readers, screen enlargers, etc.

Operable

Content on the web must be operable, This means users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device. If the content is impossible to navigate then it is inaccessible.

Understandable

The content on the web should be clear and concise and easy to understand. Try as much as possible to cut down spelling errors and complex grammar. This is because as web developers we should never assume knowledge for the user.

Robust

It is really important to have consistency across the web. What this means is are you maximizing compatibility with the tools you are building for? Does your site work the same way across all platforms i.e Browsers, Operating systems, and Device sizes, etc?

Tips For Making Your Site Accessible on the Web

I’ll be highlighting tips to help incorporate accessibility into your usual routine when building websites. Most of these tips can be implemented without affecting your website's overall look and feel.

Add Alternative Text for Images

When using images in your websites, One important thing people miss out on is adding the alt="" attribute to images. Here’s an example of an accessible image tag.

<img src="./cat.png' alt="A cat sitting on a chair">

The big picture difference between having the alt attribute in all images and not including it at all is that it goes a long way in making sure your website is accessible because now screen readers can announce the alt tags for people with visual and cognitive disabilities. One rule of thumb here is to make sure the alt description is in context meaning it should describe the intent of the actual image. In the example above, I used A cat sitting on a chair and not just cat for the description.

Make use of Semantic HTML

This is another important rule missed out on. Most developers use div to represent everything and forget about the appropriate mark-up for headings, lists, tables that exists. HTML5 provides additional elements, such as <nav> , section and <aside>, to better structure your content. This is an example of a well-structured page using semantic HTML.

Always provide an option to skip the Main Content

I’ve found that for people making use of screen readers and keyboard, this feature is really important because it provides the option to skip to the main content when using either the keyboard or screen readers for navigation. The technique for achieving this by adding a link to skip to the main content and make it invisible until the element receives keyboard focus. An example of this is BBC.com's official website. When using your keyboard to navigate the option to skip to the main content is provided when the keyboard focuses on that element and it is visible.

Identify page language and language changes

Most people miss out on this, I feel like it should be one of the things we look out for when building accessible sites. Always remember to indicate the primary language of every page by using the lang attribute in the HTML tag, for example, <html lang="en">. Use the lang attribute on specific elements when the language of the element differs from the rest of the page.

<html lang="en">
	<head>
		...
	</head>
	<body>
		...
	</body>
</html>

Associate a label with every form element

Whenever possible, use the label element to associate text with form elements explicitly. The for attribute of the label must exactly match the id of the form control. In specific situations, it may be acceptable to hide <label> elements visually, but in most cases, labels are needed to help all readers understand the required input.

<form>
	<label for="username">Username</label>
	<input type="text" name="username" id="username" />
	<label for="email">Email</label>
	<input type="email" name="email" id="email" />
</form>

Tools To Leverage When Building Accessible Sites

I found this interesting while researching this topic, there are countless tools available to help you build accessible sites. The question right now is why aren’t people making use of these to build accessible websites? The reason might be because getting started with accessibility may seem difficult at first, especially for teams that are maintaining a legacy codebase. I’ll be sharing some tools to leverage when thinking of accessibility.

These tools will go a long way in helping you build accessible applications. You can find more tools to leverage from the compiled Web Accessibility Evaluation Tools List.

Further Resources

Conclusion

In this article, We got a good understanding of web accessibility and what it means for users with disabilities. I’ll like to end this by saying we should all be accessibility advocates by driving this force together, we’ll see a significant change in the way the web is approached. We should always remember to build for the user and this includes all users with any kind of disability.

My Workflow And Tools That Help Me Speed Up Productivity

Sat, 16 Feb 2019 23:00:00 GMT

My workflow and Tools that help me Speed Up Productivity.

Nearly every developer works with different tools on a daily basis to help them achieve their goals or complete specific tasks. In this post, I’ll outlined the tools I use for my day to day activities.

First thing I’ll like to do is define workflow.

What is a Workflow?

A workflow is a series of event or task that processes a set of data. Workflows occur across every kind of business and industry. They are the paths that describe how something goes from being a work in progress to complete or raw to processed. For example I have a workflow for writing articles, from finding ideas of posts to creating an outline and then writing the actual content of the post to publishing all these are series of event to achieving a task.

As a developer, I tend to make use of certain tools that help speed up the process of completing a specific task. Even though a lot of these processes might be different for everyone I still feel the need to share this with you. At the end no knowledge is lost right!

Tools I use to help speed up productivity

This is going to be a broad list so I’ll try and split them into different categories, I’ll be highlighting the tools I use when coding, writing, and other tools I think you will find helpful in general.

Coding Tools

GitKraken

I found out about this tool recently from a friend and I really love using it. I’m a big fan of using the command line over using GUI but this tool is so much different. GitKraken is a GitHub client application that works just like the command line you are already used to but with intuitive UI/UX that makes for a great experience when you using this over the command line.

Insomnia

This tool is another one I really like using. It is similar to Postman but also allows your query GraphQL endpoints which is cool right. Insomnia is a Powerful HTTP and GraphQL tool belt that is available on Mac, Linux and Windows platforms. It features includes GraphQL support, SVG and image previews, AWS authentication etc.

Visual Studio Code

Visual Studio Code is a code editor that I really love using. I have been using for over a couple of years now and I’ve not found any reason to stop with constant improvements and new features added regularly this is my go to choice for a code editor.

Dash

Dash is a Mac application for developers that give you access to over 200+ API documentation offline for free. You can create your own docsets or even request for docs that are not included. For Windows users, an alternative for this app is Zeal App.

SourceTree

Ever wanted to use GUI instead of the command line for Git. Then SourceTree is your best bet. I already mention GitKraken and they both do the same job I usually alternate between both apps occasionally. So I’ll say use what works best for you they are both great apps.

Postico

Postico is one client app for Postgres. It has a beautiful UI and it’s easily accessible I prefer using this to other apps I’ve found or even using the postgres command line.

Hyper

Hyper is one tool I love using, it is in fact my default terminal for coding.

Writing

Notion

Notion is a tool for almost everything you need. I’m yet to come in contact with anyone with negative thoughts about this tool. It is super helpful. You can write, plan and collaborate with Notion.

Dropbox Paper

Paper by Dropbox is a great tool for writing. I frequently used this in creating notes, writing post and a lot of other things. It supports markdown formatting.

Bear App

Caret

Deploying

Netlify

Now

GitHub Pages

Zapier

Miscellaneous

Rocket

Spectacle

Numi

Taskade

RecordIt

Aware

Conclusion

I hope you find all these tools listed useful and start using them to make your job a lot more easier. The idea is to share with you tools I found helpful and really I’d like it if you can also share with me tools you have found useful that are not listed here. Let’s all stay productive!

My 2018 Year in Review & 2019 Resolutions

Wed, 19 Dec 2018 23:00:00 GMT

Inspired by @una's article on her year in review and @ireaderinokun's post I decided to write mine so here it goes....

I'm really excited and I needed to reflect on how the year has been for me which led me to write this post. Its been an amazing year and I can't wait to share what I've been able to achieve and plans for the new year 2019.

Work

Looking back at the past 11 months it still feels like yesterday. I remember in January when I had just started jotting down my 2018 resolutions and oh the things I planned to achieve. I wanted to grow and scale as a developer and I took networking with other developers and the community seriously this led me to getting a role as a remote open source developer at Okkur Labs. At the time I was really passionate about learning and contributing to open source projects. That was a big stepping stone for me just at the beginning of the year.

I left my Job at a startup and was focused on working remotely. For a period I felt lost and wanted to do more challenging work and that led me to apply for the Andela Fellowship. I got a job as a software developer at Andela and I've never looked back since then.

Writing, Speaking, and Community

Started A Blog

I remember I read an article from John Sonmez on blogging as a developer. I made it one of my goals for the year to start my personal blog and I went ahead to create one which is what you are currently reading 😁. I had no clue as to what I was going to be writing but I still went ahead to start it. I wrote 10 articles on my blog this year mostly based on front-end development, the things I'm currently learning and things I will like to share.

Gave a talk at a Conference

I gave my first talk at the Concatenate Conference!! If anyone told me I will be giving a talk at a conference this year I'll simply tell them to stop joking I dreaded public speaking. I never had intentions to speak at a conference, all I really wanted was to attend one of those international conferences and that's still one of my goals but when I got this opportunity I had to go for it regardless of my fear of speaking in public and yes I gave a talk at Concatenate Conference about Crafting Rich Documentation with Vuepress.

https://twitter.com/lauragift21/status/1028227751524945921?ref_src=twsrc%5Etfw

Became a Chapter Lead for VueVixens Nigeria and Co-organizer for Concatenate Conference

I also wanted to do more for the tech community. A way I could do this is to contribute my quota to the growth of the tech scene in my local community that led me to volunteer to be a lead for Vue Vixens in Nigeria. Vue Vixens are foxy people who identify as women and who want to learn Vue.js to make websites and mobile apps. Watch this space because I'll be putting together several events to get more women interested in learning Vuejs together in 2019! I'm also a co-organizer for Concatenate Conference and we're making plans for a better Conference come 2019!

Life Events

Photography

I picked up interest in photography. I even went as far as saving up to get my own DSLR. I must say that was really fulfilling I wanted to do more street photography take pictures of the Lagos and if I had the chance to travel. Take stunning pictures of Nigeria and other Countries too. But as interesting as this dream was the only thing I could achieve was within Lagos state. But trust me I explored areas I've not been to this was really fun. I know I'll do better next year.

<p style="text-align:center">Pictures from my Archives</p>

Health and Fitness

I made a pact to ditch Soda this year and I'm happy I was able to reduce it even though I couldn't completely stop it. Overall I wanted to do more with my health. Lose a few pounds and live a healthier life in general. But like they stay consistency is key and to be sincere I wasn't consistent. For me, it was going from this diet to stopping and doing something different and from having regular morning runs to stopping and procrastinating forever 😞. I know how hard it is to keep a habit but I didn't do as much as I would have loved in terms of keeping track of my fitness life.

And Plans For 2019.📙

I'll say I accomplished a lot this year and with that, I will definitely continue on the same path throughout 2019. I want to make an impact in my community by the work I'm doing so to keep me accountable these are some of the things I hope to get rolling in 2019.

Writing 📝: I want to be more consistent with my writing. I had a goal of publishing content bi-weekly and I could not keep up so instead of making unrealistic goals I will instead set a goal to publish at least 2 articles monthly.

Speaking 📣: Now that I've broken the burden of public speaking. I will really love to do more in this space by sharing the knowledge I've acquired over time and giving talks on topics I'm really passionate about. I started submitting CFPs already keeping my fingers crossed 🤞.

Organizing Event 🔖: I'll be putting together an event for ladies that are interested in learning Vuejs. If you're interested please feel free to reach out to me on twitter. While I make plans for this, I hope to empower more women to brace up and join the tech community so we can even the gap we currently have a lot fewer women in the community.

Personal Projects and Open Source 💻: I have a whole lot of things to learn and be comfortable with this is inclusive of JavaScript so I want to practice learning by building. I did a lot of open source contributions this year looking at doing more of that next year.

I want to read more books and listen to more Podcasts 📚

Absolutely learn how to drive! 🚗

Exercise more and live a healthier life. 🏃🏻‍♀️

Travel and Photography 😍❤️: I will really love to travel more, see the world and take amazing pictures while at it.

These are most of the things I'm looking forward to doing next year and to keep it realistic I'm just going to stop here. One of the reasons I decided to write a review is because I'm going to read this December 2019 and see how far I've gone with my goals which is amazing and fulfilling!

Setup CI with Travis CI in Your Nodejs App

Thu, 21 Jun 2018 22:00:00 GMT

This post will explain in detail how to go about setting up Travis CI deployment in a nodejs project.

What is Continuous Integration?

Continuous Integration is the continuous practice of merging in small code changes frequently - rather than merging in a large change at the end of a development cycle. The goal is to build healthier software by developing and testing in smaller increments. This is where Travis CI comes in.

Project Setup

In order to test the way Travis CI works we need to setup a Node project with tests. Make sure you have node and npm installed node -v and npm -v to check the versions.

# start up your project

mkdir travis-ci
cd travis-ci
npm init

# install the dependencies required for this project
npm install express mocha chai

create an index.js file in root directory with the following.

# index.js

const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('ci with travis');
});

const server = app.listen(3000, () => {
  console.log('App running on port 3000');
});

module.exports = server;

Also create a test folder and an index-spec.js file for testing our node app.

# index.spec.js

const expect = require('chai').expect
const server = require('../index');

describe('test', () => {
  it('should return a string', () => {
    expect('ci with travis').to.equal('ci with travis');
  });
});

NPM Script
Make sure app and test is working by running these scripts.


"scripts": {
  "start": "node index.js",
  "test": "mocha"
}

Travis Setup

create a file .travis.yml in your root directory.


language: node_js
node_js:
  - "stable"
cache:
  directories:
    - "node_modules"

The .travis.yml file indicated above is what instructs Travis on what to build. the language option can be whatever language your app is running in and the "node_js": "stable" indicates Travis should use a stable version of node. You can also cache your node_modules directory on Travis to avoid installing all dependencies every time a build is triggered but rather it updates packages that has newer versions. more options that be added to this file can be found here.

Integrate Travis with GitHub

Travis is a CI service which simply means it a automated process. A typical workflow with Travis ad GitHub goes like this:
* A commit is pushed to to GitHub
* Travis build is triggered and it checks if the test is passing or failing.

Travis Build setup

* Create a github repo and push the project folder to GitHub.
* Add the repo to Travis Website
* Make a change and push a commit to the repo. You should automatically see your build process running.
* Add the travis badge to a README.md file in your GitHub repo.

Conclusion

Travis CI makes developing software efficient. it ensures you deploy clean code that follows good practice and also detects if there are possible bugs or deficit in your code caused by a change or refactor in your project.

All code is available on the Github repo.

Also feel free to leave a comment with questions or thoughts.

How to Center Anything in CSS

Thu, 22 Mar 2018 23:00:00 GMT

Centering in CSS can be a pain in the ass. There are several methods to achieve just one task, centering an element. To cut to the chase i'll outline two quick methods to achieve this in a jiffy ✈.

Flexbox Method

<div class="flex">EGWUENU GIFT NDUDI</div>
<!-- CSS using flexbox as a default method for centering div -->

.flex {
	margin: 20px;
	font-size: 30px;
	color: #133b49;
	font-family: "Ubuntu", sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
}

Grid Method

<div class="flex">EGWUENU GIFT NDUDI</div>
<!-- CSS using grid system as a default method for centering div -->

.grid {
	margin: 20px;
	font-size: 30px;
	color: #d6005c;
	font-family: "Ubuntu", sans-serif;
	display: grid;
	justify-items: center;
	align-items: center;
}

See the Pen <a href="https://codepen.io/lauragift21/pen/QmMbma/">Centering in CSS</a> by Egwuenu Gift (<a href="https://codepen.io/lauragift21">@lauragift21</a>) on <a href="https://codepen.io">CodePen</a>.</p> <script async src="https://static.codepen.io/assets/embed/ei.js"></script>

"There are 1000 ways to do a particular thing in CSS. The question is are you doing it correctly? - Unknown"

Gift Egwuenu

Migrating My Blog to Astro 6

TL;DR

The Features I'm Loving

First-Class Cloudflare Support

Built-in Fonts API

Experimental Queued Rendering

Live Content Collections

Zod 4

How I Migrated

What I'm Planning Next

Resources

Setting Up a Custom Email with Zoho Mail and Cloudflare

Why Zoho Mail?

What You'll Need

Step 1: Sign Up for Zoho Mail

Step 2: Verify Domain Ownership (One-Click Method)

Using One-Click Verification (Recommended)

Manual Method (If One-Click Isn't Available)

Step 3: Configure MX Records

Step 4: Set Up SPF Record

Step 5: Configure DKIM

Step 6: Add DMARC Record (Optional but Recommended)

Final DNS Configuration

Testing Your Setup

Accessing Your Email

IMAP/SMTP Settings

Wrapping Up

Resources

What is llms.txt and Why Your Website Might Need One

What even is llms.txt?

Why does this matter?

What does a llms.txt file look like?

How do you create one?

Who’s already using llms.txt?

Final thoughts

Build a Bookmark Manager with the HONC Stack!

What Even is the Best Stack? 🤔

What is the HONC Stack?

Why the HONC Stack?

Getting Started with HONC

Build a Bookmark Manager with the Honc Stack

Set Up Your HONC App

Configure Cloudflare D1

Define the Database Schema (Drizzle ORM)

Create API Routes with OpenAPI (Hono)

Seed the Database

Build a Frontend with Hono JSX Renderer

Deploy Everything to Cloudflare

Wrapping Up

2024 Year In Review

Life

Career

Health

Looking Ahead

Dealing with Burnout!

A Trip Down Memory Lane

Why Did This Happen?

The Wake-Up Call

Job burnout symptoms

Moving Forward

The Best Time to Learn to Code is Now

Delete Multiple Branches in Git

Deleting Local Branch

Deleting Multiple Local Branches

Deleting Remote Branches

Deleting Multiple Remote Branches

Show Your Work!

You don’t have to be a genius

Think process, not product

Share something small every day

Open up your cabinet of curiosities

Tell good stories

Teach what you know

Don’t turn into human spam

Learn to take a punch

Sell out

Stick around

Conclusion

Video Review

Who’s already using `llms.txt`?

How is this different from `:focus`?