✅ Вариации свойства animation в CSS

В шпаргалке указаны все основные методы свойства animation, а также все значения, которые принимают эти свойства.

inherit — Значение наследуется от родительского элемента.
initial — Устанавливает значение по умолчанию.

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

✅ Преобразование элементов с transform

Свойство transform в CSS позволяет изменять положение, размеры и форму элементов на веб-страницах.

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

• translate (x, y) — перемещает элемент по осям X и Y на заданное количество пикселей
• rotate (angle) — поворачивает элемент на заданный угол в градусах
• scale (x, y) — масштабирует элемент по осям X и Y на заданное значение
• skew (x, y) — наклоняет элемент по осям X и Y на заданный угол в градусах
• transform-origin — изменяет точку, относительно которой происходят преобразования

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

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

Что означает ключевое слово this в JavaScript?

Ответ:

В JavaScript, this — это ссылка на какой-то объект. То, на что, ссылается this, может меняться в зависимости от контекста вызова.

• В общем контексте, this ссылается на глобальный объект (в браузере это объект window).
• Внутри объектного метода, this ссылается на сущность, которая вызвала этот метод.
• При использовании конструктора, this ссылается на новую созданную сущность.
• При использовании методов call(), apply() или bind() ,можно явно задать значение this.

В данном примере this.brand внутри метода getBrand() ссылается на свойство brand объекта car, так как он его вызвал

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

✅ Шпаргалка для CSS Grid

CSS Grid Layout — представляет собой двумерную систему сеток в CSS. Это пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки.

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

✅ GitHub's VS Code themes

GitHub Theme — это плагин для VSCode, который приносит внешний вид GitHub в вашу среду разработки. Этот плагин предлагает как светлую и тёмную темы, так и другие ихние оттенки, позволяя вам выбрать ту, которая подходит вашему стилю и предпочтениям.

@code_ready | #плагин

✅ Создание печатающего эффекта

Typing effect на чистом CSS.
.typing-demo устанавливает ширину блока для текста и создает анимацию typing, которая плавно расширяет его до конца. Затем анимация blink мигает границей, чтобы придать тексту более реалистичный вид.

<div class="wrapper">
  <div class="typing-demo">@code_ready for you!</div>
</div>

.typing-demo {
    width: 21ch;
    animation: typing 2.5s steps(22), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2rem;
}
  @keyframes typing {
    from {width: 0;}}
  @keyframes blink {
    50% {border-color: transparent;}}

@code_ready | #практика #css

✅ Горячие клавиши для быстрой верстки

• Ctrl + Shift + K — Удаляет текущую строку целиком.

• Ctrl + / — Закомментирует или раскомментирует текущую строку.

• Shift + ← / → / ↓ / ↑ — Позволяет выделять текст в направлении, указанном стрелкой.

@code_ready | #клавиши

✅ Распознавание голоса на JS

Web Speech API позволяет взаимодействовать с голосовыми интерфейсами в ваших веб приложениях. Он состоит из двух частей: SpeechSynthesis (Текст-в-Речь), и SpeechRecognition (Асинхронное распознавание речи)

<h2>Распознавание голоса</h2>
<p id="transcription"></p>
<button id="startRecognitionButton">Запись</button>

const startRecognitionButton = document.getElementById("startRecognitionButton");
const transcription = document.getElementById("transcription");
startRecognitionButton.addEventListener("click", function () {
  const recognition = new webkitSpeechRecognition();
  recognition.lang = "ru-RU";
  recognition.onresult = function (event) {
   const transcript = event.results[0][0].transcript;
    transcription.textContent = transcript;};
  recognition.onerror = function (event) {
    console.error("Ошибка распознавания:", event.error);};
  recognition.start();});

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

✅ Шпаргалка по сравнению разных типов

Этот небольшой справочник предоставляет основные операции для сравнения различных типов данных в JavaScript. В нем содержатся примеры сравнения чисел, строк, логических значений, объектов, а также особенности сравнения null и undefined. 🔥

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

✅ Стилизация списков с помощью list-style-type

Свойство list-style-type в CSS позволяет изменять маркеры (символы или изображения, которые стоят перед каждым элементом списка) у неупорядоченных (ul) и упорядоченных (ol) списков.

Маркированный список:

• none — удаляет маркеры у всех элементов списка
• disc — кружки (по умолчанию для ul)
• circle — пустые кружки
• square — квадраты

Нумерованный список:

• decimal — цифры(по умолчанию для ol)
• decimal-leading-zero — арабские цифры меньше 10 (01,02,03)
• lower-greek — строчные греческие буквы (α, β, γ, δ,...)
• lower-alpha — строчные буквы латинского алфавита
• upper-alpha — прописные буквы латинского алфавита
• lower-roman — римские цифры нижнего регистра
• upper-roman — маркеры заглавных римских цифр

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

✅ Предпросмотр SVG

Неудобно редактировать SVG файлы при вёрсте? Плагин SVG Previewer предоставляет удобный функционал при работе с ними: изменение масштаба, фона а так же размер файла

@code_ready | #плагин

✅ Дополнительный всплывающий текст

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

<div class="text-container">
  <p class="initial-text">Любой текст,изображаемый изначально.</p>
  <div class="hide-content hide">
    <p>Дополнительный текст "Показать больше".</p>
  </div>
  <button id="toggle-button" class="toggle-button">Показать больше</button>
</div>

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

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

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

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

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

• color — Цвет выделенного текста.
• background-color — Цвет фона выделенного текста.
• cursor — Курсор, отображаемый при выделении текста.
• caret-color — Цвет курсора (мигающей вертикальной линии) при редактировании текста.
• outline — Контур, отображаемый вокруг выделенного текста.
• text-decoration — Текстовое оформление
(например: подчеркивание, перечеркивание)
• text-emphasis-color — Цвет ударных знаков
(например: точки, круги)
• text-shadow — Тень текста

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

✅ Значения свойства list-style-type

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

Также существует схожее свойство list-style-image. С помощью него можно задать свой маркер в виде изображения

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

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

Чем отличается map от set в JavaScript?

Ответ:

Map и Set - это две различные структуры данных в JavaScript, которые предназначены для хранения уникальных значений.

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

• set – коллекция уникальных значений, так называемое «множество». Используется для хранения уникальных значений, и не создает 2 и более одинаковых, во многих ЯПах эта структура называется множеством

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

✅ Загрузка файлов на JavaScript

Пожалуй лучшее решение для интуитивно понятного интерфейса для загрузки файлов, это так называемый "Drag and Drop".
Пользователь может,как просто перетащить файл в выделенное поле, так и выбрать его самостоятельно

Готовый код для этого веб-приложения, я оставлю в моем репозитории на GitHub

@code_ready | #обучение #github

✅ Как создать loader на сайт?

Анимация довольно простая, но очень эффективная. Занимает немного строк кода в Html и Css. Всё что нужно, это создать keyframes анимацию и с помощью transform менять размер каждого блока в два раза.

<div class="loader">
  <span class="loader__element"></span>
  <span class="loader__element"></span>
  <span class="loader__element"></span>
</div>

.loader {
  display: flex;
  align-items: center;
  justify-content: center;  
}
.loader__element {
  border-radius: 100%;
  border: 5px solid #555;
  margin: calc(5px *2);
}
.loader__element:nth-child(1) {
  animation: preloader .6s ease-in-out alternate infinite;}
.loader__element:nth-child(2) {
  animation: preloader .6s ease-in-out alternate .2s infinite;}
.loader__element:nth-child(3) {
  animation: preloader .6s ease-in-out alternate .4s infinite;}
@keyframes preloader {
  100% { transform: scale(2); }}

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