Ephes Blog

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.

Images do work now \o/. But it wasn't that easy. For the project scaffolding I used cookiecutter-django which saved me a lot of work. And while the local media storage worked perfectly on the local docker deployment, it didn't on the production deployment. So I had to use s3, which also didn't work right away. The reason was that I used Frankfurt as my s3 region and now the image urls have to start with s3.eu-central-1.amazonaws instead of just s3.amazonaws. It was possible to fix this with just two additional settings, but to find them required some serious googling:

• AWS_S3_REGION_NAME = 'eu-central-1'
• AWS_S3_SIGNATURE_VERSION = 's3v4'

To edit posts I decided to use CKEditor which was also quite easy use on the development server, but not so much on production. The reason was that the CKEditor javascript couldn't find it's own static assets due to the use of ManifestStaticFilesStorage. The solution was to set the path using "window.CKEDITOR_BASEPATH = '/static/ckeditor/ckeditor/';" somewhere in a script-tag. But this didn't work in the django admin frontend since it comes with it's own templates. Luckily it's possible to tell the admin frontend about additional javascript files that should be loaded like this:

class BlogPostModelAdmin(admin.ModelAdmin):
    list_display = ('title', 'author', 'blog')

    class Media:
        js = ('js/ckeditor_fix.js',)

admin.site.register(BlogPost, BlogPostModelAdmin)

Another obstacle was how to make the images behave responsive. For now I'm just using 'class="img-fluid"'in the img tag to tell bootstrap to apply some responsiveness magic. But that's merely a hack - what will happen if I want to switch to foundation as a frontend framework? Do I have to change the content of all articles? But I'm not a frontend guy and have no clue how to do this properly.

A few weeks ago, I lost my old homepage. The motherboard of the server broke and my provider said that it was so old that they couldn't find a replacement. They tried to put the hard drive into a newer server, but this also didn't work, because the vintage linux version I was using refused to boot on this newfangled contraption.

The last time I updated my machine might have been more then ten years ago. I have a backup, but getting my old stuff to run on a new system requires some work. And if I have to do some work anyway, why not spend it on something interesting and new instead of wasting it on outdated concepts?

So, here we are. I'm building a new homepage from the ground up, rationalizing my yakshaving and NIH syndrom using words like "interesting", "new" and - oh, almost forgot about this - "fun".

 As of today, it's possible to post text articles. Even formatted ones. The next thing I'll try is to add images.