Фронтенд

Где учиться фронтенду

Привет! Мы на Хабр Карьере собираем сотни онлайн-курсов в IT или digital на маркетплейсе курсов и каждую неделю делаем подборки обучений для тех, кто хочет учиться какой-то специализации с нуля или для тех, кто уже в профессии, но чувствует, что хочет прокачать навыки.

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

— HTML/CSS

Разметка и стилизация веб-страниц. HTML задаёт структуру, CSS отвечает за внешний вид, адаптивность и анимации.

— JavaScript

Язык для добавления интерактивности на веб-страницах. Используется в браузере и на сервере (через Node.js), лежит в основе большинства фронтенд-фреймворков.

— Git

Система контроля версий. Позволяет отслеживать изменения в коде, работать в команде и управлять ветками разработки.

— React

JavaScript-библиотека для создания UI. Использует компонентный подход и виртуальный DOM. Разрабатывается Facebook.

— Angular

Фреймворк от Google для построения SPA. Включает собственную архитектуру, TypeScript, DI, роутинг и инструменты для тестирования.

— Vue.js

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

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

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

→ Смотреть курсы по всем специализациям

minimal vscode: открываем окна

Нет, не от духоты, ее в видео как раз не будет 🌚️️️️
Видео короткое, динамичное, практичное.

Перед тем как учиться пользоваться vscode, необходимо:

1. Её поставить

2. Научиться её открывать

3. Располагать её на рабочем пространстве

Мой конфиг: https://github.com/sobolevn/dotfiles

В видео поговорили про: hotkey managers, тайлы, всякие красивости для macos.

Менеджеры горячих клавиш:

• jumpapp для Linux: https://github.com/mkropat/jumpapp и https://linux.die.net/man/1/wmctrl

• AutoHotkey для Windows: https://autohotkey.com

• whkd для Windows: https://github.com/LGUG2Z/whkd

• skhd для macos: https://github.com/koekeishiya/skhd

• skhd-zig для macos: https://github.com/jackielii/skhd.zig

Тайловые менеджеры:

• macos: https://github.com/rxhanson/Rectangle мой конфиг: https://github.com/sobolevn/dotfiles/blob/master/config/RectangleConfig.json

• macos более продвинутая альтернатива: https://github.com/ianyh/Amethyst

• самая продвинутая альтернатива для macos: https://github.com/koekeishiya/yabai

• Windows: https://github.com/LGUG2Z/komorebi

• Linux: ТЫСЯЧИ ИХ

Полезности:

• Top Notch для macos: https://topnotch.app

• HazeOver для macos: https://hazeover.com/ru

• Brewfile: https://docs.brew.sh/Brew-Bundle-and-Brewfile мой конфиг: https://github.com/sobolevn/dotfiles/blob/master/Brewfile

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

Сравнение производительности React-компонентов: Gravity UI vs другие библиотеки

Я core‑разработчик Gravity UI, и периодически нам в команду поступают вопросы про производительность react‑компонентов из нашей библиотеки @gravity‑ui/uikit. Я решил сделать небольшое исследование этого вопроса, и всё написанное ниже является отправной точкой для дальнейших исследований и попыткой ответа на вопрос «Почему Gravity тормозит?»

Обычно этот запрос пишут без дополнительных деталей, поэтому я исхожу из предположения, что одна (но, конечно же, не единственная) из основных проблем производительности — долгое время отрисовки. В рамках этого исследования мы рассмотрели затраты на первый рендеринг отдельных компонент каждой из библиотек в изолированной среде. Для сравнения были выбраны библиотеки @adobe/react‑spectrum, @mui/material и antd.

Методология исследования

Технический стек:

• Playwright — фреймворк для автоматизации тестирования кода в разных браузерах (подробнее).

• PerformanceObserver API — браузерный API для измерения производительности (подробнее).

Условия выполнения тестов:

• Каждый тест запускается в отдельном контексте браузера.

• Единовременно выполняется только один тест (настройка workers в конфиге Playwright), что гарантирует выделение одинакового количества ресурсов на каждый тест.

• Каждый тест повторяется 50 раз.

• Тесты проводятся с разным количеством нод (10, 100, 1000).

Порядок выполнения одного теста:

1. Открытие новой страницы в браузере.

2. Инициализация PerformanceObserver.

3. Начало сбора метрик.

4. Рендеринг компонентов.

5. Завершение сбора метрик.

Процесс измерения:

В начале каждого теста создаётся PerformanceObserver, который отслеживает события типа 'measure'. Все собранные метрики сохраняются в глобальном объекте __PERFORMANCE_METRICS__. Observer автоматически собирает данные о времени выполнения операций, включая название метрики, тип события, время начала и продолжительность. С помощью события measure мы логируем наше измерение total‑render‑time.

Результаты

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

1. @gravity‑ui/uikit показывает конкурентоспособные результаты:

   • В большинстве тестов находится в верхней части рейтинга.

   • Демонстрирует стабильное время рендеринга при разном количестве нод.

   • Особенно эффективен в компонентах Button, Checkbox и Switch.

   • Имеет проблемы со временем рендера компонента TextArea.

2. @mui/material также показывает хорошие результаты:

   • Лидирует почти во всех категориях (например, Text, Label) на небольшом количестве нод.

   • Имеет видимый рост времени рендера в зависимости от количества нод.

3. antd и React Spectrum:

   • Показывают более высокое время рендеринга в большинстве тестов.

   • Имеют больший разброс между минимальным и максимальным временем.

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

В этой статье я раскрыл один из примеров, как мы работаем с библиотекой. Но нам очень важна обратная связь от сообщества: если у вас есть конкретный пример, где Gravity UI показывает себя сильно хуже других библиотек, или если вы видите ошибку в нашей методологии тестирования, приходите в комментарии к этому посту или создавайте issue, обсудим. А также не забывайте ставить звёздочки проекту!

Обновлена информационная база JBook по изучению Java полностью на русском языке. Проект помогает выучить язык с полного нуля и до уровня поиска работы, включая концепции, приёмы, актуальные фреймворки, ООП, основные алгоритмы, паттерны решения задач и видеоразборы. Есть множество упражнений разного уровня сложности к каждой лекции. Проект развивается с 2018 года и постоянно обновляется вместе с версиями Java, документацией и новыми подходами к разработке.

Как скрыть Webvisor от Яндекс.Метрики во вкладке "Сеть" в DevTools

При отладке фронтенда или анализе сетевых запросов в DevTools часто возникает проблема: запросы к mc.yandex.ru (Webvisor) загромождают вкладку «Сеть» и мешают сосредоточиться на действительно нужных данных. Особенно если на странице активно работает Яндекс.Метрика с включённым Webvisor.

Хорошая новость: эти запросы легко отфильтровать или полностью заблокировать. Делюсь несколькими способами, как это сделать.

Этот способ касается и других типов запросов, мне лично мешают запросы от mc.yandex.ru.

Способ 1. Фильтрация через DevTools (Network)

Если не хочется ничего ломать, просто исключите Webvisor из отображения:

1. Откройте DevTools (F12 или Ctrl+Shift+I / Cmd+Option+I).

2. Перейдите на вкладку Network (Сеть).

3. В строке фильтра введите: -mc.yandex.ru

Способ 2. Полная блокировка через Request Blocking

Если вы не хотите, чтобы эти запросы вообще происходили:

1. Откройте DevTools.

2. Нажмите на три точки в правом верхнем углу панели → More tools (Другие инструменты) → Network request blocking (Блокировка сетевых запросов).

3. В появившемся окне добавьте правило: *mc.yandex.ru*

4. Включите галочку Enable request blocking.

Теперь DevTools будет блокировать запросы к Webvisor ещё до их отправки.

Способ 3. Расширения браузера (например, uBlock Origin)

Для более глобального решения можно использовать расширения:

1. Установите uBlock Origin.

2. В настройках фильтров добавьте правило: ||mc.yandex.ru^

Теперь все запросы к mc.yandex.ru будут блокироваться на уровне браузера.

Заключение

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

Если у вас есть свои хаки по "чистке" вкладки Network — делитесь в комментариях 👇

Выводим Соера на чистую воду разбирая дискуссию с ним про принципы SOLID

Топ перлов

• Если ты манки-патчишь объекты, то ты функциональщик.

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

• Если люди по разному воспринимают принцип - это здорово, ведь он подталкивает людей к размышлению.

• SOLID позволяет легче (т.е. не задумываясь) принимать не идеальные (т.е. сомнительные) решения.

Упомянутые материалы

• Деконструкция SOLID

• Систематизация вариантности типов

• Инверсия контроля на голом Инверсия контроля на голом TypeScript без боли

Копилка благодарностей

⚙️ Настройка разных пользователей Git для разных проектов

В домашней директории есть три папки:

- ~/ProjectHome/
- ~/ProjectWork/
- ~/ProjectOther/

В каждой нужно работать от своего пользователя:

- userHome
- userWork
- userOther

Чтобы работать в каждом проекте без дополнительных переключений, нужно сделать следующее:
1. Добавить настройки в .gitconfig

Откройте файл ~/.gitconfig и добавьте в него:

[includeIf "gitdir:~/ProjectHome/"]
path = ~/.gitconfig-home
[includeIf "gitdir:~/ProjectWork/"]
path = ~/.gitconfig-work
[includeIf "gitdir:~/ProjectOther/"]
path = ~/.gitconfig-other

2. Создать отдельные конфиги для каждого пользователя
Создайте в домашней директории три файла:

- ~/.gitconfig-home
- ~/.gitconfig-work
- ~/.gitconfig-other

3. Прописать пользователя и SSH-ключ в каждом конфиге
Пример содержимого для ~/.gitconfig-home:

[user]
name = userHome
email =userHome@mail.ru
[core]
sshCommand = "ssh -i ~/.ssh/id_userHome_ed25519"

Аналогично создайте .gitconfig-work и .gitconfig-other, указав соответствующего пользователя, почту и путь к ключу.

⚠️ При этом из основного .gitconfig нужно удалить секции [user] и [core.sshCommand], чтобы не было конфликтов.

4. Указать правильный remote для каждого проекта в своей папке

Для проектов в ~/ProjectHome/:
git remote set-url origin git@github.com:userHome/ProjectHome.git

Для проектов в ~/ProjectWork/:
git remote set-url origin git@github.com:userWork/ProjectWork.git

Для проектов в ~/ProjectOther/:
git remote set-url origin git@github.com:userOther/ProjectOther.git


💡 ProjectHome.git, ProjectWork.git, ProjectOther.git - это просто примеры названий репозиториев, они могут быть любыми.

📌 Важно: эти команды нужно выполнять для каждого проекта отдельно, а не один раз для всей папки.

5. Разместить SSH-ключи

В директории ~/.ssh/ должны находиться три приватных ключа, которые вы сгенерировали для каждого пользователя.

Например:
- id_userHome_ed25519
- id_userWork_ed25519
- id_userOther_ed25519

Убедитесь, что имя ключа соответствует указанному в параметре sshCommand внутри соответствующего .gitconfig-*

✅ Результат

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

Можно добавить и больше папок с пользователями - принцип остаётся тем же.

Добавлю еще вариант, подходит для Gitlab:
https://qna.habr.com/q/1400592

Меня давно стал мучать вопрос, почему на разных Freelance платформах возникают странные заказы на разработку сайта, но с припиской "Студиям не писать".

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

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

Так в чем же может быть секрет такой не любви?

Я могу предположить, что однажды столкнувшись с некачественно оказанной услугой, может пропасть желание обращаться в студии для выполнения заказа, но мне что то подсказывает, что за суммой заказа прячется крайне капризный заказчик, который и сам не понимает что он хочет и ТЗ не в состоянии самостоятельно подготовить, при этом горят сроки, надо сделать сейчас и максимально качественно.

Очень хочу увидеть ваши комментарии объясняющие такое поведение.

Приглашаем на бесплатный вебинар «Эффективное использование RxJS в Angular: шаблоны, подходы, лучшие практики».

📅 Дата: 15.07.2025

⏰ Время: 17:00-18:00 (Мск)

Этот семинар углубит ваши знания в RxJS и Angular. Вы изучите, как организовать потоки данных, управлять подписками, избегать утечек памяти и эффективно настроить change detection. Мы рассмотрим полезные RxJS-операторы, частые ошибки и лучшие практики. Обсудим, как выстраивать архитектуру на основе RxJS, использовать AsyncPipe и делить компоненты на умные и глупые.

На вебинаре:

✔️ Как устроен RxJS под капотом.

✔️ Проблемы RxJS в реальных приложениях.

✔️ Tестирование потоков.

✔️ Лучшие практики и архитектурные паттерны.

✔️ Работа с операторами.

✔️ Работа с данными в реальном времени.

✔️ Кастомные операторы.

✍️Записаться

🔮 14 день делаю Конструктор форм в режиме Build in public

Добавил ИИ-магии в наш конструктор форм!

Честно говоря, я сам офигел от того, что получилось закодить!

Можно создавать красивые и удобные формы буквально за секунды с помощью ИИ. Достаточно просто написать запрос, например:

«Сделай форму регистрации на мероприятие»

или

«Сделай форму для заявок на консультацию психолога»

- и всё! Форма генерируется автоматически, остаётся только немного поправить и подогнать под себя.

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

🤔 Как вам такая магия? Пора уже слезать с Гугл Форм? планирую релиз уже в Августе!

🚀 День 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[],
    ),
  );

1. scan – калькулятор + хранитель состояния для offset:

   • Управляет состоянием загрузки (текущее смещение)

   • Начинается с -batchSize, чтобы первая загрузка была с 0

   • Увеличивает смещение на batchSize при каждом срабатывании

2. 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. Больше про разработку я пишу в своем канале Организованное Программирование