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

Solo: A Star Wars Story

Анимированный постер к фильму: "Соло. Звёздные войны: Истории". Выполнено с применением Vue.js.

👉 @sWebDev

Работа с формами в Angular — модуль работы с формами и обертки полей

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

👉 @sWebDev

Pizzicato.js

Малоизвестный, но мощный инструмент для создания звуковых эффектов в веб-приложениях. Библиотека обладает простым API и поддерживает различные звуковые операции, такие как воспроизведение, пауза, регулировка громкости и наложение эффектов, таких как реверберация и эхо.

👉 @sWebDev

Minimalist Thermostat

Регулятор температуры, выполненный на CSS, SVG и GSAP.js.

👉 @sWebDev

Основы Angular: встроенные Pipes с примерами каждого

В материале основы работы со встроенными пайпами в Angular и примеры их использования. Автор подробно объясняет, как пайпы помогают преобразовывать данные в шаблонах Angular, включая такие пайпы, как UpperCasePipe, LowerCasePipe, CurrencyPipe и другие.

👉 @sWebDev

D3-Gauge

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

👉 @sWebDev

Exploding Low Poly Heart

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

👉 @sWebDev