Senior Frontend - javascript, html, css

Next smaller number with the same digits Напишите функцию, которая принимает положительное целое число и возвращает следующее меньшее положительное целое число, содержащее те же цифры Возврат -1, если не существует меньшего числа, содержащего те же цифры. Также верните -1, если следующее меньшее число с теми же цифрами потребует, чтобы первая цифра была равна нулю Пример:

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

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

Открыть бизнес? Конечно, со Сбером! За 0₽ любой тариф расчётно-кассового обслуживания на месяц, выбирайте тот, который больше всего подойдёт вашему делу. А также: ✅ бесплатные сервисы для ведения бизнеса: бухгалтерия для ИП, юрподдержка, электронный документооборот, отчётность в госорганы и многое другое. Всё, чтобы вам было удобно! ✅ специальные условия для тех, кто ведёт бизнес на маркетплейсах: безлимитные переводы на счета физлиц без комиссии. Откройте счёт онлайн или в любом нашем офисе. Узнать больше Финансовые услуги оказывает: ПАО Сбербанк. #реклама sberbank.com О рекламодателе

CSS slider with custom effects Оригинальный слайдер, реализованный на HTML и SCSS. 👉 @seniorFront

How to Create Game in Javascript В этом видео создается игра-пазл на JS. 👉 @seniorFront

Регистрируйтесь на Yandex Ecom Open Air 8 августа Море инсайтов для бизнеса, музыкальный open-air, лекции и нетворкинг. Участие бесплатно! Зарегистрироваться #реклама 18+ ecomfest.ru О рекламодателе

Хотите углубить знания в JavaScript и работать с самыми популярными фреймворками? Прокачайте свои навыки до профессионального уровня с курсом «JavaScript Developer. Professional» от OTUS. Мы предлагаем практический курс, где вы: - Изучите передовые технологии, такие как ReactJS, Angular, Vue, Node.js и другие. - Научитесь работать с такими инструментами, как Webpack, TDD, и PostgreSQL. - Примените знания на практике: создадите сложные веб-приложения, протестируете их, организуете хранение данных и многое другое. Вы сможете: • Создавать приложения для реальных проектов. • Применять паттерны проектирования. • Работать с асинхронностью, тестированием, оптимизацией. Пройдите вступительное тестирование и получите скидку на обучение: https://clck.ru/3NHpfY Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjeyS4h4

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

Material Design: Profile Card Карточка создана и анимирована на чистых HTML и CSS. 👉 @seniorFront

👉 @seniorFront

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

👩‍💻 Знаете JavaScript, но хотите углубить свои знания и освоить серверную разработку? 🔥 Пора выйти на новый уровень с курсом «Node.js Developer» от OTUS! Это повышение квалификации для тех, кто хочет научиться разрабатывать мощные серверные приложения на Node.js с использованием Express, TypeScript, GraphQL, Apollo и Nest.js. Вы получите знания, которые востребованы на рынке, и навыки, которые можно сразу применять в реальных проектах. 🦾 Практические занятия, опытные преподаватели и поддержка на протяжении всего обучения — вот что делает курс уникальным. Вы освоите работу с базами данных MongoDB и PostgreSQL, научитесь строить архитектуру приложения и создавать серверные решения с нуля. ➡ Пройдите вступительное тестирование и присоединяйтесь к группе: https://clck.ru/3NFvRh Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjdSfDUz

Mouse balls animation Частицы генерируются в JS и стилизуются в SCSS. 👉 @seniorFront

Сравнение методологий продуктовой разработки и фреймворков бизнес моделей На недавнем собеседовании мне задали, казалось бы, простой вопрос: «Какими методологиями продуктовой разработки вы пользуетесь?» Для позиции CPO он звучит почти буднично — но я задумалась. Действительно: как мы, продакты, выбираем метод, по которому пойдёт разработка? Ведь с учётом метрик вроде Time to Market и стоимости реализации — это не просто выбор инструмента, а стратегическое управленческое решение. Оно напрямую влияет на скорость, ошибки и качество вывода продукта на рынок. И, что критично, принимает его обычно один человек — продакт которому доверили реализацию этой задачи. Его опыт, насмотренность и управленческая смелость определяют, пойдёт ли команда по проторенной дорожке или найдёт способ сделать быстрее, дешевле и лучше. 👉 @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

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

🚀 Реактивное программирование в Angular Современный Angular предоставляет два подхода к реактивному программированию: RxJS и Signals. На открытом уроке мы разберём оба подхода, покажем, в чём их различия, как они дополняют друг друга, и как выбрать правильный инструмент под задачу. 👉Какие ключевые темы и вопросы будут рассмотрены на вебинаре? - Что такое реактивное программирование в контексте Angular - Observable и Signals: в чём разница, когда что использовать - Операторы RxJS - Создание и управление сигналами (signal, computed, effect) - Как внедрить сигналы в компоненты, шаблоны и сервисы - Связь между RxJS и Signals через rxjs-interop Бесплатный вебинар проходит в рамках курса “Angular Developer“ Регистрация и подробнее о курсе Angular Developer - https://clck.ru/3NDEij Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnje4My4A

Как с помощью 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

Системное мышление: когда разработчик становится архитектором Разработчик решает задачи, архитектор - строит будущее.Если ты ещё думаешь, что архитектура начинается с UML-диаграмм - ты опоздал. Она начинается в момент, когда каждый if, костыль и интеграция начинает звучать в голове как долгосрочный риск. Эта статья - о точке, после которой невозможно писать код, не думая о его последствиях. О системном мышлении. О боли, которую мы закладываем в систему своими решениями. И о том, как остановить это. 👉 @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