❤️ Human Who Codes — блог Николаса Закаса, одного из самых влиятельных программистов в мире JS!

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

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

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

Каждый год пишу итоги, не буду отказываться и сейчас)

2025 выдался не прям продуктивным, но достаточно многое поменялось: контент, аудитория и планы.

На 2026 год главная цель это набрать 50000 подписчиков. Поэтому желаю каждому чтобы новый год был еще лучше!

С наступающим! 🎄

👩‍💻 Быстрый дебаг CSS-границ без инспектора!

Когда вёрстка “плывёт”, удобно временно включить универсальную подсветку границ, чтобы сразу увидеть проблемные блоки и их вложенность.

Вместо того чтобы вручную писать для каждого элемента border: 1px solid red, используйте CSS-переменную и outline (он не влияет на layout):

:root {
  --debug: 1px dashed red;
}

Теперь включаем дебаг в одну строку для любого элемента:

* {
  outline: var(--debug);
}

outline не сдвигает элементы, не ломает размеры и не создаёт переполнений, поэтому дебаг абсолютно точный.

Хочешь быстро отключить? Просто меняем переменную:

:root {
  --debug: none;
}

🔥 Это даёт мгновенный контроль над debug-режимом, без удаления правил по всему файлу.

📣 Code Ready | #совет

Получаем данные случайного пользователя!

RandomUser API удобен для фронтенда: один запрос — и есть JSON с реалистичным профилем. В нормальном ответе приходит объект { results: [...] }, где results — массив профилей.

Нам обычно нужен первый пользователь:

async function getRandomUser() {
  const res = await fetch("https://randomuser.me/api/");
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const { results, error } = await res.json();
  if (error) throw new Error(error);
  if (!results?.length) throw new Error("No results");
  return results[0];
}

Достаём поля через деструктуризацию. Для UI: picture.medium — аватар среднего размера, thumbnail — для списков:

getRandomUser().then(({ name, email, location, picture }) => {
  const fullName = `${name.first} ${name.last}`;
  console.log(`Имя: ${fullName} | Страна: ${location.country}`);
  console.log(`Аватар (medium): ${picture.medium} | Email: ${email}`);
}).catch(console.error);

Когда нужен набор моков — используем ?results=N. API поддерживает крупные батч-запросы (до 5000 пользователей за один вызов), что эффективнее, чем множество одиночных запросов:

async function getRandomUsers(count = 5) {
  const res = await fetch(`https://randomuser.me/api/?results=${count}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const { results, error } = await res.json();
  if (error) throw new Error(error);
  if (!results?.length) throw new Error("No results");
  return results;
}

getRandomUsers(3).then(list => console.log(list));

🔥 При массовой загрузке учитывайте rate-limit и размер ответа. Кэшируйте профили, если они нужны повторно в рамках сессии.

📣 Code Ready | #практика

💅 Нашёл интересную и полезную статью на Хабре: «Заменяем JS обычным HTML»!

В этой статье вы:
• Узнаете, как заменить привычные JavaScript-фичи html/css;
• Реализуете интерактивные элементы (аккордеоны, раскрывающиеся блоки);
• Научитесь строить UI-компоненты вроде автодополнения, модальных окон и popover-меню через современные html-атрибуты;
• Получите примеры, которые позволяют снижать зависимость от JavaScript там, где возможно.

🔊 Продолжайте читать на Habr!

📣 Code Ready | #статья

👍 W3Schools — простой старт для освоения веб-технологий!

Хочешь быстро понять базу по HTML, CSS, JavaScript, и др. Этот сайт отлично подойдёт как справочник и тренажёр. Материалы разбиты по небольшим блокам с примерами кода, которые можно сразу запустить в браузере, это помогает не просто читать, а реально видеть, как работает код. Идеально, когда нужно понять новую тему или быстро найти ответ на конкретный вопрос.

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

📣 Code Ready | #ресурс

Отключаем тап-хайлайт (системный flash-эффект) для кнопок и ссылок!

На мобильных устройствах при тапе часто появляется серая/синяя подсветка, в кастомных UI это может выглядит как визуальный баг:

a, button {
  -webkit-tap-highlight-color: transparent;
}

Чтобы интерактивность не пропала, добавьте свой предсказуемый feedback:

a:active, button:active {
  opacity: .7; /* базовый tap-feedback, работает в продакшене для кликабельных элементов */
}

Нюансы: :active на iOS иногда капризен на нестандартных элементах, но для a и button, надёжный и простой вариант.

🔥 В итоге убираем системный flash и даём контролируемый feedback.

📣 Code Ready | #совет

👩‍💻 Пишешь на Next.js и устал каждый раз вручную набирать однотипные фрагменты?

Next JS/TS Snippets — расширение, которое даёт готовые сниппеты для самых распространённых конструкций: маршруты, API-роуты, компонентные страницы, layout, middleware и многое другое, причем сразу с TypeScript-поддержкой. Экономит время, уменьшает количество опечаток и делает разработку проекта куда быстрее и приятнее.

📣 Code Ready | #vscode

👩‍💻 Центрируйте что угодно без flex — через place-items или place-content!

Многие до сих пор центрируют так:

.box {
  display: grid;
  justify-content: center;
  align-content: center;
}

Работает, но можно короче:

.box {
  display: grid;
  place-content: center;
}

place-content: center центрирует весь контент сетки как блок по обеим осям.

Если хотите центрировать элемент внутри сетки (типичный случай для модалок и баннеров):

.box {
  display: grid;
  place-items: center;
}

А если центрируете конкретный grid-item:

.child {
  place-self: center;
}

Работает только если .child прямой наследник grid-контейнера (то есть grid-item).

🔥 Grid — для 2D-выравнивания, flex — для линейных потоков. Используй по задаче layout будет чище и предсказуемее.

📣 Code Ready | #совет

📂 Напоминалка для работы с CSS Grid!

Например, justify-items выравнивает элементы внутри ячеек по горизонтали, а align-items делает то же самое по вертикали.

На картинке — свойства и значения CSS Grid, которые действительно стоит держать под рукой.

Сохрани, чтобы не забыть!

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

Динамический импорт модулей в браузере (ES Modules)!

Браузеры давно поддерживают загрузку модулей в рантайме через import(). Это позволяет не грузить весь JS сразу: ленивые фичи, плагины, тяжёлые виджеты, админ-разделы SPA — всё подгружается по запросу и кэшируется как обычный ESM-модуль.

Базовый import в консоли:

import("/path/to/module.js")
  .then(m => console.log("Модуль загружен:", m))
  .catch(e => console.error("Ошибка загрузки:", e));

Импорт и сразу использование экспорта:

import("/path/to/math.js")
  .then(({ sum }) => console.log("Sum:", sum(2, 3)))
  .catch(console.error);

Ленивая загрузка по клику на конкретный элемент UI:

document.querySelector("#confettiBtn")?.addEventListener("click", () => {
  import("/path/to/confetti.js")
    .then(m => m.run())
    .catch(console.error);
});

Простая (приблизительная) проверка поддержки динамического import:

const supportsDynamicImport = (() => {
  try { new Function("import('data:text/javanoscript,')"); return true; }
  catch { return false; }
})();
console.log("Dynamic import support:", supportsDynamicImport);

Важно: import() асинхронный, UI не блокируется; ошибки обрабатываются в .catch(), модуль кэшируется браузером.

Короткий пример с обработкой ошибок:

import("/path/to/user-profile.js")
  .then(m => m.init())
  .catch(e => console.error("Ошибка загрузки модуля:", e));

🔥 Динамический импорт — простой способ держать код чистым, архитектуру ленивой, а старт страницы быстрым, используя стандартный JavaScript и нативный ESM.

📣 Code Ready | #практика

👩‍💻 Пытаешься не потеряться среди сотен строк?

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

📣 Code Ready | #vscode