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

👩‍💻 Заливка текста картинкой

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

• background-image — добавляет фоновое изображение

• background-size: cover — делает так, чтобы изображение полностью покрывало текст

• background-clip: text — обрезает фоновое изображение по форме текста.

• color: transparent — делает текст прозрачным, чтобы был виден только фон изображения.

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

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

Что такое рекурсия в JS и как ею пользоваться?

Ответ:

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

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

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

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

👩‍💻 Плавная прокрутка

Свойство scroll-behavior управляет поведением прокрутки страницы или элемента при переходе по якорным ссылкам и делает её плавной.

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

• auto — Стандартное поведение прокрутки. Происходит мгновенно без анимации.
• smooth — Плавная прокрутка с анимацией.

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

📱 Сниппеты для Javascript

JavaScript (ES6) Code Snippets — предоставляет коллекцию фрагментов кода, которые ускоряют процесс разработки, позволяя быстро вставлять распространённые конструкции и методы языка.

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