Frontend meetup

1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO
Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов.

2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал
Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках.

3. Serverless - уже можно? — Андрей Лаврентьев, NDA
Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге.

Модератор Григорий Петров, Devrel, Evrone
Эксперт Глеб Михеев, Руководитель ПК, FrontendConf

➖➖➖

🗓 22 мая, начало в 19:00 мск, Среда

🌐 ОНЛАЙН

✅ Регистрация на мероприятие

Реклама, ООО "Эвроне.ру", ИНН 3663057399

Parallax Depth Cards

Интерактивные карточки на Vue.js.

👉 @sWebDev

Было?

❤️ - Не давите на больное.

🤔 - Я люблю созвоны.

👉 @sWebDev | #юмор

KeyUX

KeyUX — это библиотека JavaScript, разработанная для улучшения пользовательского интерфейса клавиатуры веб-приложений. Она предназначена не только для доступности, но и для создания профессиональных инструментов, где предпочтительнее использование клавиатуры. Особенности KeyUX включают добавление горячих клавиш, отображение активного состояния кнопок при нажатии горячей клавиши, навигацию с помощью клавиш стрелок в списках с role="menu" и другие функции для удобного управления фокусом. Библиотека не имеет зависимостей и занимает 2 КБ после минификации и сжатия Brotli. KeyUX совместима с любым фреймворком, включая React, Vue и Svelte.

👉 @sWebDev

Letterfall

Объёмная анимация дождя из букв на Three.js.

👉 @sWebDev

Как оптимизировать размер Angular Bundle

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

👉 @sWebDev

Blob

Интерактивная анимация формы фигуры на Three.js.

👉 @sWebDev

GSAP bubbly bath

Анимация кошки в ванной на GSAP.

👉 @sWebDev

Инициализация состояния

Что представляет initialState в вызове useActionState?

Забыли? Вернитесь к посту от 29.04.2024, в котором мы разбирали работу этого хука.

👉 @sWebDev

Коллеги, почему слетел доступ?

👉 @sWebDev | #юмор

Управление элементами DOM

@ViewChildren и @ContentChildren - это декораторы Angular, используемые для доступа к дочерним компонентам.

Ключевое отличие:

@ViewChildren предоставляет доступ к дочерним компонентам, которые напрямую определены в шаблоне, и изменения отражаются немедленно.

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

Пример:

@Component({
  selector: 'app-parent',
  template: `<ul *ngFor="let child of children">{{ child.name }}</ul>`
})
export class ParentComponent {
  @ViewChildren('viewChildren') children: QueryList<ChildComponent>;
}

@Component({
  selector: 'child-component',
  template: `<p>{{ name }}</p>`
})
export class ChildComponent {
  name = 'Child';
}

👉 @sWebDev

2048

Игра "2048" на GSAP.

👉 @sWebDev

Получали такое?

👍 - Да.

🤔 - Всегда нормальное ТЗ.

👉 @sWebDev | #юмор

Chance

Chance — это легковесная JavaScript-библиотека для генерации случайных данных, которая полезна для тестирования и разработки. Она предоставляет множество методов для создания случайных чисел, строк, адресов, имен, дат и многого другого .

👉 @sWebDev

3D Custom Personalized QR Codes

Интерактивная 3D анимация QR кода на React и GSAP.

👉 @sWebDev

Авторизация в React - базовые сведения

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

👉 @sWebDev

Геометрический фон

Анимированный геометрический фон на Three.js.

👉 @sWebDev

ScarletsFrame

ScarletsFrame — это библиотека JavaScript, предназначенная для упрощения разработки сложных веб-приложений. Она предоставляет инструменты для работы с аудио и видео потоками, позволяя создавать интерактивные мультимедийные приложения.

👉 @sWebDev

Управление ошибками в React

Какой хук в React применяется в компонентах-границах ошибок для локальной реакции?

Забыли? Вернитесь к посту от 06.05.2024.

👉 @sWebDev