📱 Создание сайта с нуля + адаптивная вёрстка по макету

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

Всем советую к просмотру!

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

➡️ @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

📱 Вопрос с собеседования

Как использовать таймеры в 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 | #техсобес

📱 Псевдоэлемент ::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

👩‍💻 Сохраняйте очередную полезную статью на Habr!, которую мне удалось для вас добыть)

В ней рассказывают об интересных ресурсов для практики и изучения фронтенд разработки:

• learn.javascript
• MDN Web Docs
• Scrimba Learn React
• react,dev
• Egghead
• Frontend masters

➡️ @code_ready | #статья

👩‍💻 Вопрос с собеседования

В чем отличие между Observable и Promise в JavaScript?

Ответ:

Observable и Promise — это два способа для работы с асинхронными операциями в JS.

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

• Observable же представляет собой поток данных, которые могут быть доступны в любое время, он может генерировать несколько значений во время своей работы и быть остановлен в любое время.

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

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

📱 Тестирование API прямо в VS Code

Thunder Client — это мощное расширение для VS Code, которое позволяет тестировать и отлаживать API запросы прямо в привычной среде разработки, без необходимости переключаться на отдельные приложения.

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

Ребятки, прям очень давно не было шпаргалок, хотите вернуть эту рубрику? 👍🔥 — если да

👩‍💻 Сейчас напомню про шпаргалку методов массива

Она содержит основные методы JavaScript для работы с массивами. Они разделены на группы, каждый метод сопровождается кратким описанием его функциональности и примером использования.

➡️ @code_ready | #шпаргалка

CodeCombat — это онлайн-игра, где вы учитесь программированию, управляя персонажами с помощью написанного кода. Поддерживаются Python, JavaScript и Lua. Отличный способ освоить программирование через игру и задачи.

⛓ Ссылочка https://codecombat.com/

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

📱 Повышаем читаемость HTML-кода

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

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

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

👩‍💻 Как работает Array.filter() в JS?

Функция Array.filter создает новый массив, включающий все элементы исходного массива, которые соответствуют заданному условию.

Она принимает один обязательный аргумент — функцию обратного вызова (callback), которая будет применена к каждому элементу исходного массива.

Callback может принимать до трёх аргументов:
• currentValue — текущий элемент массива.
• index — индекс текущего элемента.
• array — сам массив.

Для каждого элемента массива функция обратного вызова возвращает либо true, либо false. Если true, элемент включается в новый массив.

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

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

📱 Удаление HTML-тегов из строки

Удаление HTML-тегов полезно для предотвращения XSS (межсайтовых скриптовых атак), что повышает безопасность сайта и защищает данные пользователей.

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

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

• .body.textContent || '' — Извлекает текстовое содержимое из тела HTML-документа. Если тело пустое, возвращает пустую строку.

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

👨‍💻 Эффект всплывающей подписи при наведении

Эффект наведения на карточки с появлением подписи к изображению. Реализовано с помощью CSS.

⛓ Готовый код: Ссылочка

➡️ @code_ready | #кодпен

👩‍💻 Свойство 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

📱 Улучшение визуализации цветов в CSS

Color Highlight — это расширение для VS Code, которое автоматически окрашивает цветовые значения в CSS-файлах и обрамляет их рамкой, позволяя лучше понимать, какой цвет будет использоваться в итоге.

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