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

Ключевые понятия LLM

Современные языковые модели (large language models) стали ключевым элементом в развитии искусственного интеллекта и обработки естественного языка.

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

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

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

Приятного прочтения!

👉 @seniorFront

Additive fireflies

Частицы создаются в JS и анимируются библиотекой anime.js

👉 @seniorFront

Animated Hot Cup of Tea

В этом видео создается анимированная чашка кофе на чистых HTML и CSS.

👉 @seniorFront

Привет! 👋
21 августа в 19:00 (МСК) Health Samurai проводят онлайн-митап про современные цветовые пространства в вебе — Display P3 и OKLCH. Расскажем как добиться максимума от цветопередачи и не запороть проект.
Спикер — Василий Беляев, опытный фронтенд-разработчик.

В докладе раскроем подробнее:
🔈 Почему привычный sRGB уже не справляется и как использовать расширенные цветовые пространства;
🔈 Практические CSS-фишки для работы с современными цветами на веб-страницах;
🔈 Как создавать яркие иллюстрации для новых дисплеев и сохранять поддержку старых браузеров;
🔈 Реальные примеры и советы, чтобы цвета действительно выглядели "как на макете".

Будет полезно фронтендерам, дизайнерам и маркетологам, которые хотят создавать современные и яркие сайты. Минимум кода и максимум наглядных примеров! :)

Участие бесплатное, нужна регистрация! Подробности здесь 👈

Кто-то: не понимаю прикола сидеть на удалёнке

Удалёнщики:

👉 @seniorFront

Toggle Pill

Подборка переключателей с различными CSS анимациями.

👉 @seniorFront

Responsive Blog Card Slider

Карточка - слайдер, стилизованная в SCSS. Логика работы слайдера реализована библиотекой Swiper.

👉 @seniorFront

CSS Animation Effects

В этом видео создается анимированная граница блока на HTML и CSS.

👉 @seniorFront

Living Words

Сцена реализована на HTML и CSS. Слова добавляются через JS.

👉 @seniorFront

Find the odd int

В массиве целых чисел найдите то, которое встречается нечетное количество раз. Всегда найдется только одно целое число, которое встречается нечетное количество раз.

Пример:

[7]

Должно вернуть 7, потому что оно встречается 1 раз (что нечетно).

[0]

Должно вернуть 0, потому что оно встречается 1 раз (что нечетно).

[1,1,2]

Должно вернуть 2, потому что оно встречается 1 раз (что нечетно).

[0,1,0,1,0]

Должно вернуть 0, потому что оно встречается 3 раза (что нечетно).

[1,2,2,3,3,3,4,3,3,3,2,2,1]

Должно вернуть 4, потому что оно встречается 1 раз (что нечетно).

👉 @seniorFront

Steroids — ещё один фронтенд фреймворк на базе React?

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

Изначально мы не планировали создавать фреймворк, а просто собирали удачные решения рутинных задач. Получился набор полезных утилит и мини-библиотек, который позволял нам работать быстрее. Мы постепенно добавляли в него новые элементы, он рос и видоизменялся, и в итоге вырос в полноценный фреймворк Steroids.

👉 @seniorFront

Что такое синтаксическая сложность?

Это мера, которая оценивает сложность структуры и конструкции кода. Она часто используется для оценки понятности, поддерживаемости и вероятности ошибок в программном коде. Одним из наиболее известных методов измерения синтаксической сложности является цикломатическая сложность, предложенная Томасом Маккейбом в 1976 году.

Цикломатическая сложность
Это количественная мера количества независимых путей через программу. Она используется для оценки сложности программного кода, измеряя количество логических ветвлений. Чем выше цикломатическая сложность, тем больше возможных путей исполнения и, следовательно, тем сложнее понять и протестировать программу.

Как рассчитывается цикломатическая сложность
Цикломатическая сложность может быть рассчитана с помощью следующей формулы:

V(G) = E - N + 2P

Пример расчета цикломатической сложности

def example(a, b):
    if a > 0:
        if b > 0:
            return a + b
        else:
            return a - b
    else:
        return b

Цикломатическая сложность V(G) будет

V(G) = E - N + 2P
V(G) = 6 - 5 + 2*1
V(G) = 3

Почему синтаксическая сложность важна

Понимаемость кода
Чем выше сложность, тем труднее понять код. Программы с высокой сложностью требуют больше времени для анализа и понимания.

Поддерживаемость
Код с высокой сложностью сложнее поддерживать и изменять. Это может привести к большему числу ошибок при внесении изменений.

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

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

Методы уменьшения синтаксической сложности

Рефакторинг
Разделение сложных функций на более простые и малые функции. Использование более простых и понятных конструкций.

- Удаление дублированного кода
- Использование комментариев и документации
- Применение паттернов проектирования:

👉 @seniorFront

iPad Spacial Graph

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

👉 @seniorFront

​Комментарии vs. самодокументируемый код: что выбрать?

Как сделать код понятным без лишних пояснений? Разбираемся!

Почему комментарии — не всегда спасение?
- Устаревают: код меняется, а комментарии забывают обновлять.
- Скрывают проблемы: вместо улучшения кода пишут пояснения.
- Теряют связь: со временем непонятно, к чему относится комментарий.

Что такое самодокументируемый код?
- Говорящие имена: переменные и функции сразу раскрывают суть.
- Мелкие функции: каждая решает одну задачу.
- Прозрачность: код читается как понятная инструкция.

Примеры

Было:

// Вычисляем стоимость заказа с налогами и скидкой  
function calculate(price, tax, discount) {  
  return price + (price * tax) - discount;  
}

Стало:

function calculateTotalOrderPrice(price, taxRate, discountAmount) {  
  return price + (price * taxRate) - discountAmount;  
}

Комментарий исчез — имена говорят сами за себя.

Было

// Проверяем, является ли число чётным  
if (number % 2 === 0) {  
  console.log("Чётное");  
}

Стало

function isEven(number) {  
  return number % 2 === 0;  
}

if (isEven(number)) {  
  console.log("Чётное");  
}

Логика ясна без комментариев.

Сложная логика?

Было

// Проверяем, если пользователь не заблокирован и подписка активна  
if (!user.isBlocked && user.subscription.isActive) {  
  sendNewsletter();  
}

Стало:

if (user.canReceiveNewsletter()) {  
  sendNewsletter();  
}

Советы из «Чистого кода»
Роберт Мартин: лучший комментарий — тот, которого нет.

- Используйте понятные имена.
- Разбивайте код на логичные функции.
- Делайте код прозрачным.

Когда комментарии нужны?
- Для объяснения «почему» (а не «что»).
- Для документации ограничений или техдолга.
- Как временное решение.

Итог
Хороший код — как хорошая книга: читается легко и понятно. Самодокументируемый код делает комментарии исключением.
Перед тем как писать //, подумайте: можно ли сделать код яснее? Обычно — можно!

👉 @seniorFront