MCP (Model Context Protocol) Simplified

Hirusha Fernando — Fri, 18 Apr 2025 18:15:31 +0000

Moved to medium: https://medium.com/stackademic/mcp-model-context-protocol-simplified-976b46f01efd

5 Angular Libraries You Want To Use In Your Project

Hirusha Fernando — Sun, 12 May 2024 03:46:06 +0000

Moved to medium: https://medium.com/stackademic/5-angular-libraries-to-use-in-your-projects-173561b6a729

Angular 17 Word Cloud With jQuery

Hirusha Fernando — Sun, 14 Apr 2024 11:52:14 +0000

Hello developers, in this article I will tell you how to create a word cloud or word tag cloud component for angular using jQuery scripts. Let's start.

In this project, I will use

Angular 17
jQuery 3.2.1

First, create an Angular project

ng new wordcloud-project --standalone=false --routing --style=scss

Next, install jQuery

cd wordcloud-project
npm i @types/jquery@3.2.1 jquery@3.2.1

After installing, add the jQuery file path to the angular.json file's scripts section to make jQuery global.

scripts: [
    ...
    "node_modules/jquery/dist/jquery.slim.min.js"
]

We use a jQuery script to create the word cloud. Download the jQuery script from this link. This script is not created by me. Credit goes to its developer. Extract the downloaded zip file. The folder looks like this.

├── Word-Tag-Cloud-Generator-jQWCloud
│   ├── index.html
│   ├── README.md
│   └── Plugin
│   │   ├── jQWCloudv3.4.1.js   // We need this script
│   └── Word Cloud
│       ├── js
│           └── index.js

Copy the jQWCloudv3.4.1.js file in the Plugin folder and paste it into the angular projects src > assets > js folder. You have to create the js folder manually.

Now we have to add this script path to the angular.json file's scripts section.

scripts: [
    ...
    "node_modules/jquery/dist/jquery.slim.min.js",
    "src/assets/js/jQWCloudv3.4.1.js"
]

After setting script paths, let's create a component.

ng g c word-cloud

After creating the component, open the word-cloud.component.html file and put this code. Our word cloud will be displayed in this div tag.

<!-- word-cloud.component.html -->
<div style="width: 400px; height: 500px; margin: 100px;">
  <div id="wordCloud"></div>
</div>

Now let's convert this div tag into word cloud. Goto word-cloud.component.ts. It looks like this.

import { Component } from '@angular/core';

@Component({
  selector: 'app-word-cloud',
  templateUrl: './word-cloud.component.html',
  styleUrl: './word-cloud.component.scss'
})
export class WordCloudComponent {

}

Remove that code and put this code into the typescript file

import { Component, Input, OnInit } from '@angular/core';

declare var $: any;

// Create the interface
interface Word {
  word: string;
  weight: number;
  color?: string;
}

@Component({
  selector: 'app-word-cloud',
  templateUrl: './word-cloud.component.html',
  styleUrl: './word-cloud.component.scss'
})
export class WordCloudComponent implements OnInit {
  @Input() title!: string;
  @Input("words") wordList!: Word[];

  ngOnInit() {

    // Initialize the word cloud
    $("#wordCloud").jQWCloud({
      words: this.wordList,
      maxFont: 50,
      minFont:10,
      padding_left: null,

      // What to do when clicking on a word
      word_click :function(event: any){
        console.log(event.target.textContent);
      },

      // What to do when the cursor is on a word
      word_mouseOver :function(){},

      // What to do when the cursor is coming to a word
      word_mouseEnter :function(){},

      // What to do when the cursor is leaving a word
      word_mouseOut :function(){}
    });

  }
}

You can customize your word cloud using options like this. This is the list of options and callbacks available

Now let's use this component. In the app.component.html file, use the selector of our component. And we have given a title and wordlist to display in the word cloud.

<!-- app.component.html -->
<app-word-cloud title="My Word Cloud" [words]="wordlist"></app-word-cloud>

In the above code, we have used a variable called wordlist. But we haven't created it yet. Now let's create our wordlist. Go to the app.component.ts file.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'wordcloud-project';
  wordlist = [
    {word: 'Prashant', weight: 40, color: 'green'},
    {word: 'Sandeep', weight: 39, color: 'green'},
    {word: 'Ajinkya', weight: 11, color: 'green'},
    {word: 'Kuldeep', weight: 36, color: 'green'},
    {word: 'Vivek', weight: 39},
    {word: 'Saheer', weight: 12, color: 'green'},
    {word: 'Lohit', weight: 27},
    {word: 'Anirudh', weight: 36},
    {word: 'Raj', weight: 22},
    {word: 'Mohan', weight: 40},
    {word: 'Yadav', weight: 39},
    {word: 'India', weight: 11, color: 'green'},
    {word: 'USA', weight: 27},
    {word: 'Sreekar', weight: 36},
    {word: 'Ram', weight: 39},
    {word: 'Deepali', weight: 12, color: 'green'},
    {word: 'Kunal', weight: 27},
    {word: 'Rishi', weight: 80},
    {word: 'Chintan', weight: 22}
  ]
}

You can change the color and the size of the word by changing values. If you do not give a color, it will pick a random color. Now let's run our application

ng serve --open

When the browser opens, you can see a word cloud like this.

You can customize the word cloud by changing its attributes and CSS. Enjoy with your word cloud. Happy Coding.

If this article is useful to you, don't forget to give a like.

You can connect with me on https://hirushafernando.com/

Automate Docker Image Building , Tagging And Publishing With Github Actions

Hirusha Fernando — Tue, 26 Mar 2024 06:01:38 +0000

Moved to medium: https://medium.com/stackademic/automate-docker-image-building-tagging-and-publishing-with-github-actions-5eeb16b187bd

Moved To Medium

Hirusha Fernando — Tue, 19 Mar 2024 10:50:11 +0000

Read the article at https://blog.stackademic.com/entity-framework-core-audit-trail-with-audit-net-6df70a5be069

DEV Community: Hirusha Fernando

MCP (Model Context Protocol) Simplified

5 Angular Libraries You Want To Use In Your Project

Angular 17 Word Cloud With jQuery

Automate Docker Image Building , Tagging And Publishing With Github Actions

Moved To Medium

FastAPI Role Base Access Control With JWT