Code Ready | Frontend

👩‍💻 Можно ли нажать на элемент пальцем? Что-то вроде тач-событий в JavaScript. Свойство touch-action управляет взаимодействием с сенсорным экраном и напоминает более распространённое свойство pointer-events, которое регулирует взаимодействие мышкой. Примеры использования:

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

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

🔒 Гигабайты платных материалов из айти школ выложили в Telegram Выбирай, всё бесплатно: 🤩385 ГБ — Python 🤩229 ГБ — JS, HTML, CSS 🤩422 ГБ — C, C++, C# 🤩147 ГБ — Java, PHP 🤩202 ГБ — Rust, Golang 🤩352 ГБ — Flutter, Kotlin, Swift 🤩168 ГБ — DevOps, СисАдмин 🤩242 ГБ — ИБ, Хакинг 🤩122 ГБ — Windows, Linux 🤩107 ГБ — Git, GitHub 🤩242 ГБ — БД (SQL и NoSQL) 🤩163 ГБ — QA-тестирование 🤩108 ГБ — ИИ, Machine Learning 🤩189 ГБ — Разработка игр 🤩171 ГБ — Разработка ботов 🤩612 ГБ — Собеседования в IT 🤩3942 ГБ — Другие направления База ежедневно обновляется ⏳

👩‍💻 Знаете, что можно визуализировать историю Git прямо внутри VS Code? Git Graph — мощный плагин, который показывает древовидную структуру коммитов в виде наглядной граф-схемы: ветки, слияния, история — всё как на ладони. Особенно удобен, если работаете в нескольких ветках или сопровождаете чужой проект — сразу видно, что где происходило. 📣 Code Ready | #vscode

📱 Разбираем методы для работы со словарями! В первой части мы разобрали базовые методы. Во второй — шаг глубже: перебор свойств, удаление, сравнение, прототипы и скрытые ключи. Эти техники важны при работе с динамическими структурами, формами, валидацией и кастомной логикой. 📣 Code Ready | #шпора

📱 Обрезка текста с кнопкой “Ещё” Привет! В этом гайде покажу, как реализовать обрезку длинного текста с кнопкой “Ещё” — идеально подходит для отзывов, описаний товаров и карточек постов. Ключевые моменты:

• HTML: минимальная разметка — один абзац и кнопка. • CSS: компактная стилизация в виде карточки с тенью, скруглением и элегантной обрезкой строки. • JavaScript: простой переключатель состояния с изменением текста кнопки и класса.

Это универсальный и полезный элемент, который стоит держать под рукой для любого интерфейса. 📣 Code Ready | #гайд

👩‍💻 Атрибут enterkeyhint — настраиваем внешний вид клавиши ввода! Глобальный атрибут enterkeyhint применяется к элементам формы или для любых элементов с contenteditable. Подсказывает браузеру, как должна выглядеть клавиша ввода на экранной клавиатуре. Варианты значений:

• enterkeyhint="search" — "Поиск" • enterkeyhint="send" — "Отправить" • и другие: "go", "next", "done", "previous"

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

👩‍💻 Мини‑трюк с CSS — обводка текста без теней и дубликатов! В этом посте покажем способ сделать эффектную контурную обводку текста при наведении — без text-shadow, без копий и без JavaScript. Как работает:

• Используем -webkit-text-stroke — нативный способ обводки символов прямо в CSS. • Меняем color: transparent, чтобы текст стал “пустым”, и проявилась только обводка. • Добавляем плавный transition и получаем чистый и стильный ховер-эффект.

И главное: эффект отключается на тач‑устройствах, чтобы не портить UX! 📣 Code Ready | #фишка

👩‍💻 Рассмотрим Order — меняем визуальный порядок флекс-элементов, не меняя HTML! При помощи свойства order можно менять порядок отображения флекс-элементов внутри флекс-контейнера. Идеально для адаптивной верстки — можно менять порядок блоков на мобильных, не ломая основную структуру страницы. Как работает:

• Элемент с меньшим order отображается раньше. • По умолчанию order: 0 у всех.

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

💲Каналы с Junior IT вакансиями и стажировками Подписывайся и забирай свой оффер⚡ 1. IT вакансии по СНГ 2. IT стажировки по СНГ 3. IT стажировки в топовых компаниях мира 4. Удалённые IT вакансии и стажировки 5. Python вакансии и стажировки 6. БИГТЕХ вакансии и стажировки 7. Design вакансии и стажировки 8. QA вакансии и стажировки 9. Junior вакансии и стажировки 10. Frontend вакансии и вопросы собесов 11. Вакансии и стажировки для аналитиков 12. Вакансии в русских стартапах за границей 13. Вакансии и стажировки для DevOps 14. Вакансии, которых нет на ХХ.РУ

☕️ CodinGame — интерактивная игровая платформа для практики алгоритмов и структур данных! Здесь вы будете не просто писать код, а решать задачи в формате игры, прокачивать мышление и сражаться в код‑батлах в реальном времени. 📌 Оставляю ссылочку: codingame.com 📣 Code Ready | #ресурсы

📱 Разбираем методы для работы со словарями! В этой шпаргалке собраны базовые и действительно рабочие методы: для фильтрации, клонирования, объединения и защиты объектов. Идеально подходят для валидации данных, работы с формами, API и конфигурациями. 📣 Code Ready | #шпора

Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает? Психолог взрослого человека — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам. ✔️ Как научиться отвлекаться от работы и отдыхать? ✔️ Как совместить кучу рабочих задач и время с семьей? ✔️ Как справиться с прокрастинацией? ✔️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни! 👨🏻‍💻 Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии: https://t.me/+nfN1sRvC_Nc4ZjEy

👍 React JS — курс для начинающих! Пошаговое и современное введение в React — самую популярную библиотеку для фронтенд-разработки. Автор объясняет ключевые концепции без воды: компоненты, JSX, хуки, состояние и маршрутизацию. Отличный старт, чтобы уверенно войти в React-экосистему.

Ссылочка на видео: YouTube🖤

📣 Code Ready | #курс

📱 Интерактивное поле ввода! Привет! В этом гайде реализуем поле ввода пароля с возможностью переключения видимости через иконку глаза. Ключевые моменты:

• HTML: минимальная семантическая структура. • CSS: современная стилизация с выравниванием иконки и плавной анимацией фокуса. • JavaScript: чёткая логика смены типа поля и динамическая подстановка иконки.

Это базовая, но важная деталь интерфейса, которую стоит уметь реализовывать. 📣 Code Ready | #гайд

❗️ Канал для тех, кто хочет хочет развиваться в кибербезе Project Omega — закрытая лаборатория белого хакера. Криптография на практике и разборы популярных инструментов защиты. 🔤Никаких заявок, канал открыт!

👩‍💻 Знаете, что в VS Code можно автоматически наводить порядок в коде по заданным правилам? Prettier — плагин для VS Code, который форматирует ваш код по единым стандартам: ставит отступы, пробелы, переносы строк и даже следит за запятыми. Работает с JavaScript, HTML, CSS и множеством других языков. Особенно полезен в командной разработке — один стиль на всех, меньше споров. Без лишней суеты — сохраняете файл, и Prettier сам всё приводит в порядок. 📣 Code Ready | #vscode

👩‍💻 Шпаргалка по cursor в CSS. Например, cursor: pointer; делает курсор в виде руки — это сигнализирует, что элемент кликабельный. А cursor: none; полностью скрывает курсор. На картинке — 16 популярных значений свойства cursor. Сохрани, чтобы не искать в документации каждый раз! 📣 Code Ready | #ресурсы

👩‍💻 Гибкость и чистота в стилях? Всё это про var! Функция var() возвращает текущее значение кастомного свойства. Если оно поменяется, то функция сразу вернёт актуальное значение. Где особенно полезно:

• При создании дизайн-систем — единый цвет, отступ или размер в одном месте. • В тёмной/светлой темах — просто меняешь значение переменной. • В анимациях — переменные можно менять динамически, и они участвуют в переходах.

Главное: var — это не просто про удобство, это про контроль и масштабируемость. Один раз задал, и используешь в 100 местах без дублирования. 📣 Code Ready | #свойство

😎 Советую YeaHub — это IT платформа объединяющая обучение, подготовку к собеседованиям и развитие карьеры в одном месте! База реальных собеседований от Т-Банк, Яндекса, Сбера и 100+ топовых компаний. 10 000+ вопросов по Frontend, Backend, DevOps и другим направлениям. Удобный тренажёр, персональная статистика и еженедельные обновления. 📌 Оставляю ссылочку: yeahub.ru 📣 Code Ready | #ресурсы

Intersection Observer — отслеживаем появление элементов в области видимости! Эффективная альтернатива scroll-событиям. Используется для ленивой загрузки, анимаций и инфинит-скролла. Инициализируем наблюдатель:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
});

Подключаем наблюдение:

document.querySelectorAll('.anim').forEach((el) => {
  observer.observe(el);
});

Стили для появления:

.anim { opacity: 0; transform: translateY(30px); transition: 0.4s ease; }
.visible { opacity: 1; transform: none; }

🔥 Простая и масштабируемая практика, которую используют в продакшене: YouTube, Medium, e-commerce. 📣 Code Ready | #практика