DEV Community: David Ongora

[Boost]

David Ongora — Fri, 08 Aug 2025 06:40:15 +0000

David Ongora

Aug 8 '25

Generating Dynamic Avatars in Angular Using DiceBear.

#avatars #dicebear #angular #emoji

Comments

3 min read

Generating Dynamic Avatars in Angular Using DiceBear.

David Ongora — Fri, 08 Aug 2025 06:31:15 +0000

User interface personalization has become a cornerstone of modern web applications.
Ever thought of replacing boring user initials with unique, dynamic avatars? With DiceBear https://www.dicebear.com/, you can generate custom, SVG-based avatars right in your Angular app—perfect for user profiles, comments,leaderboards or dashboards.

sample of profile with initials

it looks nice if we give an avatar closer to is name or attributes that define him

here is one for a coding guru or rather a geek

Step 1: Install DiceBear
Choose your package manager:

npm

npm install @dicebear/core @dicebear/collection --save

pnpm

pnpm install @dicebear/core @dicebear/collection --save

Step 2: Generate Avatars in Angular

import { createAvatar } from '@dicebear/core';
import { openPeeps } from '@dicebear/collection';

then in your component

generateAvatar(StudentName: string): SafeUrl | null {
    try {
      if (typeof createAvatar === 'function' && openPeeps) {
        console.log('name passed to dicebear:', StudentName);
        const avatar = createAvatar(openPeeps, {
          seed: StudentName,
          backgroundColor: ['#E7EDF4'],
          scale: 80
        }).toString();
        return this.sanitizer.bypassSecurityTrustUrl(`data:image/svg+xml;utf8,${encodeURIComponent(avatar)}`);
      }
    } catch (error) {
      console.error('Failed to generate avatar:', error);
      // Fallback to empty or default avatar
      // this.myAvatar = this.sanitizer.bypassSecurityTrustUrl('path/to/default-avatar.svg');
    }
    return null; // Return null if avatar generation fails 
  }
}

Template Usage

<div class="h-9 w-9 flex-shrink-0 rounded-full overflow-hidden bg-gray-200">
<img [src]="generateAvatar(entry.student.fullname)" alt="Avatar" class="w-full h-full object-cover">
</div>

why sanitize the urls
to avoid getting this warning

Without Sanitization

Step 3: Why Sanitize the URL?
Angular blocks unsafe dynamic URLs by default to prevent XSS attacks. Since DiceBear generates SVG markup, we must sanitize it using DomSanitizer

how to sanitize the url
you can import the safeurl or use it as a pipe if you have it(custom one its not a core pipe).

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

return this.sanitizer.bypassSecurityTrustUrl(`data:image/svg+xml;utf8,${encodeURIComponent(avatar)}`);

Before

Results
The transformation from static initials to dynamic avatars significantly enhances user interface engagement:

Names passed as seed to generate those avatars

Why Use DiceBear?

No external API calls (avatars are generated on the frontend)
Highly customizable (choose from multiple styles like lorelei, bottts, open-peeps, etc.)
Deterministic (same input = same avatar every time)
Lightweight (SVG-based, no heavy images)

Full Implementation
avatar.component.ts


import { createAvatar } from '@dicebear/core';
import { openPeeps } from '@dicebear/collection';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-avatar',
  templateUrl: './avatar.component.html',
})
export class AvatarComponent {

  constructor(private sanitizer: DomSanitizer) {}

  generateAvatar(StudentName: string): SafeUrl | null {
    try {
      if (typeof createAvatar === 'function' && openPeeps) {
        console.log('name passed to dicebear:', StudentName);
        const avatar = createAvatar(openPeeps, {
          seed: StudentName,
          backgroundColor: ['#E7EDF4'],
          scale: 80
        }).toString();
        return this.sanitizer.bypassSecurityTrustUrl(`data:image/svg+xml;utf8,${encodeURIComponent(avatar)}`);
      }
    } catch (error) {
      console.error('Failed to generate avatar:', error);
      // Fallback to empty or default avatar
      // this.myAvatar = this.sanitizer.bypassSecurityTrustUrl('path/to/default-avatar.svg');
    }
    return null; // Return null if avatar generation fails 
  }
  }
}

avatar.component.html

<div class="h-9 w-9 flex-shrink-0 rounded-full overflow-hidden bg-gray-200">
<img [src]="generateAvatar(entry.student.fullname)" alt="Avatar" class="w-full h-full object-cover">
</div>

Deploy Flutter Web App to Vercel

David Ongora — Sun, 16 Feb 2025 16:48:21 +0000

Deploying a Flutter web app to Vercel is a straightforward process that allows you to host your app with ease. Vercel is a popular platform for deploying web applications, and it provides a seamless experience for hosting Flutter web apps. In this guide, we'll walk you through the steps to deploy your Flutter web app to Vercel.

sample flutter app deployed you can clone it and deploy it
https://notes-whiz-14l2.vercel.app/

github link https://github.com/davidongora/NotesWhiz

Prerequisites
Before you begin, ensure you have the following:

A Flutter web app ready for deployment.

A Vercel account (sign up at vercel.com).
Git installed on your machine.
Flutter SDK installed and configured.

Step 1: Prepare Your Flutter Web App

Ensure your Flutter app is configured for web deployment.

Enable Web Support:
Run the following command to enable web support in your Flutter project:

flutter config --enable-web

Build for Web:
Build your Flutter app for the web:

flutter build web

Step 2: Push Your Code to GitHub

Step 3: Deploy to Vercel
Now that your code is on GitHub, you can deploy it to Vercel.

Create a New Project:

Click on the "New Project" button.

Select the GitHub repository where your Flutter app is hosted.

Configure the Build Settings:

Vercel will automatically detect your Flutter project.

Set the following build settings:

Build Command:

flutter/bin/flutter build web --release

Output Directory:

build/web

Install Command:

if cd flutter; then git pull && cd .. ; else git clone https://github.com/flutter/flutter.git; fi && ls && flutter/bin/flutter doctor && flutter/bin/flutter clean && flutter/bin/flutter config --enable-web

Deploy:

Click the "Deploy" button.

Vercel will start building your Flutter web app. This process may take a few minutes.

Step 4: Access Your Deployed Site
Once the build is complete, Vercel will provide you with a live URL for your deployed Flutter web app. You can access your app by clicking the link provided in the Vercel dashboard.

Step 5: Custom Domain (Optional)
If you want to use a custom domain for your Flutter web app:

Go to the "Domains" section in your Vercel dashboard.

Add your custom domain and follow the instructions to configure DNS settings.

Troubleshooting
If you encounter issues during deployment, check the following:

Flutter Web Compatibility:
Ensure your app and its dependencies are compatible with the web platform. Avoid using libraries like dart:ffi that are not supported on the web.

Build Logs:
Check the build logs in the Vercel dashboard for detailed error messages.

Flutter Version:
Ensure you're using a stable version of Flutter. Run flutter upgrade to update your Flutter SDK.

Deploying a Flutter web app to Vercel is a quick and efficient way to host your app. By following the steps outlined in this guide, you can easily deploy your Flutter web app and share it with the world. Happy coding! 🚀

Building an Angular Component Library

David Ongora — Thu, 13 Feb 2025 18:17:04 +0000

Steps on how to create a component library in Angular, using the Chimoney library as a use case.

Building an Angular Component Library: The Chimoney Use Case

Creating a reusable component library in Angular can streamline your development process, allowing you to build consistent user interfaces across multiple applications. In this blog post, we will walk through the steps to create a component library using our Chimoney library as an example.

Step 1: Setting Up the Angular Library

First, we need to set up our Angular library. You can create a new library using the Angular CLI:

ng generate library ngx-chimoney-airtime-payouts

This command will create a new library named ngx-chimoney-airtime-payouts in your Angular workspace.

Structuring the Library

Your library will have the following structure:

projects/ └── ngx-chimoney-airtime-payouts/ ├── src/ │ ├── lib/ │ │ ├── components/ │ │ │ ├── airtime/ │ │ │ ├── bank/ │ │ │ └── payouts/ │ │ ├── ngx-chimoney-airtime-payouts.component.ts │ │ └── ngx-chimoney-airtime-payouts.service.ts │ └── public-api.ts
In the public-api.ts file, you can export your components and services:

/*
* Public API Surface of ngx-chimoney-airtime-payouts
*/

export * from ‘./lib/ngx-chimoney-airtime-payouts.service’;
export * from ‘./lib/ngx-chimoney-airtime-payouts.component’;

// Components
export * from ‘./lib/components/airtime/airtime.component’;
export * from ‘./lib/components/bank/bank.component’;
export * from ‘./lib/components/payouts/payouts.component’;

Step 2: Building the Library

After implementing your components, it’s time to build the library. Use the following command:

ng build ngx-chimoney-airtime-payouts

This command generates a dist folder containing the compiled library.

Step 3: Packing the Library
To use your library locally without publishing it to npm, you can create a package file. Navigate to the dist folder of your library:

cd dist/ngx-chimoney-airtime-payouts

Then, run:

npm pack

This command will create a .tgz file (e.g., ngx-chimoney-airtime-payouts-0.0.1.tgz) in the current directory.

Step 4: Installing the Library Locally

Copy the generated .tgz file to the root directory of the application where you want to use it. Then, run:

npm install ngx-chimoney-airtime-payouts-0.0.1.tgz

This command installs your library locally, allowing you to use it in your application.

Step 5: Using the Library in Your Application

Now that your library is installed, you can use its components in your application. First, import the required modules in your application:

import { FormsModule } from ‘@angular/forms’;
import { Component } from ‘@angular/core’;
import { RouterOutlet } from ‘@angular/router’;
import { PayoutsModule } from ‘ngx-chimoney-airtime-payouts’;
import { PayoutsComponent } from ‘ngx-chimoney-airtime-payouts’;
import { BankComponent } from ‘ngx-chimoney-airtime-payouts’;
import { AirtimeComponent } from ‘ngx-chimoney-airtime-payouts’;

@Component({
selector: ‘app-root’,
standalone: true,
imports: [
RouterOutlet,
PayoutsModule,
PayoutsComponent,
BankComponent,
AirtimeComponent,
FormsModule,
],
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘payouts-sample’;
}

In your template, you can now use the components as follows:

<payouts-component></payouts-component>
<bank-component></bank-component>
<airtime-component></airtime-component>

*Step 6: Publishing the Library
*
If you decide to share your library with the world, you can publish it to npm. Make sure you have an account on npm and are logged in. Use the following command to publish:

npm publish dist/ngx-chimoney-airtime-payouts

This command will make your library available for installation via npm, allowing others to use it in their Angular applications.

Conclusion

Creating a component library in Angular not only promotes reusability but also helps maintain consistency across your projects. By following the steps outlined in this blog post, you can easily build, pack, and publish your Angular component library, like our Chimoney library. Happy coding!