اکنون در دسترس! پژوهش تلگرام ۲۰۲۵ — مهمترین بینشهای سال 
WebDev+ | Веб-разработка
رفتن به کانال در Telegram
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки Связь: @devmangx
نمایش بیشتر8 308
مشترکین
-624 ساعت
-237 روز
-9030 روز
آرشیو پست ها
Новогодний марафон по фронтенд-разработке. Основы вёрстки сайтов +ChatGPT.
Участники бесплатного марафона от разработчика с 12-летним опытом Романа Чернова за 7 дней собирают сайт с нуля до публикации с поддержкой кураторов и оформляют портфолио, на которое слетаются клиенты.
А главное, получают пошаговый план, как за 2–3 месяца развиться в профессии UX/UI-дизайнер до дохода 1000–2000$ на удалёнке.
👉 Регистрация открыта до 13 января — участие бесплатно.
🎁 В подарок — подборка от практикующих дизайнеров: «30 сервисов, без которых не обойтись в UX/UI».
+1
Хватит использовать библиотеки для рейтингов. Я сделал компонент звездочного рейтинга только на 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;
}~ выбирает визуально предыдущие звезды.
Для половинок я разделил каждую звезду на два <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;
}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
+1
Оргструктуры, дерево файлов, турнирные сетки — всё на чистом 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>li {
display: flex;
flex-direction: row;
align-items: center;
}ul::before {
content: "";
position: absolute;
left: 0;
top: 50%;
border-top: 1px solid;
width: 2vw;
}li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
border-top: 1px solid;
width: 2vw;
}.tree > li {
padding-left: 0;
&::before, &::after {
display: none;
}
}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%;
}
Эффект снега для вашего веб-сайта с помощью 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
