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

Попробуйте этот 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

✅ Шпаргалка типов курсора в CSS

CSS-свойство cursor устанавливает курсор мыши, если таковой имеется, для отображения, когда указатель мыши находится над элементом. Вы можете указать тип курсора с помощью ключевого слова или загрузить свой значок.

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

✅ Делаем разные фигуры из картинок

CSS-свойство clip-path создаёт ограниченную область, которая определяет какая часть элемента должна быть видимой. Части, которые находятся внутри области, видимы, а части вне области скрыты.

Если хотите создавать любые фигуры из картинок, держите ссылку на официальный сайт Clip Path, там можно как и пользоваться шаблонами, так и делать собственные фигуры!

Как первый пример, оставляю код для создания креста из картинки:

img {
width: 280px;
height: 280px;
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

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

@code_ready | #мем

@code_ready | #консоль

✅ Создание Favicon на сайт

Favicon — значок веб-страницы. Отображается браузером во вкладке перед названием страницы, и в качестве картинки рядом с закладкой.

Чтобы его добавить, нужно использовать тег <link> вместе с атрибутами:
1. rel — тип ресурса: со значением icon или shortcut icon
2. type — Тип передаваемых данных: допустим png, jpeg...
3. href — указывающий на путь к изображению.

Как первый пример, кидаю код для создания фавикона с картинкой "Gmail". Там я использую всё, о чем рассказывал выше:

<link rel="icon" type="png" href="https://cdn4.iconfinder.com/data/icons/logos-brands-in-colors/48/google-gmail-128.png">



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

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

Что такое "асинхронность" в JavaScript и какие инструменты используются для работы с асинхронным кодом?

Ответ:

В JavaScript, когда говорят о "асинхронности", они обычно имеют в виду выполнение кода, который может выполняться в неопределенное время и не блокирует основной поток выполнения. Это позволяет программе продолжать работать, в то время как ожидаются другие задачи, такие как загрузка данных из сети, чтение файлов или выполнение длительных вычислений.

Для работы с асинхронным кодом в JavaScript часто используются такие инструменты, как колбэки (callbacks), промисы (promises) и асинхронные функции (async/await).

В данном коде асинхронность проявляется в вызовах функций fetch() и .json(). Эти операции занимают время, поэтому JavaScript не ждет их завершения и продолжает выполнение последующего кода. Вместо этого, с помощью ключевого слова await, код ждет завершения асинхронных операций, прежде чем продолжить выполнение.

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

✅ Приложение - калькулятор расходов

Это простое приложение для отслеживания расходов, которое позволяет пользователям добавлять название расхода и его сумму, а затем отображает общую сумму расходов.

<div id="expenses">
    <input type="text" id="expenseName" placeholder="Expense Name">
    <input type="number" id="expenseAmount" placeholder="Amount in USD">
    <button onclick="addExpense()">Add Expense</button>
    <ul id="expenseList"></ul>
    <p>Total Expenses: $<span id="totalExpenses">0.00</span></p>
</div>

function addExpense() {
    const name = document.getElementById("expenseName").value;
    const amount = parseFloat(document.getElementById("expenseAmount").value);
    if (isNaN(amount) || amount <= 0) {
        alert("Please enter a valid amount.");
        return;
    }
    const totalExpensesElement = document.getElementById("totalExpenses");
    const totalExpenses = parseFloat(totalExpensesElement.textContent);
    totalExpensesElement.textContent = (totalExpenses + amount).toFixed(2);
    const listItem = document.createElement("li");
    listItem.textContent = `${name}: $${amount.toFixed(2)}`;
    document.getElementById("expenseList").appendChild(listItem);
    document.getElementById("expenseName").value = "";
    document.getElementById("expenseAmount").value = "";
}

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

@code_ready | #консоль

✅ Создание генератора цветов

Генератор цветов на JavaScript: код, который меняет цвет фона элемента при каждом клике. Просто запустите функцию changeColor(), и она создаст случайный цвет в формате HEX.

<div id="colorDisplay"></div>
    <button onclick="changeColor()">Генерировать цвет</button>

#colorDisplay {
  width: 120px;
  height: 120px;
  margin: 10px;
  border: 2px solid #333;}

function changeColor() {
    const randomColor = getRandomColor();
    document.getElementById('colorDisplay').style.backgroundColor = randomColor;}
function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];}
    return color;}

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

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

Разница между function declaration и function expression

Ответ:

Function Declaration:
• Используется ключевое слово function в начале строки кода.
• Обычно используется для создания функций, которые должны быть доступны во всем текущем контексте выполнения (например, внутри любых блоков кода в текущем скрипте).
• Функции, объявленные таким образом, поднимаются вверх в области видимости (hoisting), что означает, что они могут быть вызваны до фактического объявления функции в коде.

Function Expression:
• Функция присваивается переменной как значение.
• Обычно используется для создания анонимных функций или функций, которые должны быть доступны только внутри определенного контекста выполнения.
• Функции, созданные таким образом, не поднимаются вверх в области видимости (hoisting), их можно вызывать только после того, как они были присвоены переменной.

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

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

Web Speech API позволяет взаимодействовать с голосовыми интерфейсами в ваших веб приложениях. 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, которые могут использоваться для управления взаимодействием пользователя с веб-страницей.

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

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

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

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

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

@code_ready | #клавиши

✅ Генератор QR кода на JS

Этот код использует встроенный API https://api.qrserver.com для генерации QR-кода на лету. Он сохраняет простоту и убирает необходимость в сторонних библиотеках.

<h1>QR Code Generator</h1>
  <input type="text" id="qr-text" placeholder="Enter text">
  <button onclick="generateQR()">Generate QR Code</button>
  <div id="qr-code"></div>

function generateQR() {
  const qrText = document.getElementById("qr-text").value;
  const qrCode = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrText}" alt="QR Code">`;
  document.getElementById("qr-code").innerHTML = qrCode;}

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

@code_ready | #консоль