Rematch

Rematch — это интуитивный и легковесный фреймворк для управления состоянием вашего веб-приложения на основе Redux. Он предлагает простой и эффективный подход к организации и управлению Redux-хранилищем, сокращая количество лишнего кода и упрощая разработку.

👉 @sWebDev

​Frontend online meetup - 11/10

✔️ CSS in JS или самая противоречивая техника стилизации веба — Ильдар Муллахметов, Авито Тех

В своем докладе я расскажу почему CSS in JS библиотеки вызывают так много противоречий среди frontend разработчиков. хочу рассмотреть влияние на производительность, поддерживаемость кода, девелопер экспириенс. Рассмотрю более подробно styled-components и сравню блоки кода со стилями между styled, tailwind, module. Рассмотрю как браузер обрабатывает styled. Продемонстрирую как влияет на семантику, работает с props и theme. Добавлю к сравнению Linaria и Astroturf, как самые быстрорастущие CSS in JS библиотеки.

✔️ Что такое Sentry и почему без него тяжело — Кирилл Логачев, Level.Travel

Доклад нацелен на раскрытие такого полезного инструмента, как Sentry. Из данного доклада слушатель узнает, как правильно настраивать, использовать и мониторить Sentry, что поможет уменьшить количество ошибок в продакшене, также данный сервис поможет определять и быстро устранять просочившиеся с релизом ошибки.

✔️ По ту сторону WebView — Максим Лавренюк, UZUM TECHNOLOGIES

Я бы хотел поделится некоторыми подходами и проблемами на примере встраивания сервиса доставки еды Uzum Tezkor в супер приложение Uzum Market. Я расскажу про то, что следует сделать в первую очередь при старте интеграции, как подружить нативные компоненты с вебом, как спрятать бесшовную авторизацию, а так же о чем попросить мобильных разработчиков, чтобы облегчить себе жизнь.

✔️ Web3 для фронтенд-разработчика — Назим Гафаров, Based.link

Доклады вокруг web3 обычно концентрируются вокруг рассказа об языках программирования для смарт-контрактов, которые больше интересны бэкенд-разработчикам. В своем докладе я расскажу о том, какие возможности предоставляет web3 именно для фронтенд-разработчика.

➖➖➖

🗓 11 октября в 19:00

✅ Регистрация - участие бесплатно!

🌐 Наш телеграам канал с анонсами митапов!

Letter Hop

Анимация букв, выполненная на Gsap.js.

👉 @sWebDev

Чистая архитектура макета для приложений Vue

Рассмотрим чистую архитектуру макета для приложений, разработанных на Vue.js. Автор предлагает практические советы для организации структуры кода и улучшения поддерживаемости проекта.

👉 @sWebDev

ngx-ui-tour

Библиотека для Angular, предоставляющая интуитивно понятные и интерактивные туры по веб-приложениям. Благодаря этой библиотеке вы сможете легко создавать гайды для пользователей своих веб-приложений.

👉 @sWebDev

Инкрементная статическая регенерация для Angular

Введение в концепцию инкрементной статической регенерации (ISR) в Angular. Статья исследует, как использовать ISR для улучшения производительности и скорости загрузки в Angular-приложениях.

👉 @sWebDev

Функционал декоратора Attribute в Angular?

Какой функционал заложен в декоратор Attribute в Angular?

👉 @sWebDev

Flatpickr events calendar

Календарь, выполненный с использованием библиотеки Flatpickr.

👉 @sWebDev

Полезные практики React в 2023 году. Часть 3

1. Старайтесь передавать объекты.
Часто разработчики передают набор значений, но для уменьшения количества передаваемых свойств лучше всего передавать объект. Например, вместо того чтобы передавать каждое свойство отдельно, вы можете объединить данные в один объект.

   //Не рекомендуется:
   <EmployeeAccount
    name={user.name}
    email={user.email}
    id={user.id}
    />

2. Практики условного рендеринга
React позволяет создавать отдельные компоненты, которые инкапсулируют необходимое поведение. Затем, в зависимости от состояния вашего приложения React, вы можете рендерить некоторые из этих компонентов. Это называется условным рендерингом.
Рассмотрим способ рендеринга "короткое замыкание":

   // Оператор короткого замыкания

   const Total= ({total}) => {
   return <div>
   {total && <h1>Итого: {total}</h1>}

    </div>
    }

👉 @sWebDev

Hover Responsive Parallax Cards Made w/ Vue

Анимированные карточки с эффектом при наведении, выполненные на Vue.js.

👉 @sWebDev

Освоение обработки подписок в Angular

Обзор методов по работе с подписками. Рассмотрим концепции: создание, управление, очистка подписок. Автор делится практиками, которые помогут сделать код чище и обеспечить надежную работу Angular приложению.

👉 @sWebDev

Vue.js - Calculator

Калькулятор, выполненный на Vue.js.

👉 @sWebDev

Освоение средства доступа к управляющему значению Angular: руководство для разработчика Angular

Рассмотрим использование Control Value Accessor для создания пользовательских формовых элементов и управления данными в приложениях Angular. Материал описывает ключевые концепции и шаги, необходимые для создания собственных компонентов форм с двунаправленной привязкой данных.

👉 @sWebDev

Vue Meta

Библиотека позволяет управлять метаданными вашего vue-приложения, такими как заголовки, описания и другие SEO-релевантные данные, динамически в зависимости от состояния вашего приложения.

👉 @sWebDev

Создание внутреннего пакета компонентов React — проще, чем кажется

В разработке современных React-приложений часто возникает потребность в повторном использовании компонентов. Есть разные способы решения такой задачи, и одним из них является создание внутреннего пакета компонентов. Грамотная сборка и поддержка такого пакета позволяют повысить эффективность и производительность разработки, а команда получает возможность использовать готовые компоненты в различных проектах без особых усилий.

👉 @sWebDev

Цель группировки файлов по типу React

Мы уже рассматривали, что в React возможна группировка файлов по типу:

   APIs
   |
   --LoginAPI
   --ProfileAPI
   --UserAPI
   Components
   |
   --Login.jsx
   --Login.test.js
   --Profile.jsx
   --Profile.test.js
   --User.jsx

Но какую цель преследует данный подход?

👉 @sWebDev

Simple Vue Photo Gallery

Анимированная галерея изображений, выполненная на Vue.js.

👉 @sWebDev

Лучшие практики в использовании Angular CLI. Часть 1.

1. Начните с основ.
При создании нового проекта на Angular с помощью команды ng new вы можете использовать флаг --minimal, чтобы создать минимальный проект. Это полезно, если вы хотите начать с чистого листа.
Для использования выполните команду ng new my-project --minimal, где my-project - это имя вашего нового проекта.

2. Чистый и последовательный код.
Команда ng lint проверяет ваш код на наличие ошибок и стилевых проблем в соответствии с правилами, указанными в файле tslint.json.

Например, у вас есть файл с именем app.component.ts с кодом:

   import { Component } from '@angular/core';

   @Component({
     selector: 'app-root',
     template: `<h1>Hello {{name}}</h1>`
   })
   export class AppComponent {
     name = 'Angular';
   }

При выполнении ng lint мы получим вывод ошибок. Для автоматического исправления некоторых ошибок можно использовать: ng lint --fix.

👉 @sWebDev