Online notebook

Flexbox ---------- Complex things like flexible grid layouts are so hard using tables, floats, inline-blocks. Flexbox consists of Flex containers and flex items. Flex container: display property set as flex or inline-flex. Flex Item: Every child of flex container. Everything outside a Flex Container and inside a Flex Item is rendered as usual. In short, Flexbox defines how Flex Items are laid out inside of Flex Containers. Flex Lines Flex Items are positioned inside a Flex Container along a Flex Line. By default there is only one Flex Line per Flex Container. The Main Axis and the Cross Axis To abstract over the writing-mode, Flexbox uses the concepts of the Main Axis and the Cross Axis. Flex Lines follow the Main Axis. The Cross Axis is perpendicular to the Main Axis. The names for the starting points, ending points, and directions of each axis are as follows: Main Start Main End Main Direction (sometimes called the Flow Direction) Cross Start Cross End Cr...

1. Structure the DOM in a sensible way so that keyboard tab navigation is sequential. 2. Use HTML semantic elements like nav, header, section 3. Make sure parts of controls are grouped together 4. Use CSS for layout instead of tables 5. Use native HTML tags instead of divs and spans eg: a, button tags instead of div span with onclick coz divs and spans are not focusable. 6. Label form elements using 'label for' 7. Label images with alt attributes 8. Managing focus using element.focus() whenever required 9. For generic tags div and span, use Aria roles like role=button, role=menuitem so that screen readers can identify elements. 10. Aria landmark roles can be used to identify separate areas of the app. eg; <section role="search"/> 11. Use aria states to add dynamic information about the current state of an element eg: <div tabindex="0" role="checkbox" aria-checked="true"> 12. The property aria-live identifies dyna...