WebDev+ | Веб-разработка

Новогодний марафон по фронтенд-разработке. Основы вёрстки сайтов +ChatGPT. Участники бесплатного марафона от разработчика с 12-летним опытом Романа Чернова за 7 дней собирают сайт с нуля до публикации с поддержкой кураторов и оформляют портфолио, на которое слетаются клиенты. А главное, получают пошаговый план, как за 2–3 месяца развиться в профессии UX/UI-дизайнер до дохода 1000–2000$ на удалёнке. 👉 Регистрация открыта до 13 января — участие бесплатно. 🎁 В подарок — подборка от практикующих дизайнеров: «30 сервисов, без которых не обойтись в UX/UI».

Хватит использовать библиотеки для рейтингов. Я сделал компонент звездочного рейтинга только на CSS с поддержкой половинок звезд всего в 60 строк. Без JavaScript. Полностью доступный. С плавным hover. Я посмотрел существующие pure-CSS решения и почти везде одни и те же проблемы. Либо нет поддержки половинок, либо завязка на FontAwesome, либо дерганый и нестабильный hover. В итоге я сделал свое решение, используя только radio input’ы, label’ы и SVG-маски. Ключевая идея упирается в ограничение CSS: он умеет выбирать только элементы, идущие после текущего (через ~). А в рейтинге звезд нужно подсвечивать звезды до той, на которую навели курсор. Решение простое: переворачиваем DOM и визуально отражаем его через flex-direction: row-reverse.

.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

Порядок в DOM: 5★ → 0.5★ Визуальный порядок: 0.5★ → 5★ Теперь ~ выбирает визуально предыдущие звезды. Для половинок я разделил каждую звезду на два <label> — левую и правую половину. Каждый label использует SVG-маску половинки звезды. nth-of-type(odd) — правая половина nth-of-type(even) — левая половина Почему маска, а не background-image? У background-image нельзя динамически менять цвет заливки SVG. А mask работает как трафарет — сквозь него просто просвечивает background-color. В итоге hover — это просто смена цвета.

/* Подсветка при наведении */
label:hover,
label:hover ~ label {
  background-color: goldenrod;
}

/* Подсветка выбранного */
input:checked ~ label {
  background-color: gold;
}

Простые селекторы. Никаких JS-обработчиков. Отступы между звездами ломают UX hover’а — появляются «мертвые зоны», где ничего не подсвечивается. Фикс такой: расширяем ширину label, но оставляем mask-size прежним. Зазор виден визуально, но зона hover остается непрерывной. Radio-кнопки визуально скрыты, но остаются в DOM. Скринридеры видят: * нормальные radio input’ы * label’ы с aria-label вроде 3 1/2 stars * полноценную навигацию с клавиатуры CSS-only — это не компромисс по доступности. @WebDev_Plus

Перестаньте использовать <select multiple> для выбора нескольких значений. Это худший контрол в HTML для таких задач. К счастью, есть паттерн получше и он вовсе не странный. Самые заметные проблемы у <select multiple>: * Нужно зажимать Ctrl/Cmd для выбора сразу нескольких (немногие вообще знают об этом) * Маленькое окно, плохо сканируется взглядом * Один неправильный клик и можно снять все выделения * Внешний вид сильно зависит от ОС * Стилизовать почти нереально Гораздо понятнее использовать <fieldset> с чекбоксами: * Интеракция очевидна (галка = выбрано) * Все варианты сразу видны и легко сравнимы * Случайно убрать выбор сложнее * Стилизуется как угодно * Отличная доступность для скринридеров

<fieldset>
  <legend>Выберите интересы</legend>

  <label>
    <input type="checkbox" name="interests" value="css">
    CSS
  </label>

  <label>
    <input type="checkbox" name="interests" value="html">
    HTML
  </label>

  <!-- ... -->
</fieldset>

На бэкенде вы получаете массив значений, так же как и с <select multiple>. Например, в Rails это будет примерно так: { interests: ["css", "html"] } По обработке данных ничего не меняется. Меняется только UX — и в лучшую сторону. А поскольку это чекбоксы, стилизовать можно как угодно: * чипсы/теги * карточки * тумблеры * любые кастомные варианты под дизайн Попробуйте сделать что-то подобное с <select multiple>. В следующий раз, когда потянетесь к <select multiple>, остановитесь. Используйте fieldset + checkboxes. Пользователям будет проще @WebDev_Plus

Асинхронное ожидание на разделяемой памяти без блокировки основного потока → [https://goo.gle/49q5wq5] Atomics.waitAsync() теперь доступен в Baseline (Newly Available) и позволяет делать неблокирующую синхронизацию потоков для более плавной производительности. @WebDev_Plus

Складывание карт с помощью CSS Scroll-Timeline, без JavaScript https://codepen.io/karabharat/full/YPWXqmx @WebDev_Plus

Это, пожалуй, самый удобный способ поставить Node Инструмент называется fnm (Fast Node Manager) ✓ Позволяет держать несколько версий Node параллельно ✓ Быстрый, написан на Rust ✓ Ставится в один командный шаг ✓ Работает на Windows, macOS и Linux → http://github.com/Schniz/fnm @WebDev_Plus

Теперь можно запускать ретро-эмуляторы прямо в браузере 🎮 JS-библиотека, которая позволяет играть в старые консольные игры без установки софта. Просто подгружаешь ROM, и эмулятор стартует прямо в браузере на современных Web API. Исходники на GitHub: arianrhodsandlot/nostalgist @WebDev_Plus

На дворе 2026 год. Для форматирования дат в JavaScript не нужна библиотека. Просто используйте Intl @WebDev_Plus

Знал про этот трюк в React? Если стоят React DevTools, зажимаешь Ctrl + Shift и наводишь курсор на элемент — увидишь название компонента, которому он принадлежит. Удобно, когда быстро хочешь понять, что где рендерится. @WebDev_Plus

TIL про ListFormat. Очень удобная и реально мощная штука в JavaScript для форматирования списков так, чтобы они выглядели как естественная человеческая речь. @WebDev_Plus

Когда я использую <img/> вместо <Image/> в Next js Next js: @WebDev_Plus

Обожаю профайлер в Chrome DevTools. Благодаря ему нашёл одну строку, из-за которой функция тупо работала намного медленнее, чем должна. Поменял её — стало в десять раз быстрее, ушло минуты две. Такие лёгкие перф-плюшки реально стоит собирать, окупается на раз. @WebDev_Plus

Оргструктуры, дерево файлов, турнирные сетки — всё на чистом CSS. Без canvas, без SVG, без JavaScript. Только flexbox и псевдоэлементы. Разбираем по шагам. Начнём с базового дерева слева направо, где пару десятков строк CSS превращают вот это…(1 photo) во вот это…(2) HTML — обычные вложенные списки:

<ul class="tree">
  <li>
    <span>1</span>
    <ul>
      <li><span>1.1</span></li>
      <li><span>1.2</span></li>
    </ul>
  </li>
</ul>

Задача: превратить это в дерево с соединительными линиями. Основная механика — flexbox. Каждый <li> становится flex-контейнером:

li {
  display: flex;
  flex-direction: row;
  align-items: center;
}

Дочерние элементы идут горизонтально, ноды остаются по центру по вертикали. Первая линия: от родителя к дочерним элементам. Ставим её на <ul>, а не на родительский <li>:

ul::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  border-top: 1px solid;
  width: 2vw;
}

Дальше: линии от каждого ребёнка обратно к родителю. Та же техника, но на <li>:

li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  border-top: 1px solid;
  width: 2vw;
}

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

.tree > li {
  padding-left: 0;

  &::before, &::after {
    display: none;
  }
}

Самое тонкое место — вертикальные линии между соседями. Нужны разные высоты: первый ребёнок — нижняя половина последний — верхняя половина все промежуточные — целая линия Используем ::after:

li::after {
  content: "";
  position: absolute;
  left: 0;
  border-left: 1px solid;
}

li:first-of-type::after { height: 50%; bottom: 0; }
li:last-of-type::after  { height: 50%; top: 0; }
li:not(:first-of-type):not(:last-of-type)::after {
  height: 100%;
}

78 строк CSS — и дерево готово. Но это только горизонтальный вариант слева направо. @WebDev_Plus

Эффект снега для вашего веб-сайта с помощью CSS и JS. https://codepen.io/jkantner/pen/MYeWWab @WebDev_Plus

Входящие сообщения WhatsApp для Cloud API, созданного с помощью Next.js https://github.com/gokapso/whatsapp-cloud-inbox/ @WebDev_Plus

Сколько бы видосов про server components ты ни смотрел, топовый демо до сих пор тот, который запилила core-команда react: https://github.com/reactjs/server-components-demo Там нет вообще никакой интеграции с Next.js, поэтому можно нормально врубиться в сам Flight-протокол. Очень чётко показана граница server «-» client. Что тебе реально нужно, чтобы поэкспериментировать: react-server-dom-webpack, createFromFetch, папки Server и Client. Если хочешь другой заход для обучения, вот сюда: https://github.com/reactwg/server-components/discussions/5 Там инженеры из Meta спорили и проектировали RSC. Мне это очень зашло, потому что помогает понять, как принимались решения, а не только как оно работает. Если после этого всё ещё чешутся руки реально поковырять код, да, я серьёзно, иди вот сюда: https://github.com/facebook/react/tree/main/packages/react-server-dom-webpack Там видно, как именно делается сериализация и как кодируются ссылки. Пожалуйста, обходи стороной рандомные мусорные medium-посты в духе «разберись в RSC за 10 минут». И без этого базового понимания даже не начинай жаловаться, что RSC бесполезны. Мозг же есть, зайди, посиди, разберись. И в конце уже сравни сам, что именно прячет next-модель от vercel по сравнению с тем, как это устроено у Meta. @WebDev_Plus

Сегодня на HackerNews взлетел проект MQuickJS https://github.com/bellard/mquickjs MQuickJS — это JavaScript-движок под встраиваемые системы, рассчитанный на ультра-скудные ресурсы. Он умеет компилировать и выполнять JS в условиях, где память на вес золота. Память жрёт копейки: около 10 kB RAM для запуска, что прям впечатляет. Но есть нюанс — это не полный JS, а подмножество ES5, плюс всё время строгий режим. @WebDev_Plus

Быстрый совет по TanStack Router: Вынеси состояние в URL через useSearch. Страница сразу становится сохраняемой в закладки и удобной для шаринга. @WebDev_Plus

Какие фичи C++ реально стоят того, чтобы ими пользоваться каждый день — а какие живут только в докладах и спорах на форумах? Во втором выпуске «АйТир Листа» встретились два практикующих разработчика — Данил Черепанов (МойОфис) и Антон Полухин (Яндекс) — и разобрали любимые и спорные возможности C++. Где-то всё было однозначно, а местами мнения разошлись кардинально 🙂 👉 Выпуск ЗДЕСЬ Реклама ООО "НОВЫЕ ОБЛАЧНЫЕ ТЕХНОЛОГИИ" ИНН: 7703807270 erid: 2W5zFGjfkXz

Инструмент, который вытаскивает всю информацию о веб-сайте. ✓ Находит проблемы безопасности ✓ Метрики оптимизации и качества ✓ DNS, TXT-записи, SSL, IP-информация и HTTP-заголовки Ресурс бесплатный и реально полезный: → http://web-check.xyz @WebDev_Plus