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

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

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

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