website·Indexed 29 days ago
https://wiki.morganeboussert.com/A personal knowledge base covering front-end development, UX/UI design, and product management. Topics include CSS performance and responsiveness, JavaScript architecture, React Native, NextJS, Godot, and UX research methods such as design thinking, cognitive biases, and eco-conception.
The Observer pattern allows a 'Subject' to notify one or more 'Observers' about events without knowing the specific classes of those observers. This is useful for decoupling game systems, such as triggering achievements when specific gameplay events occur.
Key Components:
addObserver and removeObserver) to manage that list. When an event occurs, the subject iterates through the list and calls the onNotify method on each observer.Achievements) that implements an onNotify function to receive and dispatch events, such as calling an unlock(achievement) method.Example Use Case:
An 'Observable Physics' system where a Physics class implements the Subject interface. Other systems can subscribe to specific physics events, for example: physics.entityFell().addObserver(this).
UX Research uses a combination of qualitative and quantitative methodologies to understand user needs, behaviors, emotions, motivations, and frictions. Combining both is known as triangulation, which allows researchers to view the same subject from different perspectives. Typically, qualitative research is conducted first to gain initial insights and inform the questions for quantitative studies.
Quantitative Research:
Qualitative Research:
To maintain a scalable and testable frontend application, follow these core architectural guidelines:
type, key, ref, props, _owner, and _store. When using JSX, the code is compiled into React.createElement calls. To display these elements in the browser, a root is created from an HTML element, and the React element is passed to the render function, which converts it into an HTML node.// 1. Create a React element
const reactElement = React.createElement('p', { maProp: 'hello' }, 'My added content');
// 2. Define the app root
const root = createRoot(document.getElementById('root'));
// 3. Render the element to the DOM
root.render(reactElement);Effective game design follows an iterative process of creating a playable build as quickly as possible and refining it. Documentation should be structured into three progressive levels of detail:
To improve technical proficiency, focus on these reading strategies:
UX content encompasses all words, images, ideas, and videos appearing across different product stages. It is divided into four primary categories:
Effective UX Writing balances a consistent, recognizable voice with usability to ensure the product is easy to use, even for beginners.
Global state management is used to solve several architectural challenges in React applications:
useState, useRef, useReducer combined with Context API) or via external singleton state modules.Use the SOLID principles to ensure a robust and maintainable architecture:
Effective front-end development requires a structured approach to UI components:
The Golden Circle framework (by Simon Sinek) helps define a product's core purpose by answering three fundamental questions: