👩‍💻 Псевдокласс :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

👩‍💻 Свойство accent-color

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

В качестве принимаемых аргументов выступает цвет в любом формате.

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

📱 Быстрый переход из HTML к css-коду по классу

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

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

📱 Как работает Array.from() в JS?

Функция Array.from: Создаёт новый массив из массивоподобного или итерируемого объекта, позволяя преобразовывать структуры данных, такие как строки или наборы, в массивы.

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

• Array.from('hello') — Преобразует строку в массив символов.

• Array.from(new Set([1, 2, 3])) — Преобразует Set в массив, убирая дубликаты.

• Array.from({ length: 5 }, (_, i) => i + 1) — Создаёт массив из 5 элементов с помощью функции-генератора.

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

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

📱 Переключаем видимость пароля

Этот код создает поле ввода пароля и чекбокс, который при активации переключает видимость пароля. При выборе чекбокса, тип ввода пароля меняется с "password" на "text" и наоборот.

<input type="password" id="passwordInput">
  <input type="checkbox" id="showPasswordCheckbox"> Показать пароль

const passwordInput = document.getElementById('passwordInput');
const showPasswordCheckbox = document.getElementById('showPasswordCheckbox');
showPasswordCheckbox.addEventListener('change', function() {
    if (showPasswordCheckbox.checked) {
        passwordInput.type = 'text';
    } else {
        passwordInput.type = 'password';}});

➡️ @code_ready | #обучение #js

👩‍💻 Прокрутка с привязкой

Свойство scroll-snap-type позволяет задать привязку прокрутки к определённым точкам, что делает процесс прокрутки страницы более плавным и контролируемым.

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

• none: Отключает привязку прокрутки.
• x или y: Устанавливает привязку прокрутки по горизонтали или вертикали соответственно.
• both: Активирует привязку прокрутки как по горизонтали, так и по вертикали.
• mandatory: Прокрутка останавливается только на привязанных точках, делая её обязательной.
• proximity: Прокрутка останавливается на привязанных точках, только если они близко.

overflow-x: scroll — для плавного перемещения от элемента к элементу по оси X.

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

👩‍💻 Атрибут download

Атрибут download используется в элементах <a> для указания того, что при нажатии на эту ссылку браузер должен загрузить указанный файл, а не открывать его в окне браузера.

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

➡️ @code_ready | #атрибут #html

👩‍💻 Неоновый эффект для текста

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

• text-shadow — Самое главное свойство, имеет много нюансов, используется для добавления тени к тексту.

• color: #fff — не столь важно, но для красоты пойдет) а то черный текст смотрится не очень.

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

👨‍💻 Gallery

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

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

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

📱 Питомцы прямо в редакторе))

vscode pets — это расширение для VS Code, которое добавляет животных прямо в редактор кода. Они могут не просто бегать, но и указывать на ошибки в коде. Очень веселая штука.

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

CSS Click Chart — с помощью этого  инструмента можно кликнуть на любое свойство, и сразу увидеть его пример и как оно работает. Также отображается поддержка браузерами.

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

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

👩‍💻 Мультиколонки в CSS

Свойство columns — автоматически разбивает содержимое на несколько колонок. Оно управляет тем, сколько будет колонок и какой ширины они будут.

Шорткат columns объединяет два свойства:
• column-width — ширина каждой колонки
• column-count — количество колонок

Также есть и другие дополнительные свойства, которые помогают создавать улучшенные колонки:

• column-gap — Задает расстояние между колонками
• column-rule — Задает стиль, цвет и ширину линии между колонками. Сокращение для column-rule-style/color/rule.
• column-fill — Управляет тем, как браузер распределяет содержимое между колонками.

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

➡️ @code_ready |#мем