Знаете про классный ресурс для практики — 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 | #курс

👩‍💻 Свойство scroll-snap-align

Используется для управления поведением привязки прокрутки. Оно определяет, как элемент внутри контейнера прокрутки будет выравниваться после завершения прокрутки, создавая эффект привязки к заданным точкам.

Его основные параметры:

• start — элемент выравнивается по началу области прокрутки.
• center — выравнивается по центру области прокрутки.
• end — выравнивается по концу области прокрутки.
• none — отключает эффект привязки.

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

👩‍💻 Ускорь написание своего кода

А ты знал про Codeium? — это мощное расширение для VS Code, которое помогает быстрее писать код. Оно предлагает интеллектуальные подсказки и автозаполнение, основанные на AI. Также плагин поддерживается многими языками программирования.

📣 Code Ready | #плагин

Интересный ресурс для фронтендеров — Web Reference

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

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

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