Friday, October 30, 2020
CrypTool website completely renewed
In the course of 2020, the CrypTool portal was comprehensively renewed once again. The website at www.cryptool.org was originally created in 2003 for CrypTool 1 and has been rebuilt into the "CrypTool portal" in 2008 with the addition of CrypTool 2 and JCrypTool. 2009 it has been extended by CrypTool-Online.
The previous system
The last comprehensive renewal took place in 2016. Since then the website has been operated with the Content Management System (CMS) Joomla. On top of that, the libraries Bootstrap 3 and jQuery were used for the front end of the website.
A CMS is a piece of software that is set up inside a webserver to manage the contents of a website. From then on, all content management tasks are taken care of by that system.
Using Joomla was very simple for the content authors, as they could easily edit the content in a graphical WYSIWYG editor and view it directly on the website. For administrators, however, it meant a certain amount of maintenance work, as updates had to be installed regularly (e.g. for security patches or new or improved features).
The contents of the website were managed by Joomla within a database and the pages were generated from it on request: When you called a page of the CrypTool portal, it was generated live for you in the background by Joomla on the web server* and then delivered to your browser. That always took some time and slowed down the loading time of the website. Joomla also needed a database server for that, which increased the complexity of the system.
Therefore, a system with lower total cost of ownership and faster loading time was sought ...
* = Generating a page means inserting data into an HTML template. An HTML template is a frame structure that contains constant parts of the website (such as the header and footer bars). The contents that differ per page (such as the text of this article) are then inserted into them.
Â
New backend system
One possibility to archieve that is to generate the website beforehand and only deliver prebuilt ready-to-use HTML files. Such technologies are called "static site generators". However, this is only possible if the contents of the pages are "static" (meaning they do not change at runtime). Dynamic code execution in the client remains possible with JavaScript though. The CrypTool portal fulfills these requirements.
There are many static site generators available. For the CrypTool portal Jekyll was selected. Jekyll is simple (without much frills) and designed for websites with blog articles, just like the CrypTool portal. Jekyll is also (like Joomla) completely open source.
Workflow of the new system
The data of the old CrypTool portal was extracted from the Joomla database and also revised in the course of the renewal. It is now kept in a Git repository, together with the project files for generating them into the static website. When changes are made in the repository, the server automatically regenerates the website from it and stores it in the web server directory. When you now call a page of the CrypTool portal, you simply display the HTML file stored at the server's hard disk without any further changes.
Updating to this procedure provides several advantages: Since only pre-generated (static) files are provided (instead of generating them live through dynamic code execution), the security of the website has been increased and the loading speed has been improved. Since there is no longer any CMS software that needs to be kept up to date, the ** administration workload has been reduced**. Since the data is held directly in the repository, a database server is no longer required, reducing the complexity of the system.
New frontend surface
In addition to the backend system, the frontend interface of the website has also been renewed: Bootstrap 3 was updated to Bootstrap 4 and with its renewed components, the layout of the page has been redesigned. As a result, the website is now fully responsive (mobile, tablet, desktop, TV).
A darkmode has been added, which can be toggled by an icon in the header bar. The search function was also extended. It can be found in the header as well.
SVGs are now used for logos, icons, and banners wherever possible. These can be scaled without loss of quality and therefore remain sharp even at hight resolutions. Besides that, they often have a smaller file size than the previous pixel graphics.
Updated CTO plugins
As part of the complete renewal, the user interfaces of the CTO plugins have also been updated to Bootstrap 4. Some plugins for cryptanalysis have even been completely rewritten: Autocorrelation, Frequency analysis, Vigenère analysis and the Number converter.
Some CTO plugins have also been updated to take advantage of the latest web technologies such as WebAssembly: The Caesar cipher and the Monoalphabetic substitution use Python live in the browser for their calculations. The code can be customized and executed directly on the website without the need to download it. This is convenient, faster and frankly pretty cool.
The Msieve Factorizer also uses WebAssembly to perform calculations closer to the processor. The calculation-intensive factorization was very slow in the browser (especially for large numbers) with "normal" JavaScript. Now the C library – compiled as WebAssembly – can be executed directly in the browser. Thus it is almost as fast as a standalone program written in C.
In the future, more CTO plugins with such technologies will be added. The next ones are already in development ... but more about that in a separate article.
Any suggestions?
Do you have feedback or suggestions for the new website? If so, we would be happy if you send us a message. Thanks a lot!