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

Для создания эффекта полосатой тени текста используется несколько 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 | #статья

CSS Grid Generator — сайт, с помощью которого можно сгенерировать сетку и получить готовый CSS-код. Сначала задаем количество строк, колонок и расстояния между ними, далее рисуем расположение div-блоков в сетке.

⛓ Ссылочка: https://cssgrid-generator.netlify.app/

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

👩‍💻 Конический градиент

Свойство conic-gradient позволяет создавать конические градиенты (цветовой переход, который вращается вокруг центра, создавая эффект, похожий на цветовое колесо) , что делает их очень полезными для создания различных визуальных эффектов.

Параметры свойства:

• from (angle): Указывает начальный угол, с которого начинается градиент.
• color-stop: Цвет и его позиция в градиенте (red, yellow, green)
• percentage: Необязательный параметр, указывающий кол-во цвета в градиенте (red 25%)

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

📱 Ускорьте написание кода

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

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

Roadmap,sh — сайт, на котором собраны roadmaps по всем направлениям, начиная от бэкенд-разработки, заканчивая UX-дизайном. Все темы для изучения схематично отображены в нужной последовательности для поэтапного изучения.

⛓ Ссылочка: https://roadmap.sh/

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

✅ Ещё 1 перезалив шпаргалки, в этот раз напомню про регулярные выражения

Эта шпаргалка представляет набор основных методов для создания и использования регулярных выражений в JavaScript. В ней содержатся все основные операции.

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

📱 Как работает String.prototype.padStart() в JS?

Функция String.prototype.padStart() добавляет символы в начало строки до достижения заданной длины.

Параметры функции:

• targetLength — желаемая длина строки.
• padString — символы для добавления (по умолчанию пробел).

Функция padStart() полезна для выравнивания чисел или текста в таблицах, добавляя ведущие нули или другие символы для выравнивания данных в нужном формате.

Есть обратная ей функция — padEnd(). Принцип действия такое же, но символы добавляются уже с конца.

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

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

Как использовать промисы в JavaScript?

Ответ:

1. Создание промиса: Используется для обработки асинхронных операций. Он может находиться в состояниях pending, fulfilled, или rejected

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Data received');
  }, 2000);
});

2. Обработка результата с помощью then: Метод then используется для обработки успешного завершения промиса (fulfilled).

promise.then((data) => {
  console.log(data); // Data received
}).then(() => {
  console.log('Further processing');
});

3. Обработка ошибок с помощью catch: Метод catch используется для обработки ошибок или отклонения промиса (rejected).

promise.catch((error) => {
  console.error('Error:', error);
});

4. Завершение обработки с помощью finally: Метод finally выполняется после завершения промиса, вне зависимости от того, был он выполнен или отклонен.

promise.finally(() => {
  console.log('Operation complete');
  // Cleanup code here
});

➡️ @code_ready | #техсобес

👩‍💻 Псевдокласс :has()

Позволяет выбирать элементы на основе их содержимого. Это делает возможным изменение стилей элементов в зависимости от наличия определённых дочерних элементов или других условий внутри.

Принимаемые параметры:

• :has (selector) — применяет стили к элементу, если он содержит элементы, соответствующие selector.
• :has (:not (selector)) — применяет стили к элементу, если он не содержит элементы, соответствующие selector.

➡️ @code_ready | #псевдокласс #css

📱 Обнаружение статуса соединения

Используйте navigator,onLine для проверки, есть ли у пользователя доступ к интернету. Этот метод возвращает true, если подключение активно, и false, если нет.

Вы также можете подписаться на события offline и online, чтобы динамически реагировать на изменения статуса соединения.

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

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

✅ Menu Icon Animation

Анимация различных иконок для меню на SCSS. Написано без использования JavaScript.

👨‍💻 Готовый код: https://codepen.io/code_ready/pen/LYKeGrP

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

📱 Автоматическое переименование тегов в HTML

Auto Rename Tag — это полезное расширение для VS Code, которое значительно упрощает работу с HTML и XML-кодом. Этот плагин автоматически переименовывает закрывающий тег при изменении открывающего, что избавляет от необходимости вручную синхронизировать их. Благодаря этому ваша работа с разметкой становится более быстрой и безошибочной.

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

📱 Как работает Object.entries() в JS?

Object.entries() преобразует объект в массив пар [ключ, значение],что удобно для итерации и обработки данных.

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

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

➡️ @code_ready | #метод #js

👩‍💻 Эффект матового стекла (Glassmorphism)

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

• webkit-backdrop-filter и backdrop-filter — Применяют эффект размытия фона за элементом, создавая видимость матового стекла.

• box-shadow — Добавляет тень к элементу, чтобы создать глубину и выделить его на фоне.

⛓ Генератор данного эффекта: Ссылочка

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

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

Как работает "мемоизация" в JS и какие есть проблемы с её использованием?

Ответ:

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

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

• Проблемы с памятью — мемоизация может привести к потреблению значительного объема памяти, особенно если функция имеет большое количество уникальных аргументов. Это может вызвать проблемы с производительностью или утечки памяти.

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

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