WebDev+ | Веб-разработка
الذهاب إلى القناة على Telegram
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки Связь: @devmangx
إظهار المزيد
الشبكة:8 066
المشتركون
-124 ساعات
-247 أيام
-11030 أيام
أرشيف المشاركات
Складывание карт с помощью 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
Знал, что в JavaScript можно так?
Валидировать формы можно прямо через HTML-атрибуты.
А сообщения об ошибках настраивать через setCustomValidity.
Без библиотек и с поддержкой во всех браузерах.
@WebDev_Plus
Покажи календарь на сайте или в приложении без лишнего гемора.
Называется Cally, и он годный:
✓ Мультиязычный
✓ Весит всего 9 KB
✓ Кастомизируется через CSS
✓ Работает с React, Angular, Vue и т.д.
→
npm install cally
@WebDev_Plus
Искусственная задержка записи, например при отправке формы, может дать пользователю больше уверенности, что изменения действительно применились.
В high-frequency приложениях вроде Linear это начинает раздражать, но для редких действий, типа отправки контактной формы, такой подход ощущается лучше, чем оптимистичное обновление.
Можно использовать Promise.all, чтобы запускать мутацию и задержку параллельно. Тогда пользователь ждет только то, что дольше, а не сумму задержки и времени запроса.
// A minimum duration of `800ms`
const delay = new Promise((r) => setTimeout(r, 800));
await Promise.all([promise, delay]);
Плавно “затухай” текст или картинки.
Одной строкой CSS, без лишних HTML-элементов...
Просто используй mask-image
@WebDev_Plus
