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

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

Focus Text Effect

В этом видео создаётся смазанный текст, который становится четким при наведении на JS.

👉 @seniorFront

UX на уровне

👉 @seniorFront

Stacked Poetic Cards

Карточки реализованы на чистых HTML и CSS.

👉 @seniorFront

3D Flip Card

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

👉 @seniorFront