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

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/javascript,')"); 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

Proxy как отладочный “защитный экран” для объектов!

Иногда хочется увидеть каждое обращение к объекту, но писать вручную лог на каждый .prop долго и не всегда удобно.

const user = { name: 'Sam', age: 28 };

Оборачиваем объект в Proxy и ловим любые GET/SET автоматически:

const user = watch({ name: 'Sam', age: 28 });

Теперь любое чтение или запись покажется в консоли интерактивно:

user.age;      // GET - age
user.age = 30; // SET - age 30

Можно быстро сделать защиту от несуществующих полей (экономит время при отладке чужого кода):

const safe = obj => new Proxy(obj, {
  get: (t,p) => p in t ? t[p] : (console.warn('No key:',p), undefined)
});
safe({ a: 1 }).b;

🔥 Proxy даёт способ следить за объектом и ловить доступ к полям без переписывания исходного кода. Удобно, когда отлаживаешь динамику или работаешь с чужими структурами.

📣 Code Ready | #совет

📂 Напоминалка для работы с React.js!

Например, useState помогает хранить состояние компонента, а useEffect — работать с побочными эффектами и запросами к API.

На картинке — основные темы и приёмы, которые чаще всего используются в React-разработке: хуки, рендеринг, формы, роутинг, стилизация и оптимизация.

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

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

Рваные анимации из-за неправильной синхронизации с рендер-циклом!

Даже простая анимация может дёргаться и вести себя по-разному на разных устройствах. Частая причина — попытка управлять визуальными обновлениями через таймеры.

Распространённая ошибка:

let y = 0;

setInterval(() => {
  y += 5;
  el.style.transform = `translateY(${y}px)`;
}, 16);

setInterval работает независимо от цикла отрисовки браузера, из-за чего обновления происходят неравномерно.

Корректный подход:

let y = 0;

function animate() {
  y += 5;
  el.style.transform = `translateY(${y}px)`;
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

requestAnimationFrame синхронизирует обновления с repaint браузера. Однако фиксированный шаг по-прежнему делает скорость зависимой от FPS.

Анимация, зависящая от времени:

let y = 0;
let last = performance.now();
const speed = 200; // px/sec

function animate(now) {
  const delta = now - last;
  last = now;

  y += (delta / 1000) * speed;
  el.style.transform = `translateY(${y}px)`;

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

Теперь скорость стабильна при любом FPS и refresh rate.

🔥 Вывод: requestAnimationFrame — это контракт с рендер-циклом браузера. Игнорирование его почти всегда заканчивается нестабильным UI.

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

👍 Omatsuri — набор полезных инструментов для фронтенд-разработчика!

Это целый сборник небольших онлайн-утилит, которые помогают в повседневной работе. Здесь можно генерировать и копировать CSS-градиенты, тени, clip-path, SVG-паттерны и другие визуальные штуки, сразу с готовым кодом. Удобный сайт, когда нужно быстро поэкспериментировать с визуалом или просто не писать всё с нуля.

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

📣 Code Ready | #ресурс

👩‍💻 Абсолютное позиционирование с заполнением области!

При position: absolute элемент не влияет на размеры родителя. Если контейнер не имеет высоты (контент не растягивает, высота не задана), то и растянутый overlay будет нулевой высоты, потому что сам контейнер нулевой, а не из-за схлопывания absolute.

Даём контекст позиционирования:

.container {
  position: relative;
}

Теперь абсолютный слой можно растянуть по сторонам:

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Но короче и декларативнее:

.overlay {
  position: absolute;
  inset: 0;
}

🔥 inset: 0 делает то же, что 4 свойства, и отлично подходит для overlay-слоёв, масок и кликабельных зон, не требуя width/height и не создавая побочный overflow, если внутри ничего не выходит за границы.

📣 Code Ready | #совет