#Frontend

Мощь FFmpeg в браузере

FFmpeg.wasm - это порт популярного фреймворка FFmpeg в WebAssembly, который позволяет обрабатывать видео и аудио прямо в браузере. Это решает проблему обработки медиафайлов без необходимости отправки их на сервер.


1⃣Какие задачи решает FFmpeg.wasm?

- Обрезка видео и аудио
- Конвертация форматов
- Изменение размера видео
- Применение фильтров и эффектов
- Извлечение аудиодорожки
- Создание превью и миниатюр


2⃣Какие есть ограничения?

⏺ Размер библиотеки:
- Базовый модуль около 25MB
- Дополнительные кодеки увеличивают размер

⏺ Требования к браузеру:
- Поддержка WebAssembly
- Поддержка SharedArrayBuffer
- Специальные заголовки COOP/COEP

⏺ Ограничения производительности:
- Работа с большими файлами может быть медленной
- Ограничения памяти браузера


3⃣Когда стоит использовать FFmpeg.wasm?

⏺ Подходит для:
- Простой обработки видео
- Приложений с приватностью данных
- Небольших проектов

⏺ Не подходит для:
- Сложной видеообработки
- Работы с большими файлами
- Приложений с высокими требованиями к производительности

Пример реализации приложения для обрезки видео можете посмотреть здесь


🌐 Новости

🖥 Платформа

#Frontend

Эй! Давай создадим свою слот-машину, как в онлайн-казино! Это будет классный проект, где мы сделаем три вертикальных слота с эмодзи фруктов и овощей.

Сначала мы подготовим HTML-страничку с контейнерами для слотов и кнопкой. Потом добавим стиль, чтобы всё выглядело круто. А после этого напишем скрипт, который будет случайным образом менять эмодзи, когда мы будем нажимать на кнопку.

Также можем добавить какие-нибудь улучшения, например, проверку совпадений или звуки, когда слоты крутятся. В общем, будет весело и полезно! Попробуем?


🔗 Статья

🌐 Новости

🖥 Платформа

#Frontend

🎓 Crunchzilla - это образовательная платформа, которая предлагает несколько интерактивных обучающих инструментов для изучения JavaScript.


На сайте представлены следующие программы:

1. Code Monster - интерактивный учебник по JavaScript для детей. Учит базовым концепциям программирования через создание анимации и графики.

2. Code Maven - более продвинутая версия для подростков и взрослых. Покрывает более сложные концепции JavaScript и создание интерактивных визуализаций.

3. Game Maven - учит создавать игры с использованием JavaScript, включая управление физикой, детектирование столкновений и другие игровые механики.

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

Это отличный способ для начинающих узнать основы программирования в интерактивной форме.


🔗 Ссылка

🌐 Новости

🖥 Платформа

#Frontend

🏗️ Шаблоны проектирования

Что такое шаблоны проектирования:
- Руководства по решению конкретных проблем
- Не являются законченными архитектурными решениями
- Описывают подход к решению проблемы, а не её поиск


1️⃣ Порождающие шаблоны

Описывают механизмы создания объектов:

Простая фабрика
- Генерирует экземпляр объекта без предоставления логики экземпляра
- Пример: создание дверей на фабрике

Фабричный метод
- Использует генерирующие методы для создания объектов
- Пример: создание интервьюеров на фабрике

Абстрактная фабрика
- Группирует индивидуальные фабрики без указания конкретных классов
- Пример: создание дверей и специалистов для их установки

Строитель
- Помогает при создании объектов с несколькими свойствами или большим количеством этапов
- Пример: создание бургеров с различными ингредиентами
- Позволяет добавлять новые опции без изменения структуры

Прототип
- Создаёт объекты путём клонирования существующего объекта
- Пример: клонирование объекта «Овца» для создания новых объектов
- Используется, когда создание объекта с нуля дороже клонирования

Одиночка
- Ограничивает создание класса единственным объектом
- Пример: создание единственного экземпляра класса «Президент»
- Антипаттерн, так как вносит глобальное состояние в приложение


2️⃣ Структурные шаблоны

Определяют способ взаимоотношений между сущностями:


Адаптер
- Помещает несовместимый объект в обёртку для совместимости с другим классом
- Пример: адаптер для совместимости дикой собаки с охотником

Мост
- Предпочитает компоновку наследованию
- Пример: реализация тем оформления веб-страниц

Компоновщик
- Позволяет клиентам обрабатывать объекты в едином порядке
- Пример: обработка сотрудников компании как единой группы, с расчетом зарплаты

Декоратор
- Позволяет динамически изменять поведение объекта
- Пример: добавление ингредиентов к кофе (молоко, взбитые сливки, ваниль)

Фасад
- Предоставляет упрощённый интерфейс для сложной подсистемы
- Пример: компьютерный фасад с функциями включения и выключения

Приспособленец
- Минимизирует использование памяти за счёт общего использования объектов
- Пример: кэширование типов чая в чайном магазине

Заместитель
- Представляет функциональность другого класса
- Пример: класс безопасности проверяет пароль и выполняет функции двери


3️⃣ Поведенческие шаблоны

Определяют алгоритмы и способы взаимодействия объектов:

Цепочка ответственности
- Создание цепочек объектов для обработки запросов
- Пример: банковский счёт и цепочка оплаты

Команда
- Инкапсуляция действий в объекты
- Пример: система заказов в ресторане и пульт управления

Итератор
- Доступ к элементам объекта без раскрытия базового представления
- Пример: перебор радиостанций

Посредник
- Добавление стороннего объекта для управления взаимодействием
- Пример: чат-комната как посредник между пользователями

Хранитель
- Фиксирует текущее состояние объекта для лёгкого восстановления
- Пример: сохранение состояния текстового редактора

Наблюдатель
- Определяет зависимость между объектами для уведомления об изменениях
- Пример: уведомления о новых вакансиях для соискателей

Посетитель
- Позволяет добавлять будущие операции без изменения объектов
- Пример: зоопарк с различными видами животных и типами посетителей

Стратегия
- Переключается между алгоритмами в зависимости от ситуации
- Пример: выбор между пузырьковой и быстрой сортировкой

Состояние
- Меняет поведение класса при изменении состояния
- Пример: инструмент «Кисть» в графическом редакторе
- Реализует машину состояний объектно-ориентированным способом
- Каждое состояние представлено производным классом
- Пример: текстовый редактор с различными начертаниями текста

Шаблонный метод
- Определяет каркас выполнения алгоритма
- Реализация этапов делегируется дочерним классам
- Пример: инструмент для сборки и тестирования с реализациями для Android и iOS


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#Frontend

🍪 Работа с куки: эволюция подходов

Работа с куки в JavaScript никогда не была удобной. Метод появился в 1996 году и почти не изменился. Разберем разницу между старым и новым подходом.


1️⃣ Классический способ (document.cookie)

Недостатки:

- Синхронные операции блокируют поток
- Нельзя узнать срок действия или домен куки
- Неудобно работать с несколькими куки
- Нельзя использовать в сервис-воркерах


2️⃣ Современный Cookie Store API

Преимущества:

- Асинхронный API не блокирует поток
- Доступ ко всей информации о куки
- Работает в сервис-воркерах
- Подписка на изменения куки


🔗 Ссылка

🌐 Новости

🖥 База вопросов

#Frontend

🎮 Разработка игр на JavaScript

Это руководство посвящено основам разработки 2D-игр для одного игрока на JavaScript. Материал представлен в практическом формате: каждая глава последовательно раскрывает создание различных игровых элементов. Вместо отдельного раздела по основам JavaScript ключевые аспекты языка объясняются по мере изучения основного материала.


🌐 Новости

🖥 База вопросов

#Frontend

Preact vs React: сравнение производительности

Preact — это легковесная альтернатива React, обладающая всеми его возможностями, но при этом занимающая всего 3 КБ! Для сравнения, React + ReactDOM весят около 41 КБ (gzip).


🔥Преимущества Preact:

🔸Облегченный виртуальный DOM
🔸Оптимизация производительности по умолчанию
🔸Простая интеграция
🔸PWA по умолчанию


📎Сравнение производительности React и Preact

1.Дашборд на React:

🔸Использовала Create React App
🔸Разделила код на уровне маршрутов
🔸Результат в GTMetrix: 80% (оценка B)
🔸LCP (загрузка основного контента): ~1 сек
🔸Время полной загрузки: ~2 сек


2.Дашборд на Preact

🔸Использовала preact-cli
🔸Результат в GTMetrix: 100% (оценка A)
🔸LCP: <500 мс
🔸Полная загрузка: ~1,3 сек
🔸TTFB (время до первого байта): 179 мс


❗️ Ограничения Preact
* Приостановленная (`Suspense`) и отложенная загрузка (`Lazy`) пока экспериментальны
* Некоторые API React могут требовать адаптации (`preact/compat`)

- Размер: React ~41 КБ vs Preact 3 КБ
- LCP: React ~1 сек vs Preact <500 мс
- Время полной загрузки: React ~2 сек vs Preact 1,3 сек
- Оценка GTMetrix: React B (80%) vs Preact A (100%)

- Preact выигрывает по производительности: меньше размер, быстрее загрузка
- Отлично подходит для легковесных и PWA-приложений
- Но есть нюансы с совместимостью React API

📎 Ссылка

🎙 Новости

📝 База вопросов

#Frontend

5 проектов, которые помогут освоить React через практику:


1️⃣Целевая страница (landing page) - отличный способ поработать с интерактивными интерфейсами. Создайте страницу с навигацией, слайдером, разделами и футером. Для вдохновения изучите целевые страницы Netflix, Starbucks или Tesla.

2️⃣Приложение прогноза погоды - простой проект, использующий стороннее API для отображения данных о погоде по дате и местоположению. Сделайте его привлекательным, добавьте функцию поиска места и темный режим.

3️⃣Приложение списка покупок - хороший старт перед разработкой сложных e-commerce сайтов. Пользователи смогут добавлять/удалять товары с автоматическим пересчетом цены. Используйте create-react-app, хуки React, Context API или Redux для управления состоянием.

4️⃣Приложение для просмотра фильмов - создайте каталог фильмов с использованием хуков React, Context API, React Router и MovieDB API. Добавьте страницы отдельных фильмов, поиск, фильтрацию по категориям и темный режим.

5️⃣Блог - можно создать используя только React, но для SEO-оптимизации лучше применить генератор статических сайтов вроде Gatsby или NextJS.


Практика - лучший способ усовершенствовать навыки в любых технологиях. Эти проекты помогут вам лучше понять React и увереннее с ним работать.


📎 Ссылка

🎙 Новости

📝 База вопросов

#Frontend

✏️ TypeScript

Если давно хотели разобраться с TypeScript, но не знали с чего начать — попробуйте курс на Code Basics. Он бесплатный, практикический и подходит даже для тех, кто только начал путь во фронтенде.

Вас ждут:

- упражнения с автопроверкой;
- постепенное введение от базовых типов до продвинутых тем;
- реальные задачи, похожие на то, что делают в продакшене;
- и всё это на русском языке.

Курс отлично дополняет знания по JavaScript и помогает перейти к более стабильной и предсказуемой разработке.

Подходит как новичкам, так и тем, кто уже писал на TS, но хочет систематизировать знания.


📎 Ссылка

🎙 Новости

📝 База вопросов

#Frontend

📝 Условия в CSS: решения для работы прямо сейчас

Ждёте когда в CSS появится полноценная функция if()?
Хорошая новость: она уже в разработке!
Плохая: ждать придётся


Но есть способы реализовать условную логику уже сегодня

Что можно использовать прямо сейчас:
🔸Двоичная линейная интерполяция — идеальна для работы с числовыми значениями
🔸Хаки с переключателями — используют возможности функции var() с запасными значениями
🔸Методы на основе анимации — для работы с ключевыми словами
🔸Измельчение типа — гибкий способ преобразования ключевых слов в числа


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

Полный разбор включает детальные примеры кода, ограничения каждого метода и советы по их комбинированию для создания более сложных решений ⬇️


📎 Ссылка

🎙 Новости

📝 База вопросов

#Frontend

💻 CSS наконец-то становится языком программирования!

В Chrome 137 появилась долгожданная функция if() в CSS — теперь можно писать условную логику прямо в стилях!


Как это работает:

div {
  color: var(--color);
  background-color: if(
    style(--color: white): black;
    else: pink
  );
}

.dark { --color: black; }
.light { --color: white; }

Что это даёт:

• Условные стили без JavaScript
• Адаптивный дизайн на новом уровне
• Динамические темы через CSS-переменные
• Работа с HTML-атрибутами для стилизации

🔖Пример с атрибутами:

.card {
  border-color: if(
    style(--status: error): red;
    style(--status: success): green;
    else: gray
  );
}

<div class="card" style="--status: error">Ошибка</div>
<div class="card" style="--status: success">Успех</div>

💡 Пока что:

- Только Chrome 137+
- Другие браузеры в разработке
- Можно тестировать в Chrome Canary с флагом


📎 Статья

🎙 Новости

📝 База вопросов

#Frontend

🔖Мета-фреймворки JavaScript: что это и зачем нужны

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


▪️Что такое мета-фреймворки

Это "фреймворки поверх фреймворков". Если React/Vue дают кирпичики для UI, то мета-фреймворки строят из них готовый дом со всеми коммуникациями: маршрутизацией, SSR, оптимизацией, API и прочим.


▪️Почему они появились

Раньше фронтенд-разработчики тратили больше времени на настройку инструментов, чем на само приложение. Нужна маршрутизация? Добавляй React Router. SSR? Настраивай отдельно. Состояние? Еще один инструмент.

Мета-фреймворки решили эту "усталость от инструментов", предложив готовые решения с разумными настройками по умолчанию.


▪️Основные игроки

• Next.js - для React, пионер гибридных приложений
• Nuxt.js - аналог для Vue
• Remix - фокус на web-first подходе
• SvelteKit - для любителей компилируемого Svelte
• RedwoodJS - полностековое решение с GraphQL


▪️Главные преимущества

- Быстрый старт проекта за минуты
- Единая структура кода в команде
- Автоматическая оптимизация производительности
- Меньше времени на конфигурацию, больше на разработку


▪️Потенциальные проблемы

- Ограниченная гибкость из-за жестких соглашений
- Сложность обновлений зависимостей
- Может быть избыточно для простых проектов
- Высокий порог входа для новичков

Мета-фреймворки - это эволюция веб-разработки в сторону большей продуктивности и меньшего количества головной боли. Они позволяют сосредоточиться на создании ценности для пользователей, а не на борьбе с инструментами.

🎙 Новости

📝 База вопросов

#Frontend

🔖Pull-to-refresh в Compose Material 3: что изменилось и как использовать

Google кардинально обновил API для реализации pull-to-refresh в Compose Material 3 версии 1.2.0+, и большинство туториалов в интернете теперь устарели.


▪Что такое pull-to-refresh?

Это популярный жест в мобильных приложениях — пользователь тянет экран вниз, чтобы обновить данные. Вы наверняка видели это в Instagram, Twitter или Facebook.


▪Новый подход

Вместо старого PullToRefreshContainer теперь используется PullToRefreshBox — готовый контейнер, который оборачивает ваш прокручиваемый контент (например, LazyColumn).


▪Ключевые параметры:

• isRefreshing — показывает состояние загрузки
• onRefresh — функция, которая вызывается при жесте пользователя
• content — ваш прокручиваемый контент


▪Что нужно сделать в коде:

1. Добавить свойство isRefreshing в состояние экрана
2. Создать функцию обновления данных во ViewModel
3. Обернуть LazyColumn в PullToRefreshBox


▪Дополнительные возможности:

Если нужен больший контроль (например, включение/выключение жеста), можно использовать модификатор .pullToRefresh напрямую. Также можно кастомизировать анимацию индикатора через PullToRefreshState.


❗️Важно

Старые API помечены как deprecated в версии 1.3.0, поэтому обновление критически важно для поддержания актуальности приложения.
Новый API проще в использовании и предоставляет больше возможностей для кастомизации, делая реализацию pull-to-refresh более интуитивной для разработчиков.

🎙 Новости

📝 База вопросов

#Frontend

📎 Как использовать дизайн-токены в React — опыт команды Bit

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

Интеграция в Bit и React
В Bit дизайн-токены структурированы по типам (цвета, состояния и др.) и работают как часть системы компонентов. Они самодокументируются и легко адаптируются под разные платформы, что ускоряет разработку.

Кросс-платформенные преимущества
Токены позволяют создавать универсальные решения для всех платформ. Разработчики быстро вносят изменения, а дизайнеры контролируют их корректное применение.

Управление в Bit
Токены отделены от тем и передаются компонентам через провайдер. Это позволяет глобально обновлять стили, меняя всего одно значение.

Дизайн-токены в Bit — это мощный инструмент для масштабируемых и согласованных дизайн-систем. Больше можно прочитать в статье ⬇️


📎 Статья

🎙 Новости

📝 База вопросов

#Frontend

📎 Забытые возможности HTML и CSS, которые работают прямо сейчас

В погоне за новыми фреймворками разработчики часто забывают о базовых возможностях HTML и CSS. А зря — многие "древние" техники до сих пор актуальны и решают современные задачи без лишних зависимостей.


Что многие пропускают:
- Семантические элементы HTML5 для лучшей доступности
- CSS Grid и Flexbox для сложных layouts
- Встроенная валидация форм без JavaScript
- CSS-переменные для динамического стилизования
- Intersection Observer для lazy loading

Почему это важно?
Нативные возможности браузеров:
- Работают быстрее внешних библиотек
- Не требуют дополнительных зависимостей
- Имеют лучшую поддержку accessibility
- Более стабильны в долгосрочной перспективе

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


📎 Ссылка

🎙 Новости

📝 База вопросов