[Перевод] Задавать Height и Width для изображений снова важно

Сторонники веб-оптимизаций часто советуют добавлять к изображениям атрибуты с размерами, что позволяет при отрисовке страницы оставлять нужное количество пространства ещё до загрузки самого изображения. Это позволяет избежать смещения раскладки страницы по мере загрузки изображений - что с недавних пор начал измерять Chrome в новой метрике Cumulative Layout Shift (CLS). Секрет, не так хорошо известный разработчикам, не являющимся заядлыми сторонниками веб-производительности, заключается

Подробнее

[Перевод] Отзывчивый веб-дизайн и учёт высоты окна браузера

Знаю, что у многих появится вопрос о том, почему у этой статьи такой необычный заголовок. Как связаны «отзывчивый веб-дизайн» и «высота окна браузера»? Пожалуй, этот заголовок кажется необычным из-за того, что под «отзывчивым дизайном», как правило, понимают проектирование страниц таким образом, чтобы они подстраивались бы под ширину области просмотра, чтобы они хорошо бы выглядели на разных устройствах. Сайты всегда тестируют, уменьшая ширину браузера и наблюдая за происходящим. Но я…

Подробнее

[Перевод] Адаптивный дизайн высоты

Возможно, вы думаете о том, почему я выбрал такой заголовок. Адаптивный дизайн высоты, серьезно? Ну, термин адаптивный веб-дизайн часто описывается как проверка браузера на нескольких вариантах ширины области просмотра и размеров устройств. Сайт всегда тестируется горизонтально — на уменьшение ширины, но я редко вижу какие-то соображения для тестирования вертикально — на уменьшение высоты. В глубине вашего сознания возникает вопрос: нужно ли уменьшать высоту браузера? Да, и я буду убеждать

Подробнее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №438 (19 — 25 октября 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →

Подробнее

Режим PWA для сайта - добавить приложение на главный экран

В Веб-браузере Chrome существует функция позволяющая добавлять любой сайт (при соблюдении ряда условий) в качестве веб-приложения на главный экран гаджета. Это так называемый режим PWA Ready. Краткое видео для понимания https://www.youtube.com/watch?v=YsEzzdhca40 Все что требуется для повторения данного результата - 3 текстовых файла на вашем сайте. pwa-sw.js pwa-manifest.json pwa-offline.html Так как мы разрабатываем сайты исключительно на DataLife Engine то предметный разбор будет именно для

Подробнее

[Перевод] Как я структурирую CSS

Когда вопрос касается структурирования CSS, нет недостатка различных соглашений об именовании, методологий и архитектур. Будь то BEM, OOCSS, SMACSS, ITCSS или CUBE CSS - за последние годы появилось много разных подходов к управлению модульным CSS. В статье автор делится своим текущим принципом структурирования CSS. Он не полностью придерживается какой-либо определённой методологии, а адаптирует её под себя. Читать далее

Подробнее

Как реализовать динамическую диаграмму для Vue на основе SVG

Бывает, что на сайте, в корпоративной IT-системе или другом ПО нужно отображать круговые диаграммы с какими-либо данными. Например, это может быть таймер для отсчета времени или индикатор, сколько товаров продано в той или иной категории. Если это статическое изображение, конечно, можно обойтись форматом svg, png или gif. Однако, зачастую нужно показать данные в динамике – например, для мониторинга или просто для привлечения внимания пользователей, для создания красивой анимации при

Подробнее

[recovery mode] Элементарный автоматический слайдер на основе библиотеки RevolveR: 10 строчек кода

В кой-то веки, году в 2013, я постепенно перестал использовать jQuery в пользу native ECMAScript. У меня ни осталось ни каких инструментов, сахарного API и нужных в повседневной верстке плагинов. Создавать код библиотеки пришлось с самого нуля и она постепенно обзавелась всем необходимым для быстрой и комфортной работы. У меня не было даже слайдера, а идея не брать jQuery и любые другие библиотеки привела к созданию своей кодовой микро базы. Читать дальше →

Подробнее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №437 (12 — 18 октября 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →

Подробнее

[Перевод] Выбор CSS макета — Grid или Flexbox?

Удачно оформленный макет удерживает пользователей на сайте, так как делает важные элементы доступными и легко находимыми. Слабые же макеты отпугивают посетителей, которые покидают ресурс, так и не найдя того, за чем пришли. В веб-дизайне макет – это то, как сайт отображается на экране. В HTML 5 есть довольно много элементов, определяющих внешний вид веб-страницы: заголовок, навигационный блок, абзац, сноска, статья и нижний колонтитул, каждый из которых имеет свое особое значение в

Подробнее

[Перевод - recovery mode ] Темный режим: Hello darkness, my old friend

Dark mode остается главной тенденцией в дизайне сайтов и приложений. Мы нашли классную статью на эту тему и решили поделиться переводом. Мнение пользователей, реализация и поддержка dark mode, рекомендации для разработчиков далее в статье. А на какой стороне вы? Просто хайп или необходимость? Узнайте больше о темном режиме. Я расскажу, как добавить поддержку dark mode на благо ваших пользователей! Введение По данной теме я провел объемное исследование, изучил историю вопроса. Если вас…

Подробнее

[Перевод] CSS-переменные

CSS-переменные (их ещё называют «пользовательскими свойствами») поддерживаются веб-браузерами уже почти четыре года. Я пользуюсь ими там, где они могут пригодиться. Это зависит от проекта, над которым я работаю, и от конкретных задач, которые мне приходится решать. Работать с CSS-переменными просто, они способны принести разработчику немалую пользу. Правда, часто фронтенд-программисты применяют CSS-переменные неправильно или не понимают особенностей работы с ними. Я написал эту статью

Подробнее