✅ Методы Map в JavaScript

map – коллекция пар ключ-значение, ключи могут быть любого типа данных. Используется для хранения пар ключ-значение,где у каждого элемента есть свой ключ, который не может повторяться

👉 @code_ready | #шпаргалка

✅ Псевдоэлемент ::first-line

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

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

• color — цвет первой строки
• background-color — цвет фона
• font-family — шрифт первой строки
• font-size — размер шрифта
• font-weight — жирность шрифта
• line-height — высота строки
• text-decoration — текстовое оформление (подчеркивание, перечеркивание)
• text-transform — преобразование текста (заглавные буквы, прописные буквы)
• word-spacing — расстояние между словами
• letter-spacing — расстояние между буквами
• text-indent — отступ первой строки

На практике это часто применяется для заголовков статей, публикаций

👉 @code_ready | #псевдоэлемент #css

✅ Фильтры для картинок

Свойство filter в CSS позволяет применять различные изменения на картинки.

• Атрибут contrast изменяет контрастность картинки . Он принимает значения в: %, em, rem, vm, vh, px.
• Атрибут grayscale изменяет степень серого в картинке. Он принимает значения в процентах.

Это свойство имеет еще несколько атрибутов, они будут описаны в следующих постах.

👉 @code_ready | #свойство #css

✅ Шпаргалка по работе с DOM

Данная шпаргалка предоставляет основные команды для выбора, изменения и управления элементами веб-страницы в JavaScript. Включает в себя операции с текстовым и HTML-содержимым.

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

✅ Создание кнопки для вырезания текста

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

 <textarea type="text" class="content"></textarea>
 <button type="button" class="cut">Вырезать</button>

// Находим кнопку с классом "cut" и добавляем обработчик события "click"
document.querySelector(".cut").addEventListener("click", () => {
  // Получаем текст из элемента с классом "content"
  const txt = document.querySelector(".content").value;
  // Записываем текст в буфер обмена с помощью Clipboard API
  navigator.clipboard.writeText(txt).then(() => {
    // После успешной записи текста в буфер обмена очищаем поле ввода
  document.querySelector(".content").value = "";});
});

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

✅ Полезные горячие клавиши VSCode

• Shift + Del — удаляет строку целиком. Не нужно будет выделять мышкой всю строку и потом нажимать Backspace.

• Ctrl + L — выделяет всю строку целиком. Теперь копипастить еще проще.

👉 @code_ready | #клавиши

✅ Как работает JSON.parse() в JS?

Функция JSON.parse: Преобразует JSON-строку (текст, форматированный в соответствии с текущим стандартом) в объект или значение JavaScript

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

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

✅ Строим диаграммы прямо в VS Code

Плагин Draw.io Integration позволяет строить множество различных диаграмм, связанных с вашим кодом рядом с проектом.

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

👉 @code_ready | #плагин

✅ Создание анимации кадрирования фото

У нас есть два отличных свойства: object-fit и object-position. С их помощью можно изменять размеры изображения, не влияя на соотношение его сторон.

<input type="checkbox"/> <br>
<img src="img.png" alt="img"/>

img {
  width: 330px;
  height: 200px;
  transition: 2s;
}
  input:checked + br + img {
  width: 500px;
  height: 400px;
  object-fit: cover;
  object-position: left-top;
  transition: width 2s, height 3s;
}

👉 @code_ready | #обучение #css

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

Что такое чистая функция в JavaScript?

Ответ:

Чистая функция в JavaScript - это функция, которая не изменяет внешние переменные или состояние, а также не имеет побочных эффектов.
Она всегда возвращает один и тот же результат при одинаковых входных данных.

Условия существования чистой функции:

• Не изменять внешние переменные или состояние.
• Не зависеть от внешних переменных или состояния (за исключением переданных аргументов).
• Не вызывать функции с побочными эффектами (например, функции ввода/вывода).
• Всегда возвращать один и тот же результат при одинаковых входных данных.

В данном примере представленная простейшая чистая функция и нечистая функция, принимающая значение сторонней переменной и зависящая от него

👉 @code_ready | #собеседование

✅ Как сделать красивый скролл страницы?

Библиотека aos предоставляет широкий функционал для проработки анимации прокрутки страницы на JavaScript.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

AOS.init({
   duration: 1000,
   easing: 'ease-out-cubic',
   once: true,
   startEvent: 'load',
});

Элементы указываются следующим образом:

<div class="card" data-aos="fade-up" data-aos-duration="1000">1</div>

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

✅ Как работает IIFE?

IIFE (Immediately Invoked Function Expression) в JavaScript - это функция, которая вызывается сразу же после своего определения. Она позволяет создавать локальную область видимости, чтобы избежать конфликта имен в глобальной области видимости.

IIFE определяется как анонимная функция, которая вызывается с помощью оператора () или new.

Когда JavaScript-интерпретатор встречает IIFE, он сначала вычисляет выражение в круглых скобках, которое представляет собой анонимную функцию. Затем он вызывает эту функцию с помощью оператора (), передавая ей аргументы.

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

✅ Свойство animation-direction

С помощью свойства animation-direction, можно изменять направление воспроизведения анимации.

Принимает следующие значения:

• normal — анимация воспроизводится в нормальном направлении (по умолчанию)
• reverse — анимация воспроизводится в обратном направлении
• alternate — анимация воспроизводится в нормальном направлении, затем в обратном направлении
• alternate-reverse — анимация воспроизводится в обратном направлении, затем в нормальном направлении

Применяется к элементам, которые имеют свойство animation со значением, отличным от none.

👉 @code_ready | #свойство #css

✅ Создание карусели с контентом

Данный пример представляет собой реализацию простой карусели, для прокрутки изображений на сайте.

Чтобы сделать карусель бесконечной, можно продублировать основные div с изображениями. Так, по завершению одной прокрутки, сразу начнется следующая

<div class="brand-list">
  <div class="wrapper">
    <div><img src="img1.png" alt="img1"></div>
    <div><img src="img2.png" alt="img2"></div>
    <div><img src="img3.png" alt="img3"></div>
  </div>
</div>

Ну а Css код я оставил в комментариях, т.к много кода в посте смотрится не очень)

👉 @code_ready | #обучение #css

✅ Переносим html элементы в JavaScript одной командой

Плагин Selector Js предоставляет функционал из нескольких команд, позволяющих переносить html элементы по именам классов, id, имени тега.

Для его работы необходимо установить плагин, выделить нужный фрагмент html и выбрать подходящую команду

👉 @code_ready | #плагин

✅ Псевдоэлемент ::spelling-error

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

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

• background-color — цвет фона
• color — цвет текста
• text-decoration — текстовое оформление (подчеркивание, перечеркивание)
• box-shadow — тень вокруг элемента

Важно не забыть указать spellcheck="true" в нужном теге для работы псевдоэлемента

👉 @code_ready | #псевдоэлемент #css