Привет, друзья!

В этой статье я хочу поделиться с вами результатами небольшого эксперимента, связанного с ускорением загрузки изображений с помощью Imgproxy, Cache API (далее — кеш) и Service Worker API (далее — СВ).

Мы с вами разработаем простое приложение на React, в котором используется несколько изображений, и добьемся того, что загружаемые изображения будут более чем в 10 раз легче (меньше по размеру) оригиналов (imgproxy), а также практически мгновенной загрузки (доставки) изображений (СВ и кеш).

Обратите внимание: в части, касающейся imgproxy, особых препятствий на пути использования рассматриваемого в статье подхода к загрузке изображений в продакшне нет, но в части, касающейся СВ, следует проявлять крайнюю осторожность, поскольку данная технология является экспериментальной — это означает, что поведение СВ во многом определяется конкретной реализацией (браузером), что в ряде случаев делает его довольно непредсказуемым. Возможно, для кеширования изображений лучше предпочесть старые-добрые HTTP-заголовки Cache-Control и Etag. Но эксперимент на то и эксперимент, чтобы, в том числе, искать новые ответы на старые вопросы.

Для тех, кого интересует только результат эксперимента, вот репозиторий с исходным кодом проекта.

Остальных прошу под кат.

В последнее время TS стал де-факто стандартом во фронтенд-разработке. Его достаточно просто начать использовать, и он приносит неоценимую пользу в любых web-приложениях. Но используя его, мы часто даже не задумываемся, насколько на самом деле это мощный инструмент. В большинстве ситуаций нам хватает базовых возможностей TS-а. Но иногда нам случается определить узкий и нестандартный тип. В этом случае можно либо ослабить типы с помощью any или unknown, либо попробовать решить непростую порой головоломку. В этой статье мы решим несколько интересных головоломок с типами.

Привет, Хаброжители! Стартовала весенняя распродажа от издательства «Питер».

Эту статью также можно было бы назвать «Чего по науке нельзя делать с GraphQL».

Читая различные посты в блогах и руководства, мы узнаем, что существует некий правильный способ работы с GraphQL. Но вдруг там о чем-то не упоминается? Потому, что какие-то вещи невозможно реализовать, либо потому, что та или иная реализация – это «очень плохая идея»?

Давайте немного повеселимся и поиграем с GraphQL нетрадиционным образом. Я не призываю вас реализовывать какие-либо из идей, изложенных здесь, и им определенно не место в продакшен-коде (но, если вы совершенно уверены в том, что делаете – почему нет). В этой статье я просто продемонстрирую несколько экспериментов, которые сам проделал с GraphQL. Некоторые из них – просто классные фокусы. Другие могут вам по-настоящему пригодиться. Мне же все они кажутся потрясающими.

Чтобы повысить производительность страниц фронтенда на основе React, в Yelp используют рендеринг на стороне сервера. После ряда инцидентов на продакшене в начале 2021 года, когда из шаблонов на основе Python в React было перенесено много страниц, стало понятно, что существующая система серверного рендеринга не масштабируется. Материалом о том, как решалась проблема, делимся к старту курса по Fullstack-разработке на Python.

Стилизация. Довольно насущный для меня момент. Несмотря на годы работы с React, стартуя новый проект, я каждый раз задумываюсь о стилизации. Я перепробовал многие её способы, больше и дольше всего я работал с css-modules и styled-components. Сегодня я хочу предложить вам рассмотреть еще один не менее интересный вариант.

Привет, друзья!

В данной статье я хочу показать вам, как разработать простое приложение для обмена сообщениями в режиме реального времени с использованием Socket.io, Express и React с акцентом на работе с медиа.

Функционал нашего приложения будет следующим:

• при первом запуске приложение предлагает пользователю ввести свое имя;
• имя пользователя и его идентификатор записываются в локальное хранилище;
• при повторном запуске приложения имя и идентификатор пользователя извлекаются из локального хранилища (имитация системы аутентификации/авторизации);
• выполняется подключение к серверу через веб-сокеты и вход в комнату main_room (при желании можно легко реализовать возможность выбора или создания других комнат);
• пользователи обмениваются сообщениями в реальном времени;
• типом сообщения может быть текст, аудио, видео или изображение;
• передаваемые файлы сохраняются на сервере;
• путь к сохраненному на сервере файлу добавляется в сообщение;
• сообщение записывается в базу данных;
• пользователи могут записывать аудио и видеосообщения;
• после прикрепления файла и записи аудио или видео сообщения, отображается превью созданного контента;
• пользователи могут добавлять в текст сообщения эмодзи;
• текстовые сообщения могут озвучиваться;
• и т.д.

Репозиторий с исходным кодом проекта.

Если вам это интересно, прошу под кат.

За годы развития браузеры обзавелись множеством API и функциональных возможностей, благодаря которым превратились в невероятно мощные платформы приложений. Яркий пример — это современный веб-синтезатор, подробностями об устройстве которого делимся к старту курса по Fullstack-разработке на Python.

В этой статье показан наш опыт интеграции интернета вещей (IoT) и метавселенной Decentraland. В ней вы найдете список необходимых навыков и мини-инструкцию, чтобы попробовать самим. В конце мы добавили видео-презентацию, что в итоге получилось. 

В этой статье вы увидите, как сделать генератор ASCII-арта из изображения.

ASCII-арт — это метод графического дизайна, который использует компьютеры для презентации и он состоит из изображений, собранных вместе из 95 печатных символов, определенных стандартом ASCII от 1963 года, и ASCII-совместимых наборов символов с проприетарными расширенными символами.

В минувшем году OWASP обновил список TOP-10 самых распространенных векторов атак на современные веб-приложения. Этот список претерпел ряд изменений по сравнению с его последней редакцией, которая была в далеком 2017 году. В связи с чем мне бы хотелось рассказать о наиболее серьезной угрозе современных веб-приложений, которая перешла с пятого на первое место, а именно про A01:2021-Broken Access Control.

Не сомневаюсь, что все прекрасно знают о том, что авторизация предоставляет пользователю права на выполнение определённых действий, а также процесс проверки (подтверждения) данных прав при попытке выполнения этих действий. Авторизация не эквивалентна аутентификации. После успешной аутентификации авторизация определяет, к каким функциям и данным может получить доступ пользователь, обеспечивая при этом надлежащее разграничение прав доступа.

Именно поэтому веб-приложению необходимы средства контроля доступа, позволяющие его пользователям использовать веб-приложение с различными привилегиями. Контроль доступа — это применение ограничений на то, кто (или что) может выполнять различные функции и получать доступ к запрошенным ресурсам. Нарушенный контроль доступа часто встречающаяся и часто критическая уязвимость в системе безопасности. Существуют несколько типов контроля доступа, равно как и уязвимостей, связанных с их нарушением.

Cordova — это кроссплатформенная среда разработки с открытым исходным кодом, которая позволяет использовать HTML и JavaScript для разработки приложений на нескольких платформах, таких как Android и iOS. Как Cordova позволяет приложениям работать на разных платформах и реализовывать функции? Все дело в многочисленных плагинах в Cordova. Они позволяют сосредоточиться исключительно на функциях приложения, не взаимодействуя с API на уровне ОС.

Привет, друзья!

В этой серии из 2 статей я хочу поделиться с вами своими заметками о Prisma.

Prisma — это современное (продвинутое) объектно-реляционное отображение (Object-Relational Mapping, ORM) для Node.js и TypeScript. Проще говоря, Prisma — это инструмент, позволяющий работать с реляционными (PostgreSQL, MySQL, SQL Server, SQLite) и нереляционной (MongoDB) базами данных с помощью JavaScript или TypeScript без использования SQL (хотя такая возможность имеется).

Содержание этой части

• Настройки
  
  • select
  • include
  • where
  • orderBy
  • distinct
• Вложенные запросы
• Фильтры и операторы
  
  • Фильтры
  • Операторы
• Фильтры для связанных записей
• Методы клиента
• Транзакции
  
  • $transaction
  • Интерактивные транзакции

Первая часть.

Если вам это интересно, прошу под кат.

Привет, друзья!

В этой серии из 2 статей я хочу поделиться с вами своими заметками о Prisma.

Prisma — это современное (продвинутое) объектно-реляционное отображение (Object-Relational Mapping, ORM) для Node.js и TypeScript. Проще говоря, Prisma — это инструмент, позволяющий работать с реляционными (PostgreSQL, MySQL, SQL Server, SQLite) и нереляционной (MongoDB) базами данных с помощью JavaScript или TypeScript без использования SQL (хотя такая возможность имеется).

Содержание этой части

• Инициализация проекта
• CLI
• Схема
  
  • Типы данных
  • Атрибуты
  • Функции атрибутов
  • Отношения
• Клиент
  
  • Запросы
  • findUnique
  • findFirst
  • findMany
  • create
  • update
  • upsert
  • delete
  • createMany
  • updateMany
  • deleteMany
  • count
  • aggregate
  • groupBy

Вторая часть.

Если вам это интересно, прошу под кат.

В тот момент, когда вы набираете что-то на клавиатуре, читаете файл с диска или скачиваете его через Интернет, поток информации (биты) проходит через различные устройства и приложения.

Если вы научитесь работать с этими потоками битов, то сможете создавать высокопроизводительные и полноценные приложения. Например, вспомните, как просматривается видео на YouTube. Необязательно ждать, пока загрузится весь видеоролик. Как только в буфер попадает небольшой фрагмент, он начинает воспроизводиться, а остальное продолжает загружаться по мере просмотра.

VSCode — самый популярный редактор кода среди веб-разработчиков. Вы можете использовать его с нуля, однако со временем его базовых функций станет недостаточно. Рассказываю, как сам докрутил этот редактор под свои потребности.

Внимание: "Данная статья является ознакомительной и несет лишь основную информацию о стеке технологий MERN."

"Все кратко и просто".

• Что же такое стек технологий MERN?

• Из чего состоит?

• Создание базы данных (MongoDB)

• Серверная часть (NodeJS + Express)

• Клиентская часть (ReactJS)

Привет, друзья!

В этой небольшой статье я хочу рассказать вам о File System Access API (далее — FSA), позволяющем читать и записывать файлы в локальную систему пользователя с помощью браузера.

Основные источники:

• Черновик спецификации
• Раздел на MDN

Если вам это интересно, прошу под кат.

Добрый день, читатели Хабра, представляю перевод статьи по разработке dApp. Приятного чтения.

Мир онлайн-технологий быстро переходит к веб 3.0 (перевод этой статьи можете найти здесь). Похоже, что люди устали от централизованных систем, где их цифровая конфиденциальность ежедневно нарушается огромными организациями. Также хочется найти решение этой проблемы, и веб 3.0, похоже, на данный момент является ответом.
Эта статья в блоге не предназначена для освещения ноу-хау блокчейна и децентрализованных систем. Вместо этого он предназначен для тех, кто хотел бы создать онлайн-решения для пользователей, клиентов и покупателей, чтобы гарантировать им лучшую конфиденциальность и безопасность их данных.
Прояснив это, в данной статье я собираюсь показать вам азбуку того, как создать децентрализованное приложение с нуля и настроить среду разработки. Ниже перечислены некоторые темы, которые мы рассмотрим.

Асинхронное программирование в однопоточных средах JavaScript

Оглавление

1. Введение в асинхронное программирование

Привет, Хабр! Представляю вашему вниманию перевод статьи “React SEO: Tips to Build SEO-friendly Web Applications” автора Paridhi Wadhwani.

О чем пойдет речь

Вы узнаете проблемы, с которыми сталкивается React приложения в части SEO (Search Engine Optimization или оптимизация для поисковых систем). Чтобы быть более точным, вы увидите, как React совмещается с методами поисковой оптимизации. Также, вы будете знать, как Google сканирует сайты на React.