✅ Как отслеживать свое рабочее время?

WakaTime — это плагин отслеживания времени для разработчиков. Он интегрируется в текстовые редакторы и IDE, а также в браузеры, такие как Chrome.

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

@code_ready | #плагин

✅ Фильтры к фрагментам элемента

Благодаря свойству backdrop-filter в CSS, вы можете применить фильтры к элементу, который находится за ним, создавая уникальные и привлекательные визуальные эффекты.

Может принимать следующие значения:

• none — фильтры не применяются (по умолчанию)
• blur (px) — размывает элемент
• brightness (%) — изменяет яркость
• contrast (%) — изменяет контрастность
• grayscale (%) — преобразует элемент в оттенки серого
• hue-rotate (градус) — вращает цветной круг элемента
• invert (%) — инвертирует цвета
• opacity (percentage) — изменяет прозрачность
• saturate (%) — изменяет насыщенность цветов
• sepia (%) — применяет сепийный фильтр к элементу

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

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

Что такое деструктуризация в JavaScript?

Ответ:

• Деструктуризация в JavaScript — это синтаксический сахар, который позволяет нам извлекать данные из объектов и массивов и присваивать их переменным в одном шаге. Этот синтаксис упрощает работу с данными, позволяя писать менее многословный и более читаемый код.

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

В первом примере мы создаем объект с тремя свойствами. После, достаём эти свойства из объекта и присваиваем их переменным с теми же именами.

Во втором примере, в массиве достаем первые два значения без циклов, так же с помощью этой особенности языка.

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

✅ Значения свойства filter

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

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

✅ Готовое меню авторизации

Данный код представляет собой простое готовое меню авторизации для вашего сайта на градиентном фоне, написанное при помощи CSS.
Поле ввода пароля автоматически шифруется "*".

<form action="/login"method="post" class="login-form">
  <label for="username" class="login-form__label">Username:</label>
  <input type="text" id="username" name="username" class="login-form__input">
  <label for="password" class="login-form__label">Password:</label>
  <input type="password" id="password" name="password" class="login-form__input">
  <button type="button" class="login-form__submit">Submit</button>
</form>

Продолжение CSS кода, я оставил в комментариях под этим постом, ставь реакцию и пользуйся) 👍🔥

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

✅ Свойство direction в CSS

С помощью свойства direction, вы можете изменить направление текста.

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

• ltr — слева направо (по умолчанию)
• rtl — справа налево
• inherit — наследует значение от родительского элемента

Применяется к элементам, в которых важно учитывать направление текста, например, при работе с разными языками.

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

✅ Конвертор валют на JavaScript

Данный код представляет собой конвертации между рублями, долларами и евро.
Задействован APi ЦБ РФ, для актуального курса валют.

<input type="number" id="amount" placeholder="Введите сумму">
<select id="from">
  <option value="RUB">RUB</option>
  <option value="USD">USD</option>
  <option value="EUR">EUR</option>
</select>
<select id="to">
  <option value="USD">USD</option>
  <option value="EUR">EUR</option>
  <option value="RUB">RUB</option>
</select>
<button onclick="convert()">Конвертировать</button>
<p id="result"></p>

JavaScript код оставлю в комментариях под этим постом, ставь реакцию и пользуйся) 👍🔥

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

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

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

Ответ:

• setTimeout — это функция, которая позволяет отложить выполнение функции на определённое время. Функция будет вызвана один раз по истечении этого интервала.

• Она принимает два обязательных аргумента: функцию, которую нужно выполнить, и время задержки в миллисекундах. Также можно передать дополнительные аргументы, которые будут переданы в вызываемую функцию.

В примере на картинке, мы задаем чтобы функция выполнилась через 5 секунд.

Однако, выполнение функции, переданной в setTimeout, отменяется с помощью clearTimeout, и сообщение "This will not be logged" никогда не появится в консоли.

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

✅ Псевдокласс ::firstletter

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

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

• color — цвет первой буквы
• background-color — цвет фона
• font-family — шрифт первой буквы
• font-size — размер шрифта
• font-weight — жирность шрифта
• line-height — высота строки
• text-decoration — текстовое оформление (подчеркивание, перечеркивание)
• text-transform — преобразование текста (заглавные буквы, прописные буквы)
• margin — внешние отступы
• padding — внутренние отступы
• border — граница первой буквы
• float — Выравнивание (например: слева, справа).
• text-shadow — тень текста

👉 @code_ready | #псевдокласс #css

✅ Создание анимированного фона в тексте

Для создания красивого фона для текста используется свойство background-image, которое принимает значение в виде фото, либо ссылки на любое фото и видео через url()

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

• -moz-background-clip и -webkit-background-clip — специальные свойства для других браузеров, которые ограничивают отображение фонового изображения только областью текста.

h1 {
  font-family: sans-serif;
  text-align: center;
  font-size: 80px;
  font-weight: 800;
  text-transform: uppercase;
  background-image: url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExYTlmN2h0MnhhNHFqcDFwaWYxMXd0NjlrZTE0NDBoY3N0M2hiNnY5ayZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XQsEy59pNgaVu6QlGi/giphy-downsized-large.gif);
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
} 

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

✅ Сжатие кода

Плагин Better Minify позволяет минифицировать html, css, js и многие другие языки.

Выбранный файл при команде minify files создает в текущей директории второй файл с названием "имя файла.min.расширение"

👉 @code_ready | #плагин

✅ Свойство 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