Forem: Sm0ke

Dynamic Data Tables Concept in Flask

Sm0ke — Sat, 22 Feb 2025 16:06:21 +0000

This article explains the Dynamic Data Table Pattern and how it can be used to manage information with ease via pagination, search, and filters without any coding effort. For newcomers, Dynamic Programming is a method for solving complex problems by breaking them down into simpler subproblems.

Free Sample that incorporates the concept: Flask Datta Able (contains DEMO Link)

Let's see how the dynamic programming concept applies to Dynamic Data Tables, which is the solution we're trying to achieve in this article.

Data Tables Pattern

Data Tables represent a structured way of organizing and displaying data in rows and columns with built-in functionality for managing large datasets. Think of it as an enhanced table that provides:

Pagination

Breaking down large datasets into smaller, manageable pages
Allows users to navigate through data without loading everything at once
Typically shows X records per page (e.g., 10, 25, 50 entries)

Data Organization

Rows represent individual records
Columns represent attributes or fields
Headers define the structure and can enable sorting

Client-Side Processing

Suitable for small datasets
All records are pulled once on the client side
Data is processed locally in the browser or phone application

Server-Side processing

Database queries fetch only the required records
Reduces memory usage and improves performance
Handles large datasets efficiently

The goal of our research is to provide the above features out of the box using a minimal configuration and only the dynamic features of Python that can detect and manipulate data at runtime. Let's break down the task into smaller pieces and start applying the dynamic programming principles to our specific use case.

Configuration

Users should be able to activate the dynamic pattern for any model using a simple and intuitive syntax. For this, we can use a map that uses the URL as the key, and the target model as value.

DYNAMIC_DATATB = {
        "products": "apps.models.Product"
}

The above definition will use the routing "products" to build the dynamic table for the Product Model defined in the apps/models.py

The path for the model is now used to load the model class and analyze the fields and the type.

Loaded Model Definition

The model can be analyzed using the importlib.import_module and getattr helpers as showcased below:

def name_to_class(name: str):
        module_name = '.'.join(name.split('.')[:-1])
        class_name = name.split('.')[-1] 

        module = importlib.import_module(module_name)
        return getattr(module, class_name)

If we call the name_to_class() with the apps.models.Product input, we should get the Product Model Class returned by the getattr() helper.

Class/Model Fields

Having the class is the first step. Next is to get all fields, the associated types, and also all the foreign keys mapped to external types we don't know yet.

The ordinary fields can be pulled from the class definition using this code:

db_fields = [field.name for field in aModelClass.__table__.columns if not field.foreign_keys]

The above snippet will return all fields defined using ordinary types like Integer, String, DateTime, and Text.

For the Foreign key discovery, the code needs to use the model metadata that saves the distant relationships with other Models. The code that provides all associated FKs is the one below:

def get_model_fk_values(aModelClass):
    fk_values = {} 
    current_table_name = aModelClass.__tablename__
    for relationship in aModelClass.__mapper__.relationships:
        if relationship.direction.name == 'MANYTOONE':
            related_model = relationship.mapper.class_
            foreign_key_column = list(relationship.local_columns)[0]
            referenced_table_name = list(foreign_key_column.foreign_keys)[0].column.table.name

            if referenced_table_name != current_table_name:
                field_name = relationship.key
                related_instances = related_model.query.all()
                fk_values[field_name] = related_instances

    return fk_values

After solving the FKs case, the next challenge is to detect the ENUMS used by the model for mapping the information into combos. Without this detection, the ENUMS will be mapped to input fields and we might have issues during creation or update.

choices_dict = {}
for column in aModelClass.__table__.columns:
    if isinstance(column.type, db.Enum):
        choices_dict[column.name] = [(choice.name, choice.value) for choice in column.type.enum_class]

The above code snippet iterates on the model fields and saves all values for each field detected as ENUM.

At this point, we've achieved the following:

The model is automatically discovered using the URI segment and the configuration mapping
Fields information (name and type) covers all cases: simple types, ENUMS, foreign keys
The information is injected into the Jinja files to be presented to the user

Dynamic Table View

The page provided by the dynamic data table provides the usual controls like search, show hide columns control, filters and export in CSV format.

The item creation page is displayed with as below:

For more inputs regarding the concept feel free to contact the team in support or simply download and inspect the code in your local system:

Dynamic Data Tables Sample - Flask Datta Able
Support (Discord): https://discord.gg/fZC6hup

Best NextJS Blog Starters - Please Suggest

Sm0ke — Wed, 05 Feb 2025 20:28:56 +0000

Hello devs,

I'm looking for a good NextJs Blog Started template, and most Vercel templates seem connected to headless content platforms like Sanity, Prismic, etc.

I prefer a standalone one that translates MD/MDX, and it would be nice to be styled with Tailwind/Flowbite.

Thank you!

Build Dynamic Services using Django | VIDEO

Sm0ke — Tue, 15 Oct 2024 11:06:22 +0000

Hello! This video material explains how to build dynamic services using Django, CSV Files, and Dynamic Django (commercial starter). Thanks for watching!

Here is the video transcript.

Dynamic Django - general presentation
Install the tool
Convert CSV file to a Django Model
Migrate the Database and apply changes
Load the information in DB ~= 1k rows
Enable the Dynamic DataTable module
Enable the Dynamic API module
Present the Dynamic Charts page for the Sales Model

The starter will be updated with more features and also the documentation will provide more insights and ways of using the Dynamic Django starter. For more resources, feel free to access:

The New AppSeed platform (open-source)
Ask for support via email or Discord (2k+ members)

Process big CSV Files (local or remote) in Django/Python

Sm0ke — Sun, 08 Sep 2024 09:13:07 +0000

Hello coders! This article presents a tool incorporated in the Django AdminLTE, a premium starter crafted by AppSeed.

Here is the transcript of the video material:

Inspect the tool in the console by printing all available options
Execute the tool using a distant CSV file with ~800 rows: Titanic.csv
Inspect the generated code that mirrors the CSV structure: Model & Form
Load the information from the CSV in the Database in less than 30 seconds
Manage the information (search, filter, edit) using the Dynamic DataTable - module (also included in the product)

For the full list of features or support feel free to access the links:

👉 Django AdminLTE — official product page
👉 Get Support via email & Discord

Generate and Deploy Django Starters | OpenSource Tool

Sm0ke — Tue, 03 Sep 2024 08:34:30 +0000

Hello Coders!
This video explains how to use the App-Generator platform to build our own Django Starter and later deploy it LIVE on different deployment platforms.

Here is the transcript of the video material:

Short presentation of AppSeed and the new Codebase
How to start AppSeed in your local workstation
Generate a project template
Generate a new Django starter based on selected options
Upload the code to GitHub
Deploy LIVE the generated code on Render

In the end, the project is deployed LIVE and we can create users and access the private pages.

For support, feel free to join AppSeed and let us know how we can improve the service.

https://app-generator.dev/

CSV - Process Local & Remote Files in Python

Sm0ke — Tue, 27 Aug 2024 12:07:58 +0000

Hello coders!

This article presents an open-source tool that is able to process local and remote CSV files, load and print the information, and later map the column to Django Types. Processing CSV files is usually required when the dataset becomes large, custom reports are unsupported by Excel or full data manipulation via data tables, and API is needed.
The current list of features can be further extended to map CSV files to database tables/models and fully generate dashboard web apps.

Source Code: CSV Processor part of the AppSeed Service (open-source)

Before we start explaining the code and the usage, let's summarize the tool features:

load local and remote files
print values
print detected column types
print the mapping types to a Django Model

The CSV parser can be executed via the CLI after cloning the project sources and making it usable as explained in the README. Once the installation is completed, we can call the CVS processor using this one-liner:

$ python manage.py tool_inspect_source -f media/tool_inspect/csv_inspect.json

The tool performs the following tasks:

validate the input
locate the CSV file (exit with error if not found)
loads the information and detects the column types
detects the Django column type
print the first 10 rows

The same can be applied to local and remote files. For instance, we can analyze the notorious Titanic.cvs by running this one-liner:

$ python manage.py tool_inspect_source -f media/tool_inspect/csv_inspect_distant.json

# Output
> Processing .\media\tool_inspect\csv_inspect_distant.json
    |-- file: https://raw.githubusercontent.com/datasciencedojo/datasets/master/titanic.csv
    |-- type: csv


Field        CSV Type    Django Types
-----------  ----------  ------------------------------------------
PassengerId  int64       models.IntegerField(blank=True, null=True)
Survived     int64       models.IntegerField(blank=True, null=True)
Pclass       int64       models.IntegerField(blank=True, null=True)
Name         object      models.TextField(blank=True, null=True)
Sex          object      models.TextField(blank=True, null=True)
Age          float64     models.FloatField(blank=True, null=True)
SibSp        int64       models.IntegerField(blank=True, null=True)
Parch        int64       models.IntegerField(blank=True, null=True)
Ticket       object      models.TextField(blank=True, null=True)
Fare         float64     models.FloatField(blank=True, null=True)
Cabin        object      models.TextField(blank=True, null=True)
Embarked     object      models.TextField(blank=True, null=True)


[1] - PassengerId,Survived,Pclass,Name,Sex,Age,SibSp,Parch,Ticket,Fare,Cabin,Embarked
[2] - 1,0,3,"Braund, Mr. Owen Harris",male,22,1,0,A/5 21171,7.25,,S
[3] - 2,1,1,"Cumings, Mrs. John Bradley (Florence Briggs Thayer)",female,38,1,0,PC 17599,71.2833,C85,C
[4] - 3,1,3,"Heikkinen, Miss. Laina",female,26,0,0,STON/O2. 3101282,7.925,,S
[5] - 4,1,1,"Futrelle, Mrs. Jacques Heath (Lily May Peel)",female,35,1,0,113803,53.1,C123,S
[6] - 5,0,3,"Allen, Mr. William Henry",male,35,0,0,373450,8.05,,S
[7] - 6,0,3,"Moran, Mr. James",male,,0,0,330877,8.4583,,Q
[8] - 7,0,1,"McCarthy, Mr. Timothy J",male,54,0,0,17463,51.8625,E46,S
[9] - 8,0,3,"Palsson, Master. Gosta Leonard",male,2,3,1,349909,21.075,,S
[10] - 9,1,3,"Johnson, Mrs. Oscar W (Elisabeth Vilhelmina Berg)",female,27,0,2,347742,11.1333,,S
... (truncated output)

Here are the relevant parts of the tool:

Loads the information and prior checks the source if is local or remote

    print( '> Processing ' + ARG_JSON )
    print( '    |-- file: ' + JSON_DATA['source'] )
    print( '    |-- type: ' + JSON_DATA['type'  ] )
    print( '\n')

    tmp_file_path = None 

    if 'http' in JSON_DATA['source']:
        url = JSON_DATA['source']
        r = requests.get(url)
        tmp_file = h_random_ascii( 8 ) + '.csv'
        tmp_file_path = os.path.join( DIR_TMP, tmp_file )
        if not file_write(tmp_file_path, r.text ):
            return
        JSON_DATA['source'] = tmp_file_path
    else:    
        if not file_exists( JSON_DATA['source'] ):
            print( ' > Err loading SOURCE: ' + JSON_DATA['source'] )            
            return

    csv_types = parse_csv( JSON_DATA['source'] )

Analyze the headers and map the detected types to Django Types.

For the tabular view, Tabulate Library is used:

    csv_types = parse_csv( JSON_DATA['source'] )

    #pprint.pp ( csv_types )

    table_headers = ['Field', 'CSV Type', 'Django Types']
    table_rows    = []

    for t in csv_types:
        t_type        = csv_types[t]['type']
        t_type_django = django_fields[ t_type ]
        table_rows.append( [t, t_type, t_type_django] )

    print(tabulate(table_rows, table_headers))

The last step is to Print the CSV data:

    csv_data = load_csv_data( JSON_DATA['source'] )

    idx = 0
    for l in csv_data:
        idx += 1
        print( '['+str(idx)+'] - ' + str(l) )  

        # Truncate output ..
        if idx == 10:
            print( ' ... (truncated output) ' ) 
            break

At this point, the code provides us access to the CSV information, data types, and the correspondent data types for Django. The mapping can be easily extended for any framework like Flask, Express, or NextJS.

The type mapping for Django is this one:

# Pandas Type
django_fields = {
    'int'           : 'models.IntegerField(blank=True, null=True)',
    'integer'       : 'models.IntegerField(blank=True, null=True)',
    'string'        : "models.TextField(blank=True, null=True)",
    'string_unique' : "models.TextField(blank=True, null=False, unique=True)",
    'object'        : "models.TextField(blank=True, null=True)",
    'object_unique' : "models.TextField(blank=True, null=False, unique=True)",
    'int64'         : 'models.IntegerField(blank=True, null=True)',
    'float64'       : 'models.FloatField(blank=True, null=True)',
    'bool'          : 'models.BooleanField(null=True)',
}

This tool is under active development and here are the next steps:

connect the tool to more data sources like remote/local databases (SQLite, MySql, PgSQL), JSON
Generate Models for any framework: FastAPI, Flask, Express, NextJS
Generate secure APIs on top
Generate server-side paginated DataTables using Tailwind/Bootstrap for styling

Thanks for reading!

For those interested in contributing, feel free to join the new AppSeed platform and connect with the community on Discord:

AppSeed - open-source platform for developers
AppSeed Community - 3k+ Discord members

Django - Adding Hot Reload (with sample)

Sm0ke — Sun, 14 Apr 2024 09:09:42 +0000

Hello Coders! Implementing hot reload for templates and static files in Django can greatly improve your development workflow. You can take a few different approaches to achieve hot reload in Django, and this article presents the most simple ones. To make this article more useful, in the end, an open-source sample is provided. Thanks for reading!

1# - Watchgod Utility

One popular method is to use the django-extensions package along with watchgod for auto-reloading.

$ pip install django-extensions

Then, you can add django_extensions to your INSTALLED_APPS in your Django settings file (settings.py).

For hot reloading of templates, you can use the runserver_plus command provided by django-extensions, which automatically reloads templates when they change.

$ python manage.py runserver_plus

For static files, you can use watchmedo (a part of watchgod) to monitor changes and trigger reloads:

$ watchmedo shell-command --patterns="*.css;*.js;*.html" --command="python manage.py collectstatic --noinput" --recursive static

This command watches for changes in your static files directory and triggers collectstatic whenever a change is detected. Combined with Django's built-in development server, this provides a pretty seamless hot reload experience for both templates and static files.

2# - Django-Browser-Reload

This open-source library can be integrated with any Django project with only a few lines of code as stated on the official PyPi page:

Install the library using PIP or any other package manager

$ pip install django-browser-reload

Make sure you have "django.contrib.staticfiles" in your INSTALLED_APPS section. Besides this, a new application should be added:

INSTALLED_APPS = [
    ...,
    "django_browser_reload", # <-- NEW
    ...,
]

The next step is to update the project routing rules to include the library URLs:

from django.urls import include, path

urlpatterns = [
    ...,
    path("__reload__/", include("django_browser_reload.urls")),
]

Updating the middleware is the last configuration step required for this integration.

MIDDLEWARE = [
    # ...
    "django_browser_reload.middleware.BrowserReloadMiddleware",
    # ...
]

The middleware automatically inserts the required script tag on HTML responses before the BODY tag when DEBUG is True.

If all the above steps were followed, our Django project should support the HOT reload feature, and all the changes we made to the templates and static files are automatically synced with the browser.

Free Sample with HOT Reload

For those in a rush for a sample, Rocket Django, an open-source Tailwind-based starter provides already the integration for Django-Browser-Reload Library:

dependency added in the requirements.txt file
settings file [ INSTALLED_APPS and MIDDLEWARE sections ]
routing [ "django_browser_reload.urls" included ]

Testing the HOT Reload

Once we download the sources of Rocket Django from the official product page, we need to follow the usual set-up steps for every Django project:

Open project using VsCode or any other code editor
Install dependencies
Migrate database
Install Tailwind dependencies and watch the CSS files using the command:

$ npx tailwindcss -i ./static/assets/style.css -o ./static/dist/css/output.css --watch

Start the Django Development server

$ python manage.py runserver

At this point, all changes made on the Python files, templates [ HTML ], and assets [ CSS, JS ] are automatically reflected in the browser:

Conclusion

Using the right tooling (hot reload for instance) combined with a good development strategy might help us be more productive and deliver the projects with better quality.

Thanks for reading! For more resources, feel free to access:

👉 AppSeed, a platform already used by 8k registered developers
👉 Read more about Django Popular Commands (a curated list)
👉 Build apps with Django App Generator (free service)

Python - How "Import" Directive Works

Sm0ke — Tue, 09 Apr 2024 10:52:57 +0000

Hello Coders! This article explains the "import" directive in Python. How it works and how can be used in different contexts. The import directive in Python is used to bring modules or packages into your current namespace, allowing you to use the functionality defined within them. Thanks for reading!

Let's break down how it works in detail:

✅ Basic Importing

You can import a module or package in Python using the import keyword followed by the name of the module or package:

import module_name

import package_name

✅ Using Imported Items

Once imported, you can use functions, classes, or variables defined in the module or package by prefixing them with the module or package name:

module_name.function_name()

package_name.module_name.function_name()

✅ Importing Specific Items

You can import specific items from a module instead of the entire module using the from keyword:

from module_name import function_name

You can also import multiple items from a module using comma separation:

from module_name import function_name1, function_name2

✅ Aliasing

You can provide an alias to imported modules or items using the as keyword:

import module_name as alias_name

from module_name import function_name as alias_name

✅ Importing All Items

You can import all items from a module using the * wildcard:

from module_name import *

However, it's generally not recommended because it can lead to namespace pollution and makes it unclear where each item is coming from, and also imports items unused in the current context.

✅ Importing Packages

If you want to import a module from a package, you use dot notation:

import package_name.module_name

from package_name import module_name

✅ Execution of Import Statements

Import statements are executed just like any other statements, and they are typically executed only once per interpreter session. After a module is imported, it's cached in sys.modules, so subsequent imports of the same module do not cause it to be re-executed.

✅ Conclusion

In summary, the import directive in Python is a powerful tool for bringing in functionality from modules and packages. It allows you to organize your code into reusable and modular components, making it easier to manage and maintain large codebases. Understanding how to use import effectively is essential for writing clean and maintainable Python code.

Thanks for reading! For more resources, feel free to access:

👉 AppSeed, a platform already used by 8k registered developers
👉 Build apps with Django App Generator (free service)

Simple Tailwind & Stripe eCommerce

Sm0ke — Mon, 01 Apr 2024 16:50:44 +0000

Hello Coders! This article presents Rocket eCommerce, a simple yet powerful CMS Starter, that aims to help small businesses sell physical and digital products online with minimal effort and costs using Stripe as the payment processor and Tailwind for styling.

👉 LIVE Demo: Rocket eCommerce

NOTE: The source code can be downloaded from GitHub (public repository) for those interested in trying the product before buying.

The advantages of using this product compared with the classic ones like Shopify, WooCommerce or Medusa are simplicity, low costs, and the possibility to extend the core features via a custom development effort that any developer can do.

How it works

The source code (published on GitHub) needs to be connected to the Stripe Service via the API keys and the first step is to import the products using the ADMIN account:

Each Stripe product can be mapped to a local product and published on the website by adding local properties, more images, a complete description, and tags.

Besides the MAIN image pulled from Stripe, the user can upload other 5 images and also edit each one using a simple image editor:

The ADMIN is also able to manage all users and reset their passwords using a simple UI as shown below:

Site Settings

Being ADMIN, you can also customize other things like site name, and copyright, both visible in the page titles and footer.

The social links (Facebook, Instagram, and Twitter) once edited, are visible in the website footer:

The effect of these settings is visible in the service footer:

The content pages like Terms & Conditions, Privacy, and Help are editable using a visual HTML editor:

Product Screens

Rocket eCommerce - Search Page

Rocket eCommerce - Checkout Page

The payment flow can be tested by using a Stripe Test Card information 4242 4242 4242 4242 as shown below.

The product is continuously updated based on the user's feedback and issues reported on GitHub.

Thanks for reading! For more starters and support, feel free to access:

👉 Access AppSeed for more starters and support
👉 Build apps with Django App Generator (free service)

Managing the UI in Django

Sm0ke — Mon, 09 Oct 2023 14:00:00 +0000

Hello Coders!

This article explains How to integrate a new UI into a Django project (new or legacy). As we all know already, the UI is an important part of any project, being the only layer visible to the users. Here are a few solutions to successfully code the UI for a Django project:

✅ Use a components library and code the UI from scratch
✅ Use existing HTML Design, process the pages and the static assets
✅ Use an existing UI library styled with a design closer to the product's visual identity

Let's say a few words for each option.

✅ #1 - Components library

This approach might be the best in the long run but requires design and Javascript, two skills that sometimes are not so great for backend developers.

The integration of a component library can be done using a minimal tooling integration that usually involves NodeJS and Webpack.

Here are a few Tailwind Component libraries that provide integration guides:

👉 Tailwind CSS Django - Flowbite
👉 Tailwind Elements Django integration

A fully integrated Django & Tailwind Sample can be found on GitHub along with other features like a dashboard layout, Celery Integration, and Docker support.

👉 Rocket Django - open-source starter

✅ #2 - Use an Existing Design

This solution also might be a good solution but requires processing the pages, extracting the components, isolating the assets, and later ressemble all in Django.

For those with time and knowledge, here are some really nice and actively supported kits styled with Bootstrap and Tailwind:

👉 Material Kit Bootstrap 5 - open-source design
👉 Material Dashboard - free Bootstrap 5 Design
👉 Modernize, a really nice design from AdminMart

Once the sources are downloaded, the developer needs to extract the components, build the master pages, and process the assets path using the "static" tag. This Operation might be time-costly but once finished, the design can be used for multiple projects in the long run.

✅ #3 - Using UI Libraries

This section will mention a few Django UI libraries usable via PIP and a minimal configuration effort. Here are the benefits of this solution:

The UI is already compatible with Django
Easy access to the updates
Some of them provide also the style for the ADMIN section reserved for superusers
The support, in case of any issues, is there

Let's start with a popular sample built in Bootstrap 5: Volt Dashboard. The library sources are saved on GitHub and the installation steps are explained in the README file.

The first step is to install the library via PIP or any other package manager:

$ pip install django-admin-volt

Django configuration needs to be updated, especially the INSTALLED_APPS section as shown below.

    INSTALLED_APPS = (
        ...
        'admin_volt.apps.AdminVoltConfig',  # <-- NEW
        'django.contrib.admin',
    )

All the routes provided by the library need also to be integrated into the core project routing, as shown below.

    from django.urls import path, include

    urlpatterns = [
        ...
        path('', include('admin_volt.urls')),
    ]

With all the above changes made, our project should be already styled with VOLT Dashboard Design (admin section included).

With the design properly integrated, the developer might want to customize the pages and this can be easily done by using a local template and static directory where the default UI Library pages and assets are overwritten.

Django assists very well on this by searching the pages and the assets using this order:

Local scope, inside the current app
Project global scope, usually the root of the project
Virtual Environment, for assets and pages provided by the Library

If we decide at some point to customize the pages or an asset (CSS, image), all we need is to create a local version that respects the same path as provided in the library.

For instance, if we analyze the codebase of Volt UI Library, we should see this structure:

# This exists in ENV: LIB/admin_volt
< UI_LIBRARY_ROOT >                     
   |
   |-- templates/                    # Root Templates Folder 
   |    |          
   |    |-- accounts/       
   |    |    |-- sign-in.html        # Sign IN Page
   |    |    |-- sign-up.html        # Sign UP Page
   |    |
   |    |-- includes/       
   |    |    |-- footer.html         # Footer component
   |    |    |-- sidebar.html        # Sidebar component
   |    |    |-- navigation.html     # Navigation Bar
   |    |    |-- scripts.html        # Scripts Component
   |    |
   |    |-- layouts/       
   |    |    |-- base.html           # Masterpage
   |    |    |-- base-auth.html      # Masterpage for Auth Pages
   |    |
   |    |-- pages/       
   |         |-- index.html          # Index Page (presentation)
   |         |-- settings.html       # Settings  Page
   |         |-- dashboard.html      # Dashboard page
   |         |-- *.html              # All other pages
   |    
   |-- ******************************

When the project requires customization, we need to copy the original file that needs an update (from the virtual environment) and place it in the template folder using the same path.

For instance, if we want to customize the footer.html these are the steps:

Step 1: Create the templates DIRECTORY inside the home app
Step 2: Configure the project to use this new template directory core/settings.py TEMPLATES section
Step 3: Copy the footer.html from the original location (inside your ENV) and save it to the home/templates DIR
Source PATH: /LIB/admin_volt/includes/footer.html
Destination PATH: home/templates/includes/footer.html

To speed up all these steps, this sample codebase is already configured (Steps 1, and 2), and a custom footer can be found at this location:

home/templates/includes/custom_footer.html

By default, this file is unused because the theme expects footer.html (without the custom- prefix).

In order to use it, simply rename it to footer.html. Like this, the default version shipped in the library is ignored by Django.

In a similar way, all other files and components can be customized easily.

✅ More Django UI LIBs

Volt UI Library is just one of many open-source libraries we can use for free in our Django projects. Here are UI libraries actively supported and versioned:

👉 Django Soft UI Library

This UI library uses Soft UI Dashboard, an open-source Bootstrap 5 design from Creative-Tim.

Django Soft Dashboard - LIVE Demo
Django Soft Dashboard - the product that uses the UI

👉 Django UI Material Kit

This Freebie Bootstrap 5 Design System comes with prebuilt design blocks, so the development process is seamless, switching from our pages to the real website is very easy to be done.

Django Material Kit - LIVE Demo
Django Material Kit - the product that uses the UI

👉 Django UI Modernize

UI Library that integrates Modernize, an open-source Bootstrap 5 design from AdminMart. The product is designed to deliver the best possible user experience with highly customizable feature-rich pages. Modernize has an easy and intuitive responsive design whether it is viewed on retina screens or laptops.

Django Modernize - LIVE Demo
Django Modernize - the product that uses the UI

✅ In Summary

Styling a Django APP or a project is not an easy decision for sure, but these days we have plenty of options starting from free and open-source libraries up to PAID and corporate-grade designs with more components, pages, and fast support.

For more resources, feel free to access:

👉 Access AppSeed for more starters and support
👉 Deploy Projects on Aws, Azure, and DO via DeployPRO
👉 Create landing pages with Simpllo, an open-source site builder
👉 Build apps with Django App Generator (free service)

Tailwind & Django - Free Starter

Sm0ke — Wed, 04 Oct 2023 08:53:44 +0000

Hello Coders!

This article presents an open-source Tailwind & Django project styled with Flowbite, a popular UI Library built on top of Tailwind.

Rocket Django provides a minimal codebase, Tailwind-compatible tooling, Docker, and CI/CD support for Render. The product can be used to bootstrap any type of product on top of Django & Tailwind, two popular technologies for the modern web.

👉 Tailwind & Django Starter - LIVE Demo
👉 Tailwind & Django Starter - Source Code

The product can be used in a local environment if NodeJs, Python, and (optionally) Docker are already present and properly configured.

For those interested in compiling the product, here are the steps (manual setup):

✅ Clone/Download the sources

$ git clone https://github.com/app-generator/rocket-django.git
$ cd rocket-django

✅ Install Dependencies

$ virtualenv env
$ source env/bin/activate
$ pip install -r requirements.txt

✅ Install Tailwind/Flowbite (another terminal)

$ cd static
$ yarn  
$ npx tailwindcss -i ./src/input.css -o ./dist/css/output.css --watch

✅ Migrate Database

$ python manage.py makemigrations
$ python manage.py migrate

✅ Start the Django & Tailwind App

$ python manage.py createsuperuser # create the admin
$ python manage.py runserver       # start the project

At this point, we should see the dashboard view provided by the Flowbite dashboard.

Another way to start the product is to use the Docker Compose Script shipped with the sources. By navigating to the root of the source code, this is what we need to type in the terminal:

$ docker-compose up --build

For Docker execution, the app starts on localhost:5085

This simple starter also provides a starter page with a responsive navigation bar and a hero section.

✅ Resources

For more resources and support, follow up on the links & information presented in the following section.

👉 Access AppSeed for support and starters
👉 Free Django App Generator - A 2nd generation App Builder

✅ What is Tailwind

Tailwind CSS is a popular utility-first CSS framework used for building responsive and customizable web interfaces. It provides a set of pre-designed utility classes that you can apply directly to HTML elements to style and layout your web pages.

Tailwind CSS is known for its simplicity and flexibility, allowing developers to rapidly create modern and visually appealing user interfaces.

Utility-First

Tailwind CSS promotes a utility-first approach to styling, where you apply classes directly to HTML elements to define styles. These classes provide a wide range of styling options, such as colors, typography, spacing, and flexbox-based layouts.

Component-Oriented

Tailwind CSS can be used in conjunction with component-based frameworks or libraries like Vue.js or React. You can build reusable UI components and apply Tailwind classes to style them.

Plugins

Tailwind CSS supports plugins that add additional utility classes or functionality. This allows you to tailor the framework to your project's needs and integrate third-party plugins as well.

✅ What is Django

Django is a high-level, open-source web framework written in Python that enables developers to build web applications quickly and with a clean, pragmatic design.

It follows the "batteries-included" philosophy, providing a comprehensive set of tools and libraries that simplify common web development tasks, such as handling databases, managing user authentication, and generating HTML templates.

Django can be used to code simple websites, CMS (content management system), eCommerce Platforms, APIs, or as an interface to ML/AI systems.

Django 5 Release - Highlights & Free Sample

Sm0ke — Sun, 01 Oct 2023 13:31:45 +0000

Hello Coders!

As announced on the official Django site, the Django 5.0 Version is out. The changes provided in this version are listed below.

Curious minds and cutting-edge developers can test the new features by using the latest Django 5.x release:

$ pip install Django==5.0a1

In order to make this article more useful, here is an open-source Django Starter already updated to use django==5.0a1 version and deployed on Render via a CI/CD flow:

👉 Django v5.x Datta Able - Source Code
👉 Django v5.x Datta Able - LIVE Demo

✅ Python Compatibility

Django 5.x supports Python 3.10, 3.11, and 3.12. Please note the 4.2.x versions are the last to support Python 3.8 and 3.9.

✅ Facet filters in the admin

Facet counts are now shown for applied filters in the admin change list when toggled on via the UI. This behavior can be changed via the new ModelAdmin.show_facets attribute.

✅ Simplified templates for form field rendering

Django 5.x introduces two new concepts that simplify the rendering of the related elements of a Django form field such as its label, widget, help text, and errors.

"field group"
"field group templates"

Here is the official coding sample, provided by the RN:

<form>
...
<div>
  {{ form.name.as_field_group }}
  <div class="row">
    <div class="col">{{ form.email.as_field_group }}</div>
    <div class="col">{{ form.password.as_field_group }}</div>
  </div>
</div>
...
</form>

✅ Database-computed default values

The new field added, Field.db_default, parameter sets a database-computed default value.

Here is the official coding sample:

from django.db import models
from django.db.models.functions import Now, Pi


class MyModel(models.Model):
    age = models.IntegerField(db_default=18)
    created = models.DateTimeField(db_default=Now())
    circumference = models.FloatField(db_default=2 * Pi())

✅ Database generated model field

The new GeneratedField allows the creation of database-generated columns.

Here is the official coding sample:

from django.db import models
from django.db.models import F


class Square(models.Model):
    side = models.IntegerField()
    area = models.GeneratedField(expression=F("side") * F("side"), db_persist=True)

✅ Options for declaring field choices

Field.choices (for model fields) and ChoiceField.choices (for form fields) allow for more flexibility when declaring their values. In previous versions of Django, choices should either be a list of 2-tuples, or an Enumeration types subclass, but the latter required accessing the .choices attribute to provide the values in the expected form

Django 5.0 adds support for accepting a mapping or a callable instead of an iterable, and also no longer requires .choices to be used directly to expand enumeration types.

Here is the official coding sample:

from django.db import models

Medal = models.TextChoices("Medal", "GOLD SILVER BRONZE")

SPORT_CHOICES = {  # Using a mapping instead of a list of 2-tuples.
    "Martial Arts": {"judo": "Judo", "karate": "Karate"},
    "Racket": {"badminton": "Badminton", "tennis": "Tennis"},
    "unknown": "Unknown",
}

def get_scores():
    return [(i, str(i)) for i in range(10)]

class Winner(models.Model):
    medal = models.CharField(..., choices=Medal)  # Using `.choices` not required.
    sport = models.CharField(..., choices=SPORT_CHOICES)
    score = models.IntegerField(choices=get_scores)  # A callable is allowed.

✅ Other minor changes

django.contrib.admin - jQuery is upgraded to 3.7.1.
django.contrib.auth - The new asynchronous functions are now provided, using an a prefix: django.contrib.auth.aauthenticate(), aget_user(), alogin(), alogout(), and aupdate_session_auth_hash().
Asynchronous views - Under ASGI, http.disconnect events are now handled. This allows views to perform any necessary cleanup if a client disconnects before the response is generated.

✅ In Summary

Django is a high-level Python web framework that simplifies and accelerates web development by providing a robust set of tools, libraries, and conventions. It emphasizes rapid development, clean and pragmatic design, and follows the "Don't Repeat Yourself" (DRY) principle.

Since its first release in 2003, Django has been continuously improved by a super-active community where all the new features are discussed, voted, implemented, and later released.

Today, Django continues to be a widely used and respected web framework, with an active community of developers and a rich ecosystem of packages and extensions.

✅ Resources

👉 Access AppSeed and start your next project
👉 Deploy Projects on Aws, Azure, and DO via DeployPRO
👉 Create landing pages with Simpllo, an open-source site builder
👉 Django App Generator - A 2nd generation App Builder