Code Ready | Frontend

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

⚡️ Бесплатное обучение фронтенд-разработке с нуля с поддержкой от наставника Опыт в программировании не нужен. На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 3 декабря стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать три фреймворка — Vue, Angular и React Вот план обучения: 💡 с 3 декабря напишете фронтенд для сервиса доставки 💡 с 10 декабря свой киносайт 💡 а с 17 по 21 декабря свою доску объявлений Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду. Поделится способом трудоустройства с помощью ИИ. Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией Подписывайтесь, чтобы участвовать бесплатно Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 👉Участвовать бесплатно Первые уроки уже доступны

👩‍💻 Свойство scroll-snap-align Используется для управления поведением привязки прокрутки. Оно определяет, как элемент внутри контейнера прокрутки будет выравниваться после завершения прокрутки, создавая эффект привязки к заданным точкам. Его основные параметры: • start — элемент выравнивается по началу области прокрутки. • center — выравнивается по центру области прокрутки. • end — выравнивается по концу области прокрутки. • none — отключает эффект привязки. 📣 Code Ready | #свойство

👩‍💻 HTML с нуля до результата КУРС для новичков! В этом интересном курсе будем рассматривать базу для работы с технологией HTML, всё самое необходимое и только то, что применяется каждый день любым профессионалом в сфере веб-разработки!

Ссылочка на видео: YouTube 🖤

📣 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 | #практика

🙂 полезный ресурс для практики фронтенда — BigDevSoon! Это сайт, где можно найти реальные проекты, чтобы прокачать свои навыки в разработке. Здесь представлены разнообразные задачи с реальными требованиями, которые помогут вам улучшить навыки работы с HTML, CSS, JavaScript и другими технологиями. 📌 Даю Ссылочку: BigDevSoon.me 📣 Code Ready | #ресурсы

👩‍💻 Рассмотрим создание голографического фона на CSS! Привет! Сегодня разберем, как создать анимированный голографический фон с плавным переходом цветов, который придаст вашему сайту стильный и динамичный вид. Мы используем только CSS, без дополнительных картинок или текстур, чтобы добиться эффекта плавного цветового сдвига. 📣 Code Ready | #гайд #css

📱 Полезные плагины VS Code для верстки В этом посте я собрал для вас лучшие плагины, которые упростят и ускорят процесс вёрстки. Они помогут автоматически форматировать код, подбирать цвета, оптимизировать изображения и многое другое. 📣 Code Ready | #плагин

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

Нашел для вас лучший ресурс для изучения 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 | #тег