JavaScript *

Недавно я поехал в Техас и купил трехрядный диатонический баян. Диатонические аккордеоны популярны для множества различных типов народной музыки, которую обычно учат на слух. Это хорошо для меня, потому что я все равно не умею читать ноты.

Аккордеон имеет 34 кнопки со стороны высоких частот и 12 кнопок со стороны басов. В отличие от фортепианного аккордеона, который имеет такое же логическое хроматическое расположение, как и фортепиано, у диатонического аккордеона просто набор кнопок, и я действительно не знал, с чего начать. Кроме того, каждая нота отличается независимо от того, вытягиваете ли вы меха или вталкиваете их, поэтому на самом деле на стороне высоких частот 68 нот (хотя некоторые из них повторяются). Кроме того, как я думаю, вы знаете, аккордеоны громкие. Очень громкие. Чтобы сильно не злить соседей, и узнать, как работает компоновка этой коробки, я решил сделать маленькое веб-приложение.

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

Всем привет :) Хотел бы здесь рассказать о использовании RTK Query + Redux Toolkit в больших проектах, а также ускорить вашу разработку и добавление новых страничек путем избавления от ненужных дублирований кода.

Если ты frontend-разработчик на react, то думаю тебе не впервой сталкиваться с использованием RTK Query вместе с Redux Toolkit, но даже если это так, то думаю мне есть что тебе показать новое ;) А если ты ни разу не сталкивался, то возможно после этой статьи задумаешься об использовании этих библиотечек.

При чтении лучше заглядывать в код проекта, поэтому ссылка. Установка зависимостей: yarn install. Запуск по команде: yarn dev.

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

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

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 июня.