JavaScript *

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

В этой заметке я хочу рассказать о двух вещах:

1. Сканере предварительной загрузки (теоретическая часть).
2. Пропуске невидимого контента (практическая часть).

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

Теоретическая часть представляет собой адаптированный и дополненный перевод этой статьи. Практическая часть — это небольшой эксперимент по применению новых свойств CSS, о которых рассказывается в этой статье (перевод).

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

На первый взгляд, синтаксис JS прост и интуитивно понятен, что подкупает. Однако это не мешает допускать ошибки всем, кто делает первые (или не первые) шаги в изучении языка. Мы попытались осветить некоторые промахи начинающих разработчиков.

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

А вот главные новости:

HTTP/3 опубликован в качестве предлагаемого стандарта

History API мёртв, да здравствует Navigation API

WebContainers (способ запуска Node.js в браузере) официально поддерживаются в Firefox.

https://fakt309.github.io/thisisthewall/

В языках программирования строки сравниваются очень просто, если строка отличается хотя бы на один символ, то возвращает false.

Но вот что если мы хотим не просто получать дискретное значение (true / false), а дифференцированное, например в процентах. Ведь согласитесь строки test и testing гораздо ближе к друг другу, чем test и abcd. Для данной проблемы существует множество решений, мы поговорим о самый популярных алгоритмах (также об их модификациях):

Расстояние Хэмминга

Расстояние Левенштейна

Сходство Джаро — Винклера

Коэффициент Сёренсена

Благодаря RFC о строго типизированных реактивных формах закрыта проблема на GitHub №1, а RFC автономных API представил упрощённый способ создания приложений Angular. Подробностями делимся к старту курса по Frontend-разработке.

В этой статье рассмотрим использование компилятора для 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))
}