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

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