hoisting

event loop
context
types
liste (map, filter)

obiecte (loops, inheritance, protptypes, new)

async (callbacks, promises)

es6 (spread operator, arrow functions, objects, async/await)

nodejs
vuejs
rxjs (observers, subscribers)

display
opacity
visibility
position
@media
floats
boxes
flex
grid

transitions
transform
animations (keyframes)

<sly data-sly-template.video="${@ imagePath, fileReference, lazyloading}">

<div data-sly-test="${fileReference}" class="ds2-video-player"
data-loader="amdLoader" data-component-path="ds2-video-player">
<div class="ds2-video-player--openerr">
<span class="ds2-video-player--img-outer">
<sly data-sly-test="${imagePath}"
data-sly-use.imagelib="srcsettemplate.html"
data-sly-call="${imagelib.image @ fileReference=imagePath,
class=(lazyloading ? 'ds2-video-player--img lazyloading' : 'ds2-video-player--img')
}" />
<div data-sly-test="${!wcmmode.edit}" class="ds2-video-player--
play">
<span class="ds2-icon ds2-icon--play-white ds2-icon--xl ds2-
icon--bg"></span>
</div>
</span>
</div>
<div class="ds2-video-player--player hide">
<sly data-sly-
use.component="/apps/digitals2/media/components/video/renderVideo.html"
data-sly-call="${component.video @ fileReference = fileReference}"
/>
</div>
</div>
</sly>