Блог

Boxes in boxes, Или что застряло у меня в голове

27 нояб. 2024 г.

Я периодически решаю задачи на leetcode или codewars, и недавно наткнулась на кату “Boxes in boxes”.

Это вроде бы не то чтобы сложная задача, но я застряла. Для начала, у меня есть проблемы с пространственным мышлением, так что я не сразу поняла сам паттерн с рисованием этих ящиков.

И даже когда я поняла паттерн, я… не смогла написать решение. Понимала, что нужно рисовать ящики от первого и затем с повторением уже существующих нарисованных, но как? Это просто не укладывалось в моей голове.

После двух вечеров размышлений, я была вынуждена посмотреть чужие решения (эта задача просто сводила меня с ума). И знаете что? Даже после того, как я увидела код и поняла, что он должен делать, я так и не могла осознать, а каким же образом это приводит нас к нужному результату.

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

Оставлю мой код с комментами здесь, чтобы если можно было вспомнить ход мысли:

function draw(n) {
    // all for one box, our start
    let res = [" _ ", "|_|"];

    for (let i = 1; i < n; i++) {
        res = [
            // top line - just add tops of boxes
            ' _' + res[0],
            // draw existing boxes without left border (top 1/2 part is repeat existing but partially)
            ...res.slice(1).map(str => '|  ' + str.slice(1)),
            // draw existing with left border and without bottom
            ...res.slice(1, -1).map(str => '| ' + str),
            // draw bottom
            '|_' + res[res.length-1],
        ]
    }

    return res.join('\n');
}

Остаётся только надеяться, что на интервью мне эта задача не попадётся 🤪

Сегодня узнала, что можно в ref передавать callback

21 нояб. 2024 г.

От моего внимания как-то ускользнуло, что в React можно передавать функцию-callback как ref для элемента, а не только объект, созданный с помощью useRef.

const scroller = (node: HTMLDivElement) => {
    if (!node) return;
    node.scrollIntoView({ behavior: "smooth" });
};

// somewhere in component
 <div ref={scroller} />

Как это работает:

Когда элемент добавляется в DOM, React вызывает функцию-callback и передает в неё DOM-узел как аргумент.
Когда элемент удаляется из DOM, React вызывает эту функцию с аргументом null.
Callback также вызывается каждый раз, когда передается новая функция (например, при каждом рендере, если она определена как обычная функция).

No more absolute for overlapping

18 нояб. 2024 г.

Спасибо Wes Bos за примеры, как можно обойтись без position: absolute для накладывающихся друг на друга элементов: tweet 1 и tweet 2. Я применила этот вариант уже раза 3 в текущем проекте, переверстывая старые элементы, и насколько же лучше это выглядит 😊

За подробностями — в твиттер Wes Bos, у него там видео с примерами, или на css-trics.

Я фанат именованных grid-area, поэтому мой любимый подход: родительский компонент превращаем в grid и задаем grid-template-areas: 'stack'. Компонентам-детям, которые должны накладываться, задаём grid-area: stack. (имя grid-area может быть любым, главное, чтобы было одинаковым у тех элементов, над которыми колдуем)

Либо можно не задавать именованную grid-area, а просто указать для нужных элементов одинаковые grid-row-start и grid-column-start. Вот так:

.container > * {
  grid-area: 1 / 1;
}

Нашла классную статью про alt для изображений

4 нояб. 2024 г.

Нашла интересную статью от Adrian Roselli про то, как писать ‘alt’ для images. Главное — пусть альтернативный текст будет коротким, не содержит спецсимволов, URL, и в идеале будет на одном языке. А почему именно так — можно узнать в статье.

Там также представлены примеры того, как скрин-ридеры ведут себя с длинными текстами в alt. Спойлер: по-разному, но в любом случае это неудобно для пользователя (и виноват не скрин-ридер).

Очень круто, что в дополнение Adrian Roselli подготовил что-то вроде дерева решений, как понять, какой alt написать. Отвечаем на несколько вопросов про наш image — и получаем рекомендации, как лучше писать. Попробовать можно здесь.

Немного Java и Selenide для фронтендерки

17 окт. 2024 г.

Сегодня пришлось заняться e2e-тестами на Java с использованием Selenide. После ухода автоматизатора из проекта не хочется терять существующие тесты, поэтому я решила попробовать поддерживать их сама.

Maven, Selenide, Java — это было что-то новое для меня, но запустить оказалось проще, чем я ожидала. Пофиксить - тоже :)

Планирую погрузиться в это поглубже и, возможно, даже сама начну написать тесты на Java, кто знает.