This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
А давайте ещё больше безумных идей богу безумных идей.
Как вам фильтрация списка на CSS? Уж точно покруче FizzBuzz задачи на собеседовании.
А достигается волшебство путём использования селекторов пот атрибутам:
i — означает case-insensitive, регистронезависимый ввод.
Пример на CodePen: https://codepen.io/jh3y/pen/NWyaomN
Пример, конечно, выглядит малость упорото — он на JS генерирует вышеописанный код на CSS, но даже при всём этом — выход весьма декларативен и позволяет поиграть эффектами скрытия-отображения элементов на ура.
Просто считайте это вашим маленьким DSL (domain-specific language, язык под задачу).
Основная идея: не забывайте, что у вас и такое есть под рукой.
#css #js #attributes
А давайте ещё больше безумных идей богу безумных идей.
Как вам фильтрация списка на CSS? Уж точно покруче FizzBuzz задачи на собеседовании.
А достигается волшебство путём использования селекторов пот атрибутам:
[term] { display: none; }
[term*="a" i] { display: list-item; }
i — означает case-insensitive, регистронезависимый ввод.
Пример на CodePen: https://codepen.io/jh3y/pen/NWyaomN
Пример, конечно, выглядит малость упорото — он на JS генерирует вышеописанный код на CSS, но даже при всём этом — выход весьма декларативен и позволяет поиграть эффектами скрытия-отображения элементов на ура.
Просто считайте это вашим маленьким DSL (domain-specific language, язык под задачу).
Основная идея: не забывайте, что у вас и такое есть под рукой.
#css #js #attributes
🔥14👍4😁2
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
А давайте ещё больше безумных идей богу безумных идей.
Как вам фильтрация списка на CSS? Уж точно покруче FizzBuzz задачи на собеседовании.
А достигается волшебство путём использования селекторов пот атрибутам:
i — означает case-insensitive, регистронезависимый ввод.
Пример на CodePen: https://codepen.io/jh3y/pen/NWyaomN
Пример, конечно, выглядит малость упорото — он на JS генерирует вышеописанный код на CSS, но даже при всём этом — выход весьма декларативен и позволяет поиграть эффектами скрытия-отображения элементов на ура.
Просто считайте это вашим маленьким DSL (domain-specific language, язык под задачу).
Основная идея: не забывайте, что у вас и такое есть под рукой.
#css #js #attributes
А давайте ещё больше безумных идей богу безумных идей.
Как вам фильтрация списка на CSS? Уж точно покруче FizzBuzz задачи на собеседовании.
А достигается волшебство путём использования селекторов пот атрибутам:
[term] { display: none; }
[term*="a" i] { display: list-item; }
i — означает case-insensitive, регистронезависимый ввод.
Пример на CodePen: https://codepen.io/jh3y/pen/NWyaomN
Пример, конечно, выглядит малость упорото — он на JS генерирует вышеописанный код на CSS, но даже при всём этом — выход весьма декларативен и позволяет поиграть эффектами скрытия-отображения элементов на ура.
Просто считайте это вашим маленьким DSL (domain-specific language, язык под задачу).
Основная идея: не забывайте, что у вас и такое есть под рукой.
#css #js #attributes
👍13🔥3👎1
#продолжение дня
Собственно, помните, в сегодняшнем посте про атрибуты я написал, что на React они ощущаются максимально нативно и элегантно?
Ну ок, написал не так, но это в виду и имел.
Представьте жить в мире, где атрибуты были бы нормой.
И не data-бред, а любые. Не пришлось бы накидывать классы, создавать их композицию, выдумывать БЭМ, OOCSS и прочие методологии, превращающие вёрстку во что-то более-менее поддерживаемое на уровне API отдельных компонентов… Ладно, что-то я разошёлся по мотивам недавнего спора.
Короче, картинку я украл в твиттере Кричащего банана. Он норм пишет, моя рекомендация.
#attributes #css #react
Собственно, помните, в сегодняшнем посте про атрибуты я написал, что на React они ощущаются максимально нативно и элегантно?
Ну ок, написал не так, но это в виду и имел.
Представьте жить в мире, где атрибуты были бы нормой.
И не data-бред, а любые. Не пришлось бы накидывать классы, создавать их композицию, выдумывать БЭМ, OOCSS и прочие методологии, превращающие вёрстку во что-то более-менее поддерживаемое на уровне API отдельных компонентов… Ладно, что-то я разошёлся по мотивам недавнего спора.
Короче, картинку я украл в твиттере Кричащего банана. Он норм пишет, моя рекомендация.
#attributes #css #react
👍18