React Monochromatic Landscape Generator

Генератор ландшафта, выполненный с помощью SCSS, SVG и Babel.js.

👉 @sWebDev

Пишите хорошие тесты без stub/mock и заглушек маршрутизатора

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

👉 @sWebDev

React Spectrum

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

👉 @sWebDev

Alien Abduction

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

👉 @sWebDev

Generative UI - Orb Animation [pixi.js] + Frosty Elements

Анимированный фон, реализованный на Pixi.js.

👉 @sWebDev

Как разделить приложение Angular на приложения с микроинтерфейсом

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

👉 @sWebDev

js2flowchart

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

👉 @sWebDev

Как передавать функции из компонента родителя в React?

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

👉 @sWebDev

Airport Distance Map

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

👉 @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

Onsen UI for Angular

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

👉 @sWebDev

Хорошие способы организации большого проекта Vue.js

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

👉 @sWebDev

Anime.js clock

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

👉 @sWebDev

Используем pre-render в React приложении с react-snap

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

👉 @sWebDev

PrimeNG

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

👉 @sWebDev

Использование React в приложениях Angular

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

👉 @sWebDev

The Movie Database

База данных с кино, реализованная на React.

👉 @sWebDev

Новый функционал React для оптимизации производительности?

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

👉 @sWebDev

Vue-controlled Wall-E

Проект с героем мультфильма WALL-E, следящим за движением курсора. Выполнено на Vue.js.

👉 @sWebDev