Ephes Blog

Implementing pagination was also quite easy. Since I'm using class based views, I only had to add the attribute paginated_by = 5 to my view class and this snippet to my blogpost_list.html template:

<nav aria-label="pagination">
  <ul class="pagination">
    {% if page_obj.has_previous %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">previous</a><li>
    {% endif %}
    {% if page_obj.has_next %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">next</a></li>
    {% endif %}
  </ul>
</nav>

Now I added very basic video support:

Added rss feeds for blogs. This was a lot easier than expected since django has a syndication framework already built in. This is the complete code I had to add:

from django.shortcuts import get_object_or_404

from django.core.urlresolvers import reverse
from django.contrib.syndication.views import Feed

class LatestEntriesFeed(Feed):
    def get_object(self, request, *args, **kwargs):
        self.object = get_object_or_404(Blog, slug=kwargs['slug'])

    def title(self):
        return self.object.title

    def description(self):
        return self.object.description

    def link(self):
        return reverse('blogs:blogpost-feed', kwargs={'slug': self.object.slug})

    def items(self):
        queryset = BlogPost.objects.filter(blog=self.object).order_by('-created')
        return queryset[:5]

    def item_title(self, item):
        return item.title

    def item_description(self, item):
        return item.description


    url(
        regex=r'^(?P<slug>[^/]+)/feed.xml$',
        view=views.LatestEntriesFeed(),
        name='blogpost-feed'
    ),


<a href="{% url "blogs:blogpost-feed" slug=blog.slug %}"><img src='/static/images/Feed-icon.svg'></img></a>

Images are a lot harder than I expected. Naively I assumed, I could just add an img-tag with the original image  and bootstrap would take care of the rest. But it turned out it wouldn't. And how would it be able to do this? We have a wide variety of viewport sizes nowadays and downloading the same image for all of them would be a huge waste of bandwith. After reading the chapter on responsive images of  Smashing Book 5 — Real-Life RWD I took a deep breath and tried to do it properly. It turns out there is almost no tooling for that, at least in the django world, so I rolled my own image resizing, transposing and compressing solution. I just use pillow with quality set to 65 atm, but l'm planning to replace it with mozjpeg as soon as I find out how to get it to work in the application server docker container.

Anyway, I have a rough first version of responsive images working and now I'm able to just upload an image from my phone and it gets rotated, shrinked and saved in the appropriate sizes automatically. And here's an example of a responsive image of a sweet potato dish I prepared a few days ago:

Usually I use nginx for static files, ssl termination and as a reverse proxy before my application servers. The django cookiecutter template came with a new webserver named caddy. It's written in go and https per default. Usually you have to fiddle around with certificates and a more or less complicated nginx config, but with caddy it was surprisingly easy. The certificate came from letsencrypt and it got installed automatically. After that my site got an A on the ssllabs ssl test page without any further tweaking. Caddy might be a bit slower than nginx, but it's probably fast enough for most people and solves an annoying problem. This is really cool.