nikolai-shabalin

Базовые

Б11. Названия файлов модулей записаны строчными буквами и через дефис.

• назвние файла updload-form-validation.js написано с опечаткой

Модульность

Б25. Все файлы JS — это отдельные модули ES2015.

• совсем не уверен за строчку import './zoom-image.js'; в main.js. Там скорее всего нужен initZoomControls

Магия

Д19. В коде не используются магические значения.

nikolai-shabalin

Last updated: 10.07.2023

What is a boolean attribute?

From the spec

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

List

nikolai-shabalin

Вопросы к разделу «Производительность вёрстки»

nikolai-shabalin

Вопросы к разделу «Погружение в автоматизацию»

Зачем нужна сборка

1. Что такое галп и как с ним работать
2. Всегда ли работают с готовой сборкой?
3. Как настраивать свою, что требуется или обычно уже есть сборка
4. Можно ли обходиться в работе без галпа?

Gulp — это система запуска задач для кода, которая используется для сборки, проверки и разработки кода. Это не единственная система сборки, есть Webpack, Parcel и другие, но для вёрстки часто используется именно Gulp.

nikolai-shabalin

Вопросы к разделу «Векторная графика и оптимизация»

Когда лучше svg инлайоново, а когда нет?

Доброго времени суток! В каких случаях следует выбирать вставку .svg изображений в html(иконки, логотипы, элементы управления и др.), ведь если вставить то появиться доступ к параметру fill и можно будет менять состояния объекта при взаимодействии с ним, но в другом случае это ухудшает читабельность кода? А в каких случаях достаточно будет просто перекрасить .svg элемент в редакторе? Спасибо.

Есть два случая, когда придётся вставлять <svg> в разметку.

1. Вам нужно менять цвета иконки при изменении состояния(:hover, :active и т.д.)
2. Вы используете svg-спрайт

nikolai-shabalin

Вопросы к разделу «Адаптивная графика»

Стили для элемента блока

Допускается ли указывать в стилях элемента block__el что-либо кроме внешней геометрии? Например, разрешено ли указывать высоту строк или цвет текста в этом классе-элементе?

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

Позиционирование фонов

nikolai-shabalin

Вопросы к разделу «Адаптивные декоративные элементы»

Как менять изображения в разметке под вьюпорт?

Что делать если изображения, вставленные в разметку с помощью тега img, при изменении размера viewport'a меняются на другие? Например: [email protected] меняется на [email protected]? Убирать из разметки img теги и использовать CSS со свойством background?

В проекте Мишка в шапке в зависимости от экранной версии разные изображения логотипа. По стайлгайду логотип автоматически перекрашивается в зависимости от состояния, кроме того это контентное изображение, а значит это не фоновое изображение. Но в html коде мы можем загрузить одно изображение, чтобы не дублировать код. Будет ли рассмотрен в материалах этот случай?

Об этом мы поговорим очень подробно на лекции про адаптивную графику. Сейчас ответим коротко. Для этого есть атрибут srcset. Пример можете посмотреть тут.

nikolai-shabalin

Вопросы к разделу «Адаптивные сетки»

Размеры экрана и адаптивность

Физическое разрешение экранов телефонов может превосходить разрешение десктопов. Например, Самсунги S-серии имеют разрешение 2560х1440, а некоторые ноутбуки 1366х768. Тем не менее, поведение адаптированных сайтов логичное: на телефоне отображается мобильная версия, на ноутбуке – десктопная. Это как-то связано с размером экрана, но как именно? Если взять два смартфона с одинаковым размером экрана, но разным разрешением в пикселях, то один и тот же сайт будет выглядеть на них одинаково (ну почти одинаково). Как будто разрешение в пикселях вообще не учитывается при определении устройства. Но брейкпоинты в медиа запросах основаны именно на количестве пикселей. Как так получается? Как сайты учитывают несколько параметров: размер, разрешение, ориентацию? Объясните, пожалуйста, подробнее этот механизм.

Вы совершенно правильно заметили: сколько бы пикселей не было у экрана, его «размеры» как будто определяются чем-то другим. Это «что-то» назы

nikolai-shabalin

Вопросы к разделу «Препроцессоры и автоматизация»

Отличия less и sass

В чем принципиальное отличие препроцессоров Less и Sass, кроме синтаксиса?

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

Для чего нужны цветовые функции

nikolai-shabalin

Вопросы к разделу «Методологии вёрстки»

Доступное скрытие

Для чего мы размечали блоки H1 с текстом, которые никто никогда не увидит т.к. они постоянно скрыты?

Когда мы вешаем на элемент класс .visually-hidden на элемент, то мы скрываем элемент, но не от поисковиков и скринридеров. Происходит визуальное скрытие элемента.

Как верстать десктопную версию?