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

Практические вопросы архитектуры ПО, из чего строить будем?

Вы знаете из чего и как строятся программы? Странно что ни в одной из статей о программной архитектуре вы не найдете упоминаний о том из чего эти программы строятся.

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

👉 @seniorFront

Onboarding

Компонент онбординга, реализованный на Vue и стилизованный в SCSS.

👉 @seniorFront

Awesome Cursor Animation on Mousemove

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

👉 @seniorFront

В разработке нельзя предугадать две вещи: сроки и сообразительность юзеров. Change my mind

👉 @seniorFront

Cloudy Spiral CSS animation

Оригинальная анимация загрузки, реализованная с использованием препроцессоров Haml и SCSS.

👉 @seniorFront

On/Off Toggle Switch

Переключатель, реализованный на React и стилизованный в SCSS.

👉 @seniorFront