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

Использование React в приложениях Angular Рассмотрим интеграцию React в приложение Angular. Такой подход может быть полезным, например, при разработке сложных компонентов или при работе с приложением, которое уже использует React. 👉 @sWebDev

PrimeNG Angular библиотека, которая предоставляет более 100 готовых компонентов для создания веб-приложений: таблицы, формы, кнопки, графики. У PrimeNG хорошая документация, наглядные примеры и развитое сообщество. Библиотека является кроссбраузерной и адаптивной. 👉 @sWebDev

27–28 мая Яндекс проводит Weekend Offer Frontend За два дня вы сможете пройти все технические собеседования, выбрать команду по душе и получить офер. Ищем фронтендеров на JavaScript и TypeScript с опытом работы от 4 лет. Предлагаем работу в офисах России и Беларуси. Некоторые команды приглашают разработчиков в международные хабы в Армении, Казахстане и Сербии. Подробнее здесь

Используем pre-render в React приложении с react-snap Практическое руководство по использованию инструмента React Snap для предварительной отрисовки (pre-rendering) приложения на React. Автор описывает, как использовать React Snap для создания статических HTML-файлов, которые можно использовать для улучшения производительности и оптимизации поисковой оптимизации (SEO) приложения. 👉 @sWebDev

Anime.js clock Часы, выполненные с использованием библиотеки Anime.js. 👉 @sWebDev

🟡Тест по React JS от OTUS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Если вы планируете пополнить свой стек самым популярным JS-фреймворком — React, приходите на открытый урок “TDD + React”. Урок пройдет 27 апреля в 20:00 в рамках онлайн-курса “React.js Developer” https://otus.pw/shHO/ Нативная интеграция. Информация о продукте www.otus.ru

Хорошие способы организации большого проекта Vue.js Рассмотрим руководство по организации крупных проектов на Vue.js. В статье несколько методов для организации проекта, включая использование архитектурных шаблонов, настройку сборки и общие советы по организации файлов и структуре проекта. 👉 @sWebDev

Onsen UI for Angular Библиотека пользовательского интерфейса (UI), которая предоставляет набор готовых компонентов для создания мобильных приложений. Она включает в себя такие элементы, как кнопки, формы, навигационные панели, модальные окна, списки и другие. Библиотека является кроссбраузерной, адаптивной и простой в использовании. 👉 @sWebDev

Получаем доступ к реактивным данным и активным событиям Vue.js В хуке created можно получить доступ к реактивным данным и активным событиям. Шаблоны и виртуальный DOM ещё не встроены (mounted) и не отрисованы. Например:

        ExampleComponent.vue
        <script>
        export default {
        data() {
            return {
            property: 'Blank'
            }
        },

        computed: {
            propertyComputed() {
            console.log('I change when this.property changes.')
            return this.property
            }
        },

        created() {
            this.property = 'Example property update.'
            console.log('propertyComputed will update, as this.property is now reactive.')
        }
        }
        </script>

👉 @sWebDev

Airport Distance Map Веб-приложение, показывающее расстояние от одного аэропорта до другого. Выполнено на GSAP.js. 👉 @sWebDev

Как передавать функции из компонента родителя в React? В React есть хук, который позволяет передавать определенные функции из компонента родителя и дает возможность родительскому компоненту вызывать методы дочернего компонента. Что это за хук? 👉 @sWebDev

js2flowchart Библиотека визуализации для преобразования JavaScript кода в наглядную SVG-схему. Изучайте чужой код, делайте рефакторинг, не путаясь в функциональности. 👉 @sWebDev

Как разделить приложение Angular на приложения с микроинтерфейсом В материале рассматривается, как разбить Angular-приложение на микро-фронтенды. Автор объясняет, что такое микро-фронтенды и почему они могут быть полезны в разработке больших приложений. Автор предлагает примеры кода для демонстрации микро-фронтендов в Angular. 👉 @sWebDev

Generative UI - Orb Animation [pixi.js] + Frosty Elements Анимированный фон, реализованный на Pixi.js. 👉 @sWebDev

Совет фронтендерам: уважайте свое время Первый шаг — не изобретать велосипед. В Html Gram собраны готовые codepen решения на каждый день. От эффектов при наведении до 3D анимации. Быстрее пишешь код — больше отдыхаешь. Подписывайся: @HtmlGram

Alien Abduction Анимированная сцена, выполненная с использованием библиотеки GSAP.js. 👉 @sWebDev

React Spectrum Компонентная библиотека от Adobe, созданная для создания современных пользовательских интерфейсов веб-приложений. Библиотека предлагает набор готовых компонентов тем и API, которые могут быть использованы в любом React-проекте. React Spectrum используют в Adobe Creative Cloud и других продуктах Adobe. 👉 @sWebDev

Пишите хорошие тесты без stub/mock и заглушек маршрутизатора В статье описаны методы тестирования Angular компонентов без использования стаб(stub), мок(mock) и заглушек для маршрутизатора. Авторы предлагают использовать реальный маршрутизатор и специальный класс, который позволяет создавать тестовые модули с минимальной конфигурацией. Это позволяет существенно упростить процесс написания тестов и повысить их точность. 👉 @sWebDev

React Monochromatic Landscape Generator Генератор ландшафта, выполненный с помощью SCSS, SVG и Babel.js. 👉 @sWebDev