Недавно команды React и Next.js представили Server Components, новый способ разработки веб-приложений, который со стандартным React-приложением совместим примерно никак.

Резонные вопросы: это такое же серьёзное изменение как и переход с Angular.js на Angular 2 и React сейчас проходит через ту же фазу, что и Angular.js когда-то?

Ответить на них постарался автор статьи. Подробности — под катом.

🤖Не Chat GPT единым: собрали для вас топ инструментов на основе ИИ для разработки (один из них — именно для веб) — сохраняйте и тестируйте⬇️

🔍Sketch2Code конвертирует рисунки от руки в HTML-прототипы
🔍Code Mentor оптимизирует и рефакторит код
🔍Copilot by GitHub помогает писать код и дополняет его своими предложениями
🔍ExplainDev обучает в процессе и помогает разобраться в коде
🔍GPT Engineer вообще может всю работу сделать за вас — нужно только сказать, что хотите написать

А чем пользуетесь вы? Пишите в комментариях, если в нашем списке чего-то не хватает 👇

#дайджест

Использование видео вместо анимированного gif повышает производительность (посмотреть пример).

#perfomance #tip by Shripal Soni

🔍Нашли удобный справочник с полезными инструментами для веб-разработки с генераторами разметки, тегами, цветовой палитрой с HEX-кодами и многим другим. Можно переключиться на CSS или JavaScript, а еще скачать страницу в виде PDF, чтобы держать перед глазами.

#инструмент

🖼️ Галерея React Graph — живые демонстрации огромного количества различных диаграмм и графиков, созданных с помощью React и D3.js, с пояснениями и кодом.

Особенно яркими выглядят диаграмма Sankey, treemap и коррелограмма, но и в остальных есть чем полюбоваться.

👉Сочетание GSAP ScrollTrigger и Flip с фильтром SVG

Здесь анимирована форма маски, к которой применен фильтр SVG Turbulence — в итоге получается такой эффект появления картинок при прокрутке.

🔍Демонстрация
🔍GitHub

🍇 Микрофронтенд: что это такое и зачем он нужен?

В этой статье сравним разные способы организации микрофронтенда, изучим их преимущества и стратегии реализации.

🔗 Основной сайт
🔗 Зеркало

🚀 Хотите получить быстрое обзорное представление о синтаксисе и фичах популярных JavaScript фреймворков и библиотек?

Component Party вам в помощь. Сам проект, например, написан на Vite и Svelte.

Простая альтернатива console.log() для отладки: на заметку фронтенд-разрабочику.

#devtool #tip by Shripal Soni

🤖 AI Getting Started — стартовый набор для «проектов выходного дня» на основе ИИ, который объединяет продуманный набор технологий, включая React, Next.js, Clerk для аутентификации, Langchain.js, Replicate для моделей изображений, Fly для деплоя и многое другое.

🔥 Обновления популярных инструментов с открытым исходным кодом: подборка для фронтендера

🔸 Ember 5.1 — амбициозный JavaScript-фреймворк, который никогда не сдается, делает большой шаг в мир TypeScript благодаря стабильной поддержке TypeScript и большому количеству типов.
🔸 Prisma 5.0 — популярная ORM для Node.js и TypeScript. v5.0 может похвастаться значительными улучшениями производительности.
машинопись-eslint 6.0.
🔸 p5.js 1.7 — JavaScript-библиотека для творческой разработки. v1.7 представляет поддержку WebGL 2 и frame buffer.
🔸 typescript-eslint 6.0 — инструмент, который позволяет стандартным инструментам JavaScript (ESLint и Prettier) поддерживать код TypeScript. v6 поставляется с набором различных улучшений, которые, как считает команда, должны вам понравиться.
🔸 Vizzu 8.0 — Javascript/C++ библиотека, использующая универсальный механизм визуализации данных, который создает множество типов диаграмм и плавно анимирует их между собой.
🔸 Boa 0.17 — экспериментальный лексер, парсер и компилятор Javascript, написанный на Rust, который можно встраивать в другие проекты — теперь он имеет модульную систему.
🔸 Octokit.js 3.0 — официальный GitHub SDK для браузеров, Node и Deno.
🔸 Release It! 16.1.2 — универсальный CLI-инструмент для автоматизации управления версиями и задач, связанных с публикацией npm-пакетов.
🔸 zlFetch 6.0 — удобный враппер вокруг Fetch API.
🔸 Terminalizer 0.11 — инструмент для записи терминала и создания анимированных GIF-файлов.
🔸 eslint-plugin-prettier 5.0 — плагин ESLint для форматирования Prettier.
🔸 Preact 10.16 — совместимая с React альтернатива размером 3 КБ с таким же современным API.
🔸 Sonner 0.6 — toast component для React.
🔸 React Virtuoso 4.4.1 — семейство мощных и простых в использовании компонентов React, которые отображают большие наборы данных.

#news

Практический пример производительности scroll-driven анимации

Scroll-driven анимация — это способ добавить интерактивности и визуального интереса к вашему веб-сайту или веб-приложению. Это отличный способ привлечь внимание пользователей и сделать сайт более привлекательным.

Команда Google представила новый набор API для поддержки scroll-driven анимации, которые вы можете использовать из CSS или JavaScript. API делает анимацию намного проще в реализации и намного более плавной.

🔗 Читать

4 простых шага для создания градиентной закругленной рамки с помощью CSS.

#css #tip by Shripal Soni