Toilet Paper Toggle

Забавный переключатель для сайта, выполненный с использованием библиотеки Gsap.js.

👉 @sWebDev

Часто используемые шаблоны проектирования в Angular

Обзор нескольких распространенных паттернов проектирования в Angular, таких как Singleton, Facade, Observer и других. Материал описывает, как использовать каждый паттерн и какие преимущества он может принести в разработке приложений.

👉 @sWebDev

Как отложить загрузку компонента React?

Каким инструментом React воспользоваться для того, чтобы отложить загрузку компонента до момента, когда он будет необходим для отображения?

👉 @sWebDev

Li´l Vikings

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

👉 @sWebDev

Возврат отложенной версии переданного значения React

Рассмотрим грядущее изменение, которое появится в React 18. Хук useDeferredValue вернет отложенную версию переданного значения, которая будет “отставать” от исходной на время, равное таймауту:

     import { useDeferredValue } from "react";

    // ...

    const [text, setText] = useState("text");
    const deferredText = useDeferredValue(text, { timeoutMs: 2000 });

👉 @sWebDev

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