Code Ready | Frontend

❤️ 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 | #свойство

Программисты из Telegram создали сильнейшие IT- каналы 🐍 Ghostly Python - автоматизируй всё, что можешь. Боты, скрипты, парсеры, утилиты - делаем Python простым и полезным. Уверенный старт для новичков и не только. ☕️ Easy Java - Java без боли. От основ до фреймворков. Просто, понятно и по делу. Если хочешь реально понять язык - тебе сюда. 😎 IT Syndicate - главный хаб для тех, кто живёт IT. GameDev, InfoSec, Frontend, DevOps, AI и многое другое. Готовь мозг, тут будет жарко. 🧡 Ghostly Frontend - фронтенд без лишнего шума. HTML, CSS, JavaScript, React, Vue — всё, что нужно, чтобы создавать быстрые и красивые интерфейсы.

Перемешивание массива на JavaScript! Делаем универсальный способ случайно перемешать элементы массива — идеален для игр, списков и тестов. Создаём исходные данные:

const items = ["🍎", "🍌", "🍇", "🍉", "🍓"];

Реализуем компактный алгоритм Фишера–Йетса:

function shuffle(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

Проверяем работу на примере:

console.log("До:", items);
console.log("После:", shuffle([...items]));

🔥 Простая и надёжная функция - база для рандомизации. 📣 Code Ready | #практика

⚡️ Бесплатное обучение фронтенд-разработке с нуля до React, TypeScript, Next.js — с поддержкой от наставника Подойдёт и новичкам, и тем, кто уже работает с JS и React На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 18 октября стартует бесплтаное обучение, где он на практике поможет разобраться во фронтенде: новикам в HTML/CSS и JavaScript, а тем, кто с опытом — React, TypeScript, Next.js Всего сделаете три проекта: 💡 сайт-портфолио на HTML/CSS 💡 todo-list на React + TS 💡 фронтенд для магазина Озон на JavaScript + Next.js Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля Если опыт есть — будет проще. Сможете набить руку на React, TS, Next 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Что будет кроме уроков: — пошаговый план изучения всего, что нужно современному фронтендеру — способы поиска заказов на фрилансе с помощью ИИ — разыграет годовой доступ к крутому ИИ — расскажет, как взять первый заказ на фрилансе, если на биржах не получается Подписывайтесь, чтобы участвовать, осталось 39 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду ➡️Участвовать бесплатно

😎 CodeCombat — играй и учись одновременно! Сайт, где программирование превращается в приключение: пишешь код, управляешь героем, сражаешься с врагами и проходишь уровни. Осваиваешь переменные, функции, условия и циклы прямо в процессе игры. 📌 Оставляю ссылочку: codecombat.com 📣 Code Ready | #ресурсы

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