DEV Community: CHAHBOUN Mohammed

Elevate Your Flutter App's Performance with Flutter Rocket's Premium Features 🚀

CHAHBOUN Mohammed — Tue, 20 Jan 2026 23:33:30 +0000

Flutter developers are spoiled for choice when it comes to state management. From BLoC to Riverpod, the ecosystem is rich. However, as our apps grow in complexity, we often find ourselves fighting a common enemy: unnecessary UI rebuilds.

Today, I’m excited to introduce the latest updates to Flutter Rocket—a lightweight, high-performance state management and API integration solution that puts "Premium Performance" at the center of your development workflow.

The Performance Bottleneck: The "Rebuild Everything" Syndrome

We’ve all been there. You update a user’s biography in a deep nested object, and suddenly your entire profile screen—including the avatar, interest tags, and post history—rebuilds. In large lists, updating one item can sometimes trigger an expensive redraw of the whole view.

Flutter Rocket 1.1.0 changes that.

1. Selective Rebuilds: Precision UI Updates

The star of the show is Selective Rebuilds. This feature allows you to specify exactly which properties a widget should listen to.

Instead of rebuilding every time a model changes, your widget only reacts when the specific "fields" it depends on are updated.

// This widget ONLY rebuilds when 'title' changes
RocketView(
  model: currentPost,
  fields: [postTitleField], 
  builder: (context, state) => Text(currentPost.title!),
)

By localizing updates to the property level, you drastically reduce CPU cycles, save battery, and ensure a silky-smooth 60 (or 120!) FPS experience even on lower-end devices.

2. Automatic Bubbling: Zero-Code Orchestration

Managing state in nested collections is usually a headache. If a Post changes, how does the Posts list know it needs to refresh its summary?

With Automatic Bubbling, Flutter Rocket handles this orchestration for you. When a child model triggers an update, it automatically "bubbles up" to its parent collection.

The result? Your UI stays perfectly in sync across different screens and components without you writing a single line of manual listener code.

3. Rocket CLI: The Magic Wand 🪄

Performance optimizations are great, but no one likes writing boilerplate. That’s why we’ve updated Rocket CLI to version 1.1.0.

Now, when you generate your models from JSON, the CLI automatically generates the updateFields logic required for Selective Rebuilds and Bubbling.

# Generate a fully optimized model in seconds
rocket_cli -j '{"id":1, "title":"Hello World"}' -n Post

You get industry-leading performance out of the box, generated in a single command.

Why Flutter Rocket?

Flutter Rocket isn't just another state management library. It’s a complete ecosystem:

RocketModel: Smart data structures with built-in state.
RocketClient: HTTP client with interceptors and dynamic caching.
RocketView: Smart widgets that handle loading, errors, and data binding.
Rocket Singleton: A global registry to access your data from anywhere.

Ready to Fly? 🛰️

Flutter Rocket is designed for developers who want the performance of a custom-tailored system with the simplicity of a "plug-and-play" package.

Whether you're building a simple prototype or a high-traffic production app, Flutter Rocket gives you the tools to build faster and run smoother.

Check out the project:

Join the conversation! Have you tried selective rebuilds in your projects? Let us know in the comments below!

Flutter #Dart #StateManagement #MobileDevelopment #Programming #FlutterRocket

The Safe Way to Switch Git Branches with Django Migrations

CHAHBOUN Mohammed — Sat, 27 Sep 2025 13:34:58 +0000

If you've ever worked on a Django project with multiple feature branches, you've likely encountered this frustrating scenario: you switch branches only to find your database schema is out of sync, causing runtime errors or migration conflicts. The quick fix of dropping your entire database is tempting, but there's a better way.

The Problem: Database Schema Drift

When you're working with different Git branches that each have their own migrations, your database can quickly become misaligned with your codebase. Consider this common workflow:

You're working on feature-branch-a with migrations up to 0004.
You need to switch to feature-branch-b, which has migrations up to 0003.
After switching, your database expects migration 0004, but your code only has up to 0003.

The result? Django complains about missing migrations or applied migrations that don't exist in the current branch.

❌ The Tempting (But Dangerous) Quick Fix

Many developers reach for the nuclear option:

python manage.py migrate your_app zero
python manage.py migrate

This wipes all your data and rebuilds the schema from scratch. While it works, you lose all your development data, which is especially painful if you've spent time setting up test data or have important development records.

⚙️ The Proper Fix: Migrate Backwards Before Switching

For a more controlled approach that avoids data loss, reverse the migrations from your current branch before switching to the new one. This keeps your database schema aligned with your code.

Step-by-Step Process

Find the last common migration that both branches share:

   python manage.py showmigrations

This shows you which migrations are applied and helps identify where the branches diverge.

Migrate your database back to that common state: If the common migration was 0002:

   python manage.py migrate your_app_name 0002

Switch to your target branch:

   git checkout target-branch-name

Apply the new branch's migrations:

   python manage.py migrate

This method is more manual but preserves your data and follows the correct workflow for applying and unapplying migrations.

🚀 Bonus: Makefile Aliases for Easy Migration Management

To make this process even smoother, I've created Makefile aliases that automate finding and rolling back to the latest migration from a target branch. These are especially useful in different environments:

staging-rollback:
    @echo "Finding latest migration file..."
    @MIGRATION_FILE=$$(git ls-tree -r --name-only origin/develop -- **/migrations/*.py | grep -E '[0-9]{4}_.*\.py' | sort -n -t'/' -k3 | tail -1) && \
    APP_NAME=$$(echo "$$MIGRATION_FILE" | cut -d'/' -f1) && \
    MIGRATION_NAME=$$(basename "$$MIGRATION_FILE" .py) && \
    echo "Rolling back migration $$MIGRATION_NAME in app $$APP_NAME..." && \
    docker compose exec web python manage.py migrate $$APP_NAME $$MIGRATION_NAME

dev-rollback:
    @echo "Finding latest migration file..."
    @MIGRATION_FILE=$$(git ls-tree -r --name-only origin/develop -- **/migrations/*.py | grep -E '[0-9]{4}_.*\.py' | sort -n -t'/' -k3 | tail -1) && \
    APP_NAME=$$(echo "$$MIGRATION_FILE" | cut -d'/' -f1) && \
    MIGRATION_NAME=$$(basename "$$MIGRATION_FILE" .py) && \
    echo "Rolling back migration $$MIGRATION_NAME in app $$APP_NAME..." && \
    docker compose exec web-dev python manage.py migrate $$APP_NAME $$MIGRATION_NAME

local-rollback:
    @echo "Finding latest migration file..."
    @MIGRATION_FILE=$$(git ls-tree -r --name-only origin/develop -- **/migrations/*.py | grep -E '[0-9]{4}_.*\.py' | sort -n -t'/' -k3 | tail -1) && \
    APP_NAME=$$(echo "$$MIGRATION_FILE" | cut -d'/' -f1) && \
    MIGRATION_NAME=$$(basename "$$MIGRATION_FILE" .py) && \
    echo "Rolling back migration $$MIGRATION_NAME in app $$APP_NAME..." && \
    python manage.py migrate $$APP_NAME $$MIGRATION_NAME

These commands automatically:

Find the latest migration file from the develop branch (or any target branch you specify)
Extract the app name and migration number
Execute the appropriate migrate command to roll back to that specific migration

Usage Examples

# Roll back your local database to match the develop branch
make local-rollback

# Roll back your development environment
make dev-rollback

# Roll back staging to prepare for a deployment
make staging-rollback

💡 Pro Tips for Migration Management

Commit often: Small, focused migrations are easier to manage than large, complex ones.
Use meaningful migration names: This helps identify what each migration does when you need to roll back.
Keep migrations in sync: Try to avoid having migration conflicts between branches.
Test migration rollbacks: Ensure your migrations can be reversed without data loss.

Conclusion

Switching branches doesn't have to mean losing your development data. By properly managing your migrations and using automated tools like these Makefile aliases, you can maintain a smooth workflow across multiple feature branches. The few extra seconds spent rolling back migrations properly will save you hours of recreating lost data.

What migration strategies have worked well for your team? Share your tips in the comments below!

Follow for more Django tips and development workflows!

Responsive Card Layout with CSS Grid: A Step-by-Step Guide

CHAHBOUN Mohammed — Sun, 03 Aug 2025 15:10:51 +0000

In this post, I'll walk you through the implementation of a responsive card layout using CSS Grid, which I recently deployed on my GitHub repository: css_flexible_wrap. This layout adapts dynamically to various screen sizes, ensuring a visually appealing and functional design.

Overview of the Project

The main goal of this project is to create a card layout that maintains uniformity across rows while being responsive to the size of the display. Utilizing CSS Grid allows for a flexible and efficient arrangement of cards.

Key Features

Responsive Design: The layout adjusts based on screen size, maintaining a consistent look across devices.
Dynamic Columns: The number of columns changes automatically according to the container's width.
CSS Grid: Efficient layout management using CSS Grid properties.

Getting Started

1. Clone the Repository

To get started, clone the repository to your local machine using the following command:

git clone https://github.com/M97Chahboun/css_flexible_wrap.git

2. Navigate to the Project Directory

Change into the project directory:

cd css_flexible_wrap

3. Open the HTML File

Open index.html in your preferred web browser to view the layout in action.

4. Showcase

Implementation Details

HTML Structure

The basic structure of the HTML file includes several card elements wrapped in a container:

<div class="card-container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
    <div class="card">Card 5</div>
    <div class="card">Card 6</div>
</div>

CSS Styling

The CSS utilizes the following properties to create a responsive grid layout:

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.card {
    background-color: #f3f4f6;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Tailwind CSS Equivalent

For those using Tailwind CSS, the equivalent implementation can be achieved with utility classes like:

<div class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4">
    <div class="bg-gray-200 p-4 rounded-lg shadow">Card 1</div>
    <div class="bg-gray-200 p-4 rounded-lg shadow">Card 2</div>
    <div class="bg-gray-200 p-4 rounded-lg shadow">Card 3</div>
    <div class="bg-gray-200 p-4 rounded-lg shadow">Card 4</div>
    <div class="bg-gray-200 p-4 rounded-lg shadow">Card 5</div>
    <div class="bg-gray-200 p-4 rounded-lg shadow">Card 6</div>
</div>

Customization Options

This layout is fully customizable. You can modify the card styles by adjusting the .card class in the CSS file or tweak the grid settings by changing the grid-template-columns property to fit your design needs.

Conclusion

This project serves as a great starting point for anyone looking to implement a responsive card layout using CSS Grid. Feel free to explore the repository and experiment with the code. You can find the project on GitHub: css_flexible_wrap.
FlexibleWrap flutter package

Happy coding!

Announcing Bixat Key Mouse: A Cross-Platform Dart Package for Keyboard and Mouse Simulation 🎉

CHAHBOUN Mohammed — Wed, 16 Jul 2025 18:08:12 +0000

We’re excited to introduce Bixat Key Mouse, a powerful new package that allows developers to simulate keyboard and mouse events across multiple platforms, including Linux, Windows, macOS, and BSD. Whether you’re building applications that require automated interactions or creating testing tools, Bixat Key Mouse has you covered!

🚀 Key Features

Cross-Platform Compatibility: Works seamlessly on Linux, Windows, macOS, and BSD.
Mouse Control: Move the mouse to absolute or relative positions, and simulate mouse button presses and releases.
Text Input: Enter text programmatically with ease.
Keyboard Simulation: Simulate key presses and releases, including multiple key modifiers.

📦 Easy Installation

Adding Bixat Key Mouse to your Flutter project is simple! Just add the package to your pubspec.yaml:

flutter pub add bixat_key_mouse

Then run:

flutter pub get

📚 Getting Started

To start using Bixat Key Mouse in your Dart code, import the package:

import 'package:bixat_key_mouse/bixat_key_mouse.dart';

Here’s a quick example showcasing its capabilities:

void main() {
  BixatKeyMouse.moveMouseAbs(100, 100);
  BixatKeyMouse.pressMouseButton(1);
  BixatKeyMouse.enterText('Hello, world!');
  BixatKeyMouse.simulateKeyPress(KeyModifier.command);
}

🤝 Join the Community

We welcome contributions! If you have ideas for improvements or want to report issues, feel free to submit a Pull Request. Let’s build a great toolkit together!

📜 License

Bixat Key Mouse is licensed under the MIT License.

🎉 Conclusion

We can’t wait to see what you build with Bixat Key Mouse! Whether you’re automating tasks, performing UI tests, or simply experimenting, this package is designed to make your development process smoother and more efficient.

Happy coding! 🚀

NexSh — Stop Googling, Start Talking

CHAHBOUN Mohammed — Sun, 25 May 2025 20:50:05 +0000

How many times have you stopped what you’re doing to search for that one git command, or the right find syntax, or the exact ffmpeg parameters? Probably too many to count.

With NexSh, those days are over. Our AI-powered command interpretation lets you use natural language to express your intent.

Want to find all Python files modified in the last week? Instead of: find . -name "*.py" -type f -mtime -7 Just type: "Show me all Python files I've changed in the last 7 days."
Need to list processes using the most memory? Instead of: ps aux --sort -rss Just type: "What's using the most memory on my system?"
NexSh takes your words and, through smart conversion, translates them into precise, executable shell commands. It’s like having a seasoned terminal guru sitting right beside you, ready to translate your thoughts into perfect syntax.

Beyond Basic Commands: Features Designed for Your Workflow

But we didn’t stop at just understanding your commands. We packed NexSh with features that solve real-world productivity pains:

🎨 Interactive Experience: Say goodbye to bland, monochrome output. Our shell provides colorful output with intuitive formatting, making it easier to parse complex information and identify key details at a glance. Errors are highlighted, important data stands out, and your terminal becomes a more visually informative space.

📝 Enhanced History: Ever lose that perfect, complex command you crafted weeks ago? Our enhanced history lets you search and recall past commands easily, not just by keyword, but by what you meant to do. “Find that Docker command I used for database migration,” and it’s there.

🛡️ Safety First: Accidentally deleting important files or executing risky commands can be a developer's worst fear. NexSh serves as your protective ally, alerting you before running potentially harmful commands. This added layer of security can help you avoid significant headaches down the line.

🚀 Multiple Modes: Whether you prefer an interactive shell for deep work or need to execute a single commandquickly from a script, NexSh adapts to your workflow.

💻 Cross-Platform: We know you don’t stick to just one OS. That’s why NexSh is built to work seamlessly across Linux, macOS, and Windows, ensuring a consistent, intelligent experience no matter your environment.

❌ Command failure explanations: Offers explanations and potential solutions when a command fails

Ready to Experience a Smarter Shell?

The command line doesn’t have to be a barrier. With NexSh, it becomes an intuitive, powerful extension of your thoughts, freeing you to focus on what you’re building, not on remembering arcane syntax.
We’re just getting started, and we’re excited for you to try it out.
Ready to boost your command line productivity?
Check out NexSh on GitHub: https://github.com/M97Chahboun/nexsh
Let us know what you think and join us in building the future of the command line!

🚀 Fly High with Flutter Rocket: The Ultimate Package for Flutter Developers

CHAHBOUN Mohammed — Thu, 24 Apr 2025 17:47:26 +0000

Are you a Flutter developer looking to supercharge your app development process? Meet Flutter Rocket—a modular, powerful, and easy-to-use package that aims to simplify state management, API handling, and UI development in Flutter. Created by the talented team, Flutter Rocket is designed to help you build high-quality apps faster and with less effort.

🧩 Key Features

Flutter Rocket offers a wide range of features that make it an indispensable tool for Flutter developers:

1. Effortless State Management

Simplify your state management with tools like RocketValue and RocketMiniView.
Easily bind and update data in your UI, reducing boilerplate code.

2. Streamlined API Handling

Handle API requests seamlessly with RocketRequest.
Save and retrieve models or values anywhere in your app using the Rocket object.

3. Modular Design

Flutter Rocket is built as a collection of modular packages, each focusing on a specific functionality:

rocket_model for managing data models.
rocket_client for API communication.
rocket_view for dynamic UI rendering.
rocket_singleton for global state management.

4. Customizable UI Components

Use widgets like RocketView to create dynamic and responsive interfaces with minimal code.
Customize loaders and handle errors gracefully.

5. API Integration Simulation

Simulate API responses by providing custom mock data for specific endpoints.
Simulated Latency: Mimic real-world network delays to test how your application handles different response times.
Toggle Simulation Mode: Seamlessly switch between real API calls and simulated responses.
Error Simulation: Test error handling by simulating various HTTP errors (e.g., 404, 500).

🎯 Why Use Flutter Rocket?

Here’s why you should consider Flutter Rocket for your next project:

Save Time: With its modular architecture and pre-built tools, you can focus on building features instead of reinventing the wheel.
Improve Code Quality: Reduce complexity and maintain cleaner, more readable code.
Seamless Integration: Easily integrate Flutter Rocket with your existing Flutter projects.

🛠️ Getting Started

Installation

Add Flutter Rocket to your project by running:

flutter pub add flutter_rocket

Example Usage

Here’s a quick example to showcase the simplicity of Flutter Rocket:

class MiniViewRocket extends StatelessWidget {
  final RocketValue<String> myStringValue = "Hello, Flutter!".mini;

  MiniViewRocket({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RocketMiniView(
          value: myStringValue,
          builder: () => Text(myStringValue.v),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          myStringValue.v = "Value Updated!";
        },
        child: Icon(Icons.update),
      ),
    );
  }
}

📚 Learn More

Ready to take your Flutter development to the next level? Check out the full documentation and examples on the Flutter Rocket GitHub repository.

🚀 Let’s Build Something Amazing!

Whether you’re a seasoned Flutter pro or just starting, Flutter Rocket is a tool you’ll want in your toolkit. Give it a try today and see the difference it can make in your projects!

If you enjoyed this post and found it helpful, don’t forget to clap 👏 and share it with your fellow developers. Have questions or feedback? Drop a comment below!

Introducing FlexibleWrap: A New Way to Design Dynamic Flutter Layouts

CHAHBOUN Mohammed — Mon, 02 Dec 2024 11:38:57 +0000

In the world of Flutter development, creating responsive and dynamic layouts can often be challenging. Today, we're excited to introduce FlexibleWrap, a Flutter package that simplifies the process of arranging widgets in a flexible wrap layout. Let’s dive into its features and how you can get started.
FlexibleWrap Demo.

What is FlexibleWrap?

FlexibleWrap is designed to help developers create layouts where widgets can automatically wrap onto the next line based on the available space. This is particularly useful for designing interfaces similar to a shopping cart or a list of cards, where the arrangement can change depending on the screen size.

Key Features

Dynamic Wrapping: Automatically wraps widgets onto the next line based on the available space, ensuring a seamless user experience across devices.
Flexible Spacing: Customize the spacing between items to achieve your desired visual layout, enhancing the overall look of your application.
Expanded Items: Supports expanding items to fill the available space on the row, maintaining a consistent and appealing layout.
Customization Options: The package allows you to specify one row behavior using isOneRowExpanded, giving you greater control over your layout.

Getting Started

To begin using FlexibleWrap in your Flutter application, follow these simple steps:

Add the Dependency: Open your pubspec.yaml file and add FlexibleWrap under dependencies:

   dependencies:
     flexible_wrap: ^1.0.2

Import the Package: Import FlexibleWrap into your Dart file:

   import 'package:flexible_wrap/flexible_wrap.dart';

Basic Usage: Here’s a simple example of how to implement FlexibleWrap in your widget tree:

   FlexibleWrap(
     isOneRowExpanded: true,
     spacing: 12.0,
     children: List.generate(3, (int index) {
       return Padding(
         padding: EdgeInsets.all(8.0),
         child: Container(
           height: 100,
           width: 300,
           decoration: BoxDecoration(
               color: Colors.blue,
               borderRadius: BorderRadius.circular(8.0)),
           child: const Center(
             child: ListTile(
               title: Text(
                 "Lorem Ipsum is simply dummy text",
                 style: TextStyle(color: Colors.white),
                 overflow: TextOverflow.ellipsis,
               ),
               subtitle: Text(
                 "Lorem Ipsum has been the industry's standard",
                 style: TextStyle(color: Colors.white),
                 overflow: TextOverflow.ellipsis,
               ),
               leading: Icon(
                 Icons.insert_emoticon,
                 color: Colors.white,
                 size: 60.0,
               ),
               trailing: Icon(
                 Icons.favorite,
                 color: Colors.white,
               ),
             ),
           ),
         ),
       );
     }).toList(),
   )

Conclusion

With FlexibleWrap, you can easily create responsive and visually appealing layouts in your Flutter applications. It’s a powerful tool to help you manage space efficiently and enhance your UI design.

Feel free to contribute to the project or report any issues on GitHub. Happy coding!

For further details, visit the FlexibleWrap package page.

Customizing Django Admin: A Comprehensive Guide to Overriding Admin Methods

CHAHBOUN Mohammed — Sat, 09 Mar 2024 20:24:53 +0000

In the world of web development, Django stands out as a powerful and flexible framework that simplifies the process of building complex web applications. One of the key features of Django is its built-in admin interface, which provides a ready-to-use interface for managing the data in your application. However, the default admin interface might not always meet the specific needs of your project. This is where the ability to override methods in the Admin class comes into play. In this article, we will explore some of the most commonly overridden methods in the Admin class, providing you with the tools to customize the Django admin interface to fit your project's requirements.

Understanding the Admin Class

The Admin class in Django is a subclass of ModelAdmin, which is designed to provide a wide range of methods that can be overridden to customize the behavior of the admin interface for a specific model. These methods allow you to tailor the admin interface to your needs, from the form fields displayed to the actions available to the user.
Common Methods to Override

1. get_form
This method allows you to customize the form used in the admin interface for a specific model. You can use it to add or remove fields, change field types, or add custom validation.

2. get_queryset
This method allows you to customize the queryset used to retrieve objects for the admin interface. You can use it to filter the objects that are displayed in the admin interface based on certain conditions.

3. get_list_display
This method allows you to customize the fields that are displayed in the list view of the admin interface. You can use it to change the order of fields, add custom fields, or remove fields from the list view.

4. get_list_filter
This method allows you to customize the filters that are available in the list view of the admin interface. You can use it to add or remove filters based on the fields of your model.

5. get_search_fields
This method allows you to customize the fields that are searchable from the search box in the list view of the admin interface. You can use it to add or remove fields from the search functionality.

6. get_actions
This method allows you to customize the actions that are available in the list view of the admin interface. You can use it to add custom actions that can be applied to multiple objects at once.

7. save_model
This method is called when an object is saved from the admin interface. You can override it to add custom save logic, such as logging changes or updating related objects.

8. delete_model
This method is called when an object is deleted from the admin interface. You can override it to add custom delete logic, such as cascading deletes or logging deletions.

9. has_add_permission, has_change_permission, has_delete_permission, has_view_permission
These methods allow you to customize the permissions for adding, changing, deleting, and viewing objects in the admin interface. You can use them to implement custom permission logic based on the user or the object.

10. get_readonly_fields
This method allows you to specify fields that should be read-only in the admin interface. You can use it to prevent certain fields from being edited.
Implementing Custom Admin Methods
To implement custom admin methods, you need to create a subclass of ModelAdmin and override the methods you're interested in. Then, register your model with the custom admin class using admin.site.register. Here's an example of how you might override some of these methods in a custom Admin class for a model named MyModel:

from django.contrib import admin
from .models import MyModel

class MyModelAdmin(admin.ModelAdmin):
    # Customize the form used in the admin interface
    def get_form(self, request, obj=None, **kwargs):
        form = super().get_form(request, obj, **kwargs)
        # Customize the form here
        return form
    # Customize the queryset used to retrieve objects
    def get_queryset(self, request):
        queryset = super().get_queryset(request)
        # Customize the queryset here
        return queryset
    # Customize the fields displayed in the list view
    def get_list_display(self, request):
        list_display = super().get_list_display(request)
        # Customize the list display here
        return list_display
    # Customize the filters available in the list view
    def get_list_filter(self, request):
        list_filter = super().get_list_filter(request)
        # Customize the list filter here
        return list_filter
    # Customize the fields that are searchable
    def get_search_fields(self, request):
        search_fields = super().get_search_fields(request)
        # Customize the search fields here
        return search_fields
    # Customize the actions available
    def get_actions(self, request):
        actions = super().get_actions(request)
        # Customize the actions here
        return actions
    # Custom save logic
    def save_model(self, request, obj, form, change):
        # Custom save logic here
        super().save_model(request, obj, form, change)
    # Custom delete logic
    def delete_model(self, request, obj):
        # Custom delete logic here
        super().delete_model(request, obj)
    # Custom permission logic
    def has_add_permission(self, request):
        # Custom permission logic here
        return super().has_add_permission(request)
    # Custom read-only fields
    def get_readonly_fields(self, request, obj=None):
        readonly_fields = super().get_readonly_fields(request, obj)
        # Customize the read-only fields here
        return readonly_fields
# Register the custom admin class with the model
admin.site.register(MyModel, MyModelAdmin)

This example demonstrates how to override some of the most commonly used methods in the Admin class. You can customize these methods further based on your specific requirements.

Conclusion

Customizing the Django admin interface is a powerful way to tailor the admin experience to your project's needs. By overriding methods in the Admin class, you can add custom functionality, enforce specific permissions, and ensure that the admin interface is both user-friendly and secure. Whether you're adding custom actions, filtering objects, or customizing the form fields, the flexibility of the Django admin interface allows you to create a powerful and efficient admin experience for your application.

Enhancing Responsive Flutter App Development

CHAHBOUN Mohammed — Mon, 26 Feb 2024 14:46:56 +0000

The responsive template i have created for Flutter apps is designed to provide a flexible and dynamic user interface that adapts seamlessly to different screen sizes. It achieves this by employing a concept called UIConfigurations, which manages the configuration settings for various widgets based on the available screen space.
UIConfigurations acts as a central repository for storing and organizing the configurations of individual widgets or entire screens. Each configuration item within UIConfigurations represents a specific widget or screen and contains the necessary settings and properties required to adjust its appearance and behavior based on the screen size.
By utilizing UIConfigurations, your template allows developers to define different layouts, styles, and interactions for widgets and screens depending on the available screen real estate. This ensures that the app’s user interface remains consistent and optimized across a wide range of devices, including smartphones, tablets, and desktops.
The flexibility provided by UIConfigurations enables developers to create responsive Flutter apps without having to manually handle each individual widget’s behavior for different screen sizes. Instead, they can rely on the predefined configurations within UIConfigurations, which can be easily accessed and applied to the corresponding widgets or screens.
Overall, your responsive template for Flutter apps, powered by UIConfigurations, simplifies the development process and enhances the user experience by automatically adjusting the app’s UI elements to fit the screen size, resulting in a visually appealing and user-friendly interface on any device.
https://github.com/bixat/flutter_responsive_template
Getting Started
And you can use ui configuration like this:

import 'package:flutter/material.dart';
import 'package:responsive_template/constants/styles.dart';
import 'package:responsive_template/responsiveness/extensions.dart';
import 'package:responsive_template/ui/home/widgets/body.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final config = context.homeConfig;
    return Scaffold(
        backgroundColor: config.color,
        body: Center(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  config.screen,
                  style: context.theme.textTheme.displayMedium!
                      .copyWith(fontSize: FontSizes.s48),
                ),
              ),
              const Expanded(child: Body())
            ],
          ),
        ));
  }
}

Introducing GitHub Snitch: Automate Bug Reporting and Issue Management

CHAHBOUN Mohammed — Sat, 17 Feb 2024 16:49:57 +0000

GitHub Snitch is a versatile Flutter package that simplifies the process of reporting bugs and managing issues on GitHub. With its comprehensive set of features, GitHub Snitch empowers developers to automate bug reporting, submit comments on existing issues, and efficiently handle error tracking. In this article, we will explore the key features of GitHub Snitch, its usage, and how it can enhance your GitHub workflow.

Features:

GitHub Snitch offers a range of powerful features that streamline bug reporting and issue management. Let's take a closer look at what GitHub Snitch has to offer:

Automated Bug Reporting:

GitHub Snitch enables developers to automatically report bugs on GitHub issues. By calling the listenToExceptions method in the main function, developers can configure GitHub Snitch to create issues with specific labels, assignees, and milestones. This feature saves valuable time and ensures efficient bug tracking.

Manual Bug Reporting:

In addition to automated bug reporting, GitHub Snitch also allows developers to manually report bugs using the report method. This method provides flexibility, enabling developers to report issues with customized details, including titles, descriptions, screenshots, labels, assignees, and milestones.

Offline Support:

GitHub Snitch is equipped with offline support, allowing developers to save bug reports locally and submit them later when a connection becomes available. This feature ensures that no bug report is lost even in challenging network conditions.

Comprehensive Issue Management:

GitHub Snitch provides seamless integration with GitHub's issue management system. Developers can retrieve reported issues along with all associated comments, allowing for efficient collaboration and tracking of issue resolutions. GitHub Snitch also enables users to submit comments on existing issues, facilitating effective communication between developers and repository owners.

Enhanced Issue Clarification:

GitHub Snitch allows developers to include screenshots in their bug reports, providing better issue clarification. By attaching relevant screenshots, developers can enhance the understanding of the reported issues, leading to quicker resolutions.

Duplicate Issue Handling:

GitHub Snitch intelligently handles duplicate bug reports by automatically adding a comment (+1) to the duplicate issues. This feature helps consolidate duplicated reports, reducing redundancy and improving issue management efficiency.

Upcoming Features:

GitHub Snitch is continuously evolving to meet the needs of developers. Some of the upcoming features in the pipeline include:

Notifications for Chat:
GitHub Snitch plans to introduce support for notifications, enabling developers to engage in real-time conversations with users and repository owners. This feature will facilitate efficient communication and collaboration within the GitHub ecosystem.

Tips for Effective Usage:

To maximize the benefits of GitHub Snitch, here are a few tips to keep in mind:

Use Empty Repositories for Bug Reporting:

It is recommended to use empty repositories dedicated to bug reporting. This practice allows developers to transfer important items from the empty repository to the main repository seamlessly.

Utilize External Image Hosting for Screenshots:

When including screenshots in issue comments, it is advisable to use external image hosting services. Uploading screenshots to external websites and adding the image links to comments ensures smooth rendering and avoids any limitations associated with using screenshots directly from GitHub repositories.

Leverage Ready Screens or Customize Your Own:

GitHub Snitch provides flexible options for reporting bugs and issues. Developers can choose to utilize ready-made screens by calling GhSnitch.openReportScreen(context), or they can build their own screens using methods like GhSnitch.report and GhSnitch.submitComment. Tailor the bug reporting process to suit your specific requirements.

Getting Started:

To begin using GitHub Snitch, follow these steps:

Install the GitHub Snitch package.
Generate a fine-grained personal access token with the necessary repository permissions, including "Issues Access: Read and write".
Store the sensitive keys, such as the personal access token, owner username, and repository name, using environment variables.
Usage:
To integrate GitHub Snitch into your application, follow these steps:
Pass the necessary keys as --dart-define parameters when running or building the app.
Initialize GitHub Snitch using the environment keys.
Utilize GitHub Snitch's methods, such as report and listenToExceptions, to report bugs, listen to exceptions, and manage issues.

GitHub Snitch is a powerful Flutter package that simplifies bug reporting and issue management on GitHub. By automating bug reports, facilitating issue comments, and offering comprehensive issue management capabilities, GitHub Snitch empowers developers to streamline their workflow and enhance collaboration. If you're looking to improve your GitHub workflow, GitHub Snitch is an excellent tool to consider. Start leveraging GitHub Snitch today and experience efficient and effective bug reporting and issue management on GitHub.

Guide to Using Any Programming Language in GitHub Actions

CHAHBOUN Mohammed — Thu, 20 Oct 2022 18:49:59 +0000

Cover: Captured from flutter CI/CD Template (not published
yet)

Many times we need to process some data before using it in our Github workflows, but we don't find the appropriate action.
For that, I did some research on how we can use any programming language to process our data easily & use it on Github workflow
I found this example on Github Doc :

As you see we can save some output on GITHUB_OUTPUT & use it later in
GITHUB_OUTPUT. It's the path of a temporary file generated by the runner.
Now we will use some programming language (Dart for an example) to process some data & use it on our Github workflow
We will use an example for Bump Flutter app version using this Fastlane plugin based on PR's labels
Now this is the dart script :

We process input data by removing all labels except major, minor & patch, and split it by (,)
Then in line 16 we get environment variables & select GITHUB_OUTPUT in line 17 to get the path of the temporary file generated by the runner
After it, we open the file by Dart & write our output ({name}={value}) that we need in Github workflow
Now we will create our Github workflow & use the Dart script onto it

First, we need to use a setup for Dart lang action (line 18) (or any language used).
Then on line 21 we run the Dart script and pass PR labels as args & this script will return just the labels we need for the bump version (patch,minor, major) & in line 37 we use (env.parts) as the output of the script to use it as an input for the bump version by Fastlane plugin
Now when merging PR. The workflow will get labels & remove unused labels by Dart script & pass the output to Fastlane plugin to bump the version & push a new commit
You can use these steps on any programming language