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

3D Tilt & Parallax Card

В этом видео создается 3D карточка с эффектом Parallax на HTML и CSS.

👉 @seniorFront

Animated SVG filter

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

👉 @seniorFront

Which are in?

Вам даны два массива - a1 и a2. Верните отсортированный в лексикографическом порядке массивr строк из a1, которые являются подстроками строк из a2.

Пример 1:

a1 = ["arp", "live", "strong"]

a2 = ["lively", "alive", "harp", "sharp", "armstrong"]

returns ["arp", "live", "strong"]

Пример 2:

a1 = ["tarp", "mice", "bull"]

a2 = ["lively", "alive", "harp", "sharp", "armstrong"]

returns []

👉 @seniorFront

Какие они — лучшие программисты?

За свою жизнь я повстречал немало разработчиков и недавно задался вопросом: «А что делает разработчика одним из лучших? Что у таких людей есть общего?»

В надежде, что эти мои рассуждения послужат для кого-то вдохновением, я описал черты, которые встречал у большинства исключительных людей в нашей сфере. Лично я бы хотел, чтобы у меня был такой список, когда я только начинал. Следуя этому пути, я бы сэкономил уйму времени.

👉 @seniorFront