Эмуляция медленного интернета с помощью devtools

Задумывались, как ваш сайт выглядит при слабом интернет-соединении? С помощью DevTools можно легко протестировать, как работает лендинг или приложение при условиях "медленного интернета".

Как это подключить:

• Откройте DevTools (F12) и перейдите на вкладку Network.

• В верхней части выберите пресет, например, Slow 3G или Offline, чтобы проверить работу сайта без интернета.

• Обновите страницу и наблюдайте, как элементы загружаются, и какие ресурсы тормозят.

📣 Code Ready | #devtools

CSS Battle — это интерактивная платформа, где разработчики соревнуются в решении задач на минимизацию CSS-кода, создавая визуальные элементы с наименьшим количеством символов.

📌 Ссылочка: cssbattle.dev

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

👩‍💻 Оптимизация производительности с помощью 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 | #ресурсы