Code Ready | Frontend

Нашел для вас лучший ресурс для изучения JavaScript Это подробный учебник для изучения JS с нуля до продвинутого уровня. Здесь вы найдете объяснения сложных тем простым языком, интерактивные задачи и упражнения, чтобы сразу закрепиться на практике. 📌 Ссылочка: learn.javascript.ru 📣 Code Ready | #ресурсы

👩‍💻 Управление соотношением сторон с помощью aspect-ratio Свойство aspect-ratio в CSS позволяет задавать соотношение ширины к высоте для элемента, чтобы поддерживать его пропорции независимо от содержимого и размера контейнера. Оно принимает значение в формате width / height:

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

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

Господи, да в чём проблема стать фронтендером? Подписался на эти три канала: 👉 Фронтенд 👉 Верстка 👉 Node.JS Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ! Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.

Знаете про классный ресурс для практики — DevChallenges? А я вам расскажу про него! Это платформа, где можно решать реальные задачи веб-разработки с уже подготовленными дизайнами. Отличный способ освоить работу с интерфейсами, версткой и JavaScript. 📌 Ссылочка: devchallenges.io 📣 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 | #практика

📁🕵️ В Windows есть папка, которая собирает на вас компромат! IT ВЕДОМСТВО опять предупредило своих подписчиков, как разгрузить компьютер от слежки и лагов системы. А ещё они рассказывает о признаках майнеров, как удалить трояны и порно-баннеры за 5 минут Почему греется проц без запущенных приложений и загружен HDD или SSD. 💻 Подпишитесь на IT ВЕДОМСТВО — залог цифровой гигиены и компьютерной грамотности

Ошибки при сравнении объектов В 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 | #практика

👩‍💻 Полезные горячие клавиши VSCode • Ctrl + Shift + K — Удаляет текущую строку целиком. • Shift + Alt + F — отформатировать листинг. Быстро выровняет код, чтобы он стал более читаемым, понятным и красивым. • Ctrl + D — множественное редактирование. Изменит одинаковый код сразу в нескольких местах. 📣 Code Ready | #клавиши

UnDistracted — это расширение для браузера, которое помогает пользователям минимизировать отвлекающие факторы, скрывая ленты новостей и видео на Facebook и YouTube, чтобы сосредоточиться на более продуктивной работе. ⬇️ Скачать расширение ➡️ Roadmap Ready | #расширение

Сегодня у админа хорошее настроение, поэтому ловите 36 курсов по программированию от Гугла Покупал их год назад, но инфа актуальна до сих пор: Гайды по Python Гайды по JavaScript Гайды по Java Гайды по C# Гайды по PHP Гайды по C++ Гайды по TypeScript Гайды по Go Гайды по Swift Гайды по Kotlin Гайды по Ruby Гайды по Rust Гайды по Scala Гайды по Perl Гайды по R Полный список... Аналогов этому ресурсу больше нет, не благодарите.

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

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

📣 Code Ready | #тег

Чтобы расти в профессии и брать на себя новые роли, нужно не бояться пробовать новое. Например, новое обучение. Если попробовать курс бесплатно, можно проверить, подходит ли он вам. Тогда пробовать новое уже не так страшно. Практикум собрал большую экспертизу Яндекса: на курсах вы освоите новые скилы на практике, получите обратную связь от опытной команды и пополните ваше портфолио. Вот несколько наших курсов: ✅ Мидл Python-разработчик ✅ Мидл Java-разработчик ✅ Мидл Android-разработчик ✅ Мидл фронтенд-разработчик Получите скидку 20% после прохождения первой темы любого курса. Она бесплатная🔥

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

👩‍💻 Динамическая работа с DOM в JavaScript DOM — это интерфейс, позволяющий JavaScript взаимодействовать со структурой HTML-документа. С помощью DOM вы можете находить элементы страницы, изменять их содержимое и внешний вид, а также добавлять или удалять узлы. Основные возможности:

• Поиск элементов с помощью document.getElementById и document.querySelector. • Изменение контента и стилей с помощью свойств textContent и style. • Создание и удаление элементов методами createElement и remove.

📣 Code Ready | #гайд #js

Закрытый клуб для айтишников FAANG School, чьи выпускники работают в Яндексе, СБЕРЕ и других гигантах, запустили бесплатное сообщество для всех, кто изучает Java. Общайся в ламповом чате с такими же людьми «в теме», получай фидбек у опытных разрабов и черпай практические рекомендации от экспертов школы. В чате уже больше 10 000 человек, а новенькие, которые подключатся сейчас, получат доступ к большой библиотеке Java Junior с полезными материалами: – Пошаговая RoadMap по Java – Мануал по Docker. Основные команды и концепции – Микросервисы. Вопросы с собеседований – Шпаргалка по Kafka – Инструкция по работе с Git – Подробный гайд, как найти работу в IT без опыта – Подборка платформ с вакансиями для java-разработчиков Вступай сейчас. Открыли доступ всего на 24 часа!

Закрытый клуб для айтишников FAANG School, чьи выпускники работают в Яндексе, СБЕРЕ и других гигантах, запустили бесплатное сообщество для всех, кто изучает Java. Общайся в ламповом чате с такими же людьми «в теме», получай фидбек у опытных разрабов и черпай практические рекомендации от экспертов школы. В чате уже больше 10 000 человек, а новенькие, которые подключатся сейчас, получат доступ к большой библиотеке Java Junior с полезными материалами: – Пошаговая RoadMap по Java – Мануал по Docker. Основные команды и концепции – Микросервисы. Вопросы с собеседований – Шпаргалка по Kafka – Инструкция по работе с Git – Подробный гайд, как найти работу в IT без опыта – Подборка платформ с вакансиями для java-разработчиков Вступай сейчас. Открыли доступ всего на 24 часа!

CSS Battle — это интерактивная платформа, где разработчики соревнуются в решении задач на минимизацию CSS-кода, создавая визуальные элементы с наименьшим количеством символов. 📌 Ссылочка: cssbattle.dev 📣 Code Ready | #ресурсы

👩‍💻 Эффект дождевых капель Привет! Сегодня создадим эффект дождевых капель с использованием Canvas API. Капли будут падать с верхней части экрана и при этом постепенно исчезать, создавая эффект дождя.

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

📣 Code Ready | #гайд #js

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

• Откройте DevTools (F12) и перейдите на вкладку Network. • В верхней части выберите пресет, например, Slow 3G или Offline, чтобы проверить работу сайта без интернета. • Обновите страницу и наблюдайте, как элементы загружаются, и какие ресурсы тормозят.

📣 Code Ready | #devtools

👩‍💻 Полезные горячие клавиши VSCode • Ctrl + F2 — Выделяет все вхождения текущего слова. • Alt + ↑ / ↓ — Переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш. • Shift + Tab — Удаляет отступы. 📣 Code Ready | #клавиши