Website

Introduction

This website is a Python-Flask web-app, rendering templates with HTML, JavaScript and CSS. I find Flask to be the most satisfying framework to use to quickly get things running, meanwhile also having to write a lot of the code yourself.

Besides article content like this, most of the content is rendered dynamically from the backend for increased productivity:

  • On the top nav, the menu pages are rendered automatically from context returned from the server on load.

  • On pages where a list of articles is loaded like the Home page, articles relevant to the page are automatically fetched and rendered by latest date (modified if one exists, created otherwise).

  • On the left nav, the table of contents automatically checks all anchors of the page and creates a list that can be clicked to jump to the anchor. This includes items fetched above. These elements aren't all HTML-anchors, therefore this is done via JavaScript exclusively.

  • On the right nav, there are User Actions - just one for now: Dark mode. This feature should exist on all websites. Here, the website relies on the CSS light-dark scheme, along with a bit of JavaScript. The "Save Preference" button updates the session on the server side so that every consecutive page starts with the new mode on load.

Unlike other pages which profit from this automation, articles like these are impractically created - written directly in HTML. this is pretty high on the list of updates.

Roadmap

There are short, medium and long terms goals for this website. At such an early stage, the list is bound to change (a lot), however here are the main points I'm aware of as of now:

  • Responsive design and Style refactor{?}
  • Footer (including Sitemap{?})
  • Internal Contact Form submission system
  • User registration / login
  • Markdown conversion for pages (or other better way of writing pages)
  • Pagination for article listings
  • Page filtering and site search
  • More User Actions
  • User stats and gameification
  • User notifications (including Emails{?})
  • Private pages, pages with access request
  • Payment page (donate or just test payments)
  • Article archive
  • Admin portal

{?}: Subject to change (moreso than everything else).

Content Updates

Beyond features to the website, more content will be added, namely projects - which may or may not be related to programming - and news. Eventually I would like to add games to the navigation headers, though this will take time like everything else.

01/01/25 | Footer and Analytics

  • A footer was added to the bottom of the page.
  • Analytics have been added.

Analytics render views per page and for the overall website. A view is considered new if you haven't visited the page for at least one hour.

The system takes your I.P. address and converts it to a unique* integer that cannot be converted back to the original I.P., thus avoiding any privacy compliance issue. These integers are added to a database along with the timestamp, which allows the system to determine if your visit is a new view or not.

*If we consider I.P. address '5.0.0.2.1', then the conversion multiplies all integer which aren't zeros: 5 x 2 x 1 = 10.

Technically, this means different I.P. addresses could yield the same result (e.g. '1.5.2.0.0' or '2.1.1.5.0'), however when tested with real I.P. addresses this never occurred, and while this is a possibility the margin for error is acceptable in the interest of privacy.

06/01/25 | Responsive Design

  • New Style refactor, rendering the website comfortably for all resolutions down to 800px width.
  • New Mobile layout, rendering on all resolution below 800px width.

    • Another refactor and overall style.css cleanup will be needed, though it was really important to release this so the website could be loaded irrespective of the device.

  • The domain has been indexed on Google and now returns in the results for "Tracton Dynamics".
  • Fixed display bug with the Darkmode "Save Preference" button. Change the button to only read "Save" to avoid any layout overflow issues moving forward.

21/01/25 | Map Generator and Image Carousel

  • New Map Generator program.
  • New Image Carousel program.
  • New Featured Gallery on Home page.
  • Further cleaning of the style.css stylesheet.
  • Implementation of accessibility features: image elements have alts and button elements have names.
  • Darkmode is now enabled by default.
  • Fixed a problem with the Analytics program where malformed JSON data could cause the site to go down.

23/01/25 | Analytics Refactor

  • Analytics now render asynchronously on page load, rather than being server-side rendered as they were before. This is a pretty common-sense change as it will improve performance and prevent downtime from internal server errors.
  • Button names were replaced by aria-label as that was the proper accessibility attribute.
  • The middle button in the Carousel now download the main image.

02/02/25 | Meta Tags and Final Analytics Revision

  • All pages now have specific titles, meta descriptions and Open Graph tags.
  • Analytics no longer track invalid paths.
  • Analytics had a final revision to stop recording paths that don't exist.

    • While recording these paths was intentional in the beginning, it made the system vulnerable to injections in the path breaking the program as the JSON analytics file could no longer load as JSON. This was incidentally the reason for the internal server errors mentioned in the 23/01/25 update.

22/03/25 | User Authentication

  • User authentication

    • There are a lot of new functions introduced by this feature, which are covered in greater detailed in the User Authentication project page. TL;DR you can now register an account, log into an account, verify an email with 2SV, update username/email, reset a password or delete an account.

  • All-purpose Modal JS

    • All user-auth functions run from a single Modal JS component which can handle various messaging/input services.

  • Outbound email

    • 2SV and forgot-password functions will send emails from the Tracton Dynamics domain. The website no longer has a temporary Gmail account as contact address.

  • Rate limiting

    • Rate limiting was introduced for user-auth and email functions.

  • New favicon

    • With the introduction of emails and their styling, the website's favicon was uploaded to match.

  • Analytics had a final-final revision to prevent the possibility of API manipulation.
  • Separation of backend code into multiple dedicated files.

    • This separation was necessary to keep reasonable file sizes for website, API and user-auth routes, but also to streamline path variables, to work with both Windows and Linux directory structures seamlessly

  • Separation of CSS code into multiple dedicated files.

New Roadmap

With the release of user authentication - the largest content deployment yet - I have a clearer vision of upcoming features. This is because:

  • Multiple goals from the original roadmap have been met.
  • User authentication has carved a clear path for existing and new goals.
  • I've had a few new ideas since the first roadmap.

Much like the first roadmap, none of these goals are garanteed to be met, and ones marked with {?} are even more uncertain.

  • Admin portal
  • Internal Contact Form submission system
  • Notifications
  • Pagination for article listings and carousel images
  • More user actions
  • Performance testing
  • CORS and CSP directives
  • Sitemap
  • Browser games{?}

23/03/25 | Day-after Hotfixes

  • Analytics had a final-final-final revision to fix an issue where the page views were the same on every page.
  • Fixed an issue where the 30-second rate-limiting for emails would get triggered even if no email was sent (from an modal error).
  • Fixed a bug with the map generator that would keep running with the same map seed instead of randomizing it (not found prior as it only occurs on Production).
  • Harmonized backend function to have all parameters in the same place across functions and organizing them by topic.