Code Ready | Frontend

✅ Создание анимации кадрирования фото У нас есть два отличных свойства: object-fit и object-position. С их помощью можно изменять размеры изображения, не влияя на соотношение его сторон.

<input type="checkbox"/> <br>
<img src="img.png" alt="img"/>

img {
  width: 330px;
  height: 200px;
  transition: 2s;
}
  input:checked + br + img {
  width: 500px;
  height: 400px;
  object-fit: cover;
  object-position: left-top;
  transition: width 2s, height 3s;
}

👉 @code_ready | #обучение #css

Привет! Хочешь научиться хорошо и быстро верстать? Тогда канал «Будни разработчика» для тебя! Подпишись, и узнаешь: ➕ как влиться во фронтенд ➕ как организовать работу ➕ как не делать фигню Ждём! ⬇️

✅ Эффект размытия фона при наведении Если вы хотите добавить интересный эффект при наведении на картинку на вашем веб-сайте, то эффект размытия фона - лучшее решение. Это позволяет сфокусировать внимание пользователя на картинке и сделать ее более выделенной. 😸 Готовый код для реализации этой анимации, я оставлю в моем репозитории на GitHub 👉 @code_ready | #github

⚡️Легкий способ получать свежие обновлении и следить за трендами в разработке на вашем языке. Находите свой стек и подписывайтесь: Хакинг: t.me/linuxkalii Javascript: t.me/javascriptv Машинное обучение: t.me/ai_machinelearning_big_data АНАЛИЗ Данных: t.me/data_analysis_ml Linux: t.me/linuxacademiya Java: t.me/javatg Базы данных: t.me/sqlhub C++ t.me/cpluspluc Golang: t.me/Golang_google React: t.me/react_tg C#: t.me/csharp_ci Мобильная разработка: t.me/mobdevelop Docker: t.me/+0WdB4uvOwCY0Mjdi Python: t.me/pythonl Rust: t.me/rust_code PHP: t.me/phpshka Android: t.me/android_its Big Data: t.me/bigdatai Devops: t.me/devOPSitsec Собеседования МЛ: t.me/machinelearning_interview Python подготовка с собесу: t.me/python_job_interview МАТЕМАТИКА: t.me/data_math Frontend: t.me/front 💼 Папка с вакансиями: t.me/addlist/_zyy_jQ_QUsyM2Vi Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy Папка ML: https://t.me/addlist/2Ls-snqEeytkMDgy Папка FRONTEND: https://t.me/addlist/mzMMG3RPZhY2M2Iy 😆ИТ-Мемы: t.me/memes_prog 🇬🇧Английский: t.me/english_forprogrammers 🧠ИИ: t.me/vistehno 📕Ит-книги бесплатно: https://t.me/addlist/BkskQciUW_FhNjEy

✅ Строим диаграммы прямо в VS Code Плагин Draw.io Integration позволяет строить множество различных диаграмм, связанных с вашим кодом рядом с проектом. Для его работы необходимо установить плагин, после создать в нужной папке файл с расширением .drawio 👉 @code_ready | #плагин

✅ Как работает JSON.parse() в JS? Функция JSON.parse: Преобразует JSON-строку (текст, форматированный в соответствии с текущим стандартом) в объект или значение JavaScript Она также может принимать второй аргумент — функцию, которая будет вызываться для каждого свойства объекта, возвращаемого функцией. Этот аргумент является необязательным. 👉 @code_ready | #функция #js

✅ Полезные горячие клавиши VSCode • Shift + Del — удаляет строку целиком. Не нужно будет выделять мышкой всю строку и потом нажимать Backspace. • Ctrl + L — выделяет всю строку целиком. Теперь копипастить еще проще. 👉 @code_ready | #клавиши

✅ Создание кнопки для вырезания текста Задача простая — вырезать текст из какого-то блока нажатием кнопки. Довольно таки удобно, вместо выделения и копирования просто нажать одну кнопку и нужный текст уже в буфере обмена.

 <textarea type="text" class="content"></textarea>
 <button type="button" class="cut">Вырезать</button>

// Находим кнопку с классом "cut" и добавляем обработчик события "click"
document.querySelector(".cut").addEventListener("click", () => {
  // Получаем текст из элемента с классом "content"
  const txt = document.querySelector(".content").value;
  // Записываем текст в буфер обмена с помощью Clipboard API
  navigator.clipboard.writeText(txt).then(() => {
    // После успешной записи текста в буфер обмена очищаем поле ввода
  document.querySelector(".content").value = "";});
});

👉 @code_ready | #обучение #js

✅ Шпаргалка по работе с DOM Данная шпаргалка предоставляет основные команды для выбора, изменения и управления элементами веб-страницы в JavaScript. Включает в себя операции с текстовым и HTML-содержимым. 👉 @code_ready | #js #шпаргалка

– Ты результат своей работы видишь? – Нет. – А он есть. И чтобы исправить ситуацию — пробуйте свои силы во фронтенд-разработке на двухнедельном подготовительном курсе «Frontend-разработчик» от Хекслета. Здесь даже результат обучения виден сразу, ведь практика на курсе начнется уже в первый день. Еще вас ждут: – 72 онлайн-урока; – 4 живых вебинара; – 24 часа поддержки в закрытом Telegram-чате. А также отличная скидка – всего 990 рублей вместо 3 990! ⏰ Старт уже 13 июня! Реклама. ООО "ХЕКСЛЕТ РУС". ИНН 7325174845. erid:LjN8KQ89h