-
- Dark mode
- Confirmation modals
- Usage of red color in UI
- Empty states
- Do not use the hex values from the Figma
- Tailwind classes and Tailwind CSS variables should not be used for theme-related CSS properties
- Consistency in the way we are showing the delete option
- Enter or Command + Enter should submit the form
- Move the triple-dot menu to the first column in the table
- Opening a link in a new tab using Command + Enter is not working at a lot of places
- Handling bulk actions items in table
- Move toggle switch before the label
- Fix Table inconsistencies
- In some cases tooltip is not enough
- Remove CSS font-smoothing: antialiased to improve the text contrast
- When to use thumbs-up messages vs full success messages
- Side panel best practices
- When to store data in local storage as user is typing so that message is not lost
- Disable auto-close in error Toaster
- Use "small" or "nano" size header for inner pages
- In the table use the three-dot menu as opposed to side-by-side icon placements
- Fix the shrinking of 3 dots in first column
- Table columns not respecting the column widths
- Links need to be clear and predictable
- Using TableWrapper to avoid dynamic height computation
- AutoFocus on any field in an overlay (Modal/Pane)
- Handling UI markup inside email templates
- Ensure ideal line length
-
- General HTML best practices
- What is a screen reader?
- What is Semantic HTML?
- HTML semantic tags for text
- HTML semantic tags for structure
- What HTML tags are non-semantic?
- Accessibility guidelines
- Insert an element into the tab order
- Correctly set the visibility of offscreen content
- Keyboard access fundamentals
- Focus and the tab order
- Arrange elements in the DOM to be in logical order
- Use semantic HTML for easy keyboard wins
- Maximizing User Experience with Buttons
- Why links matter for keyboard navigation
- Control focus with tabindex
- Remove an element from the tab order
- Avoid tabindex > 0
- How to make buttons accessible with meaningful names
- Write accessible link texts
- Add alternative text to images
- Ensure form elements have associated labels
- How to add labels to form elements
- Understand the difference between block and inline elements
- Reducing markup
- SCSS 7-1 pattern
- Variables, Mixins & Extend
- CSS Architecture
- BEM Naming Convention
- Why should we consider BEM?
- SCSS and BEM
- CSS best practices
- When is it ok to disable text selection?
- Viewport best practices
- Character encoding best practices
- VSCode Recommended Extensions - TailwindCSS
Language
Open
Enter
Move
Close
Esc