Телеграм канал «WebDev+ | Веб-разработка»

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

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

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

• 1
  • 1.1
  • 1.2

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

становится flex-контейнером: 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; } } Самое тонкое место — вертикальные линии между соседями. Нужны разные высоты: первый ребёнок — нижняя половина последний — верхняя половина все промежуточные — целая линия Используем ::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