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

Mouse balls animation

Частицы генерируются в JS и стилизуются в SCSS.

👉 @seniorFront

Responsive Image Slider

В этом видео создается карусель картинок на HTML, CSS и JS.

👉 @seniorFront

👉 @seniorFront

Material Design: Profile Card

Карточка создана и анимирована на чистых HTML и CSS.

👉 @seniorFront

UI Motion

Вся сцена - это SVG картинка, анимируемая библиотекой TweenMax.

👉 @seniorFront

How to Create Game in Javascript

В этом видео создается игра-пазл на JS.

👉 @seniorFront

CSS slider with custom effects

Оригинальный слайдер, реализованный на HTML и SCSS.

👉 @seniorFront

Next smaller number with the same digits

Напишите функцию, которая принимает положительное целое число и возвращает следующее меньшее положительное целое число, содержащее те же цифры

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

Пример:

nextSmaller(21) == 12
nextSmaller(531) == 513
nextSmaller(9) == -1
nextSmaller(1027) == -1

- Некоторые тесты будут включать очень большие числа
- В тестовых данных используются только положительные целые числа

👉 @seniorFront

Vue: Composables и TS это вам не Mixins и JS. С ними сложнее

Пришел к хитрому паттерну. Делюсь.

Будет полезен тем кому нравиться или приходится работать с Vue.
В подходящей ситуации он сэкономит кучу времени и поможет избежать дублирования кода.

👉 @seniorFront

Разработка через тестирование (TDD)

Разработка через тестирование (Test Driven Development, TDD) — практика разработки программ, при которой мы вначале пишем тесты для функциональности, которую хотим создать, затем — реализацию этой функциональности. Когда все заработает — рефакторим код.

Основной посыл TDD — в разбиении больших задач на маленькие. Стандартный цикл разработки состоит из трёх этапов и занимает 10–15 минут.

1. Красная зона. На нём мы пишем тест, который точно упадёт с ожидаемой причиной. Если причина падения теста не совпадает с ожидаемой, переходить к реализации функциональности рано.
2. Зелёная зона. На нём пишем функцию, которая проходит этот тест. Цикл короткий, поэтому реализация должна быть максимально простой.
3. Синяя зона. На этом этапе мы рефакторим код тестов и реализации. Проводить рефакторинг в синей зоне безопасно, потому что вся функциональность, которую рефакторинг затрагивает, уже покрыта тестами. Если что‑то по пути сломается, мы об этом тут же узнаем.

👉 @seniorFront

ELC

Создано и анимировано на чистых CSS и JS.

👉 @seniorFront

​Как перейти в IT без увольнения: опыт сотрудников Хабра и курсы для горизонтального перехода

Мечтаете сменить профессию и уйти в IT, но не готовы увольняться? Горизонтальный переход внутри компании — ваш вариант! Хабр Карьера делится историями коллег, которые сменили специализацию, не покидая компанию, и рассказывает, как курсы помогают в этом.

Почему горизонтальный переход — это круто?

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

Истории успеха:
- Маша (маркетинг → QA): Заметила, что проверка фич ей интереснее, чем маркетинг. Попросила переход, прошла курс «Инженер по тестированию» от Яндекс Практикума и выросла в зарплате почти в 2 раза!

- Артём (продюсирование → продакт): Взял задачи продакта, потом прошёл курсы от Productstar и Gopractice. Зарплата выросла в 3 раза за 2 года.

- Ангелина (продажи → продакт → проджект): Настояла на переводе, училась на курсах Productstar. Оклад сначала упал, но через пару месяцев вырос выше прежнего.

- Настя (химик → PHP-разработчик): Ушла из химии, прошла курс от Geekbrains. Теперь зарабатывает на 40% больше и не жалеет!

Как договориться с руководителем?

- Чётко объясните, почему переход полезен компании.
- Узнайте, какие навыки нужны для новой роли.
- Покажите инициативу: начните с задач новой роли или выберите курс.
- Спросите про поддержку: компании часто оплачивают обучение или выделяют время.

А что с зарплатой?
- Сразу: Если у вас есть опыт, рост может быть ощутимым (как у Маши — х2).
- Позже: Новичкам платят как джунам, но за 6–12 месяцев можно вырасти (как у Артёма — х3).
- Переходный этап: Берите задачи новой роли с доплатой или без, пока учитесь.

Советы для успеха:
- Выбирайте структурированные курсы с практикой и код-ревью.
- Ставьте реалистичные цели и учитесь хотя бы по 30 минут в день, чтобы не выгореть.
- Найдите ментора в команде — это ускорит переход.
- Балансируйте работу и учёбу: просите тимлида разгрузить текущие задачи.

Зачем курсы?
Курсы — не билет в IT, но мощный старт: систематизируют знания, дают практику и портфолио. Лучше всего — программы с проектной работой и менторством.

👉 @seniorFront