Tabnine — инструмент на основе ИИ, который предоставляет автодополнение кода для различных языков программирования, помогая разработчикам ускорять процесс написания кода и повышать его качество.

📌 Ссылочка: abnine.com

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

👩‍💻 Используем таймеры в JavaScript

Таймеры — это функции высшего порядка, при помощи которых можно откладывать или повторять выполнение других функций.

Рассмотрим 5 примеров использования:

1. setTimeout — для однократного выполнения кода с задержкой. Принимает функцию и задержку в миллисекундах.

setTimeout(() => {
  console.log('This message is displayed after 2 seconds');
}, 2000);

2. setInterval — для многократного выполнения кода с фиксированным интервалом. Принимает функцию и интервал в миллисекундах.

setInterval(() => {
  console.log('This message is displayed every 3 seconds');
}, 3000);

3. clearTimeout — отменяет выполнение функции, запланированной через setTimeout. Требует идентификатор таймера, возвращаемый setTimeout.

const timeoutId = setTimeout(() => {
  console.log('This message will not be displayed');
}, 5000);
clearTimeout(timeoutId);

4. clearInterval — останавливает выполнение функции, запланированной через setInterval. Требует идентификатор таймера, возвращаемый setInterval.

const intervalId = setInterval(() => {
  console.log('This message will stop displaying after 9 seconds');
}, 1000);
setTimeout(() => {
  clearInterval(intervalId);
}, 9000);

5. requestAnimationFrame — синхронизирует выполнение функции с обновлением экрана. Используется для создания плавных анимаций.

function animate() {
  console.log('Animation frame');
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

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

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

• Ctrl + F2 — Выделяет все вхождения текущего слова.

• Alt + ↑ / ↓ — Переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш.

• Shift + Tab — Удаляет отступы.

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

Эмуляция медленного интернета с помощью 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 | #техсобес