Coding Guidelines

Consistent Code Formatting

• Use a consistent code style across the project.
• Follow established guidelines for indentation, spacing and line breaks.
• Utilize a code formatter tool like Prettier to automatically format the code.
• Ensure that only code in use is present in the codebase.
• Remove unused or commented-out code to minimize potential security risks and improve maintainability.

HTML

• Follow HTML best practices and adhere to industry standards.
• The convention and recommended practice is to write tags in lowercase.
• Always use data-* attributes for custom data attributes.
• Refer to documentation such as the Mozilla HTML Guidelines for guidance.

CSS

• Write maintainable and scalable CSS code.
• Organize CSS rules logically and consistently.
• Use English for selectors and comments.
• Reference resources like the Mozilla CSS Guidelines and CSS Guidelines by Harry Roberts for comprehensive guidelines.

JavaScript

• Follow clean coding practices and write readable JavaScript code.
• Use meaningful variable and function names.
• Use English for the names and for comments.
• Avoid global variables and excessive nesting.
• Adhere to guidelines such as the Mozilla JavaScript Guidelines.

Input Validation

• Validate all user input to avoid wrongly formatted data like email addresses, phone numbers, date and time etc.
• The validation must be in line with the backend. The validation on the client must reflect the restriction of allowed characters, number of charachters and formats given by the backend.
• Remember to keep the validation international. Postcodes for example can vary in length and allowed characters.
• No input may end with an error on the backend.
• For security concerns see Security.

Version Control (Git) Guidelines

• See “Git” in the general section.

Cross-Browser Compatibility

• Ensure that the frontend code functions correctly across different web browsers and platforms.
• Test the code on all major browsers and versions: Chrome, Safari, Firefox, Edge.
• Test the code on all major platforms: Windows, MacOS, Android OS, iOS
• Consider using tools like Autoprefixer to handle vendor prefixes automatically.

Performance Optimization

• Optimize frontend code for performance.
• Minify and bundle CSS and JavaScript files.
• Optimize images and other assets for faster loading.
• Utilize caching techniques and consider code splitting for efficient resource utilization.

Accessibility Guidelines

• Design and develop accessible web interfaces.
• Follow accessibility guidelines such as the Web Content Accessibility Guidelines (WCAG) and for Accessible Rich Internet Applications (WAI-ARIA).
• Use semantics and and semantic HTML elements and provide alternative text for images and illustrations.

Testing and Quality Assurance

• Write unit tests for critical functionality using testing frameworks like Jest or Mocha.
• Perform functional testing across different devices and browsers.
• Use linting tools like ESLint to enforce code quality and catch potential errors.

Documentation

• Document the codebase including APIs, libraries and project-specific conventions.
• Provide clear instructions on how to set up the development environment and run the project.
• Include information on project structure, architecture and major components.