Привет, Хабр! Сегодня рассмотрим, как тестировать React-хуки с помощью @testing-library/react-hooks.Подход к базовым хукамСначала тестить будем на примере простого счётчика. Вот у нас хук:import { useState, useCallback } from 'react' export default function useCounter() { const [count, setCount] = useState(0) const increment = useCallback(() => setCount((x) => x + 1), []) return { count, increment } }Хуки не рендерятся напрямую, их нужно оборачивать через renderHook. Всё ка…
Предыстория: От A1 к B1+ без очевидных методовПосле переезда в США в июне 2024 года, я, как и многие, столкнулся с распространенной проблемой – языковым барьером. Мой английский стабильно находился на уровне A1, несмотря на заранее установленные приложения вроде Duolingo. Я испытывал трудности в ресторанах, при заселении в отели, и даже при уточнении самых простых вещей.Обычно онлайн-преподаватели и блогеры советуют учить по 5-10 слов, составлять предложения, заниматься регулярно по чуть-чуть. …
Привет, друзья! В этой серии статей я делюсь с вами своим опытом решения различных задач из области веб-разработки и не только. В этой статье мы изучим библиотеку react-force-graph-2d для рисования двумерных графов. Демо приложения: https://react-graph.netlify.app/ Локальный запуск приложения: git clone https://github.com/harryheman/react-graph.git cd react-graph npm i npm run dev Интересно? Тогда прошу под кат. ❯ Создание проекта и установка зависимостей Создаем чистый React+Typescript прое…
Сегодня в нашем CI ежедневно запускается более 5 000 автотестов, которые проверяют всё: от корректности скриншотов панели до скорости отклика API. Это не просто тулза в пайплайне, а часть инженерной культуры команды, которая помогает нам выпускать изменения быстро и с уверенностью.Привет! Меня зовут Михаил Шпаков, я руковожу разработкой Timeweb Cloud.Мы вышли на рынок четыре года назад, в условиях, когда уже сформировалась сильная конкуренция, и облачные платформы были далеко не новинкой. Поэто…
Всем привет. Меня зовут Виктор Степанов, я frontend chapter lead на платформе СберТеха GitVerse. Хочу рассказать про внутреннюю «механику» V8 и показать, как писать более быстрый код. Поехали!V8 JavaScript Engine увидел свет осенью 2008 года вместе с первым публичным релизом Chromium. И на сегодняшний день плотно, но незаметно вошёл в жизни всех, кто пользуется интернетом, так как используется для запуска JavaScript в большинстве браузеров, а также для его запуска в качестве серверного решения …
Возникла необходимость зафиксировать опыт с последнего проекта по прокачке производительности картографического сервиса. Так сказать, чтобы 2 раза не вставать при передаче опыта. И начнём с постановки, чтобы сразу определиться с аудиторией, кому мимо, а кому больше узнать как "прожевывать" и отображать на UI от 100К объектов в секунду и не лагать. Ну а кто-то вообще не в танке про картографические сервисы и хочет "на борт". Но для второй категории оговорюсь, что в статье миним…
Пролог: Знакомая боль Привет, Хабр! У каждого JS-разработчика есть своя история. История о том, как он впервые встретился с этим. Сидишь, пишешь код, всё логично, всё под контролем. И тут, чтобы проверить одну мелочь, открываешь консоль и из чистого любопытства пишешь: [] + {} // Получаешь: "[object Object]" // Хм, ладно, массив привел себя к строке, а объект стал... объектом. Логично. {} + [] // Получаешь... 0 ??? // ЧТО?! Стоп. Как это вообще возможно? Мы только что поменяли местами …
Привет, Хабр! Сегодня хочу представить вам HTML Builder — визуальный редактор HTML-структур с drag-and-drop интерфейсом, который я разрабатываю как часть библиотеки нестилизованных компонентов vue-dnd-kit/components (по аналогии с shadcn). Проект находится в стадии бета-тестирования зачаточном виде, и мне бы хотелось получить обратную связь от сообщества разработчиков и дизайнеров.Что такое HTML Builder?HTML Builder — это компонент для визуального создания и редактирования HTML-структур без нео…
Всем привет! Сегодня хочу разобрать кейс, с которым сталкивается почти каждый Angular-разработчик на существующем проекте.Часто в компонентах можно встретить такой код:public user: User | null = null; public posts: Post[] | null = null; public stats: Stats | null = null; constructor(private readonly apiService: ApiService) {} public ngOnInit(): void { this.apiService.getUser().subscribe((user) => this.user = user); this.apiService.getPosts().subscribe((posts) => this.posts = pos…