|
4 years ago | |
---|---|---|
.. | ||
README.md | 4 years ago |
README.md
good practices
code
- Commenting and Documentation
- Consistent Indentation
- Avoid Obvious Comments
- Code Grouping
- Consistent Naming Scheme
- camelCase
- under_scores
- DRY (Don't Repeat Yourself) or DIE (Duplication is Evil) principle
- KISS (Keep It Simple Stupid)
- YAGNI (You Aren’t Gonna Need It)
- SOC (Separation of Concerns)
- Avoid Deep Nesting
- Handling errors
- Limit Line Length
- File and Folder Organization
- Consistent Temporary Names
- Separation of Code and Data
- Code Refactoring
Go
CSS
Dockerfile
Time Limitation
- Every computing programs should execute in a time limit of 5 minutes.
Game performance
Performance is essential, so that's why you have to aim for less than 16.7ms(1000ms/60f), because in 16.7ms the browsers job and your work must be completed in each frame.
Use requestAnimationFrame
to sync your changes
- You can try to reuse memory to avoid jank when the garbage collector pass
Jank animation can be caused by loading too much information, for instance:
- JavaScript
- Styles that considers which style apply to which element
- Layout that calculates the geometry of the pages (example: recalculating the width and height of a page)
- Painting, normally when layout is triggered we must repaint. Repainting an element every time it animates
- Compositing that consists on placing the pages together at the end
In order to improve performance we must remove the causes above, that are more costly: layout and painting.
The best way to remove layout and painting is to use transform
and opacity
Removing layout can be done using transform:
// bad
// this will trigger the layout to recalculate everything and repaint it again
box.style.left = `${x * 100}px`;
// good
// this way its possible to lose the layout
box.style.transform = `translateX(${x * 100}px)`;
It is possible to remove painting by adding a layer:
/* this will take care of the painting by creating a layer and transform it*/
#box {
width: 100px;
height: 100px;
....
will-change: transform;
}
By creating a new layer you can remove painting, but "there is always a tradeoff". If we add to much layers it will increase the composition and update tree. In conclusion you must promote a new layer only if you know you are going to use it. Performance is the key to a good animation. "Performance is the art of avoiding work".