You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Some code is written both in SCSS and Typescript. Which could lead to changes in one not applied in the other and some things to not work as intended.
Items to sync
Animations
CSS ones are preferred, but some can't be done with just CSS. So Angular animations are coded in Typescript.
Impact if out of sync
Animations timings and easing functions need to be in sync for a harmonic user experience
Detection
Currently, nothing is set to detect if they get out of sync
Layout breakpoints
Some CSS layouts depend on breakpoints. Also, responsive images depend on those for proper responsive image breakpoints generation. They need to be in sync with layout, hence with those layout breakpoints so that proper responsive image breakpoints can be generated.
Impact if out of sync
Responsive image breakpoints won't be generated according to image sizes
Detection
Fortunately, Lighthouse would detect issues when breakpoints aren't right enough
Responsive images size
They're coded in CSS styles (in vw mainly). But those values are also needed in component code to generate responsive image breakpoints accordingly.
Impact if out of sync
Responsive image breakpoints won't be generated according to image sizes
Detection
Fortunately, Lighthouse would detect issues when breakpoints aren't right enough
Ideas
Try moving everything to component code. Which is prerendered, so would end up as static inline CSS anyway. Doesn't apply for animations though
SCSS to JSON. Or something like that. To export variables from SCSS for reuse inside the app components code.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
Description
Some code is written both in SCSS and Typescript. Which could lead to changes in one not applied in the other and some things to not work as intended.
Items to sync
Animations
CSS ones are preferred, but some can't be done with just CSS. So Angular animations are coded in Typescript.
Impact if out of sync
Animations timings and easing functions need to be in sync for a harmonic user experience
Detection
Currently, nothing is set to detect if they get out of sync
Layout breakpoints
Some CSS layouts depend on breakpoints. Also, responsive images depend on those for proper responsive image breakpoints generation. They need to be in sync with layout, hence with those layout breakpoints so that proper responsive image breakpoints can be generated.
Impact if out of sync
Responsive image breakpoints won't be generated according to image sizes
Detection
Fortunately, Lighthouse would detect issues when breakpoints aren't right enough
Responsive images size
They're coded in CSS styles (in
vwmainly). But those values are also needed in component code to generate responsive image breakpoints accordingly.Impact if out of sync
Responsive image breakpoints won't be generated according to image sizes
Detection
Fortunately, Lighthouse would detect issues when breakpoints aren't right enough
Ideas
Beta Was this translation helpful? Give feedback.
All reactions