Новый синтаксис для диапазонов значений в медиавыражениях: обзор нововведения в спецификации медиавыражений, существенно упрощающего чтение стилей → https://css-tricks.com/the-new-css-media-query-range-syntax/

Как команда Wix улучшила тысячи плохо сформулированных сообщений об ошибках и как они изменили процессы, чтобы не допустить появления плохих текстов ошибок в будущем → https://scribe.rip/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f

Критический CSS? Не так быстро! Гарри Робертс объясняет, когда стоит заморачиваться с выделением критического CSS (очень редко!) и какие сложности при этом вас ждут → https://csswizardry.com/2022/09/critical-css-not-so-fast/

System font stack, шпаргалка с кодом для использования системных шрифтов в проекте → https://systemfontstack.com

Чем плохи события готовности DOM вроде DOMContentLoaded и что использовать вместо них: объяснение и обзор альтернатив от Джейка Арчибальда и Кэсси Эванс → https://youtu.be/_iq1fPjeqMQ

Улучшаем прокрутку благодаря современному CSS: обширный обзор современных способов кастомизации как внешнего вида, так и поведения прокрутки в браузерах → https://blog.mayank.co/better-scrolling-through-modern-css

Для затравки: в современных браузерах предовтратить сдвиг страницы при блокировке скролла (например, при открытии диалога) можно одним CSS-свойством scrollbar-gutter ⚡️

Марсианка Нина Торгунакова перевела статью Андрея Ситника про новые спецификации CSS и цветовое пространство OKLCH. Читайте на портале “Вебстандарты”!

https://web-standards.ru/articles/oklch-in-css-why-quit-rgb-hsl/

Анимированная карточка товара

Оставляем для вас ниже код для создания анимированной карточки товара на HTML и CSS.

💻Забрать код

#html #css #практика

Пагинация страниц

Оставляем для вас ниже код, который поможет создать пагинацию страниц на HTML, CSS и JavaScript.

💻Забрать код

#html #css #javascript #практика

Адаптивная форма входа и регистрации

Оставляем для вас ниже видео и код, с помощью которых вы можете создать адаптивную форму входа и регистрации.

👀Смотреть видео
💻Забрать код

#html #css #javascript #практика #адаптивнаявёрстка

Анимированный фон

Оставляем для вас ниже код, который поможет создать необычный анимированный фон на HTML, CSS и JavaScript.

💻Забрать код

#html #css #javascript #практика

Градиентная анимация загрузки

Оставляем для вас ниже код, который поможет создать круговую анимацию загрузки с градиентом на HTML и CSS.

💻Забрать код

#html #css #практика

Как сократить время начальной загрузки веб-приложения

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

👉Читать статью

#полезное

Анимация загрузки

Оставляем для вас ниже готовый код анимации загрузки на HTML, CSS и JavaScript.

💻Забрать код

#html #css #javascript #практика

Кнопка с эффектом при наведении

Делимся с вами ниже кодом для создания кнопки с эффектом молнии при наведении на HTML и CSS.

💻Забрать код

#html #css #практика

Анимированные иконки социальных сетей

Делимся ниже готовым кодом иконок социальных сетей с эффектом при наведении на HTML и CSS.

💻Забрать код

#html #css #практика

Разделяй и не страдай: что выбрать для микрофронтенда?

В этой статье постарался сравнить разные способы организации МФ-ов, а также сформировать рекомендации, где какой подход использовать.

https://habr.com/ru/company/simbirsoft/blog/698240/

#js #education #ru

SSSVG, справочник по основным возможностям SVG с интерактивными примерами → https://fffuel.co/sssvg/

Отзывчивая вёрстка в 2023 году: Ахмад Шадид рассказывает о современных возможностях CSS, изменивших подход к отзывчивой вёрстке → https://ishadeed.com/article/responsive-design/

Что нового завезли в DevTools (Chrome 111)

Совсем недавно вышел Chrome 111 и принёс не только исправление старых ошибок, но и добавление новых, а также приятные фичи в DevTools, о которых мы с вами сейчас и узнаем.

https://habr.com/ru/post/717800/

#js #ru

💬 Чат фронтендеров

Современная вёрстка email-писем (без таблиц!): обзор текущего состояния email-клиентов, их возможностей и новых подходов к вёрстке писем → https://fullystacked.net/posts/modern-html-email/