Я часто вижу, как разработчики испытывают трудности с i18next. И действительно, это технология интернационализации, которую нелегко освоить.
Несмотря на это, i18next остаётся решением по умолчанию, которое ChatGPT рекомендует для внедрения i18n. Мы слишком часто попадаемся на удочку страниц «Get Started» (да, оно работает, но действительно ли это сделано правильно?).
На практике я замечаю, что многие проекты пропускают самые критичные аспекты интернационализации, особенно связанные с SEO: перевод метаданных, теги hreflang, локализация ссылок, настройка sitemap и robots.txt.
Что ещё хуже, почти половина проектов, использующих i18next (особенно после роста популярности ИИ), не структурируют контент по неймспейсам или же загружают все неймспейсы при каждом запросе.
Последствия? Вы можете заставлять каждого пользователя загружать контент всех страниц на всех языках, даже если он посещает только одну страницу. Например: при 10 страницах и 10 языках 99% загружаемого контента никогда не будет использовано. Совет: используйте анализатор бандла, чтобы выявить это.
Чтобы решить проблему, я подготовил руководство о том, как правильно интернационализировать приложение Next.js 16 с i18next в 2025 году.
Представлен ИИ-сервис Vibetest Use, который тестирует сайты на прочность и ищет уязвимости. Параллельно запускаются сразу несколько проверок с помощью ИИ, которые ищут ошибки, битые ссылки или проблемы в дизайне. Работает на базе Claude. В качестве альтернативы можно запустить с бесплатным API от Google через Cursor.
Как мы избавились от рутины в сетевом коде с помощью собственного фреймворка Chord 🪄
Расскажем на крупнейшей конференции для разработчиков разного профиля — Holly JS 🤟
Спикером конференции станет Дмитрий Дин, fullstack-лид Далее. В докладе «Chord’овская декларативность: побеждаем бойлерплейт сетевого взаимодействия» он поделится опытом внедрения собственного инструмента Chord (на базе JSON-RPC), который уже больше года работает в продакшене и избавляет команды от рутины при взаимодействии между клиентом и сервером.
Доклад будет особенно полезен frontend- и fullstack-разработчикам (уровня Middle и выше), которые работают с TypeScript и современными фреймворками вроде SvelteKit, Next.js или Nuxt.
Приходите послушать доклад Димы 21 ноября, с 15.30, в секции Фреймворки.
Представлен открытый проект релейного компьютера 1961 года Minivac 601, работающий в браузере (код на GitHub). До появления микрочипов компьютеры строились на основе механических реле. Это рабочая модель Minivac 601, образовательного компьютера, разработанного Клодом Шенноном.
Представлена шпаргалку по JavaScript. Внутри есть всё для изучения, проверки себя и прокачки навыков до уровня сеньора: основы и теория, поиск и выбор элементов, CSS, AJAX и база по DOM, формы и ввод данных, общие проверки , разметка и текстовое содержание, документ, область просмотра, переходы и удобный поиск по всем темам.
minimal vscode - гайд по кастомизации vscode: чистим status bar, пишем плагины на #javascript
В статусбаре в vscode – очень много всего: как полезного, так и лишнего. Сегодня посмотрим, как можно его кастомизировать:
Можно просто спрятать (как делаю я)
Можно очень детально кастомизировать
Можно перенести часть его функций в плагины
И вот тут главная фича vscode выходит наружу – у нас ведь просто браузер с html / css / js. А значит, мы можем использовать css и js для кастомизации всего! И оно будет работать одинаково даже в cloud версиях IDE.
В выпуске:
Будем писать CSS для удаления лишнего из status bar
И создавать локальные плагины на #javascript для кастомизации поведения редактора
function updateColumnPosition() {
const positionLabel = document.querySelector(
'#status\\.editor\\.selection .statusbar-item-label',
)
if (!positionLabel || !positionLabel.textContent) {
// It might not exist for some reason ¯\_(ツ)_/¯
return
}
const currentLine = document.querySelector(
'.line-numbers.active-line-number',
)
// Now we would have the column position instead of the active line number:
const colNumber = positionLabel.textContent.match(/Col (\d+)/)
currentLine.textContent = colNumber[1]
}
Впереди еще пара взрывающих мозг видосов, будем и дальше превращать vscode в Черный Квадрат Малевича.
Лучший стэк для запуска MVP SaaS-стартапа в РФ на 2025 год.
Вот наш боевой стэк, который мы сейчас используем для разработки SaaS-стартапа.
Проверено на собственной шкуре!
✅ Frontend:
- NextJS 15 (+React 19, Turbopack, Server Actions) - актуальный стек для веб-приложений.
- Shadcn UI (сделана на Tailwind) - библиотека UI-компонентов, чтобы сделать крутой интерфейс без дизайнеров.
- Netlify - бесплатный хостинг для тестовой версии продукта.
✅ Backend:
Supabase:
- База данных
- Database SQL Functions (функции сразу в базе PostgreSQL)
- Edge Functions (серверные функции на TypeScript)
Nextauth:
- Авторизация
✅ Инфраструктура:
Kubernetes:
- Репликация БД и сервисов на 3-х Worker-нодах
- Rollout-обновления без простоя
- Политики безопасности и изоляция
- CI/CD из GitHub.
+ Пароли/ключи в KeePass XC.
✅ Инструменты:
- IDEA Ultimate - среда разработки
- Cursor - для вайбкодинга (чистый, без всяких инфоцыганских MCP)
- DBeaver - для работы с БД
- GitHub - репозиторий
✅ Платежка
- Robokassa (РФ + иностранные платежи)
✅ Лендинг + блог
- Tilda (проще сделать сайт на конструкторе, чем все это вайбкодить)
Как мы все настроили
- Развернули проект в облачном хостинге в РФ, чтобы хранить данные в соответствии со 152 ФЗ. Выбрали хостинг с k0s, потому что он дешевле классического k8s.
- Supabase поставили на свой сервер (Cloud не подходит, так как данные хранятся не в РФ).
- Настроили регулярные бэкапы (хотя мы еще не релизились, но 1 раз у нас уже отлетали жесткие диски).
Почему именно такой стэк?
- Проще работать с технологиями, которые ты уже хорошо знаешь.
- Нам важна надежность, быстрое переключение новых версий на проде без простоя и возможность разделить продукт на версию под РФ и "мир".
- Для работы в РФ нужно хранить персональные данные в РФ и избегать трансграничной передачи данных.
- Конструктор сайтов как простой и недорогой вариант для лендингов и блога. Чтобы не вайбкодить целую CMS.
Сейчас мы подключаем платежку, причесываем баги, допиливаем лендинг и готовимся к релизу.
А какие технологии используете вы для разработки MVP?
Возьмите три ингредиента: HTML для чёткой структуры, CSS для красивого оформления и JavaScript для динамики. Смешайте всё в нужных пропорциях, добавьте немного практики, щепотку креатива — и получится интерфейс, которым приятно пользоваться.
А если хотите разобраться во всём шаг за шагом — ловите подборку по основным инструментам топового фронтенд-разработчика:
Привет! На связи Иван и Михаил, Flutter-разработчики из Финама. Когда мы начали писать на Flutter, поняли — граблей тут много, и на некоторые мы уже успели наступить, собрали бинго и готовы рассказать, где они поджидают. Делимся «анти-чеклистом» — вдруг поможет сэкономить время и нервы:
«Книга — лучший подарок», но не в этом случае
Первая ошибка — искать идеальную книгу по Flutter, язык и фреймворк меняются быстрее, чем успевает выходить новое издание. Через пару месяцев некоторые главы могут быть уже неактуальны.
Что делать? Читать документацию, она обновляется. Поначалу может быть трудно вникнуть, опираясь только на нее. На этот случай есть запасной вариант — пройти какой-нибудь годный курс (вроде Udemy). Выбирайте те, где обновления выходят после каждого релиза.
Где брать актуальную информацию
Чтобы не отстать, нужно искать и читать свежие статьи про Flutter и Dart. Из русскоязычных источников нам помогает, конечно, Хабр, а еще рекомендуем ТГ-канал Amiga. Хорошие статьи на английском выходят на Medium. На Youtube-канале Flutter регулярно публикуют интересные видео. А еще мы попробовали лайфхак с нейросетью: она собирает дайджест свежих материалов за неделю. Удивительно, но это правда работает.
Начни со стейт-менеджментов и правильной архитектуры приложения
Самая частая боль новичков — хаос в коде. Мы видели проекты, где бизнес-логика жила прямо в build(). Всё работало… до первого бага.
Как действовать:
Начните с простого setState — это базовый способ управления состоянием. Затем попробуйте пакеты Bloc, Riverpod — почувствуете разницу в читаемости и структуре.
Изучите основы чистой архитектуры: это позволит вам быстрее понимать чужой код и лучше разбираться в своем.
Хотите потренироваться? Попросите AI сгенерировать пример проекта с Bloc — и разберите его построчно. Или обратитесь к статьям.
Не бойся проблем при сборке
При сборке проекта ты скорее всего столкнешься с ошибками компиляции и в 90% случаев это будут ошибки, связанные с Xcode и Gradle. Не нужно паниковать, Flutter достаточно умен и в большинстве случаев предложит тебе решение. Если не было предложено решение или оно не сработало — не беда, первая ссылка в гугле вероятнее всего решит твою проблему. И не забывайте про старый дедовский способ перезагрузки:
flutter clean
flutter pub get
В топку тяжелые среды, работай по четвергам в Visual Studio Code
Среда разработки — твой основной инструмент, ты будешь работать в ней 99% своего времени, а значит она должна быть удобной и комфортной для тебя. Для Flutter есть две основные IDE: Android Studio и Visual Studio Code. Android Studio — мощная, с готовыми тулзами и анализаторами, но тяжеловесная. VS Code — лёгкий, быстрый и гибкий.
В Финаме мы работаем в VS Code — там проще интегрировать CLI-инструменты, автогенерацию кода и кастомные скрипты. Но выбор — это вопрос привычки: рекомендую попробовать обе. Главное, чтобы IDE не тормозила, когда запускаешь hot reload 20 раз в час. Я знаю людей, которые переходили с Android Studio на Visual Studio Code, но не знаю обратных примеров.
Логике в UI не место
Выгружать логику работы приложения (например, сетевые запросы, обработку данных) в методе build() — грубая ошибка. Это ведет к багам, фризам, затрудняет тестирование, нарушает принципы разделения обязанностей.
Используйте стейт-менеджеры. Логика должна быть отделена от UI — это облегчает поддержку, переиспользование и покрытие тестами.
Делите UI на независимые виджеты
Если экран превращается в тысячу строкового монолита — значит пора рефакторить. Разбивайте интерфейс на маленькие, самодостаточные виджеты (например: заголовок, список, кнопки). Это упрощает чтение, тестирование и повторное использование компонентов. И старайтесь ограничивать один экран не больше 150-200 строками кода.
Async — не просто await
Асинхронное программирование в Dart требует внимания:
Оборачивайте важные вызовы в try/catch.
Используйте async/await для читаемого кода; а если используете .then(), не забывайте обработать
Новое видео с нашей Конференции Luxms, теперь с технологической сессии. Илья Гурешидзе @IlyaGureshidze начальник отдела разработки Luxms BI рассказал о магии вне Хогвартса внутри движка.
Одна из сильных сторон Luxms BI – гибкость клиентской части. Связка JSON + React дает предсказуемое поведение, быструю сборку и легкую доработку интерфейсов – без необходимости лезть в «ядро» или переписывать все с нуля.
Для удобства разработчиков в системе есть специальный проект – bi-magic-resources (BMR). Это проект на React, где можно разрабатывать интерфейсы, хранить наработки в GIT, вести совместную разработку, кастомизировать сборку и запуск, подключать свои библиотеки и переиспользовать уже готовые компоненты заказчика. С ним удобно разрабатывать, тестировать и пробовать новый функционал, не мешая основной ветке разработки.
Какие пет-проекты у фронтенд-разработчиков в бигтехе
Городские. И конечно, они связаны с дизайном. 😎
Привет! Это Саша Чабин, старший инженер-программист в Контуре. На работе разрабатывает пользовательские интерфейсы, развивает дизайн-систему, проводит ревью техстандартов в инженерном пути. А вне работы — создаёт онлайн-карты Екатеринбурга и преподаёт студентам УрФУ. Рассказал, как не чувствовать себя выжатым лимоном от такого количества дел и кто его на них вдохновляет.
Какие интересные проекты я делаю, когда свободен от рабочих задач:
Генплан Екатеринбурга, который помогает общественникам. Это такой сайт, на котором собраны все документы про то, как должен выглядеть генеральный план города. Позволяет не выкачивать кучу файлов сайта администрации, а сравнить и проверить всё в одном месте. Сделали генплан несколько лет назад, а им до сих пор активно пользуются: часто обновляют и проводят по нему слушания.
Дизайн-код Екатеринбурга. Это сообщество архитекторов и дизайнеров-энтузиастов, которые делают город красивым и понятным. Например, разрабатывают дизайн адресных табличек на дома и делают онлайн-карту города, на которой можно найти объекты культурного наследия, интересный стрит-арт, посмотреть этажность домов и многое другое.
Преподаю студентам третьих и четвёртых курсов ФИИТ. Рассказываю про фронтенд-разработку интерфейсов — то, чем занимаюсь в Контуре. Верстаем, перевёрстываем, выполняем домашки.
Как получается не выгорать от такого количества дел?
Важно чувствовать интерес, любопытство и вдохновляться другими людьми. Своими проектами я занимаюсь после работы и в выходные потому что считаю их важными и полезными. Когда тебе искренне нравится то, чем занимаешься на работе и после неё, усталости нет. Думаю, многим знакомо это чувство и его сложно объяснить: оно просто есть. Конечно бывает и то, что ощущаешь себя выжатым лимоном — без этого никуда. Но когда видишь вокруг людей, которые двигают эту планету и делают в разы больше тебя, — вдохновляешься. Например, общественники Екб, которые договариваются с горадминистрацией о новых проектах — смотришь и думаешь, откуда в них столько смелости и напора?!
Кто ещё меня вдохновляет:
Андрей Ситник — фронтенд-разработчик энтузиаст, который сделал кучу полезных инструментов для фронтендеров. Мне удалось немного поработать с ним. Его суперсила — в желании двигать индустрию и возможности помогать всем начинающим.
Александр Георгиевич Гейн — кандидат физико-математических наук, профессор. У него я учился и удивлялся, как этот человек искренне хотел помочь своим студентам и всегда находил время на то, чтобы проконсультировать всех, кто что-то недопонял по теме или просто хотел узнать больше. Подпитывать интерес студентов — было его суперсилой, которой и я стремлюсь обладать.
Николай Александрович Чабин, мой дедушка. Он был военным, объездил всю Россию. После 60 лет вернулся на родину, в Первоуральск, и занялся Книгой памяти о призванных в годы Великой отечественной войны. Дедушка работал в Совете ветеранов и учился осваивать компьютер: Word, Excel, интернет. Учился работать с архивами и возил ветеранов в Екатеринбург на разные мероприятия. Обижался всё время, что в интернете не вся информация есть. Меня всегда заражал его интерес ко многим вещам, наверное поэтому во мне развито желание успеть многое. Кстати, хочу доработать Книгу памяти дедушки, придумать для неё новый формат.
Все эти люди — маяки для меня. Хочу тоже быть для кого-то таким маяком.
***
«Пет проекты Контура» — это серия видеороликов, на которых наши разработчики рассказывают о своих личных инициативах вне работы и гуляют с собаками из приюта Хаски Екб. Выпуск про Сашу и собаню Пончика — первый, и его можно посмотреть в VK Видео, на RuTube и YouTube. А чтобы не пропустить новые выпуски, подписывайтесь на наш блог или любую другую площадку. 😉
Уже в эту пятницу вечером, 10 октября, в Питере, в в ITentika, сообщество Гипер Дев соберётся для обмена опытом разработки на отечественном фреймворке мирового уровня $mol и набросает карту захвата мирового господства максимально экологичными методами.
Приходи познакомиться с профессиональными $mol разработчиками, узнать про их масштабные проекты, прочувствовать вайб гаражных инноваций, и стать участником этой упоротой безбашенной движухи, совсем потерявшей берега. Даже если сам не разраб - экспертиза в других областях тоже ценна. Главное - чтобы глаза горели, а руки не боялись творить невозможное.
Вход на площадку по паспортам, так что срочно регистрируйся!
Как правильно внедрить SRI и обезопасить свой проект от атак через CDN?
Subresource Integrity (SRI) — это функция безопасности, которая позволяет браузерам проверять, не были ли данные, загруженные посредством CDN, изменены. SRI — важный инструмент для повышения безопасности веб-приложений. Он защищает от атак, в которых злоумышленник может внедрить вредоносный код в сторонние ресурсы.
В статье «Как настроить SRI, если у нас микрофронты» рассказываем, что это такое и зачем он нужен, как устроена технология на практике и почему она особенно важна в проектах с микрофронтами. Если вы работаете с микрофронтами или хотите повысить безопасность фронтенда — эта статья поможет сделать всё грамотно и без лишних головных болей.
...и вот у меня спрашивают «А какие у тебя мотивация работать и стимул для развития?», а я говорю «Деньги». Ты бы видел как на меня посмотрели! Как будто ждали какой-то другой ответ. Что мне надо было ответить? Не понимаю. Работать за идею?
Недавно общался со своим другом с прошлой работы и разговор зашел за повышения и performance review. И этот момент ТОТАЛЬНОГО непонимания руководителями желания сотрудника зарабатывать больше мне как-то скребется, я слышал о похожих ситуациях уже немало.
Хотелось бы здесь написать остро "НИКТО!", но буду мягче. Если мы будем честны: мало кто в найме готов работать только за идею. Я уверен, если предложить этому ревьюверу: «Ой, а давай мы твою зарплату попилим на весь отдел? Тебе же хватит идеи?», – он быстро сольется.
Идея – это роскошь. Можешь себе позволить работать за идею, если холодильник забит, ипотека закрыта, есть запас жирка и нет переживаний за деньги. Желательно, запас средств на несколько поколений безбедной жизни. Всё остальное – манипуляция. И пропагандировать нечто подобное с позиции руководителя – это, ну не знаю, бред?
И вот у друга спрашивают: «А что тебя мотивирует, кроме денег?». И в этот момент я думаю: а что мотивирует стоматолога? Чтобы у меня зуб не болел. Но если ему сказать: «Давай-ка, дружочек пирожочек, ты полечишь меня бесплатно? Твоя ж идея – это здоровье людей»? Он меня пошлет и будет прав. И хирург, и пилот самолета, и строитель – все пошлют. Но почему-то в айтишечке считается, что я должен радоваться "идее".
Работа ради идеи возможна, если эта идея твоя. Если же это чужая идея, за чужие деньги, да ещё и без нормальной компенсации – это.. бесплатный кружок по интересам? Фан-клуб с членскими взносами? Секта? Выбирайте что больше нравится.
Отличная компенсация + интересные задачи + адекватный менеджмент = получаем мотивированную команду. Идея и миссия компании – это важно и круто, но это вишенка на торте, а не замена базовым потребностям.
Начал разбираться с Motion для React, но оказалось, что свежих обзорных статей почти нет? В нашей статье полный обзор библиотеки Motion — идеального инструмента для создания современных UI-анимаций. Внутри:
Разбор ключевых motion-компонентов.
Практические примеры кода с плавной анимацией TODO-листа.
Как настроить анимации появления, исчезновения и перетаскивания элементов.
Советы по оптимизации с LazyMotion и управлению анимациями через хуки.
Интересные лайфхаки для создания интерактивных интерфейсов без потери производительности.
В статье «Попробовал библиотеку Motion в React: делюсь обзором» есть примеры кода, GIF-анимации и описание хуков, которых, достаточно, чтобы понять Motion, и, возможно, попробовать его руками, сэкономив время на чтении документации.
В видео поговорим про то, как отключить табы в vscode, и как навигироваться по файлам без них. Отформатируем визуальное отображение одного оставшегося таба. А еще бонусом расскажу про Cooklang – язык для кулинарии и разметки рецептов.
Какие способы навигации удобнее табов? Будем использовать cmd+p для Command Pallete, cmd+d для Open Recent, alt+<right> и alt+<left> для навигации по позициям курсора в разных файлах.
