JavaScript *

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

Использование компилятора поможет снизить потребление ресурсов и сократить «холодный старт» облачных функций.

Подробностями разработки онлайн-платформы выполнения и компиляции кода более чем на 40 языках делимся к старту курса по Frontend-разработке. Автор этого материала — основатель TailwindMasterKit.

Недавно я написал статью о Pactum, библиотеке JavaScript для тестирования API, использовании заглушек и контрактном тестировании. В той статье я сосредоточился на возможностях тестирования API, которые предоставляет Pactum. В этой статье я хотел бы продолжить исследовать Pactum, рассмотрев его функции имитации API более подробно.

У меня уже есть опыт работы с библиотеками имитации API, в первую очередь WireMock и WireMock.Net. В этой статье я постараюсь рассмотреть Pactum в сравнении с ними, рассмотрев некоторые важные функции, которые я ожидаю от любого инструмента для имитации API или библиотеки.

Вы когда-нибудь путешествовали по незнакомым местам без туроператора, гида или даже GPS для базовой ориентации в пространстве? Приходится составлять маршрут самостоятельно, разбираться в местности на ходу, импровизировать, чуть ли не рисовать собственную карту… Занятие не из легких, полное трудностей и препятствий, но их решение дарит новые знания и незабываемый опыт.

Решение задачи, поставленной перед нашим сотрудником Артуром Антоновым, напоминало именно такое путешествие, и в этой статье он пройдет его снова с вами.

Недавно телеграм выпустил обновление, в котором бот может открывать любое веб-приложение, что предоставляет много возможностей для разработчиков.

Я был несказанно этому рад, так как уже на тот момент разрабатывал бота, с помощью которого можно играть в игры. А теперь, с новыми возможностями — пользователя не будет перекидывать в браузер, а игры будут открываться прямо в телеграме. Красота!

Недавно наши интеграционные тесты Jest упали из-за недостатка памяти. Как оказалось, это не было аномалией, и тесты постоянно аккумулировали на себе столько памяти, что единственный процесс Node.js достиг стандартного предела в 4 ГБ, установленного в V8 для размера кучи. У нас около 450 тестов, объединенных в 50 сьютов, которые в основном являются интеграционными: имитированные HTTP-запросы обрабатываются на сервере, который взаимодействует с базой данных Postgres, запущенной в Docker. По этой причине мы используем последовательный запуск, поскольку у нас нет изолированного хранилища для каждого сьюта. После того, как мы обнаружили несколько проблем с Jest, соответствующих нашим диагнозам, одним из действий, которые мы предприняли, было выяснить, сможет ли миграция на альтернативный фреймворк решить наши проблемы.

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

В данном туториале я покажу вам, как тестировать компоненты на React с помощью Jest и Testing Library.

Список основных задач, которые мы решим на протяжении туториала:

1. Создание шаблона React-приложения с помощью Vite.
2. Создание компонента для получения приветствия от сервера.
3. Установка и настройка Jest.
4. Установка и настройка Testing Library.
5. Тестирование компонента с помощью Testing Library:
   
   1. Используя стандартные возможности.
   2. С помощью кастомного рендера.
   3. С помощью кастомных запросов.
6. Тестирование компонента с помощью снимков Jest.

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

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

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

По результатам неофициального опроса в Twitter poll было решено назвать этот эффект «boop». В этом уроке для intermediate-пользователей React мы разберём, как его реализовать.

⚛ О применении слоеной архитектуры в современном React-Mobx приложении

В данной статье я привожу пример использования композиции сервисов через инъекцию зависимостей в React приложении. Это позволяет сочетать проверенный временем подход и проработанные компоненты от Еnterprise и сообщества

В этой статье мы изучим, что такое zx.js, какие возможности он предоставляет и как мы можем применить его для написания скриптов, а затем научимся использовать все его фичи, разработав инструмент, который можно запустить из командной строки.

Дайджест новостей и полезных статей из мира фронтенд-разработки за последнюю неделю 30 мая–05 июня.

Angular не поддерживет возможность использования Content Projection для шаблонов (ng-template), но её можно реализовать самостоятельно.

Я не знал ни об одной JavaScript-библиотеке, которая была бы проста в использовании, до тех пор, пока я не увидел чью-то статью про Pactum на LinkedIn. Pactum меня заинтересовал, и я решил поработать с ним.

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

В этой небольшой заметке я хочу поговорить с вами о манипулировании битами в JavaScript, а также о двоичном представлении чисел с плавающей точкой (floating point numbers).

Обратите внимание: заметка носит, в основном, теоретический характер и направлена на углубленное изучение JavaScript, поэтому предполагается, что вы имеете некоторый опыт работы с данным языком программирования.

С вашего позволения, я не буду рассказывать о двоичной системе счисления и побитовых операторах. О последних хорошо написано здесь.

Начнем с определения функции для вывода в консоль инструментов разработчика в браузере переданного числа в бинарном формате (для типизации параметров и возвращаемого значения я прибегну к помощи TypeScript):

// https://stackoverflow.com/questions/9939760/how-do-i-convert-an-integer-to-binary-in-javascript
const log = (n: number): void => {
  console.log((n >>> 0).toString(2))
}

В этом году у конференции HolyJS непривычный формат: сначала три дня в онлайне, а позже отдельный офлайн-день в Петербурге. Так что можно будет и вдумчиво послушать доклады, и как следует пообщаться. А если до Питера вам не добраться, то и последний день можно будет увидеть в онлайн-варианте.

Но при непривычном формате суть программы остаётся прежней. Языки и фреймворки, производительность и «бессерверность», опыт бывалых и нововведения — в общем, всё, что может заинтересовать разработчика на JavaScript. Собрали все описания докладов в один хабрапост.

Перевод статьи "Disabling My Favicon: How and Why"

Статья о том как и зачем я убирал фавиконку со своего сайта.

Интро: почему я написал эту статью

Меня зовут Виктор, я разрабатываю страницу результатов поиска Яндекса. Несмотря на внешнюю простоту, поисковая выдача — сложная штука: на каждый запрос генерируется своя уникальная страница, на которой в зависимости от запроса может присутствовать блок Картинок, Карты, Переводчик, видеоплеер и многие другие компоненты. Все они должны запускаться и работать в памяти обычных бюджетных телефонов, которые использует большинство наших пользователей. Браузерам должно хватать ресурсов, чтобы пользователь не видел вот такого:

На своих серверах мы должны генерировать сотни миллионов уникальных страниц в сутки — это сложнее, чем просто отдавать одни и те же ресурсы. Генерация страницы не должна быть слишком требовательной к памяти сервера.

Разрабатывая проект на JavaScript (TypeScript, ClojureScript или каком-то другом языке, транслируемом в JavaScript), мы привыкли создавать объекты, массивы, строки и вообще писать код, как будто память бесконечна. Это не так. Я расскажу о видах проблем с памятью, о том, какие ограничения мы часто забываем и как их можно преодолеть. В ответ браузеры и пользователи скажут вам спасибо.

• Категории проблем с памятью
• Ограничения по памяти для разных типов данных
  　Heap
  　Buffer, TypedArray
  　String
  　Map, Set
  　Call stack
  　Типичные задачи, в которых можно наткнуться на ограничения по памяти
• Soft-утечки
  　Пример из продакшена
  　Как получаются soft-утечки
  　Как их обнаружить
  　Как найти причину
  　　1. Memory Allocation Timeline
  　　2. Техника трёх снапшотов
  　　3. queryObjects
  　　Тренируемся находить утечки
• Hard-утечки
  　Пример из продакшена
  　Как бороться
• Нестандартные оптимизации памяти в Node.js
  　Исходный код
  　Module._pathCache
  　Несколько версий пакета в node_modules
  　require('./data.json')
• Заключение

Уже больше года мы в Азбуке вкуса мигрируем с jQuery на Nuxt. По мере роста, делали свою реализацию микрофронтов, чтобы хорошо организовать работу и решить ряд проблем.  

В процессе наступили на пару граблей, долго думали и наконец сделали.  

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

Когда мы имеем дело с большим проектом, в репозитории которого накопились десятки тысяч строк кода, иногда единственным здравым решением кажется все переписать с нуля, а не оптимизировать. С точки зрения бизнеса может возникнуть вопрос: а почему вообще нужно оптимизировать или даже переписывать приложение, если оно работает? Дело в том, что по мере роста кодовой базы есть вероятность увеличения дублирующихся компонентов/фрагментов кода, появления устаревших участков, которые тормозят сборку, но полезной нагрузки уже не несут. Это негативно влияет на скорость работы приложения и увеличивает срок разработки.

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

В данном примере мы имеем дело с довольно объемной кодовой базой, UI которой обрабатывает большие массивы данных и выводит их на экран в виде списков, таблиц, графиков. Поэтому нам важно обеспечить гибкость нашего приложения как в плане сборки бандла, так и для развертывания в разных средах. И, конечно, иметь в рукаве самые последние фичи, позволяющие делать наш код красивым, понятным и читаемым.

Статья будет полезна тимлидам и техлидам проектов, а также разработчикам, которые столкнулись с развертыванием крупных неоптимизированных React-приложений.

Дайджест новостей и полезных статей о фронтенд-разработке за последнюю неделю 23–29 мая.