Сериал «История фронтенда», второй выпуск: JavaScript как отражение новой эпохи. История языка JavaScript, его стандарта ECMAScript и выросшей вокруг него экосистемы в 2000-х годах → https://blog.csssr.com/ru/article/frontend-history-java-script-as-a-reflection-of-a-new-era/

Коллекции плохих практик и ошибок применения HTML и CSS с рекомендациями по исправлению, собранные на основе реальных сайтов:

HTMHell → https://www.htmhell.dev
CSS Hell → https://csshell.dev

Генеративный дизайн для шеринга в соцсетях: руководство по разработке конструктора картинок с генеративным фоном на SVG → https://georgefrancis.dev/writing/generative-svg-social-images/

Learn CSS, новый «вечнозелёный» курс по CSS от Google Developers: 24 модуля с теорией, интерактивными демками и проверочными заданиями → https://web.dev/learn/css

#фишка дня

А знали ли вы, что в Chrome DevTools есть возможность эмулировать различные доступные на устройствах сенсоры?

Ну из очевидного: гироскоп, компас, освещённость.

Джей, деврел в Google, замапил сенсоры на 3D-кубик и запилил для нас демо на побаловаться: https://codepen.io/jh3y/pen/KKQZQNj

Открывайте пример, врубайте DevTools, вызывайте сочетанием Ctrl(Cmd)-Shift-P панель команд и ищите там Sensors. Как найдёте — сообщите 😉

#codepen #devtools #sensors

Организуем библиотеку иконок в проекте с автоматической выгрузкой из Figma: Михаил Кононенко из Joom делится опытом автоматизации и упрощения работы с иконками → https://habr.com/ru/company/joom/blog/708286/

Доступность в дизайне: Роман Шамин рассказывает о практических приёмах, требующих 20% усилий дизайнера и обеспечивающих 80% доступности экранных интерфейсов → https://teletype.in/@romanshamin/a11y-for-designers

Почему не стоит использовать пиксели для задания размера шрифта в CSS: Джош Коллинсворт объясняет, как различные единицы измерения влияют на UX → https://joshcollinsworth.com/blog/never-use-px-for-font-size

Геометрия DOM: обширный обзор существующих методов и свойств для работы с размерами и отступами DOM-элементов и документа в JS → https://www.smashingmagazine.com/2022/11/document-object-model-geometry-guide/

Как нормально обрезать текст: Илья Бирман рассказывает о простых правилах, которые позволяют избежать казусов и улучшить UX → https://ilyabirman.ru/meanwhile/all/how-to-cut-text/

Новый синтаксис для диапазонов значений в медиавыражениях: обзор нововведения в спецификации медиавыражений, существенно упрощающего чтение стилей → 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 #практика