Фронтенд дайджест #214 Лучшее за неделю Подкаст [EN] Можно | FrontoWeek: Недельный дайджест [Фронтовик]

Фронтенд дайджест #214
Лучшее за неделю
Подкаст

[EN] Можно ли создать идеальную спецификацию? Скорее нет, чем да. Вот и авторы спецификации CSS не всегда принимают правильные решения в долгосрочной перспективе.

Например, неконсистентные значения и имена свойств или неправильные селекторы, приводящие к игнорированию всей группы селекторов.
В своей вики они собирают такие решения, которые в итоге оказались не очень удачными.
Но почему бы все это не починить?

К сожалению, уже очень много сайтов используют текущие правила и даже хаки к ним. Исправление правил повлияет на внешний вид этих сайтов, а это недопустимо.

Возможно, помогло бы версионирование CSS, но браузерам всё равно бы пришлось поддерживать и старые версии, а значит это принесло бы ещё больше хаоса.

Разработчики могут аргументировать тот или иной подход лучшими практиками, но они не всегда смогут уверенно рассказать, как именно эти практики им помогают.
Так возникает культ лучших практик, который может нанести вред проекту.

Подобные практики могут появиться, как результат неопытности команды в каких-то вопросах, тогда мнение авторитетного разработчика просто принимается на веру.

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

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

[EN] На примере списка комментариев, автор статьи показывает ключевые моменты вёрстки с заботой о будущем. Или, другими словами, вёрстки, которая не разломается через несколько лет на устройствах, которые мы даже не можем вообразить.

Современный CSS обладает кучей возможностей, которые позволяют адаптировать контент ко всевозможным размерам экрана, объёму содержимого, особенностям интернационализации и доступности.

Например, есть функции min и max, которые позволяют комбинировать процентные и абсолютные значения для более гибкой «отзывчивости» страницы.
Вместо word-break: break-word контент можно сделать более читабельным с помощью свойства hyphens: auto.
Размеры медиа-содержимого можно подгонять под контейнер, используя свойства object-fit и aspect-ratio.
А для адаптации интерфейса под написание справа-налево есть логические свойства CSS, позволяющие устанавливать выравнивание и отступы, относительно заданного направления.

[EN] Несмотря на одни и те же основы «точечной» реактивности, на которых построены такие библиотеки как MobX, Vue и Svelte, сущности, из которых строится эта реактивность, называются у всех по-разному.
Это может вызывать затруднения в понимании концепции реактивности у новичков.

Реактивность можно представить в виде графа, состоящего из нескольких видов примитивов.
Сигналы — это хранилища значений.
Реакции — функции, которые вызываются при изменении значений Сигналов.
Деривативы — это, по сути, Сигналы, которые могут использоваться для хранения промежуточного значения, вычисленного на основе других Сигналов. Всё ж просто!
В статье автор Solid.js на примерах показывает основы реактивности и за счет чего она помогает добиваться предсказуемого состояния. Правда, лучше почитайте статью.

Prototype pollution — это одна из распространённых уязвимостей в JavaScript.
Из-за особенности прототипного наследования, через любой объект можно получить доступ к Object.prototype, переопределить какой-либо базовый метод и, таким образом, добавить в приложение любую функциональность.

В первую очередь, уязвимости подвержены модули приложения, которые клонируют или сливают объекты, обрабатывают GET-параметры, парсят конфигурационные файлы. Чаще всего, на фронтенде эту уязвимость используют для XSS-атак, а на бэкенде — для DDoS или же получения удалённого доступа.

Автор статьи подробно рассмотрел принципы уязвимости, способы её поиска и защиты.
А ещё в статье есть ссылки на другие материалы по теме, полезные инструменты и библиотеки.