✅ Свойство z-index

С помощью свойства z-index, можно изменять порядок наложения элементов друг на друга по оси z.

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

• auto — не имеет z-индекса (по умолчанию)
• number — целое число, которое задает порядок наложения элементов. Чем больше, тем выше других элементов с меньшим z-индексом.
• inherit — наследует значение от родительского элемента
• initial — устанавливает значение по умолчанию, заданное в браузере.

Применяется к элементам, которые имеют свойство position со значением, отличным от static, и которые перекрывают друг друга.

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

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

Как работает оператор new в JavaScript?

Ответ:

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

Когда мы используем оператор new перед вызовом функции, происходит следующее:

• Создается новый пустой объект.
• Этот объект наследует свойства и методы из прототипа функции.
• Этот объект передается в качестве контекста вызова функции (this внутри функции указывает на новый объект).
• Если функция не возвращает другой объект, то новый объект возвращается автоматически.

В примере кода мы создаем новый объект с помощью new, так как у нас есть функция-конструктор MyFunction

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

✅ Методы 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