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

Новое 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

❌ Не используй barrel imports в React ✅ Импортируй компоненты напрямую Barrel imports (реэкспорт через index.js) тянут весь модуль, даже если тебе нужен один компонент. В итоге в бандл попадает лишний, неиспользуемый код ↓

Принёс находку: sshx. Всего одна команда, и у вас в браузере открывается реплика локального терминала: можно звать коллег по ссылке, видеть курсоры друг друга и даже чатиться Идеально для дебага, обучения или просто совместной работы. Cайт здесь, GitHub тут @WebDev_Plus

Совет React: как избежать водопадов извлечения данных в серверных компонентах ↓

Преобразования строк на уровне типов

type Feature = "user" | "payment" | "order";

type SuccessEvent<T extends string> = `${Uppercase<T>}_SUCCESS`;

type events = SuccessEvent<Feature>;
// "USER_SUCCESS" | "PAYMENT_SUCCESS" | "ORDER_SUCCESS"

type EventHandler<T extends string> = `on${Capitalize<T>}Success`;

type event_handler = EventHandler<Feature>;
// "onUserSuccess" | "onPaymentSuccess" | "onOrderSuccess"

@WebDev_Plus

Представили Auto Layout в Anime.js v4.3 * Анимация display: flex / grid / none и т.д. * Enter / Leave анимации * Анимация изменения позиции DOM-элементов * Прерываемые (interruptible) анимации * Stagger-анимации для дочерних элементов * Поддержка любых easing-функций * Максимально простой API Документация: https://animejs.com/documentation/layout Примечания к выпуску: https://github.com/juliangarnier/anime/releases/tag/v4.3.0 CodePen Примеры: https://codepen.io/collection/yykPaw @WebDev_Plus

Впечатляющие анимации, которые можно создать с помощью библиотеки GSAP всего за несколько строк кода: @WebDev_Plus