Frontend & Backend Separating code from content
Sharing insights into how this website is built—breaking down and demystifying web publishing while inviting experimentation for your own projects.
Content Management
Using Obsidian notes as a content management system. The notes are published to the web using a static site generator and hosted on Firebase.
- Collect - Reading markdown files in the Obsidian Vault
- Build - Building the static site with a custom, static page generator
- Deploy - Publishing the static site to Firebase
Components
List of components with Client-side JavaScript elements and optional server-side TypeScript functions we developed and are using for this and other websites.
- Cookie consent - Asks user to consent to website's use of cookies.
- Darkmode toggle - Allows user to toggle between light and dark mode.
- Browser games - Displays a particular game with the the option to play this game.
- Simulations - Displays a parituclar simulation with the controls and settings to adjust the simulation.
- Banner slideshow - Displays a slideshow of hero banners customizable with templates.
- Media browser - Displays a selection of media files (images, videos, audio, etc.) in a grid with a search and filter functionality and the option to select an item for either enlarged viewing or following a link to the media.
- Weather widget - Displays the current weather for a specified location using OpenWeatherMap API.
- Feedback form - Displays a feedback form with the option to send feedback.
- Subscription form - Displays a subscription form with the option to subscribe to a newsletter.
- Survey, poll form - Displays a survey or poll form with the option to send feedback.
- Comments form - Displays a comments form with the option to send comments.
- Account management - Displays a signup, signin, and account management form with the option to send feedback.
- Message board - Displays a message board with the option to send messages.
Cookies, Local Storage, and Privacy Consent
Cookies: When the data needs to be accessible by server or requires automatic expiration. Cookies are automatically sent with every HTTP request to the server in the request header.
Cookies are categorized into four groups:
- Essential - Required for basic site functionality
- Functional - Enhances usability, preferences and settings
- Performance - Collects analytics data
- Marketing - Tracks user behavior
Note: Cookies set by Google Analytics are considered both Performance and Marketing cookies.
Local Storage: When storing larger amounts of UI state or cached data that's purely for client-side functionality.
While cookie usage is usually covered by the privacy policy and consent obtained through an initial cookie consent check, local storage may not.
Example of asking for consent when using a feature that relies on local storage:
This feature saves data in your browser's local storage. The data stays on your device and is not shared. By using this feature, you consent to local data storage use. If you do not consent, please do not use this feature.
Note: Users may not fully understand the differences and privacy implications between cookies and local storage.
About
The tech used consists of Python, TypeScript, JavaScript, CSS, and HTML5. Development is done in Visual Studio Code enhanced by Cursor AI. Markdown files maintained with Obsidian serve as local content storage. The Google Cloud Platform provides hosting through Firebase. Remote data storage is covered with Firestore.