2023-04-18, Як швидко виправити свій сон, та ряд інших відео

18 April 2023
ua

Відео англійською мовою, йде мова про те щоб нормалізувати сон слід дійсно вставати рано.

Трюк в наступному, якщо важко рано встати то слід піднятись з ліжка раніше на 1 чи навіть 2 години. Протягом дня буде очевидна сонливість, це гаразд з цим можна боротись. До завершення дня можна перетерпіти і вчасно уже лягти спати раніше.

Від себе додам що:

слід зняти хвилювання за день, і змиритись з отриманим результатом. Продовжити роботу можна завтра
за годину до сну бажано не мати ніяких екранів
дуже корисно, прогулянка перед сном
дуже корисно і еффективно, прийняти теплий душ перед сном та лягти чистим в чисте ліжечко
не слід їсти як мін 2 год до сну

Проблеми з vw/vh величинами і не тільки, та можливий підхід з ними

З відео був фокус на мобільних оверлеях які псують усю малину з фіксованим контентом до низу в межах 100vh контейнера. Також показане відео.

Для fluid layouts недобре використовувати font-size: 7vw або що. Там ряд проблем, а особливо з accesibility. Рішення:


.container {
    /* old and reliable but depends on all containers untill top to have also 100% */
    height: 100%;
    /* dvh, svh is not supported in all browsers (firefox not there yet) */
    /*
     * Looks good in desktop, has issues on mobile initial load
     */
    height: 100vh;
    /*
     * dynamic viewport heightm adapts to dynamic overlay
     */
    height: 100dvh;
    /*
     * using the smallest viewport height value
     */
    height: 100svh;
    height: 100lvh; /* <= uses all available space */
}

.title {
    /* clamp(minimum, calculated, maximum) */
    font-size: clamp(3rem, 5vw + 1rem, 6rem); 
}

.profile {
    display: grid;
    /* Take the least number available */
    gap: min(2rem, 5vw);
}

Все це для дуже гнучких лейаутів. Головне не переборщити з експериментами і мати чітку систему де що і чому слід використовувати. Ця система це дизайн система, і тут без досвіду або консультацій не обійтись.

З цим навіть стаття повязана про баг з кнопкою підтвердження оплати на яку неможливо було натиснути в вартістю 8 мільйонів долларів.

В статті більше рішення нагадувало svh де було наступне:

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

і тоді в css можоиво наступне

.my-element {
 height: 100vh; /* Fallback for browsers that do not support Custom Properties */
 height: calc(var(--vh, 1vh) * 100);
}

проблема залишалась та сама якщо браузер не підтримує пропертю…

Я б полягав на стабільні нові рішення які даються в стандарт, та зважав на броузери які потрібно підтримувати. caniuse.com в поміч!

Тож при можливості нам слід використовувати наступне з gracefull degradation:

.my-element {
 height: 100vh;
 height: calc(var(--vh, 1vh) * 100);
 height: 100svh;
}