Что такое синтаксическая сложность?

Это мера, которая оценивает сложность структуры и конструкции кода. Она часто используется для оценки понятности, поддерживаемости и вероятности ошибок в программном коде. Одним из наиболее известных методов измерения синтаксической сложности является цикломатическая сложность, предложенная Томасом Маккейбом в 1976 году.

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

Как рассчитывается цикломатическая сложность
Цикломатическая сложность может быть рассчитана с помощью следующей формулы:

V(G) = E - N + 2P

Пример расчета цикломатической сложности

def example(a, b):
    if a > 0:
        if b > 0:
            return a + b
        else:
            return a - b
    else:
        return b

Цикломатическая сложность V(G) будет

V(G) = E - N + 2P
V(G) = 6 - 5 + 2*1
V(G) = 3

Почему синтаксическая сложность важна

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

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

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

Надежность
Программы с низкой сложностью, как правило, более надежны и менее подвержены ошибкам, так как легче понимать и тестировать все возможные сценарии.

Методы уменьшения синтаксической сложности

Рефакторинг
Разделение сложных функций на более простые и малые функции. Использование более простых и понятных конструкций.

- Удаление дублированного кода
- Использование комментариев и документации
- Применение паттернов проектирования:

👉 @seniorFront

iPad Spacial Graph

Свёрстано на HTML и SCSS. Логика переключения вкладок реализована в JS.

👉 @seniorFront

​Комментарии vs. самодокументируемый код: что выбрать?

Как сделать код понятным без лишних пояснений? Разбираемся!

Почему комментарии — не всегда спасение?
- Устаревают: код меняется, а комментарии забывают обновлять.
- Скрывают проблемы: вместо улучшения кода пишут пояснения.
- Теряют связь: со временем непонятно, к чему относится комментарий.

Что такое самодокументируемый код?
- Говорящие имена: переменные и функции сразу раскрывают суть.
- Мелкие функции: каждая решает одну задачу.
- Прозрачность: код читается как понятная инструкция.

Примеры

Было:

// Вычисляем стоимость заказа с налогами и скидкой  
function calculate(price, tax, discount) {  
  return price + (price * tax) - discount;  
}

Стало:

function calculateTotalOrderPrice(price, taxRate, discountAmount) {  
  return price + (price * taxRate) - discountAmount;  
}

Комментарий исчез — имена говорят сами за себя.

Было

// Проверяем, является ли число чётным  
if (number % 2 === 0) {  
  console.log("Чётное");  
}

Стало

function isEven(number) {  
  return number % 2 === 0;  
}

if (isEven(number)) {  
  console.log("Чётное");  
}

Логика ясна без комментариев.

Сложная логика?

Было

// Проверяем, если пользователь не заблокирован и подписка активна  
if (!user.isBlocked && user.subscription.isActive) {  
  sendNewsletter();  
}

Стало:

if (user.canReceiveNewsletter()) {  
  sendNewsletter();  
}

Советы из «Чистого кода»
Роберт Мартин: лучший комментарий — тот, которого нет.

- Используйте понятные имена.
- Разбивайте код на логичные функции.
- Делайте код прозрачным.

Когда комментарии нужны?
- Для объяснения «почему» (а не «что»).
- Для документации ограничений или техдолга.
- Как временное решение.

Итог
Хороший код — как хорошая книга: читается легко и понятно. Самодокументируемый код делает комментарии исключением.
Перед тем как писать //, подумайте: можно ли сделать код яснее? Обычно — можно!

👉 @seniorFront

Практические вопросы архитектуры ПО, из чего строить будем?

Вы знаете из чего и как строятся программы? Странно что ни в одной из статей о программной архитектуре вы не найдете упоминаний о том из чего эти программы строятся.

Я попробую изложить свое понимание, понимание профессионала с более чем 20-ти летним опытом построения, рефакторинга программ. Возможно я в чем-то, а может и совсем, буду не прав и ошибаюсь, но тогда в комментариях, а может и в новых статьях мы увидим откровения знающих профессионалов, которые разобьют в пух и прах мои рассуждения, то есть в любом случае должно быть интересно. Но, мне кажется, кто-то должен рискнуть начать рассуждать на эту тему.

👉 @seniorFront

Onboarding

Компонент онбординга, реализованный на Vue и стилизованный в SCSS.

👉 @seniorFront

Awesome Cursor Animation on Mousemove

В этом видео создается анимация при движении курсора на CSS и JS.

👉 @seniorFront

В разработке нельзя предугадать две вещи: сроки и сообразительность юзеров. Change my mind

👉 @seniorFront

Cloudy Spiral CSS animation

Оригинальная анимация загрузки, реализованная с использованием препроцессоров Haml и SCSS.

👉 @seniorFront

On/Off Toggle Switch

Переключатель, реализованный на React и стилизованный в SCSS.

👉 @seniorFront

CSS Creative Isometric Design

В этом видео создается 3D элемент на чистом CSS.

👉 @seniorFront

Infinite autoplay carousel

Бесконечная карусель, реализованная на HTML и SCSS.

👉 @seniorFront

Incrementer

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

Пример:
[1, 2, 4] --> [2, 4, 7]
#[1+1, 2+2, 4+3]

[4, 6, 9, 1, 3] --> [5, 8, 2, 5, 8]
# [4+1, 6+2, 9+3, 1+4, 3+5]
# 9+3 = 12 --> 2

👉 @seniorFront

Чистая архитектура фронтенд приложений

За свою карьеру я встречал достаточно много проектов, крупных и малых, которые страдали от огромной и запутанной кодовой базы с высоким уровнем зацепления и малой связностью, непонятной структурой, в которую весьма сложно погрузиться (на онбродинг нового сотрудника может уходить до трех месяцев) и большим количеством непонятных и громоздких компонентов, которые являются god object'ами. Стоит ли говорить, что у таких проектов имеются большие проблемы с поддержкой и развитием.

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

👉 @seniorFront

​Атрибут autofocus

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

Пример

<input name="name" autofocus>

Атрибут autofocus булевый: его присутствие означает true, а отсутствие — false. Чаще его применяют к интерактивным тегам, например, <input>, <button>, <select>, <textarea>.

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

Обратите внимание, что автофокус не будет применён к элементам <input> с типом hidden, потому что скрытые поля не могут получать фокус.

Следует также помнить, что использование этого атрибута может ухудшить пользовательский опыт. На мобильных устройствах автофокус вызовет клавиатуру, которая перекроет часть содержимого, что может сбить пользователя с толку и вызвать раздражение. Если элемент с автофокусом расположен не в начале страницы, произойдёт автоматическая прокрутка к нему, из-за чего пользователь может потерять контекст.

👉 @seniorFront

Exploring UI Animation

Свёрстано на HTML и SCSS. Логика работы реализована в JS. Анимировано библиотекой TweenMax.

👉 @seniorFront

​Что творится с работой в IT в 2025?

Пару лет назад в компании выстраивались в очередь за кадрами, а рекрутеры искали сотрудников даже в сервисах знакомств. Сейчас страсти поутихли. Высокие ставки ЦБ заставили компании пересмотреть аппетиты: бизнес начал считать каждую копейку, реолаканты вернулись, новичков без опыта после курсов прибавилось. И как же изменения повлияли на рынок?

- Рост зп замедлился — новичкам теперь не светит прибавка, а в некоторых местах вилки и вовсе урезали.
- Джунам теперь нужен опыт — если раньше хватало теоретических знаний, сейчас требуют, чтобы ты уже поработал на реальных проектах.
- Плюшки порезали — бесплатные обеды, спортзалы и психологи теперь только в крупных компаниях, но и за эти привилегии еще нужно побороться.
- Глобальные сокращения — ИИ составляет конкуренцию действующим спецам, больше не нужна команда из 10 человек, достаточно 2-3, которые направляют новые технологии.

Но кадров всё равно не хватает!
На новые проекты собирают ресурсы из переполненных команд и не набирают новых сотрудников. Только теперь нужны не просто «айтишники», а профи в узких областях. Например, в защите данных нехватка — 20%, а в разработке под отечественные ПО для госструктур— 30%. Компании перестали брать «наугад» — нужен человек, который быстро подхватит все задачи.

А что с зарплатами и мировыми трендами?
- Мидлы в минусе — их зарплаты ниже, чем пару лет назад.
- Сеньоры выжимают максимум из бонусов — фиксированные ставки почти не растут.
- Джуны в тисках конкуренции — на одну вакансию приходится 200+ откликов (раньше было 20-30).

В мире тоже не сладко: Amazon, Microsoft и другие гиганты уволили десятки тысяч сотрудников. В России же проблема другая — катастрофически не хватает тех, кто разбирается в нашем софте (российские ОС, базы данных).

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

👉 @seniorFront

Скетч системного дизайна: как одна схема решает множество проблем на старте проекта

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

👉 @seniorFront

Flipping Parallax Card

Создано и анимировано с использованием препроцессоров Pug и Stylus. Логика переключения типа анимации реализована в JS.

👉 @seniorFront

Border Animation Effects

В этом видео создаётся анимированная граница блока на HTML и CSS.

👉 @seniorFront

Тебя вообще кто-то спрашивал?

👉 @seniorFront