Для тестирования гипотез при развитии продукта требуется в короткие сроки реализовать прототип какого-нибудь приложения. В рамках рабочих задач мне довелось поработать над подобным прототипом. Это было backend-приложение предоставляющее RESTfull API и реализованное с применением технологий Nest.js и Swagger. О реализации подобного приложения и поговорим в этой статье.
В прошлый раз наша команда провела небольшой семинар по JavaScript (Посмотрите статью здесь: 8 викторин по Javascript, которые могут сбить вас с толку). И у нас все получилось довольно хорошо. Всем понравилось решать эти небольшие задачи.
На этот раз мой товарищ по команде принес практикум по поиску уязвимостей в веб-приложениях Node.js.
Это несложно. В веб-приложении есть 2 уязвимости. Способ "захватить флаг" — означает успешно войти в систему. Если вам все удалось, текст flag будет отображен на странице.
18 апреля 2022 года, после 5 лет доработки (первый коммит от 30 апреля 2017 года), proposal по декораторам наконец-то достиг 3 стадии, что означает что у него есть спецификация, тестовая имплементация и осталась только полировка на основе фидбека от разработчиков. Учитывая что это уже четвертая (!) итерация декораторов, их переход в стадию принятия это эпохальное событие для JS - не припомню ни одной другой фичи, которая прошла такой длинный и тернистый путь, с диаметрально разными подходами и аж двумя разными legacy-имплементациями, в Babel и TypeScript. Давайте же посмотрим на неё повнимательней.
Привет, друзья!
Данная серия статей представляет собой мои заметки о NestJS — фреймворке для разработки эффективных и масштабируемых серверных приложений на Node.js. NestJS использует прогрессивный (что означает текущую версию ECMAScript) JavaScript с полной поддержкой TypeScript (использование TypeScript является опциональным) и сочетает в себе элементы объектно-ориентированного, функционального и реактивного функционального программирования.
Под капотом Nest по умолчанию использует Express, но позволяет переключиться Fastify.
Первая статья представляет собой обзор основных возможностей, предоставляемых NestJS, во второй рассматриваются основы работы с этим фреймворком, в третьей — техники и рецепты по интеграции NestJS с некоторыми популярными библиотеками, используемыми при разработке приложений на Node.js, наконец, четвертая статья представляет собой туториал по разработке относительно полноценного React/Nest/TypeScript-приложения.
При рассказе о Nest я буду придерживаться структуры и содержания официальной документации.
Это вторая часть руководства.
Добрый день. В нашей компании мы очень трепетно относимся к архитектуре наших решений и удобству ее использования. Мы стараемся убирать узкие места для получения лучшей производительности, а также для сокращения времени разработки новых фич. Одним из таких способов мы решили поделиться с вами. Сегодня поговорим о фронт-оптимизации, об express, nest.js и о том, как этим правильно пользоваться.
Привет, друзья!
В данном туториале мы разработаем простой сервер на NestJS, взаимодействующий с SQLite с помощью Prisma, с административной панелью, автоматически генерируемой с помощью AdminJS, и описанием интерфейса, автоматически генерируемым с помощью Swagger. Все это будет приготовлено под соусом TypeScript.
Если вам это интересно, прошу под кат.
Привет, друзья!
В данном туториале мы разработаем простого бота для Telegram. Сначала зарегистрируем и кастомизируем бота с помощью BotFather, затем напишем для него сервер на Express, развернем сервер на Heroku и подключим бота к серверу с помощью веб-хука.
Функционал бота будет следующим:
При разработке бота я буду опираться в основном на официальную документацию.
Если вам это интересно, прошу под кат.
Подборка того, что волновало фронтенд-разработку, пока все отдыхали на майских.
Горячее
Веб быстро развивается и уже пора переосмыслить подходы к адаптации интерфейсов. Используйте CSS-свойства, функции и значения: clamp(), min-content, max-content, fit-content, auto-fit, minmax().
Узнайте о JavaScript контейнерах.
Что случится если вы откажетесь от React?
Ещё один сайт на HTML. Да, так тоже можно.
Остальные новости и статьи — под катом.
Привет, друзья!
Вам когда-нибудь хотелось узнать, как работают сборщики модулей (module bundlers) JavaScript типа Webpack или Parcel, что называется, под капотом. Если хотелось, тогда эта статья для вас.
В данном туториале мы разработаем простой сборщик модулей на Node.js, который будет компилировать все модули приложения в один минифицированный файл с кодом, соответствующим стандарту ES5.
Привет, друзья!
В этой серии из 3 статей я расскажу вам о Nest (NestJS) — фреймворке для разработки эффективных и масштабируемых серверных приложений на Node.js. Данный фреймворк использует прогрессивный (что означает текущую версию ECMAScript) JavaScript с полной поддержкой TypeScript (использование TypeScript является опциональным) и сочетает в себе элементы объектно-ориентированного, функционального и реактивного функционального программирования.
Под капотом Nest использует Express (по умолчанию), но также позволяет использовать Fastify.
В первой статье рассматриваются основы работы с Nest, во второй — некоторые продвинутые возможности, предоставляемые этим фреймворком, в третьей — приводится пример разработки простого React/Nest/TypeScript-приложения.
При рассказе о Nest я буду в основном придерживаться структуры и содержания официальной документации.
Это первая часть руководства.
Привет, друзья!
Вам когда-нибудь хотелось узнать, как под капотом работают пакетные менеджеры (Package Manager, PM) — интерфейсы командной строки (Command Line Interface, CLI) для установки зависимостей проектов наподобие npm или yarn? Если хотелось, тогда эта статья для вас.
В данном туториале мы разработаем простой пакетный менеджер на Node.js и TypeScript. В качестве образца для подражания мы будем использовать yarn. Если вы не знакомы с TS, советую взглянуть на эту карманную книгу.
Наш CLI будет называться my-yarn. В качестве lock-файла (yarn.lock, package-lock.json) он будет использовать файл my-yarn.yml.
Objection.js — минималистичная ORM-библиотека для Node.js, которая сильно упрощает взаимодействие с базами данных и не перегружена дополнительными функциями, как Sequelize или TypeORM. Разбираемся, в чем ее специфика и как строить запросы с ее помощью.
Недавно я увидел на StackOverflow историю разработчика, который столкнулся с проблемой использования ORM . Этот кейс натолкнул меня на мысль написать статью о альтернативе Sequelize — Objection.js, библиотеке, которая решает множество проблем ORM.
В сфере металлообработки есть популярная операция - лазерная резка. Узким местом в цикле обработки заказа здесь может являться расчет. Он хоть и не сложный, но обычно выполняется вручную. А это означает, что помимо необходимости участия человека, он еще и затягивается на время коммуникации - отправки информации туда сюда.
Если вы захотите автоматизировать расчет стоимости заказа, вам придется иметь дело с DXF файлами - в некотором роде стандартном способе передачи чертежей нужных деталей. В этой задаче вам может помочь моя разработка.
Привет, друзья!
В этой статье я продолжаю (и заканчиваю) делиться с вами заметками о Docker.
Заметки состоят из 4 частей: 2 теоретических и 2 практических.
Если быть более конкретным:
Docker, Docker CLI и Dockerfile;Docker Compose;В этой заключительной части мы "контейнеризуем" наше приложение.
Репозиторий с кодом приложения.
Если вам это интересно, прошу под кат.
Как и всегда, участники сообщества усердно работают над добавлением новых функций в Node.js, перечисленных в виде pull requests на GitHub. Далее мы подробно расскажем о нескольких привлекательных дополнениях, которые ожидают нас уже очень скоро. А также обсудим, что интересного происходит в сообществе Node.js в начале 2022 года.
В Skyeng есть команда коммуникаций. Мы предоставляем инструменты для связи оператора с пользователем. Например, ученику плохо слышно преподавателя на уроке и он хочет связаться с поддержкой, чтобы решить проблему — мы помогаем.
На старте было просто: связаться с нами можно было только через почту. Входящим ящиком был IMAP, исходящим — SaaS сервис по отправке почты, забрать письма с которого было то еще приключение. Мы смотрели на заголовки и соединяли письма в цепочки, как в любом почтовике: Gmail, Outlook. В таком виде передавали операторам.
Но оказалось, что с теми метаданными, которые мы предоставляли операторам, им было неудобно работать — много времени отнимал поиск пользователей в базе по адресу почты и теме сообщений.
Так появился проект линковка.
Привет, друзья!
В этой статье я хочу поделиться с вами результатами небольшого эксперимента, связанного с ускорением загрузки изображений с помощью Imgproxy, Cache API (далее — кеш) и Service Worker API (далее — СВ).
Мы с вами разработаем простое приложение на React, в котором используется несколько изображений, и добьемся того, что загружаемые изображения будут более чем в 10 раз легче (меньше по размеру) оригиналов (imgproxy), а также практически мгновенной загрузки (доставки) изображений (СВ и кеш).
Обратите внимание: в части, касающейся imgproxy, особых препятствий на пути использования рассматриваемого в статье подхода к загрузке изображений в продакшне нет, но в части, касающейся СВ, следует проявлять крайнюю осторожность, поскольку данная технология является экспериментальной — это означает, что поведение СВ во многом определяется конкретной реализацией (браузером), что в ряде случаев делает его довольно непредсказуемым. Возможно, для кеширования изображений лучше предпочесть старые-добрые HTTP-заголовки Cache-Control и Etag. Но эксперимент на то и эксперимент, чтобы, в том числе, искать новые ответы на старые вопросы.
Для тех, кого интересует только результат эксперимента, вот репозиторий с исходным кодом проекта.
Остальных прошу под кат.
Однажды я подумал, насколько трудно и дорого в наши дни сделать голосового помощника, который будет впопад отвечать на вопросы?
А если конкретнее, то веб-приложение, которое записывает аудио с вопросом, расшифровывает аудио в текст, находит подходящий ответ, тоже текстовый, и возвращает аудио версию ответа - вот функциональные требования, который я себе набросал.
Чтобы повысить производительность страниц фронтенда на основе React, в Yelp используют рендеринг на стороне сервера. После ряда инцидентов на продакшене в начале 2021 года, когда из шаблонов на основе Python в React было перенесено много страниц, стало понятно, что существующая система серверного рендеринга не масштабируется. Материалом о том, как решалась проблема, делимся к старту курса по Fullstack-разработке на Python.