Full-stack web development
The following examples and demos illustrate our web design projects.
Machine Learning
AI Coding Agents can create valid, verifiable, loosely-coupled modules with well-documented interfaces by following our AI coding guardrails.
The Ron Reade app uses Transformers.js to run compact AI models inside a web browser, see GitHub repository. Hence this text-to-speech app maintains complete user privacy while reading aloud text with natural cadence and realistic speech.
Web Components
"Sensors: accuracy vs precision" app packs a whole application (compressed to ~10kB) into a simple, standards compliant, HTML web components, such as:-
<web-comp>
<script type="module" src="web-comp.js"></script>
</web-comp>
Situational Judgement Tests
Situational Judgement Tests assess candidates' subtle judgements via a web app built in TypeScript with Next.js and React. Validated by Usability Studies, the app maintains accessibility with bespoke HTML attributes such as:-
aria-label="Option A is best"
Serverless
CDK pseudo-code
See GitHub.com/MartinMPhil/oak for examples of infrastructure-as-code using Cloud Development Kit (CDK) deployed on Amazon Web Services (AWS).
Authentication pseudo-code
See Martin M.Phil. GitHub repository for examples of OAuth login with Cognito user pools.
See Martin M.Phil. GitHub repository for this single-table database design which provides fast, reliable, scalable and inexpensive queries on the secure and fully-managed DynamoDB.
See Martin M.Phil. GitHub repository for an example of TypeScript server functions running in Node.
Test driven development
Specifying unit tests before writing code increases code quality and quickens software development.
Integration tests ensure modules and components function well together.
End-to-end tests allow simulate real-user interactions.
Web design
Event Dictionary
| Event (Trigger) | Source | Physical Action / Logic Signal |
|---|---|---|
| APP_OPENS | System | The browser finishes loading the initial HTML, CSS, and JS bundle. |
| MODEL_LOADED | System | The artificial-neural-network model and all associated necessary resources are successfully cached in the browser's memory. |
| RETRY_TIMER_TICK | System | Delay factor fired by model loading retry strategy. |
| MODEL_ACQUISITION_FAILED | System | Retry strategy for model loading has failed to load the text-to-speech model and all associated necessary resources. |
| TEXT_UPDATED | System | HTML input event on the text-area fires on every keystroke, paste, or deletion and triggers validation guards. |
| PROCESS_TEXT | User | Pressing the 'Create Speech' button. (Note: Logic is ignored unless the state is Text_Valid and Model_Primed). |
| CLEAR_TEXT | User | Pressing the 'Clear Text' button. This resets both the text-area content and the Text_Validation state region. |
| HALT_PROCESSING | User | Pressing the 'Halt Processing' button during an active text-to-speech conversion job. |
| CONVERSION_SUCCESS | System | The text-to-speech conversion successfully completes for the final audio chunk for the current Text Manifest. |
| CONVERSION_FAILED | System | The text-to-speech conversion engine throws an exception or error during processing. |
| UNCAUGHT_EXCEPTION | System | A global error listener catches a critical system crash (e.g., window.onerror). |
State Dictionary
| Parent State | State Name | Entry Actions (App Behaviour) |
|---|---|---|
| Root.Model_Manager | Model_Acquisition | Start model acquisition download; Show status: Downloading artificial neural network.; Disable: Create Speech button; Disable: Halt Processing button; Audio player semitransparent. |
| Root.Model_Manager | Model_Acquisition_Retry | Show status: Model loading failed - retry {retry_count}.; Disable: Create Speech button; Disable: Halt Processing button; Audio player semitransparent. |
| Root.Model_Manager | Model_Unavailable (Final) | Terminal state. Show status: Sadly we encountered a problem. Please reload this page or try again later. |
| Root.Model_Manager | Model_Primed | Model successfully downloaded. Defer to orthogonal regions (Input, Output) nested in this Model_Primed parent state. |
| Root.Text_Validation | Text_Empty | Clear text-area; Disable: Clear Text button; Disable: Create Speech button. |
| Root.Text_Validation | Text_Valid | Enable: Clear Text button; Clear all text warnings. (Note: Create Speech button enables only if Model_Manager is in Model_Primed state). |
| Root.Text_Validation | Excessive_Word_Length | Enable: Clear Text button; Disable: Create Speech button; Show status: Your text contains overly long words. |
| Root.Text_Validation | Excessive_Text_Length | Enable: Clear Text button; Disable: Create Speech button; Show status: Text too long. Limit to 10,000 characters. |
| Model_Primed.Input | Awaiting_Conversion | Show status: Please enter text to be read aloud.; Disable: Halt Processing button. |
| Model_Primed.Input | Converting | Snapshot text-area content; Hierarchical Text Chunking; Show status: Processing text chunk {x} of {y}.; Disable: Create Speech button; Enable: Halt Processing button. |
| Model_Primed.Input | Conversion_Error | Show status: Sadly we encountered a problem. Please try again.; Disable: Halt Processing button. |
| Model_Primed.Output | Speech_Ready | Assign new audio data to audio player; Audio player opaque; Show status: Ready. |
| Model_Primed.Output | Audio_Empty | Terminate playback; Reset seek-bar; Flush data; Audio player semitransparent. |
| Root | Unhandled_Error (Final) | Terminal state. Show error status; Disable all interaction buttons; Audio Player semitransparent. |
Transition Map
| Parent State | Current State | Event (Trigger) | Guard (Condition) | Next State |
|---|---|---|---|---|
| Root | (initial) | APP_OPENS | - | Model_Acquisition |
| Model_Primed.Input | Awaiting_Conversion | PROCESS_TEXT | [text exists AND valid length] | Converting |
| Model_Primed.Input | Converting | CONVERSION_SUCCESS | - | Awaiting_Conversion |
| Model_Primed.Input | Converting | HALT_PROCESSING | - | Awaiting_Conversion |
| Root | (any) | UNCAUGHT_EXCEPTION | - | Unhandled_Error (Final) |
As a user I want to easily create my suggestions, via desktop or mobile, to begin the voting process. Acceptance criteria:-
- Expandable input text fields
- Unique identifiers for each proposal
- Easily rearrange proposal order
- Allow editing before distribution
- Responsive mobile-first web design