Frontender Libs - обзор библиотек JS / CSS

TS Particles Создавайте детализированные настройки для частиц и анимаций конфетти и фейерверков, используя их в качестве анимированных фонов для вашего сайта. Готовые компоненты доступны для React, Angular, Svelte, и Web Components. У TS Particles более 5 500 звезд на GitHub и 54 000 еженедельных загрузок NPM. 👉 @sWebDev

Анимация React Move Анимация, реагирующая на действия пользователя: при клике элементы меняют свое положение на странице. Выполнено на React. 👉 @sWebDev

Гармонизация внешнего Frontend и Backend: глубокое погружение в сотрудничество Angular и .NET Рассмотрим эффективное взаимодействие между фронтендом на Angular и бэкендом на платформе .NET. Автор рассматривает основные аспекты этого взаимодействия, включая межплатформенную коммуникацию, обработку ошибок, аутентификацию и авторизацию. Он также предлагает подход к организации кода и общей архитектуре приложения. 👉 @sWebDev

Hex/RGB Auto Color Converter in Vue Преобразователь цвета из HEX в RGB. Выполнено с помощью SCSS и Vue.js. 👉 @sWebDev

React Move React Move позволяет разработчикам создавать привлекательные анимации на основе данных. Это легковесная библиотека, которая отображает события жизненного цикла при загрузках страниц. 👉 @sWebDev

Самый безопасный способ скрыть ключи API при использовании React Изучим безопасные подходы для скрытия ключей API в приложениях React. Автор рассматривает проблему хранения API-ключей в клиентском коде и предлагает использовать переменные окружения и специальные пакеты, такие как dotenv и webpack.DefinePlugin, для обеспечения безопасности и защиты ключей от публичного доступа. 👉 @sWebDev

Magic area on hover/focus Один из вариантов оформления портфолио на сайте, выполненный с использованием SCSS и GSAP.js. 👉 @sWebDev

Отображение массива элементов Vue.js Используйте директиву v-for для отрисовки списка элементов на основе массива данных. У директивы v-for особый синтаксис записи: item in items, где items — исходный массив, а item — ссылка на текущий элемент массива:

   <ul>
       <li v-for="item in items" :key="item.id">
          {{ item.name }}
       </li>
    </ul>

Код отобразит каждый элемент массива items в виде элемента списка <li>. Директива v-for автоматически создает элементы на основе данных. :key используется для определения уникального ключа элемента. Это обеспечивает оптимальную производительность и помогает Vue отслеживать изменения. v-for работает и с объектами и допускает использование (value, key) для итерации по парам ключ-значение. 👉 @sWebDev

Прекрати мечтать и стань мидлом за 50 дней Опытные Frontend-разработчики создали несколько бесплатных каналов, в которых регулярно выходят топовые посты для начинающих. Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д. JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку. JavaScript тесты — канал с тестами и задачами, который прокачает твои навыки во Frontend-разработке. CSS доширак — готовые анимации, hover-эффекты и прелоадеры, которые можно вставить в свой проект и настроить пока заваривается Доширак. Войти в IT — канал с видеуроками и курсами, который научит тебя кодить с нуля за месяц. Развивайся с нами, ведь так проще!

Resolver в Angular: обзор В материале обзор использования Resolver в Angular. Рассмотрим руководство по созданию Resolver'ов и их применению для предварительной загрузки данных перед отображением компонентов. 👉 @sWebDev

Директива Angular для обработки события отправки формы? В Angular есть директива, которая используется для обработки события отправки формы, что это за директива? 👉 @sWebDev

Character Tutorial - Final Анимированная 3D модель, реагирующая на действия пользователя. Выполнено на Three.js. 👉 @sWebDev

Компонент для измерения производительности React компонентов? Компонент, позволяющий измерять производительность компонентов и их потомков. Включает в себя следующие параметры: id, функцию`onRender`, которая принимает три аргумента. Что это за компонент?

Hotkeys.js Библиотека для обработки горячих клавиш в JavaScript. Она позволяет легко определять пользовательские сочетания клавиш и назначать им обработчики событий. Библиотека поддерживает различные комбинации клавиш и позволяет определять последовательности нажатий. 👉 @sWebDev

SPB Frontend и X5 Tech проводят совместный митап! 📆 19 июля 📍 Санкт-Петербург, пер. Пирогова, дом 18, особняк «Пальма» 🌐 ОНЛАЙН В программе митапа - выступление 4 фронтенд-разработчиков, обмен опытом, кофе-брейк и афтепати. ✅ Темы к обсуждению: что происходит в браузере после ввода запроса в поисковую строку; как сократить код и ускорить выполнение запроса; как создать гибридное мобильное приложение с нуля за короткий срок; какие сейчас существует тенденции на IT рынке. Подробности и регистрация Присоединиться к митапу можно онлайн и офлайн. Количество офлайн-билетов ограничено.

Создаем приложение на Svelte с SSR рендерингом при помощи SvelteKit Подробное руководство по созданию приложений на Svelte с использованием SvelteKit и серверного рендеринга. В статье объясняются основные концепции и шаги, необходимые для настройки SvelteKit и создания компонентов. 👉 @sWebDev

Все кто выбрал вариант 1 - молодцы 👍 Остальным рекомендую с этим разобраться в первую очередь! Это простые и очень мощные инструменты для адаптивных макетов Например, чтобы расположить элементы как на картинке достаточно добавить 2 свойства для родительского блока:

flex;
align-items: (один из вариантов)

Но это только верхушка айсберга, чтобы понастоящему разобраться - поиграйтесь с этим тренажером Ребята разложили все по полочкам, а задания можно выполнять прямо в браузере 😼 P.S. выравнивать нужно будет в основном котов erid:Kra23oS9N

Cities Slider (React) Анимированный слайдер из столиц государств, выполненный на React. 👉 @sWebDev