David's Blog

HTMX is a new library that allows you to create modern responsive web apps without writing loads of custom javascript or using a bulky frontend framework like Vue or React.

From the HTMX website:

HTMX gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.

Here's a good series of videos from BugBytes on YouTube which shows how to integrate HTMX into your Django project and all of the great things you can do with it: https://youtube.com/playlist?list=PL-2EBeDYMIbRByZ8GXhcnQSuv2dog4JxY

django, htmx

Custom 404 error pages in Django

14 December 2021

It's pretty straightforward to add a custom 404 page to your Django site.

Create a 404.html template in your templates folder. It can be named whatever you want, just make sure you use the same name in your view.

Add the following to your views.py file:

def entry_not_found(
  request,
  exception,
  template_name='404.html'
):
  return render(request, template_name)

Then in urls.py add the following outside of the urlpatterns list:

handler404 = 'your_app.views.entry_not_found'

Remember to set DEBUG = False in your settings to see the results.

code snippets, django

How to use the built-in HTML datetime-local widget in a Django form

1 December 2021

I was looking for a simple datetime picker for my blog post form, assuming I'd have to use a third-party javascript thing, but as it turns out there's one built into HTML and it has broad browser support. Great!

You can specify you want to use the datetime-local widget very simply:

dt_field = forms.CharField(
  widget=forms.TextInput(
    attrs={ 'type': 'datetime-local' }
  )
)

But it doesn't play very nicely with Django forms. The default behaviour probably works fine for many 'create' views, but it doesn't work if you have to specify an initial value or you want to edit a datetime value. The datetime from Django is in the wrong format to be rendered by the widget so it just shows as blank, meaning the user has to set it every time they edit the form – not ideal.

Thankfully I found a very nice solution in this Stack Overflow comment. Simply define a custom datetime-local input and field type (I put this at the top of the forms.py file):

from django import forms

class DateTimeLocalInput(forms.DateTimeInput):
  input_type = "datetime-local"

class DateTimeLocalField(forms.DateTimeField):
  # Set DATETIME_INPUT_FORMATS here because, if USE_L10N 
  # is True, the locale-dictated format will be applied 
  # instead of settings.DATETIME_INPUT_FORMATS.

  input_formats = [
    "%Y-%m-%dT%H:%M:%S", 
    "%Y-%m-%dT%H:%M:%S.%f", 
    "%Y-%m-%dT%H:%M"
  ]
  widget = DateTimeLocalInput(format="%Y-%m-%dT%H:%M")

Then use the newly defined field in your form:

class Form(forms.Form):
  dt_field = DateTimeLocalField()

And that's it! In your form you will get a nice looking datetime-local picker with no third-party javascript or plugins required.

code snippets, django, datetime

Building the Blog v1.0

30 November 2021

I've been saying I would start a blog for years but when the pandemic hit in 2020, and I suddenly had a lot of free time, I thought now is the time to finally tackle this thing. Build a simple blog, get it online, and start writing. I made plans and even a few prototypes, but then just... stopped...

If I'm honest, I didn't really do anything for most of the rest of 2020 apart from work and watch King of the Hill, but at the tail end of 2021 I picked it back up and made a commitment to finally get it done.

I wanted to keep things as simple and lightweight as possible so the public facing blog is built with just Django / html / css. I also made a custom admin site with a little javascript sprinkled in to improve the user experience in some places (modals, forms).

Here's a quick rundown of what I used:-

Django 3.2
django-taggit - for post tags
Pillow - for images
Postgres - for the database (possibly overkill for my needs but hey)
Python-Markdown - the posts are written in Markdown and translated to html with this package and a custom template tag
Google Fonts - for the heading font (Rubik)
Autosize.js - for the blog form on the custom admin site
DigitalOcean - for hosting ($5pm Ubuntu droplet)
NameCheap - for the domain

I have lots of plans to improve things but I'm happy with how it turned out.

django, building

Django Taggit - Removing Unused Tags

30 November 2021

Here's a useful code snippet that removes unused django-taggit tags.

 from taggit.models import Tag

 def remove_all_tags_without_objects():
  for tag in Tag.objects.all():
    if tag.taggit_taggeditem_items.count() == 0:
      print('Removing: {}'.format(tag))
        tag.delete()
    else:
      print('Keeping: {}'.format(tag))

The code is from Paul Mestemaker on Github: https://github.com/jazzband/django-taggit/issues/294

I needed to quickly fix a problem on my development server that had resulted in lots of unwanted tags so I just put the code in an existing view, loaded it once, checked the results, then removed it.

If you wanted to have the option of reusing it you could put it in a custom admin command as suggested in the Github issue thread.

taggit, code snippets, django

Useful Web Dev Links Mega-Post

Layout and components

CSS

CSS Resets

Buttons

Gradients

Shadows

Icons

Fonts

Javascript

Django

Working with APIs

Django general advice and tips

Django project tutorials

Django uploading files

Database design

HTMX

Email

Examples and inspiration

Misc

HTMX - Create responsive web apps with ease

Custom 404 error pages in Django

How to use the built-in HTML datetime-local widget in a Django form

Building the Blog v1.0

Django Taggit - Removing Unused Tags