Frontender's notes

🧭 «Маленькая зависимость» всегда вырастает Подключить библиотеку ради пары функций кажется быстрым решением. Но со временем она тянет обновления, баги и конфликты. 👉 Совет: прежде чем ставить зависимость, спроси себя: могу ли я решить задачу в 10 строк кода сам? Иногда проще написать, чем тащить чужой багаж.

👩‍💻 5 способов создания DOM-элементов из HTML-строк методами JavaScript Рассказываем о пяти методах, которые помогут вам гибко и безопасно добавлять динамический контент на страницы, используя ванильный JavaScript. Читать...

🖥 Самые интересные публикации за последние дни: • Динамический рендеринг Angular-компонентов • Использование isolatedModules в Angular 18.2 • Лучшая система шаблонов в Go • Просто выберите Postgres • Как Google обрабатывает JavaScript в процессе индексации веб-страниц

👩‍💻 Find the missing term in an Arithmetic Progression Вам предоставляются последовательные элементы арифметической прогрессии. Однако есть одна загвоздка: в наборе чисел, которые были даны вам, отсутствует ровно одно слагаемое из оригинальной серии. Найдите недостающее число. Вы должны написать функцию, которая получает список, размер списка всегда будет составлять не менее 3 чисел. Пропущенное число никогда не будет первым или последним. Пример кода

    
        findMissing([1, 3, 5, 9, 11]) == 7{}
    

Решение задачи🔽

function findMissing(arr) { // Вычисляем разности между последовательными элементами const diffs = []; for (let i = 1; i < arr.length; i++) { diffs.push(arr[i] - arr[i - 1]); } // Определяем правильную разность, которая встречается чаще всего const correctDiff = diffs.sort((a, b) => diffs.filter(v => v === a).length - diffs.filter(v => v === b).length ).pop(); // Ищем место, где разность отличается от правильной for (let i = 1; i < arr.length; i++) { if (arr[i] - arr[i - 1] !== correctDiff) { return arr[i - 1] + correctDiff; } } return null; // Если все в порядке, возвращаем null (хотя это не должно случиться) } // Примеры использования: console.log(findMissing([1, 3, 5, 9, 11])); // Вывод: 7 console.log(findMissing([2, 4, 6, 10])); // Вывод: 8 console.log(findMissing([10, 20, 30, 50])); // Вывод: 40

👀 Шпаргалки для быстрого кода Фронтенд без подсказок — как проект без сборщика: вроде можно, но слишком долго. Собрали для вас подборку, которая спасает, когда надо быстро освежить в памяти синтаксис или найти нужный пример. Внутри — 5 полезных шпаргалок: • JavaScript — базовые конструкции и работа с объектами • PHP — чтобы ничего не застало врасплох • AngularJS — основы директив и сервисов • React.js — хуки, стейт и всё, что обычно забывается • Vue.js — компоненты и реактивность в одном листе Эти материалы экономят время и держат под рукой самое важное. 🚪 Frontender's notes

↔️ Мини-трюк с JavaScript — переключение состояния одной строкой Иногда нужно быстро переключать состояние «вкл/выкл» без длинных if/else. Этот приём помогает делать toggle максимально коротко и понятно.

    
        let isActive = false;

// переключение состояния
isActive = !isActive; // false → true, true → false{}
    

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

• Переменная isActive хранит булево значение: true или false • Оператор ! инвертирует текущее значение (!true → false, !false → true) • Присваивание возвращает результат обратно в переменную: isActive = !isActive • Каждый вызов переключает состояние на противоположное — готовый toggle без if

Маленький приём, который экономит строки и делает код чище. 🚪 Frontender's notes

👩‍🎨 Webpack, Vite или Rspack — что выбрать для сборки фронтенда? Привет! Занимаясь микрофронтендами в монорепозитории (Vue3 + Module Federation + Nx), задумался о том, что мы много внимания уделяем архитектуре и бизнес-логике, но часто забываем о «условиях труда» — процессе сборки приложения. Поэтому хочу поделиться своим опытом выбора и тестирования сборщиков.

• Webpack — проверенный временем монстр: медленный старт и прожорливость, но стабильность и огромная экосистема. Отлично тянет легаси и микрофронтенды, но морально устаёшь ждать пересборки. • Vite — быстрый и удобный: мгновенный запуск dev-сервера, простая конфигурация, идеален для Vue. Но с module federation пока сыровато, а экосистема плагинов не такая большая, как у Webpack. • Rspack — «новичок» на Rust: обещает в 5–10 раз быстрее, почти полная совместимость с Webpack-конфигами и поддержка federation. Но молодость и риск нестабильности заставляют думать дважды.

Для больших и критичных проектов оставляем Webpack ради стабильности, для новых — пробуем Vite. А на Rspack смотрим с интересом, но пока с осторожностью. А вы чем собираете свои приложения? 🚪 Frontender's notes

📝 Мини-трюк с CSS — эффект печатной машинки без JavaScript Хочешь анимацию «печатающегося» текста без лишнего кода? Это можно реализовать чисто на CSS.

    
        .type {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid;
  animation: typing 3s steps(15), blink .6s step-end infinite;
}

@keyframes typing {
  to { width: 15ch; }
}

@keyframes blink {
  50% { border-color: transparent; }
}{}
    

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

• width: 0 + overflow: hidden скрывают весь текст, пока идёт анимация • steps(15) имитирует набор по символам (число зависит от длины строки) • border-right и @keyframes blink создают мигающий курсор • По завершении текста создаётся эффект «напечатанного» заголовка

Такой приём отлично подходит для лендингов, заголовков и приветственных экранов. 🚪 Frontender's notes

Дарим подписку на Яндекс Музыку Яндекс Плюс для вас и 3-х ваших близких 30 дней бесплатно. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Узнать больше #реклама 18+ music.yandex.ru О рекламодателе

📣 FFmate — веб-надстройка над FFmpeg для работы с медиа Если приходилось возиться с FFmpeg через терминал, то вы знаете, какой это мощный, но местами неудобный инструмент. FFmate делает работу проще: предоставляет REST API и удобный веб-интерфейс, превращая FFmpeg в полноценный движок для кастомных медиа-конвейеров. Крутые фишки:

• REST API — управление задачами FFmpeg программно • Веб-интерфейс — мониторинг и контроль без терминала • Watchfolders — автоматическая обработка файлов в папках • Предустановки транскодинга — готовые настройки для популярных сценариев • WebHooks — уведомления о статусе задач в реальном времени • Скриптовые хуки — запуск кастомных скриптов до/после задачи • Гибкое управление задачами — приоритеты и параллельность

Этот репозиторий пригодится тем, кто хочет встроить обработку медиа в свои проекты, автоматизировать транскодинг или построить собственный пайплайн поверх FFmpeg. 📱 Изучаем тут 🚪 Frontender's notes