DEV Community: David

My Cookiecutter Django Setup

David — Wed, 27 Jul 2022 22:10:00 +0000

I have some specific requirements for the Django projects I create at my job, so here's how I use cookiecutter-django to help get things going.

What is Cookiecutter Django?

From the docs: "Cookiecutter Django is a project template for jumpstarting production-ready Django projects."

My Needs

SQLite in local development
Docker for production
Heroku for site previews
Custom cloud provider for static files in production

Setup

Install cookiecutter and run it against the Cookiecutter Django repository.

pip install "cookiecutter>=1.7.0"
cookiecutter https://github.com/cookiecutter/cookiecutter-django

Add your own names, emails, etc. Personally, I like using SendGrid for email because of its great free tier and ease of use. It's also easily scaled to larger workloads for larger client. Whitenoise is the tool I like using for static file serving.

project_name [My Awesome Project]: Project Name
project_slug [project_name]: 
description [Behold My Awesome Project!]:
author_name [Daniel Roy Greenfeld]: David Buckley
domain_name [example.com]: example.com
email [david-buckley@example.com]: dev@davidjaybuckley.com
version [0.1.0]: 
Select open_source_license:
1 - MIT
2 - BSD
3 - GPLv3
4 - Apache Software License 2.0
5 - Not open source
Choose from 1, 2, 3, 4, 5 [1]: 5
timezone [UTC]: 
windows [n]: 
use_pycharm [n]: 
use_docker [n]: y
Select postgresql_version:
1 - 14
2 - 13
3 - 12
4 - 11
5 - 10
Choose from 1, 2, 3, 4, 5 [1]: 1
Select cloud_provider:
1 - AWS
2 - GCP
3 - None
Choose from 1, 2, 3 [1]: 3
Select mail_service:
1 - Mailgun
2 - Amazon SES
3 - Mailjet
4 - Mandrill
5 - Postmark
6 - Sendgrid
7 - SendinBlue
8 - SparkPost
9 - Other SMTP
Choose from 1, 2, 3, 4, 5, 6, 7, 8, 9 [1]: 6
use_async [n]: y
use_drf [n]: y
Select frontend_pipeline:
1 - None
2 - Django Compressor
3 - Gulp
Choose from 1, 2, 3 [1]: 2
use_celery [n]: 
use_mailhog [n]: 
use_sentry [n]: 
use_whitenoise [n]: y
use_heroku [n]: y
Select ci_tool:
1 - None
2 - Travis
3 - Gitlab
4 - Github
Choose from 1, 2, 3, 4 [1]: 
keep_local_envs_in_vcs [y]: n
debug [n]: y

Setting Up SQLite

I don't use PostgreSQL in my local environment, so a few things need changed before installing the requirements.

In requirements/local.txt, remove psycopg2 as a dependency (the PostgreSQL package).

...
# psycopg2==2.9.3  # https://github.com/psycopg/psycopg2
...

Then, in config/settings/local.py, replace the line DATABASES = {"default": env.db("DATABASE_URL")} with the following.

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.sqlite3",
        "NAME": ROOT_DIR / "db.sqlite3",
    }
}

While in this same local settings file (because I'm not using Docker in the local environment at the moment), replace the line if env("USE_DOCKER") == "yes": with:

if env("USE_DOCKER", default="no") == "yes":

Finally, there is a migration that has some logic that doesn't work with a SQLite database, so I added this. The file in question is project_name/contrib/sites/migrations/0003_set_site_domain_and_name.py.

def _update_or_create_site_with_sequence(site_model, connection, domain, name):
    ...
    if (
        created
        and not "ENGINE" in settings.DATABASES["default"]
        or settings.DATABASES["default"]["ENGINE"] != "django.db.backends.sqlite3"
    ): 
        # We provided the ID explicitly when creating the Site entry, therefore the DB
        ...

The site that was created in this migration is typically the only site record I have in local so this migration doesn't really affect what I'm doing anyway. I can update the database manually with SQL if needed later. If you have a better way to do this, let me know in the comments, but this worked for me.

Install Requirements and Migrate Database

Now we're ready to create a virtual environment, install local requirements, migrate the database.

python -m venv venv
source venv/bin/activate # venv/Scripts/activate for Windows
pip install -r requirements/local.txt
python manage.py migrate

Be sure to add *.sqlite3 to your .gitignore file (if it's not already there and you're ready to go in local!

Binary to Decimal to Hexadecimal - How and Why

David — Sat, 18 Sep 2021 22:40:28 +0000

Why?

Computers store data as binary (base 2). Programmers like to read and write binary as hexadecimal (base 16). And humans use decimal (base 10). Therefore, as a human programmer who needs to talk to computers, you need to know a little bit about all three systems.

Binary and Decimal

First, I'll walk you through how to convert between binary and decimal. Here's a table of each place in base 2 for one byte of data:

1	1	1	1	1	1	1	1
2^7	2^6	2^5	2^4	2^3	2^2	2^1	2^0
128	64	32	16	8	4	2	1

Binary to Decimal

To convert from binary to decimal by hand, simply write the powers of 2 beneath and add the numbers from right to left.

1	0	1	1	0	0	1	1
2^7	2^6	2^5	2^4	2^3	2^2	2^1	2^0
128	64	32	16	8	4	2	1

1 + 2 + 16 + 32 + 128 = 179

Let's say we have a binary string in Python code. How could we write a loop that will go through the string from right to left and add powers of 2?

def bin_to_dec(bin_string):
    decimal = 0
    # Initialize our rightmost power of 2 (2^0)
    power_of_2 = pow(2, 0);
    # Iterate through the reversed binary string (R -> L)
    for b in bin_string[::-1]:
        # If the digit is 1
        if int(b) == 1:
            # Add the power of 2 to our decimal number
            decimal += power_of_2
        # Double the power of 2 for the next place
        power_of_2 *= 2
    # Output the result
    return decimal

# Prints 179
print(bin_to_dec("10110011"))

Decimal to Binary

There are multiple ways to convert from decimal to binary. I will teach you the way of dividing and taking the remainder. You divide by 2 and prepend the remainder to your binary string until the number you are dividing is 0.

179 / 2 = 89R1
_______1
 89 / 2 = 44R1
______11
 44 / 2 = 22R0
_____011
 22 / 2 = 11R0
____0011
 11 / 2 =  5R1
___10011
  5 / 2 =  2R1
__110011
  2 / 2 =  1R0
_0110011
  1 / 2 =  0R1
10110011

Here's the python code for that:

def dec_to_bin(decimal):
    bin_string = ""
    power_of_2 = pow(2, 0)
    while decimal > 0:
        # The remainder of dividing by 2 is the next bin digit
        bin_digit = decimal % 2
        # Divide the decimal by two (floor division)
        decimal //= 2
        # Prepend digit to string w/string concatenation
        bin_string = str(bin_digit) + bin_string
        # Double the power of 2 for the next place
        power_of_2 *= 2
    # Output the result
    return bin_string

# Prints "10110111"
print(dec_to_bin(179))

Generalizing: Base N to Decimal and Back

By the way, these approaches of converting bases works for any base system, including hexadecimal.

The code below uses Python's ord() and chr() functions which are used to convert ASCII letters to numbers and back.

def n_to_dec(n_string, n):
    decimal = 0
    power_of_n = pow(n, 0);
    for b in n_string[::-1]:
        # A = 10, B = 11, C = 12 ...
        b = ord(b) - 65 + 10 if not b.isdigit() else int(b)
        if int(b) != 0:
            decimal += int(b) * power_of_n
        power_of_n *= n
    return decimal

# Prints 255
print(n_to_dec("FF", 16))

def dec_to_n(decimal, n):
    n_string = ""
    power_of_n = pow(n, 0)
    while decimal > 0:
        n_digit = decimal % n
        # 10 = A, 11 = B, 12 = C ...
        n_digit = chr(65 - 10 + n_digit) if n_digit >= 10 else n_digit
        decimal //= n
        n_string = str(n_digit) + n_string
        power_of_n *= n
    return n_string

# Prints FF
print(dec_to_n(255, 16))

Hexadecimal and Binary

Sometimes, it is more useful to communicate in binary than decimal because you are talking about bytes of data. For example, a color's RGB values are each limited to a range of 0 to 255 because they each use a byte of data. However, writing out all of those 1's and 0's is tedious, so hexadecimal is used as a shorthand, where each nybble (half a byte, or 4 bits) is represented with a character from the set 0123456789ABCDEF. For example:

0011 = 3
0110 = 6
1100 = C (12)

You can take any binary number and convert it to hexadecimal by taking each section of 4 bits right to left and converting those.

10100101 (bin)

1010	0101
A	5

A5 (hex)

Conclusion

Of course, there are built in functions in languages like Python's bin() and hex() that will do these conversions, but it's useful to know how the process works yourself so you can do a quick conversion when needed. Now, the next time you see a color written as #FFFFFF, you will know that each RGB value is 255 and the lights are all on (making white). Hope you found this helpful!

Django Person Image Generator

David — Sat, 30 Jan 2021 18:51:50 +0000

There is the common problem in web development where you need to have randomly generated people with faces, especially for mockups. I ran into this problem the other day when making a Django app. Knowing that https://thispersondoesnotexist.com/ is a thing, I decided to write a Person model and admin that fetches images from that site. Here are the features I wanted that I will demonstrate below:

A way to preview the generated image in the Django admin interface.
A way to generate a new image in the admin interface if I didn't like the first one that was generated.
A way to handle saving and deleting image files on creation and deletion of the model.

With that said, let's dive into it!

Project Setup

Create a Django project with a persons app.

pip install Django Pillow requests
django-admin startproject project .
cd project
django-admin startapp persons

Make sure to add persons to INSTALLED_APPS in project/settings.py.

INSTALLED_APPS = [
    ...
    'project.persons'
]

At the bottom of project/settings.py add media settings because we will be saving images.

MEDIA_ROOT = BASE_DIR / "media"
MEDIA_URL = "/media/"

Create media directories in root of project. We will be saving images to media/persons/.

media/
  persons/
project/ # our Django project
  persons/ # our Django app
  ...
...

Image Downloader

Create a view in persons/views.py that uses the requests library to download an image from https://thispersondoesnotexist.com/image. We will be fetching this view from our Person admin later.

from django.http import JsonResponse
from django.conf.global_settings import MEDIA_URL
import requests

def generate_image(request):
    # Use this site to generate an image file of a person
    url = 'https://thispersondoesnotexist.com/image'
    req = requests.get(url)
    # Adjust the names and paths below to fit your project
    filename = '/persons/tmp.jpg'
    with open("media" + filename, "wb+") as f:
        f.write(req.content)

    return JsonResponse(data={
        "path": MEDIA_URL + filename
    })

Add the view and the media static server to urls.py.

from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path
from project.persons.views import generate_image

urlpatterns = [
    path('admin/', admin.site.urls),
    path('generate-image/', generate_image, name="generate-image")
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Visit or curl http://127.0.0.1:8000/generate-image/ to make sure it works.

Models and Admin

Create a Person model in persons/models.py. The save() method is overwritten to make sure that the image saved by default
(our generated image) gets saved as its own file. A little image processing with the Pillow library resizes the image. The delete() method is also overwritten to make sure the image file gets deleted along with the model. For more on overriding these methods, visit here.

from django.db import models
from shutil import copy2
from datetime import datetime
import os
from PIL import Image  

MEDIA_LOCATION = "persons"
DEFAULT = "tmp.jpg"
class Person(models.Model):
    name = models.CharField(max_length=100)
    image = models.ImageField(upload_to=MEDIA_LOCATION, default=f"{MEDIA_LOCATION}/{DEFAULT}")

    def save(self, *args, **kwargs):
        if DEFAULT in self.image.url:
            # Copy image to a new, unique file related to the person's name and the time of download
            new_filename = f"{self.name[:10]}-{datetime.now().isoformat()}"
            new_filename = "".join([c for c in new_filename if c.isalpha() or c.isdigit()]).rstrip() + ".jpg"
            copy2(f"media/{MEDIA_LOCATION}/{DEFAULT}", f"media/{MEDIA_LOCATION}/{new_filename}")
        self.image = f"{MEDIA_LOCATION}/{new_filename}"
        # Save the image and resize it
        super(Person, self).save(*args, **kwargs) 
        # The [1:] slice is to remove the / in front of /media/persons/...
        im = Image.open(self.image.url[1:])  
        if im.width > 150: 
            im = im.resize((150, 150))
            im.save(self.image.url[1:])

    def delete(self, *args, **kwargs):
        # Delete the image file along with the model
        try:
            os.remove(self.image.url[1:])
        except:
            pass
        super(Person, self).delete(*args, **kwargs)

    def __str__(self):
        return f"Person {self.id}: {self.name}"

Register the model in persons/admin.py. We're going to do a little admin customization using a custom widget so we can preview and generate images. For more on widgets, see here.

from django.contrib import admin
from django.db import models
from django.forms.widgets import ClearableFileInput 

from project.persons.models import Person

class ImageWidget(ClearableFileInput):
    template_name = "image_widget.html"

class PersonAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.ImageField: {'widget': ImageWidget},
    }

admin.site.register(Person, PersonAdmin)

Here's the template to go along with it. Put it in persons/templates/image_widget.html

{% include "django/forms/widgets/clearable_file_input.html" %}

{% if widget.value %}
  {% comment %} This is for when you are changing a person {% endcomment %}
  <img src="{{ widget.value.url }}" id="currentImage" width="100" alt="current image">
{% else %}
  {% comment %} This is for when you are adding a person {% endcomment %}
  <div>
    <h5>If no file above, this generated image will be used</h5>
    <img id="generatedImage" width="100">
    <button id="newImage">Get New Image</button>
    <span id="loading" style="display: none;">Loading...</span>
  </div>
  <script>
    function loadImage() {
      // The date thingy at the end is prevent image caching
      document.getElementById("generatedImage").setAttribute("src", "/media/persons/tmp.jpg?"+new Date().toISOString())
    }
    loadImage()
    async function getNewImage(e) {
      const loading = document.getElementById("loading")
      loading.style.display = "inline"
      e.preventDefault()
      await fetch('{% url "generate-image" %}').then(() => {
        loadImage()
        loading.style.display = "none"
      })
    }
    document.getElementById("newImage").onclick = getNewImage
  </script>
{% endif %}

Be sure to migrate the database. I'm just using the default sqlite database from settings. Create a superuser too in order to log in to admin.

python3 manage.py makemigrations
python3 manage.py migrate
python3 manage.py createsuperuser

Once those things are set up, run the server and visit 127.0.0.1:8000/admin/ to try adding persons. You should see something like the following:

Add Person Admin Page

Click "Get New Image" to fetch another person that doesn't exist using the generate-image view we wrote earlier.

Change Person Admin Page

Just shows a preview of the Person's image.

End

And that's it! The code for this post is available on GitHub. Good luck!

Teaching React Lifecycle Methods?

David — Thu, 14 Jan 2021 23:05:02 +0000

I'm a high school computer science teacher and while I've used React.js for a couple years now off and on, it's my first time teaching it and I'm definitely no expert. To teach the component lifecycle, I decided to start by introducing class components with componentDidMount, componentWillUnmount, render, etc.

But hooks are so much cleaner!

At this point in their development, students understand basic vanilla JavaScript like DOM manipulation, objects, events, functions, async/await, fetch API; you know, the sort of typical prerequisites to learning a framework. When I was learning React a few years ago, hooks weren't a thing yet, but they were natural for me to pick up because I felt I understood the component lifecycle, setState, etc. clearly from seeing the methods in the class components.

I guess my question is, can a student jump straight in to using React hooks in functional components or should they learn class components first? I understand that hooks are often the recommended way to go in practice, but can introducing them too early be too confusing?