Как стать автором
Обновить
5
0

Frontend Developer

Отправить сообщение

Тестирование Реакт UI компонентов

Время на прочтение4 мин
Количество просмотров9.8K

Что я делаю сейчас


В настоящее время я тестирую реализацию кода. Такие тесты ломаются каждый раз после рефакторинга, особенно в компонентах пользовательского интерфейса. В итоге я провожу кучу времени, копаясь в файлах .test.js, паралельно приследуюя магическую цифру в 80% для Test Coverage.


Что я должен делать


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

Читать дальше →
Всего голосов 3: ↑2 и ↓1+3
Комментарии1

JavaScript: что нас ждет в следующем году

Время на прочтение7 мин
Количество просмотров8.4K


Доброго времени суток, друзья!

Данная статья посвящена возможностям JavaScript, которые будут представлены в новой версии спецификации (ECMAScript 2021, ES12).

Речь пойдет о следующем:

  • String.prototype.replaceAll()
  • Promise.any()
  • WeakRefs
  • Операторы логического присваивания
  • Разделители чисел

Читать дальше →
Всего голосов 12: ↑10 и ↓2+10
Комментарии1

JavaScript: о том, что нас ждет в следующем году

Время на прочтение9 мин
Количество просмотров16K

Привет, друзья! Не за горами 2022 год, а это значит, что пришло время познакомиться с новыми возможностями, которыми нас порадует ECMAScript2022.


Вот о чем мы поговорим в этой статье:


  • await верхнего уровня
  • метод at() для индексируемых сущностей
  • метод hasOwn() для объектов
  • флаг d для регулярных выражений
  • 5 предложений для классов (специальные проверки для частных полей, блоки статической инициализации и др.)

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

Читать дальше →
Всего голосов 11: ↑11 и ↓0+11
Комментарии2

Сравнение производительности CSS и CSS-in-JS в реальном мире

Время на прочтение7 мин
Количество просмотров22K
Технология CSS-in-JS заняла прочное место среди инструментов фронтенд-разработки. И возникает ощущение, что CSS-in-JS-тренд в ближайшем будущем лишь усилится. Особенно — в мире React. Например, в исследовании State of CSS, проведённом в 2020 году, приняли участие 11492 человека. Лишь 14,3% из них не слышали о Styled Components (о ведущей CSS-in-JS-библиотеке). А вот пользовались этой библиотекой более 40% участников исследования.



Мне уже давно хотелось найти серьёзный материал, посвящённый сравнению производительности CSS-in-JS-библиотек, вроде Styled Components, и доброго старого CSS. Но я, к сожалению, ничего такого, вроде сравнения их производительности на реальном проекте, а не на каком-то простом наборе тестов, найти не смог. Поэтому я решил сам сделать такое сравнение. Я перевёл реальное приложение со Styled Components на Linaria, на библиотеку, которая выполняет извлечение CSS в файлы во время сборки проекта. В результате в приложении, использующем Linaria, не выполняется генерирование стилей во время работы этого приложения на компьютере пользователя.
Читать дальше →
Всего голосов 59: ↑59 и ↓0+59
Комментарии73

Styled Components — идеальная стилизация React-приложения

Время на прочтение15 мин
Количество просмотров66K

Это статья о Styled Components будет полезна новичкам и старичкам. Для понимания материала нужны базовые навыки работы с React и TypeScript.

Styled Components — одно из популярных решений написания кода методом CSS in JS. Гибкое, простое и, главное, идеально вписывается в архитектуру React приложения.

Разберём данную библиотеку на базовых примерах в связке с TypeScript. Также поделюсь своими лучшими практиками при написание кода.

Читать далее
Всего голосов 5: ↑3 и ↓2+1
Комментарии18

Rust — будущее инфраструктуры JavaScript

Время на прочтение8 мин
Количество просмотров21K

Rust - это быстрый, надежный и экономичный, с точки зрения памяти, язык программирования. Его признавали одним из самых любимых языков программирования шесть лет подряд (на основании опросов).

Созданный Mozilla, он теперь используется в FacebookAppleAmazonMicrosoft и Google для системной инфраструктуры, шифрования, виртуализации и низкоуровневого программирования.

Почему Rust сейчас используется для замены таких частей веб-экосистемы JavaScript, как минификация (Terser), транспиляция (Babel), форматирование (Prettier), комплектация (webpack), линтинг (ESLint) и другие?

Читать далее
Всего голосов 26: ↑18 и ↓8+13
Комментарии29

Ох уж эти QR коды

Время на прочтение5 мин
Количество просмотров84K

Пандемия, осеннее обострение, зима близко и QR коды на каждом шагу, роботы наступают, рутина работы затягивает. Хочешь покушать покажи картинку. Скучную и квадратную, для робота, не для человека.

Читать далее
Всего голосов 64: ↑61 и ↓3+80
Комментарии63

Тестирование JavaScript кода с Jest для чайников. Часть 1

Время на прочтение7 мин
Количество просмотров93K
Здравствуй, Хабр! Данное руководство является первой частью в запланированном цикле статей про такой замечательный фреймворк для тестирования как Jest. Материал будет полезен новичкам и тем, кто только знакомится с тестированием, и хотел бы изучить этот фреймворк. В первой части мы разберём: как начать работу с jest, как написать простой тест, и какие есть методы для сопоставления проверяемых значение с ожидаемыми. Кому интересно — добро пожаловать под кат!
Читать дальше →
Всего голосов 6: ↑4 и ↓2+6
Комментарии4

Задачи с собеседований (front-end)

Время на прочтение18 мин
Количество просмотров330K
Так получилось, что за свою карьеру front-end разработчика, я побывала на многих собеседованиях. Тема прохождения интервью не теряет своей актуальности, а в комментариях, когда речь заходит о собеседованиях, начинают ломаться копья. Хочу тоже внести свой вклад и поделиться накопившейся коллекцией вопросов. Прошу.

image
Читать дальше →
Всего голосов 74: ↑58 и ↓16+42
Комментарии230

Что ты такое, Event Loop? Или как устроен цикл событий в браузере Chrome

Время на прочтение3 мин
Количество просмотров152K
Как думаете, что произойдет, если запустить в консоли браузера этот фрагмент кода?

function foo() {
  setTimeout(foo, 0);
}

foo();

А этот?

function foo() {
  Promise.resolve().then(foo);
}

foo();

Если вы также, как и я, прочитали кучу статей про Event Loop, Main Thread, таски, микротаски и прочее, но затрудняетесь ответить на вопросы выше — эта статья для вас.
Читать дальше →
Всего голосов 50: ↑47 и ↓3+44
Комментарии16

Что ты такое, замыкания в JavaScript?

Время на прочтение4 мин
Количество просмотров27K
В этой статье я постараюсь подробно разобрать механизм реализации замыканий в JavaScript. Для этого я буду использовать браузер Chrome.

Начнем с определения:
Замыкания  - это функции, ссылающиеся на независимые (свободные) переменные. Другими словами, функция, определённая в замыкании, 'запоминает' окружение, в котором она была создана.
MDN

Если вам что-то не понятно в этом определении, это не страшно. Просто читайте дальше.

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

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

Итак, приступим:


Рисунок 1
Читать дальше →
Всего голосов 29: ↑27 и ↓2+25
Комментарии11

Информация

В рейтинге
Не участвует
Откуда
Москва, Москва и Московская обл., Россия
Дата рождения
Зарегистрирован
Активность

Специализация

Frontend Developer
Senior
JavaScript
React
TypeScript
Redux
HTML