Крутая статья недавно вышла на Хабре: «Заменяем JavaScript с помощью HTML и CSS»

В этой статье:
• использование `:has()` для управления состояниями компонентов;
• создание модальных окон и подсказок через Popover API;
• валидация форм с помощью встроенных возможностей браузера;
• стилизация сложных интерактивных состояний только средствами CSS.

🔊 Продолжайте читать на Habr!

📣 Code Ready | #статья

Портфолио, из-за которого тебя не зовут на собеседования

Ты веб или граф дизайнер, но хочешь перейти в продукт?

Есть ошибки, которые делают 80% ребят в портфолио, и потом думают, что дело в недостатке опыта.

Мы собрали чеклист «10 редфлагов в портфолио», которые мешают перейти в продукт и получать х2 по деньгам.

💥 Примеры плохих и хороших кейсов
💥 Что убрать, что добавить в кейсах
💥 Как адаптировать портфолио под продуктовый рынок

Забрать чек-лист редфлагов в закрепе: @formfactor

Node.normalize(): восстановление нормализованной формы текстовых узлов в DOM!

После операций с Text, Range и точечной модификации DOM содержимое элемента может оказаться фрагментировано на несколько соседних текстовых узлов.
const container = document.createElement('div');
const text = document.createTextNode('Hello');

container.append(text);

const tail = text.splitText(2);

console.log([...container.childNodes].map(node => node.data));
// ['He', 'llo']

Для рендеринга это обычно не имеет значения:
console.log(container.textContent);
// Hello

Но для кода, который анализирует структуру дерева через childNodes, firstChild, nextSibling или хранит ссылки на конкретные Text-узлы, такая фрагментация уже существенна.

Метод Node.normalize() приводит всё поддерево узла к нормализованной форме:
container.normalize();

console.log(container.childNodes.length);
// 1

console.log(container.firstChild.data);
// Hello

Нормализация выполняется рекурсивно и гарантирует, что в обработанном поддереве: не останется пустых текстовых узлов; не останется соседних текстовых узлов без разделяющего их элемента, комментария или другого типа узла.

При объединении данные последующих Text-узлов добавляются к первому узлу группы, а сами последующие узлы удаляются из дерева.
console.log(tail.parentNode);
// null

Сохранённая ссылка tail при этом не становится невалидной: объект продолжает существовать, но больше не является частью DOM-дерева.

Важно и другое: normalize() не объединяет весь текст элемента в один узел, если между текстовыми узлами находятся другие узлы.
<p>Hello <strong>DOM</strong>!</p>

Здесь текст до и после <strong> останется в разных Text-узлах и после нормализации.

Метод особенно полезен после splitText(), операций с Range и редакторских сценариев, где текстовые узлы регулярно разрезаются и склеиваются:
const paragraph = document.createElement('p');
const text = document.createTextNode('Hello world');

paragraph.replaceChildren(text);

text.splitText(5);

console.log(paragraph.childNodes.length);
// 2

paragraph.normalize();

console.log(paragraph.childNodes.length);
// 1

🔥 Node.normalize() не меняет текстовое содержимое элемента, но приводит его поддерево к нормализованной форме: без пустых и соседних текстовых узлов. Это полезно перед обходом DOM, сериализацией, сравнением структуры или выполнением алгоритмов, которые рассчитывают на предсказуемую организацию Text-узлов.

📣 Code Ready | #практика

Издательский дом «Новые отраслевые медиа» собрал для вас лучшие каналы из сферы искусственного интеллекта и интернет-технологий, которые помогают своим подписчикам быть в курсе всех важных профессиональных новостей.

Здесь - всё про ключевых игроков отрасли, государственное регулирование, инсайды и кейсы от отраслевых лидеров.

✅Серверная - канал об индустрии дата-центров: технологиях, инфраструктуре, облачных решениях, энергоэффективности и применении ЦОД в ключевых отраслях экономики.

✅Робосфера - канал об индустрии робототехники: технологии и тренды. Промышленные и сервисные роботы, коботы, автоматизация, ИИ, машинное зрение, автономные системы.

✅AI для бизнеса - всё об AI-решениях для бизнеса: внедрение, автоматизация, корпоративный ИИ, агенты.

✅ТехноРитейл - канал о производстве и продаже бытовой техники и электроники в России: бренды, e-com, маркетинг, retail tech.

Подписывайтесь, и эти каналы смогут изменить вашу жизнь к лучшему!

Реклама. Харламов А.Е. ИНН 712803816807. erid: 2W5zFJRaaAD

🎨 Цветовая палитра макета "Presentation Template 02"

HEX | RGB
#1BA58B | rgb(27, 165, 139)
#A61C1C | rgb(166, 28, 28)
#333333 | rgb(51, 51, 51)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра

💾 Hamburgers – набор анимированных иконок для меню. Анимация сделана за счет вращения, а также расширения иконки вниз и вверх.

Сайтодел | #сниппет #css

🖥 School App – дизайн приложения для школьников, который включает сочетания разных геометрических фигур и контрастные цвета.

Сайтодел | #макет #figma

😂 Так и знал, это — чертово эльфийское проклятье

С добрым утром, хорошего дня!

👩‍💻 Блок для видео, аудио и прочего контента!

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

Атрибуты:
• src — ссылка на загружаемый контент;
• type — тип загружаемого контента в формате MIME. Тип указывать не обязательно, но желательно. Так браузер будет точно знать, какой плагин использовать для отображения контента;
• width — ширина в пикселях;
• height — высота в пикселях.

<embed> не заменяет универсальное решение для всех типов контента. Например, для видео лучше использовать <video>, для аудио — <audio>, а для документов чаще применяют <iframe>.

📣 Code Ready | #атрибут

🐙 UI – репозиторий с примерами простых компонентов пользовательского интерфейса. Элементы написаны на React.js и Next.js.

Сайтодел | #репозиторий #github

💀 Киберпанк. Итоги.

На «Госуслугах» появится сервис поиска... мест на кладбищах.

Это не шутка. В ближайшее время россияне смогут заранее, прямо в приложении подобрать участок на кладбище, посмотреть доступные варианты и оформить всё онлайн. В систему планируют загрузить данные более чем о 14 тысячах кладбищ по всей стране.

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

Damn... 🌟

Проверяй возможности браузера прямо в CSS!

Многие делают такие проверки через JavaScript:
if ("container" in document.documentElement.style) {
// включаем новую логику
}

Но CSS уже давно умеет сам проверять поддержку возможностей.
@supports (display: grid) {
.layout {
display: grid;
}
}

Это особенно полезно при постепенном внедрении новых CSS API.

Например, можно безопасно добавить современные возможности:
@supports (interpolate-size: allow-keywords) {
.accordion {
interpolate-size: allow-keywords;
}
}

Старые браузеры просто проигнорируют этот блок.

Для больших проектов это позволяет мигрировать постепенно.
@supports not (selector(:has(*))) {
/* fallback */
}

🔥 @supports позволяет внедрять новые CSS-возможности без JS-проверок и не ломать поддержку старых браузеров.

📣 Code Ready | #совет

💾 Box Shadow Animation – эффект изменения ширины рамки. Достигается за счет анимации для тени кнопок.

Сайтодел | #сниппет #css

🚀 ScreenCoder — Новый уровень магии для фронтендеров и дизайнеров.

Загружаете скриншот или макет, а нейросеть превращает его в чистый, готовый к продакшену HTML/CSS-код 🤯

Больше не нужно вручную верстать кнопки и блоки — ScreenCoder понимает визуал, сам планирует layout и пишет код, который можно сразу редактировать и использовать.

Что умеет:
🟢Превращает любой дизайн в HTML/CSS;
🟢Генерирует чистую и читаемую верстку;
🟢Позволяет менять стили и структуру под себя;
🟢Подходит и для быстрых прототипов, и для пиксель-перфект интерфейсов.

Просто — загрузил, скопировал, подправил, развернул.

Design → Code за пару секунд.

♎️ GitHub/Инструкция по установке

#python

💾 Turnable Cards – трехмерная анимация карточек. При наведении курсора карточка просто двигается, а при нажатии - переворачивается.

Сайтодел | #сниппет #css

👩‍💻 Стилизуют элементы формы по валидности!

:user-valid и :user-invalid — псевдоклассы, которые совпадают с элементами форм по их валидности, но только после того, как пользователь изменил значение поля (элемент стал «грязным»). Это позволяет показывать обратную связь не сразу при загрузке страницы, а лишь после действия пользователя.

Как они работают:
• :user-valid — пользователь ввёл корректное значение;
• :user-invalid — введённые данные не прошли валидацию.

Главное преимущество — форма не показывает ошибку сразу при загрузке страницы. Это удобно для более аккуратной UX-валидации без JavaScript.

📣 Code Ready | #свойство

🖥 School App – дизайн приложения для школьников, который включает сочетания разных геометрических фигур и контрастные цвета.

Сайтодел | #макет #figma