On / Off Switch

Анимированный тоггл, выполненный на GSAP.

👉 @sWebDev

Vivus.js

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

👉 @sWebDev

Три способа раскрыть API внутренних компонентов Vue

Рассматриваем три способа раскрытия API компонентов Vue. Автор подробно объясняет использование "renderless components" (компонентов без отображения), прокси-компонентов и функциональных компонентов для предоставления гибкого и управляемого доступа к их функциональности.

👉 @sWebDev

3D Space Mouse Move and Device Motion

Анимация, доступная в двух цветах. Выполнено с применением Three.js.

👉 @sWebDev

Tagify

Библиотека, которая облегчает работу с тегами в веб-приложениях. Она предоставляет удобные и гибкие инструменты для создания интерактивных полей ввода с возможностью добавления и удаления тегов. Библиотека Tagify обеспечивает автодополнение, кастомизацию внешнего вида, а также поддерживает различные события и методы для манипуляции с тегами.

👉 @sWebDev

10 лучших (бесплатных) ресурсов Angular

В материале представлен список из бесплатных ресурсов по Angular. Учебники, блоги, видеоуроки и готовые проекты, которые помогут разработчикам изучить и улучшить свои навыки. Подборка будет особенно актуальна, если вы только начинаете свое знакомство с фреймворком.

👉 @sWebDev

Как реализовать условное отображение элементов в Angular?

В вашем приложении есть элемент, который вы хотите отображать по определенному условию. Какой директивой воспользоваться, чтобы реализовать данный функционал в Angular?

👉 @sWebDev

The frantic run of the valorous rabbit

Игра раннер, выполненная на Three.js.

👉 @sWebDev

Динамическое отображение содержимого шаблона в текущем месте использования Angular

Директива ngTemplateOutlet в Angular используется для динамического отображения содержимого шаблона в текущем месте использования. Она позволяет вставлять содержимое одного шаблона внутрь другого.

Пример использования ngTemplateOutlet:

    <!-- Определение основного шаблона -->
    <ng-template #mainTemplate>
      <h2>Главный шаблон</h2>
      <p>Содержимое главного шаблона</p>
    </ng-template>

    <!-- Использование ngTemplateOutlet для отображения содержимого главного шаблона -->
    <div *ngTemplateOutlet="mainTemplate"></div>

У нас есть основной шаблон с идентификатором #mainTemplate, содержащий заголовок и абзац текста. Затем мы используем ngTemplateOutlet для отображения содержимого этого шаблона внутри элемента <div>. Теперь содержимое главного шаблона будет отображаться внутри этого <div>.

👉 @sWebDev

Как сделать Vue.js быстрее в 3000 раз

Каждый хороший разработчик стремится к оптимизации своего приложения, в статье мы рассмотрим не просто улучшение производительности, а её 3000-кратное увеличение.

👉 @sWebDev

Zdog

Zdog – это библиотека для создания трехмерных графических объектов на веб-страницах. Она предоставляет простой и интуитивно понятный API для создания векторных моделей с использованием простых форм, таких как сферы, прямоугольники и пирамиды. Библиотека использует технику рендеринга "изометрического проектирования", что позволяет создавать графические объекты с плоскими и упрощенными формами, идеально подходящими для создания стилизованных и визуально привлекательных иллюстраций.

👉 @sWebDev

React Circular Slider

Слайдер с карточками участников, выполненный на React.

👉 @sWebDev

Овладейте всем потенциалом анимирования с Vue

Vue позволяет разработчикам писать более гибкий и переиспользуемый код за счёт наличия дополнительных возможностей для организации компонентов. И одной из областей применения этих возможностей являются анимации. В текущей статье мы разберём использование Composition API для создания анимаций в Vue с помощью CSS и JS библиотеки GSAP (GreenSock Animation Platform).

👉 @sWebDev

Tingle.js

Tingle.js – легковесная и красивая библиотека модальных окон, которая обеспечивает простой и гибкий способ создания модальных окон на веб-страницах. Она имеет минимальный размер, но при этом предоставляет функциональность для настройки заголовков, содержимого и поведения модальных окон.

👉 @sWebDev

Vue Weather Notifier

Необычный виджет погоды, выполненный на Vue.js.

👉 @sWebDev

Angular — шаблон адаптера: упрощение интеграции данных

Рассмотрим применение паттерна адаптера в Angular для упрощения интеграции данных в Kanban-доске. Автор описывает, как использовать адаптеры для связи различных источников данных с компонентами Kanban-доски, обеспечивая единообразный интерфейс доступа к данным. Материал предлагает примеры кода и демонстрирует, как адаптеры позволяют абстрагироваться от конкретных источников данных, упрощая интеграцию и обеспечивая гибкость в разработке.

👉 @sWebDev

Какая команда для создания React приложений уже неактуальна?

Фреймворки развиваются и часто то, что было хорошей практикой вчера является моветоном сегодня. Недавно мы рассматривали один из устаревших вариантов создания React-приложений. Какой?

Вариант 1:
npx create-react-app myReactApp

Вариант 2:
npx create-next-app

👉 @sWebDev

We Can Be Heroes

Необычная анимированная сцена с рок-музыкантом Дэвидом Боуи, выполненная на Vue.js.

👉 @sWebDev

Обрабатываем событие отправки формы Angular

ngSubmit в Angular используется для обработки события отправки формы. Пример использования:

   <form (ngSubmit)="onSubmit()">
     <!-- Поля ввода и другие элементы формы -->
     <button type="submit">Submit</button>
   </form>

В примере функция onSubmit() будет вызвана при отправке формы. В компоненте Angular необходимо определить эту функцию для выполнения необходимых действий, например, проверки данных формы или отправки запроса на сервер.

   export class MyComponent {
     onSubmit() {
       // Действия при отправке формы
     }
   }

👉 @sWebDev