Flipping Cards

Карточки с эффектом Parallax, реализованные на HTML и CSS.

👉 @seniorFront

Stunning Liquid Ripple Card Hover Effects

В этом видео создается эффект жидкости, следующей за курсором на карточке.

👉 @seniorFront

Product Showcase UI

Логика переключения слайдов реализована при помощи библиотеки Swiper.

👉 @seniorFront

Split Strings

Создайте функцию, которая принимает строку и разбивает эту строку на массив пар символов. Если последнему символу не хватает пары, то к нему добавляется ('_').

Примеры:
'abc' => ['ab', 'c_']
'abcdef' => ['ab', 'cd', 'ef']

👉 @seniorFront

React 19: что нового, что полезного, и куда мы движемся

Команда React подготовила много интересного — обновление обещает упростить разработку, повысить производительность и открыть новые горизонты для создания современных приложений.

Так что вперёд, к подробному разбору основных фичей, оценке их плюсов и минусов и исследованию будущего React.

👉 @seniorFront

​AbortController

Это встроенный объект, который позволяет отменять выполнение любых операций. Появился в ES2018 (ES9) для отмены fetch запросов, но позже его применение расширилось на другие операции.

Пример:

// Создаём контроллер
const controller = new AbortController()
const API_URL = 'https://jsonplaceholder.typicode.com'

// Делаем запрос с сигналом
fetch(`${API_URL}/posts/1`, { signal: controller.signal })
  .then((response) => response.json())
  .catch((error) => {
    if (error.name === 'AbortError') {
      console.log('Запрос был отменён')
    }
  })

// Отменяем запрос через 5 секунд
setTimeout(() => {
  controller.abort()
}, 5000)

Плюсы:
Простой способ узнать момент отмены операции;
Лаконичный синтаксис;
Не нужно хранить ссылку на функцию-обработчик.

Минусы:
Можно установить только один обработчик;
При повторном присвоении предыдущий обработчик теряется;
Нет прямого способа удалить обработчик (только присвоить null).

AbortController упрощает отмену асинхронных запросов в React-компоненте. Это особенно полезно при использовании React.StrictMode, чтобы избежать лишних запросов к серверу, так как StrictMode в development режиме запускает дополнительный цикл установки и сброса useEffect.

function SearchComponent() {
  const [search, setSearch] = useState('')
  const API_URL = 'https://jsonplaceholder.typicode.com'

  useEffect(() => {
    const controller = new AbortController()

    // Запрос отменится при новом поиске или размонтировании
    fetch(`${API_URL}/posts?userId=${search}`, { signal: controller.signal })
      .then(response => response.json())
      .then(data => console.log('Результаты:', data))
      .catch(error => {
        if (error.name === 'AbortError') return
        console.error(error)
      })

    // Очистка при размонтировании и ререндере
    return () => controller.abort()
  }, [search])

  return (/* ... */)
}

👉 @seniorFront

Glitchy button

Эффект при наведении создается при помощи библиотеки vfx-js.

👉 @seniorFront

​Перфекционизм — нужно ли от него избавляться?

Недавно HR-директор крупной компании написал статью о правильной стратеги корпоративной карьеры: «Главное — чтобы сотрудник не увлекался перфекционизмом, а делал свою работу качественно и в срок».

На самом деле, перфекционизм может быть мощным преимуществом – всё зависит от психотипа человека, его карьерных целей и культуры компании, в которой он работает.

Психотип творца: перфекционизм – это призвание
Для некоторых людей стремление к совершенству – не просто привычка, а внутренняя потребность. Если человек чувствует гармонию только тогда, когда доводит работу до идеала, у него психотип творца.

Таким людям нельзя предлагать «поточную» работу – она убивает их мотивацию. Если компания хочет получить от них максимум, она должна давать задачи, соответствующие их уровню требований.

Перфекционизм — стратегия карьеры
Во многих профессиях именно безупречное качество становится ключом к успеху. Если человек хочет построить выдающуюся карьеру, перфекционизм - осознанная инвестиция в личный бренд, а не проблема.

Перфекционизм — стратегия компании
Некоторые компании сознательно делают ставку на перфекционизм, потому что их продукты требуют безупречности.

Такие компании не просто терпят перфекционистов – они ищут их, потому что понимают: без этого не создать выдающийся продукт.

Когда перфекционизм мешает?

- Если задача требует быстрого результата, а не идеального.
- Если компания работает в бюджетном сегменте, где клиенты не готовы платить за «лишнее» качество.
- Если компания нанимает не тех сотрудников, как не заставляй и мотивируй на перфекционизм - они не смогут. Это как панд заставлять работать вместо сна.

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

Вывод
Перфекционизм – не враг, а инструмент. Он вреден только там, где не востребован. В правильных условиях он становится двигателем карьеры и конкурентным преимуществом компании.

Так стоит ли от него избавляться? Только если он мешает. А если помогает – развивать.

👉 @seniorFront

Оценка задач в сторипоинтах по их декомпозиции: метод, который наконец-то работает

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

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

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

👉 @seniorFront

Additive creature

Реализовано и анимировано с использованием библиотеки anime.js

👉 @seniorFront

Как коммитить так, чтобы ваш код принимали мейнтейнеры: путь одного героя

Open source — место, где код становится общим достоянием, а разработчики — частью глобального комьюнити. Здесь можно внести реальный вклад в проекты, которыми пользуются миллионы, прокачать навыки через практику и найти менторов среди топовых специалистов.

Но есть нюанс: говоря об опенсорсе, многие забывают и о его “человеческой” стороне. Эта статья — честный разговор о том, что делает работу над проектом выгодной для всех сторон. Почему тесты и описание — это не прихоть, а хаотичные issue могут убить всю продуктивность.

Будет полезно для тех, кто хочет контрибьютить, но боится "не так оформить", и мейнтейнерам, которые устали от потока однотипных вопросов. А если вы пока только в поиске интересного проекта — в конце программа для контрибьюторов от платформы Diplodoc. За помощь в разработке и закрытие issues дарят подарки.

Статья: https://habr.com/ru/companies/yandex/articles/897150/

Magnetic Field Lines Effect

В этом видео создаются линии, которые "магнитятся" к курсору на canvas и чистом JS.

👉 @seniorFront

Навык высокоэффективных руководителей

👉 @seniorFront

Collection grid

Свёрстано и анимировано на чистых HTML и CSS с использованием CSS Grid. Логика раскрытия карточек реализована в JS.

👉 @seniorFront

3D Realistic Bee

Пчела подгружается извне и отображается на canvas.

👉 @seniorFront

Stunning 3D Card Stack Animation

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

👉 @seniorFront

Animated Ice Text Effect

Анимация реализована в SСSS. В JS реализована возможность ввода своего текста.

👉 @seniorFront

The Pony Express

Вам дан массив дистанций. Создайте функцию riders, которая вернет количество riders, которые потребуются, чтобы преодолеть всё расстояние. Один rider может проехать максимум 100 миль.

Примеры:
riders([18, 15]) =>1
riders([43, 23, 40, 13]) => 2
riders([33, 8, 16, 47, 30, 30, 46]) => 3
riders([6, 24, 6, 8, 28, 8, 23, 47, 17, 29, 37, 18, 40, 49]) => 4

👉 @seniorFront