Code Ready | Frontend

👩‍💻 Обозначаем только что добавленный контент! Тег <ins> используется для отображения добавленного контента. Например, нового пункта в списке дел или новой части кода. У тега есть встроенная роль insertion. Благодаря ей пользователи скринридеров знают, что содержимое было добавлено. Помимо глобальных атрибутов есть специфические:

• cite позволяет сослаться на информацию о правке; • datetime позволяет указать время правки.

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

⚡️ Вайб-кодинг — это правда быстрее? Часто нет. AI зачастую может предлагать код, который совершенно не вписывается в ваш проект: игнорирует общую дизайн-систему, использует устаревшие подходы и требует долгого рефакторинга. Павел Федотовский из Яндекс Go написал подробную статью о том, как превратить AI из генератора шаблонного кода в полноценного ассистента, который понимает ваш контекст. 📘 Он предлагает относиться к LLM как к новому разработчику в команде, которого нужно онбордить: дать ему документацию, объяснить правила код-ревью и научить декомпозировать задачи. А ещё в статье есть крутой подход «Архитектор-Исполнитель» для создания фич с нуля. 🔗 Прочитать полный гайд можно здесь

👩‍💻 Как ускорить рендеринг длинных списков? В CSS есть свойство content-visibility, которое может ускорить рендеринг на лентах. Браузер просто не рендерит невидимый контент, пока он не появится в зоне видимости:

.post-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

• content-visibility: auto — рендерятся только видимые элементы. • contain-intrinsic-size — задаёт примерную высоту, чтобы скролл не прыгал. Для важных блоков можно форсировать рендеринг:

.hero-section {
  content-visibility: visible;
}

🔥 Лучше всего работает, если элемент не меняет размеры динамически, браузер кэширует layout и выдаёт мгновенный скролл. 📣 Code Ready | #совет

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

А ты давно чувствовал себя ЖИВЫМ? Полным идей и планов, энергией через край и радостью от мелочей? Вместо былого сгустка энергии остался только жалкий комок тревожности и апатии 😞 Ясное дело, не каждый вывезет столько задач и обязанностей, которые ты на себя взвалил! 📍 Если хочешь снова почувствовать драйв от работы и жизни со всеми ее плюшками, подписывайся на канал Ясность. Не волшебная кнопка, а четкие инструменты, которые помогут разобраться в своей голове, найти причины упаднического состояния и попрощаться с ним навсегда. ✓ Начать жить для себя, а не для галочки в списке достижений ✓ Радоваться жизни, а не только балансу на карте ✓ Гореть идеями, а не сгорать от груза задач Подпишись на @metaskills_center и начни с закрепа. Там тебя ждет мега полезное видео «3 первых шага, чтобы построить систему жизни, где есть радость, энергия и время для себя».

❤️ 30-Seconds-of-Code — короткие фрагменты JavaScript для любых нужд в разработке! Если хочется быстро найти полезный приём, трюк или готовый код-сниппет на JS - этот репозиторий именно то, что надо. Здесь собраны короткие, лаконичные и практически применимые примеры кода, которые можно сразу вставить или адаптировать в свой проект.

Держите ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

👩‍💻 Пишем блоки и текст не слева направо, а справа налево! Свойство writing-mode определяет не просто направление текста, а всю «осевую систему» страницы или контейнера. Варианты значений:

• horizontal-tb — строки идут горизонтально, слева направо, а блоки сверху вниз. • vertical-rl — строки идут вертикально сверху вниз, а блоки справа налево. • vertical-lr — строки идут вертикально сверху вниз, а блоки слева направо. • sideways-rl — текст идёт вертикально, но символы повёрнуты вправо на 90°, строки идут сверху вниз, а блоки — справа налево. • sideways-lr — как и sideways-rl, но символы повёрнуты влево на 90°, строки идут снизу вверх, а блоки — слева направо.

Это меняет не только направление текста, но и порядок блоков. 📣 Code Ready | #свойство

Знаете, зачем вас набирают в Телеграме или ВК незнакомые номера? Посмотрите видео выше — насколько легко узнать IP-адрес любого юзера через звонок. Простых способов узнать о вас практически всё — сотни, и если вы хотите соблюдать хотя бы минимум сетевой гигиены — подпишитесь на @package_security. Это канал опытного айтишника, который расскажет вам всё об уловках хакеров/мошенников, а также поделится лайфхаками и инсайдами. @package_security — ваша анонимность скажет вам «спасибо».

Отслеживаем комбинации клавиш на странице! Назначайте горячие клавиши для действий на сайте — открывайте меню, отправляйте формы или запускайте скрипты, ускоряя работу с интерфейсом. Шаг 1 — слушаем нажатия клавиш:

document.addEventListener('keydown', (e) => {
  console.log(e.key, e.ctrlKey, e.altKey, e.shiftKey);
});

Шаг 2 — проверяем конкретную комбинацию:

document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'k') {
    e.preventDefault(); // блокируем стандартное поведение
    alert('Ctrl+K нажата!');
  }
});

Шаг 3 — добавляем несколько комбинаций:

document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault(); 
    console.log('Ctrl+S: Сохранение!');
  }
  if (e.altKey && e.key === 'm') {
    e.preventDefault();
    console.log('Alt+M: Меню!');
  }
});

🔥 Теперь можно создавать свои горячие клавиши для сайта: любые действия, кнопки или скрипты. 📣 Code Ready | #практика

«Мы взламывали Microsoft. Читали переписки чиновников Белого Дома. Получали доступ к IT-инфраструктуре правительства Франции» Я — хакер российской АРТ-группировки. После атак в 2025 году на «Аэрофлот», «Винлаб» и другие компании посчитал своим долгом сделать хороший ресурс про кибербезопасность для сограждан. Доктор Cyber — мой блог про уязвимости и их поиск, разборы эксплойтов и CVE на понятном языке, куча полезных гайдов для безопасников. Сохраняй ТОП-1 канал по ИБ в Телеге — @doctor_cyber

👩‍💻 Мини-трюк — плавающий placeholder! В этом посте покажу крутой приём для форм: метка поля «плавает» над вводом при фокусе или когда поле заполнено. Как работает:

• HTML содержит обычный <input> и <label>, placeholder остаётся пустым. • Через CSS позиционируем label поверх поля и задаём плавный переход. • Селекторы :focus и :not(:placeholder-shown) поднимают метку и меняют её цвет. • Дополнительно подсветка поля при фокусе даёт визуальную обратную связь пользователю.

Идеально для форм входа, подписок, комментариев и любых интерфейсов с интерактивными полями. 📣 Code Ready | #фишка

🔥 Дедлайн — 22 октября 🔥 Оформи заявку на Хакатон ИТ-холдинга Т1 сегодня и поборись за призовой фонд 800 000₽ Финишная прямая: подай заявку на Хакатон Т1 Новосибирск. Реальные кейсы, рост и нетворкинг. Команды от 3 до 5 человек. Призовой фонд 800 000 ₽. Завершение регистраций — 22 октября, 23:59 МСК. Принять участие

👩‍💻 Когда нужно быстро сравнить два фрагмента кода! Partial Diff — расширение, которое позволяет мгновенно увидеть разницу между блоками кода. Работает с любыми файлами, от JS-функций до HTML-разметки. Идеально при рефакторинге, тестировании или ревью чужого кода. Минимум действий. Максимум наглядности. 📣 Code Ready | #vscode

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

3 дня. 60 откликов. 1 оффер. Очень интересный кейс произошёл у команды Софи — ии-ассистента для поиска работы. К ним в поддержку написала девушка, которая отписалась от продукта ещё месяц назад:

«Мне прислали оффер!»

Начали разбираться — оказывается, она пользовалась только 3 тестовыми днями. То есть за 3 дня ии-ассистент успел сделать 60 откликов. Потом она отписалась. А уже позже — из этих откликов её позвали на интервью, и одно из них привело к офферу.

«Оффер с той вакансии, куда я сама никогда бы не откликнулась.»

Изначально Аня отменила подписку, так как было дорого. Ребята честно спросили у Ани, считает ли она теперь, что подписка стоит своих денег — и получили утвердительный ответ. И в очередной раз убедились: пока ты боишься, Софи делает. В этом ее сила. Бесплатный доступ откроется уже 21 октября. Подписывайся, чтобы не пропустить ⏳

👩‍💻 Изменяем изображения при помощи CSS! Свойство filter даёт возможность прямо в CSS применять к элементам различные графические эффекты. Например, перекрасить объект, добавить ему необычную тень или использовать SVG в качестве фильтра. Примеры эффектов:

• blur(5px) — создаёт размытие; • brightness(1.2) — делает элемент светлее; • contrast(80%) — уменьшает контраст; • grayscale(100%) — превращает изображение в чёрно-белое; • sepia(60%) — добавляет тёплый винтажный оттенок.

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