👩‍💻 Оптимизация производительности с помощью debounce в JavaScript

1. Что такое debounce?
Debounce — это техника, позволяющая ограничить частоту выполнения функции, предотвращая её вызовы на каждом событии. Это полезно при работе с часто происходящими событиями, такими как ввод текста или прокрутка страницы.

let timeout;
function debounce(func, delay) {
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

2. Как работает debounce?
Debounce задерживает выполнение функции, пока событие не прекратится на заданный промежуток времени. Это особенно полезно для предотвращения частых запросов на сервер, например, в поле поиска.

const handleInput = debounce(function() {
  console.log('Ввод обработан');
}, 500);

document.getElementById('search').addEventListener('input', handleInput);

3. Использование debounce для событий input
Когда пользователь вводит текст в поле, можно использовать debounce, чтобы отправить запрос на сервер только после того, как пользователь перестанет вводить текст на 500 миллисекунд.

document.getElementById('search').addEventListener('input', debounce(function(e) {
  console.log('Поиск для:', e.target.value);
}, 500));

4. Преимущества использования debounce

• Снижается количество выполняемых функций.
• Улучшает производительность, избегая лишних вычислений.
• Эффективен для поисковых форм, автодополнения и других интерактивных элементов.

📣 Code Ready | #техсобес

👩‍💻 Тег sub

Тег <sub> в HTML используется для создания текста, который отображается в виде подстрочного (или нижнего) индекса.

Этот тег часто используется для математических выражений (например, химических формул) или для обозначения сносок в тексте.

📣 Code Ready | #тег

👩‍💻 Полезные горячие клавиши VSCode

• Ctrl + Shift + K — Удаляет текущую строку целиком.

• Shift + Alt + F — отформатировать листинг. Быстро выровняет код, чтобы он стал более читаемым, понятным и красивым.

• Ctrl + D — множественное редактирование. Изменит одинаковый код сразу в нескольких местах.

📣 Code Ready | #клавиши

Ошибки при сравнении объектов

В JavaScript при использовании операторов == или === сравниваются ссылки на объекты, а не их содержимое.

const obj1 = { a: 1 };
const obj2 = { a: 1 };

console.log(obj1 == obj2);  // false
console.log(obj1 === obj2); // false

Потому что каждый объект в памяти уникален, даже если их свойства идентичны.

Чтобы избежать этого, для сравнения содержимого используем глубокое сравнение (например, с помощью JSON.stringify).

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true

Ещё в JavaScript NaN никогда не равен даже самому себе, что может создать путаницу.

const obj = { value: NaN };
console.log(obj.value === NaN); // false

Используем isNaN() для проверки значений.

console.log(isNaN(obj.value)); // true

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

Знаете про классный ресурс для практики — DevChallenges? А я вам расскажу про него!

Это платформа, где можно решать реальные задачи веб-разработки с уже подготовленными дизайнами. Отличный способ освоить работу с интерфейсами, версткой и JavaScript.

📌 Ссылочка: devchallenges.io

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

👩‍💻 Управление соотношением сторон с помощью aspect-ratio

Свойство aspect-ratio в CSS позволяет задавать соотношение ширины к высоте для элемента, чтобы поддерживать его пропорции независимо от содержимого и размера контейнера.

Оно принимает значение в формате width / height:

• 1 / 1 — квадратный элемент.
• 16 / 9 — широкоэкранный элемент, как для видео.
• 4 / 3 — соотношение для стандартного экрана.

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

Нашел для вас лучший ресурс для изучения JavaScript

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

📌 Ссылочка: learn.javascript.ru

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

🙂 полезный ресурс для практики фронтенда — BigDevSoon!

Это сайт, где можно найти реальные проекты, чтобы прокачать свои навыки в разработке.

Здесь представлены разнообразные задачи с реальными требованиями, которые помогут вам улучшить навыки работы с HTML, CSS, JavaScript и другими технологиями.

📌 Даю Ссылочку: BigDevSoon.me

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

Опасности работы с пользовательским вводом 

Работа с HTML-формами и пользовательским вводом — важная часть фронтенд-разработки, но именно здесь чаще всего возникают баги и уязвимости.

Рассмотрим две проблемы: утечка данных и некорректная обработка событий. 

Неэкранированные данные в HTML — при отображении данных пользователя напрямую в HTML можно случайно открыть двери для XSS-атак, вот пример:

<div id="output"></div>
<script>
  const userInput = "<script>alert('XSS')</script>";
  document.getElementById("output").innerHTML = userInput;
</script>

Вместо innerHTML используйте безопасные методы, такие как textContent

document.getElementById("output").textContent = userInput;

Теперь любой ввод будет отображаться как текст, а не как исполняемый код!

Двойное срабатывание событий - ошибки часто случаются, если обработчики событий добавляются несколько раз, что приводит к неожиданным результатам: 

const button = document.querySelector("button");
button.addEventListener("click", () => console.log("Clicked!"));
// Где-то в коде:
button.addEventListener("click", () => console.log("Clicked again!"));

Теперь на каждое нажатие кнопки будут выводиться две строки вместо одной

Для решения проблемы, перед добавлением нового обработчика удаляйте старый: 

button.onclick = () => console.log("Clicked!");

🔥 Такие простые меры позволят сделать ваш фронтенд-код безопасным и предсказуемым

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

👩‍💻 HTML с нуля до результата КУРС для новичков!

В этом интересном курсе будем рассматривать базу для работы с технологией HTML, всё самое необходимое и только то, что применяется каждый день любым профессионалом в сфере веб-разработки!

Ссылочка на видео: YouTube 🖤

📣 Code Ready | #курс