Sum of two lowest positive integers

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

Например, когда массив передается как [19, 5, 42, 2, 77] вывод должен быть 7.

👉 @seniorFront

Как спасти проект, если нашли баги перед релизом

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

👉 @seniorFront

Как отследить изменение поля объекта?

Чтобы отслеживать изменения свойств объекта в JavaScript, можно использовать несколько методов, каждый из которых подходит для различных случаев.

Использование Proxy
Proxy является мощным и гибким способом перехвата и настройки операций с объектами, включая чтение и запись свойств.

const handler = {
    get(target, property) {
        console.log(`Getting value of ${property}`);
        return target[property];
    },
    set(target, property, value) {
        console.log(`Setting value of ${property} to ${value}`);
        target[property] = value;
        return true;
    }
};
const person = {
    name: 'Alice',
    age: 25
};
const proxyPerson = new Proxy(person, handler);
proxyPerson.name = 'Bob'; // Setting value of name to Bob
console.log(proxyPerson.name); // Getting value of name // Bob

Использование Object.defineProperty
Object.defineProperty позволяет определить новое или изменить существующее свойство непосредственно на объекте, позволяя добавить геттеры и сеттеры для отслеживания изменений.

const person = {
    _name: 'Alice',
    _age: 25
};
Object.defineProperty(person, 'name', {
    get() {
        console.log('Getting name');
        return this._name;
    },
    set(value) {
        console.log(`Setting name to ${value}`);
        this._name = value;
    }
});
Object.defineProperty(person, 'age', {
    get() {
        console.log('Getting age');
        return this._age;
    },
    set(value) {
        console.log(`Setting age to ${value}`);
        this._age = value;
    }
});
person.name = 'Bob'; // Setting name to Bob
console.log(person.name); // Getting name // Bob
person.age = 30; // Setting age to 30
console.log(person.age); // Getting age // 30

Использование библиотеки MobX
MobX — это библиотека для управления состоянием, которая делает состояния наблюдаемыми и автоматически синхронизирует их с пользовательским интерфейсом.

import { observable, autorun } from 'mobx';
const person = observable({
    name: 'Alice',
    age: 25,
    setName(name) {
        this.name = name;
    },
    setAge(age) {
        this.age = age;
    }
});
// Автоматически вызываемая функция при изменении наблюдаемого состояния
autorun(() => {
    console.log(`Name: ${person.name}, Age: ${person.age}`);
});
person.setName('Bob'); // Name: Bob, Age: 25
person.setAge(30); // Name: Bob, Age: 30

Наблюдатель на изменение (MutationObserver)
Для отслеживания изменений в DOM можно использовать MutationObserver. Это не напрямую связано с объектами, но полезно для отслеживания изменений в элементах DOM.

const targetNode = document.getElementById('target');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
targetNode.setAttribute('data-test', 'value');

👉 @seniorFront

Responsive Parallax Drag-slide

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

👉 @seniorFront

​Мы — не семья

Когда устраиваешься в компанию, тебе обещают интересные задачи, рост и нормальный график. Но потом приходит письмо: «Мы — как семья, у нас общие ценности, мы делаем великое дело». Ты улыбаешься, думаешь: «Ладно, семья так семья». А потом — зарплату не повышают, потому что «недостаточно восхитительных отзывов», а коллегу и вовсе увольняют за «несоответствие». Разве с семьёй так поступают?

Ценности — это маркетинг
Корпоративные ценности — не душа компании, а инструмент. «Открытость», «смелость», «инновационность» — красивые слова, которые придумывают маркетологи и HR, чтобы оправдать низкие зарплаты «великой миссией». Это не скрепы, а лендинг для сотрудников.

Как появляются ценности
В стартапе на этапе MVP никто не думает о «миссии». Команда живёт кодом и кофе. Но когда людей становится больше, появляется хаос. Тогда HR говорит: «Нужны ценности, чтобы все были на одной волне». Так рождается неофициальная конституция компании.

Почему это работает
Человек хочет быть частью группы. Назови его «братом» — и мозг решит, что это безопасно. Особенно если ты на удалёнке и тимлид ближе, чем родные. Хочется верить, что работа — это «дело жизни», а не просто зарплата. И вот ты уже читаешь конфлюенс как Библию.

Но это становится давлением
Ценности превращаются в рычаг: задержись, потому что «мы же команда»; чувствуй вину, если закрыл ноут в 18:00; переживай за дедлайн, как за свою жизнь. Ты сам соглашаешься, хотя тебя никто не заставляет.

Заражённые ценностями
Появляются «евангелисты» — люди, которые цитируют конфлюенс и верят, что компания — это нечто большее. Они не понимают, почему ты не хочешь «погрузиться на выходных». Такие часто становятся менеджерами, для которых ценности — религия.

Что делать

- Не очаровываться. Компания — не семья, а сделка. Ты — профессионал, делающий нужную работу.
- Иметь свои ценности. Уважай команду, но не принимай слоганы как догму.
- Не бояться быть «не своим». Не всем нужны тимбилдинги и йога. Можно просто хорошо работать.

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

👉 @seniorFront

Как мы внедрили единый шаблон тикетов для разработчиков и упростили работу команды

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

👉 @seniorFront

Banksy Shredder

Реализовано на Vue и стилизовано в CSS. Есть возможность добавлять свою картинку через input type="file".

👉 @seniorFront

Scroll Animation Effects for Website

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

👉 @seniorFront

Сеньор уходит в отпуск

👉 @seniorFront

Dynamic Image Colorizing

Реализовано без использования JS. Вся сцена - это стилизованный input type="color".

👉 @seniorFront

Не пропустите! 23 июля в 20:00 пройдет бесплатный урок по теме "Зачем JavaScript-разработчику понимать бэкенд? От fetch до Node.js".

Запись: https://gclnk.com/rKZqUUMf

Что будет на вебинаре?

- Как устроено взаимодействие фронтенда с сервером: API, запросы, заголовки, ответы.
- Почему поверхностные знания API тормозят рост и усложняют задачи.
- Что нужно знать о Node.js и серверной части, даже если вы не fullstack.
- Как уверенное понимание архитектуры влияет на производительность и автономность.
- Почему знание бэкенда усиливает вашу позицию на проекте и на рынке.

Что узнают участники?

- Как работает связка клиент–сервер: от запроса до ответа.
- Какие ошибки делают фронтендеры при работе с API — и как их избегать.
- Как знание Node.js помогает даже тем, кто пишет только клиентскую часть.
- Почему современный разработчик не может быть “только фронтом”.
- Как это знание влияет на скорость разработки.

Не забудьте записаться на урок и получить запись пред. вебинара: https://gclnk.com/rKZqUUMf

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru Erid 2SDnjdhd9Kt

Elastic SVG Sidebar Material Design

Sidebar - это SVG картинка, анимируемая в JS.

👉 @seniorFront

Animated Number Counter Preloader

В этом видео создаётся анимированная полоса загрузки на CSS и чистом JS.

👉 @seniorFront

Fancy Slider

Функционал слайдера реализован в JS. Стилизовано в SCSS.

👉 @seniorFront

Counting Duplicates

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

Пример:

"abcde" -> 0 # no characters repeats more than once
"aabbcde" -> 2 # 'a' and 'b'
"aabBcde" -> 2 # 'a' occurs twice and 'b' twice (`b` and `B`)
"indivisibility" -> 1 # 'i' occurs six times
"Indivisibilities" -> 2 # 'i' occurs seven times and 's' occurs twice
"aA11" -> 2 # 'a' and '1'
"ABBA" -> 2 # 'A' and 'B' each occur twice

👉 @seniorFront

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

Разработчик решает задачи, архитектор - строит будущее.Если ты ещё думаешь, что архитектура начинается с UML-диаграмм - ты опоздал. Она начинается в момент, когда каждый if, костыль и интеграция начинает звучать в голове как долгосрочный риск. Эта статья - о точке, после которой невозможно писать код, не думая о его последствиях. О системном мышлении. О боли, которую мы закладываем в систему своими решениями. И о том, как остановить это.

👉 @seniorFront

Как с помощью JS можно переходить вперед/назад по истории браузера?

В JavaScript можно перемещаться вперед и назад по истории браузера с помощью объекта window.history.

Использование `history.back()` и `history.forward()`
Эти методы аналогичны кнопкам "Назад" и "Вперед" в браузере.

history.back();    // Перемещение на одну страницу назад
history.forward(); // Перемещение на одну страницу вперед

Пример кнопок "Назад" и "Вперед"

<button onclick="history.back()">⬅️ Назад</button>
<button onclick="history.forward()">Вперед ➡️</button>

Использование `history.go(n)`
Этот метод позволяет перемещаться на определенное количество шагов:
history.go(-1) – назад на 1 страницу
history.go(1) – вперед на 1 страницу
history.go(-2) – назад на 2 страницы

history.go(-2); // Перейти на две страницы назад
history.go(3);  // Перейти на три страницы вперед

Получение длины истории `history.length`
Если нужно узнать, сколько страниц в истории текущей сессии:

console.log(history.length); // Количество записей в истории

Манипуляции с историей: `pushState()` и `replaceState()`
Если нужно изменить URL без перезагрузки страницы, можно использовать:
history.pushState(state, title, url)
Добавляет новый URL в историю (как будто пользователь перешел по ссылке).

history.pushState({ page: 1 }, "Title 1", "/page1");

history.replaceState(state, title, url)
Заменяет текущий URL (не добавляет новую запись в историю).

history.replaceState({ page: 2 }, "Title 2", "/page2");

Пример динамического изменения истории:

document.querySelector("button").addEventListener("click", () => {
  history.pushState({ page: "about" }, "About Page", "/about");
});

Отслеживание изменений истории `popstate`
Когда пользователь нажимает "Назад" или "Вперед", можно реагировать с помощью события popstate

window.addEventListener("popstate", (event) => {
  console.log("Текущий state:", event.state);
});

👉 @seniorFront

Card Pagination

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

👉 @seniorFront

​Сказание о стратегических паттернах DDD: как укротить сложность в IT-проектах

Сложность — главный враг разработчиков. Она растёт, сроки срываются, а в команде появляется «Василий» — человек, который один понимает, как всё работает. Знакомо? Domain-Driven Design (DDD) помогает справиться с этим хаосом. Рассказываем, как стратегические паттерны DDD спасают проекты!

Сложность — неизбежный вызов
Человеческий мозг ограничен (правило 7±2), а задачи в IT сложны. DDD предлагает бороться с этим через абстрагирование, командную работу и разбиение задач.

Команды и их пределы
Эффективная команда — 5–7 человек с доверием и чёткими ролями. Больше? Получите аморфный коллектив. Межкомандное взаимодействие — дорого и медленно. Кроссфункциональные команды — ваш шанс на успех.

Симптомы беды
Растут сроки, множатся ошибки, регресс зашкаливает, а «Василий» держит проект в голове? Это когнитивная перегрузка. Без управления сложностью проект обречён.

DDD как Одиссей
Как Одиссей между Сциллой и Харибдой, DDD помогает найти баланс:

- Onion Architecture: отделяет устойчивую доменную логику от изменчивой бизнес-логики.
- Поддомены и bounded contexts: разбивают задачу на части, снижая сложность и зависимости.
- Единый язык: выравнивает термины в коде, диаграммах и обсуждениях, связывая модель с реальностью.

Микросервисы и поддомены
Логическое разделение (bounded contexts) должно быть физическим (микросервисы). Иначе — привет, распределённый монолит!

Типы поддоменов

- Core: сердце проекта, для лучших команд.
- Generic: типовые задачи (CRM, платежи).
- Supporting: вспомогательные функции.
Распределяйте их по командам с учётом их профессионализма.

Единый язык — ваш маяк
Используйте одинаковые термины в коде, обсуждениях и с экспертами. Заметили расхождение? Переделывайте модель. Это больно, но иначе технический долг вас похоронит.

Вывод: DDD — не карго-культ, а практичный подход к борьбе со сложностью. Без стратегических паттернов тактические (Repository, Aggregate) — пустая трата времени. Хотите устойчивую систему? Стройте её на фундаменте предметной области!

👉 @seniorFront

Сравнение методологий продуктовой разработки и фреймворков бизнес моделей

На недавнем собеседовании мне задали, казалось бы, простой вопрос:
«Какими методологиями продуктовой разработки вы пользуетесь?»
Для позиции CPO он звучит почти буднично — но я задумалась. Действительно: как мы, продакты, выбираем метод, по которому пойдёт разработка? Ведь с учётом метрик вроде Time to Market и стоимости реализации — это не просто выбор инструмента, а стратегическое управленческое решение. Оно напрямую влияет на скорость, ошибки и качество вывода продукта на рынок. И, что критично, принимает его обычно один человек — продакт которому доверили реализацию этой задачи. Его опыт, насмотренность и управленческая смелость определяют, пойдёт ли команда по проторенной дорожке или найдёт способ сделать быстрее, дешевле и лучше.

👉 @seniorFront