​Анатомия техдолга. Излечим ли пациент?

Почти все ИТ-компании имеют технический долг, но не у каждой есть с ним сложности. Где же эта тонкая грань?

Данный вопрос становится проблемой, когда он либо бесконтрольный, либо проценты уже слишком высоки. «Долговая яма» очень сильно влияет на вовлеченность команды, особенно в случаях, когда данный код достается «в наследство». Сопровождение такого кода становится тяжелой, а иногда и невыполнимой задачей. Отсюда вытекают негативные последствия:

- Большие временные затраты
- Сложность внедрения новыx фич, которые могут увеличить сам долг.
- Снижение мотивации команды и общей комфортной среды внутри.
- Выгорание и отсутствие интереса.

Один из основных способов решения – рефакторинг кода (контролируемый процесс улучшения кода или процесса старой кодовой базы без внесения в него новых возможностей).

Существуют и другие способы уменьшения долга:
- Стабильная реструктуризация и рефакторинг – создание небольших задач на оптимизацию, выделение времени в процессе доработок и внесение нового функционала.
- Приоритетность – вытекает из прошлого пункта. Если затраты времени неимоверно высоки, то в приоритете исправить ситуацию, нежели добавить новых фишек и, тем самым, увеличить %.
- Внедрение ревью (желательно многоступенчатого), стандартов написания и стиля кода, развитие команды и совместное обсуждение, встречи. Внедрение систем автоматической проверки кода.
- Разработка ТД, схем процессов, данных и архитектуры в целом. Помогает выявить проблемы на основе визуализированных и технических данных. Отличный вариант – проектирование полного бизнес-процесса на этапе создания функционала поможет избежать проблем в будущем при определённом уровне команды, поддержка актуальности документации позволит «новичкам» (не только уровень программирования, но и просто новая команда или сотрудник) вникнуть в процесс быстрее и проще. Но данный способ является больше утопией в современной разработке, чем повседневностью.

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

👉 @seniorFront

Отделяй и делегируй или Как безболезненно разгрузить менеджера

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

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

👉 @seniorFront

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

Но можно написать свою, или стилизовать готовую. В статье разработчик интерфейсов Яндекс Про рассказывает про плюсы и минусы каждого подхода. 

А какое решение выбрала команда Про, читайте по ссылке: dev.go.yandex

Share & Social Semicircles

Свёрстано и анимировано с использованием возможностей препроцессоров Haml и SCSS.

👉 @seniorFront

CSS & JS Background Animation Effects

В этом видео создаётся CSS анимация, которая запускается при событии 'mousemove'.

👉 @seniorFront

Только вчера же отпуск взял

👉 @seniorFront

Pop Up / Overlay

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

👉 @seniorFront

all CSS

Реализовано без использования JS. Свёрстано и анимировано при помощи препроцессоров Pug и SCSS.

👉 @seniorFront

CSS SVG Neon Loader Animation Effects

В этом видео создается с нуля SVG картинка-загрузчик, анимированная в CSS.

👉 @seniorFront

Станьте AI-разработчиком на Python и зарабатывайте от 150.000₽ в месяц 🔥🔥🔥

Мы научим вас создавать и тренировать нейронные сети, и вы сможете:

1️⃣ Устроиться разработчиком в крупную компанию и зарабатывать от 150 тыс. ₽ в месяц
2️⃣ Разрабатывать такие проекты на заказ и зарабатывать от 500 тыс. ₽ за проект
3️⃣ Создать нейро-сотрудника в вашей компании и вырасти на +30-100% в зарплате

На интенсиве будет много практики: создадим 9 нейросетей за 1 вечер:

🧬 Оценка выброса CO2 по параметрам машины
🧬 Сегментация изображения для робота доставщика
🧬 Трекинг людей на видео
🧬 Распознавание речи
и другие

Ведущий интенсива - Senior AI-разработчик и основатель Университета искусственного интеллекта

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

Scroll Based Animation

Логика запуска анимаций при прокрутке реализована в JS.

👉 @seniorFront

Numbers of Letters of Numbers

Если мы запишем цифры «60» как английские слова, то получим «sixzero»; количество букв в «sixzero» равно семи. Количество букв в слове «seven» — пять. Количество букв в слове «five» — четыре. Количество букв в слове «four» — четыре: мы достигли устойчивого равновесия.

Создайте функцию, которая проведет все эти преобразования и вернет их в массиве.

Примеры:

numbersOfLetters(60) --> ["sixzero", "seven", "five", "four"]
numbersOfLetters(1) --> ["one", "three", "five", "four"]

👉 @seniorFront

Оптимизация производительности Vue.js приложений: Практическое руководство

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

👉 @seniorFront

​Что такое Virtual DOM?

Virtual DOM (виртуальный Document Object Model) - это концепция, широко используемая в разработке интерфейсов, особенно в библиотеке React от Facebook, а также в других современных фронтенд-фреймворках. DOM - это структура данных, используемая браузерами для представления веб-страниц. Она позволяет программам изменять структуру, стиль и содержание веб-страницы, взаимодействуя с HTML и CSS. Проблема обычного DOM заключается в том, что он может быть довольно медленным при частых обновлениях, поскольку изменения в нем приводят к перерисовке элементов страницы, что может быть ресурсоёмким процессом.

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

Пример без Virtual DOM:

const element = document.getElementById('myElement');
element.textContent = 'Новый текст';

В этом случае каждое изменение непосредственно обновляет DOM, что может быть неэффективно при множественных обновлениях.

Пример с использованием Virtual DOM (пример на React):

class MyComponent extends React.Component {
  render() {
    return <div>Новый текст</div>;
  }
}
```

В этом случае, при изменении состояния компонента, React сначала применяет изменения к виртуальному DOM, а затем, используя согласование, оптимально обновляет реальный.

Виртуальный Document Object Model позволяет писать код, как если бы можно было менять любую часть веб-страницы в любой момент, не беспокоясь о производительности. Это делает разработку интерфейсов более интуитивно понятной и эффективной.

👉 @seniorFront

Swipeable Video Cards

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

👉 @seniorFront

​Почему брейнштормы бесполезны

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

Метод брейншторма был разработан Алексом Осборном в 40-х годах именно для создания прорывных идей, что же пошло не так? Дело не в самой механике, а в том какие ошибки допускают при её использовании. Приведу самые распространенные недочеты, которые вижу на практике чаще всего.

Придумывание идей в группе
Типичная картина для крупной организации: приглашают 20-30 человек, чтобы охватить как можно больше мнений и компетенций, всех участников распределяют по командам. Группы отбирают лучшие идеи и презентуют их друг другу. Зачастую результаты у команд похожие или одинаковые, а реально в брейншторме участвуют 5, в лучшем случае 10 человек. Сьюзан Кейн в своей книге «Сила интровертов в непрерывно болтающем мире» приводит несколько причин такой ситуации:

- Социальная леность: человек в группе прилагает меньше усилий, чем при индивидуальной работе, так как считает свой вклад менее важным
- Снижение продуктивности, Production Blocking: пока самые ассертивные участники группы говорят о своих решениях, другие слушают их, вместо придумывания своих идей
- Социальное давление, Evaluation apprehension: люди боятся выглядеть глупо в глазах других и предпочитают умолчать рискованные и смелые идеи
- Регрессия к среднему: самые талантливые участники перформят на среднем уровне группы

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

Плохая модерация
Даже волшебный компас не работал, когда капитан Джек Воробей не знал, куда хочет попасть. Модератор должен обладать экспертизой в области задачи, которую решает заказчик брейншторма, в идеале он и проводит мероприятие. Также организатор должен быть в контексте особенностей команды брейншторма: «забирать микрофон» у самых громких и подбадривать тихонь. Эффективность будет значительно выше, если модератор понимает, для чего проводит встречу и как именно будет использованы ее результаты, где расставить акценты и к чему мотивировать группу.

👉 @seniorFront

В помощь разработчику: 6 полезных библиотек визуализации данных

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

👉 @seniorFront

Volume Control

Оба элемента сцены - это SVG картинки, анимированные в JS.

👉 @seniorFront

Parallax Text Effects

В этом видео реализуется параллакс эффект для текста. Поворот реализован при помощи CSS transform: skew(). Движение текста привязано к курсору при помощи события mousemove.

👉 @seniorFront