Website changes []

I recently made a lot of changes to this website, they aren't big changes but the devil is in the details. I made these mostly in support of writing about my thesis as a blog post. I for example moved to SVG images because I recently fell in love with Inkscape, however I wanted to ensure that compression was enabled for these because XML is so verbose. Which took me on a small NGINX adventure. Then I did various styling changes in light of my job hunt. I still think this theme is correct but I made it more 'tight'. These were just tweaking with CSS, except for the desire to typeset like latex, which I'll discuss in the end.

1 Org export

I wanted to have source code highlighting with Pygments. Org mode export didn't do any coloring for me, however I came upon this question. which sort of answered it for me, except for telling how to load the lisp files which I figured out by studying the GitHub. Then I modified the answer to include that so others don't have magically know that. There were standard style sheets for syntax highlighting available for pygments, I chose my favorite: monokai.

In the org references I wanted to have numbered citations rather than names. This article was invaluable to help with that. The issue I had with that code is that I called it org-ref-unsrt-html-processor, but I was using a custom variant called org-ref-unsrt-pelican-html-processor, because of the Pygments extension. Renaming that correctly made it work and cost me about 4 hours of my life. So you can just dump that code in you config.el file, but be aware of giving it the right export name.

The final thing I did was making SVG files export to img tags rather than object tags, because object tags just work very poorly. (Once I published it I couldn't get it to work at all). What I did was overwriting the image formatting function in elisp as can be seen in source block fixsvg. The only thing I did was remove the check upon SVG files, instead it'll use the default path which is using an img tag. I placed this after the ox-html require so it got overwritten by all following code (including the deriving stuff.. apparently).

(require 'ox-html)
(defun org-html--format-image (source attributes info)
  "Fix org's implementation, no check for svg files (object is deprecated at 
    this point and not trusted by most browsers)"
    (org-html-close-tag
     "img"
     (org-html--make-attribute-string
      (org-combine-plists
       (list :src source
	     :alt (if (string-match-p "^ltxpng/" source)
		      (org-html-encode-plain-text
		       (org-find-text-property-in-string 'org-latex-src source))
		    (file-name-nondirectory source)))
       attributes))
     info))

I'm still very happy to work in org mode, in fact the evaluation of source blocks makes it a great combination with plant UML, which I then can export to SVG images. This makes it much easier to describe ideas (being a visual thinker), and allows version control upon UML.

2 NGINX

I enabled gzip compression for a bunch of different file extensions, (note this is handled by your web server, so its a practically free speedup for your website). but I know for a fact the SVG images profited a lot form that. This article explains how to do it for NGINX.

I also tested the speed and it told me to enable caching of the SVG files, this had me confused for a little while but it meant you should tell the browser clients that the resource will stay the same for a long time (reducing load on your server and since networking is slow giving a speedup). This serverfault explains it for NGINX, I had another post but couldn't find it back, that said to put it on a year however (365d). Since I'm not planning to change anything except the PDF's my NGINX config now looks like source block 2.

# browser caching 
location ~*  \.(jpg|jpeg|png|gif|ico|css|js|svg)$ { 
	expires 365d; 
	add_header Pragma public;
	add_header Cache-Control "public";
} 

# pdf also cache, shorter because we want to update our resume frequently 
location ~*  \.(pdf)$ { 
	expires 30d; 
	add_header Pragma public;
	add_header Cache-Control "public";
}  

3 Typeset like latex

If you've ever worked with latex files you may have noticed how the text is aligned. Normally (MS Word for example) this is in ragged mode, where one side is a straight line down and the other side is 'ragged'. Latex type-sets with full justification but doesn't varied spacing between the words. I wanted that on this website. Btw, I'm fully aware that only a select few people will even notice this, the important point is that I will notice this.

I basically went trough this entire site, I recommend doing the same if you manage your own CSS for your website. However there were two important sections, the one that describes ragged, and the one about hypenation. They basically recommend against trying to emulate latex. But me, being the arrogant little bastard I am, was like "This is my blog, don't tell me what to do" and started experimenting. The result of which you can see in source block 3.

p
    text-align: justify
    hyphens: auto
    line-height: 1.3
    \+p
	text-indent: 1.375em

// display inline otherwise hypenation doesn't work (normaly inline-block)
.entry-content a
    display: inline

The key to having proper justification is text-align: justify and hypens: auto, do note that for auto hyphens you need to set your website language, they actually have made dictionaries per language, of where to place hyphens. Another issue that I had was that certain lines would have massive spacing in the words, after staring at that for several hours I noticed this only happened before inline links. I put those on display inline-block, which apparently means: no line breaks. Once I put that on display inline it looked practically perfect.

There is some other stuff in that sass, such as doing text indent for succeeding paragraphs (rather than margins), which I think looks the 'nicest', but that's just personal preference. There are various other techniques, for which I refer to the expert website.

Recent stuff

Tags