NEW BOT Телеграм, страница

📂

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

Например, <head> содержит метаданные страницы, теги вроде <div> и <span> используются для структурирования разметки, а <h1>–<h6> — для иерархии заголовков.

На картинке — компактная шпаргалка с базовыми HTML-тегами: структура документа, текстовая разметка, списки, таблицы, формы и основные события форм.

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

📣

Code Ready | #ресурсы

Please open Telegram to view this post

VIEW IN TELEGRAM

👍18🔥9❤6🤝2

2.42K views06:34

Универсальное чтение файлов: текст, JSON и бинарные данные!

Когда пользователь загружает файл обычно начинают писать разные обработчики. Получается много дублирования.

Можно сделать универсальный ридер:

const readFile = (file, as = 'text') =>
  new Promise(r => {
    const fr = new FileReader();
    fr.onload = () => r(fr.result);
    fr[`readAs${as[0].toUpperCase() + as.slice(1)}`](file);
  });

Теперь можно читать файл как текст:

const txt = await readFile(file, 'text');

Читаем как JSON:

const obj = JSON.parse(await readFile(file, 'text'));

Читаем картинку в виде base64:

const base64 = await readFile(file, 'dataURL');

Читаем бинарные данные:

const buf = await readFile(file, 'arrayBuffer');

🔥 Одна функция заменяет несколько обработчиков чтения файлов.

📣

Code Ready | #совет

Please open Telegram to view this post

VIEW IN TELEGRAM

🤝16❤8🔥6👍1

2.56K views10:34

🤝24😁16🔥6❤2

2.51K views12:34

📱

Mutation Observer API — контроль и реакция на изменения DOM!

В этой шпаргалке собраны основные методы и свойства Mutation Observer API для отслеживания структурных и атрибутных изменений DOM. Здесь отражены инструменты, позволяющие наблюдать за добавлением и удалением узлов, изменениями атрибутов и текстового содержимого, а также управлять жизненным циклом наблюдателя в прикладных сценариях.

📣

Code Ready | #шпора

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥15👍14🤝9❤1

2.56K views16:12

0:11

✍️ NodeBestPractices — список лучших шаблонов и паттернов Node JS!

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

Оставляю ссылочку: GitHub 📱

📣

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

Please open Telegram to view this post

VIEW IN TELEGRAM

❤18🔥9👍7

2.6K views07:12

0:42

0:28

0:19

2.85K views09:12

Отложенный запуск функции (debounce)!

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

Создадим универсальный debounce-хелпер:

function debounce(fn, delay = 300) {
  let timerId = null;

  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn(...args), delay);
  };
}

Используем debounce для поиска по вводу:

const input = document.querySelector("#search");

function handleSearch(value) {
  console.log("Запрос:", value);
}

const debouncedSearch = debounce(handleSearch, 500);

input.addEventListener("input", (e) => {
  debouncedSearch(e.target.value);
});

Теперь обработчик вызовется только когда пользователь закончит вводить текст.

Добавим ещё пару практических кейсов.

Сохранение черновика формы:

const saveDraft = debounce((form) => {
  console.log("Сохраняем черновик:", form);
}, 1000);

Оптимизация обработчика resize:

window.addEventListener(
  "resize",
  debounce(() => {
    console.log("Пересчитываем layout...");
  }, 200)
);

🔥 Один универсальный инструмент — и меньше нагрузки на фронтенд, меньше дерганий UI и никаких лишних запросов.

📣

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

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥21👍13❤9

2.57K views11:12

👩‍💻

Выделяем клавиши и комбинации с помощью тега!

Тег <kbd> обозначает пользовательский ввод: с клавиатуры, голосом, указателем или другим образом. <kbd> никак не влияет на скринридеры и другие вспомогательные технологии. Они рассказывают о содержимом тега как об обычном тексте без роли.

Где особенно полезен:

• Инструкции по работе с интерфейсом;
• Подсказки горячих клавиш;
• Руководства для разработчиков;
• Отображение команд, вводимых вручную.

По умолчанию браузеры выводят <kbd> моноширинным шрифтом.

📣

Code Ready | #атрибут

Please open Telegram to view this post

VIEW IN TELEGRAM

👍18❤9🔥8

2.73K views16:12

Получаем предыдущий и следующий элементы в массиве — будто «крутим карусель»

Иногда нужно перемещаться по массиву: переключать слайды, шагать по списку товаров, листать подсказки. Сделаем мини-утилиту, которая даёт соседние элементы по индексу.

Базовая функция:

function neighbors(arr, index) {
  return {
    prev: arr[index - 1] ?? null,
    next: arr[index + 1] ?? null
  };
}

Использование:

const items = ["A", "B", "C", "D"];

console.log(neighbors(items, 1));
// { prev: "A", next: "C" }

Сделаем версию с циклическим режимом — как в каруселях:

function cycleNeighbors(arr, index) {
  const len = arr.length;
  return {
    prev: arr[(index - 1 + len) % len],
    next: arr[(index + 1) % len]
  };
}

Использование:

console.log(cycleNeighbors(items, 0));
// { prev: "D", next: "B" }

🔥 Мини-инструмент, который сильно упрощает навигацию по массивам: слайдеры, шаговые формы, клавиатурная навигация, циклические списки — всё становится на порядок чище.

📣

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

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥15❤12👍10

2.71K views08:12

👩‍💻

Делаем компоненты универсальными одной строкой!

До сих пор многие привязывают стили к направлению текста:

.card {
  padding-left: 16px;
  padding-right: 16px;
}

Это работает, пока интерфейс строго LTR и не появляется RTL, локализация или переиспользование компонентов.

Современный CSS решает это нативно, логическими свойствами:

.card {
  padding-inline: 16px;
}

padding-inline автоматически учитывает направление текста и заменяет padding-left + padding-right.

То же самое работает для вертикали:

.card {
  padding-block: 12px;
}

🔥

padding-block — это padding-top + padding-bottom, но без жёсткой привязки к физическим сторонам.

📣

Code Ready | #совет

Please open Telegram to view this post

VIEW IN TELEGRAM

👍19🔥11🤝9❤3

2.55K views08:12

0:08

0:04

0:03