☕️ CodinGame — интерактивная игровая платформа для практики алгоритмов и структур данных!

Здесь вы будете не просто писать код, а решать задачи в формате игры, прокачивать мышление и сражаться в код‑батлах в реальном времени.

📌 Оставляю ссылочку: codingame.com

📣 Code Ready | #ресурсы

👩‍💻 Рассмотрим Order — меняем визуальный порядок флекс-элементов, не меняя HTML!

При помощи свойства order можно менять порядок отображения флекс-элементов внутри флекс-контейнера.
Идеально для адаптивной верстки — можно менять порядок блоков на мобильных, не ломая основную структуру страницы.

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

• Элемент с меньшим order отображается раньше.

• По умолчанию order: 0 у всех.

Однако, свойство меняет только визуальный порядок. Стоит помнить об этом. Скринридеры по-прежнему будут читать элементы по порядку расположения в разметке.

📣 Code Ready | #свойство

👩‍💻 Атрибут enterkeyhint — настраиваем внешний вид клавиши ввода!

Глобальный атрибут enterkeyhint применяется к элементам формы или для любых элементов с contenteditable. Подсказывает браузеру, как должна выглядеть клавиша ввода на экранной клавиатуре.

Варианты значений:

• enterkeyhint="search" — "Поиск"

• enterkeyhint="send" — "Отправить"

• и другие: "go", "next", "done", "previous"

Несмотря на значения next и previous, клавиша enter всё равно отправит форму. Поэтому лучше использовать их там, где пользователь просто переходит между полями.

📣 Code Ready | #атрибут

👩‍💻 Знаете, что можно визуализировать историю Git прямо внутри VS Code?

Git Graph — мощный плагин, который показывает древовидную структуру коммитов в виде наглядной граф-схемы: ветки, слияния, история — всё как на ладони.

Особенно удобен, если работаете в нескольких ветках или сопровождаете чужой проект — сразу видно, что где происходило.

📣 Code Ready | #vscode

👩‍💻 Можно ли нажать на элемент пальцем? Что-то вроде тач-событий в JavaScript.

Свойство touch-action управляет взаимодействием с сенсорным экраном и напоминает более распространённое свойство pointer-events, которое регулирует взаимодействие мышкой.

Примеры использования:

• none — запрещает все типы взаимодействий.
• auto — разрешает все типы взаимодействия.
• manipulation — элемент можно сдвигать и зумить.
• pan-down — элемент можно смещать только если начать движение снизу вверх.
• pan-up — элемент можно смещать только если начать движение сверху вниз.
• pinch-zoom — элемент можно зазумить щипком.

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

📣 Code Ready | #свойство

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

📌 Оставляю ссылочку: frontendchecklist.io

📣 Code Ready | #ресурсы