Forem: Documendous

Django, React, and Docker Walk Into a Bar — Only Nginx Gets Served

Documendous — Thu, 29 May 2025 12:02:21 +0000

Subtitle: Or, how I lost my patience debugging staticfiles in production and came out stronger for it.

So you want Django REST Framework in the back, React in the front, and everything neatly dockerized like a perfect startup pitch deck. Great. But once you drop Gunicorn, Nginx, and Vite into the pot, what you get is less a gourmet app stack and more a soup of HTTP 400s, 403s, and 404s.

I recently went through the joyless gauntlet of getting Django admin to load properly behind a React/Nginx frontend in Docker. Here’s what worked — and all the dumb mistakes I made along the way so you don’t have to.

🔧 The Setup (a.k.a. “This Should Just Work, Right?”)

Here's what I started with:

Django backend with Django REST Framework and gunicorn
React frontend built with Vite
Docker Compose for everything
Nginx acting as the single entry point in production
Static and media volumes shared between Django and Nginx

My Docker Compose looked like this:

services:
  web:
    build:
      context: ./magsite_backend
      dockerfile: Dockerfile.prod
    command: gunicorn magsite_backend.wsgi:application --bind 0.0.0.0:8000
    expose:
      - 8000
    volumes:
      - static_volume:/home/magsite_backend/web/staticfiles
      - media_volume:/home/magsite_backend/web/mediafiles
    env_file:
      - .env.prod
    depends_on:
      - db

  db:
    image: postgres:16
    volumes:
      - prod_postgres_data:/var/lib/postgresql/data/
    env_file:
      - .env.prod.db

  frontend:
    build:
      context: ./magsite-ui
      dockerfile: Dockerfile.prod
    ports:
      - 80:80
    depends_on:
      - web
    volumes:
      - static_volume:/home/magsite_backend/web/staticfiles
      - media_volume:/home/magsite_backend/web/mediafiles

volumes:
  static_volume:
  media_volume:
  prod_postgres_data:

🪵 Step 1: Static Files Are Real, But Nobody Believes in Them

Everything built. Containers were up. Admin page loaded.

But CSS? Not so much. The page looked like early 2000s Craigslist.

Diagnosis: Django’s collectstatic was dumping files into STATIC_ROOT, but Nginx wasn’t serving them.

The screw-up: I had set:

STATICFILES_DIRS = [BASE_DIR / "staticfiles"]
STATIC_ROOT = BASE_DIR / "staticfiles"

Classic rookie move. Django won’t let you collect static files into the same place it reads them from.

The fix: Nuke STATICFILES_DIRS entirely unless you actually have extra static folders outside your apps. Then:

STATIC_ROOT = BASE_DIR / "staticfiles"

🚧 Step 2: Nginx Serves Nothing

My Nginx config had this gem:

location /static/ {
    proxy_pass http://web:8000/static/;
}

That works great in dev. In production? Gunicorn doesn’t serve static files. It’s a web server, not your butler.

The fix: Replace that with a direct file alias:

location /static/ {
    alias /home/magsite_backend/web/staticfiles/;
}

And while you're at it, do the same for /media/.

🔐 Step 3: Hello Darkness My Old Friend (403 CSRF Errors)

So now the admin loads and I try logging in — only to be met by Django’s infamous CSRF slap.

The issue: Nginx wasn't forwarding all the headers Django expects.

The fix: Update /admin/ and /api/ proxy blocks:

proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;

Bonus fix: In settings.py, trust your reverse proxy:

CSRF_TRUSTED_ORIGINS = ['http://localhost']

🧱 Step 4: Bad Request (400) — Django’s Favorite Passive Aggression

Turns out even if your containers are hugging each other lovingly over an internal Docker network, Django still throws a tantrum if the Host header doesn’t match what's in ALLOWED_HOSTS.

The fix:

ALLOWED_HOSTS = ['localhost', '127.0.0.1']

Or, if you’re still debugging:

ALLOWED_HOSTS = ['*']

Yes, it’s insecure. So is walking barefoot into prod. You’ll put shoes on later.

✅ Recap: Make It Work Every Time

Your key config checkpoints:

✅ STATIC_ROOT is not in STATICFILES_DIRS
✅ collectstatic writes to a volume that Nginx can access
✅ Nginx uses alias for static/media, not proxy_pass
✅ Nginx forwards critical headers (Host, X-Forwarded-*)
✅ ALLOWED_HOSTS includes what’s actually hitting Django
✅ CSRF_TRUSTED_ORIGINS includes your Nginx URL
✅ Browser cache cleared (or just use Incognito)

Final Thoughts

Django and React can co-exist in Docker with Nginx, but they do so reluctantly. Like British roommates who share a flat but text each other from separate rooms.

If you're going this route for your own project or your boss's next pie-in-the-sky full-stack SPA, expect to spend some time unraveling these little devops lies.

You're welcome.

Tags:
#django #react #docker #nginx #webdev #csrf #fullstack

🔐 How to Use Email as the Username in Django (The Right Way)

Documendous — Tue, 08 Apr 2025 11:25:32 +0000

Using email instead of a username for login is more user-friendly and often preferred in modern applications. Django supports this, but it requires a custom user model. Here's how to set it up cleanly and correctly.

✅ Step 1: Create a Custom User Model

In your core/models.py (or any appropriate app), define a user model using AbstractBaseUser and PermissionsMixin:

from django.contrib.auth.models import (
    AbstractBaseUser,
    BaseUserManager,
    PermissionsMixin,
)
from django.db import models

class UserManager(BaseUserManager):
    def create_user(self, email, password=None, **extra_fields):
        if not email:
            raise ValueError("Email is required")
        email = self.normalize_email(email)
        user = self.model(email=email, **extra_fields)
        user.set_password(password)
        user.save()
        return user

    def create_superuser(self, email, password=None, **extra_fields):
        extra_fields.setdefault("is_staff", True)
        extra_fields.setdefault("is_superuser", True)
        return self.create_user(email, password, **extra_fields)

class AppUser(AbstractBaseUser, PermissionsMixin):
    email = models.EmailField(unique=True)
    full_name = models.CharField(max_length=150)
    phone_number = models.CharField(max_length=20, blank=True)
    is_active = models.BooleanField(default=True)
    is_staff = models.BooleanField(default=False)

    objects = UserManager()

    USERNAME_FIELD = "email"
    REQUIRED_FIELDS = ["full_name"]

    def __str__(self):
        return self.email

✅ Step 2: Point Django to Your New User Model

In settings.py:

AUTH_USER_MODEL = "core.AppUser"

Make sure this is set before running any migrations.

✅ Step 3: Create and Apply Migrations

python manage.py makemigrations core
python manage.py migrate

This sets up your database using the email field as the login ID.

✅ Step 4: Use `get_user_model()` Everywhere

Avoid importing User directly. Use this in views, tests, and signals:

from django.contrib.auth import get_user_model

User = get_user_model()

Example usage in tests:

User.objects.create_user(email="user@example.com", password="testpass")

✅ Step 5: Create Superuser with Email

When creating a superuser via script or CLI, use:

python manage.py createsuperuser --email admin@example.com --full_name "Admin"

If you use --noinput, pass in the --email and --full_name values explicitly in your script.

✅ Done

You now have a Django project where email is the unique identifier for login. This setup is clean, minimal, and aligns with real-world authentication flows.

How to Fully Remove Docker Volumes (Even When They Persist)

Documendous — Mon, 10 Mar 2025 13:53:50 +0000

Docker makes it easy to manage containers, but cleaning up unused resources—especially volumes—can sometimes be tricky. If you've run docker system prune --volumes -f but still see volumes when you run docker volume ls, this guide will help you fully remove them.

1. Check for Running Containers

Before removing volumes, ensure that no running or stopped containers are using them:

docker ps -a

If no containers are listed, proceed to the next step.

2. Remove Stopped Containers

Even stopped containers can hold onto volumes. Run:

docker ps -aq | xargs -r docker rm -f

If there are no containers, this command does nothing because of the -r flag in xargs.

3. Remove Unused Volumes

Now, try pruning all unused volumes:

docker volume prune -f

4. Force Remove All Volumes

If some volumes still persist, force delete them:

docker volume ls -q | xargs -r docker volume rm -f

5. Check for Docker Compose Dependencies

If you're using Docker Compose, some volumes might still be referenced. Ensure all services are shut down:

docker compose down -v

For older versions:

docker-compose down -v

6. Verify Volumes Are Gone

Finally, check if any volumes remain:

docker volume ls

Conclusion

If volumes still persist after these steps, they may have been created using a different storage driver or defined outside of Docker’s normal management. In that case, you may need to manually remove them from the host system. Let me know if you run into any issues!

Hybrid Compact Block Spacing: A Practical Coding Format for Readability and Refactoring

Documendous — Wed, 05 Mar 2025 13:19:33 +0000

Writing clean and maintainable code is an art. While many developers adhere to established style guides, some find that customizing their formatting can improve readability and even expose opportunities for refactoring. One such approach is what I call Hybrid Compact Block Spacing (or you could call it Harlin's Compact Block Spacing -- Harlin is my first name :-D).

This technique blends compact formatting for simple statements with block spacing for multi-line code, creating a structured and efficient layout that enhances both readability and maintainability.

What Is Hybrid Compact Block Spacing?

Hybrid Compact Block Spacing is a hybrid approach to formatting code that balances compactness and readability by following these key principles:

Single-line statements remain contiguous – Simple, short statements are kept together without unnecessary line breaks.
Multi-line statements are spaced apart – Complex or multi-line expressions are given their own section with whitespace before and after, except when they begin a block within a function.
HTML attributes, especially class lists, follow an indented multi-line format – Keeping long attribute values structured without unnecessary extra lines.
No excessive blank lines in HTML between elements – Keeps the markup tight but readable.
If an HTML element's start and end can fit on one line, keep it that way – Avoid unnecessary line breaks for simple elements.

Why Use This Spacing Style?

This formatting approach has multiple benefits, particularly for developers who prioritize readability, maintainability, and refactoring efficiency:

1. Improves Code Readability

Compact code reduces unnecessary scrolling while keeping logic easy to follow.
Multi-line statements stand out, making complex operations easier to understand.

2. Encourages Refactoring

Blocks of code that take up too much space naturally indicate where a function might be extracted.
Helps spot redundant or overly complex code sections more quickly.

3. Enhances Debugging & Collaboration

Easier for developers to trace logic without excessive line breaks.
New contributors can quickly distinguish between simple operations and heavier logic.

Examples

Python Example

Here’s how Hybrid Compact Block Spacing applies to Python:

Without Hybrid Compact Block Spacing (Messy Formatting)

users = [user for user in database.get_users() if user.is_active and user.has_permission()]

for user in users:
    user_data = {
        'name': user.name,
        'email': user.email,
        'role': user.role,
    }
    print(user_data)
log_action("Processed users", len(users))

With Hybrid Compact Block Spacing

users = [user for user in database.get_users() if user.is_active and user.has_permission()]

for user in users:
    user_data = {
        'name': user.name,
        'email': user.email,
        'role': user.role,
    }

    print(user_data)

log_action("Processed users", len(users))

HTML Example

Here’s how this method applies to HTML and CSS class formatting:

Without Hybrid Compact Block Spacing (Messy Formatting)

<div class="bg-white rounded shadow p-6">
  <div class="flex items-center gap-2 mb-2">
    <a href="{% url 'ui:features' 'docrepox' %}" class="flex items-center gap-2">
      <h3 class="font-bold text-gray-800 underline"> SECURITY </h3>
      <span class="material-symbols-outlined"> privacy_tip </span>
    </a>
  </div>
  <p class="text-gray-600">
    <span class="material-symbols-outlined" style="font-size: 22px !important;"> verified </span> Your data is safe.
  </p>
</div>

With Hybrid Compact Block Spacing

<div class="bg-white rounded shadow p-6">
  <div class="flex items-center gap-2 mb-2">
    <a href="{% url 'ui:features' 'docrepox' %}" class="flex items-center gap-2">
      <h3 class="font-bold text-gray-800 underline">SECURITY</h3>

      <span class="material-symbols-outlined">
        privacy_tip
      </span>

    </a>
  </div>

  <p class="text-gray-600">
    <span class="material-symbols-outlined" style="font-size: 22px !important;">
      verified
    </span> Your data is safe with modern encryption and user controls. <br>

    <span class="material-symbols-outlined" style="font-size: 22px !important;">
      verified
    </span> Fine-grained access controls to keep your data private.
  </p>
</div>

When to Use Hybrid Compact Block Spacing

This approach works best in situations where:

Code readability is a priority but you want to avoid unnecessary vertical space.
You frequently refactor your code and need a structure that highlights complex logic.
HTML attributes (like class) are long and need structured indentation.
A multi-line statement inside a function is not the first thing in a block; otherwise, no extra blank line is needed.

It may not be ideal for teams that follow strict style guides that enforce line-break-heavy formatting, but it can be a great personal formatting style for developers who like clean, structured code.

Final Thoughts

Hybrid Compact Block Spacing is an efficient way to organize your code, making it more readable, maintainable, and easier to refactor. It’s not a widely recognized style (yet), but if you find it useful, consider adopting it in your workflow.

What do you think about this formatting style? Do you use a similar approach? Let’s discuss in the comments!

Stop Icons from Moving When Your Page Loads

Documendous — Sun, 16 Feb 2025 17:03:23 +0000

Have you ever seen your icons flicker or move when your page loads? This happens because the browser loads the icon font a little later, making things shift around. Here’s how to keep the icons in place and make them appear smoothly.

Why Does This Happen?

Material Icons and Symbols use web fonts, which don’t load right away. Instead, the browser:

Leaves a blank space or shows temporary text where the icon should be.
Loads the font in the background.
Puts the icon in place once the font is ready, causing a sudden change.

Some people use visibility: hidden; to hide icons until they load, but this makes them disappear completely and causes layout changes. Instead, using opacity: 0; keeps the space reserved so the page looks smoother.

The Fix: Use `opacity` Instead of `visibility`

1. Update Your CSS

Change your CSS to use opacity: 0 so that the icons are invisible at first but don’t move things around:

/* Icons are hidden but still take up space */
.material-icons-outlined,
.material-symbols-outlined {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Fade them in once the page is ready */
.material-icons-loaded .material-icons-outlined,
.material-icons-loaded .material-symbols-outlined {
  opacity: 1;
}

2. Update Your JavaScript

Once the page loads, add a class to make the icons visible:

document.addEventListener("DOMContentLoaded", function () {
    document.body.classList.add("material-icons-loaded");
});

This makes the icons fade in smoothly instead of appearing suddenly.

Why This Works

Method	What Happens
`visibility: hidden;`	The icon disappears completely, which can cause things to move.
`opacity: 0;`	The icon stays in place but is invisible at first, preventing movement.

Using opacity means your icons won’t suddenly pop in and push things around.

Bonus Tip: Load the Font Faster

To make sure icons appear even faster, you can preload the font so the browser gets it earlier:

<link rel="preload" href="/static/material_fonts/icons/material_icon.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/static/material_fonts/symbols/material_symbols.woff2" as="font" type="font/woff2" crossorigin="anonymous">

This helps the browser load the font before it’s needed, reducing the delay.

Conclusion

By using opacity: 0 instead of visibility: hidden, you can stop your icons from shifting around when they load. This small trick makes your page look better and feel smoother.

Try it out and see the difference!

How to Remove a Stubborn Docker Volume

Documendous — Mon, 03 Feb 2025 13:40:51 +0000

Sometimes, you try to delete a Docker volume and get an error like this:

Error response from daemon: remove <volume_name>: volume is in use

That means something is still using the volume, and Docker won’t let you remove it. Here’s how to fix that.

1. Find Out What’s Using the Volume

First, check which containers are still using the volume:

docker ps -a --filter volume=<volume_name>

This will show you any containers that are still linked to it.

2. Stop and Remove the Containers

If a container is using the volume, you need to stop and delete it:

docker stop <container_id>
docker rm -f <container_id>

Repeat this for each container in the list.

3. Remove the Volume

Once no containers are using it, delete the volume:

docker volume rm -f <volume_name>

Now, it should be gone.

4. Clean Up Extra Volumes (Optional)

If you have old volumes you don’t need anymore, clean them up with:

docker volume prune -f

This removes all unused volumes to free up space.

5. Check That It’s Gone

To make sure the volume is deleted, list all volumes:

docker volume ls

If it’s not in the list, you’re all set!

Final Thoughts

If you can’t delete a volume, it’s probably still connected to a container. Just stop and remove the container, then try again. This keeps your setup clean and running smoothly.

Hope this helps!

How to Convert Audible AAX Files to MP3 for Free

Documendous — Mon, 20 Jan 2025 01:27:14 +0000

Audible audiobooks come in AAX format, which won’t play on many devices. If you want to convert an AAX file to MP3, you need to extract the activation bytes and use ffmpeg to convert the file. Here’s how to do it using free tools.

Step 1: Install Python and Audible CLI

You’ll need a tool to grab your activation bytes, which are needed to unlock AAX files.

Install Python if you don’t have it.
Open a terminal and install Audible CLI:

   pip install audible-cli

Step 2: Log In to Audible

Since AAX files are linked to your Audible account, you have to sign in.

Start the setup process:

   python -m audible_cli quickstart

Enter your Audible login details when prompted:

   Please enter your amazon username: [your_email@example.com]
   Please enter your amazon password: 
   Repeat for confirmation:

If you have two-factor authentication, enter the OTP:

   2FA is activated for this account.
   Please enter OTP Code: 123456

After logging in, your credentials will be saved for future use.

Step 3: Get Your Activation Bytes

Next, you need to grab your activation bytes to unlock the file:

python -m audible_cli activation-bytes

You’ll see a 16-character code like this:

Fetching activation bytes from Audible server
Save activation bytes to file
xxxxxxxx

Copy this code—you’ll need it for the next step.

Step 4: Convert AAX to MP3 Using ffmpeg

Now, use ffmpeg to turn the file into an MP3.

Install ffmpeg if you don’t have it:

   sudo apt install ffmpeg  # Ubuntu
   brew install ffmpeg  # macOS
   choco install ffmpeg  # Windows (Chocolatey)

Convert the AAX file:

   ffmpeg -activation_bytes YOUR_ACTIVATION_KEY -i "yourfile.aax" -vn -c:a libmp3lame -q:a 4 "output.mp3"

Replace YOUR_ACTIVATION_KEY with the code you got earlier and yourfile.aax with your file’s name.

Once done, you’ll have an MP3 file that works anywhere.

Wrapping Up

With these simple steps, you can convert Audible AAX files to MP3 and listen to your audiobooks on any device. This method is free, doesn’t require extra software, and works on Windows, macOS, and Linux.

If you run into issues or know a better way, drop a comment below!

Using Django Fixtures with Foreign Keys Without Hardcoded IDs

Documendous — Thu, 16 Jan 2025 22:13:20 +0000

When working with Django, fixtures make it easy to load sample data into your database. But if you hardcode foreign key IDs, your fixtures can break when IDs change or if you move data between databases.

A better way is to use natural keys, which let you reference foreign keys by meaningful values instead of numeric IDs.

Why Avoid Hardcoded IDs in Fixtures?

Hardcoding primary keys in fixtures can cause problems like:

Data mismatches across different databases.
Fixtures breaking when IDs change.
Extra work managing relationships manually.

Natural keys solve this by letting Django look up relationships dynamically.

Setting Up Natural Keys in Django

To use natural keys, you need to:

Define a natural_key() method in the related model.
Create a custom manager to fetch objects using the natural key.
Use the natural key in your fixture instead of a numeric ID.

Step 1: Define a Natural Key in the Related Model

In models.py, add a natural_key() method to the model that is referenced by a foreign key.

from django.db import models

class CategoryManager(models.Manager):
    def get_by_natural_key(self, name):
        return self.get(name=name)

class Category(models.Model):
    name = models.CharField(max_length=255, unique=True)

    objects = CategoryManager()

    def natural_key(self):
        return (self.name,)

This lets you reference categories by name instead of ID in fixtures.

Step 2: Create a Fixture Using Natural Keys

Instead of using numeric IDs, reference foreign keys by their natural key.

Fixture Example (Using Numeric IDs – Old Approach)

[
    {
        "model": "shop.category",
        "pk": 1,
        "fields": {
            "name": "Electronics"
        }
    },
    {
        "model": "shop.product",
        "fields": {
            "name": "Smartphone",
            "category": 1
        }
    }
]

Fixture Example (Using Natural Keys – Improved Approach)

[
    {
        "model": "shop.category",
        "fields": {
            "name": "Electronics"
        }
    },
    {
        "model": "shop.product",
        "fields": {
            "name": "Smartphone",
            "category": ["Electronics"]
        }
    }
]

Django will automatically look up the category by name instead of using an ID.

Step 3: Load the Fixtures

Once your fixture is ready, load it with:

python manage.py loaddata your_fixture.json

Django will use get_by_natural_key() to match foreign keys.

Are Natural Keys Mandatory?

No. If you define a natural_key(), Django still lets you use:

Numeric IDs (old approach).
Natural keys (more flexible).

You can mix both as needed.

When Should You Use Natural Keys?

Use natural keys if:

You want fixtures that work across different databases.
Your model has a unique field (like username, slug, or name).
You don’t want to track numeric IDs manually.

Stick with numeric IDs if:

Your model doesn’t have a unique natural identifier.
You’re working with small, static datasets.

Conclusion

Using natural keys in Django fixtures keeps your data more flexible and easier to manage. Instead of relying on IDs that may change, Django will look up relationships dynamically, making your fixtures more reliable.

Try using natural keys in your Django project to simplify your fixtures and avoid unnecessary headaches.

How to Get Back a Lost Git Branch

Documendous — Thu, 16 Jan 2025 12:19:52 +0000

Losing a feature branch in Git can be frustrating, but there’s usually a way to recover it. Whether it was deleted, force-pushed, or just seems to have disappeared, here’s how to bring it back.

1. Check Git Reflog

Git keeps track of changes to your branches with git reflog. This can help find lost commits:

 git reflog

Look through the list to find the commit hash where your work was last intact.

Once you’ve found the right commit, you can restore it.

2. Restore Your Work

Option 1: Create a new branch from the lost commit

Use the commit hash from reflog to make a new branch:

 git checkout -b recovery-branch <commit-hash>

Now your work is back in a safe place.

Option 2: Reset your branch

If your feature branch still exists but is missing changes, you can reset it:

 git reset --hard <commit-hash>

Be careful: This will erase any changes since that commit.

3. Check the Remote Repository

If the branch was changed or deleted on the remote, check for lost commits:

 git fsck --lost-found

If this shows lost commits, you can inspect them:

 git show <commit-hash>

If the branch was force-pushed, you might still find its history:

 git reflog origin/feature-branch

4. Merge or Push Your Changes Back

Once you’ve recovered your work, you can merge it back:

 git checkout feature-branch
 git merge recovery-branch

Or, if the branch was deleted:

 git branch feature-branch recovery-branch
 git checkout feature-branch

Then push it:

 git push origin feature-branch

Conclusion

Git keeps track of more than you might think, so there’s usually a way to recover lost work. The key is to act quickly and check reflog before assuming your work is gone.

Have you ever lost a branch and brought it back? Let me know how you did it!

How ChatGPT Can Help You Maintain Code Quality Without Gold Plating

Documendous — Tue, 14 Jan 2025 12:21:19 +0000

As developers, we all want to write code that works well and is easy to maintain. But sometimes, in trying to make our work perfect, we end up doing too much – a problem known as gold plating. This happens when you add features or complexity that nobody asked for or really needs. While it might feel like you're improving things, you're often just wasting time and making the code harder to work with.

Instead of doing extra for the sake of it, it’s better to focus on writing good, solid code that meets the actual needs of the project. In this article, we’ll look at how ChatGPT can help you stay focused, work efficiently, and avoid falling into the gold plating trap.

What Is Gold Plating?

Gold plating means adding extra features or complexity that go beyond what’s required. It often comes from wanting to impress others or future-proof the code. But there are downsides:

Wasted Time: You spend time on things that don’t really matter.
Harder to Understand: The code becomes more complicated and harder for others to follow.
Losing Focus: You can end up distracted from the original goal.
Higher Costs: All this extra work takes more time and money.

A Smarter Way to Code

Instead of overdoing it, focus on getting the basics right. Write code that works, is easy to read, and can grow with the project. Here are a few simple tips:

Keep your code clear and organized.
Don’t add anything that isn’t needed.
Follow simple rules like Keep It Simple or Don’t Repeat Yourself.
Refactor your code later to clean it up, but only when it’s necessary.

How ChatGPT Can Help

ChatGPT is a great partner for improving your workflow and avoiding unnecessary complexity. Here are some specific ways to use it effectively:

1. Review Your Code for Simplicity and Clarity

Ask for feedback on variable and function names: Paste a snippet of your code and ask ChatGPT if the names you’ve used are clear and descriptive.
Check if your code is easy to read: Share a function or file and ask ChatGPT to identify parts that might be confusing or overly complex.
Get advice on structure: Ask if your code could benefit from splitting into smaller functions, classes, or separate components (e.g., in Django, whether to create a new app).

2. Debug More Effectively

Paste error messages and related code, and ask ChatGPT to help identify the root cause and suggest fixes.
Use ChatGPT to find common mistakes in the code you’ve written, especially if something isn’t working as expected.

3. Focus on Meeting Requirements

Share the goals of your task and ask ChatGPT to help ensure you’re sticking to them.
Get help identifying unnecessary features you might be tempted to add but don’t actually need.

4. Refactor Without Overthinking

Once your code is working, ask ChatGPT to suggest ways to simplify it. For example:
- Are there parts of the code that are repeated and could be consolidated?
- Are there better ways to handle error checking or logging?

5. Improve Testing and Validation

Ask for test case suggestions to ensure your code works as expected.
Get help setting up tools like pytest or writing unit tests for specific parts of your code.

6. Learn Better Practices While You Work

Have ChatGPT explain coding principles in the context of your code. For example:
- “Does this code follow the Single Responsibility Principle?”
- “How can I make this function more reusable?”
Use ChatGPT to learn about best practices for the language or framework you’re using.

A Practical Coding Workflow

Here’s a simple process you can follow to keep your work on track and your code in good shape:

Work on One Thing at a Time: Focus on the feature, bug fix, or update you’re tackling. Use tools like GitHub Issues or Jira to track your progress.
Get It Working First: Make sure the code works and solves the problem. Don’t worry about perfection yet.
Go Back and Review: Once it works, step back and check your work:
- Did you name things clearly?
- Is everything where it belongs?
- Would it make sense to split some of the work into separate files or components?
- Could this code cause problems later?
Ask ChatGPT for a Final Review: Use ChatGPT to review the code with fresh eyes and spot anything you might have missed.

This way, you’ll deliver something functional quickly while still ensuring your code is clean and easy to manage.

Final Thoughts

Adding too much to your code can cause more harm than good. Instead, focus on writing code that does what it needs to do and does it well. ChatGPT can be a helpful tool for:

Reviewing and improving your code.
Keeping you focused on your goals.
Teaching you better ways to write clean, maintainable code.

Remember, great code isn’t about doing more. It’s about doing what’s needed in the best way possible. What are your favorite ways to keep your code simple and effective? Share your tips in the comments below!

Run a Script Before Debugging Your Django App in VSCode

Documendous — Sat, 04 Jan 2025 14:53:29 +0000

You know what’s annoying? Debugging a Django app and realizing, halfway through, that you forgot to reset your database or run migrations. It’s repetitive, it’s boring, and worst of all, it’s easy to forget. Why not let your tools handle it for you? If you’re using Visual Studio Code, you can set things up so your script runs automatically every time you start the debugger.

Here’s how to do it—quick and simple.

The Problem

Let’s say you’ve got a little shell script called setup.sh that preps your environment:

#!/usr/bin/env bash

source .venv/bin/activate

sudo su - postgres -c "dropdb docrepo"
sudo su - postgres -c "createdb docrepo -O admin"
cd docrepo
python manage.py migrate
cd ..

This resets the database and runs migrations. Great. But you’re tired of running it manually every time you debug. Why should you have to remember something a computer could do for you?

The Solution: Automate It with VSCode

The trick here is to hook your script into VSCode’s debugging workflow using tasks.json and launch.json. With just a little setup, you can have your script run automatically before the debugger starts.

Step 1: Define the Task

First, you need to tell VSCode how to run your script. Open (or create) .vscode/tasks.json and add this:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Run Pre-Debug Script",
            "type": "shell",
            "command": "./setup.sh",
            "presentation": {
                "reveal": "always"
            },
            "problemMatcher": []
        }
    ]
}

Here’s what’s going on:

"label": The name of this task. You’ll refer to it in the next step.
"command": Path to your script. Make sure it’s executable (chmod +x setup.sh).
"presentation": Controls how the output is displayed. Set it to "always" so you can see what’s happening.

Step 2: Connect the Task to the Debugger

Next, wire this task into your debugger configuration. Open .vscode/launch.json and edit the Django debugger settings:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python Debugger: Django",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/docrepo/manage.py",
            "args": [
                "runserver",
                "--noreload",
                "--nothreading"
            ],
            "django": true,
            "justMyCode": false,
            "autoStartBrowser": false,
            "env": {
                "PYTHONPATH": "${workspaceFolder}/docrepo"
            },
            "preLaunchTask": "Run Pre-Debug Script"
        }
    ]
}

"preLaunchTask": This tells the debugger to run your setup.sh task before it starts.
"args": The arguments passed to Django’s runserver.
- --noreload: Disables Django’s auto-reloading feature so your script doesn’t run twice.
- --nothreading: Disables multi-threading, which makes debugging simpler and less unpredictable.

Step 3: Test It

Now for the fun part. Open the Debug panel in VSCode, select the "Python Debugger: Django" configuration, and hit F5. Here’s what should happen:

Your setup.sh script runs. You’ll see the output in the terminal.
Once the script finishes, the Django development server starts, ready for debugging.

If something doesn’t work, check the terminal output. Most issues are permissions-related (e.g., make sure your script is executable with chmod +x setup.sh).

Why This Is Better

This setup is simple, clear, and doesn’t waste your time. Instead of juggling multiple terminals or trying to remember yet another manual step, you let your tools handle it for you. Debugging should be about solving problems in your app, not about fighting your workflow.

If you’re wondering why --noreload and --nothreading are here, it’s because Django’s auto-reloading and threading features can cause weird behavior when running setup tasks. Turning them off gives you a consistent, predictable environment—exactly what you want when debugging.

That’s It

No fluff, no unnecessary complexity. Now your debugger does exactly what you need, every time. Automation like this frees you up to focus on the real work. Isn’t that what good tools are supposed to do?

Getting the Most Out of AI with this Simple Method

Documendous — Mon, 30 Dec 2024 14:11:58 +0000

Artificial Intelligence (AI) is a powerful tool that can help with tasks like writing, coding, and more. To get the best results, though, you need to know how to talk to it in the right way. After using AI for a while, I’ve come up with an easy method to make it more helpful and reliable for any type of work.

Here’s the step-by-step process I use to get the most out of AI.

Step 1: Start with a Clear Role

When you ask AI for help, begin by telling it what role it should take. Think of it like assigning it a job. For example:
“You are a software engineer with expertise in Python and Django.”

This helps the AI understand how to approach your question. When it knows its role, it can give you better answers.

Step 2: Give Useful Background Information

AI works best when it has enough details to do its job. Give it some background, like who the audience is, what your project is about, or what result you want. For instance, if you’re writing a blog post, explain who will read it and what they should learn.

It’s okay if you don’t include every single detail. The AI can ask for more if it needs to.

Step 3: Be Clear About What You Want

Say exactly what you need in a simple way. Don’t be vague. For example, instead of saying, “Help me with Django,” try:
“Write a short explanation of how Django handles database migrations.”

The clearer your request, the better the AI will understand and respond.

Step 4: Let AI Ask Questions

Allow the AI to ask you follow-up questions. This creates a back-and-forth conversation, which is especially helpful for more detailed or complicated tasks.

For example:

“Write a step-by-step guide for setting up a basic Django project. If you need more details, feel free to ask.”

This way, you don’t have to think of everything ahead of time. The AI can help fill in the gaps as you go.

How This Method Works in Real Life

Here are some examples of how you can use this method for different tasks:

Code Review

Request:

“You are a senior developer. Review this Django view for performance and readability. Suggest any improvements, and let me know if anything needs clarification.”

Writing Marketing Content

Request:

“You are a marketing copywriter. Create a social media post about our app’s new feature that cuts load times in half. Let me know if you need more context about our audience.”

Creating a Work Process

Request:

“You are a project manager. Write steps for how our team should handle bug reports during a software project. If you need more details about our current process, just ask.”

Why This Method Works

This method is simple because it focuses on clarity and context. By giving AI the right information upfront, you avoid the frustration of getting answers that don’t make sense or aren’t helpful.

Think of your interaction with AI as teamwork. You don’t expect perfect answers right away. Instead, you work with the AI to refine its response until it’s just right.

Use It for Anything

The best part of this method is that it works with any AI tool, not just ChatGPT. Whether you’re writing, coding, or planning, following these steps will help you get better results.

Give It a Try

If you’ve been having trouble getting what you need from AI, try this simple method. It’s easy to use, works for almost any task, and makes AI a more reliable partner. Once you get the hang of it, you’ll find that working with AI becomes smoother and more productive.

Forem: Documendous

Django, React, and Docker Walk Into a Bar — Only Nginx Gets Served

🔧 The Setup (a.k.a. “This Should Just Work, Right?”)

🪵 Step 1: Static Files Are Real, But Nobody Believes in Them

🚧 Step 2: Nginx Serves Nothing

🔐 Step 3: Hello Darkness My Old Friend (403 CSRF Errors)

🧱 Step 4: Bad Request (400) — Django’s Favorite Passive Aggression

✅ Recap: Make It Work Every Time

Your key config checkpoints:

Final Thoughts

🔐 How to Use Email as the Username in Django (The Right Way)

✅ Step 1: Create a Custom User Model

✅ Step 2: Point Django to Your New User Model

✅ Step 3: Create and Apply Migrations

✅ Step 4: Use get_user_model() Everywhere

✅ Step 5: Create Superuser with Email

✅ Done

How to Fully Remove Docker Volumes (Even When They Persist)

1. Check for Running Containers

2. Remove Stopped Containers

3. Remove Unused Volumes

4. Force Remove All Volumes

5. Check for Docker Compose Dependencies

6. Verify Volumes Are Gone

Conclusion

Hybrid Compact Block Spacing: A Practical Coding Format for Readability and Refactoring

What Is Hybrid Compact Block Spacing?

Why Use This Spacing Style?

1. Improves Code Readability

2. Encourages Refactoring

3. Enhances Debugging & Collaboration

Examples

Python Example

Without Hybrid Compact Block Spacing (Messy Formatting)

With Hybrid Compact Block Spacing

HTML Example

Without Hybrid Compact Block Spacing (Messy Formatting)

With Hybrid Compact Block Spacing

When to Use Hybrid Compact Block Spacing

Final Thoughts

Stop Icons from Moving When Your Page Loads

Why Does This Happen?

The Fix: Use opacity Instead of visibility

1. Update Your CSS

2. Update Your JavaScript

Why This Works

Bonus Tip: Load the Font Faster

Conclusion

How to Remove a Stubborn Docker Volume

1. Find Out What’s Using the Volume

2. Stop and Remove the Containers

3. Remove the Volume

4. Clean Up Extra Volumes (Optional)

5. Check That It’s Gone

Final Thoughts

How to Convert Audible AAX Files to MP3 for Free

Step 1: Install Python and Audible CLI

Step 2: Log In to Audible

Step 3: Get Your Activation Bytes

Step 4: Convert AAX to MP3 Using ffmpeg

Wrapping Up

Using Django Fixtures with Foreign Keys Without Hardcoded IDs

Why Avoid Hardcoded IDs in Fixtures?

Setting Up Natural Keys in Django

Step 1: Define a Natural Key in the Related Model

Step 2: Create a Fixture Using Natural Keys

Fixture Example (Using Numeric IDs – Old Approach)

Fixture Example (Using Natural Keys – Improved Approach)

Step 3: Load the Fixtures

Are Natural Keys Mandatory?

When Should You Use Natural Keys?

Conclusion

How to Get Back a Lost Git Branch

1. Check Git Reflog

2. Restore Your Work

Option 1: Create a new branch from the lost commit

Option 2: Reset your branch

3. Check the Remote Repository

4. Merge or Push Your Changes Back

Conclusion

✅ Step 4: Use `get_user_model()` Everywhere

The Fix: Use `opacity` Instead of `visibility`