😎 CodeCombat — играй и учись одновременно!

Сайт, где программирование превращается в приключение: пишешь код, управляешь героем, сражаешься с врагами и проходишь уровни. Осваиваешь переменные, функции, условия и циклы прямо в процессе игры.

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

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

Перемешивание массива на 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 | #практика

👩‍💻 Изменяем изображения при помощи CSS!

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

Примеры эффектов:

• blur(5px) — создаёт размытие;

• brightness(1.2) — делает элемент светлее;

• contrast(80%) — уменьшает контраст;

• grayscale(100%) — превращает изображение в чёрно-белое;

• sepia(60%) — добавляет тёплый винтажный оттенок.

Фильтры можно применить не только к картинкам, но и к любым непустым элементам.

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

👩‍💻 Когда нужно быстро сравнить два фрагмента кода!

Partial Diff — расширение, которое позволяет мгновенно увидеть разницу между блоками кода. Работает с любыми файлами, от JS-функций до HTML-разметки. Идеально при рефакторинге, тестировании или ревью чужого кода. Минимум действий. Максимум наглядности.

📣 Code Ready | #vscode

Отслеживаем комбинации клавиш на странице!

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

Шаг 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 | #практика

👩‍💻 Пишем блоки и текст не слева направо, а справа налево!

Свойство writing-mode определяет не просто направление текста, а всю «осевую систему» страницы или контейнера.

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

• horizontal-tb — строки идут горизонтально, слева направо, а блоки сверху вниз.

• vertical-rl — строки идут вертикально сверху вниз, а блоки справа налево.

• vertical-lr — строки идут вертикально сверху вниз, а блоки слева направо.

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

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

Это меняет не только направление текста, но и порядок блоков.

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