- handbook
- Company
- Company
- Board
- Communications
- Decision making
- KPIs and OKRs
- principles
- Remote Work
- Security
- Asset Management Policy
- Business Continuity & Disaster Recovery Policy
- Cryptography Policy
- Data Management Policy
- Information Security Roles and Responsibilities
- Operations Security Policy
- Risk Management Policy
- Secure Development Policy
- Third-Party Risk Management Policy
- Human Resources Security Policy
- Access Control Policy
- Incident Response Plan
- Information Security Policy and Acceptable Use Policy
- strategy
- values
- Operations
- Product
- Feedback
- Metrics
- Node-RED Dashboard
- personas
- Plan
- Pricing Principles
- Product Categories
- Strategy
- Versioning
- Development & Design Practices
- Design
- Development
- contributing
- Front End
- How We Work
- Markdown How-To
- packaging
- Releases
- security
- staging
- Using Git
- Website A/B Testing
- Internal Operations
- Legal
- People Ops
- Sales & Marketing
- Marketing
- blog
- Boiler Plate Descriptions
- Content Channels
- Content Types
- HubSpot
- Marketing
- Marketing - Website
- Video
- Webinars
- sales
# Data Attributes
It is recommended in the Cypress Best Practices to utilise data- attributes on HTML elements in order to ensure safe selection of objects that won't evolve/change over time.
Similarly, this is a best practices for PostHog which we also use to track user behaviour across the application. As such, we have defined our own best practice set of data- attributes to use:
# data-nav
Tag elements that have a sole purpose of moving a user from one place to another. This is used for any navigation item in a side bar, tab or any of the primary navigation dropdown menus for switching team or user options
<router-link to="admin/settings" data-nav="admin-settings">
<nav-item label="Admin Settings"></nav-item>
</router-link># data-form
Identify particular form elements like text-input, textarea of dropdowns using this tag.
<FormRow data-form="device-name" v-model="input.name">Name</FormRow># data-action
Used to identify buttons that do not navigate, but instead complete an action. This could include submitting a form, or opening a dialog, e.g.,
<ff-button data-action="delete-project" kind="danger" @click="deleteProject()"></ff-button># data-el
A catch all for everything else, an element that we're likely going to want to capture, but doesn't fit into any of the other categories, e.g.,
<ff-data-table data-el="templates">...</ff-data-table>