Code Ready | Frontend

Фронтам в помощь ⚠️ В этом канале бесплатно собрано то, что дают на платных курсах! Готовый код для React и Vue, обучающие и полезные посты, а также мемы, всё это и многое другое, ты найдешь тут — Твой очаг разработки Запрыгивай в автобус на канал Frontend Гид, чтобы не увезли на завод📊

✅ Как отслеживать свое рабочее время? WakaTime — это плагин отслеживания времени для разработчиков. Он интегрируется в текстовые редакторы и IDE, а также в браузеры, такие как Chrome. Предоставляет автоматическое отслеживание времени, аналитику использования языков программирования и инструменты для повышения производительности. @code_ready | #плагин

✅ Создание анимации spinner Этот код представляет собой анимированный спиннер, который может использоваться для индикации загрузки или выполнения определенного процесса.

<div class="spinner"></div>

.spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    animation: spinner 1s linear infinite;
    margin: 0 auto;
  }
@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

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

Как заработать при помощи ИИ в 2024 году? ChatGPT, Midjourney уже давно применяются практически во всех сферах бизнеса. Через 10 лет искуственный интеллект заменит половину профессий. Чтобы быть в курсе современных технологий, подписывайтесь на канал TechTok. Там автор рассказывает про тренды из мира ИИ, IT, технологий, а также о том, как зарабатывать на этом деньги. Пользуйтесь, всё есть в закрепе 👉 @techtokai

✅ Полезные горячие клавиши VSCode • Shift + Del — удаляет строку целиком. Теперь не нужно выделять мышкой всю строку и потом нажимать Backspace. •Ctrl + L — выделяет всю строку целиком. Теперь копипастить еще проще. @code_ready | #клавиши

Приватности больше нет Корпорации типа Apple и Google в открытую лезут к нам в трусы ради прибыли, и только 1-2% пользователей знают, как этому противостоять. Для тех, кому не наплевать на свою безопасность в сети, есть канал АнтиХакер. - Как понять, что ваш смартфон на прослушке? - Какие 3 настройки включить, чтобы надежно защититься от взлома? - Как по любому сообщению узнать точную геопозицию собеседника? Осторожно! После подписки вам захочется удалить все соцсети и выкинуть гаджеты. @a_xakep

@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 | #клавиши