Node.JS *

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

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

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

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

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

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

Однажды я подумал, насколько трудно и дорого в наши дни сделать голосового помощника, который будет впопад отвечать на вопросы?

А если конкретнее, то веб-приложение, которое записывает аудио с вопросом, расшифровывает аудио в текст, находит подходящий ответ, тоже текстовый, и возвращает аудио версию ответа - вот функциональные требования, который я себе набросал.

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

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

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

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

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

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

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

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

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

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

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

В этой серии из 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

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

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

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

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

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

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

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

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

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

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

Часть этой рутины, однако, можно всегда оптимизировать.

В этой статье хочу познакомить вас с инструментом, который разработал, для минимизации рутины при создания компонентов Vue.js – VGENT.

VGENT (Vue Agent) – это CLI (Command Line Interface) приложение, которая генерирует компоненты для фреймворка Vue.js или Nuxt.js. Данный инструмент можно гибко настроить под нужды проекта, и генерировать компоненты командами в терминале.

## Prisma - установка в проект

Установка поддержки Prisma в NestJS-проекте выполняется очень просто - при помощи двух команд.

Первая - устанавливает клиентскую часть Prisma:

$ npm i @prisma/client

... вторая команда - устанавливает cli-часть Prisma:

$ npm i -D prisma

После этого - нужно запустить команду для инициализации Prisma в текущем проекте:

$ npx prisma init

В результате в корне проекта будет создана папка prisma, внутри которой будет находиться файл schema.prisma для настройки подключения Prisma к базе данных (и не только).

Содержимое файла schema.prisma очень простое:

“И есть еще белые, белые дни, белые горы и белый лед.
Но все, что мне нужно - это несколько слов и место для шага вперед.”

(Виктор Цой)

Это вторая часть статьи, где будут вопросы, которые мне задавали и ответы на них. Я не берусь оценивать полезность вопросов и их смысл. Просто пишу все как есть, надо признать, что часть из них меня здорово обескуражили и мне пришлось уходить не солоно хлебавши, вспоминая один забавный анекдот:

"- Ну как на собеседование сходил? Успешно? - Да. Ручку у них спер" (ссылка)

Часть вопросов будет по typescript, часть по javascript, что-то будет из html, Node.js, настройки, библиотеки, концепции. В общем всё то, о чем говорят на собеседованиях.

Она помогла нам переиспользовать игровые механики в непохожих проектах и увеличила скорость разработки на 25%.

Рассказываем, как мы с фронтенд-разработчиком Дмитрием Балаевым @manmo убираем Legacy, какими Open Source конфигурациями для ESLint пользуемся и как статический анализатор кода повлиял на развитие разработчиков нашей компании.

Nest.js - популярный node.js фреймворк с отличной архитектурой, основанной на Angular.

Привет, друзья! Продолжаю делиться с вами заметками о Docker.

Заметки состоят из 4 частей: 2 теоретических и 2 практических. Если быть более конкретным:

• первая часть посвящена Docker, Docker CLI и Dockerfile;
• во второй части рассказывается о Docker Compose.

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

Репозиторий с кодом приложения.

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

Привет, Хабр.

Как и все разработчики на php, я тоже иногда сталкивался с NodeJs .
На днях просмотривая фреймворки Node столкнулся на AdonisJs . И после нескольких минут прочтения кодоа я почувствовал себя как в матрице .

Прошла черная кошка, за ней другая, такая же.

А теперь немного про AdonisJs.

Когда дело доходит до разработки веб-приложений, есть десятки фреймворков на выбор. Менее известный, но очень любимый фреймворк — AdonisJs, известный своим красивым кодом и простотой для бэкэнда.

AdonisJs — это узел. js MVC для согласованного, стабильного и выразительного кода. Адонис заботится о многих трудоемких деталях разработки, предлагая стабильную экосистему для серверных веб-приложений.

Разработчики, использующие Laravel, отмечают, что AdonisJs предлагает тот же шаблон, дизайн, структуру кодирования и интерфейс на основе команд. AdonisJs легко изучить. В этой статье я хочу познакомить вас с фреймворком и показать, с чего начать.

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

Если провести аналогию с обычным кодом, то достижение таких объёмов в рамках одного модуля/класса/компонента/сущности становится сигналом, чтобы заняться декомпозицией и разделить ответственность по более мелким и независимым составляющим.

Но если говорить о конфигурации сборки, то такая декомпозиция скорее редкость, и в больших проектах часто можно встретить огромные webpack.config.js, модификация которых может доставить немало проблем и привести к ошибкам.

Если вам хочется сделать работу со сборкой проще и надёжнее при модификациях, то добро пожаловать под кат.

“Не люблю темные стекла, сквозь них темное небо.
Дайте мне войти, откройте двери.”

(Виктор Цой)

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

История этого проекта началась в 2017 году, тогда я углубился в работу с NodeJS ещё и ASP.NET Core хотелось попробовать. Но использовать свой рабочий ноутбук в качестве тестового сервера с не хотелось, так как он был достаточно шумным(а хотелось возможность работы сервера 24/7), а арендовать сервер было как-то не спортивно, да и денег было жалко на PET-проекты. Изначально я планировал сделать сервер на базе старого ПК(который завалялся на полках у родителей), но шум производимый этим компьютером был достаточно сильным, чтобы мешать ночью спать. Всё поменялось когда мне подарили Raspberry Pi 2 Model B.

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