Frontend Development
Matrix.AI has multiple websites under its organisation. The architecture for these websites is aligned to be identical to make it easier for developers to create and develop across multiple domains. The process of which these websites are developed includes the design of the webpages and then the implementation.
Key Development Ideas
- Accessible: Ensure usability for all users by following accessibility standards.
- Portable: Design responsively for seamless functionality across various devices and screen sizes.
- Interactive: Create engaging user interfaces with interactive elements to enhance user experience.
The design is handled by the product team and implementation is handed off to the developers.
Design
Any issues or enquiries concerning design should be directed to the product team to ensure the implementation of the website is not misleading.
If you are working on a webpage, it is important to have knowledge of both the low-fidelity and high-fidelity design frameworks of that page. This ensures you understand the reasoning and purpose behind specific design choices.
Figma
Figma is used by the product team to develop a completed vision of how a page should look.
Excalidraw
Excalidraw is used for low-fidelity frameworks to layout the initial thoughts and designs of a page.
Docusaurus
Docusaurus is a React-based open-source platform for publishing and maintaining documentation, blogs, and much more. Currently, Matrix.AI uses Docusaurus as the main framework for development.
Common Challenges
Difficulties developers may encounter with Docusaurus include:
- Controlling the output of blog or documentation data.
- Overriding default pages provided by Docusaurus.
Solutions
To overcome these challenges, Docusaurus has extensive documentation on plugins that give users more control over the flow of data in the application.
Image Optimisation
Use webp over jpg, png, gif. It is a superior raster image format.
To optimise webp, use the cwebp program that comes from libwebp package.