L-PEC Best Practices - A Summary

There is a summary of Best Practices we recommend here at Foxtel when working with our HTML5 Set Up Box. I'mm keep adding more points as we discover and recommend internally.

These recommendations are specifically for Low Powered devices that run custom HTML5 platform via custom browsers, to learn more read my other post titled Low Performance Environment Coding (L-PEC) [Let's just call it Web Performance :)]

1. Transitions should be on the smallest number of divs possible, which may mean needing to put divs inside parents
2. To avoid dithering on the edges of circles, you should always set border:1px when using border-radius
3. To avoid dithering with arrows, always use css3 rotation of a div, with crop and border set.
4. To ensure children divs transition within their parents, all divs should have position: set.
5. Any (parent) divs that are not currently shown should have display: none set on them
6. Ideally, children divs should not have a display: set on them, but instead inherit the parent div display characteristic.
7. Gradient should only be used on divs that have little or no animation associated with them. Instead use an overlay.
8. Use –webkit-transition: -webkit-transform and -webkit-transform: transform3d to force hardware acceleration and ensure smooth transitions.
9. All css/js should be minimised
10. CSS and JS files should be combined so there is a maximum of one call to the server for each type/page.
11. Keep HTML Tag Dept as shallow as possible
12. Only use translate3D for transitions
13. Validate your HTML and CSS to W3C specs
14. Fix your JS to JSHint standards
15. Avoid using Border Radius as much as possible
16. For gradients try and use background images as much as possible, if any elements with gradients are being translated then you have to use BG images
17. Touch the DOM as less as possible!
18. Read DOM layout invoking properties as less as possible (especially positioning properties like offsetLeft etc).
19. Group your DOM reads and writes together
20. When you update an element's style, hide it from the DOM first (display:none), update the style and then show it at the end
21. Only use jQuery for helper functions like ajax, getJson etc. Don't use it for element selection
22. Use absolute positioning as much as possible
23. Don't use floats
24. Write defensive code to prevent your UI responding to user key mashing
25. Keep all your JS within a custom private namespace. 
26. If you don't want an item on the screen, hide it with display:none. This will take off the layout tree