DEV Community: Mahia Momo

🚀Firebase দিয়ে Full Stack Project Deployment

Mahia Momo — Wed, 12 Nov 2025 06:03:22 +0000

Recently আমার University Project করার সময় আমি Firebase Authentication ব্যবহার করি।
কাজের মাঝেই বুঝতে পারি, Firebase শুধু authentication নয় even
এটি দিয়ে website hosting ও deployment করাও possible! 🔥
এর আগে আমি সাধারণত GitHub, Netlify এবং Vercel ব্যবহার করে সরাসরি GitHub repository আপলোড করে ওয়েবসাইট হোস্ট করতাম।
কিন্তু এই প্রজেক্টের সময় আমি একদম নতুনভাবে Firebase Deployment System এক্সপ্লোর করি, যেখানে
terminal থেকে command দিয়েই deploy করা যায়।
শুরুতে কিছু ছোটখাটো issue ফেস করলেও, শেষ পর্যন্ত সফলভাবে deployment complete হয়।
Firebase-এ কোড আপডেট করার প্রক্রিয়াটা এমন ছিল 👇
1️⃣ প্রথমে আমার commit করা কোড GitHub এ push হয়।
2️⃣ তারপর সেই কোড Firebase Hosting Server এ deploy হয়।
3️⃣ কোডে কোনো পরিবর্তন করার পর শুধু নিচের কমান্ডটি দিলেই ->
firebase deploy --only hosting Firebase-এ আপডেট হয়।
এর পাশাপাশি আমি নতুনভাবে CI/CD (Continuous Integration and Continuous Deployment) কনসেপ্টটাও শিখেছি।
এখন বুঝতে পেরেছি, যদি GitHub Actions সঠিকভাবে সেটআপ করা থাকে, তাহলে কোড push করার পর Firebase-এ auto deployment হয়ে যাবে —
অর্থাৎ, আর ম্যানুয়ালি firebase deploy --only hosting কমান্ড দিতে হবে না!
এই প্রজেক্টের মাধ্যমে আমি শিখেছি কীভাবে deployment প্রক্রিয়াকে আরও smart, automated এবং developer-friendly করা যায় — যা ভবিষ্যতের প্রজেক্টগুলোর জন্য perfectly কাজে লাগবে। 💡
Mahia Momo

"Key Syntax Differences in Object-Oriented Programming: Python vs. Java”

Mahia Momo — Sun, 19 Jan 2025 14:47:42 +0000

class & object

python code:

#Student is the class
class Student:
    name = "Momo";

#here s1 is the object of Student class
s1 = Student()   
print(s1.name)

constructor

python code

class Student:

    def __init__(self,fullname):  #constructor 
        self.name = fullname

s1 = Student("Momo")
print(s1.name)

class & object in java

java code:

// Student is the class
class Student {
    String name = "Momo";
}

// Main class to test the Student class
public class Main {
    public static void main(String[] args) {
        // s1 is the object of the Student class
        Student s1 = new Student();
        System.out.println(s1.name);
    }
}

constructor in java

java code:

// Student class
class Student {
    String name; // Instance variable

    // Constructor
    public Student(String fullname) {
        this.name = fullname;
    }
}

// Main class to test the Student class
public class Main1 {
    public static void main(String[] args) {
        // Create an object of the Student class
        Student s1 = new Student("Momo");
        // Print the name
        System.out.println(s1.name);
    }
}

"Different Types of CSS Selectors”

Mahia Momo — Mon, 06 Jan 2025 08:48:10 +0000

Types of Selectors in CSS:

Class Selector:

Code:

<body>
    <p class="heighlight">class of "heighlight".</p>
    <p>does not have any specific class.</p>
    <p class="heighlight">a class of "heighlight".</p>
</body>

<style>
.heighlight {
    color: red;
    font-weight: bold;
}
</style>

Id Selector:

Code:

<body>
    <h1 id="main-heading">This h1 has an id</h1>
    <p>This paragraph does not have an id</p>
    <p id="intro-paragraph">This paragraph has an id</p>
</body>

<style>
#main-heading {
    color: blue;
    font-size: 24px;

}

#intro-paragraph {
    background-color: yellow;
    padding: 10px;

}
</style>

Elementor Selector:

<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph</p>
    <p>This is another paragraph</p>
    <a href="https:///www.google.com">Visit Example Website</a>
</body>

<style>
    h1 {
        color: blue;
    }
    p {
      font-size: 16px;

    }
    a {
        text-decoration: none;
        color: red;
    }
</style>

Universal Selector

Code:

<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph</p>
    <div>
        <h2>About Us</h2>
        <p>This is another paragraph</p>
    </div>
</body>

<style>
*{
    margin: 0;
    padding: 0;
    border: 1 px solid;
}
</style>

Grouping Selector:

Code:

<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
    <a href="#">Click me</a>
    <button>Submit</button>
</body>

<style>
    h1,p {
        color: blue;
    }
    a,button {
        background-color: yellow;
        padding: 10px;
    }
</style>

Attribute Selector:

Code:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" required />
    <input type="submit" value="Submit" />
</form>

<style>
    input[type="submit"] {
        background-color: #4caf50;
        color: white;
    }
    input[required] {
        border: 1px solid red;
    }
</style>

"Powerful Tricks and Features About HTML You Should Know"

Mahia Momo — Tue, 31 Dec 2024 11:50:40 +0000

HTML: The Backbone of the Web

HTML is the king of web development. No matter which technology you use, everything ultimately converts into HTML for the browser. The code displayed in the browser is always HTML, making it the foundation of the web.With its simplicity and versatility, HTML allows you to build, modify, and present web content effortlessly. Understanding and utilizing its core features can unlock a world of possibilities for your web projects.

Here are some amazing HTML tricks and features :

1.Start Attribute:

Code:

 <html lang="en">
    <head>
    </head>
    <body style="font-family:'Inter',sans-serif">
        <!---- start attribute -->
        <ol start="7">
            <li>Javascript 🔥</li>
            <li>Python 🤩</li>
            <li>PHP❤️</li>
        </ol>
    </body>
</html>

Output:

2.Contenteditable Attribute:

Code:

        <!-- 'contenteditable' attribute -->

        <div contenteditable="true">HTML can hack NASA !</div>

Output:

3.Mark Element:

Code:

<!-- 'mark element'-->
         <p>HTML can hack <mark>NASA</mark> !</p>

Output:

4.Details & Summary Element:

Code:

<!-- 'details' and 'summary' element -->
         <details>
            <summary>You can Support Mahia Momo</summary>
            <p>Follow me on Linkedin</p>
            <p>Follow me on Github</p>
         </details>

Output:

5.Accept Attribute:

Code:

         <!-- 'accept' attribute -->
          <input type="file" accept=".pdf"/>

Output:

6.Poster Attribute:

Code:

<!-- 'poster' attribute -->

        <video src="https://youtu.be/7lmoLxbUENM?si=SzrFXlw5KaEdB8m6" style="width: 150px" poster="https://i.pinimg.com/736x/65/69/b8/6569b84671e254fb3531076d4fdcb84b.jpg">
         Video
        </video>

Output:

7.KBD Element:

Code:

 <!-- 'kbd' element -->
         <div>Press<kbd>ctrl</kbd> & <kbd>tab</kbd> to change browser tab </div>

Output:

8.ABBR Element:

Code:

        <!-- 'abbr' element -->
         <abbr title="I am Mahia Momo">I am Mahia Momo🚀</abbr>

Output:

"Does Sass Offer the Features of a Programming Language?"

Mahia Momo — Sat, 16 Nov 2024 08:38:11 +0000

Sass is the preprocessor of CSS. A CSS preprocessor is a tool that extends CSS with additional features, allowing you to write styles in a more programmatic way. Once the Sass code is written, it needs to be compiled into standard CSS before it can be used by web browsers. This is why it is often referred to as a preprocessor.
CSS is the standard stylesheet language used by browsers to style HTML.
But in otherhand Sass extends CSS by providing additional features for easier and more efficient stylesheet management. However, when Sass is compiled, it generates standard CSS code that the browser can understand.

Sass Features

Like core programming languages, Sass introduces powerful features to enhance CSS:

Variables ($):

Variables in Sass allow you to store values like colors, font sizes, and other constants. This helps to avoid repetition and makes it easy to update values throughout your code.


$primary-color: #3498db;
$font-size: 16px;

Functions (function()):

Sass functions let you perform calculations or manipulate values like colors, lengths, and more. They help to make your styles more dynamic and reusable.


@function calculate-rem($size) {
  @return $size / 16px * 1rem;
}

.text {
  font-size: calculate-rem(24px);
}

Inheritance (@extend):

Inheritance in Sass allows one selector to inherit the styles of another. This can help reduce code duplication, making it easier to maintain consistent styling.


.base {
  color: $primary-color;
  font-size: $font-size;
}

.button {
  @extend .base;
  padding: 10px 20px;
}

Modularization:

Sass allows you to split your styles into smaller, manageable files (partials), and then combine them using the @import rule. This makes it easier to organize your code.


// _variables.scss 
$primary-color: #3498db; 
// main.scss
 @import variables;

How SCSS Code convert to CSS Code:

SCSS (Sassy CSS) is a CSS preprocessor that adds extra features to CSS, such as variables, nested rules, mixins, and more. When SCSS code is compiled into CSS, the SCSS-specific syntax is translated into standard CSS, which browsers can understand.

Conversion of SCSS to CSS: Variables

In SCSS, variables are defined using the $ symbol. When SCSS code is compiled into CSS, these variables are replaced with their corresponding values.

SCSS Code:

$mFont: Helvetica,sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
    font-family: $mFont;
    font-size: $myFontSize;
    color: $myColor;
}

#container {
    width: $mWidth;
}

CSS Code:

body {
    font-family:  Helvetica, sans-serif;
    font-size: 18px;
    color: red;

}

#container {
    width: 680px;
}

তরুণ উদ্যোক্তা এবং স্টার্টআপ: আমার কল্পনার জগতে একটি যাত্রা

Mahia Momo — Thu, 24 Oct 2024 10:39:34 +0000

এই লেখাটি আমার মস্তিষ্কের কল্পনামাত্র; এর সাথে কর্পোরেট জীবনের কোনো সম্পর্ক নেই।

আমার জীবনের একটি ছোট্ট অভিজ্ঞতা থেকে আমি কিছু শিখেছি, যেটি বাস্তব জীবনের ঘটনাগুলোর সাথে মিলিয়ে আমি কর্পোরেট মার্কেটপ্লেসের উদাহরণ দিয়ে ব্যাখ্যা করতে চাই।

একজন উদ্যোক্তা মার্কেটপ্লেসে নতুন একটি পণ্য নিয়ে এলেন এবং পণ্যের গুণমানের তুলনায় দাম নিয়ে প্রচুর হাইপ তৈরি করলেন। সেই সময়ে মার্কেটে আরও বেশ কিছু পণ্য ছিল যেগুলোর গুণমান এবং মূল্য একই রকমের ভারসাম্য বজায় রেখেছিল। কিন্তু এই উদ্যোক্তা তার কম মানের পণ্যকে উচ্চমানের হিসেবে বাজারজাত করলেন দুর্দান্ত মার্কেটিংয়ের মাধ্যমে, যার ফলে পণ্যের দুর্বল দিকগুলো আড়াল হয়ে গেল। তার প্রচারণা এতটাই শক্তিশালী ছিল যে, তার পণ্যটি আন্তর্জাতিক ব্র্যান্ডিংয়ের মাধ্যমে প্রচার পেয়েছিল—যা অন্য প্রতিযোগীদের পণ্যের ছিল না।

এই কারণে তিনি খুব দ্রুত তার স্টার্টআপকে একটি শক্তিশালী প্রোফাইল দিতে সক্ষম হলেন এবং পণ্যের গুণমান উন্নত করে শীর্ষস্থানে চলে এলেন। অন্যদিকে, বাজারের অন্যান্য পণ্যের মূল্যমান কমানোর জন্য কিছু মিথ্যা গুজব ছড়ানো হলো, যার ফলে অন্য উদ্যোক্তাদের বাজারমূল্য কমে গেল এবং তাদের ক্ষতি হলো। তবে তাদের পণ্যগুলি মানসম্মত হওয়ায়, সামান্য ক্ষতি হলেও তারা তা পূরণ করতে পেরেছে এবং বাজারে মসৃণভাবে টিকে থাকলো। তাদের পণ্যগুলি প্রশিক্ষণ পেলে আরও ভালো পারফরম্যান্স দিতে সক্ষম হতো, যা কম মানের বেশি হাইপ তোলা পণ্যের পক্ষে সম্ভব নয়।

ফলে, কিছুদিন পরেই সেই উদ্যোক্তা তার কোম্পানিটি বন্ধ করে দিতে বাধ্য হলেন কারণ তার পণ্য বাজারের অন্যান্য মানসম্পন্ন পণ্যগুলোর সাথে প্রতিযোগিতা করতে পারছিল না। অন্যদিকে, মানসম্মত পণ্য প্রস্তুতকারীরা তাদের বাজারে নিশ্চিন্তে বেশ কিছু বছর ধরে টিকে থাকতে পারবে।

"Boosting Team Productivity with WakaTime: A Comprehensive Project Overview"

Mahia Momo — Thu, 22 Aug 2024 09:43:06 +0000

WakaTime Teams:

Wakatime is a feature of WakaTime that allows teams to collaborate and track coding activity together. With WakaTime Teams, team leads and members can:

Monitor Team Productivity:

Get insights into how much time the team is spending on coding, which languages are being used most frequently, and overall productivity.

Collaboration and Communication:

See what other team members are working on in real time, facilitating better collaboration and communication.

Goal Tracking:

Set and track goals for the team to ensure milestones are met.

Detailed Analytics:

Access detailed reports and analytics on individual and team coding habits.

WakaTime Teams is useful for development teams who want to ensure consistent productivity and maintain visibility into the progress of their projects.

https://wakatime.com/teams

Use Wakatime: And initialize your coding time

Mahia Momo — Sat, 17 Aug 2024 17:00:33 +0000

Wakatime is a tool designed to help developers and programmers track the amount of time spending coding, analyze productivity, and pursue self-improvement.

Installation:

Install Wakatime for Visual Studio Code:

Here’s a step-by-step guide to installing the Wakatime extension in Visual Studio Code and connecting it with your Wakatime account using your API key:

Install Wakatime Extension in Visual Studio Code: Open Visual Studio Code. Click on the Extensions icon on the left sidebar or press Ctrl + Shift + X. In the search bar, type Wakatime. Click on the Wakatime extension by Wakatime and then click Install.
Sign Up/Log In to Your Wakatime Account: Visit the Wakatime website. If you don’t have an account, click Sign Up and create one. If you already have an account, simply log in.
Retrieve Your API Key: After logging in, click on your profile picture at the top right and select Settings from the dropdown menu. In the Account Settings page, you’ll find the API Key under API Key section. Copy your API Key.
Connect Wakatime to Visual Studio Code: Go back to Visual Studio Code. If the Wakatime extension was installed successfully, it should prompt you to enter your API Key. Paste the key you copied. If you didn’t receive the prompt, you can trigger it by opening the Command Palette (Ctrl + Shift + P), typing Wakatime: API Key, and selecting it. Paste your API Key and press Enter.

Time_Tracking:

Automatically tracks the time spent coding in various projects and programming languages.
Provides detailed insights into how much time is spent on each project or language.

Productivity_Analysis:

Analyzes coding habits and productivity patterns to help developers and programmers understand their workflow.
Helps in identifying areas for improvement and optimizing coding efficiency.

IDE_Integration:

Integrates with popular IDEs and text editors through plugins. By installing these plugins, Wakatime can track your coding activity directly within your development environment.

Dashboard:

Offers a dashboard where you can view your activity, including time spent on projects, files, and languages.
Generates reports and visualizations to help you review your coding trends and productivity.

WakaTime_for_GitHub:

Since you use WakaTime, you can integrate it with GitHub to show your coding activity in your profile README.

Self_Improvement:

Provides insights that can guide you in setting and achieving coding goals.Helps in balancing work and preventing burnout by monitoring coding hours.