Code Ready | Frontend

@code_ready | #мем

✅ Вопрос с собеседования Что такое оператор нулевого слияния в JavaScript? Ответ: В JavaScript оператор нулевого слияния (также известный как "Nullish Coalescing Operator") представлен двумя знаками вопроса подряд: ??. Этот оператор используется для проверки значений на null или undefined и возвращения альтернативного значения, если проверяемое значение является именно одним из них. Представьте, что у вас есть ящик, в который вы можете положить что угодно. Иногда вы кладёте в него игрушки, иногда - конфеты, а иногда оставляете его пустым. Этот ящик - ваша переменная в JavaScript. Теперь представьте, что у вас есть другой ящик, в котором лежит ваш любимый подарок. Если ваш первый ящик (переменная) пустой, вы бы хотели использовать содержимое второго ящика вместо него. Оператор нулевого слияния (??) позволяет вам это сделать в JavaScript. Таким образом, когда вы используете оператор нулевого слияния, JavaScript проверяет ваш первый ящик (переменную). Если он пустой (т.е. равен null или undefined), вы можете сказать JavaScript взять содержимое второго ящика (значение по умолчанию) и использовать его вместо первого. @code_ready | #собеседование

Материалы из этого канала дают на платных курсах Frontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое 👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!

✅ Создание крутых скриншотов кода CodeSnap — плагин VSCode, предназначенный для создания красивых скриншотов кода. Основные возможности: Выбор участка кода, Настройка внешнего вида и Экспорт в различные форматы. Чтобы понять его интерфейс и научиться правильно использовать, я оставляю ссылку на видео для настройки этого плагина. @code_ready | #практика

✅ Шпаргалка по основным операторам Эта шпаргалка предоставляет набор основных операторов, с их названиями, описаниями и примерами, которые используются в различных языках программирования, а не только в JavaScript. @code_ready | #шпаргалка #js

✅ Делаем приложение для рисования на холсте Для рисования на холсте в данном коде используется HTML5 Canvas API. Этот API предоставляет возможность программно создавать растровые изображения на веб-странице.

<canvas id="drawCanvas" width="600" height="350"></canvas>

body{text-align: center;}
canvas {border: 1px solid black;}

document.addEventListener("DOMContentLoaded", () => {
    const canvas = document.getElementById("drawCanvas");
    const context = canvas.getContext("2d");
    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;
    // Начать рисование
    function startDrawing(e) {
        isDrawing = true;
        [lastX, lastY] = [e.offsetX, e.offsetY];}
    // Закончить рисование
    function stopDrawing() {
        isDrawing = false}
    // Рисование на холсте
    function draw(e) {
        if (!isDrawing) return;
        context.beginPath();
        context.moveTo(lastX, lastY);
        context.lineTo(e.offsetX, e.offsetY);
        context.strokeStyle = "#000";
        context.lineWidth = 5;
        context.lineCap = "round";
        context.lineJoin = "round";
        context.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];}
    // Слушатели событий
    canvas.addEventListener("mousedown", startDrawing);
    canvas.addEventListener("mouseup", stopDrawing);
    canvas.addEventListener("mouseout", stopDrawing);
    canvas.addEventListener("mousemove", draw);});

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

✅ Вопрос с собеседования Что такое тернарный оператор в JS? Ответ: Тернарный оператор - это условный оператор, который состоит из трех операндов: условия, значения, возвращаемого, если условие истинно, и значения, возвращаемого, если условие ложно. Он используется для написания более компактного кода сравнительно с использованием условных конструкций типа if...else. В JavaScript тернарный оператор выглядит следующим образом: • условие - это любое выражение, которое вычисляется в логическое значение (true или false). • значение_если_истинно - это значение, которое возвращается, если условие истинно. • значение_если_ложно - это значение, которое возвращается, если условие ложно. В примере кода, если значение переменной age больше или равно 18, то переменной message присваивается строка "Доступ разрешен", иначе - "Доступ запрещен". После этого message будет содержать соответствующее значение, которое будет выведено в консоль. @code_ready | #собеседование

@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

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг. Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме 16-22 февраля с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

✅ Горячие клавиши для быстрой верстки • Ctrl + Shift + K — Удаляет текущую строку целиком. • Ctrl + / — Закомментирует или раскомментирует текущую строку. • Shift + ← / → / ↓ / ↑ — Позволяет выделять текст в направлении, указанном стрелкой. @code_ready | #клавиши

✅ Шпаргалка с обработчиками событий Эта шпаргалка включает примеры всех основных событий и соответствующих им обработчиков в JavaScript, которые могут использоваться для управления взаимодействием пользователя с веб-страницей. @code_ready | #шпаргалка #js

✅ Распознавание голоса на 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

👨‍💻 Изучаешь Frontend-разработку? Давай продолжим вместе. idk Frontend — дневник начинающего разработчика, который познаёт новую профессию с нуля. Канал будет полезен: - начинающим фронтендерам; - практикующимся менторам; - всем, кто любит наблюдать за чужими косяками и их исправлениями. Присоединяйся ко мне, будем обучаться вместе 🤝

✅ Вопрос с собеседования Разница между function declaration и function expression Ответ: Function Declaration: • Используется ключевое слово function в начале строки кода. • Обычно используется для создания функций, которые должны быть доступны во всем текущем контексте выполнения (например, внутри любых блоков кода в текущем скрипте). • Функции, объявленные таким образом, поднимаются вверх в области видимости (hoisting), что означает, что они могут быть вызваны до фактического объявления функции в коде. Function Expression: • Функция присваивается переменной как значение. • Обычно используется для создания анонимных функций или функций, которые должны быть доступны только внутри определенного контекста выполнения. • Функции, созданные таким образом, не поднимаются вверх в области видимости (hoisting), их можно вызывать только после того, как они были присвоены переменной. @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