Code Ready | Frontend

👩‍💻 Свойство shape-outside Свойство shape-outside задает форму, по которой текст обтекает элемент. Это позволяет создавать уникальные текстовые обтекания, основанные на различных формах, таких как круги, эллипсы или многоугольники. Параметры свойства: • circle (radius at position) — круг с заданным радиусом и позицией. • ellipse (radius-x radius-y at position) — эллипс с заданными радиусами и позицией. • polygon (point1, point2 ...) — многоугольник, где каждая точка указывается координатами.

float: left — Для правильного применения обтекания текста с помощью shape-outside, элемент должен быть плавающим.

➡️ @code_ready | #свойство #css

В России можно посещать IT-мероприятия хоть каждый день: как оффлайн, так и онлайн Жаль только, что нет никакой единой "базы" ивентов. Чтобы заглянул -> увидел все что есть -> выбрал -> пошел. Или все-таки есть? 🔥 Смотрите: мы нашли канал, в котором публикуют ВООБЩЕ ВСЕ анонсы вебинаров, хакатонов, конференций, мастер-классов, ивентов от гигантов индустрии и лучших специалистов по кодингу, дизайну, аналитике и т.д. В общем, очень кайфовая вещь: здесь вы точно не пропустите ничего важного и интересного. Подпишитесь, чтобы не потерять: IT-мероприятия России / ITMeeting / IT events

👨‍💻 Эффект всплывающей подписи при наведении Эффект наведения на карточки с появлением подписи к изображению. Реализовано с помощью CSS. ⛓ Готовый код: Ссылочка ➡️ @code_ready | #кодпен

📱 Удаление HTML-тегов из строки Удаление HTML-тегов полезно для предотвращения XSS (межсайтовых скриптовых атак), что повышает безопасность сайта и защищает данные пользователей. Для извлечения текста без тегов из строки можно использовать объект DOMParser, который позволяет разобрать HTML-код и получить только текстовое содержимое. Рассмотрим ключевые строки кода, выполняющие эту задачу:

• new DOMParser().parseFromString(html, 'text/html') — Создает новый объект DOMParser и разбирает переданную строку HTML, создавая документ в формате HTML. • .body.textContent || '' — Извлекает текстовое содержимое из тела HTML-документа. Если тело пустое, возвращает пустую строку.

➡️ @code_ready | #гайд #javascript

Промпт-инженеринг — новый хайп или перспективная профессия? Рассказываем про направление с большим потенциалом и маленькой конкуренцией на рынке на нашей бесплатной лекции. По итогам эфира вы узнаете: — Кто такой промт-инженер и чем он занимается; — Как интегрировать скиллы промт-инжинеринга в работу, если вы работаете в IT; — Кому в действительности нужны его услуги и какие результаты это даст; — Сколько платят промт-инженеру в России и мире; — Кто может стать промт-инженером и какой порог входа; Кликай на ссылку и забирай подробную информацию вместе с классными бонусами. erid: LjN8KDjkL ООО Зерокодер, ИНН 9715401631

👩‍💻 Вопрос с собеседования В чём разница между «сбросом» и «нормализацией» CSS? Ответ: Сброс и нормализация CSS — это два разных подхода к обнулению стилей веб-страницы. • Сброс CSS — это процесс обнуления стилей, чтобы убрать браузерные стили по умолчанию, которые могут отличаться от одного браузера к другому. Цель сброса CSS — создать «чистую» страницу, на которой все элементы имеют одинаковый вид в разных браузерах. • Нормализация CSS — это процесс создания единообразных стилей для разных элементов, чтобы веб-страница выглядела одинаково во всех браузерах. В отличие от сброса CSS, нормализация CSS сохраняет некоторые стили по умолчанию браузера, но при этом пытается сделать их единообразными. ➡️ @code_ready | #собеседование

👩‍💻 Как работает Array.filter() в JS? Функция Array.filter создает новый массив, включающий все элементы исходного массива, которые соответствуют заданному условию. Она принимает один обязательный аргумент — функцию обратного вызова (callback), которая будет применена к каждому элементу исходного массива. Callback может принимать до трёх аргументов: • currentValue — текущий элемент массива. • index — индекс текущего элемента. • array — сам массив. Для каждого элемента массива функция обратного вызова возвращает либо true, либо false. Если true, элемент включается в новый массив.

В примере на картинке, num % 2 === 0 проверяет, является ли элемент четным. Только четные числа (2 и 4) попадают в новый массив evenNumbers.

➡️ @code_ready | #функция #js

📱 Fullstack Coding — коротко и ёмко про web разработку! Ежедневно контент пополняется новой информацией: • Объяснения и советы по frontend и backend технологиям, таким как html, CSS, Python, JavaScript 👩‍💻 👩‍💻 👩‍💻 • Ответы на часто задаваемые вопросы ❓ • Обсуждение на интересующие темы в отдельном чате 🙊 ➡️Так что подписываемся

📱 Повышаем читаемость HTML-кода Rainbow Tags — это удобное расширение для VS Code, которое улучшает читаемость вашего HTML-кода, раскрашивая теги в разные цвета. С помощью него вы сможете легко различать вложенные элементы и быстрее находить ошибки в разметке, что делает процесс разработки более приятным и эффективным.

Если расширение не работает, проверьте нет ли конфликтов с другими плагинами или поставьте более раннюю версию.

➡️ @code_ready | #плагин

CodeCombat — это онлайн-игра, где вы учитесь программированию, управляя персонажами с помощью написанного кода. Поддерживаются Python, JavaScript и Lua. Отличный способ освоить программирование через игру и задачи. ⛓ Ссылочка https://codecombat.com/ ➡️ @code_ready | #ресурсы

Ребятки, прям очень давно не было шпаргалок, хотите вернуть эту рубрику? 👍🔥 — если да 👩‍💻 Сейчас напомню про шпаргалку методов массива Она содержит основные методы JavaScript для работы с массивами. Они разделены на группы, каждый метод сопровождается кратким описанием его функциональности и примером использования. ➡️ @code_ready | #шпаргалка

📱 Тестирование API прямо в VS Code Thunder Client — это мощное расширение для VS Code, которое позволяет тестировать и отлаживать API запросы прямо в привычной среде разработки, без необходимости переключаться на отдельные приложения. ➡️ @code_ready | #плагин

👩‍💻 Вопрос с собеседования В чем отличие между Observable и Promise в JavaScript? Ответ: Observable и Promise — это два способа для работы с асинхронными операциями в JS. • Promise может завершиться успешно, либо с ошибкой, но выполняется лишь один раз. • Observable же представляет собой поток данных, которые могут быть доступны в любое время, он может генерировать несколько значений во время своей работы и быть остановлен в любое время.

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

➡️ @code_ready | #собеседование

😋 Ребятки, новая новость) Достаточно недавно, у меня появился новый канал @roadmap_ready. Там реально много полезных ресурсов для всех разработчиков, + каждый день выходят 3 новых поста ⛓ Курсы, книги, шпаргалки, статьи, видео, ресурсы, всё есть в новом канале 👇 Советую подписаться — https://t.me/+Q70FN159FnZmZGNi

👩‍💻 Сохраняйте очередную полезную статью на Habr!, которую мне удалось для вас добыть) Вкратце содержит: • Инструменты для тестирования, всё для проверки работоспособности и безопасности сайтов • Расширения для браузеров • Ресурсы для практики • Ссылки на полезные источники ➡️ @code_ready | #статья

📱 Псевдоэлемент ::marker Данный псевдоэлемент упрощает процесс стилизации маркеров списка, что делает его удобным инструментом для создания уникального и привлекательного дизайна списков. Принимаемые свойства: • content — можно выбирать иконку, как в примере • color — цвет первой строки • background-color — цвет фона • font-family — шрифт первой строки • font-size — размер шрифта • font-weight — жирность шрифта • line-height — высота строки • text-decoration — текстовое оформление (подчеркивание, перечеркивание) • text-transform — преобразование текста (заглавные буквы, прописные буквы) • word-spacing — расстояние между словами • letter-spacing — расстояние между буквами • text-indent — отступ первой строки ➡️ @code_ready | #псевдоэлемент #css

📱 Вопрос с собеседования Как использовать таймеры в JavaScript? Ответ: 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 | #техсобес

👩‍💻 Зеркальное отражение текста Основным свойством для создание данного эффекта является transform, он позволяет трансформировать элементы различными способами. В нашем коде есть две главные строки, давайте разберем их:

• transform: scaleY(-1) — Создает зеркальное отражение текста по вертикальной оси, переворачивая его. • margin-top: -18px — Сдвигает отраженный текст вверх, ближе к оригинальному тексту, чтобы создать иллюзию отражения на поверхности.

Также не забывайте про html код, там не просто нужно добавить текст, а создать 2 отдельных параграфа, первый для оригинального текста, второй для отзеркаленного.

<div class="text-reflection">
  <p>Code Ready</p>
  <p class="reflection">Code Ready</p>
</div>

➡️ @code_ready | #гайд #css

📱 Создание сайта с нуля + адаптивная вёрстка по макету В данном видео вы создадите сайт на HTML и SCSS с нуля. Также там объяснят методологию БЭМ простым языком и покажут на реальном примере, как делается адаптивная верстка сайта. Всем советую к просмотру!

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

➡️ @code_ready | #ресурсы

👋 Ребятки! Кто очень хорошо владеет Html, Css и особенно JavaScript, умеет писать веб-приложения, есть небольшая подработка, (долгосрочное оплачиваемое сотрудничество). Мне бы найти таких людей... Кому интересно, отпишие мне в личку https://t.me/energy_it