SteamTime makes use of a few different programming technologies to accomplish its tasks.

The backend is written in Python and uses Flask as the web framework. The code is viewable at the links above. The visual display of all the data is handled by the standard web languages HTML, CSS, JavaScript, and the jQuery framework for JavaScript.

The Backend Process

The SteamID passed to the input box is first tested to see if it's a vanity URL or a full 64-bit numerical SteamID, as this will determine which Steam API URL is needed.

The correct URL is then queried by the Python code and a giant jumble of data is returned in the form of a JSON object. More Python gets to work parsing out the bits of data required by the individual pieces of SteamTime. The list of games is sorted by the 'hours played' column and is packaged up with other variables collected during the JSON parsing and are ready to be pushed to the client, your browser.

Client Side

Once the JSON object is nicely sorted there is one final step before everything is ready to be displayed on the page. SteamTime makes use of an excellent JavaScript library called Charts.js. This library provides really good looking visual data displays and is quite easy to work with. Of course it requires its input data be formatted a certain way, so another round of Python goes to work on the stored data we parsed from the Steam API and gets it ready to be passed to Charts.js as label names, graph data points, colors, etc.

Finally, the data is ready to be displayed. Flask makes this process quite easy - a basic template is set up in HTML that allows variables to be passed in from the server. The variables come from all the data processing done earlier with Python. The data is passed to the client and everything is styled with CSS for the very final step.

Where is my SteamID?

A SteamID is a unique identifier used to identify a Steam user's account.
The easiest way to find your ID is to grab it from your Steam Community profile.