Щоденник мети

Засабмитил ссылку на макет на Кросс-чек.
В свою очередь мне тоже пришло 4 ссылки на кросс чек, надо вечером будет проверять.
Потратил еще час сегодня утром, чтобы причесать макет. Обновил зависимости в npm, из-за этого sass начал ругаться на легаси код, пришлось исправлять.

Вчера прошел тесты
- JS Evolution
- CSS Position & Flexbox
- SASS Preprocessors
На последнем тесте набрал 75% из 100. Это очень мало, учитывая, что я постоянно использую Sass. Дома перечитал документацию. Оказывается многое за последние три года изменилось.
Например импортировать файлы теперь рекмендуется через @use и появились пространства имен с локально областью видимости. А также встроенные библиотеки, которые также через @use можно подключить. Еще можно присваивать имена пространствам имен через as.
Была часть вопросов по особенностям SCSS, но я пользуюсь только SASS и там есть различия в написании комментариев.
Также есть много того, чем я не пользуюсь, например
- hsl функции для цвета,
- смешивания цветов через mix
- @warn
- compressed mode (обычно это в делает отдельный модуль в сборке)
- Флаги для консольных комманд sass (никогда не запускал в консоли, только через сборщиков)
В общем, чтобы освежить знания потратил вечер на чтение документации, в итоге сдал на 96%, так и не понял в каком вопросе ошибся.

Псевдоселекторы нельзя писать через запятую
Век живи - век учись
Если псевдоселекторы перечислять через запятую, то они не будут работать
input[type=search]:-ms-input-placeholder,
input[type=search]::-ms-input-placeholder,
input[type=search]::placeholder,
input[type=search]::-webkit-input-placeholder {
color: var(--white);
}
нужно писать каждый отдельно:
input[type=search]:-ms-input-placeholder{ color: var(--white); }
input[type=search]::-ms-input-placeholder{ color: var(--white); }
input[type=search]::placeholder{ color: var(--white); }
input[type=search]::-webkit-input-placeholder { color: var(--white); }
Когда вы пишете селекторы через запятую, браузер пытается применить стили ко всем элементам, перечисленным в селекторе. Но поскольку некоторые из псевдоклассов специфичны для отдельных браузеров (например, ::-webkit-input-placeholder для Chrome и Safari, ::-ms-input-placeholder для Internet Explorer), такая комбинация селекторов не будет поддерживаться должным образом.

Wordpress - get_template_part vs require
В WP можно вставлять куски кода через get_template_part( 'templates/meta' ) это отличается от require 'templates/meta.php'
тем, что get_template_part выполняет код и возвращает результат, а require заменяется на кусок кода и выполняется в текущем потоке.
Это значит, что get_template_part имеет свою область видимости, а require ОВ того места, куда вставился код