Фронтенд

Когда-то я просто хотел писать мобильные приложения. Никаких планов «стать техлидом», «управлять командами» или «строить архитектуру» у меня не было. Я просто любил разбираться в технологиях и доводить фичи до ума.

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

Расскажу коротко, как это произошло у меня.

⸻

Старт: iOS, баги и работа с памятью

Мой путь начался с iOS-разработки.

Objective-C, retain/release, утечки, странные баги — то самое время, когда каждое приложение было как маленький квест.

Через полгода мне доверили первый проект «с нуля», и я понял важную вещь:

чем больше ответственности на тебе — тем быстрее ты растёшь.

⸻

🔹 Переход в защиту: мессенджеры, шифрование, С/С++

Потом я оказался в проекте со сквозным шифрованием.

Работа с C/C++, интеграция нативных библиотек, криптография, UX мессенджера.

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

⸻

🔹 T-банк: 11 iOS-разработчиков и первый серьёзный рефакторинг

В T-банке я впервые стал тимлидом.

У нас была большая кодовая база, и я за год провёл один из самых глубоких рефакторингов в своей карьере:

— разбирали код по словам;

— переходили от наследования к композиции;

— внедряли протоколы;

— переписывали на Swift;

— покрывали всё тестами.

И вот здесь я понял ещё одну важную вещь:

Лидер — это не тот, кто командует.

Лидер — тот, кто делает систему лучше.

⸻

Ronte (Берлин): международная команда и 40 человек в проекте

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

В данной статье мы рассмотрим одну из таких библиотек — Charka UI V3 в связке с React, так как она не особо большая и проста в изучении. В разных библиотеках синтаксис может немного отличаться, но в основном они все решают одни и те же проблемы. Давайте разберёмся, как она способна помочь нам в разработке.

Сегодня я покажу Вам примеры кризиса IT у маститых компаний. Казалось бы, там всё должно быть отлично с функционалом у приложений, но нет — все они заложники кризиса в отрасли. В конце объясню, почему, пока смотрим примеры.

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

В современных веб-приложениях для потокового видео всё чаще требуется не просто воспроизводить контент, но и анализировать аудиодорожку в реальном времени. Например, строить индикаторы уровня громкости (VU/PPM метры), визуализировать спектрограммы или детектировать тишину. В этой статье разберём, как корректно объединить hls.js и Web Audio API для анализа аудио из HLS-потока в браузере, избежав типичных подводных камней.

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

Во многих проектах на Next.js возможности для SEO остаются неиспользованными: страницы индексируются не полностью, структурированные элементы отсутствуют, а ссылки в соцсетях отображаются неправильно. Чтобы этого избежать, существуют проверенные инструменты и подходы, которые помогают сделать SEO понятным, полным и эффективным.

В данной статье рассмотрены ключевые аспекты настройки SEO в проектах на Next.js: работа с метаданными, генерация sitemap и robots.txt, оптимизация изображений и внедрение структурированных данных. 

Всем привет, с вами Артем Леванов, Front Lead в компании WebRise.

В прошлой статье мы разобрали, как навести порядок в создании форм — выделили примитивы, ячейки и типовые поля.

Следующая проблема, с которой сталкивается любая форма — валидация.

Формы могут быть красивыми и структурными, но без единого подхода к валидации они быстро превращаются в хаос.

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

Привет, Хабр!

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

Ничего против них не имею. Просто хочу рассказать о нескольких приёмах, которые вы могли упустить. Они помогут вам в разных ситуациях.

Давайте посмотрим, что я вам подготовил.

Что такое кастомные медиавыражения и почему обычные CSS-переменные не работают внутри @media. Простое объяснение, понятные примеры и разбор того, как браузер вычисляет стили под капотом.

Команда JavaScript for Devs подготовила перевод статьи Пола Кинлана о том, почему новые веб-фреймворки сегодня оказываются «мёртвыми при рождении». Автор утверждает: сочетание сетевых эффектов, экосистемы React и обучения LLM формирует замкнутый цикл, в котором альтернативы просто не успевают набрать критическую массу.

Прямая мутация данных — ситуация, когда мы меняем объект или массив по существующей ссылке, не создавая новую копию. В React это одна из самых частых и при этом самых коварных ошибок. Она нарушает принцип неизменяемости (immutability) — если данные изменились, должен появиться новый объект, а старый оставаться без изменений.

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

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

Рассказываем, как безобидная строка JavaScript-кода привела к нарушению стабильности тестов продукта, а также о том, как можно избежать подобных ошибок.

Здесь будут рассмотрены не очевидные, редкие и сложные инструменты и парадигмы для работы с типами в TypeScript.

Тип Discriminated Unions (дискриминантное объединение), часто обозначаемое как Tagged Union (размеченное объединение), так же как и тип union (объединение), является множеством типов, перечисленных через прямую черту | . Значение, ограниченное дискриминантным объединением, может принадлежать только к одному типу из множества.

Несмотря на то, что Discriminated Union в большей степени идентичен типу Union , все же существует два отличия.

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

Второе отличие в том, что каждому объектному типу, также называемые варианты, составляющему Discriminated Union , указывается идентификатор варианта который называется дискриминант.

Помните, что вывод типов, без помощи разработчика, способен работать лишь с общими для всех типов признаками?

Рассмотрим пример:

Всем привет! Последние несколько месяцев я работаю над пет-проектом — интерактивной образовательной платформой для изучения Web Audio API и принципов обработки и синтеза цифрового звука. На платформе пользователи смогут решать задачи, программируя на JavaScript прямо в браузере. Эти программы выполняются в изолированной среде — песочнице, где пользовательский код не может повлиять на работу самой платформы.

Когда я начал реализовывать песочницу для своего проекта, я быстро понял, что это куда сложнее, чем кажется на первый взгляд. Я перепробовал разные подходы и убедился, что тема изоляции кода в браузере далека от очевидной, а большинство материалов в сети рассматривают её лишь поверхностно. Из моих исследований и экспериментов выросла эта статья — подробный разбор того, как устроены песочницы в браузере и какие архитектурные принципы и нюансы безопасности лежат в их основе.

Пора к части второй! У нас уже есть очень хорошие функциональные тултипы с позиционированием, но они в основном «смотрели» вверх или вниз и смещались у краёв, чтобы избежать выхода за границы. Теперь мы пойдём дальше и рассмотрим четыре позиции без смещений.

Кто я такой и с какой горы прибыл?

Зовут меня Юра и у меня немногим больше семи лет опыта разработки фронта на vue+typescript. Начал я, что забавно, с Angular 5 в далёком 2018, когда пятёрка ещё была актуальной версией, и работал с ним немногим больше пары месяцев, после чего перекатился во vue2.

Работал я исключительно в B2B и внутренней разработке. Системы документооборота, сервисдески и вот это вот всё. Благодаря этому я повидал разного. От DDD, до "паста-болоньезе-код".

На последних двух проектах я наступил в FSD. Методологию для организации кодовой базы выбирал не я, но я честно пытался в ней разобраться и как-то удобно организовать. К сожалению, оба раза код становился проблемой с высокой связностью, неочевидным размещением сущностей и сложно отслеживаемой системой взаимодействий компонентов кода.

При всём этом я наблюдал активный рост популярности FSD методологии в сообществе. Это натолкнуло меня на мысль о том, что я просто недостаточно разобрался, и тогда я начал копать. Смотреть, как же готовят FSD, сравнивать с известными мне архитектурными подходами. В этой статье я хочу поделиться выводами, к которым пришёл, и предложить решения, которые нашёл.

Устал от однообразных каруселей? В статье показываю, как шаг за шагом собрать 3D-таймлайн-слайдер с перспективной сеткой, плавной прокруткой и переключением категорий на чистом TypeScript и CSS.

История создания веб-приложения Syncory — платформы для поиска единомышленников по нишевым интересам. Подробный разбор архитектуры на Flutter Web + Firebase, реализация системы приватных комментариев и ролевой модели, а также пошаговое решение всех проблем с Google Sign-In на Flutter Web. Полный открытый исходный код и живое демо. Для разработчиков, которые хотят быстро запустить serverless веб-приложение без боли с инфраструктурой.