DEV Community: Dan Mugisho M.

Understand Open Graph ( OG ) in Next Js : A Practical Guide

Dan Mugisho M. — Thu, 31 Oct 2024 18:46:55 +0000

Imagine a world where your content effortlessly shares itself, captivating audiences on social media. This is the reality made possible by Open Graph (OG) protocol. In the realm of Next.js, the use of OG becomes even more strategic.

Open Graph is a protocol that allows websites to provide rich snippets of information about their content when shared on social media platforms. By implementing Open Graph image, you can control how your content appears when shared on Facebook, Twitter, LinkedIn, and other platforms. This ensures that your posts are visually appealing and informative, encouraging users to click and engage with your content.

In this guide, we’ll explore how to generate OG images dynamically and cover different implementation scenarios, tailoring OG tags to match your specific content requirements. Ensuring your content looks great when shared on social media platforms.

Assuming you have a solid understanding of Next.js and its core concepts, and familiarity with Tailwind CSS for styling Open Graph, Let’s start by :

Creating a Next Js project npx create-next-app@latest
Installing OGraph Previewer Chrome extension, a must-have tool when working with Open Graph (OG). It offers a quick and easy way to visualize how your web pages will appear when shared on social media platforms. Simply install the extension and visit any page on your website. With a single click, you’ll be able to see a preview of your page’s title, description, and image, ensuring that they align with your desired presentation.

Before we delve into the intricacies of Open Graph tags in Next.js, let’s set the stage with a clean and well-structured project.

Remove the app/fonts files since we won’t be needed them for our blog setup.
Update app/layout.tsx to :

import "./globals.css";

import type { Metadata } from "next";
import { Poppins } from "next/font/google";

const poppins = Poppins({
  subsets: ["latin"],
  display: "swap",
  weight: ["300", "400", "500", "600", "700"],
  variable: "--poppins",
});

const baseUrl = "https://www.danmugh.com/"; // Your website url

export async function generateMetadata(): Promise<Metadata> {
  const title = "My Blog";

  const description =
    "Welcome to my blog! Dive into a wealth of insightful articles, practical guides, and project breakdowns, empowering you to level up your Rust and Blockchain development skills.";

  return {
    metadataBase: new URL(baseUrl),
    title,
    description,
    themeColor: "black"
  };
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${poppins.className} ${poppins.variable} font-sans bg-dark`}
      >
        <div className="w-full min-h-screen flex flex-col sm:px-[100px] md:px-[140px] lg:px-[200px] xl:px-[225px]">
          {children}
        </div>
      </body>
    </html>
  );
};

Update app/page.tsx to :

import React from "react";

export default function Home() {
  return (
    <div className="w-full min-h-screen pt-24 ">
      <div className="flex flex-col justify-center items-center">
        <h1 className="text-white text-3xl sm:text-5xl text-center font-semibold">
          Blog Page
        </h1>

        <p className="w-[70%] mt-8 mb-3 text-lg text-white/50 text-center font-medium leading-normal">
          Welcome to my blog! Dive into a wealth of insightful articles,
          practical guides, and project breakdowns, empowering you to level up
          your Rust and Blockchain development skills.
        </p>
      </div>
    </div>
  );
}

Delete all the files in public directory.
Create in src, components and lib directories
In src/lib, create Resources.ts file
Create in src, app/api/og directory
Create in public, fonts directory and add rubik.ttf

We should have this structure :

.
├── public
│   └── fonts
│       └── rubik.ttf
├── src
│   ├── app
│   │   ├── api
│   │   │   └── og
│   │   │        └── route.tsx
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components
│   └── lib
│       └── Resources.ts 
│
├── tailwind.config.ts
├── tsconfig.json
├── README.md
├── next-env.d.ts
├── next.config.mjs
├── package.json
└── postcss.config.js

Now that we’ve set up a basic blog structure in place, we’re ready to add content and implement Open Graph image.

1. Implementing Open Graph using an Image file.

Let’s add this image in public directory, and export it in src/lib/Resources.ts

export const Thumbnail = '/thumbnail.png'; // Assuming the image name is thumbnail

Change the layout metadata to :

export async function generateMetadata(): Promise<Metadata> {
  const title = "My Blog";

  const description =
    "Welcome to my blog! Dive into a wealth of insightful articles, practical guides, and project breakdowns, empowering you to level up your Rust and Blockchain development skills.";

  return {
    metadataBase: new URL(baseUrl),
    title,
    description,
    themeColor: "black",
    openGraph: {
      title,
      description,
      url: baseUrl,
      images: [
        {
          url: Thumbnail,
          secureUrl: Thumbnail,
          width: 1200,
          height: 630,
          alt: "Preview image for Dan Mugh's Blog",
        },
      ],
      type: "website",
      siteName: "Dan Mugh's Blog",
    },
  };
}

const title and description : Respectively set the title and the description of the blog page and the Open Graph title & description.
metadataBase : Specifies the base URL of the website ( https://www.danmugh.com in our case ).
themeColor : The preferred color for the browser’s UI.
openGraph is an object containing Open Graph metadata :

title and description: These repeat the title and description from the outer level, ensuring consistency.
url: This property sets the URL of the current page.
images is an array of image objects for the Open Graph :

url: The URL of the image.
secureUrl: The secure URL of the image (e.g., HTTPS).
width and height: These properties provide the dimensions of the image.
alt: The alternative text for the image.

type: Specifies the type of content on your page. Common values include “website”, “article”, “book”, and “profile”.
siteName: The name of the website.

Note that the flexibility of having multiple image objects in images array, is particularly useful for catering to different social media platforms and their specific image size requirements. For example, Twitter might prefer a smaller square image (800x800), while Facebook might favor a larger landscape format (1800x1600). By including multiple image objects with appropriate dimensions, you ensure that your content is displayed optimally on various platforms, maximizing its visual impact and potential reach.

After adding these changes, we should be able to test from OGraph Previewer and get this output

And having the following meta tags as output :

<meta property="og:title" content="My Blog" /> 
<meta property="og:description" content="Dive into a wealth of insightful articles..." /> 
<meta property="og:url" content="https://www.danmugh.com/" /> 
<meta property="og:site_name" content="Dan Mugh's Blog" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="http://localhost:3000/thumbnail.png"> 
<meta property="og:image:alt" content="Preview image for Dan Mugh's Blog" /> 
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="website" />

2. Implementing Open Graph using a generated Image.

The easiest way to generate an image is to use the ImageResponse API from next/og.

Let’s create route.tsx in app/api/og and add the below code :

import { ImageResponse } from "next/og";

// Route segment config
export const runtime = "edge";

export const contentType = "image/png";

// Image generation
export async function GET() {
  try {
    // Font
    const rubik = await fetch(
      new URL("../../../../public/fonts/rubik.ttf", import.meta.url)
    ).then((res) => res.arrayBuffer());

    return new ImageResponse(
      (
        <div
          style={{
            fontFamily: "Rubik",
            fontWeight: "bolder",
            background: "linear-gradient(to right, #6a11cb 0%, #2575fc 100%)",
          }}
          tw="w-full h-full p-8 flex items-center justify-center relative"
        >
          <div tw="flex flex-col">
            <h1 tw="text-white text-5xl font-bold leading-[4px]">Learn more today!</h1>
            <h1 tw="text-white/70 text-3xl font-bold leading-[8px]">Dive into the future of tech...</h1>
          </div>
        </div>
      ),
      {
        fonts: [
          {
            name: "Rubik",
            data: rubik,
            weight: 700,
            style: "normal",
          },
        ],
      }
    );
  } catch (e: any) {
    return new Response("Failed to generate OG Image", { status: 500 });
  }
}

runtime Property : This property specifies that the code should be executed on the edge, which is a serverless environment optimized for serving static content

alt, size, and contentType Properties : These properties define the alternative text, dimensions, and content type of the image, respectively. You can set the size and alt from the openGraph in the layout file as well.

GET Function : This function handles HTTP GET requests to the route.

Font Loading : The code fetches the rubik.ttf font file and converts it to an array buffer. This is necessary for including the font in the image generation process ( You may need to adjust the font path and file name (rubik.ttf) to match your project structure ).

Image Creation :

A new ImageResponse is created, which represents the generated image.
The div element inside the ImageResponse defines the content of the image. It includes a heading with the blog title and a background gradient.
The fonts property specifies the font used in the image. The rubik font data is included in the data property.

Error Handling : A try-catch block is used to handle potential errors during the font fetching and image generation process. If an error occurs, a response with a 500 status code is returned.

You can effectively combine Tailwind CSS classes with custom CSS for a more flexible approach. And I will recommend to use Tailwind classes ( tw ) for common styles and custom CSS for more specific or complex requirements.

Additionally, we can update layout openGraph to :

…
openGraph: {
      title,
      description,
      url: baseUrl,
      images: [
        {
          url: `/api/og`,
          width: 1200,
          height: 630,
          alt: "Preview image for Dan Mugh's Blog",
        },
      ],
      locale: "en_US",
      type: "website",
      siteName: "Dan Mugh's Blog",
  },

By now, we should be able to see the output in the OGraph Previewer, or by visiting http://localhost:3000/api/og

And have this output :

<meta property="og:title" content="My Blog">
<meta property="og:description" content="Dive into a wealth of insightful articles, practical guides, and project breakdowns, empowering you to level up your Rust and Blockchain development skills.">
<meta property="og:url" content="https://www.danmugh.com">
<meta property="og:site_name" content="Dan Mugh's Blog">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="http://localhost:3000/api/og">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Preview image for Dan Mugh's Blog">
<meta property="og:type" content="website">

While we’ve covered core concepts for creating Open Graph image, you can explore Vercel Image Playground for interactive experimentation. This handy tool lets you visually build and test Open Graph images by directly editing the HTML and CSS that define their appearance. You can play with fonts, colors, layouts, and even preview the generated image in real-time.

Once you’ve mastered the basics here, head over to the Vercel Image Playground to solidify your Open Graph image creation skills!

3. Implement Dynamic Open Graph Route.

To make our blog truly dynamic and showcase fresh content, we need to integrate an API to fetch articles. Here, we’ll leverage the dev.to API, which provides access to published articles on the platform. The API endpoint we’ll use is :

https://dev.to/api/articles/{username}

If you don’t have a dev.to account yet, no worries! You can simply use mine (danmugh) for demonstration purposes. ( But make sure to replace it with your username later when you create your own account 😄 ).

I’ve made some significant changes to the project, to fetch and display blog articles. I won’t delve into the details here. Feel free to clone the repository and update your project to incorporate these enhancements.

Assuming you’ve successfully updated the project and you’re seeing the blog content locally, let’s go to article/[slug] and change the metadata to :

export async function generateMetadata({
  params: { slug },
}: Props): Promise<Metadata> {
  const baseUrl = "https://www.danmugh.com/";

  const article = (await serverServices.getArticle(
    slug
  )) as IArticleModel;

  const title = article.title;
  const description = article.description;
  const articleSlug = article.slug;

  return {
    title,
    description,
    metadataBase: new URL(baseUrl),
    openGraph: {
      title,
      description,
      images: [
        {
          url: `/api/og?title=${articleSlug}`,
          width: 1200,
          height: 630,
          alt: `Preview image for ${title}`,
        },
      ],
      type: "article",
      url: `/blog/${slug}`,
    },
    alternates: {
      canonical: `/blog/${slug}`,
    },
  };
}

We are passing the article slug to the Open Graph image, so we can fetch the article data from the route.

In api/og/route.tsx, above font loading, we can add :

...
const article: IArticleModel = await fetch(
      `https://dev.to/api/articles/danmugh/${req.nextUrl.searchParams.get(
        "title"
      )}`
    ).then((res) => res.json());

Now that we have the article data in the route, we can use the data to design the Open Graph Image.

...
return new ImageResponse(
      (
        <div
          style={{
            fontFamily: "Rubik",
            fontWeight: "bolder",
            background: "linear-gradient(to right, #6a11cb 0%, #2575fc 100%)",
          }}
          tw="w-full h-full p-8 flex items-center justify-center relative"
        >
          <div tw="w-full flex flex-col">
            <h1 tw="text-[36px] text-white font-bold">{article.title}</h1>
            <div tw="h-[50px] mt-3 flex justify-between items-center">
              <div tw="flex justify-center items-center">
                <img
                  src={article.user.profile_image}
                  width={100}
                  height={100}
                  alt={article.title}
                  tw="w-[60px] h-[60px] rounded-[10px] mr-2"
                  style={{ objectFit: "cover" }}
                />
                <div tw="flex flex-col">
                  <p tw="text-[20px] text-white font-semibold leading-[1px]">
                    {article.user.name}
                  </p>
                  <p tw="text-[20px] text-white/60 font-semibold leading-[1px]">
                    Author
                  </p>
                </div>
              </div>
              <p tw="text-[20px] text-white font-semibold">
                {article.reading_time_minutes} Min read
              </p>
            </div>
          </div>
        </div>
      ),
      {
        fonts: [
          {
            name: "Rubik",
            data: rubik,
            weight: 700,
            style: "normal",
          },
        ],
      }
   );

We should have a preview of the OG image from the OGraph Previewer extension.

Or by visiting http://localhost:3000/api/og?title=${articleSlug} ( Assuming the articleSlug is “integrating-wagmi-v2-and-rainbowkit-in-nextjs-a-comprehensive-guide-part-1–37ck” )

And this output as well :

<meta property="og:title" content="Integrating Wagmi V2 and Rainbowkit in NextJs : A Comprehensive Guide (Part 1)">
<meta property="og:description" content="Welcome to the forefront of Web3/Frontend development, where we embark on a transformative journey of...">
<meta property="og:url" content="https://www.danmugh.com/blog/integrating-wagmi-v2-and-rainbowkit-in-nextjs-a-comprehensive-guide-part-1-37ck">
<meta property="og:image" content="http://localhost:3000/api/og?title=integrating-wagmi-v2-and-rainbowkit-in-nextjs-a-comprehensive-guide-part-1-37ck">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Preview image for Integrating Wagmi V2 and Rainbowkit in NextJs : A Comprehensive Guide (Part 1)">
<meta property="og:type" content="article">

Now that we’ve explored various Open Graph implementation scenarios, let’s wrap up this guide with a more intricate case ( a truly mind-bending case study ), where we’ll push the boundaries of Open Graph image customization to the absolute limit. Buckle up, folks 😎

In this section, we’ll delve into advanced techniques for customizing OG images, allowing you to create truly unique and visually striking previews for your content.

Let’s add this image in public and export it from lib/Resource.ts. We shall use it as background of the OG image we are going to build.

export const OGBackground = '/OGBackground.png'; // Assuming the image name is OGBackground

In route.tsx, we can fetch the background image file and passe it as an ArrayBuffer :

const bg = await fetch(
      new URL("../../../../public/OGBackground.png", import.meta.url)
  ).then((res) => res.arrayBuffer());

And change the ImageResponse to :

<div
   style={{
     fontFamily: "Rubik",
     fontWeight: "bolder",
   }}
   tw="w-full h-full flex items-center justify-center relative"
>
   <img
      src={bg}
      width={100}
      height={100}
      alt="background"
      tw="w-full h-full"
      style={{ objectFit: "cover" }}
    />
    <div tw="absolute top-0 left-0 p-16 w-full h-full flex items-center justify-start">
      <div
        style={{ background: "#1B2022" }}
        tw="max-w-[420px] h-full mx-0 p-5 shadow-[0px_8px_16px_0px_rgba(0,0,0,0.15)] rounded-xl flex flex-col items-start justify-between"
      >
        <div tw="flex flex-col">
           <div tw="flex justify-center items-center">
              <img
                 src={article.cover_image}
                 tw="w-full h-[190px]"
                 width={100}
                 height={100}
              />
              </div>
                 <h2 tw="mt-4 text-2xl text-white text-start font-bold leading-8 line-clamp-3">
                   {article.title}
                 </h2>
                 <p tw="text-lg text-white/50 text-start font-normal leading-6 line-clamp-5">
                   {article.description}
                 </p>
              </div>
              <div tw="w-full flex justify-between items-center">
                 <p tw="text-[17px] text-white/75 font-semibold">
                   {article.readable_publish_date}
                 </p>
                 <p tw="text-[17px] text-white/75 font-semibold">
                   {article.reading_time_minutes} Min read
                 </p>
              </div>
         </div>
     </div>
     <div tw="absolute top-0 right-0 p-16 w-full h-full flex items-end justify-end">
         <div tw="flex justify-center items-center">
              <p tw="text-[22px] text-white/85 font-semibold leading-[1px]">
                  #LearnMoreToday
               </p>
               <img
                 src={article.user.profile_image}
                 width={100}
                 height={100}
                 alt={article.title}
                 tw="w-[40px] h-[40px] rounded-[10px] ml-3"
                 style={{ objectFit: "cover" }}
               />
         </div>
     </div>
</div>

By combining Tailwind CSS classes with custom CSS, we have created a highly customized, unique and visually appealing OG Image.

And here we are 😎

In this guide, we’ve explored the essential concepts of Open Graph metadata in Next.js. By understanding and implementing Open Graph, you can significantly enhance your website’s visibility and engagement on social media platforms.
From basic setup to advanced customization, we’ve covered various techniques to create compelling and informative social media previews.
Remember, well-crafted Open Graph metadata is an investment in your website’s online presence.

Now that you’ve acquired some Open Graph skills, it’s time to unleash your creativities. I’d be delighted to see the visually appealing Open Graph Images you create!

Feel free to share your website links with me at contact@danmugh.com

☞ GitHub repo

☞ Follow me on Twitter & Linkedin

☞ Kindly subscribe for my upcoming articles

Integrating Wagmi V2 and Rainbowkit in NextJs : A Comprehensive Guide (Part 1)

Dan Mugisho M. — Mon, 22 Apr 2024 13:32:06 +0000

Welcome to the forefront of Web3/Frontend development, where we embark on a transformative journey of integrating Wagmi V2 alongside RainbowKit for seamless wallet connection and unlocking advanced features for a robust and feature-rich dApp.

In this comprehensive guide, we’ll explore the complex landscape of modern web development, empowering you to effortlessly implement and optimize wallet functionalities within your NextJs project.

Whether you’re transitioning from Wagmi V1 or venturing into Wagmi V2 for the first time, this article promises to equip you with the knowledge to elevate your user experiences and streamline wallet interactions.

In this Part 1, we tackle the essentials: establishing seamless wallet connections and fetching crucial user data like addresses, network details, balances, ENS names…

Create the project

npx create-next-app@latest my-project - typescript - eslint

Add Wagmi to the project, install the required packages

yarn add wagmi viem@2.x @tanstack/react-query

Viem is a TypeScript interface for Ethereum that performs blockchain operations.
TanStack Query is an async state manager that handles requests, caching, and more.

Install Rainbowkit

yarn add  @rainbow-me/rainbowkit

Let’s create and export a new config using createConfig, in lib/config.ts

'use client';

import { http, createStorage, cookieStorage } from 'wagmi'
import { sepolia, bscTestnet, blastSepolia } from 'wagmi/chains'
import { Chain, getDefaultConfig } from '@rainbow-me/rainbowkit'

const projectId = ‘’;

const supportedChains: Chain[] = [sepolia, bscTestnet, blastSepolia];

export const config = getDefaultConfig({
   appName: 'WalletConnection‘,
   projectId,
   chains: supportedChains as any,
   ssr: true,
   storage: createStorage({
    storage: cookieStorage,
   }),
  transports: supportedChains.reduce((obj, chain) => ({ ...obj, [chain.id]: http() }), {})
 });

In this example, Wagmi is configured to use the Sepolia, BscTestnet and blastSepolia chains, wrapped in supportedChains array.

Wagmi uses client-side storage for fast initial data, but this can cause issues with SSR frameworks like Next.js. Enabling the ssr property in Wagmi config fixes this by hydrating the data on the client after the initial render.

Here, we use cookieStorage to store Wagmi data in browser cookies. This allows persistence across page refreshes within the same browser.

The reduce function iterates through the supportedChains array. For each chain, it creates a key-value pair in the transports object ( [bscTestnet.id]: http() ). These transports handle making HTTP requests to the blockchain nodes for interactions and data retrieval.

Check out the createConfig docs for more configuration options.

Wrap App in Context Provider and RainbowKitProvider

Wrap the app in the WagmiProvider React Context Provider and pass the config you created earlier to the value property. Check out the WagmiProvider docs to learn more about React Context in Wagmi.
In Wagmi V2, you no longer need to pass chains to <RainbowKitProvider>.
Inside the WagmiProvider, wrap the app in a TanStack Query React Context Provider, e.g. QueryClientProvider, and pass a new QueryClient instance to the client property.

Since Next.js 14 restricts functions in Client Components and improve code organization, let’s create a dedicated component to manage the problematic data handling logic.

In app/providers.tsx, add :

"use client";

import { WagmiProvider } from "wagmi";
import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { config } from "@/lib/config";

const queryClient = new QueryClient();

type Props = {
  children: React.ReactNode;
};

export default function Providers({ children }: Props) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider
          theme={darkTheme({
            accentColor: "#0E76FD",
            accentColorForeground: "white",
            borderRadius: "large",
            fontStack: "system",
            overlayBlur: "small",
          })}
        >
          {children}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

We are marking the component "use client" as it wraps libraries ( WagmiProvider, QueryClientProvider, RainbowKitProvider ) that rely on browser-specific functionalities.

Since it will be imported in layout.tsx ( a Server Component ), marking it "use client" ensures these libraries are only loaded and executed on the client-side (user’s browser) during hydration. This prevents unnecessary code execution on the server and improves initial page load performance.

Let’s now import Providers in layout.tsx

import "./globals.css";
import "@rainbow-me/rainbowkit/styles.css";

import { Inter } from "next/font/google";
import Providers from "./providers";

const inter = Inter({ subsets: ["latin"] });

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

To ensure Wagmi’s cookie data persists across page loads in our Next.js application, we’ll need to set up a hydration mechanism.

This involves extracting the cookie from the request headers within our server component (app/layout.tsx) and using cookieToInitialState to convert it into a suitable format.

Finally, we’ll pass this initial state to the WagmiProvider component located in a client component (app/providers.tsx) tagged with "use client". This process essentially "hydrates" the cookie data on the client-side, making it accessible throughout our dApp.

In app/layout.tsx, let’s add :

...
+ import { headers } from "next/headers";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  + const cookie = headers().get("cookie");

  return (
    <html lang="en">
      <body className={inter.className}>
        + <Providers cookie={cookie}>{children}</Providers>
      </body>
    </html>
  );
}

And in app/providers.tsx, add :

"use client";

...
+ import { WagmiProvider, cookieToInitialState } from "wagmi";

type Props = {
  children: React.ReactNode;
  + cookie?: string | null;
};

+ export default function Providers({ children, cookie }: Props) {
  + const initialState = cookieToInitialState(config, cookie);
  return (
    + <WagmiProvider config={config} initialState={initialState}>
      ...
    </WagmiProvider>
  );
}

Now that everything is set up, every component inside the Wagmi and TanStack Query Providers can use Wagmi React Hooks.

In app/components/connectButton.tsx, let's add :

"use client";

import { useEffect, useRef } from "react";
import {
  useConnectModal,
  useAccountModal,
  useChainModal,
} from "@rainbow-me/rainbowkit";
import { useAccount, useDisconnect } from "wagmi";
import { emojiAvatarForAddress } from "@/lib/emojiAvatarForAddress";

export const ConnectBtn = () => {
  const { isConnecting, address, isConnected, chain } = useAccount();
  const { color: backgroundColor, emoji } = emojiAvatarForAddress(
    address ?? ""
  );

  const { openConnectModal } = useConnectModal();
  const { openAccountModal } = useAccountModal();
  const { openChainModal } = useChainModal();
  const { disconnect } = useDisconnect();

  const isMounted = useRef(false);

  useEffect(() => {
    isMounted.current = true;
  }, []);

  if (!isConnected) {
    return (
      <button
        className="btn"
        onClick={async () => {
          // Disconnecting wallet first because sometimes when is connected but the user is not connected
          if (isConnected) {
            disconnect();
          }
          openConnectModal?.();
        }}
        disabled={isConnecting}
      >
        { isConnecting ? 'Connecting...' : 'Connect your wallet' }
      </button>
    );
  }

  if (isConnected && !chain) {
    return (
      <button className="btn" onClick={openChainModal}>
        Wrong network
      </button>
    );
  }

  return (
    <div className="max-w-5xl w-full flex items-center justify-between">
      <div
        className="flex justify-center items-center px-4 py-2 border border-neutral-700 bg-neutral-800/30 rounded-xl font-mono font-bold gap-x-2 cursor-pointer"
        onClick={async () => openAccountModal?.()}
      >
        <div
          role="button"
          tabIndex={1}
          className="h-8 w-8 rounded-full flex items-center justify-center flex-shrink-0 overflow-hidden"
          style={{
            backgroundColor,
            boxShadow: "0px 2px 2px 0px rgba(81, 98, 255, 0.20)",
          }}
        >
          {emoji}
        </div>
        <p>Account</p>
      </div>
      <button className="btn" onClick={openChainModal}>
        Switch Networks
      </button>
    </div>
  );
};

useConnectModal, useAccountModal, useChainModal : Hooks from @rainbow-me/rainbowkit that trigger specific modals (popups) for connecting wallets, managing accounts, and selecting networks.
useAccount, useDisconnect : Hooks from wagmi that provide information about the connected account and a function to disconnect the wallet.
emojiAvatarForAddress : A custom function (likely located in lib/emojiAvatarForAddress.js, that you will find in this project repo) generates an emoji avatar based on the connected wallet address.

This component effectively manages the user’s wallet connection experience in our Next.js dApp by leveraging RainbowKit hooks and custom functions, providing a seamless flow for connecting, switching networks, and accessing account information.

In app/components/profile.tsx, add :

"use client";

import { useAccount, useBalance, useEnsName } from "wagmi";
import { middleEllipsis } from "@/lib/utils";
import { formatUnits } from "viem";

export default function Profile() {
  const { address, chain } = useAccount();

  const { data } = useBalance({
    address,
  });

  const ens = useEnsName({
    address,
  });

  return (
    <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
      <div className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
        <h2 className="mb-3 text-2xl font-semibold">Wallet address</h2>
        <p className="m-0 w-[30ch] text-sm opacity-50">
          {middleEllipsis(address as string, 12) || ""}
        </p>
      </div>

      <div className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
        <h2 className={`mb-3 text-2xl font-semibold`}>Network</h2>
        <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
          {chain?.name || ""}
        </p>
      </div>

      <div className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
        <h2 className={`mb-3 text-2xl font-semibold`}>Balance</h2>
        <div className={`m-0 max-w-[30ch] text-sm opacity-50`}>
          {data ? (
            <p>
              {Number(formatUnits(data.value, data.decimals)).toFixed(4)}{" "}
              {data.symbol}
            </p>
          ) : (
            <div />
          )}
        </div>
      </div>

      <div className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
        <h2 className={`mb-3 text-2xl font-semibold`}>EnsName</h2>
        <p className={`m-0 max-w-[30ch] text-sm opacity-50 text-balance`}>
          {ens.data || ""}
        </p>
      </div>
    </div>
  );
}

middleEllipsis function (defined in lib/utils): This custom function likely truncates long wallet addresses in the middle, displaying only the beginning and end portions for improved readability within the limited space. It takes the address string and a maximum character length as input.
formatUnits function from Viem library converts the raw balance value from the blockchain (often in wei for ETH) to a more user-friendly format with four decimal places.

By relying on Wagmi hooks (useAccount, useBalance, and useEnsName) and custom utility functions, this component effectively retrieves and displays user’s wallet address, network name (if available), balance (once fetched), and ENS name (if any). This provides users with a clear overview of their connected wallet details within our dApp.

Let’s now import ConnectBtn and Profile in page.tsx :

"use client";

import Image from "next/image";
import { ConnectBtn } from "./components/connectButton";
import Profile from "./components/profile";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <ConnectBtn />
      </div>

      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
        <Image
          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
          src="/next.svg"
          alt="Next.js Logo"
          width={180}
          height={37}
          priority
        />
      </div>

      <Profile />
    </main>
  );
}

Since middleEllipsis and emojiAvatarForAddress functions are not provided here, kindly retrieve them in the article’s repo on github.

This guide has empowered you to establish seamless wallet connections and fetch essential user data in your dApp. But the journey doesn’t end here! Stay tuned for Part 2, where we’ll delve into advanced features, refining your Web3/Frontend development skills and taking your dApp to the next level!

☞ Follow me on Twitter & Linkedin

☞ Kindly subscribe for my upcoming articles

Rust for Beginners: Dive into coding with these 5 Projects to boost your skills

Dan Mugisho M. — Sun, 14 Jan 2024 20:41:44 +0000

Welcome to the thrilling world of Rust programming! Whether you're a coding enthusiast embarking on your programming journey or a seasoned developer eager to add a new language to your arsenal, Rust offers an exciting playground for honing your skills. In this article, I'll guide you through an engaging exploration, providing you with five hands-on projects designed specifically for beginners.

Rust isn't just a programming language; it's a mindset—a commitment to performance, safety, and concurrency. As you navigate through these carefully curated projects, you'll not only grasp the fundamentals of Rust but also witness firsthand its power in creating efficient, reliable, and high-performance code.

Each project serves as a stepping stone, gradually introducing you to Rust's syntax, principles, and unique features. From simple yet impactful tasks to more complex challenges, these projects are crafted to provide a well-rounded learning experience. So, buckle up and get ready to dive headfirst into the world of Rust, where your coding adventure begins!

Without further ado, let's explore "Rust for Beginners: Dive into Coding with These 5 Projects to boost your skills" and uncover the exciting possibilities that await you on your Rustic coding journey.

To-Do List App

Building a To-Do List application in Rust is a great way to get hands-on experience with the language and its ecosystem. Below is a simple step-by-step guide to help you get started with creating a basic console-based To-Do List application in Rust.

Step 1: Set Up Your Rust Environment

If you haven't installed Rust, you can do so by following the instructions on the official Rust website: https://www.rust-lang.org/tools/install.

Step 2: Create a New Rust Project

Open a terminal and run the following commands:

# Create a new Rust project
$ cargo new todo_app

# Navigate to the project directory
$ cd todo_app

Step 3: Define Your To-Do Item Structure

Edit the src/main.rs file to define the structure for your To-Do items:

Step 4: Implement To-Do List Operations

Update src/main.rs to implement basic operations like adding, listing, and completing To-Do items:

// src/main.rs

use std::io;

struct TodoItem {
    id: u64,
    title: String,
    completed: bool,
}

struct TodoList {
    items: Vec<TodoItem>,
}

impl TodoList {
    fn new() -> TodoList {
        TodoList { items: Vec::new() }
    }

    fn add_item(&mut self, title: String) {
        let id = self.items.len() as u64 + 1;
        let new_item = TodoItem {
            id,
            title: title.clone(),
            completed: false,
        };
        self.items.push(new_item);
        println!("Added: {}", title);
    }

    fn list_items(&self) {
        if self.items.is_empty() {
            println!("Your to-do list is empty.");
        } else {
            println!("Your to-do list:");
            for item in &self.items {
                let status = if item.completed { "[X]" } else { "[ ]" };
                println!("{} {} - {}", status, item.id, item.title);
            }
        }
    }

    fn complete_item(&mut self, id: u64) {
        if let Some(item) = self.items.iter_mut().find(|i| i.id == id) {
            item.completed = true;
            println!("Completed: {}", item.title);
        } else {
            println!("Item with ID {} not found.", id);
        }
    }
}

fn main() {
    let mut todo_list = TodoList::new();

    loop {
        println!("1. Add Item");
        println!("2. List Items");
        println!("3. Complete Item");
        println!("4. Exit");

        let mut choice = String::new();
        io::stdin().read_line(&mut choice).expect("Failed to read line");
        let choice: u32 = match choice.trim().parse() {
            Ok(num) => num,
            Err(_) => continue,
        };

        match choice {
            1 => {
                println!("Enter the title of the new item:");
                let mut title = String::new();
                io::stdin().read_line(&mut title).expect("Failed to read line");
                todo_list.add_item(title.trim().to_string());
            }
            2 => {
                todo_list.list_items();
            }
            3 => {
                println!("Enter the ID of the completed item:");
                let mut id = String::new();
                io::stdin().read_line(&mut id).expect("Failed to read line");
                let id: u64 = match id.trim().parse() {
                    Ok(num) => num,
                    Err(_) => continue,
                };
                todo_list.complete_item(id);
            }
            4 => {
                println!("Exiting the program.");
                break;
            }
            _ => {
                println!("Invalid choice. Please enter a number between 1 and 4.");
            }
        }
    }
}

Step 5: Run Your To-Do List Application

Run your application using:

cargo run

Follow the on-screen instructions to add, list, and complete To-Do items in your Rust To-Do List application.

Calculator App

Building a basic calculator in Rust is a great way to practice the language and its fundamental concepts.

Step 1: Set Up Your Rust Environment

Step 2: Create a New Rust Project

# Create a new Rust project
$ cargo new calculator_app
$ cd calculator_app

Step 3: Implement the Calculator Logic

Edit the src/main.rs file to implement the calculator logic:

// src/main.rs

use std::io;

fn main() {
    loop {
        println!("Simple Calculator");
        println!("1. Addition");
        println!("2. Subtraction");
        println!("3. Multiplication");
        println!("4. Division");
        println!("5. Exit");

        let mut choice = String::new();
        io::stdin().read_line(&mut choice).expect("Failed to read line");
        let choice: u32 = match choice.trim().parse() {
            Ok(num) => num,
            Err(_) => continue,
        };

        if choice == 5 {
            println!("Exiting the calculator.");
            break;
        }

        println!("Enter the first number:");
        let mut num1 = String::new();
        io::stdin().read_line(&mut num1).expect("Failed to read line");
        let num1: f64 = match num1.trim().parse() {
            Ok(num) => num,
            Err(_) => {
                println!("Invalid input. Please enter a valid number.");
                continue;
            }
        };

        println!("Enter the second number:");
        let mut num2 = String::new();
        io::stdin().read_line(&mut num2).expect("Failed to read line");
        let num2: f64 = match num2.trim().parse() {
            Ok(num) => num,
            Err(_) => {
                println!("Invalid input. Please enter a valid number.");
                continue;
            }
        };

        match choice {
            1 => {
                let result = num1 + num2;
                println!("Result: {}", result);
            }
            2 => {
                let result = num1 - num2;
                println!("Result: {}", result);
            }
            3 => {
                let result = num1 * num2;
                println!("Result: {}", result);
            }
            4 => {
                if num2 != 0.0 {
                    let result = num1 / num2;
                    println!("Result: {}", result);
                } else {
                    println!("Error: Division by zero.");
                }
            }
            _ => {
                println!("Invalid choice. Please enter a number between 1 and 5.");
            }
        }
    }
}

Step 4: Run Your Calculator

cargo run

Simple Blog Platform

Building a simple blog platform in Rust involves creating a web server, handling HTTP requests, and interacting with a database. Here, I'll guide you through creating a basic blog platform using the Actix web framework and SQLite as the database.

Note that this is a minimal example for learning purposes. In a real-world scenario, you'd want to consider security, user authentication, and additional features.

Step 1: Set Up Your Rust Environment

Step 2: Create a New Rust Project

# Create a new Rust project
$ cargo new new simple_blog
$ cd new simple_blog

Step 3: Add Dependencies to Cargo.toml

Edit the Cargo.toml file to include the necessary dependencies:

[dependencies]
actix-web = "4.0"
actix-rt = "2.5"
sqlx = "0.5"
sqlx-core = "0.5"
sqlx-migrate = "0.5"
sqlx-derive = "0.5"
dotenv = "0.17"

Run cargo build to fetch and build the dependencies.

Step 4: Set Up Your Database

Create a .env file in your project directory with the following content:

DATABASE_URL=sqlite:./blog.db

Step 5: Define the Database Schema

Create a migrations directory and add a file named 20220101000000_init.sql:

-- migrations/20220101000000_init.sql

-- create the posts table
CREATE TABLE posts (
    id INTEGER PRIMARY KEY,
    title TEXT NOT NULL,
    content TEXT NOT NULL
);

Step 6: Set Up Database Connection

Create a src/db.rs file for handling the database connection:

// src/db.rs

use sqlx::sqlite::SqlitePool;
use sqlx::Pool;
use std::env;

pub async fn init_pool() -> Pool<SqlitePool> {
    let database_url = env::var("DATABASE_URL").expect("DATABASE_URL is not set in .env");
    SqlitePool::connect(&database_url)
        .await
        .expect("Failed to connect to the database")
}

Step 7: Implement the Blog Platform

Edit the src/main.rs file with the following code:

// src/main.rs

use actix_web::{web, App, HttpServer, Responder};
use sqlx::sqlite::SqlitePool;
use sqlx::Row;
use dotenv::dotenv;

mod db;

async fn index(pool: web::Data<SqlitePool>) -> impl Responder {
    let mut conn = pool.acquire().await.expect("Failed to acquire a database connection");

    let result = sqlx::query!("SELECT id, title, content FROM posts")
        .fetch_all(&mut conn)
        .await
        .expect("Failed to fetch posts from the database");

    let posts: Vec<String> = result
        .iter()
        .map(|row| format!("{}: {}\n{}", row.id, row.title, row.content))
        .collect();

    posts.join("\n")
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    dotenv().ok();

    let pool = db::init_pool().await;

    HttpServer::new(move || {
        App::new()
            .app_data(web::Data::new(pool.clone()))
            .route("/", web::get().to(index))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

Step 8: Run the Application

cargo run

Visit http://127.0.0.1:8080 to see your simple blog platform in action.

This is a basic example, and you can extend it by adding features such as creating, updating, and deleting posts, handling user authentication, and improving the frontend using a front-end framework. Remember to handle errors and ensure security in a production environment.

Weather App

Building a weather app in Rust involves interacting with a weather API to fetch real-time weather data and presenting it to users. Here's a simple example using the Actix web framework and the OpenWeatherMap API.

Step 1: Set Up Your Rust Environment

Step 2: Create a New Rust Project

# Create a new Rust project
$ cargo new weather_app
$ cd weather_app

Step 3: Add Dependencies to Cargo.toml

Edit the Cargo.toml file to include the necessary dependencies:

[dependencies]
actix-web = "4.0"
reqwest = "0.11"
serde = "1.0"
serde_json = "1.0"
dotenv = "0.17"

Run cargo build to fetch and build the dependencies.

Step 4: Set Up Your OpenWeatherMap API Key

Create a .env file in your project directory with the following content:

OPENWEATHERMAP_API_KEY=your_api_key_here

Replace your_api_key_here with your actual OpenWeatherMap API key.

Step 5: Implement the Weather App

Edit the src/main.rs file with the following code:

// src/main.rs

use actix_web::{web, App, HttpServer, HttpResponse};
use reqwest::Client;
use serde::Deserialize;
use std::env;

#[derive(Deserialize)]
struct WeatherResponse {
    main: Main,
    name: String,
}

#[derive(Deserialize)]
struct Main {
    temp: f32,
}

async fn index() -> HttpResponse {
    let api_key = env::var("OPENWEATHERMAP_API_KEY").expect("OPENWEATHERMAP_API_KEY is not set in .env");
    let city = "London"; // You can replace this with the desired city

    let url = format!(
        "http://api.openweathermap.org/data/2.5/weather?q={}&appid={}&units=metric",
        city, api_key
    );

    let response = Client::new().get(&url).send().await;

    match response {
        Ok(res) => {
            let weather_data: WeatherResponse = res.json().await.expect("Failed to parse JSON response");

            let temperature = weather_data.main.temp;
            let city_name = weather_data.name;

            HttpResponse::Ok().body(format!("Weather in {}: {:.1}°C", city_name, temperature))
        }
        Err(_) => HttpResponse::InternalServerError().body("Failed to fetch weather data"),
    }
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    dotenv::dotenv().ok();

    HttpServer::new(|| {
        App::new().route("/", web::get().to(index))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

Step 6: Run the Application

cargo run

Visit http://127.0.0.1:8080 to see the current weather in the specified city.

This serves as a foundation; consider refining it by incorporating user city input, refining error handling, and enhancing the frontend with a robust framework. Prioritize error management and security measures for production readiness.

Budget Manager App

Building a simple budget manager in Rust involves creating a command-line application that allows users to manage their income, expenses, and view the overall budget. Here's a basic example to get you started:

Step 1: Set Up Your Rust Environment

Step 2: Create a New Rust Project

cargo new budget_manager
cd budget_manager

Step 3: Implement the Budget Manager

Edit the src/main.rs file with the following code:

// src/main.rs

use std::io;

struct BudgetManager {
    income: f64,
    expenses: f64,
}

impl BudgetManager {
    fn new() -> Self {
        Self {
            income: 0.0,
            expenses: 0.0,
        }
    }

    fn add_income(&mut self, amount: f64) {
        self.income += amount;
        println!("Income added: ${}", amount);
    }

    fn add_expense(&mut self, amount: f64) {
        self.expenses += amount;
        println!("Expense added: ${}", amount);
    }

    fn view_budget(&self) {
        let balance = self.income - self.expenses;
        println!("Income: ${}", self.income);
        println!("Expenses: ${}", self.expenses);
        println!("Balance: ${}", balance);
    }
}

fn main() {
    let mut budget_manager = BudgetManager::new();

    loop {
        println!("Budget Manager");
        println!("1. Add Income");
        println!("2. Add Expense");
        println!("3. View Budget");
        println!("4. Exit");

        let mut choice = String::new();
        io::stdin().read_line(&mut choice).expect("Failed to read line");
        let choice: u32 = match choice.trim().parse() {
            Ok(num) => num,
            Err(_) => continue,
        };

        match choice {
            1 => {
                println!("Enter the income amount:");
                let mut amount = String::new();
                io::stdin().read_line(&mut amount).expect("Failed to read line");
                let amount: f64 = match amount.trim().parse() {
                    Ok(num) => num,
                    Err(_) => continue,
                };
                budget_manager.add_income(amount);
            }
            2 => {
                println!("Enter the expense amount:");
                let mut amount = String::new();
                io::stdin().read_line(&mut amount).expect("Failed to read line");
                let amount: f64 = match amount.trim().parse() {
                    Ok(num) => num,
                    Err(_) => continue,
                };
                budget_manager.add_expense(amount);
            }
            3 => {
                budget_manager.view_budget();
            }
            4 => {
                println!("Exiting the budget manager.");
                break;
            }
            _ => {
                println!("Invalid choice. Please enter a number between 1 and 4.");
            }
        }
    }
}

Step 4: Run the Application

cargo run

Follow the on-screen instructions to add income, expenses, and view your budget.

Feel free to enhance and customize the applications based on your learning goals and preferences. This is a basic example to get you started with Rust programming. If you have any questions or want to share your thoughts, please feel free to leave a comment or reach out to me. Let's continue to explore the vast possibilities of Rust together.

☞ Follow me on Twitter & Linkedin

☞ Kindly subscribe for my upcoming articles

Rust Tips and Tricks #PartOne

Dan Mugisho M. — Sat, 08 Apr 2023 08:21:58 +0000

Rust is a programming language that has gained a reputation for its exceptional qualities in terms of reliability, speed, and overall enjoyment for the programmer. However, it is important to keep in mind that Rust is also recognized as a language with a relatively high level of complexity.

As programmers, when we start using a new language, we tend to apply the concepts and techniques we have learned from our previous language experiences. Initially, we may not be familiar with the idiomatic way of writing code, nor the efficient shortcuts that the new language offers. Nevertheless, we manage to make progress by experimenting with the code until it runs and compiles.

This is perfectly natural. Over time, by seeing other people’s code, we learn, we adapt, and we write better code. This post tries to speed up that process by showing you some of the Rust shorthands I have discovered so far.

Avoid unnecessary clones

When a variable is cloned using the .clone() method, its data is duplicated, which requires additional resources. As a result, clones typically have a detrimental impact on performance and should be used sparingly. In many cases, it is possible to pass references to the same variables to different functions, eliminating the need for cloning. For example :

Using Cow as return type

Occasionally, you may need to write methods that accept a string slice (&str) as input and possibly return either an altered version of the input or the original string.

In such situations, the Cow type can prove to be useful since it allows you to avoid allocating new memory unnecessarily. By using Cow, you can modify the input string when needed, but if no changes are required, the original string can be returned without incurring any additional memory allocation costs.

Enum size is bounded by the largest member

To ensure that an Enum can accommodate its largest variant, its size is determined accordingly. To optimize memory usage, it is advisable to keep the variants within an Enum of similar sizes. However, if necessary, larger variants can be boxed. Consider this example :

Using dbg!() macro instead of println!()

The dbg macro can be used to print the value as well as the source code of an express to stderr. Example usage:

The above code will print :



2

[src/main.rs:5] var1 = 2

Output: [src/main.rs:6] var1 * 2 = 4

Crossbeam channels instead of the standard ones

The crossbeam crate offers a powerful alternative to standard channels with support for the Select operation, timeouts, and more.

Customize and chain Panic handlers

Panic handlers (called hooks) can be overridden and chained, which becomes particularly useful when setting up custom error reporting and logging for your application.

Output :



custom error reporting logic panicked at 'test', src/main.rs:20:5

custom logging logic panicked at 'test', src/main.rs:20:5

The standard swap function

The swap function allows you to directly swap two variables without needing to create a temporary variable.

Use impl Trait when working with Closures

When passing a closure to a function, it is generally better to use the “impl Fn/FnOnce/FnMut” approach instead of a generic one. This approach, also known as “impl Trait,” helps keep the function’s signature uncluttered. In more complex scenarios, however, you may need to box the closure with “Box” to make it work. It is essential to keep in mind that boxing a closure can introduce additional overhead, which may be undesirable in some cases.

Therefore, it is important to weigh the benefits and drawbacks of each approach and choose the one that best suits your requirements.

Output :



setting up...

Action!

tearing down...

Clippy and rustfmt

They are two of my favorite Rust tools. If you haven’t tried them yet, I highly recommend giving them a try. Clippy can detect various lints in your code and guide you towards writing more idiomatic code. To install Clippy, simply run rustup component add clippy, and to run it within your workspace, execute cargo clippy. For more details, visit Clippy’s GitHub repository.

Rustfmt is a tool that formats Rust code in compliance with style guidelines. Its name precisely reflects its purpose. To install rustfmt, you can run rustup component add rustfmt. Once installed, you can execute cargo fmt to format Rust code in your workspace. If you require further information, you can visit rustfmt’s GitHub repository.

Simplify Your Rust Error Handling with “thiserror” and “anyhow”

When it comes to handling errors in Rust, it is often best to use the “thiserror” and “anyhow” crates for an idiomatic approach. “Thiserror” is useful when the consumer of the error needs to take action based on specific error conditions.

CONCLUSION

Rust is a programming language with immense potential, and it has something new to offer every day. I hope that this post has provided you with valuable insights into Rust and helped you learn something new. If you have any questions or want to share your thoughts, please feel free to leave a comment or reach out to me. Let’s continue to explore the vast possibilities of Rust together.

☞ Follow me on Twitter & Linkedin

☞ Kindly subscribe for my upcoming articles

Borrowing and Referencing in Rust

Dan Mugisho M. — Sun, 26 Feb 2023 06:25:45 +0000

Borrowing and Ownership are intimately related concepts that play a vital role in memory management in Rust. Therefore, comprehending borrowing is crucial for working effectively in Rust.

In order to maintain memory safety, Rust uses a borrow checker to enforce its ownership rules. The ownership rules dictate how Rust manages memory over the stack and heap.

Most of the time, we'd like to access some data without taking ownership over it. To accomplish this, Rust provides a borrowing mechanism. Instead of passing objects by-value (T), objects can be passed by reference (&T).

In this Rust tutorial we will learn how to borrow a value temporarily from its owner, which allows us to have multiple references to that value without breaking ownership. We'll also learn about referencing the memory address of a value and how to get the value at that address with the dereferencing operator.

What is Borrowing ?

If we want to use a value in a function, without transferring ownership to the function, we can borrow the value temporarily from its owner. When the function is done with the value, it’s given back to the owner.

Borrowing allows us to have one or more references to a single value without breaking the “single owner” concept.
When we borrow a value, we reference its memory address with the & operator. A reference in Rust is an address that is passed to a function as an argument.

Output

Inside print_vector function [10, 20, 30]
Printing the value from main() v[0] = 10

Mutable References

A function can modify a borrowed resource by using a mutable reference to such resource. A mutable reference is prefixed with &mut. Mutable references can operate only on mutable variables.

The main() function passes a mutable reference of the variable name to the display() function. The display function appends an additional string to the original name variable.

Output

param_name value is : Hello
The value of name after modification is: Hello World

Borrow and Reference a value from variable

In Rust, the memory address of a value can be referenced using the & operator. To understand this concept better, let's take a look at an example.

In the example above, the variable a is the owner of the String Hello. If we use the variable in a function, it will pass ownership to the function. In this case we don’t want that, so the solution is to reference the owner (a) instead.

In the parameter list of the function definition, we add the & parameter before the type to tell Rust that the value coming in will be a reference to a value, not the actual value. The function only borrows the value, and gives it back after the function completes its execution.

When we call the function, we have to add the & operator again, this time in front of the value that we pass.

Conclusion

Understanding Ownership and Borrowing is crucial for writing efficient and memory-safe Rust code that compiles and runs without errors.

Failure to adhere to the ownership rules will be detected by the borrow checker, requiring you to modify your code to make it memory-safe before Rust will compile it. The borrow checker is annoying when you’re new to Rust. But, as you write more Rust code, you’ll get used to it and gain experience on writing memory-safe Rust code.

☞ Follow me on Twitter & Linkedin

☞ Kindly subscribe for my upcoming articles

Ownership in Rust

Dan Mugisho M. — Sun, 19 Feb 2023 13:08:26 +0000

For the fifth consecutive year, Rust has been ranked as the most loved programming language in a survey of developers conducted by Stack Overflow. There are various reasons why developers love Rust, in one of my first articles of 2022, Genesis in Rust I mentioned that one of the most attractive features of Rust is its Safety.

Rust uses a system of ownership and borrowing to manage memory at compile time, rather than relying on garbage collection or manual memory management. Ownership refers to a set of rules that determine which part of a program is responsible for managing a particular piece of memory, and when that memory can be freed. In this article we will dive into Ownership and later on Borrowing in the next article.

In Rust, each value has a single owner at any given time. When a value is assigned to a variable or passed as an argument to a function, the ownership of that value is transferred to the new variable or function parameter. When the owner goes out of scope (i.e., when the variable is no longer in use), Rust automatically frees the memory associated with that value by inserting a drop statement.

This approach ensures that memory is always properly managed and avoids common issues such as null pointer errors or memory leaks. Additionally, Rust’s borrowing system allows for safe and efficient sharing of memory between different parts of a program, without the need for costly runtime checks.

The Stack and the Heap

The stack and the heap are two different regions of memory that are used to store values in different ways.

The stack is a region of memory used for storing data that has a known size at compile time and a relatively short lifetime. Examples of data stored on the stack include function arguments, local variables, and function return values. The stack operates in a last-in-first-out (LIFO) manner, meaning that the last item added to the stack is the first one to be removed.

The heap, on the other hand, is a region of memory used to store data that needs to persist beyond the lifetime of a single function call. Memory allocated on the heap is not automatically managed by the Rust compiler and must be manually managed using pointers. Heap memory is allocated and freed using Rust’s Box type, which provides a way to allocate memory on the heap and automatically free it when the Box is dropped.

Rust provides several different types of pointers that can be used to interact with heap-allocated data, including references, boxes, and smart pointers such as Rc and Arc. Rust’s ownership model ensures that heap-allocated data is always properly managed, with memory being freed automatically when it is no longer needed. This approach helps to prevent many common memory-related bugs, such as use-after-free errors, buffer overflows, and null pointer dereferences.

Overall, the stack and the heap are two distinct regions of memory in Rust that are used to store data in different ways as mentioned , with the stack being used for short-lived data of a fixed size, and the heap being used for dynamically allocated data of varying size and longer lifetime.

How ownership works

The Rust compiler enforces ownership rules at compile time, checking that all values have a valid owner and that there are no ownership violations such as multiple owners of a single value. This helps to ensure that Rust code is free from common memory management errors, making it safer and more reliable than other programming languages.

It is crucial to understand the three basic rules of ownership, which determine how memory is stored in the stack and heap.

Each Rust value has a variable called its owner :

let x = 67; // x is the owner of the value "67"

Ownership can be transferred between variables via moves, which transfer ownership of the value to the new variable and invalidate the original variable.
When the owner goes out of the scope, the value it owns is dropped (i.e., memory is freed) :

In our introduction, we established a fact that ownership isn’t like the garbage collector system and, in fact, Rust doesn’t deal with a garbage collector system. Most programming languages either use a garbage collector or require the developer to allocate and free up memory themselves.

Ownership and functions

When values are passed to a function, they must follow the same ownership rules as other values. Meaning they can only have one owner at a time, and free up memory once out of scope.

The second rule of ownership, which states that a value can only have one owner at a time, results in verbose function writing. This is due to the need to transfer ownership of functions through return statements whenever you want to use them, as illustrated in the example above.

It is very memory-inefficient to make copies of data whenever passing to a function. The best method is to use the Rust references feature and borrow the data.

Conclusion

Rust’s ownership feature is a critical aspect of the language that can greatly impact a developer’s ability to create scalable code. The more comfortable a Rust programmer becomes with ownership, the easier it becomes for him or her to write scalable and predictable code, which in turn can help to avoid unexpected errors or bugs. Many developers appreciate Rust specifically because of its strong ownership model, which helps prevent unexpected behaviour.

In this article, we’ve explored the fundamentals of ownership in Rust, including its rules and best practices for incorporating it into our programs. Additionally, we’ve discussed certain Rust features that don’t rely on ownership, and how to use them effectively. For additional resources on Rust ownership, be sure to consult the official documentation to deepen your understanding and enhance your coding skills.

☞ Follow me on Twitter & Linkedin

☞ Kindly subscribe for my upcoming articles

Genesis in Rust: Getting Started

Dan Mugisho M. — Sat, 16 Apr 2022 22:38:45 +0000

Rust is a systems programming language that focuses on speed, memory safety, and parallelism. Rust is the super productive, super safe, and super fast language that breaks the trend of marginal improvements. It changes the way you think about software development.

Rust puts developers first by providing features that make software development smooth and reliable. This includes maintenance, which is a large part of a project's lifecycle.

This is where Rust shines. Rust combines ease of programming with access to core system configurations. Rust is built with memory-safety, concurrency, and security from the ground up.

Since Rust can run both on the backend (natively) and frontend (via Wasm) of web applications, learning Rust becomes a clear choice for creating performant and reliable web applications that can be accessed anywhere, and on any device.

Rust is used by some of the top tech companies like Amazon, Microsoft Corporation, Dropbox, Cloudflare, Figma, Discord, Mozilla and Facebook to deliver speed and concurrency to their customers.

Let's look at some core features that make Rust stand out from other programming languages.

Performance

Rust is a really fast and memory-efficient language. It offers fine-grained control of memory management and has a minimal standard library. So it can perform well with critical services, within embedded devices, and easily be integrated with other languages.

Security

Using Rust eliminates an entire class of security vulnerabilities from software applications. This helps companies build applications with better performance and higher security. This is a great relief to any new programmer, as it reduces the burden while compiling.

Concurrency

Concurrency is when two or more tasks start, run, and complete in overlapping time. Database operations are a great example to explain concurrency. When thousands of users are using your application at the same time to perform different actions, your database handles them concurrently. Concurrency is a key concept when it comes to scaling applications.

This article will guide you through setting up Rust and getting started.

Getting started

Now that you understand the core features of Rust, let's setting up. You can find installation instructions here follow the instructions to continue the installation.

Now open your IDE, I use WebStorm as my IDE because it provides a robust, fast, and flexible static code analysis and actually provides a lot of support for Rust.

Let's start with a simple “Hello World!” function. Create a new file with the name "main.rs" extension

Now open the main.rs and type the following code:

fn main( ) {
    println!("Hello, world!");
}

fn is used to declare a function in Rust
The main function is special: it's the beginning of every Rust program
The line ends with a semicolon (;). The ; indicates that this expression is over, and the next one is ready to begin. Most lines of Rust code end with a ;

Save the file, open your terminal and enter the following commands:

$   rustc main.rs
$   ./main

Before running a Rust program, you have to compile it. You can use the Rust compiler by entering the rustc command and passing it the name of your source file

And you should see the string Hello, world! print to the terminal. If you did, then congratulations! You've officially written a your first Rust program 👏🎊

Project management with Cargo

To create your first project using Cargo, you invoke the cargo executable with keyword new and lastly with the name of the project like so:

$   cargo new project-name

Let’s check out what Cargo has generated for us:

$   cd project-name
$   tree .
 .
 ├── Cargo.toml
 └── src
       └── main.rs

1 directory, 2 files

The main.rs is our projects main file, the entry for our app. Here's what main.rs contains:

fn main( ) {
    println!("Hello, world!");
}

Cargo generated a hello, world! for us

Let’s take a closer look at Cargo.toml :


   [package]
   name = "project-name"
   version = "0.1.0"
   authors = ["email, inferred from Git"]
   edition = "2018"

   # See more keys and their definitions at https://doc.rustlang.org/cargo/reference/manifest.html

   [dependencies]

This is called a manifest, and it contains all of the metadata that Cargo needs to compile your project.

Now let’s build and run the code

To build and run your project, call cargo run in your project directory root:

$   cargo run

You should get this output :

Resources to help you

Afterward, practice coding with Exercism to improve your Rust chops together with reading a more extensive resource like the Rust book (standard choice) or Easy Rust (accessible choice). At any point where you feel that you are almost ready to build your own toy applications, just go ahead and do it. There are some nice online communities to ask for feedback and support, so don’t be worried about getting stuck!

☞ Follow me on Twitter & Linkedin

☞ Kindly subscribe for my upcoming articles

Angular vs React vs Vue : Which to choose for your career as a UI developer

Dan Mugisho M. — Tue, 29 Mar 2022 03:20:53 +0000

Angular vs. React vs. Vue is one of primary choices in every web development process. The frontend framework you select influences almost everything: speed, and, therefore, cost of development, compatibility with other technologies, app speed and performance, and so on.

As a developer, you definitely heard about Angular, React, and Vue and the constant discussions and comparisons around which one is better. Of course, all three of them are used for building web, mobile apps, and fast development of UI through the use of components.

We’ll start with a little bit of theory. In web development, we always differentiate between frontend and backend. The frontend is the part of the website that users see in their browser. The backend, accordingly, is behind the scenes and is usually responsible for the business logic of the web app.

A software framework (be it frontend or backend) includes standardized pre-written code, making the development of certain functionality easier and faster.

Angular

AngularJS is a TypeScript based JavaScript framework that was initially released by Google in 2010. It is the oldest one among the lot we are covering in this article.

In 2016, Angular (also known as Angular 2) was released and “JS” was dropped from the framework’s name. Angular 1 (or AngularJS) still gets updates but Angular 2 is well accepted in the community because of its obvious advantages over its older version. The latest stable version is Angular 11, which was released in November 2020.

A few big companies that use Angular in 2021 :

Microsoft Office
Deutsche Bank
Gmail
Forbes
PayPal

React Js

React.js or ReactJS or React is a JavaScript library of UI components, used for creating intuitive user interfaces. This JS library was initially released by Facebook in 2013.

It is an open-source library maintained by Facebook and hundreds & thousands of individual developers and companies in the community. This library is currently used by all Facebook products, including WhatsApp and Instagram.

The current stable version is React 17.0.2, released in October 2020 (with smaller incremental updates since then).

Here are a few of the top brands that use React.js for the frontend

platforms in 2021 :
Facebook
Instagram
WhatsApp
Yahoo
New York Times

Vue Js

Vue.js is a progressive JavaScript framework, known for its ability to create amazing user interfaces. This framework was initially released in 2014 by Evan You – an ex-employee of Google.

Even though Vue.js doesn’t have the backing of a huge conglomerate, it is still quite popular and is considered to be one of the top JavaScript frameworks/libraries to create intuitive user interfaces in 2021.

The current stable version is Vue 3, released in September 2020 (with some small incremental releases since then).

Big names that use Vue.js in 2021 are :

Xiaomi
Grammarly
Adobe
Behance
Reuters

Selecting a frontend framework isn’t easy. There are many things to consider, with various advantages and disadvantages to compare, and several issues to discuss! To help you make your decision, we have prepared a detailed comparison of the best JavaScript frameworks. After reading this article, you’ll understand what options work best for your needs!

1.Popularity ( Market and demand)

Each one of the mentioned technologies have their own purpose in regards to how to approach and handle a specific project. For example, Angular is an extensive front-end framework that lets you develop dynamic single-page web apps, suited for large-scale enterprise projects.

However, Vue and React are also capable and flexible enough to be used in both enterprise or start-up level projects when developing UI through the use of components.

The more popular a particular framework is, the easier it will be to get talents, resources, community help, etc. The popularity of a framework depends on a variety of factors, such as :

How frequently does the framework/library get new updates?
What advantages does the framework/library give over the native JavaScript language?
Is the framework/library still in demand?
Does the library/framework make the job easier for developers?

Among all the Web Frameworks, React.js stands at #2 with 35.9% votes, followed by Angular/AngularJS at #3 with 25.1% votes. Vue.js, with 19.1% votes, stands at #7 in the chart.

Verdict : In terms of popularity, React/React.js/React JS is the winner on all counts among React vs Angular vs Vue in 2021.

2.Community and ecosystem

When choosing a framework you want to learn, an active community and development are part of a growing and stable ecosystem. All of the mentioned frameworks are under active development and maintenance while being used by thousands of developers. That means there are people willing to help you out and share their knowledge with you.

Angular Ecosystem
Angular is the oldest of the three frameworks, and it has been around since 2010. Being developed and maintained by Google, Angular offers a lot of ready-made components for any new and aspiring UI developers who are looking to start building mobile and web apps. It features a lot of pre-built components from Google’s Material Design visual design language to CSS themes.

React Ecosystem
Developed by Facebook back in 2013, React is the second oldest framework on our comparison list. Since then it has grown massively in popularity and amassed a big community.

When compared to Angular and Vue, React may be the winner in terms of overall ecosystem maturity and component availability as well as community. Also, it offers integrations with other platforms and tools like Git, UXPin.

Vue Ecosystem
Developed in 2014 Vue is the youngest when compared to the other two frameworks, but has grown a lot in popularity. When it comes to data binding, Vue made a lot of things easy for developers. Speeding up mobile and web app development with Vue means using the most popular open-source projects within the ecosystem so you can take advantage of input components.

An additional metric that you’ll want to consider is GitHub’s Used by badge, which needs to be enabled by the repository author. This shows how many other repositories on GitHub are dependent on that repository. Angular’s GitHub repo shows 1.7 million, React currently shows almost 5.7 million users, while Vue shows over 167,000 for both of its repos combined.

Quite a difference among the three frameworks, but this is largely due to Vue being the newer framework and doesn’t tell the full picture on overall demand.

3.Architecture

With this basic notion, let’s look at the architecture of these 3 JavaScript frameworks – React vs Vue vs Angular

Angular
Angular, being the oldest one of the lot, has the Model-View-Controller (MVC) architecture. MVC architecture is the classic old way of separating even the most complex UIs into three views – Business Logic, UI Logic, and Input Logic. The execution is simple.

It is based on MVC which, as discussed, makes it super easy to modify and upgrade individual views without the need for completely re-writing the other views.

React Js
React is a UI library and, unlike other frameworks and libraries, it doesn’t ‘enforce’ an architecture pattern.

A React component is essentially a minimalistic central structure unit – as simple as a label & a button or a bit complex as a user profile or a registration form. It is just a view that caters to your web app’s user interface.

React.js has a component-based architecture. This just means that the user interface of a web app powered by React is nothing but a combination of loosely bound React elements. When a user interacts with a particular element of the UI, just the state of that particular React component is altered.

This, right here, is what makes React elements reusable & fully customizable, making it a perfect choice for your web app’s frontend development.

Vue Js
As mentioned earlier, Vue was created by an ex-employee of Google. One of the reasons why this framework is still in the runs for the BEST JS framework is because it contains the best of both worlds – React and Angular.

Vue.js uses a two-way data binding – a v-model directive. And as Vue.js is focused primarily on the View model, its compatibility with other libraries is just phenomenal. The architecture of Vue.js is designed such that it is incrementally adoptable.

4.Syntax

When it comes to syntax and structuring your code, it’s probably a matter of personal preference. Some developers like to use TypeScript while others stick to JavaScript and there’s really no argument here because syntax doesn’t impact anything in terms of performance.

And if you really don’t like the way a certain library handles the code in terms of syntax, you should probably not work with that framework on a daily basis.

So in terms of syntax and structure complexity, Angular will be the most demanding because projects in Angular use TypeScript, the JavaScript superset and it’s something you’ll have to learn additionally.

As a component-based framework, Vue utilizes single file components and plain JavaScript so you’ll probably find code written in JS only although it offers TypeScript support too.

Compared to Angular, Vue syntax is the easiest to learn and to grasp for any newcomer dev and UI developer since it doesn’t mix HTML and JavaScript. As mentioned, React is the easiest one to learn both in terms of web and UI development.

5.Performance

The performance of a web app depends on the framework or library you use. If you are considering choosing either of these frameworks/libraries for a small project, you can freely choose any of the frameworks I’ve mentioned.

Things become a bit complicated when the scalability, robustness, and integrability of a JS framework are taken into account. In this React vs Angular vs Vue 2021 comparison, I like to talk about two different aspects when it comes to comparing the performance of these JS libraries and frameworks – DOM and JS Framework Benchmark.

Angular relies heavily on real DOM for its performance while Vue.js and React function using virtual DOM. Without delving into technical details, virtual DOM saves the trouble of re-rendering/repainting your web app’s UI after every state change. This makes it quicker, especially when multiple component states are involved.

Having said that, Angular is still a preferred choice of many professional developers to create large-scale SPAs. When it comes to memory requirements and booting time, React & Vue.js show superior results to Angular.

Angular requires more computational memory and can take up to 150 ms to boot even a basic script.

6.Migrations

As you’re working with your framework of choice, you don’t want to have to worry about a framework update coming along and messing up your code. Though in most cases you won’t encounter many issues from one version to another, it’s important to keep your finger on the pulse because some updates can be more significant and require tweaks to keep things compatible.

Angular plans major updates every six months. There is also a period of another six months before any major APIs are deprecated, which gives you the time of two release cycles (one year) to make necessary changes, if any.

When it comes to Angular vs React, Facebook has stated that stability is of utmost importance to them, as huge companies like Twitter and Airbnb use React. Upgrades through versions are generally the easiest in React, with scripts such as react-codemod helping you to migrate.

In the Migration section of the Vue 3 docs, Vue mentions that much is the same between Vue 2 and Vue 3 while 90% of the API is the same if you are migrating from 1.x to 2. There is a Vue 2 to Vue 1 migration helper tool that works on the console to assess the status of your app.

Which one is the Best ?

When comparing the three most popular JavaScript frameworks, there is no absolute best when it comes to UI development since all three are under a very active development

However, each of these libraries has its own benefits and drawbacks., based on many aspects that we’ve covered, you should make your choice based on both the projects you want to work on and the team you’re going to be a part of.

The most important thing would be to always keep up to date on the newest features and development regardless of which JavaScript framework you choose to dedicate your time to.