Marco Azimonti Personal Blog

Learning Lab
My Journey Through Books, Discoveries, and Ideas

Blog Search


Building a PWA Template: structure, styling and core UI

This post details the initial steps in creating a reusable Progressive Web Application template. We cover setting up the HTML structure using Bootstrap 5 components like offcanvas sidebars and modals, applying custom CSS themes, implementing the core application logic, managing local storage for file data, and integrating common UI elements like datepickers and switches.

Dropbox integration into Todo.txt web application

In this blog post, I explain the process of integrating Dropbox synchronization into my existing Todo.txt web application using JavaScript and the Dropbox JS SDK. I cover setting up the OAuth 2.0 authentication flow to obtain user tokens and making API calls to get file metadata, download content, and upload changes. A significant part involved implementing conflict resolution by comparing local and remote file timestamps and presenting a user interface for choosing the correct version. I also detail how my application handles offline changes and synchronizes them when connectivity is restored.

[LinkedIn投稿] AI 支援による Todo.txt PWA の構築

このブログ記事では、私の Todo.txt プログレッシブウェブアプリケーションを紹介します。これは、todo.txt 構文を使用してブラウザで直接タスクを管理するために設計されたツールです。アプリケーションは、タスクの追加、編集、完了、削除、フィルタリングをサポートし、永続化のために localStorage を使用してデータを保存し、オフライン機能のためにサービスワーカーを組み込んでいます。私は、HTML、CSS、JavaScript などの標準的なウェブ技術で PWA を構築し、インターフェースには Bootstrap 5 を、解析には jsTodoTxt ライブラリを使用しました。このプロジェクトの重要な側面は、Visual Studio Code と Cline 内での AI コーディングアシスタントの探求であり、これは開発を加速し、コードを構造化する上で非常に有益であることが証明されました。

[LinkedIn post] Costruire una PWA Todo.txt con l'assistenza AI

In questo post del blog, presento la mia Applicazione Web Progressiva Todo.txt, uno strumento progettato per gestire le attività direttamente nel browser utilizzando la sintassi todo.txt. L'applicazione supporta l'aggiunta, la modifica, il completamento, l'eliminazione e il filtraggio delle attività, memorizza i dati utilizzando localStorage per la persistenza e incorpora un service worker per la funzionalità offline. Ho costruito la PWA con tecnologie web standard come HTML, CSS e JavaScript, utilizzando Bootstrap 5 per l'interfaccia e la libreria jsTodoTxt per il parsing. Un aspetto significativo di questo progetto è stata la mia esplorazione degli assistenti di programmazione AI all'interno di Visual Studio Code e Cline, che si sono rivelati molto vantaggiosi nell'accelerare lo sviluppo e strutturare il codice

[LinkedIn post] Building a Todo.txt PWA with AI assistance

In this blog post, I introduce my Todo.txt Progressive Web Application, a tool designed for managing tasks directly in the browser using the todo.txt syntax. The application supports adding, editing, completing, deleting, and filtering tasks, stores data using localStorage for persistence, and incorporates a service worker for offline functionality. I built the PWA with standard web technologies like HTML, CSS, and JavaScript, using Bootstrap 5 for the interface and the jsTodoTxt library for parsing. A significant aspect of this project was my exploration of AI coding assistants within Visual Studio Code and Cline, which proved highly beneficial in accelerating development and structuring the code.

Building a Todo.txt Progressive Web Application

In this blog post, I present a web application designed for managing tasks in the todo.txt format. I developed this tool using standard web technologies including HTML for structure, CSS with Bootstrap 5 for styling, and JavaScript for dynamic behavior and logic. The application uses the jstodotxt.min.js library for parsing task entries. For data persistence, it relies on the browser's localStorage, and offline functionality is provided through a service worker, enabling users to manage their tasks even without an active internet connection. I cover the application's structure, features like adding, editing, filtering, and importing tasks, and the implementation details.

Syntax highlighting for todo.txt list format

In this blog post, I describe the process of adding syntax highlighting for the todotxt format to my website. The todotxt format is a straightforward plain text system for managing tasks. Completed tasks start with 'x', prioritized tasks begin with '(A)', '(B)', or '(C)', and other lines represent standard tasks. I created a simple JavaScript function to parse each line and apply appropriate CSS classes. These classes then use specific colors and text decorations, like strikethrough for completed items, to visually distinguish different task types within code blocks, making task lists much easier to read at a glance on my pages.

[LinkedIn投稿] 量子鍵配送(QKD)プロトコルのシミュレーション

このブログ記事では、量子鍵配送に対する様々なアプローチを比較する私のPythonシミュレーションの概要を説明します。まず、プロトコルを使用しないベースラインシナリオを検討し、盗聴に対するその脆弱性を強調します。次に、量子ビットの状態準備、測定、およびエラーチェック(QBER)を利用して干渉を検出するBB84プロトコルの実装について説明します。最後に、エンタングルした量子ビットペアとCHSH不等式の破れを利用して盗聴者の不在を確認するE91プロトコルシミュレーションについて述べます。これらのシミュレーションは、量子力学が安全な鍵交換方法をどのように可能にするかを示しています。

[LinkedIn post] Distribuzione quantistica di chiavi (QKD)

In questo post del blog, fornisco una panoramica delle mie simulazioni Python che confrontano diversi approcci alla Distribuzione Quantistica di Chiavi. Esamino uno scenario di base senza protocollo, evidenziandone l'insicurezza rispetto all'intercettazione. Successivamente, discuto la mia implementazione del protocollo BB84, che si basa sulla preparazione dello stato dei qubit, sulla misurazione e sul controllo degli errori (QBER) per rilevare interferenze. Infine, tratto la simulazione del protocollo E91, che utilizza coppie di qubit entangled e la violazione della disuguaglianza CHSH per verificare l'assenza di un intercettatore. Le simulazioni dimostrano come la meccanica quantistica permetta metodi sicuri per lo scambio di chiavi.

[LinkedIn post] Quantum key distribution (QKD)

In this blog post, I provide an overview of my Python simulations comparing different approaches to Quantum Key Distribution. I examine a baseline scenario with no protocol, highlighting its insecurity against eavesdropping. Then, I discuss my implementation of the BB84 protocol, which relies on qubit state preparation, measurement, and error checking (QBER) to detect interference. Finally, I cover the E91 protocol simulation, which utilizes entangled qubit pairs and the violation of the CHSH inequality to verify the absence of an eavesdropper. The simulations demonstrate how quantum mechanics enables secure key exchange methods.

Implementing the Eckert protocol simulation

In this blog post, I conclude the description of Ekert protocol simulation. Following Part 1's setup of entangled pairs and local measurements, I detail the protocol execution flow. Alice and Bob measure their qubits using randomly selected angles. I explain how eavesdropping disrupts the entanglement. The key reconciliation process relies exclusively on the CHSH inequality test for security validation. Measurement results from specific angle pairs are used to calculate the CHSH parameter S. If S exceeds the classical bound of 2, indicating strong quantum correlations, the key generated from measurements in the agreed-upon key basis (0 degrees for both) is considered secure. Otherwise, the key is considered invalid.

Qubits representation in Ekert simulation

In this blog post, I begin describing my Python simulation of the Ekert quantum key distribution protocol. This first part focuses on setting up the necessary quantum components. I define a class to represent a maximally entangled Bell state, specifically |\boldsymbol \Phi^+\rangle = \frac{1}{\sqrt{2}}(|\mathbf {00}\rangle + |\mathbf{11}\rangle), stored as a four-dimensional state vector. Central to the simulation is the `localMeasure` function. It simulates performing a measurement on only one qubit of the entangled pair (either Alice's or Bob's) using a basis defined by an angle \theta via the observable \cos(\theta)\mathbf X + \sin(\theta)\mathbf Z. This function calculates the outcome probabilities, determines the measurement result, and correctly computes the collapsed state of the system after measurement.

Generalized qubit representation in bb84 simulation

In this blog post, I discuss an update to my previous BB84 protocol simulation, focusing on a more generalized approach to qubit representation and measurement. Instead of fixed rectilinear and diagonal bases, I now define measurement bases using an angle parameter \theta. This parameter constructs an observable \cos(\theta)\mathbf X + \sin(\theta)\mathbf Z. The qubit preparation and measurement methods now utilize the eigenstates of this observable. The measurement function calculates projection probabilities onto these eigenstates and simulates the probabilistic measurement outcome, collapsing the state accordingly. This offers flexibility while the overall BB84 protocol structure for key generation, transmission, and reconciliation remains conceptually similar.

Implementing the BB84 protocol simulation

In this blog post, I present a Python simulation of the BB84 quantum key distribution protocol. I implemented classes to represent qubits and the protocol itself, handling the core mechanics. The simulation covers Alice generating qubits with random bits and bases, transmitting them to Bob, and the potential interception by Eve. Bob measures the received qubits using his own random bases. The reconciliation phase involves Alice and Bob comparing bases publicly, discarding mismatched measurements, and estimating the quantum bit error rate (QBER) from a subset to detect eavesdropping. If the QBER is below a threshold, a shared secret key is established.

Implementing the no encryption protocol simulation

In this blog post, I present the implementation of the class without encryption, which serves as the simplest protocol in my cryptography simulation. This class inherits from the base class I previously defined. Its method for generating a key uses NumPy to create a pseudorandom key of a configured length, simulating a shared key without any secure exchange mechanism. The key is always valid, reflecting the lack of a real security process. It relies entirely on the base class's encrypt and decrypt methods, which perform a one-time pad operation. I also include unit tests to verify key generation consistency (using a fixed seed) and the correct encryption/decryption cycle.

More ...