You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

3.5 KiB

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".

UI/UX