Code Ready | Frontend

✅ Генератор 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

Вижу, что посты с практикой и шпаргалками набирают много положительных реакций, поэтому хочу порекомендовать вам канал своего знакомого — @prog_way_blog Автор канала — Денис, разработчик с опытом менторинга и подготовки к собеседованиям более 4 лет. В канале он расписывает сложную теорию простым языком. У нас похожий контент, вам точно понравится) @prog_way_blog

✅ Как создать красивое оформление кода в телеграмм? Часто задаваемый вопрос, как создать оформление кода? Сегодня пришло время раскрыть все карты и показать как это сделать на самом деле. Для того чтобы сделать оформление, нужно: 1. В начале написать названия кода, то есть прописать (```html) 2. На следующий строке нужно вставить сам код (<div class="div"> <h1>Любой код</h1></div>) 3. И третий шаг, без отступа в конце кода написать эти три символа (```) Как это выглядит: ```html <div class="div"> <h1>Любой код</h1> </div>``` Результат:

<div class="div">
  <h1>Любой код</h1>
</div>

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

Бесплатный вебинар по chatGPT "Создай нейро-сотрудника с нуля, без опыта программирования" Вы узнаете как использовать chatGPT в профессиональных целях, создавать нейросотрудников на заказ и зарабатывать на ИИ. Регистрируйтесь прямо сейчас - будьте в курсе всех новинок из мира AI. Реклама. ООО "ТЕРРА ЭЙАЙ". ИНН 9728019395. erid: LjN8KUAJe

@code_ready | #мем

✅ Создание эффекта пламени Его создание очень простое, достаточно правильно настроить тени, выбрать соответствующий цвет и добавить шрифт Akronim чтобы текст был более красивый.

<h1>blazing </h1>

@import url(https://fonts.googleapis.com/css?family=Akronim);
h1 {
  color: rgb(255, 115, 0);
  font-size: 100px;
  text-transform: uppercase;
  font-family: 'Akronim';
  text-align: center;
  text-shadow: 0 3px 20px red, 0 0 20px red, 0 0 10px orange, 4px -5px 6px yellow, -4px -10px 10px yellow, 0 -10px 30px yellow;
}

#обучение #css

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

✅ Вопрос с собеседования Что такое конкатенация строк в JS? Ответ: Конкатенация строк в JavaScript - это процесс объединения двух или более строк в одну строку. Этот процесс осуществляется с использованием оператора +, который также используется для сложения чисел. Когда вы используете оператор + с двумя строками, он не выполняет сложение, как это происходит с числами. Вместо этого он обрабатывает их как строки и склеивает их вместе.

В этом примере мы объединяем значение переменной firstName, пробел и значение переменной lastName, чтобы получить полное имя "John Doe". Оператор + выполняет конкатенацию строк, склеивая их в одну.

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

Познакомьтесь с искусством создания удобных и привлекательных пользовательских интерфейсов. Узнайте, почему UX/UI-дизайнеры так нужны IT-компаниям и погрузитесь в основы работы с Figma. Всё это — на бесплатном мини-курсе по UX/UI-дизайну. Регистрируйтесь в пару кликов:👉 https://epic.st/_ieI_?erid=2VtzqxZN1EC Как будет проходить мини-курс? — Смотрите видеоматериалы в удобное время — Получаете подарки: чек-листы, гайды и другие бонусы — Выполняете практическую работу после каждого занятия — Посещаете итоговый вебинар Своим опытом поделятся: — Дмитрий Матвеев, арт-директор Wildberries. Создаёт сервисы, которыми пользуется 30 миллионов человек в месяц, ведёт вебинары и образовательные курсы по дизайну — Максим Чистов, основатель и арт-директор студии Nine Squares. Работал со СберМаркетом, ВКонтакте, Disney, AliExpress, Ростехом, Кофеманией 🎉 Вас ждут подарки: скидка 10 000 рублей на любой курс Skillbox, гайды и книги для старта в профессии, персональная карьерная консультация и год бесплатного изучения английского языка. Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

Познакомьтесь с искусством создания удобных и привлекательных пользовательских интерфейсов. Узнайте, почему UX/UI-дизайнеры так нужны IT-компаниям и погрузитесь в основы работы с Figma. Всё это — на бесплатном мини-курсе по UX/UI-дизайну. Регистрируйтесь в пару кликов:👉 https://epic.st/_ieI_?erid=2VtzqxZN1EC Как будет проходить мини-курс? — Смотрите видеоматериалы в удобное время — Получаете подарки: чек-листы, гайды и другие бонусы — Выполняете практическую работу после каждого занятия — Посещаете итоговый вебинар Своим опытом поделятся: — Дмитрий Матвеев, арт-директор Wildberries. Создаёт сервисы, которыми пользуется 30 миллионов человек в месяц, ведёт вебинары и образовательные курсы по дизайну — Максим Чистов, основатель и арт-директор студии Nine Squares. Работал со СберМаркетом, ВКонтакте, Disney, AliExpress, Ростехом, Кофеманией 🎉 Вас ждут подарки: скидка 10 000 рублей на любой курс Skillbox, гайды и книги для старта в профессии, персональная карьерная консультация и год бесплатного изучения английского языка. Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

✅ Шпаргалка для CSS Grid CSS Grid Layout — представляет собой двумерную систему сеток в CSS. Это пересекающийся набор горизонтальных и вертикальных линий, образующих колонки и строки. Элементы могут быть помещены в грид в пределах линий этих колонок и строк. @code_ready | #css #шпаргалка

✅ Тег <select> Селектор выбора позволяет выбрать один конкретный вариант или же выбрать сразу несколько различных вариантов, полезная вещь если вы хотите создать поле с выбором различной информации. У него есть множество атрибутов и функций, кому интересно, я оставлю ссылку на документацию про этот тег)

<select name="select">
  <option value="value1">Значение 1</option>
  <option value="value2">Значение 2</option>
  <option value="value3">Значение 3</option>
</select>

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

✅ Кодинг в ночное время "Night Owl" - это тема оформления для редактора кода VSCode, разработанная для обеспечения комфортного и эффективного программирования в темное время суток. Она предлагает темные оттенки, которые снижают утомляемость глаз и делают код более читаемым и контрастным. @code_ready | #плагин

💻 2 канала для каждого айтишника ✅ Программистика - авторский канал об ИТ и технологиях. В канале найдёшь множество статей и полезных ресурсов, облегчающих работу программисту. ✅ FreeZnanija - учись беcплатно, множество курсов по ИТ, Информационной Безопасности и программированию. 🫵 Сохрани. Только тут ресурсы, которые упростят вашу жизнь!

✅ Анимированный индикатор меню Написан на HTML, CSS & JS 👨‍💻 Готовый код: Ссылочка @code_ready | #кодпен\

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

🔗 Web3: твой билет в мир крутых карьерных возможностей в 2024! Расскажет @TopSelectionWeb3 📆 21 марта, 18:00 по МСК: эфир, который изменит твою карьерную траекторию! На эфире ты узнаешь: 🔹Что такое Web3 и как он меняет мир. 🔹Почему существуют стереотипы о блокчейне и криптовалютах. 🔹Какие профессии востребованы в Web3 и как их получить. 🔹Как начать карьеру в Web3 уже сегодня. ▶️Бонус: узнаешь о нашем крутом карьерном Буткампе и Web3-хакатоне! 🦄 Спикер: Тина – Product Owner в TopSel, победитель хакатона Binance PS: Мы здесь не для пустых обещаний о сказочном успехе. Мы с вами за реальную крутость: честную, прозрачную инфу, которая подружит вас с Web3 и всеми его возможностями. Увидимся! На канале @TopSelectionWeb3

@code_ready | #консоль