Unwritten frontend traditions (WIP)

[Ty-ci]

Now this all is in Loop.

Here I will write some frontend habits that I noticed and may not be written in the docs, for further discussion if we want to have it written.

Typescript

• type assertion only as a last resort
• ? Strapi attributes check when mapping over array

Figma workflow

• component flexbox composition in code should follow layer composition in figma
• underlined text represents a link
• ? Inconsistencies in Figma - should we follow or flag?
• Icons - if you encounter a new icon but there's already another one for the same purpose in BA Design system, flag it and use the one from BA Design system

Accessibility

• empty divs (for example spacers or dividers) should recieve aria-hidden
• use rems for size and spacing (?unclear comment px conversion)
• when line clamping a line (for example title of a card), consider providing the whole text as title attribute so it displays as a tooltip
• ? aria-label in images (?check with Rado where to leave empty string)
• ? ul in lists
• file download link - put info about title, format and size into aria-label, (e.g. "Download file {{title}}, format {{format}}, {{size}}")

Naming

• use descriptive nonshortened names for variables (for example when mapping over articles, use (article, index) => ... instead of e. g. (v, i) => ... or (val, i) => ... )
• abbreviations follow the correct case, so for example we'll use imageUrl, not imageURL

Other

• z-index - keep content overlap on low values, z-10 or even z-[1] suffices. We save higher index values for menu, skipToContentButton, modals ...

OLO web - from discussion with Rado

• Icon component should provide only icons from design system. For site-specific icons we will use a separate component (for OLO website, specific olo icons will be provided by OloIcon)
• Icons should not be changed from strapi, Pictograms may be.
• Row dividers between items in a column should be controlled by parent, not by the row element itself

[katarinazaprazna]

All included in Loop.

---

Suggestions

• Text sizes and colors are specified in Tailwind config. Spacing variables are not thoroughly defined, and Tailwind utility classes should be used to define spacing
• In most cases, only assets (images, icons) tend to have fixed width and height, which is forced through CSS
• In most cases, the main breakpoint used is the lg breakpoint. md is used rarely, typically within more complex designs
• No need to test FE code, meaning - unit tests, E2E tests etc.
• Min breakpoint: The smallest supported device screen size is 320px
• Generally, avoid uploading large media files locally