Не раздражающая валидация формы: CSS :user-valid и :user-invalid

#почитать

Новые псевдоклассы :user-valid и :user-invalid предоставляют более умный способ стилизации состояния валидности формы в зависимости от действия пользователя.

⏱Читать статью

Кнопки с несколькими состояниями

#почитать

Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей.

⏱Читать статью

CSS :has() — Псевдокласс, который давно ждали

#почитать

Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов.

⏱Читать статью

Модули CSS раскладки — что такое и как готовить

#почитать

В 20-ом веке браузеры были гораздо менее развиты, а CSS сильно ограничен. Он подходил только для оформления простых текстов что-то вроде документов Word. Для оформления сайтов приходилось обращаться к таблицам, чтобы создавать подобие типографской сетки для раскладки элементов. Пока в 2003 году не появился CSS Zen Garden, пропагандирующий оформление сайтов с помощью CSS. В оформлении использовались хаки с флоатами и другие трюки, но технология была несовершенна. Далее, с развитием браузеров, появились инлайн-блоки. Они неплохо справлялись с расположением элементов в ряд, но тоже имели недостатки. И только в начале десятых появились новые модули раскладки: Flexbox и Grid Layout. О них и поговорим.

⏱Читать статью

Альтернатива обычным техническим иллюстрациям и визуализации данных

#почитать

Как правило, технические иллюстрации и визуализацию данных выполняли с помощью бумаги, ручек, карандашей, циркулей и линеек. Но теперь возможно всё - вы можете использовать как аналоговые, так и цифровые методы. С момента массового распространения интернета, данные (текстовые, числовые, символьные) получили широкое распространение и стали современной золотой валютой. Любой, у кого есть программное обеспечение или кто знает язык программирования, может легко научиться визуализировать данные. И сегодня подготовить технические иллюстрации стало намного проще, чем в предыдущие годы. Но это не всегда означает, что то, что делается сегодня, лучше того, что делалось раньше.

⏱Читать статью

Web Performance API: Измерьте важное

#почитать

От медленного к быстрому: Использование JavaScript Performance API для оптимизации веб-приложений

⏱Читать статью

CSS @supports

#почитать

Определение поддержки возможностей CSS и обеспечение интеллектуального отката с помощью @supports

⏱Читать статью

Когда мобильной версии мало: зачем и как включать «Версию для ПК»

#почитать

Представьте, вам присылают макет интерфейса:

- Desktop-версия, содержит очень много функционала.
- Mobile-версия, отображает сообщение "Функционал не доступен. Откройте приложение на Desktop".

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

А что если не получится?

Тогда в этом случае, максимум что вы можете сделать — включить поддержку отображения Desktop версии на мобильных устройствах с помощью опции "Версия для ПК", чтобы пользователи могли воспользоваться недоступным функционалом.

⏱Читать статью

Золотое сечение в дизайне 2025: современные подходы к применению в веб и мобильном дизайне

#почитать

Золотое сечение (φ ≈ 1.618) — это математическая константа, которая представляет собой отношение двух величин, при котором отношение суммы этих величин к большей из них равно отношению большей к меньшей. Простыми словами: если у нас есть отрезок длиной A+B, то A/B = (A+B)/A ≈ 1.618.

В 2025 году актуальность золотого сечения только возросла. Почему?

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

⏱Читать статью

Модернизация с Web-платформой: уменьшение движения

#почитать

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

⏱Читать статью

Создаём свой Telegram-клон с помощью Next.js и TailwindCSS

#почитать

Рассмотрим процесс создания клона веб-версии Telegram с использованием Next.js, TailwindCSS и Stream SDK.

⏱Читать статью