This is a text-only version of the following page on https://raymii.org: --- Title : Site updates, new layout for overview pages Author : Remy van Elst Date : 04-05-2018 URL : https://raymii.org/s/blog/Site_updates_new_layout_for_overview_pages.html Format : Markdown/HTML --- This site is generated with my [self-written open source static site generator named ingsoc][1] (named after 1984). I've updated the overview pages with a new layout so that items are sorted by their publishing date instead of alphabetically. I've also rewritten some internal logic regarding tags and categories. This article shows the difference before and after and includes some old screenshots of raymii.org

Recently I removed all Google Ads from this site due to their invasive tracking, as well as Google Analytics. Please, if you found this content useful, consider a small donation using any of the options below:

I'm developing an open source monitoring app called Leaf Node Monitoring, for windows, linux & android. Go check it out!

Consider sponsoring me on Github. It means the world to me if you show your appreciation and you'll help pay the server costs.

You can also sponsor me by getting a Digital Ocean VPS. With this referral link you'll get $200 credit for 60 days. Spend $25 after your credit expires and I'll get $25!

### Semantics The software suite is named `ingsoc`, the actual site generator is named `newspeak.py`. Read more on it [here][1]. Before the generator this was a PHP site, but who needs a dynamic scripting language if all you do is host non- dynamic content. `ingsoc` has the concept of categories. My site is divided into the following categories: * [Software][3] * [Tutorials][4] * [Snippets][5] * [Articles][6] * [Blog][7] If I want I can add any number of categories. When I started twelve years ago the site it seemed that that division into categories was enough. But soon I wanted to be able to have more options to categorize an article. A tutorial about a VPN can be on Ubuntu or CentOS or IPSEC or OpenVPN and I wanted to be able to group similar articles. I did not want a million categories since that would not fit the target, an article can only have one category. Tags to the rescue. I built in tags to the generator and created seperate RSS feeds per tag and an overview page for each tag listing the articles per tag. Like categories, but way more. Tags are cheap, the current site has 927 tags, v.s. 5 categories. So why not ditch the categories all together? Well, they are used in the URL and it is good to have one 'main' category for an article to fall under. That is has multiple tags, is in my opinion, different. A tutorial is still a tutorial no matter which OS it applies to. The front page has a configurable number of items listed with a summary per item. A year ago I added the 'everything' page, which houses all items sorted by date. Looking at the statistics, both that page as well as the tag overview pages are the most visited parts of the site next to the articles. I got some feedback recently that the sorting was off and the person that emailed me thought it was more logical to sort it by date. Which I agreed with So off to the Python code it was. Oh if you are wondering, this is how the code output looks during a deploy: ![][8] ### Before and after Before, tag pages, category pages and the All Items page were three different methods in my pyhton code. Different looks and layouts, thus less simple to maintain or change. Look at what they are now with the pictures below. #### Tags This is the old 'tag' view: ![][9] This is the new 'tag' view: ![][10] As you can see, the date is added and sorting is on that date now. If I want I can later on easily add some javascript to make that table sortable ascending or descending, but that is for a later time. #### Categories This is the old 'category' view: ![][11] This is the new 'category' view: ![][12] As you might notice, it looks very similar to a tag page. That is because it is a tag page, not a category page. I added the category as a tag to all pages, so that the layout and code is the same. I removed the category view and made those into redirects. Instead of two code paths, I now have only one. #### Everything This is the old 'everything' page: ![][13] This is the new 'everything' page: ![][14] Here again, you might notice it looks like a tag page as well. Again, it is. I sneakily add the `all` tag to all items and filter it out in the HTML. It is used here, and it saves me another code path. This way my python code is more simple and more easy to maintain. This page before was already sorted on the date, but it was not visible. It is now to have a better overview of the timeframe. ### Conclusion and old screenshots By reducing the code paths it is both simpler for me to maintain and change the code and the layout is the same in all three cases. Plus it was fun to go into my code and add sorting with `DateTime`. If you are wondering how this site has looked before, here are screenshots. #### 2010, PHP The frontpage in 2010, when this was still PHP: ![][15] A news item: ![][16] A tutorial: ![][17] An overview page: ![][18] The links page, with a dynamic thumbnailer that also did borders and site screenshots (in PHP with gd): ![][19] #### 2012, PHP Still PHP, but a new layout. Notice the modern "Metro" look before Microsoft did it. The frontpage: ![][20] An overview page: ![][21] An article: ![][22] I had a special text-only version of the articles for text based browsers and mobile phones: ![][23] #### 2014, static site and themes In 2014 the static site came around. I had cool dynamic CSS to create both a dark and a light theme (like Solarized). The dark theme was removed late 2016. This layout and site is still mostly in use today. The 'Dark' frontpage: ![][24] The regular frontpage: ![][25] A dark overview page: ![][26] A regular overview page: ![][27] A dark article: ![][28] A regular article: ![][29] [1]: https://raymii.org/s/software/ingsoc.html [2]: https://www.digitalocean.com/?refcode=7435ae6b8212 [3]: https://raymii.org/s/software/ [4]: https://raymii.org/s/tutorials/ [5]: https://raymii.org/s/snippets/ [6]: https://raymii.org/s/articles/ [7]: https://raymii.org/s/blog/ [8]: https://raymii.org/s/inc/img/raymiiorg/ingsoc.png [9]: https://raymii.org/s/inc/img/raymiiorg/before_tag_openvms.png [10]: https://raymii.org/s/inc/img/raymiiorg/after_tag_openvms.png [11]: https://raymii.org/s/inc/img/raymiiorg/before_category_blog.png [12]: https://raymii.org/s/inc/img/raymiiorg/after_category_blog.png [13]: https://raymii.org/s/inc/img/raymiiorg/before_all.png [14]: https://raymii.org/s/inc/img/raymiiorg/after_all.png [15]: https://raymii.org/s/inc/img/raymiiorg/2010-frontpage.png [16]: https://raymii.org/s/inc/img/raymiiorg/2010-news.png [17]: https://raymii.org/s/inc/img/raymiiorg/2010-tutorial.png [18]: https://raymii.org/s/inc/img/raymiiorg/2010-category.png [19]: https://raymii.org/s/inc/img/raymiiorg/2010-links.png [20]: https://raymii.org/s/inc/img/raymiiorg/2012-frontpage.png [21]: https://raymii.org/s/inc/img/raymiiorg/2012-category.png [22]: https://raymii.org/s/inc/img/raymiiorg/2012-page.png [23]: https://raymii.org/s/inc/img/raymiiorg/2012-text-only.png [24]: https://raymii.org/s/inc/img/raymiiorg/2014-dark-frontpage.png [25]: https://raymii.org/s/inc/img/raymiiorg/2014-light-frontpage.png [26]: https://raymii.org/s/inc/img/raymiiorg/2014-dark-category.png [27]: https://raymii.org/s/inc/img/raymiiorg/2014-light-overview.png [28]: https://raymii.org/s/inc/img/raymiiorg/2014-dark-article.png [29]: https://raymii.org/s/inc/img/raymiiorg/2014-light-article.png --- License: All the text on this website is free as in freedom unless stated otherwise. This means you can use it in any way you want, you can copy it, change it the way you like and republish it, as long as you release the (modified) content under the same license to give others the same freedoms you've got and place my name and a link to this site with the article as source. This site uses Google Analytics for statistics and Google Adwords for advertisements. You are tracked and Google knows everything about you. Use an adblocker like ublock-origin if you don't want it. All the code on this website is licensed under the GNU GPL v3 license unless already licensed under a license which does not allows this form of licensing or if another license is stated on that page / in that software: This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . Just to be clear, the information on this website is for meant for educational purposes and you use it at your own risk. I do not take responsibility if you screw something up. Use common sense, do not 'rm -rf /' as root for example. If you have any questions then do not hesitate to contact me. See https://raymii.org/s/static/About.html for details.