👩‍💻 Сохраняйте очередную полезную статью на 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 | #плагин

👩‍💻 Полосатая тень текста

Для создания эффекта полосатой тени текста используется несколько CSS-свойств, которые позволяют добавить тексту цветную тень и сделать его цвет прозрачным с полосатым фоном. Рассмотрим ключевые моменты, которые отвечают за этот эффект:

• text-shadow — Создает тень текста с заданными смещением, размерами и цветом.

• background: repeating-linear-gradient — Устанавливает полосатый фон с повторяющимся линейным градиентом.

• background-clip: text — Обрезает фон до контура текста, делая его видимым только внутри текста.

• webkit-animation-fill-color: transparent — Делает цвет текста прозрачным, чтобы фон был виден через него.

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

👨‍💻 Selective Color

Эффект, который выделяет определенные элементы, создавая контраст и акцент на них, при наведении на изображения, реализованный с помощью CSS и JavaScript.

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

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

📱 Как работает Intl.DateTimeFormat() в JS?

Функция Intl.DateTimeFormat: Форматирует дату и время в соответствии с заданным локалем и параметрами, поддерживая разнообразные языковые и региональные стандарты.

Она имеет несколько вариантов использования, давайте их разберём:

• Intl.DateTimeFormat() — Форматирует дату и время в соответствии с локалью по умолчанию и стандартными параметрами.

• Intl.DateTimeFormat ('en-GB') — Использует заданную локаль ('en-GB' в данном случае) для форматирования даты и времени в соответствии с британским форматом.

• Intl.DateTimeFormat ('en-GB', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }) — Позволяет настроить форматирование, указав параметры.

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

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

😄 Недавно наткнулся на отличную статью на Habr, которая поможет подготовиться к собеседованию по JavaScript.

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

Советую каждому прочитать, пока ещё осталось время для обучения)

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