Forem: Beatrice Egumandi

How to Connect to Your VPN on macOS Using Tunnelblick and a Certificate

Beatrice Egumandi — Fri, 05 Sep 2025 16:57:06 +0000

Using a VPN on macOS can be straightforward when you have the right configuration files and certificates (and of course, the right guide 😉. This article walks you through the setup process step by step. By following this guide, you can securely connect to your VPN using Tunnelblick and a .p12 or .ovpn file.

Step 1: Install Tunnelblick

Tunnelblick is a free, open-source OpenVPN client for macOS.
1. Download the latest, most stable version from Tunnelblick’s website
2. Open the .dmg file and drag the Tunnelblick icon to your Applications folder.
3. Launch Tunnelblick and allow it to make changes if prompted.

Tunnelblick manages OpenVPN connections and simplifies certificate handling, making it ideal for Mac users.

Step 2: Gather Your Configuration Files

You will need:

A .ovpn configuration file from your VPN provider.
A .p12 or PKCS#12 certificate file (contains your client certificate and private key).

Place both files in a folder on your Mac that is easy to locate, for example:

~/Desktop/VPNConfig/

Step 3: Add or Prepare Your Certificate for Tunnelblick

Your VPN may provide a .p12 (PKCS#12) certificate, which contains both your client certificate and private key. Tunnelblick can sometimes read the .p12 directly, but in some cases, you need to separate it into .pem files. Luckily, this guide covers both scenarios 😁

Option 1: Directly Import the `.p12` File

1. Double-click the .p12 certificate.
2. macOS will prompt you to choose where to store it: Login, System, or iCloud. Choose Login.
3. Enter the password provided by your VPN provider.
4. Tunnelblick may now recognize the .p12 file. When adding the VPN configuration, you can select this certificate directly.

This works if Tunnelblick accepts the certificate without errors like “unable to load Private Key.”

Option 2: Extract `.pem` Files (If Direct Import Fails)

If Tunnelblick cannot read the .p12, you need to extract the private key and client certificate into separate .pem files.

1. Open Terminal and navigate to your folder containing the .p12:

cd ~/Desktop/VPNConfig/

2. Extract the private key:

openssl pkcs12 -in [your-certificate].p12 -nocerts -out [your-private-key].pem

Enter the .p12 password when prompted.
You may be asked to create a new passphrase for the private key; you can choose to do so or skip it.

3. Extract the client certificate:

openssl pkcs12 -in [your-certificate].p12 -clcerts -nokeys -out [your-client-cert].pem

4. Extract the CA certificate (if your .p12 includes it):

openssl pkcs12 -in [your-certificate].p12 -cacerts -nokeys -out [your-ca-cert].pem

Remember to replace the placeholders [your-certificate], [your-private-key], [your-ca-cert], and [your-client-cert] with your actual file names.

5. Ensure all .pem files are in the same folder as your .ovpn configuration file.

Using separate .pemfiles guarantees Tunnelblick can read the certificate and private key properly, avoiding passphrase and key errors.

Step 4: Configure Your `.ovpn` File

Open the .ovpn file in a text editor. Ensure the following lines reference your certificate and private key:

ca [your-ca-cert].pem
cert [your-client-cert].pem
key [your-private-key].pem

Step 5: Fix Cipher Compatibility

Newer OpenVPN versions require specifying data-ciphers, so add the following to your .ovpn file:

cipher AES-256-CBC
data-ciphers AES-256-CBC:AES-256-GCM:AES-128-GCM:CHACHA20-POLY1305
data-ciphers-fallback AES-256-CBC

This ensures your client negotiates correctly with the server, especially when using older or specific cipher configurations.

Step 6: Add Your Configuration to Tunnelblick

1. Open Tunnelblick and select I have configuration files.
2. Drag your .ovpn file into the Tunnelblick window (or just double click on the file).
3. When prompted, Tunnelblick may ask for your macOS password to authorize storing the configuration.
4. Choose whether to make the VPN available to all users or only your account; for most personal setups, selecting only me is safer.
5. Enter the passphrase for your certificate if required.

Tunnelblick will then store this configuration and display it in the list of available VPN connections, ready to connect.

Step 7: Connect to the VPN

Click the Tunnelblick icon in the macOS menu bar.
Select the configuration you added and click Connect.
Monitor the status in the Tunnelblick window.

Common messages include “Authorizing” followed by “Connected.” If the connection loops, verify your cipher settings and certificate passphrase.

Step 9: Troubleshoot Common Issues

Issue	Solution
Passphrase not accepted	Ensure you are using the same passphrase used during `.p12` extraction
Certificate errors	Check that the certificate is correctly added to the Login Keychain
Cipher negotiation failed	Ensure `data-ciphers` includes `AES-256-CBC` and set `data-ciphers-fallback AES-256-CBC`
Looping between Authorizing and Reconnecting	Confirm your certificate, key, and `.ovpn` paths are correct

This guide provides a detailed, beginner-friendly approach to connecting to a VPN on macOS using Tunnelblick. Following it ensures your certificate and configuration are correctly set up, minimizing common errors that cause connection failures.

🧠 State-of-the-Art Programming vs 🎧 Vibe Coding: A Tale of Two Dev Modes

Beatrice Egumandi — Tue, 10 Jun 2025 10:25:11 +0000

One is clean, scalable, and built for teams.
The other is chaotic, magical, and runs on pure flow and vibes
Both? Completely valid just in the right context.

✨ What Is State-of-the-Art Programming?

This isn’t a formal technical term, it’s more of a vibe… an elite one.

When someone says, “We do state-of-the-art programming” they’re really saying:

We write smart, clean, scalable code using the best tools and practices modern development has to offer.

No legacy stuff. No spaghetti coding. Definitely no commit messages like final_reallyfinal_FIX.

🛠 What It Looks Like in Practice

Modern workflows: Trunk-Based Development, GitOps, CI/CD pipelines, Infrastructure as Code.
Architecture: Clean Architecture, Ports and Adapters, CQRS, Microservices (if you must).
Best practices: SOLID principles, DRY, TDD/BDD, Domain-Driven Design, Version control strategies that don’t leave your git log looking like a crime scene.
High-quality tooling: TypeScript (because JavaScript is a little too wild😅), ESLint/Prettier, Lint-staged + Husky, Automated tests (Jest, Playwright), Feature flags (Flagsmith), Observability tools (Sentry, LogRocket), etc.
Developer experience (DX): Write once, debug never (okay, rarely 😅), Clean commits, Readable code (code should be readable by future-you and not feel like a scavenger hunt), Great onboarding docs.

Even a junior dev could jump in and say:

Oh wow, this codebase makes sense.

👩🏽‍💻 Real Example

When your boss prefers a single main branch using Trunk-Based Development instead of main + dev, what they're really doing is leaning into state-of-the-art ideas like:

Continuous integration for faster feedback.
Reducing branching complexity.
Encouraging smaller, shippable changes.
Leveraging feature flags instead of long-lived branches.

🎧 So… What Is Vibe Coding?

Now this is where things get spicy.

✨Vibe coding means going with the flow.
✨No roadmap. No strict rules. Just vibes, baby.
✨That late-night, hoodie-on, playlist-blasting kind of flow where the code just... happens.

You're coding on instinct, inspiration, or pure curiosity. It's spontaneous. It’s artistic and sometimes... it’s kinda messy.

What Vibe Coding Looks Like

No Jira ticket. No Figma design. Just a mental image and caffeine.
No testing yet, we’re still “figuring things out.”
Your Git history is a ghost town.
TDD becomes “TBD” (To Be Determined 😂).
You’re building it as it forms in your head, tabs everywhere.

Vibe coding is the jazz of programming.
Sometimes genius. Sometimes chaotic. Sometimes both.

🎯 When It’s Perfectly Valid

Prototypes and MVPs
Personal or experimental projects
Exploring ideas that may or may not ship
Learning a new framework or tool without pressure

⚠️ When It’s Risky

In production codebases
On team projects
When “I’ll clean this up later” becomes a lifestyle

🔥 Examples

Scenario	State-of-the-Art 🧠	Vibe Coding 🎧
Setting up a project	CI/CD, commit hooks, tests	`npx create-next-app` + hope 😂
A quick fix	Feature flag, tests, PR review	`console.log(“please work, yolo 💅🏾”)`
Dev mindset	“Will this scale?”	“Will this run?”
Team experience	Predictable, clean, documented	🤷🏽‍♀️ Depends on who wrote it

✨ Real Talk: You Need Both

Here’s the thing: The best developers know when to switch modes.
You vibe code to explore and unblock your creativity.
You state-of-the-art when it’s time to scale, collaborate, or ship production-quality code.
Too much structure can kill momentum.
Too much chaos can burn out teams.

You prototype with vibes. You scale with discipline.

🧠 TL;DR

Trait	State-of-the-Art Programming 🧠	Vibe Coding 🎧
Structure	Strong	Minimal
Best used for	Production, team projects	Side projects, prototyping
Testing & QA	Mandatory	“Eventually?”
Mood	Disciplined engineer	Creative hacker
Tools	Linters, CI/CD, architecture	Keyboard, caffeine, vibes
Code lifespan	Long-term	Who knows? 🤷🏽‍♀️

💬 So... Which One Are You Today?

Me? I’ve got my main branch locked down with Trunk-Based Dev…
But I just built my onboarding flow without a Figma design in a side project for fun.

And that’s okay. Sometimes it’s discipline.
Sometimes it’s jazz.
And sometimes it’s both.

Which one are you vibing with lately? Clean architecture or chaos mode? Drop your stories, fails, and wins in the comments.

Let’s normalize both ends of the dev spectrum 🤝

Trees vs Graphs: Understanding the Key Differences in Data Structures

Beatrice Egumandi — Wed, 14 May 2025 11:07:02 +0000

A month ago, I had a task to generate a dynamic, visual and fluid graph using a mock data. I thought it would be a fun, straightforward challenge, something I could knock out in a few hours or at most a day. Little did I know that I was about to fall into a classic “data structure trap”.

I spent hours designing my custom nodes, tweaking my layout logic, and trying to make my graph flexible and visually engaging. But when I stepped back to review my work, it hit me: I had built a tree, not a graph 😅.

This moment was a learning opportunity and it got me thinking deeply about how trees and graphs differ and how easy it is to confuse the two.

🌳 All Trees Are Graphs, But Not All Graphs Are Trees

At the core, trees are a subset of graphs. While all trees are technically graphs, not all graphs are trees. So, what’s the real distinction between the two?

Trees are structured and hierarchical. There’s one root, and each node has exactly one parent. A node can only be reached through a single path from the root, that means there’s no backtracking or looping. Think of a company structure, where you have one manager, who manages employees, who manage their own teams. It’s a clear, well-defined chain of command.

On the other hand, Graphs embrace complexity. Graphs are less rigid and can have multiple connections between nodes, forming loops or cycles, and they don’t necessarily have a clear structure. Consider your social network: You might be connected to people in many ways, and there’s no single parent-child relationship. Nodes can branch off, loop back, or even be unconnected. It’s a messy, interconnected web of relationships.

🚗 A Simple Analogy: Navigating Cities
Let’s think of graphs and trees in terms of navigation (this might help make things clearer).

In a tree-like road system, imagine you're driving from City A to City C. To get to City C, you must first pass through City B, which is connected to City A. There’s only one route to each city, and no detours. This represents the strict structure of a tree — one parent, one path.

Now, let’s think of a graph-like road system. Here, there might be multiple ways to get to City C. You could go through City B, but you might also be able to take a shortcut through City D or City E. Roads could form loops, allowing you to circle back or take alternate routes. This represents a graph where nodes (cities) can connect in various ways, forming a more flexible, interconnected network.

🔍 How to Spot the Difference: Rules vs Chaos

Here’s the big takeaway: Trees follow rules, graphs embrace chaos.

If you trace a path from the root and find there’s only one way to reach any node, you’re dealing with a tree. It's rigid and follows a set path.

If you find that there are multiple paths, loops, or cycles, you're working with a graph. It’s more chaotic, and that's exactly what makes it useful for representing more complex systems, like networks, relationships, learning paths or even web links.

Can you spot the difference? 💁🏽‍♀️

💭 What Happens When You Mix Them Up?

The difference might seem subtle at first, but understanding it is crucial for building the right kind of data structure for your project. In my case, I spent hours designing what I thought was a dynamic, fluid graph, only to realize it was a tree. I had constrained my structure, thinking I was being flexible.

If I had wanted a true graph, I would have needed to allow for more connections, more paths, and more possibilities. Realizing this helped me take a step back and rethink my approach, something I believe is an essential part of the learning process.

🙋‍♀️ Your Data Structure Fails
Has this ever happened to you? Have you ever built the “wrong” data structure, only to have that moment of realization when things just clicked? I’d love to hear your thoughts on how you've learned from your mistakes or moments of confusion in building data structures.

Share your experiences in the comments let's learn out loud.

Conclusion

Keep Exploring the Messy Side of Graphs. The next time you’re working with data structures, remember: Not all graphs are messy and Not all trees are perfectly neat — sometimes things aren’t as straightforward as they seem! Embrace the complexity when you need it and the structure when it’s called for. Both trees and graphs are essential tools for solving different kinds of problems and understanding the differences will help you build better, more efficient systems.

And as for me? I’m diving deeper into graphs, ready to embrace the chaos and flexibility they offer. But I’ll keep my trees in mind when I need a solid, well-defined structure. 😉

Customizing Tailwind CSS in Next.js: A Complete Guide

Beatrice Egumandi — Thu, 30 Mar 2023 12:32:21 +0000

Welcome to the second article in our series on building gorgeous websites with Next.js and Tailwind CSS! In our first article, we covered the basics of installing Tailwind CSS in a Next.js project and getting started with its utility classes. Now, we're taking things up a notch and diving into the world of customization.

Tailwind CSS is an amazing utility-first CSS framework that allows you to create beautiful, responsive designs quickly and easily, but what if you want to customize those styles to fit your project's specific needs? Fear not, because in this article, we'll walk you through some of the most common customization options, including customizing colors, adding custom spacing, defining custom typography and customizing breakpoints.

Before we begin, it's important to note that there's a handy extension for Visual Studio Code called Tailwind CSS IntelliSense that can help make the process smoother. This extension provides features such as autocomplete, syntax highlighting and linting. If you're using VS Code, we highly recommend installing it before continuing with this tutorial. Now, let's get started and make your website truly your own!

Customizing colors
Customizing typography
Customizing screens
Customizing spacing

Customizing colors

When it comes to branding, colors play a vital role in creating a unique and memorable identity. Tailwind CSS makes it incredibly easy to customize your project's color scheme. By default, Tailwind comes with a set of pre-defined colors that can be used in your project. For instance, you can set the background color and text color of an element using its default colors like this:

<h1 className="bg-purple-800 text-grey-50">
  Welcome to tailwind world!
</h1>

In the example above, the bg-purple-800 class sets the background color of the h1 element to a shade of purple. The number 800 represents the saturation level of the purple color; and the text-grey-50 class sets the color of the text to a shade of grey.

But what if you want to use a color that is not included in the default set? This is where customizing colors comes in handy. It's worth noting that when customizing your styles, in the theme object of your project's tailwind.config file, you keep in mind the order of your customizations. If you want to overwrite the default Tailwind colors with your own custom colors, make sure to place your custom color definition above the extend key. Contrarily, if you want to use your custom colors in addition to the default Tailwind colors, place your custom color definition below the extend key. This way, the default colors will be extended with your custom colors.

For example, let's say you want to add a custom color to your project called "primary" and still let tailwind default colors be present. You can add it in the theme object in a colors section like this:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#801111",
      },
    },
  },
  variants: {},
  plugins: [],
}

Now, you can use the primary color in your project by referencing it in your CSS classes:

<h1 className="bg-primary">
  Welcome to tailwind world!
</h1>

This sets the background color of the h1 element to your custom primary color. You can also set different shades like this:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          100: "#7a1d1d",
          500: "#741b1b",
          900: "#5a0e0e",
        },
        secondary: "#7630a1"
      },
    },
  },
  variants: {},
  plugins: [],
}

In this example, we're adding new shades with different hex values to the primary and secondary colors. Now, you can use the new shades in your project like this:

<h1 className="bg-primary-100">
  Welcome to tailwind world!
</h1>
<h1 className="bg-secondary">
  Welcome to tailwind world!
</h1>

Another way to customize your colors is by using the arbitrary values method. This method is particularly useful when you need to apply a specific value to an element, such as top: 117px, without having to create a separate class in your CSS file. With Tailwind's square bracket notation, you can easily generate classes with arbitrary values for various custom stylings, including background colors, font sizes, pseudo-element content, and more. Here's an example:

<h1 className="top-[117px] h-[500px] w-[800px]">
  Welcome to tailwind world!
</h1>

In this example, we're using the top-[117px], h-[500px] and w-[800px] classes to apply an arbitrary top, height and width to the div, respectively. The possibilities are endless with this method, allowing you to customize your styles to your heart's content.

Customizing Typography

Customizing typography is all about defining your own font families, font sizes, font weights and more. This allows you to create a unique typography system that fits your project's specific needs. To do that, you can add new font families, font sizes, font weights and other typography-related styles to the theme section of your tailwind.config.js file. For example, you can define new font families like this:

module.exports = {
  theme: {
    fontFamily: {
      'sans': ['Helvetica', 'Arial', 'sans-serif'],
      'serif': ['Georgia', 'serif'],
      'mono': ['Courier', 'monospace'],
    },
  },
  variants: {},
  plugins: [],
}

You can then reference it in your CSS classes like this:

<h1 className="font-sans">
  Hello World!
</h1>

This is after you must have already attached the font links meta tags in the head of your HTML file. Another way to customize typography and basically customize any style is by using the globals.css file. Just as the name implies, the globals.css file defines global styles that can be used throughout your project. For instance, suppose you want to define a global font family and background color. You can do this in the globals.css file like this:

@import url('https://fonts.googleapis.com/css2?family=Alkatra&display=swap');

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

@layer base {
    html {
        background-color: violet;
        font-family: 'Alkatra', cursive;
    }
}

In this example, we import the Alkatra font family from Google Fonts using @import, then use it to set the font-family of the html element in the @layer base block.

Additionally, we set the background color of the html element to violet. We use the @layer directive to specify the category of a custom style set. These styles can be classified into three valid layers, namely base, components, and utilities. You can adjust this value to whatever you prefer for your project.

Customizing Screens

Breakpoints are the pre-defined screen sizes that Tailwind uses to create responsive designs. By default, Tailwind provides a set of breakpoints that you can use to create responsive designs. However, you may want to customize these breakpoints to fit your project's specific needs. To customize your breakpoints, you need to add a screens object to your tailwind.config.js file. This object defines the new breakpoints and their values. For example:

module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
  },
  variants: {},
  plugins: [],
}

It's important to note that Tailwind uses the min-width media query instead of the max-width media query. This means that when you define a screen size, you're actually defining the minimum screen size that the styles should apply to.

For example, in the code above, the sm screen applies to screens that are 480 pixels wide or larger, the md screen applies to screens that are 768 pixels wide or larger, and so on. We can now use these custom screen sizes in our utility classes. For example:

<h2 className="text-primary-100 text-1xl lg:text-7xl">
  Welcome to tailwind world!
</h2>

Here, the text-primary-100 class sets the text color to the primary shade 100, the text-1xl class sets the font size to 1rem and the lg:text-7xl class sets the font size to 7rem on large screens. This means that on screens with a width of 976px or greater, the font size of the h2 element will be 7rem.

Customizing Spacing

In Tailwind CSS, spacing refers to the space between elements. By default, Tailwind provides a set of predefined spacing values that you can use to create visually appealing layouts. However, you may want to customize these values to fit your project's specific needs.

To customize spacing in Tailwind, you need to add a spacing object to your tailwind.config.js file. This object defines the new spacing values and their names. For example:

module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
    }
  },
  variants: {},
  plugins: [],
}

In the code above, we added new spacing values with their respective values. We can now use these custom spacing values in our utility classes:

<h1 className="p-2 mb-1">
  Hello World!
</h1>

Here, we used the p-2 class to set a padding of 12px and the mb-1 class to set a margin bottom of 8px on the h2 element.

Conclusion

Customizing the default settings can seem intimidating, but with the tips outlined in this article, you can easily create a custom design that fits your project's specific needs. From customizing colors to defining your own spacing scale, the possibilities are endless with Tailwind CSS. So go ahead, get creative and happy coding!

Sailing Smoothly with Next.js and TailwindCSS: How to Create Gorgeous Websites with Ease

Beatrice Egumandi — Tue, 28 Mar 2023 18:30:42 +0000

In this article, we're setting sail on a journey to create stunning websites with ease using Next.js and TailwindCSS; and the best part is, we're not stopping at just one tutorial! We'll have a series of articles that will take you on a journey from the basics of installation to advanced techniques and everything in between.

Before we begin, it's important to note that we assume you already have some basic familiarity with CSS and Next.js and have already created a Next.js project. In case you haven't, don't worry! You can visit this link for a step-by-step guide on how to get started with Next.js. If you're new to this, don't fret! We'll make sure you're sailing smoothly in no time. Let's get started with our first part:

Setting up and installing TailwindCSS in our Next.js project

There are different methods available to install TailwindCSS but for the essence of this article we'll be using the Framework Guides installation method. We'll also need to use a package manager such as npm or yarn. Choose the one that you prefer, depending on your project's setup. For this tutorial, we'll be using npm but the steps should be similar for yarn as well. Open your terminal and navigate to your Next.js project folder, and enter the following command:

npm install -D tailwindcss postcss autoprefixer

This will install TailwindCSS, PostCSS, and Autoprefixer as development dependencies in your project. Then enter the following command:

npx tailwindcss init -p

This will generate a tailwind.config.js file in your project directory where your customizations can be done. The -p flag tells TailwindCSS to generate a postcss.config.js file as well. To configure TailwindCSS for your specific project setup, you'll need to add a template to the content array in the Tailwind config file. For example, if your project has an app folder, you'll need to add the app template to the content array.

"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}",

Here, it is assumed that the project has an app, pages, components and src folder.

In this image, the pages folder is what we have in the project hence, the pages template was used. Once you've updated the Tailwind config file, open the globals.css file in your project's styles directory and add the following code:

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

This will configure Tailwind to apply its base, component, and utility styles to your project.

We can now start using Tailwind to style our content. Add the following code in your index.js file in your pages directory:

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Welcome to tailwind world!
    </h1>
  )
}

The className 'text-3xl' will set the font size to 3 times the base font size, 'font-bold' will make the font bold and 'underline' will underline the text. Once that is done, run your development server using the following command:

npm run dev

This will start the Next.js development server and you can access your application by visiting http://localhost:3000 in your web browser.

Conclusion

We've covered the basics of installation and getting started with TailwindCSS in your Next.js project, as well as how to style your content using TailwindCSS classes. Keep in mind that this is just the beginning! There are a lot more techniques and features of TailwindCSS and Next.js to explore, and there'll be more articles to help you become a pro in no time. Happy coding😁😁!

Streamlining Your React Development with Next.js: A Guide to Migration for Developers

Beatrice Egumandi — Sun, 26 Mar 2023 17:03:35 +0000

React has been one of the most popular frontend frameworks for building web applications and it has been widely used by developers all over the world. However, using the outdated create-react-app CLI (Command Line Interface) to start new projects can be tedious and time-consuming, especially when it comes to configuring server-side rendering (SSR), handling image optimization, and improving performance. See Documentation

To address these challenges, Next.js, a popular React framework, was introduced to streamline the development process by providing a set of tools and features that help to optimize the development process, improve the user experience, and make the project more scalable. See Documentation

In this guide, I will walk you through the benefits of migrating to Next.js and provide a step-by-step guide on how to migrate your React project to Next.js.

Benefits of Migrating to Next.js

Server-side Rendering: Next.js comes with built-in support for server-side rendering(SSR), which allows you to pre-render the initial HTML on the server, and deliver it to the client, resulting in faster load times and improved SEO.
Automatic Code Splitting: Next.js automatically splits your code into small chunks and loads only the necessary parts, which improves the performance of your application, especially for larger applications.
Image Optimization: Next.js provides an automatic image optimization feature that compresses images and serves them in WebP format, resulting in faster load times and improved performance.
Static Site Generation: Next.js supports static site generation, which allows you to pre-render your pages at build time, resulting in faster load times and improved SEO.
Automatic Prefetching: Next.js automatically prefetches links that are in the user's viewport, resulting in faster navigation and improved user experience.

Step-by-Step Guide to Migrate Your React Project to Next.js

Step 1: Create a New Next.js Project
The first step is to create a new Next.js project using the command-line interface. You can create a new project by running the following command:

npx create-next-app@latest

This will create a new Next.js app in a directory of your choosing.

During the project creation process, you may also be prompted to install additional optional packages, depending on your project requirements. You can choose to install these packages or skip them for now and install them later as needed.

Step 2: Run the Development Server
Once you have made all the necessary installments, you can run the development server using the following command:

npm run dev

This will start the Next.js development server, and you can access your application by visiting http://localhost:3000 in your web browser.

Step 3: Copy React Components
Copy all your existing React components from your previous project into the pages directory of your new Next.js project. Next.js requires all pages to be inside the pages directory, so you will need to adjust your file structure accordingly.

Step 4: Adjust Routing
Next.js uses a file-system based routing system, which means that the file name determines the route path. For example, a file named about.js in the pages directory will create a route path /about.

You will need to adjust your routing accordingly to match the new file structure.

In this image, index.js is the default page for the root URL /, about.js is the page for the URL path /about, contact/index.js is the page for the URL path /contact and shop/index.js is the page for the URL path /shop.

The shop/[slug].js file is a dynamic route that matches any URL path that starts with /shop/ and has a segment after it. The key "slug" is actually a common term used in web development to refer to a portion of a URL that identifies a particular resource on a website. For example, in the URL http://localhost:3000/shop/shoes, "shoes" is the slug that identifies the specific product being viewed.

Step 5: Adjust the Entry Point
Next.js requires an entry point file called index.js in the pages directory. For example, if you moved the about.js page to a new directory called company, you would need to update the entry point file to reflect the new location of the about.js page. To do this, you could either choose to create a new index.js file or modify the existing one that Next.js provides by default and add the following code:

import About from './company/about';

export default About;

Here I imported the About page component from the new location ./company/about. This tells Next.js that the About page should be the new entry point for your application, so when a user navigates to the root URL of your application, the content of the About page will be rendered instead of the previous index.js page. You can adjust the entry point file in a similar way to match your new file structure.

Conclusion

Migrating your React project to Next.js can streamline your development process and improve the performance and user experience of your application. By following the step-by-step guide provided in this article, you can easily migrate your project to Next.js and take advantage of its many features and benefits. Happy Coding!

The Ultimate Guide to Converting React Apps to Progressive Web Apps

Beatrice Egumandi — Sat, 11 Mar 2023 19:54:35 +0000

Do you want to take your React app to the next level and offer your users an app-like experience without the struggle of downloading a native app? Then Progressive Web Apps (PWAs) are the answer! PWAs offer offline functionality, push notifications and more, making them a game-changer in web development. In this article, I'll walk you through the steps on converting your React app to a PWA, allowing you to deliver an immersive, app-like experience to your users.

Introduction

To get familiar with the terms I will be referring to:

Progressive Web Apps (PWAs) are a new development trend that offers users an app-like experience on their mobile devices without installing a native app. PWAs are essentially websites that run on the mobile browser and can be stored on a device. They create an icon that looks and feels like a mobile application when opened. See Documentation
Service workers are like special helpers that sit between your browser and the server. They can help your website work better by allowing it to be accessed even if you don't have an internet connection. They can also make your website faster by caching (storing) certain data so that it doesn't have to be reloaded every time you visit the website. See Documentation
Web App Manifest is a JSON file that describes your app and provides metadata about it, such as its name, icons, and start URL. The manifest is used by the browser to add your app to the home screen and to provide a more app-like experience. See Documentation

Having covered the key terms and concepts, we can now dive straight into the steps required to convert your React app to a Progressive Web App.

Step 1: Create a new React app

To begin you must create a new React project with cra-template-pwa template, which includes the necessary configurations and files for building a progressive web app. Enter the following command into your terminal.

npx create-react-app my-app --template cra-template-pwa

Step 2: Enable service worker functionality

Upon creating a new React app, the service worker files are automatically included. To enable the app to function as a PWA, you need to modify the default service worker registration from 'unregister()' to 'register()' in your index.js file. This change ensures that the service worker is registered as a persistent background process, allowing your app to behave like a PWA even after users close their browser or turn off their device. It should look like this

Step 3: Enable your Web app manifest

To customize the appearance of your PWA, you can edit the manifest.json file located in the public directory of your React app. For example, if you want to change the name of your app, you can modify the name property in this file. I will be changing the name of my PWA using this approach.

Step 4: Editing App.js to Customize Your React PWA

You can add any content you want to your App.js file. Here is an example of what my App.js file looks like:

Step 5: Build the App

The next step is to build the app. This will create a production-ready version of your app in the build directory. To build the app, run the following command in the terminal:

npm run build
//or
yarn build

Step 6: Serve the App

The final step is to serve the production-ready version of your app located in the build directory. This will create a local server and serve your PWA directly from the build folder. First run the following command to install 'serve' package globally.

npm install -g serve
//or
yarn global add serve

Then run this command to start a server at http://localhost:5000 (or another available port) and serve your PWA from the build directory

npx serve -s build

When you run your app in your browser it should look like this

You can also add a prompt for ios using the 'react-ios-pwa-prompt' library by running the following command:

npm i react-ios-pwa-prompt

Then, in your index.js file, you should import the PWAPrompt component from the 'react-ios-pwa-prompt' library using the following code:

import PWAPrompt from 'react-ios-pwa-prompt';

Next, wrap your app using the PWAPrompt component and the React.StrictMode component as shown below:

<React.StrictMode>
  <App />
  <PWAPrompt
    promptOnVisit={1}
    timesToShow={3}
    copyClosePrompt="Close"
    permanentlyHideOnDismiss={false}
  />
</React.StrictMode>

The promptOnVisit prop determines when the prompt will be displayed, with a value of 1 indicating that it will be displayed on the first visit. The timesToShow prop determines how many times the prompt will be shown. The copyClosePrompt prop sets the text for the close button, and the permanentlyHideOnDismiss prop determines whether the prompt will be permanently hidden if dismissed.

Conclusion

Congratulations! In this article we walked through the process of converting a React app to a Progressive Web App. We started by understanding the key features and requirements of a PWA, including a service worker and a manifest file and how to implement them. Additionally, we explored advanced PWA features, such as push notifications and home screen icons and title and learned how to incorporate them into a React app. Happy coding!

Creating an App with React, Apollo, and GraphQL: A Step-by-Step Guide to Fetching Data and Error Handling

Beatrice Egumandi — Sat, 18 Feb 2023 22:12:54 +0000

Are you looking to build a modern web application with scalable, data-driven user interfaces? Then this article is for you. In this step-by-step guide, I'll walk you through the steps required to fetch data from a GraphQL endpoint using Apollo Client in a React application, and how to handle errors that may occur during the process.

Introduction

In case you are not familiar with the terms:

GraphQL is a powerful query language for APIs (Application Programming Interface) that was developed by Facebook. It provides a more efficient, powerful, and flexible alternative to REST APIs (Representational State Transfer Application Programming Interface) for building modern web applications. With GraphQL, instead of requesting pre-defined data structures from a server, clients can specify exactly what data they need and receive a JSON (JavaScript Object Notation) object that matches their request. This means that you can retrieve only the data you need, reducing the amount of network traffic and improving performance. See Documentation
Apollo Client is a JavaScript library that provides a way to interact with a GraphQL API from a client-side application. It allows you to fetch data from a GraphQL server, cache it locally, and manage its state in your application. It provides a simple and flexible way to query and mutate data using GraphQL, making it easy to build powerful, data-driven user interfaces. See Documentation

Prerequisites
You'll need to have some basic knowledge of React and JavaScript.

Setting up the Environment

Before we get started, let's make sure we have the necessary tools and libraries installed. We'll be using create-react-app to create a new React project, and Apollo Client to query our GraphQL endpoint.

npx create-react-app my-app
cd my-app
npm install @apollo/client graphql

Defining the GraphQL Endpoint

To fetch data from a GraphQL API, we need to define the endpoint that we'll be making requests to. For this example, we'll use the following endpoint:

https://countries.trevorblades.com/graphql

Setting up Apollo Client

Next, we'll set up Apollo Client in our index.js file and wrap our App component with the Apollo Provider. Our index.js file should look like this:

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://countries.trevorblades.com/graphql',
  cache: new InMemoryCache(),
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>
);

This code creates a new instance of ApolloClient, and sets the URI to our GraphQL endpoint. It wraps our App in the ApolloProvider passing client object as a prop. You might be wondering why "uri" (Uniform Resource Identifier) and not "url"(Uniform Resource Locator) and that's because in the context of Apollo Client, "uri" refers to the location of the GraphQL server that the client will connect to in order to fetch data. This is likely because the URI includes not only the location of the server, but also additional details such as the protocol and any query parameters, while a URL refers specifically to the location of a resource.

Creating a Query Component

Now that we have our GraphQL endpoint and Apollo Client set up, we can now fetch data from the API. In our App.js file paste in the following code:

import { useQuery, gql } from '@apollo/client';

const GET_LOCATIONS = gql`
  query GetLocations {
    country(code: "BR") { //Add your query here
      name
      native
      capital
      emoji
      currency
      languages {
        code
        name
      }
    }
  }
`;

const App = () => {
 const { loading, error, data } = useQuery(GET_LOCATIONS);
 const {name, currency, capital, native, emoji, languages} = data?.country || {};

 if (loading) return <p>Loading...</p>;
 if (error) return <p>Error: {error.message}</p>;

return (
 <div key={name}>
      <h2>Let's Know Our Countries 🚀</h2>
      <h3>Country: {name}</h3>
      <br />
      <b>About this location:</b>
      <ol>
        <li>Capital is known as {capital}</li>
        <li>Its symbol is {emoji}</li>
        <li>Its native is {native}</li>
        <li>Currency: {currency}</li> 
        {languages?.map((lang) => (
          <ol key={lang.code}>
            <li>Language: {lang.name}</li>
            <li>Code: {lang.code}</li>
          </ol>
        ))}
      </ol>
 </div>
);

export default App;

This code uses the useQuery hook from Apollo Client to take a GraphQL query as its argument and return an object that contains the data, loading, and error states for that query. In this case, the query is defined using the gql template literal function and assigned to a variable called GET_LOCATIONS.
The App component then calls useQuery with GET_LOCATIONS as its argument, and destructures the resulting loading, error, and data states. The data state is destructured further to get the name, currency, capital, native, emoji, and languages fields from the GraphQL response. It also handles loading and error states and returns the UI to be displayed once the data is loaded.

Running the Application

Finally, we can run our application to see the results of our code. Run the following command in your terminal:

npm start

This will start the development server and open up a new tab in your web browser displaying the application. It should look like this.

Conclusion

Congratulations! In this article, we walked through the process of fetching data from a GraphQL API using Apollo Client in our React application and how to handle errors that may occur during the process. With this knowledge, you can start building powerful, data-driven user interfaces on your own. Happy coding!

Firebase Error: Unauthorized Domain in Deployed Site

Beatrice Egumandi — Mon, 30 Jan 2023 10:57:23 +0000

Hello Everyone! In this article we will be exploring the "FirebaseError: Firebase: auth/unauthorized-domain" error. We will be discussing what the error means, why it is displayed and how to resolve it.

What is Firebase?

Firebase is a popular backend platform used for developing web and mobile applications. It provides various features such as real-time database, authentication, hosting, and more. However, sometimes users may encounter errors during deployment, and one of the common errors is "auth/unauthorized Domain." This error occurs when the domain used for hosting the website is not authorized in the Firebase console.

Here's how you can resolve this issue:

Go to the Firebase Console and select your project.
Navigate to the Build section and click on the "Authentication" menu.
Go to the "Settings" bar and click on "Authorized domains" and add your domain link using the "Add domain" button.
Once the domain has been verified, refresh the website again.

You might have been wondering why your firebase authentication is working perfectly on your local host but not on your deployed site and this is because by default, Firebase allows access to your website through the local host (i.e. localhost:3000), which makes it convenient for development and testing purposes.

In summary, when you want to deploy your website to a custom domain, you need to add that domain to the list of authorized domains in the Firebase Console. By white-listing your custom domain, you can ensure that your website is accessible only through authorized domains and improve the security of your data.

Thank you for reading this article!

Forem: Beatrice Egumandi

How to Connect to Your VPN on macOS Using Tunnelblick and a Certificate

Step 1: Install Tunnelblick

Step 2: Gather Your Configuration Files

Step 3: Add or Prepare Your Certificate for Tunnelblick

Option 1: Directly Import the .p12 File

Option 2: Extract .pem Files (If Direct Import Fails)

Step 4: Configure Your .ovpn File

Step 5: Fix Cipher Compatibility

Step 6: Add Your Configuration to Tunnelblick

Step 7: Connect to the VPN

Step 9: Troubleshoot Common Issues

🧠 State-of-the-Art Programming vs 🎧 Vibe Coding: A Tale of Two Dev Modes

✨ What Is State-of-the-Art Programming?

🛠 What It Looks Like in Practice

👩🏽‍💻 Real Example

🎧 So… What Is Vibe Coding?

What Vibe Coding Looks Like

🎯 When It’s Perfectly Valid

⚠️ When It’s Risky

🔥 Examples

✨ Real Talk: You Need Both

🧠 TL;DR

💬 So... Which One Are You Today?

Trees vs Graphs: Understanding the Key Differences in Data Structures

🌳 All Trees Are Graphs, But Not All Graphs Are Trees

🔍 How to Spot the Difference: Rules vs Chaos

💭 What Happens When You Mix Them Up?

Conclusion

Customizing Tailwind CSS in Next.js: A Complete Guide

Table of Contents

Customizing colors

Customizing Typography

Customizing Screens

Customizing Spacing

Conclusion

Sailing Smoothly with Next.js and TailwindCSS: How to Create Gorgeous Websites with Ease

Setting up and installing TailwindCSS in our Next.js project

Conclusion

Streamlining Your React Development with Next.js: A Guide to Migration for Developers

Benefits of Migrating to Next.js

Step-by-Step Guide to Migrate Your React Project to Next.js

Conclusion

The Ultimate Guide to Converting React Apps to Progressive Web Apps

Introduction

Step 1: Create a new React app

Step 2: Enable service worker functionality

Step 3: Enable your Web app manifest

Step 4: Editing App.js to Customize Your React PWA

Step 5: Build the App

Step 6: Serve the App

Conclusion

Creating an App with React, Apollo, and GraphQL: A Step-by-Step Guide to Fetching Data and Error Handling

Introduction

Setting up the Environment

Defining the GraphQL Endpoint

Setting up Apollo Client

Creating a Query Component

Running the Application

Conclusion

Firebase Error: Unauthorized Domain in Deployed Site

What is Firebase?

Option 1: Directly Import the `.p12` File

Option 2: Extract `.pem` Files (If Direct Import Fails)

Step 4: Configure Your `.ovpn` File