🖥 Как создать QR-код по строке и направить его пользователю на скачивание?

Вот так звучит реальный кейс, давайте подробнее.
⏩При нажатии на кнопку (onClick событие) должен создаваться QR-код (превью для пользователя не нужно) по строке (рандомно генерирующийся набор символов) и отправляться на скачивание пользователю в виде png-картинки.
Как же это можно реализовать?

⏩Например, можно сделать так:

import QRCode from "https://esm.sh/qrcode";

function download(dataurl, filename) {
  const link = document.createElement("a");

  link.href = dataurl;
  link.download = filename;
  link.click();

  document.removeElement(link);
}

QRCode.toDataURL("I am a pony!", function (err, qrCodeImageDataUrl) {
  console.log(qrCodeImageDataUrl);

  download(qrCodeImageDataUrl, "qrcode.png");
});

📎 Затестить, как работает, можно тут

@react_tg

🖥 Вопросы с собеседования на фронтенд разработчика React.js

Держите отличную подборку 🔥
Здесь собраны самые популярные вопросы, задаваемые на собеседованиях front-end разработчиков на React.js.
Тематика вопросов включает в себя как основы JavaScript и веб-технологий так и глубокое понимание работы React.js и смежных технологий (Redux, MobX и прочего).

К каждому вопросу приведён подробный ответ в выпадающем меню

📎 Ссылка

@react_tg

🌟 Анатомия HTMX

Держите полезную статью)
⏩По данным 2023 JavaScript Rising Stars библиотека htmx заняла 2 место в разделе Front-end Frameworks (1 место вполне ожидаемо принадлежит React) и десятое место в разделе Most Popular Projects Overall.

⏩htmx — это библиотека, которая предоставляет доступ к AJAX, переходам CSS, WebSockets и Server Sent Events прямо из HTML через атрибуты, что позволяет создавать современные пользовательские интерфейсы (насколько сложные — другой вопрос), пользуясь простотой и мощью гипертекста. На сегодняшний день у библиотеки почти 30 000 звезд на Github. Удивительно, что до такого решения додумались только сейчас, учитывая, что весь функционал был доступен уже 10 лет назад (вы сами убедитесь в этом, когда изучите исходный код htmx).

И в этой статье разбирается, как htmx работает, рекомендую
📎 Статья

@react_tg

🖥 Топ-3 причины, почему вы должны использовать Copilot в работе с React и не только

В отличие от традиционных инструментов завершения кода, которые полагаются на предопределённые шаблоны и ключевые слова, GitHub Copilot идёт на шаг дальше, понимая цель кода и генерируя контекстуально подходящие предложения. Он основан на обширном репозитории фрагментов кода, библиотек и шаблонов программирования, доступных на GitHub, что делает его ценным ресурсом для разработчиков в различных областях и языках программирования.

В статье автор делится такими 3 плюсами от использования Copilot:

⏩Улучшение качества кода. Copilot предлагает рекомендации и варианты кода на основе переданного контекста, что помогает предотвратить ошибки и соблюдать практики программирования.

⏩Увеличение продуктивности. С Copilot разработчики могут сосредоточиться на более творческих и стратегических задачах, вместо того чтобы тратить время на рутинную работу.

⏩Обучение и рост. Использование Copilot также может стать отличным инструментом для обучения новичков в области программирования. Путём изучения рекомендаций и генерируемого кода они могут улучшить свои навыки и расширить свой опыт.

В целом, плюсы очевидны, но статью можно глянуть в первую очередь ради конкретных кейсов использования Copilot

📎 Статья

@react_tg

💡Легкий способ получения скриншотов во время загрузки и фильтрации запросов в Chrome dev tools: на заметку фронтенд-разработчику

#css #tip #frontend

@react_tg