​Новые единицы измерения в вебе — svh, lvh и dvh: для чего нужны и как их использовать?

Веб-разработчики знают, что одна из самых распространенных проблем сайтов на мобильных устройствах с использованием vh — это то, что при расчете высоты не учитывается высота панели навигации, которая динамически появляется и исчезает.

Если вкратце, единицы измерения svh, lvh, dvh решают эту проблему, позволяя избавиться от ненужного скролла:
1. SVH (small viewport height) — единица измерения, которая задает самый маленький размер viewport, когда панель навигации отображается.
2. LVH (large viewport height) — задает размеры по самому большому размеру viewport, когда панель навигации скрыта.
3. DVH (Dynamic viewport height) динамически меняет значение высоты относительно того, открыта панель с навигацией или нет.

Их анонсировали несколько месяцев назад, они только начинают входить в обиход. Но эти единицы измерения можно использовать прямо сейчас. Согласно сайту can i use, они поддерживаются во всех современных браузерах.

#веб #фронтенд

Такого ужасного интерфейса вы ещё не видели

Наверное, все однажды встречали неудобную форму для ввода данных на сайте, но насколько она было неудобной? А что, если в одной месте будет собрана целая коллекция форм ввода номера с адовым UX.

Попробуйте ввести свой номер хотя бы в 3 формы и не получить при этом нервный срыв: https://fun.mishasaidov.com/badux/

#кек #веб

Что изменилось в CSS за последние несколько лет

Есть ли во фронтенде что-нибудь, что развивается так же быстро, как CSS в наши дни? Все чаще выходят обновления, позволяющие реже зависеть от замысловатых имен классов, меньше думать о выборе правильной функции и дающие возможность избежать необходимости предварительно вычислять математические параметры.

О том, что нового появилось в в CSS за последние годы вы сможете узнать здесь.

И нет, в статье не будет разбора и упоминания каждой новой функции за последние 5 лет, но в ней вы сможете узнать о новинках, оказавших наибольшее влияние на повседневную работу с CSS.

#веб #фронтенд #css

​​CSS в 2023 году: главные изменения

Не так давно компания Google представила обновления в CSS, вышедшие за прошлый год. А мы выделили для вас главные нововведения и рассказали о них кратко, просто и с примерами кода.

Узнать про архитектурные основы, работу с цветом, типографику, отзывчивую вёрстку и многое другое, вы сможете здесь.

#веб #фронтенд #cs

Самые чудовищные регуляторы громкости

Не так давно мы с вами увидели подборку самых неудобных форм для ввода номера телефона. Для любителей подобного, мы нашли новое зрелище: худшие слайдеры регуляции громкости.

Как вы думаете, на каком из них вы бы сдались?

#кек #веб

​​Как исполняется код JavaScript и почему эти знания — суперсила веб-разработчиков?

После получения файла JavaScript с сервера код JS преобразуется в то, с чем компьютер может работать. В этом компьютеру помогают движки, встроенные в браузеры. В них и кроется суперсила использования JavaScript.

Зная тонкости преобразования кода, вы научитесь писать качественные программы, работающие без подвисаний и разумно использующие имеющиеся API. И наконец-то сможете понять, почему JavaScript может показаться странным.

Да, это не самая простая тема. Но вот несколько материалов, которые точно помогут в ней разобраться и здорово прокачать скилл работы c JavaScript:

1. Компактная статья с доступными объяснениями и крутыми анимациями: https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf

2. Серия из 19 статей на русском, после которых у вас точно не останется вопросов: https://habr.com/ru/company/ruvds/blog/337042/

#javascript #веб

Разбираемся с CORS
 
Cross-origin resource sharing (CORS) — это механизм браузера, который обеспечивает контролируемый доступ к ресурсам, расположенным за пределами заданного домена. В вебе это довольно важная тема.
 
Поэтому держите небольшой набор статей, который поможет понять, как это вообще устроено. А если уже понимаете, но вас задолбали ошибки, то и с этим тоже: 
 
Лайтовое введение в CORS: история возникновения, как устроен и оптимальные методы работы: https://habr.com/ru/companies/macloud/articles/553826/
 
Более серьёзное руководство с многочисленными примерами и дополнительной информацией: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
 
Наиболее частые ошибки и способы их устранения: https://fatimamo.com/become-a-cors-wizard
 
#cors #веб

​​Next.js: руководство по структурированию крупномасштабных проектов
 
Хорошая структура важна в любом проекте, а особенно в крупном, если, конечно, только вы не хотите чувствовать себя Индианом Джонсом, продирающимся сквозь густые джунгли компонентов, хуков и конфигурационных файлов. 
 
Эта статья посвящена именно этому. Следуя приведённой структуре, вы потратите меньше времени на размышления о том, куда что идет, и больше времени на создание потрясающих функций.
 
#веб #js

Как повысить производительность сайта: улучшаем UX за счет сокращения времени загрузки

Мы все сталкивались с раздражением от ожидания долгих загрузочных экранов. Обычно это происходит из-за того, что сайт пытается получить все необходимые данные, как только вы попадаете на страницу.

Одна из возможных способов борьбы с этим явлением — предварительная выборка данных. Это классный трюк для сокращения времени загрузки страниц. В этой статье подробно описывается, как и когда применять эту технику, с примерами кода и полезными советами.

#веб