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

Solo: A Star Wars Story Анимированный постер к фильму: "Соло. Звёздные войны: Истории". Выполнено с применением Vue.js. 👉 @sWebDev

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

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

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

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

👉 @sWebDev

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

Какая команда для создания React приложений уже неактуальна? Фреймворки развиваются и часто то, что было хорошей практикой вчера является моветоном сегодня. Недавно мы рассматривали один из устаревших вариантов создания React-приложений. Какой? Вариант 1: npx create-react-app myReactApp Вариант 2: npx create-next-app 👉 @sWebDev

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

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

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

⚠️ Как перейти из ручного тестирования в автоматизацию на JavaScript? 🦾 Конечно прокачивать свои скилы! Пройди хардкорный тест по автотестированию на JS и проверь свой уровень. Ответишь — пройдешь на продвинутый курс «JavaScript QA Engineer» от OTUS по специальной цене + получишь видео-курс по Git в подарок 🔥 ПРОЙТИ ТЕСТ https://otus.pw/XZ8D/ Нативная интеграция. Информация о продукте www.otus.ru

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

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

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

Эй, ты, у меня для тебя подарок Лови слитые курсы, только используй с умом, ладно? Вебинары Skillbox (820 ГБ) Вебинары GeekBrains (560 ГБ) Курсы от Яндекса (400 ГБ) Skillfactory, Нетология, XYZ и другие (3 ТБ) Только забирай быстрее, пока не полетели жалобы

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

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

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

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

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

The frantic run of the valorous rabbit Игра раннер, выполненная на Three.js. 👉 @sWebDev

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

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

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