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

Отзывчивый дизайн для веб-приложений: как обеспечить доступность на всех устройствах? Принципы отзывчивого дизайна

Отзывчивый дизайн — это подход к веб‑разработке, который позволяет создавать сайты, автоматически подстраивающиеся под размеры экрана устройства пользователя. С каждым годом количество вариантов растёт — от смартфонов до умных телевизоров. Поэтому адаптированный и отзывчивый дизайн стал основой успешных веб проектов.

👉 @seniorFront

​В чём отличие между контролируемыми и неконтролируемыми компонентами в React?

В React различают два типа компонентов для обработки пользовательского ввода: контролируемые (controlled) и неконтролируемые (uncontrolled) компоненты. Понимание их различий важно для выбора подходящего способа управления состоянием формы.

Контролируемые компоненты
Контролируемый компонент управляет своим состоянием через React. Это означает, что состояние элемента формы (например, значение текстового поля) хранится в состоянии (state) компонента и обновляется через React.

import React, { useState } from 'react';

const ControlledComponent = () => {
    const [inputValue, setInputValue] = useState('');

    const handleChange = (event) => {
        setInputValue(event.target.value);
    };

    return (
        <div>
            <label>
                Name:
                <input type="text" value={inputValue} onChange={handleChange} />
            </label>
            <p>Current value: {inputValue}</p>
        </div>
    );
};

export default ControlledComponent;

Особенности контролируемых компонентов
- Значение элемента формы хранится в состоянии компонента.
- Все изменения отслеживаются через события (например, onChange) и обновляют состояние компонента.
- Данные идут от состояния компонента к элементу формы, обеспечивая контроль над значением.

Неконтролируемые компоненты
Неконтролируемый компонент управляет своим состоянием через DOM. Значение элемента формы извлекается непосредственно из DOM, а не из состояния компонента.

import React, { useRef } from 'react';

const UncontrolledComponent = () => {
    const inputRef = useRef(null);

    const handleSubmit = (event) => {
        event.preventDefault();
        alert('Submitted value: ' + inputRef.current.value);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input type="text" ref={inputRef} />
            </label>
            <button type="submit">Submit</button>
        </form>
    );
};

export default UncontrolledComponent;

Особенности неконтролируемых компонентов
- Значение элемента формы хранится в самом DOM-элементе.
- Для доступа к значению элемента используется реф (например, через useRef).
- Данные могут быть извлечены из DOM в любой момент времени, что делает управление состоянием менее очевидным.

👉 @seniorFront

Sticker filter

На редактируемый блок текста накладывается SVG картинка с фильтрами.

👉 @seniorFront

​Вайб-кодинг: практика, о которой почему-то не говорят

В феврале мир разработки перевернулся с выходом Sonnet 3.7. Потому что вдруг внезапно оказалось, что джуны уже не очень-то и нужны. И нейросетка нормально заменяет мидлов тоже.

Я откидываюсь в кресле, беру наушники и смотрю, как работает LLM. Можно сразу несколько, работающих над разными частями проекта:

Пример проекта с прикручиванием аналитики к инфраструктуре:
- Сначала в GPT 4.5 провёл продуктовые исследования и сформулировал требования.
- Попросил превратить это в архитектурный план.
- Отревьюил, поправил тупые ошибки.
- Затем этот план (как метапромпт) скормил Sonnet в VS Code через плагин Cline. Попросил сначала создать общую структуру, шаблонные имплементации, документацию, спецификации API (protobuf для gRPC, REST API).
- Архитектурно сразу заложил микросервисы. Sonnet для каждого сервиса подобрал и обосновал оптимальную базу данных (где-то Postgres, где-то ClickHouse и т.д.).
- Сгенерировал SDK для взаимодействия, примеры использования. Сразу заложил observability: централизованные логи, метрики Prometheus, трейсинг Jaeger/Tempo, дашборды для Grafana.
- Потом итерационно генерировал код: сначала тесты (End-to-end, BDD), потом имплементацию под эти тесты.
- Написал манифесты для Kubernetes и Docker Compose для локального запуска.
- Сгенерировал даже скрипты для тестов REST API через curl и gRPC через gRPCurl.

И всё.

А теперь практика — что делать с тем, что современные нейросети учились преимущественно на говнокоде и как быть с джунами. Продолжение в статье

👉 @seniorFront

Что я понял за три года работы на чужой стартап — мои 10 выводов

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

👉 @seniorFront

Retro Card Carousel

Оригинальная карусель, реализованная на HTML и CSS. Логика переключения темы реализована в JS.

👉 @seniorFront