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

Предотвращение цепной прокрутки с помощью overscroll-behavior Если мы попытаемся выполнить прокрутку, когда граница скроллинга достигнута, то прокрутка будет выполнена в ближайшей родительской области скроллинга, что называется цепочкой прокрутки(scroll chaining) Мы можем предотвратить цепочку прокрутки, установив для свойства overscroll-behaviour значение contain или none - Подробнее - Поиграть можно здесь @WebDev_Plus

Каждый раз, когда я начинаю новый проект на JavaScript, я устанавливаю эти библиотеки. Сохраните это на потом ;) @WebDev_Plus

Теперь доступно: https://iso-coaster.com Бесплатный конструктор парка аттракционов с открытым исходным кодом, включающий магазины, водные/металлические/деревянные американские горки, гостей, еду, магазины и многое другое. Регистрация не требуется, кооперативный режим включен. @WebDev_Plus

Фронтенд-библиотеки, без которых я в 2026 кодить не сяду: ▪️zod — валидация ▪️react-hook-form — формы ▪️tRPC + react-query — синхронизация данных ▪️shadcn — UI ▪️motion — анимации ▪️date-fns — утилиты для дат ▪️zustand — стейт-менеджмент ▪️nuqs — search params ▪️recharts — графики ▪️ai — AI toolkit ▪️react-table — таблицы (до сих пор недооценён) @WebDev_Plus

❌Одновременное рендеринг 10 000 элементов ✅Рендеринг только того, что видно @WebDev_Plus

Впечатляющая коллекция анимированных компонентов. +100 доступных. Открытый исходный код и бесплатно: → http://github.com/kokonut-labs/kokonutui @WebDev_Plus

Новое CSS-свойство corner-shape открывает кучу интересных новых UI-паттернов.

corner-shape: bevel round;
border-radius: 1em 0 / 3em 0;

@WebDev_Plus

Если вдруг пропустили: в Chrome DevTools появилась точечная эмуляция медленного интернета Теперь DevTools позволяет эмулировать медленное сетевое соединение не для всей страницы целиком, а только для конкретных запросов Это помогает тестировать, как веб-приложение работает и обрабатывает проблемы, когда отдельные ресурсы (например, изображения, скрипты или API-запросы) загружаются медленно @WebDev_Plus

Await — это стена. Ничто не выполняется после нее, пока обещание не будет выполнено. Поместите эту стену после ранних возвратов, а не перед ними. @WebDev_Plus

Как frontend-разработчику получить оффер в Big Tech? Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные. Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK... Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.

В своем канале: 👉Разбираю самые популярные и каверзные вопросы на собесах 👉Рассказываю как пройти фильтр HR 👉Борюсь с убеждениями, которые мешают развиваться 👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров Регулярно публикую полезные материалы: ▪️60 вопросов, которые точно помогут тебе на собеседовании. ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1 ▪️Чек лист проверки своего резюме Подписывайся, нас уже 4500 🤓: ссылка Реклама, erid 2W5zFGLv4HW: ИП Галактионов Тихон Витальевич, ИНН 771618975809

⚡️Деструктуризация массива JavaScript @WebDev_Plus

❌useMemo, useCallback, memo повсюду ✅React Compiler обрабатывает это автоматически React Compiler v1.0 уже здесь. Он анализирует ваш код во время сборки и добавляет мемоизацию там, где это необходимо.↓

Собирать клон реального приложения полезно: сразу понимаешь, как на практике решаются типовые dev-проблемы. В этом курсе проведут тебя через сборку full-stack клона Instagram на Laravel и MongoDB. Настроите, чтобы весь стек нормально дружил между собой, поднимете аутентификацию и профили, научитесь работать с изображениями и сделаете еще много всего. Смотрим бесплатно @WebDev_Plus

Всем вайб-кодерам: какой тут использован JS-концепт? Только не юзайте для этого ИИ. Это же совсем базовая штука 😅 @WebDev_Plus

👩‍💻 Всем программистам посвящается! Вот 14 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Python — t.me/python_ready 🤔 InfoSec & Хакинг — t.me/hacking_ready 🖥 SQL & Базы Данных — t.me/sql_ready 🤖 Нейросети — t.me/neuro_ready 👩‍💻 Frontend — t.me/frontend_ready 👩‍💻 IT Новости — t.me/it_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 👩‍💻 Linux — t.me/linux_ready 👩‍💻 Java — t.me/java_ready 📖 IT Книги — t.me/books_ready 📱 JavaScript — t.me/javascript_ready 🖼️ DevOps — t.me/devops_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

❌useMemo для простых вычислений ✅useMemo нужен только для реально дорогих операций Цена мемоизации в React часто выше, чем просто пересчитать заново ↓

Чувак сделал плагин анимаций для Tailwind ✓ 70+ готовых переходов из коробки ✓ Настраивай анимации через классы ✓ Анимируй элементы по скроллу ✓ Чистый CSS, топ по производительности

npm install tailwind-animations

@WebDev_Plus

Каждый раз, когда видишь setState внутри useEffect, иди постой в углу 5 минут и подумай о том, что ты натворил. А потом удали этот useEffect @WebDev_Plus

Сохраняй отзывчивость UI во время тяжелых рендеров с useTransition(): React ставит пользовательский ввод выше переходов (transitions) ↓

Интерактивная библиотека визуализации данных — ECharts Позволяет добавлять интуитивно понятные, интерактивные и настраиваемые диаграммы в проект. - Предоставляет более 20 типов диаграмм - Переключение между рендерингом Canvas и SVG - Автоматически генерируемые описания диаграмм - Написана на чистом JavaScript Забираем тут @WebDev_Plus