Skip to content

Instantly share code, notes, and snippets.

View nikolai-shabalin's full-sized avatar

Nikolai Shabalin nikolai-shabalin

View GitHub Profile
@nikolai-shabalin
nikolai-shabalin / boolean-attributes.md
Created July 10, 2023 12:37
List of all boolean attributes in html 5

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 / htmlcss-2__section-9.md
Created March 30, 2020 12:35
Вопросы к разделу «Производительность вёрстки» на 19 потоке

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

@nikolai-shabalin
nikolai-shabalin / htmlcss-2__section-8.md
Last active May 14, 2020 12:56
Вопросы к разделу «Погружение в автоматизацию» на 19 потоке

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

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

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

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

@nikolai-shabalin
nikolai-shabalin / htmlcss-2__section-7.md
Last active April 28, 2020 09:37
Вопросы к разделу «Векторная графика и оптимизация» на 19 потоке

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

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

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

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

  1. Вам нужно менять цвета иконки при изменении состояния(:hover, :active и т.д.)
  2. Вы используете svg-спрайт
@nikolai-shabalin
nikolai-shabalin / htmlcss-2__section-6.md
Last active April 29, 2020 15:01
Вопросы к разделу «Адаптивная графика» на 19 потоке

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

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

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

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

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

@nikolai-shabalin
nikolai-shabalin / htmlcss-2__section-5.md
Last active April 16, 2020 08:16
Вопросы к разделу «Адаптивные декоративные элементы» на 19 потоке

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

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

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

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

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

@nikolai-shabalin
nikolai-shabalin / htmlcss-2__section-4.md
Last active April 8, 2020 18:52
Вопросы к разделу «Адаптивные сетки» на 19 потоке

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

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

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

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

@nikolai-shabalin
nikolai-shabalin / htmlcss-2__section-3.md
Last active April 1, 2020 09:24
Вопросы к разделу «Препроцессоры и автоматизация» на 19 потоке

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

Отличия less и sass

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

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

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

@nikolai-shabalin
nikolai-shabalin / htmlcss-2__section-2.md
Last active April 6, 2020 08:29
Вопросы к разделу «Методологии вёрстки» на 19 потоке

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

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

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

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

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

@nikolai-shabalin
nikolai-shabalin / htmlcss-1__section-9.md
Created January 23, 2020 13:33
Вопросы к разделу «Введение в JavaScript»

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

TODO