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

Frontend meetup (Online) 1. Построение микрофронтендной архитектуры. Первый взгляд, боли и решения —Никита Морозов, АО "МТТ" В докладе будет представлен путь построения микрофронтендной архитектуры на примере проекта МТС «Exolve», а также поэтапный рассказ об эволюции проекта от webpack до vite, от SingleSPA до собственного решения 2. Бьем монолит. Основные практики — Гузенко Александр IT ONE Рассмотрим основные подходы к разбиению монолитных фронтедов. 3. Безопасный TypeScript. Защищаемся от any в кодовой базе —Максим Земсков, Яндекс Как получить максимум безопастности при использования TypeScript. Какие настройки стоит использовать и как улучшить типизацию стандартных функций. 4. Beyond Frontend — Алексей Тюльдюков, VK Как T-shape подход может помочь фронтенд разработчику стать техническим менеджером 🗓 12 июля, начало в 19:00 мск, Среда 🚀 Телеграмм канал с анонсами митапов ✅ Регистрация на мероприятие

Директива для двусторонней привязки данных Angular [ngModel] в Angular - директива для двусторонней привязки данных. Пример: <input [(ngModel)]="name">. Синхронизирует значение элемента формы с свойством компонента. Также позволяет добавлять дополнительные функциональности, такие как валидацию данных или управление состоянием элемента формы. Однако, чтобы использовать [ngModel], необходимо импортировать модуль FormsModule из @angular/forms и добавить его в список импортов модуля вашего приложения.

    import { FormsModule } from '@angular/forms';

    @NgModule({
      imports: [FormsModule],
      // ...
    })
    export class AppModule { }

👉 @sWebDev

Tron Parallax Параллакс эффект с персонажем фильма "Трон: Наследие". Выполнено на GSAP.js. 👉 @sWebDev

Какой хук выполняется перед уничтожением экземпляра Vue.js? Какой хук Vue.js будет выполнен перед уничтожением экземпляра? 👉 @sWebDev

Exploding Low Poly Heart Анимированная сцена, выполненная с применением библиотеки GSAP.js. 👉 @sWebDev

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

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

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

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

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

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

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