Forem: Md. Injamul Alam

Why Fresh is the "Coolest" New Framework for Web Developers

Md. Injamul Alam — Tue, 10 Mar 2026 21:34:10 +0000

If you’ve been in the web development world for a while, you’ve probably heard of React, Vue, or Angular. They are great, but they often make websites feel "heavy" because they send a lot of JavaScript to the browser.

Enter Fresh — a modern web framework built for Deno that is changing the game.

What is Fresh?

Fresh is a "full-stack" framework. This means it handles both the UI (Frontend) and the Data (Backend). It’s built on top of Preact (a tiny version of React), so if you know React, you’ll feel right at home!

3 Reasons Why Beginners Love Fresh

1. It’s Fast (Like, Really Fast) ⚡
Most frameworks send a big "bundle" of JavaScript to your browser before the page even loads. Fresh sends zero JavaScript by default. It only sends HTML. This makes your site load almost instantly, even on slow mobile data.

2. No "Build" Step 🛠️
In React or Next.js, you usually have to wait for a "build" process to finish before you can see your site. In Fresh, there is no build step. You write code, you save it, and it’s live. This makes the developer experience very smooth.

3. The "Islands" Concept 🏝️
Imagine your website is a big ocean of static HTML (fast and light). Now, imagine you need a small interactive part, like a "Login Button" or a "Counter."
Fresh lets you create small Islands of Interactivity. Only these small islands use JavaScript, while the rest of the page stays light.

How is it different from Node.js?

Fresh runs on Deno, not Node.js. Deno is created by the same person who made Node.js, but it’s more secure and modern. You don’t even need a package.json file!

Let's See Some Code!
Creating a simple counter in Fresh looks exactly like React:

//TypeScript:
// islands/Counter.tsx
import { useSignal } from "@preact/signals";

export default function Counter() {
  const count = useSignal(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => count.value++}>Increment</button>
    </div>
  );
}

Should you learn it?

Yes, if you want to build super fast SEO-friendly websites (like blogs or landing pages).
Yes, if you want to explore the future of the web beyond Node.js.

Conclusion
Fresh is fresh! It simplifies web development by removing the heavy parts we've grown used to. If you want a framework that is easy to start, incredibly fast, and fun to use, give Fresh a try.

Check it out here: fresh.deno.dev

How to generate an APK and an AAB file on a .NET 8 MAUI app and publish on the Google Play Store

Md. Injamul Alam — Fri, 26 Sep 2025 18:07:35 +0000

Getting started with.NET8 MAUI was both exciting and challenging for me. This was my very first time working with the technology, and honestly, I had no prior experience with it. While trying to build and publish my first app, I encountered several unexpected issues and learning curves.

That’s why I decided to write this blog—so if you’re also starting your first .NET 8 MAUI project, you can learn from my journey and (hopefully) avoid some of the struggles I went through.
I want to express my gratitude to my teammates for their invaluable support and collaboration throughout this project.
In compliance with the client's privacy policy, I am not sharing detailed information about the app's interface, name, or description.
I will begin by explaining how to generate an APK, followed by a detailed guide on generating an AAB file.

It’s important to note that before creating an APK or AAB file, you need to generate a secret key. This key is essential for publishing your app, as any future updates must be signed with the same key. Therefore, it’s crucial to store this key securely.
Below, I’m providing the command-line instructions and a video tutorial showing exactly how to generate the key:

Command Line:

keytool -genkey -v -keystore key.keystore -alias MauiAlias -keyalg RSA -keysize 2048 -validity 10000

Video Link:
How to generate secret key

Now, let’s generate the APK file to test the app.

Why is APK needed?

An APK (Android Package) file is what lets you install and run your app on an Android device. Creating an APK lets you test your app in the real world—check its performance, spot issues, and make sure everything works before publishing it to the Play Store. Think of it as a preview version of your app in your hands.

Generate APK File

Build the app

Go to the app properties

Select APK from the options. If APK is already selected by default, there’s no need to make any changes.

Then save your changes and build the project again. Once the build process is complete, select Release.

Then select Publish from the project option.

After completing the publish process, click the "Distribute" button.

Click 'Ad Hoc' button.

Save ad hoc.

Then insert your secret key information.

Click Save As and enter your key store password.

Generate AAB File

To generate an AAB file, the process is similar to generating an APK. First, you need to select the Bundle option from the Android package options.

After making the changes, set the Target .NET Runtime to net9.0. Then, choose the option that specifies the Android framework your project targets. Make sure to select Android 15.0 (API Level 35), as the Google Play Store does not allow publishing apps with API Level 34.

Next, build the project and select Release for publishing. After the build is complete, navigate to the bin → .NET → Android folder, where you will find the generated AAB file.

By following these steps, you can successfully generate your APK or AAB file, ready for publishing. Remember to keep your secret key safe, as it’s essential for signing future updates. With your app properly built and signed, you’re now one step closer to sharing it with users and bringing your project to life.

If you found this guide helpful, don’t forget to share it with others who might benefit from it!

How to Manage Parent-Child Data Communication and Update Nested Data Structures Dynamically in Angular

Md. Injamul Alam — Fri, 24 Jan 2025 17:54:50 +0000

Although this post might be lengthy, my problem may not seem like a problem to someone more experienced than me. Still, I am writing it in the hope that it might help some of you.
I have divided this blog post into two parts. In the first part, I will discuss the coding problem I faced, making it easier for you to understand the solution. In the second part, I will explain how I solved my coding problem.
Firstly, the tech stack for the office project includes: Angular v17, .NET Core, Microsoft SQL, and the theme: PrimeNG v17.

The problem I’m discussing is related to retrieving saved data to update and set it in the entry form. In this case, part of the data needs to be looped through and set to the interface. Although the data was being set correctly, it was not displaying in the dropdown. Moreover, the data was not being modified correctly; even if it was, only the last element of the array was being updated.
I am not sharing the full code here due to privacy reasons. Instead, I have presented the main data as sample data to make it easier for you to understand.
JSON Data

{
  "masterId": 1,
  "masterDetails": [
      {
          "masterId": 1,
          "detailsData":[
          { 
            "detailsDataId": 123,
            "subDetailsData":[
             {
              "subDetailsDataId": 133,
              // here are other properties
             },
             {
              "subDetailsDataId": 134,
              // here are other properties
             }
           ]
          }
         // here are other elements of detailsData table
        ]
      }
  ]
}

We know that in Angular, there are primarily two types of forms for managing and handling user input:

Template-Driven Forms
Reactive Forms

In the project, we are using a Template-Driven Form.
Here is the code:

<div *ngFor="let d of detailsData; let i = index">
  <p-button [label]="d.detailsDataId" icon="pi pi-plus" (click)="add(i)" />
  <div *ngFor="let subDetailD of detailsData.subDetailsData; let c = index">
    <div class="fromgrid grid my-1 align-items-center">
      <div class="p-fluid col-12 md:col-6 xl:col-5 md:px-1 py-1">
        <p-dropdown
          styleClass="w-full"
          class="w-full"
          [options]="dropDownData[detailsData.detailsDataId]"
          name="DetailsDataId"
          (ngModel)]="subDetailD.subDetailsDataId"
          optionValue="DetailsDataId"
          optionLabel="DetailsDataName"
          [filter]="true"
          filterBy="DetailsDataName"
          [showClear]="true"
          placeholder="Select"
        >
          <ng-template pTemplate="selectedItem" let-selectedOption>
            <div class="flex align-items-center gap-2">
              <div>{{ selectedOption?.DetailsDataName }}</div>
            </div>
          </ng-template>
          <ng-template let-data pTemplate="item">
            <div class="flex align-items-center gap-2">
              <div>{{ data.DetailsDataName }}</div>
            </div>
          </ng-template>
        </p-dropdown>
      </div>
      <div class="p-fluid col-6 md:col-3 xl:col-1 md:px-1 py-1">
        <p-button
          icon="pi pi-times"
          severity="danger"
          [outlined]="true"
          size="small"
          (click)="remove(i, c)"
        />
      </div>
    </div>
  </div>
</div>

I used ngModel to set the data in the form. In this case, while looping through the data to set it in the interface, I encountered the issue. Despite making many changes to the code, no solution was found. Finally, I isolated the part of the code that was causing the problem as a child component.
Now, I am discussing the solution:

Parent Component (.html)

<div *ngFor="let d of detailsData; let i = index;">
<p-button [label]="d.detailsDataId" icon="pi pi-plus" (click)="add(i)" />
// Here is the child component which is looped based on the parent component
 <app-child-component [data]="d" [parentIndex]="I" 
  (remove)="remove(i, $event)" />  
</div>

Parent Component (.ts)

add(index: number): void { // Add a new child component dynamically
    const newsubDetailD = { 
    name: `New Sub-Details 
    ${this.detailsData[index].subDetailsData.length + 1}` };
    this.detailsData[index].subDetailsData.push(newsubDetailD);
}

remove (index: number, childIndex: number): void { 
// Method to remove a specific child component (e.g., by index)
    this.detailsData[index].subDetailsData.splice(childIndex, 1);
}

Child Component (.html)

<div *ngIf="data">
    <div *ngFor="let subDetailD of data.subDetailsData; let c = index">
        <div class="fromgrid grid my-1 align-items-center">
            <div class="p-fluid col-12 md:col-6 xl:col-5 md:px-1 py-1">
                <p-dropdown
                styleClass="w-full"
                class="w-full"
                [options]="dropDownData[data.detailsDataId]"
                name="DetailsDataId"
                (ngModel)]="subDetailD.subDetailsDataId"
                optionValue="DetailsDataId"
                optionLabel="DetailsDataName"
                [filter]="true"
                filterBy="DetailsDataName"
                [showClear]="true"
                placeholder="Select"
                >
                <ng-template pTemplate="selectedItem" let-selectedOption>
                    <div class="flex align-items-center gap-2">
                    <div>{{ selectedOption?.DetailsDataName }}</div>
                    </div>
                </ng-template>
                <ng-template let-data pTemplate="item">
                    <div class="flex align-items-center gap-2">
                    <div>{{ data.DetailsDataName }}</div>
                    </div>
                </ng-template>
                </p-dropdown>
            </div>
            <div class="p-fluid col-6 md:col-3 xl:col-1 md:px-1 py-1">
                <p-button
                icon="pi pi-times"
                severity="danger"
                [outlined]="true"
                size="small"
                (click)="remove(i, c)"
                />
            </div>
            <div class="p-fluid col-12 md:col-6 xl:col-1 md:px-1 py-1">
                <p-button icon="pi pi-times" (click)="remove(c)" severity="danger" [outlined]="true" size="small" pTooltip="Remove Counter" tooltipPosition="bottom" />
            </div>
        </div>
    </div>
</div>

_Child Component (.ts) _

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
export class childComponent implements OnInit {
  constructor() {}
  ngOnInit() {} 
  @Input() data: any; // Accept data from parent
  @Input() parentIndex: number; // The index from the parent
  @Output() remove: EventEmitter<number> = new EventEmitter<number>(); 
  // Typed as number
  remove(childIndex: number): void {
   this.remove.emit(childIndex); // Emit the childIndex to the parent
  }

}

By creating a child component, I successfully resolved the binding and looping issues that were previously causing trouble with ngModel. Sometimes, the solution lies in breaking things down into smaller, more manageable pieces. While this might seem like a simple fix to many, it was a valuable learning experience for me, and I hope it inspires others to approach similar challenges with curiosity and creativity. I'd love to hear your thoughts and insights—feel free to share them!

CSS Selectors for Web developer

Md. Injamul Alam — Wed, 10 May 2023 17:37:03 +0000

CSS selectors

1 Element Selector

h3 {
    /* write your css */ 
}

2 Id Selector

#head {
    /* write your css */ 
}

3 Class Selector

.head-title {
    /* write your css */ 
}

4 Attribute Selector

ol[type="a"] {
  /* write your css */ 
}

5 Descendant Selector

div .card-title {
   /* write your css */ 
}

6 Universal Selectors

* {
  /* write your css */ 
}

7 Nth type of Selector

div:nth-of-type(2) {
  /* write your css */ 
}

8 Pseudo-class Selector

*The syntax of pseudo-class:*
selector:pseudo-class {
  property: value;
}

Example:

a:hover {
  /* write your css */
}

Loop Types in JavaScript

Md. Injamul Alam — Sun, 10 Jul 2022 15:25:25 +0000

In this blog I'll go through different ways of looping in JavaScript with examples:

while
forEach
map
do while
for in
for of
for

while Loop

const developers = ['Injamul', 'Saurav', 'Tarek', 'Saiful'];

let developer = 0;

while (developer < developers.length) {
    console.log(developers[developer]);
    developer++;
}

/* Output: 
Injamul
Saurav
Tarek
Saiful
*/

forEach Loop

const developers = ['Injamul', 'Saurav', 'Tarek', 'Saiful'];

developers.forEach (developer =>{
    console.log(developer);
})

/* Output: 
Injamul
Saurav
Tarek
Saiful
*/

map Loop

const developers = ['Injamul', 'Saurav', 'Tarek', 'Saiful'];

developers.map (developer =>{
    console.log(developer);
    return developer;
})

/* Output: 
Injamul
Saurav
Tarek
Saiful
*/

do while Loop

const developers = ['Injamul', 'Saurav', 'Tarek', 'Saiful'];

let developer = 0
do {
    console.log(developers[developer]);
    developer++;
    }

while(developer < developers.length)

/* Output: 
Injamul
Saurav
Tarek
Saiful
*/

for of Loop

const developers = ['Injamul', 'Saurav', 'Tarek', 'Saiful'];

for (const developer of developers){
    console.log(developer);
    }

/* Output: 
Injamul
Saurav
Tarek
Saiful
*/

for in Loop

const developers = {
    1 : 'Injamul', 
    2 : 'Saurav', 
    3 : 'Tarek', 
    4 : 'Saiful'
};

for (const key in developers) {
    console.log(developers[key]);
}

/* Output: 
Injamul
Saurav
Tarek
Saiful
*/

for Loop

const developers = ['Injamul', 'Saurav', 'Tarek', 'Saiful'];

for (let developer = 0; developer < developers.length; developer++){
    console.log(developers[developer]);
    }

/* Output: 
Injamul
Saurav
Tarek
Saiful
*/

Talking about JavaScript function

Md. Injamul Alam — Tue, 14 Sep 2021 15:13:54 +0000

What is Function in JavaScript?

In JavaScript, functions are defined with the 'function' keyword.

There is an another way to define a function, called 'Arrow Function'.

Declaration a Function

Syntax

function firstFunction () {
     // Code here ...
}

Example

function firstFunction () {
     console.log('JavaScript function');
}
firstFunction();
// JavaScript function

Function Expressions

A function expression can be stored in a variable.
Syntax

let firstFunction = function () {
    // Code here ...
}

Example

let firstFunction = function () {
     return "JavaScript function";
}
firstFunction();
// JavaScript function

Arrow Function

Arrow function allows a short syntax for writing function expressions.

We don't need the 'function' keyword, the 'return' keyword and the 'curly' brackets.

Syntax

let change = (argument1, argument2) => Code here ... ;

Example:

let add = (x , y) => x + y; 
add(4, 6);
// Output will 10

Function Parameters

If you want to build a dynamic function then you have to use parameters.

Parameters are like an input. Based on your input it gives you the output.

Syntax with example

function add(x, y) {
  return (x + y);
}
add(10, 5); // Output: 15,
// Here, x is 10, y is 5.

Default Parameters

If a function is called with missing arguments, the missing values are set to undefined.

It is better to assign a default value to the parameter.

Syntax

function myFunction (argument1 = default value) {
   // Code here ...
}

Example

function sum (x = 1, y = 1) {
    return (x + y);
}
sum(4, 6); // here x is 4, y is 6
sum(4); // here x is 4 but y is 1 (default value)
sum(); // here x is 1, y is 1