🚀 День 12 как работаю над нашим конструктором форм!
- Сделал получше интерфейс для компонентов
Прорабатываю компоненты под разные страны, хочу сделать локализацию под страны которые занимают наибольшую долю в интернете:
Английский - 49.2%
Испанский - 6.0%
Немецкий - 5.8%
Японский - 5.1%
Французский - 4.4%
Португальский - 4.0%
Русский - 3.8%
Итальянский - 2.8%
Приглашаем на новый бесплатный вебинар «Как не развалить Angular-проект: архитектура, которая работает».
Разберёмся, где заканчивается компонент и начинается сервис, как уменьшить связанность и повысить читаемость. Завершим практикой: проведем пошаговый рефакторинг на реальном примере.
📅 Дата: 11.07.2025
⏰ Время: 17:00-18:30 (Мск)
На вебинаре:
✔️ Разделение ответственности между компонентами и сервисами
✔️ Уменьшение связанности и повышение читаемости
✔️ Паттерны и антипаттерны в архитектуре Angular
✔️ Практический рефакторинг на примере «грязного» компонент
👨🎓 Спикер: Погорелов Павел — эксперт в области фронтенд-разработки.
Узнайте, как выстроить архитектуру Angular-приложения, которая выдержит рост команды и кода!
Сила RxJS. scan + mergeScan = 'Загрузить еще'
Кнопка 'Загрузить еще' (либо автоматическая подгрузка данных при скролле) довольно часто встречается в проектах и обычно решение связано с большим количеством подписок и переменных.
Как всегда, для оптимизации чего либо нам на помощь приходит великий и могучий RxJS, а в данной ситуации конкретно операторы scan & mergeScan.
Код:
readonly loadTrigger$ = new Subject<void>();
private readonly batchSize = 5;
private readonly posts$ = this.loadTrigger$.pipe(
startWith(void 0),
scan((offset) => offset + this.batchSize, -this.batchSize),
mergeScan(
(accPosts: Post[], offset: number) =>
getPosts(offset, this.batchSize).pipe(
map((newPosts) => [...accPosts, ...newPosts]),
),
[] as Post[],
),
);
scan – калькулятор + хранитель состояния для offset:
Управляет состоянием загрузки (текущее смещение)
Начинается с -batchSize, чтобы первая загрузка была с 0
Увеличивает смещение на batchSize при каждом срабатывании
mergeScan – волшебный оператор для инкрементальной загрузки:
Сохраняет массив накопленных постов
Объединяет новые данные с существующими
Корректно обрабатывает параллельные запросы (в отличие от обычного scan)
Где полезен этот паттерн?
Постраничные API (пагинация)
Бесконечная прокрутка
Порционная загрузка данных
Любые сценарии накопления асинхронных данных
scan - https://rxjs.dev/api/operators/scan
mergeScan - https://rxjs.dev/api/operators/mergeScan
Больше об Angular - https://t.me/grandgular
💫 Получите развернутый анализ GitHub репозитория через ChatGPT Deep Research
Не все про это знают, но с помощью ChatGPT Deep Research можно изучить любой GitHub проект
В режиме Deep Research через селектор выберите желаемый репозиторий, а через 5 минут получите детальный анализ по вашему запросу
Иногда пользуюсь этой функцией, чтобы разобрать архитектуру проекта, объяснить логику кода или найти потенциальные проблемы и улучшения. Сам я не кодер, поэтому мне это очень сильно помогает
Особенно полезно при изучении чужих проектов, когда надо быстро вкатиться
Вот тут можете посмотреть, как ChatGPT сделал разбор моего тестового репозитория, опираясь на мой неполноценный промпт
Представлен сайт, где можно летать по миру на самолётике — благодаря Google Картам. Города полностью трёхмерные — для полётов доступны Париж, Токио, Рио, Брюссель и другие города.
🔺Пример MCP для Gemini CLI
Ковыряюсь с Gemini CLI, консольным кодовым агентом, который на днях вышел. Накидал пример, как расширить его функционал при помощи MCP сервера.
my_mcp.py
from openai import OpenAI
from mcp.server.fastmcp import FastMCP
import base64
import os
client = OpenAI(api_key=os.environ["OPENAI_API_KEY"])
mcp = FastMCP("openai-image-generator")
@mcp.tool(description="Generate an image with OpenAI Images API")
def generate_image(
prompt: str,
size: str = "1024x1024", # "1024x1536", "1536x1024", "1024x1024"
quality: str = "high", # 'low', 'medium', 'high'
background: str = "transparent"
) -> str:
"""Return a file path to the generated image."""
response = client.images.generate(
model="gpt-image-1",
prompt=prompt,
size=size,
quality=quality,
output_format="png",
user="test_user",
moderation="low",
background=background,
n=1)
image_base64 = response.data[0].b64_json
image_bytes = base64.b64decode(image_base64)
file_name = f"gen_image.png"
file_path = os.path.join(os.getcwd(), file_name)
with open(file_path, "wb") as f:
f.write(image_bytes)
return file_path
if __name__ == "__main__":
mcp.run()Тут вызывается API для генерации изображения, ключ берется из переменных окружения, картинка сохраняется на диск. И прописываем путь до файлика в settings.json Gemini:
{
"mcpServers": {
"openai-image-generator": {
"command": "python",
"args": [
"/path/to/my_mcp.py"
],
"env":
"OPENAI_API_KEY": "${OPENAI_API_KEY}"
}
}
}
}Если теперь просить сгенерить лого для своего репозитория, то Gemini составит релевантный промпт по репе, вызовает этот метод и по желанию обновит Readme проекта, добавив в него картинку.
Смысл тут в том, что так можно подключить любой вызов вашего внешнего инструмента.
В целом же есть куча готовых серверов, можно легко подключить GitHub для создания агентом пулл-реквеста или RAG на своих файлах. Хороший список есть в официальной репе разработчиков MCP протокола.
Я сделал таймер Pomodoro с котами
Привет, ребята!
Я создал небольшой сторонний проект — милый маленький таймер Pomodoro с котами под названием Meowdoro.
Это бесплатное расширение Chrome, которое помогает вам оставаться сосредоточенным с помощью техники Pomodoro.
Вы можете настраивать сеансы работы/перерыва, отслеживать свою статистику и даже соревноваться в простой таблице лидеров.
О, и есть кот, который мурлычет, когда наступает время перерыва.
Ничего особенного — просто то, что я хотел для себя и решил поделиться.
Буду рад любым конструктивным отзывам или идеям по улучшению!
→ https://chromewebstore.google.com/detail/meowdoro-tracker-pomodoro/gmmcoggmjnbbklphjcbnpfepmagelgkk
Спасибо за чтение! 😺
МойОфис Frontend&UX Talks уже начался!
Самое время смотреть и задавать вопросы спикерам в чате митапа!
Митап посвящен главным вызовам и проблемам в сложных интерфейсах. Спикеры расскажут о самых разных аспектах фротенда в 2025 году: от айтрекинга и других методов исследований до реактивного программирования и СSS-спецификаций.
Сам митап разделен на две категории: JavaScript и UX. В каждой из них, помимо наших специалистов, есть ребята и из других компаний: Лаборатория Касперского, Контур, Alpha Research Center. Всего на встрече будет семь докладов – их расписание можно посмотреть здесь.
Смотрите митап прямо здесь:
Также трансляцию можно смотреть на Youtube и ВК.
Заинтересовало? Тогда скорее переходите в чат митапа. Здесь можно задать вопросы спикерам, и получить раньше остальных доступ к записи выступлений :)
Глубокий спец vs Фулстек. Я наверное никогда не устану говорить об этой теме, потому что для меня фулстек это нормальное состояние разработчика, в смысле легко достижимое, а не история про то что это обязательно плохой спец во всем. Более того, для меня норма, когда разработчик:
- Может в бек в несколько языков
- Может во фронт
- Умеет и настраивает пайпланый от Docker Compose до Github Actions
- Может сетапить и настраивать облака
(дисклеймер: речь не о том, что таким должен быть каждый, а что это не рокет сайнс все это уметь на хорошем уровне, достаточным чтобы классно делать проекты)
Что обычно имеют ввиду под глубоким спецом? Что человек прямо досканально знает все, быстро дебажит, создает качественный и поддерживаемый код (это ведь подразумевается?).
Знает ли досконально все? Вообще не факт, а скорее всего нет. От того что человек занимается только чем-то одним, не означает что он сидит и как не в себя копает во внутрь по этой теме. Как правило я вижу другую картину, если делать долго и упорно одно и тоже, то в какой-то момент это все делается на автомате, а дальше человек просто останавливается в развитии (соседний фреймворк не считается) ну либо становится тем, о ком я пишу выше.
Быстро дебажит? Вполне, это правда, но не на каждую проблему, а на какие-то кейсы, где что-то стреляет. Но во-первых сейчас эту часть очень серьезно закрывает ИИ, а если он не справится, то в команде наверняка есть кто-то кто в этой теме сечет больше.
А качественный код? Вот тут вообще никакой корреляции. Да, мы все слышали, что приходят беки и пишут фронт, после которых надо все переписывать, но это не ситуация, которую я рассматриваю. Мы все таки говорим про фулстеков, то есть тех кто целенаправленно учит, а не пишет фронт, потому что попросили, а он не сечет и не планирует учиться писать правильно. Что касается в целом подходов, то люди с более широким кругозором и опытом пишут обычно лучше. Потому что качество кода проявляется не в мелких деталях, что вы например в курсе про более крутой хук. Это все локальные оптимизации. Качество оно про более высокий уровень.
На практике все чуть сложнее. Главный фактор, который вижу я, помимо “я не буду этого делать” - компания и команда в которой работает человек. Где-то это норма, где-то нет и в зависимости от этого и идет рост.
p.s. Больше про разработку я пишу в своем канале Организованное Программирование
Как студенты с айтрекером изучали наш текстовый редактор
Июнь стал месяцем айтрекинга в UX-команде МойОфис. Сначала у нас прошло совместное исследование со студентами ВШЭ, а в ближайшие дни мы проведем крупный митап, где поговорим о создании и анализе сложных интерфейсов, в том числе с помощью технологий отслеживания взгляда.
Важный анонс: 26 июня пройдет онлайн-митап МойОфис Frontend&UX Talks, на котором JS-еры, дизайнеры, продакты и аналитики соберутся, чтобы обсудить все насущные проблемы и нюансы современного фронтенда. Кроме наших экспертов, на митапе будут ребята из Лаборатории Касперского, Контура и Alfa Research Center!
Регистрируемся и читаем темы выступлений здесь – и вступаем в чат, чтобы не пропустить важные обновления (и просто поболтать с коллегами по фронтендерскому цеху).
Еще немного о совместном исследовании со студентами:
4 июня в нашем петербургском офисе прошла презентация результатов совместного исследования с лабораторией социальной и когнитивной информатики ВШЭ в рамках учебного сотрудничества. Студенты курса «Айтрекинг в UX-аналитике» провели глубокое тестирование текстового редактора МойОфис 3.4 с обновлённым интерфейсом.
Методология:
Определили самые востребованные задачи у студентов и на их основе составили задания.
Использовали носимый open-source айтрекер PupilLabs.
Провели психологические опросы до и после заданий (спойлер: уровень стресса участников не изменился) и когнитивное интервью после.
Ключевые результаты:
Проявилась часть проблем, о которых мы уже знали и исправили в версии редактора 3.5. Например, более удобное выделение ячеек таблицы без лишнего клика.
Получили оценки пользователей: лёгкость и чёткость интерфейса.
Подтвердилась необходимость в новом поиске по функциям, к которому прибегали участники, когда что-то не получалось найти, или они не знали, как выполнить задачу.
Выявлены новые точки роста для развития продукта
P.S. Большая благодарность Елене Артёменко из лаборатории социальной и когнитивной информатики ВШЭ за эту коллаборацию! А если хотите узнать больше о фронтенде и UX-исследованиях — ждем вас 26 июня на Frontend&UXTalks!
Опубликована база по веб-разработке от Microsoft. В учебном курсе от компании представлено 24 урока, где разбирается всё от основ веба, работы браузеров, сетевых протоколов до HTML, CSS и JS. Всё обучение ориентировано на практику. После каждого раздела есть тесты и интерактивные кодинг-задачи. Также есть несколько пет-проектов, которые можно реализовать после обучения и положить себе в портфолио.
1 января 2025 года мы с другом начали челлендж «12 проектов за 12 месяцев».
Все началось с манифеста инди-хакера.
Вот 7 пунктов, которые мы записали.
👨💻Манифест «Инди-Хакера».
1. Поиск идеи и анализ рынка
Мы начинаем с тщательного исследования рынка и выявления потребностей пользователей. Мы анализируем спрос, существующие продукты и потенциальную прибыль. Это помогает нам находить идеи для востребованных и прибыльных продуктов.
2. Создание ценности
Мы разрабатываем продукты, которые решают 1 конкретную проблему пользователей. Наша цель — создать минимально жизнеспособный продукт (MVP), который можно быстро протестировать на целевой аудитории, чтобы убедиться в его востребованности.
3. Быстрый запуск
Мы выбираем идеи продуктов, которые можно запустить за 1 месяц. Мы используем технологии для быстрой разработки и платформы с наличием органического трафика (Chrome Store, App Store, Google Play, Telegram и тд). Это позволяет нам быстро получать первых пользователей.
4. Трафик и продажи
Мы активно работаем над маркетингом, понимая, что создание продукта — это только половина успеха. Мы используем SEO, социальные сети, контент-маркетинг и платную рекламу для привлечения клиентов. Мы публично делимся процессом разработки продукта и получаем обратную связь от сообщества.
5. Монетизация
Мы тестируем бизнес-модели для монетизации наших продуктов: подписка, freemium-модель, реклама и affiliate marketing. Мы строим воронку и сам продукт на основе данных, чтобы зарабатывать деньги.
6. Инвестиции и риски
Мы не привлекаем инвестиции, а вкладываем свои деньги и время для разработки и продвижения продуктов. Мы стремимся минимизировать вложения и тратим не больше пары сотен $ на запуск 1 продукта. Мы не сжигаем деньги инвесторов и не заливаем деньгами плохой продукт.
7. Не взлетело - повтори
Мы знаем, что не все продукты будут успешными. Каждая неудача — это возможность для обучения и роста. Мы продолжаем экспериментировать и делаем новые продукты с учетом полученного опыта.
👁 9 день как пилю свой проект для замены Google Forms.
- Добавил картинку в заголовок формы
- Иконку
- Настройки верстки
- Красивое отображение элементов в редакторе и в просмотре
Хабра-капчи
Попытка залогиниться на "Хабр" практически всегда наталкивается на запрос решения капчи. Сейчас это настолько модно, что не только "Хабр", но, наверное, каждый второй сайт показывает капчу. Обычно, простую от Cloudflare. Но на "Хабре" капчи становятся всё сложнее и сложнее. Или - забавнее и забавнее. В пост нельзя добавить несколько изображений, поэтому вот один, но зато свежий, пример:
Это в чём-то лучше, чем другие варианты, где в качестве образца указаны наборы клякс из теста Роршаха, которые требуется угадать и сопоставить с размытыми картинками. Но, всё же, чем же из изображённых предметов можно писать? Может, бургером? Выдавливая соус?
Да, да, имелась в виду клавиатура. Для мощной LLM это, скорее всего, очевидно. Но не для роботов человеков-пользователей.
afterEveryRender и afterNextRender
В Angular 20 afterRender был переименован в afterEveryRender, и это очень логично, так как теперь он более четко отражает суть (нейминг решает). Сам afterRender (далее afterEveryRender) и его брат afterNextRender появились в версии 17. Рассмотрим, почему эти два мощных инструмента управления рендерингом — не просто альтернативы ngAfterViewInit, а полноценные хуки жизненного цикла с бесшовной поддержкой SSR!
Это хуки?
Да! Это хуки нового типа, которые выполняются после рендеринга компонента:
Они не заменяют ngAfterViewInit/ngAfterContentInit, а дополняют их
Включают гранулярные реакции на рендеры, включая обновления
Почему идеально подходит для SSR?
Главное преимущество: обратные вызовы выполняются только на клиенте!
✅ После гидратации (в SSR)
✅ После первоначального рендеринга (в CSR)
✅ Больше никаких ошибок «документ не определен»
Использование:
constructor() {
// 🚫 Не запускается на сервере
// ✅ Запускается только один раз после загрузки браузера!
// 📊 Идеально подходит для однократной инициализации
afterNextRender(() => {
console.log('Next');
});
// 🚫 Не запускается на сервере
// 🔄 Запускается после каждого цикла обнаружения изменений
// ✨ Отлично подходит для обновлений, зависящих от DOM
afterEveryRender(() => {
console.log('Every');
});
}
Когда использовать?
afterNextRender
Одноразовые операции (инициализация библиотеки, загрузка данных)
Безопасная замена ngAfterViewInit для SSR
afterEveryRender
Отслеживание изменений DOM (измерения элементов, позиции)
⚠️ Внимание: может повлиять на производительность
Основные выводы
Интегрировано в систему жизненного цикла Angular
Автоматический пропуск на стороне сервера - больше никаких хаков isPlatformBrowser!
afterNextRender - "один раз после рендеринга"
afterEveryRender - "после каждого обновления"
"Я пока не использовал afterEveryRender в своих проектах - есть ли у вас практические примеры использования? Поделитесь в комментариях!"
Больше об 🅰️ngular в моём Telegram-канале
JavaScript, дизайн-системы и рок-н-ролл — что такое фронтенд в 2025 году?
Что происходит, когда в одном месте собираются JS-еры, UX-дизайнеры и исследователи? Получается Frontend&UX Talks!
Без сложных интерфейсов в фронтенде сегодня никуда: продукты становятся все масштабнее, а требования – все выше. Для всего этого нужны свежие и эффективные решения, которые ускорят разработку, и помогут провести релевантные UX-исследования.
Чтобы обсудить эти темы, мы в МойОфис пригласили ребят из разных компаний: Alfa Research Center, Лаборатория Касперского и Контур.
Всего на митапе будет 7 докладов, где расскажем:
как реактивное программирование и RxJS меняет разработку – и какие у него есть нюансы;
какие свежие css-спецификации могут упростить ежедневный кодинг;
как «редизайнить» сложные интерфейсы: рассказ на личном опыте переосмысления визуала настольных редакторов практически с нуля;
что за методы UX-исследований использует финтех сегодня – и какие из них можете перенять и вы :)
и многое другое, что поможет в работе со сложными интерфейсами!
Если тебе близки эти темы — приходи 26 июня в 15:00. Регистрация и подробности по ссылке.
Крутая история инди-хакера.
Денис работал программистом, а в свободное время запустил браузерное расширение, которое затем продал за $100k.
https://youtu.be/zbsXZ_xRMOM?si=EmwBb7umAytf4IRk
Очень вдохновляет, не могу не поделиться
Обновил сайт знакомств для айтишников
Наконец-то!
Уже 13 лет бесплатно ищет половинки. И без рекламы.
Ушел с jquery и bootstrap - перешел на alpine и tailwindcss.
Поменял дизайн на более современный и удобный, как мне кажется.
Знакомства для айтишников - просто наберите в поисковике (он всегда первый), ссылку не буду давать.
Как было раньше можно посмотреть в архиве интернета, с 2012 года.
🚀 День 5: Тестирую управление общими папками в своем конструкторе форм. Релиз все ближе.
Так же запускаем череду юридических проволочек, чтобы стать Оператором Персональных Данных
