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

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