Pull to refresh
1
0
Азиз @azizoid

Пользователь

Send message

React: тестируем компоненты с помощью Jest и Testing Library

Reading time 14 min
Views 25K


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


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


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


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

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


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

Читать дальше →
Total votes 5: ↑5 and ↓0 +5
Comments 2

Мыслительный фреймворк о том, как выбирать, чем заниматься дальше

Reading time 4 min
Views 8.6K
image

Год назад я ушел из Y Combinator и ощущал себя немного потерянным, не зная, чем заняться дальше [1]. Многие были уверены в том, что знают, что же мне следует делать дальше. Но… я не был уверен, и большая часть их предложений не откликалась во мне.

Думая о всевозможных дорогах, я осознал, что у меня нет подходящего фреймворка для принятия решений. Моя интуиция не помогала, так как я находил множество вещей интересными. Я спрашивал совета у друзей, и Хенрик Верделин поделился шаблоном для принятия решений, который как раз был мне необходим, чтобы понять, чем заниматься дальше.

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

В любом случае, мне предстояло не раз говорить о способе принятия решений, и я решил облечь это в пост [2].
Читать дальше →
Total votes 13: ↑10 and ↓3 +7
Comments 1

Как создать и опубликовать библиотеку React компонентов

Reading time 22 min
Views 15K

В этом руководстве вы пройдете через процесс создания и публикации собственной библиотеки компонентов React и размещения ее на Github.

От переводчика: в статье автор демонстрирует как создать библиотеку с React компонентом внутри, подготовить её к публикации с помощью Rollup, опубликовать через npm, настроить StoryBook, настроить тестирование с использованием React Testing Library и Jest. В оригинальной статье есть ссылка на видеоверсию текущего урока.

Читать далее
Total votes 1: ↑1 and ↓0 +1
Comments 1

Разработка приложений на Typescript с использованием Nx

Reading time 11 min
Views 19K

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

Читать далее
Total votes 6: ↑6 and ↓0 +6
Comments 11

React: пример использования Auth0 для разработки сервиса аутентификации/авторизации

Reading time 11 min
Views 24K



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


В этой статье я покажу вам, как создать полноценный сервис для аутентификации и авторизации (далее — просто сервис) с помощью Auth0.


Auth0 — это платформа, предоставляющая готовые решения для разработки сервисов любого уровня сложности. Auth0 поддерживается командой, стоящей за разработкой JWT (JSON Web Token/веб-токен в формате JSON). Это вселяет определенную уверенность в безопасности Auth0-сервисов.


Бесплатная версия Auth0 позволяет регистрировать до 7000 пользователей.


В этой статье я писал о том, что такое JWT, и как разработать собственный сервис с нуля.


Знакомство с Auth0 можно начать отсюда.


Исходный код Auth0 SDK, который мы будем использовать для разработки приложения, можно найти здесь.


Исходный код проекта, который мы будем разрабатывать, находится здесь.


В статье я расскажу только о самых основных возможностях, предоставляемых Auth0.


В примерах и на скриншотах ниже вы увидите реальные чувствительные данные/sensitive data. Это не означает, что вы сможете их использовать. После публикации статьи сервис будет удален.

Читать дальше →
Total votes 4: ↑4 and ↓0 +4
Comments 0

Выбираем self-hosted замену IFTTT

Reading time 6 min
Views 15K


If This Then That — сервис для автоматизации задач и создания пайплайнов из действий в разных сервисах. Это самый известный и функциональный продукт на рынке, но популярность ему навредила: полноценное создание апплетов теперь возможно только с платной подпиской, а на реддите периодически появляются жалобы на нестабильную работу сервиса. Как и в случае с любым полезным но платным продуктом, ищущий альтернативы обрящет их в опен-сорсном комьюнити. Мы сравним три self-hosted инструмента: Huginn, Beehive и Node-RED, попробуем их в действии и выберем лучший по функционалу и удобству использования.
Читать дальше →
Total votes 36: ↑34 and ↓2 +32
Comments 14

Определение терминов в договоре на разработку сайта

Reading time 4 min
Views 4.4K
В процессе взаимодействия веб-студии с клиентом часто возникают ситуации, когда от понимания и трактовки технических терминов зависят важные вопросы в рамках проекта. Для работников студии определения большинства терминов, которыми приходится оперировать в разговорах с клиентом, кажутся очевидными, и порой кажется, что клиенту, заказывающему сайт, это должно быть не менее очевидно. Однако в жизни клиент может не знать определений вообще (просто использовать слова не понимая их смысла), трактовать их по-своему, или (особенно в случае споров) использовать трактовку из первого попавшегося источника, включая любого доступного человека, который по мнению клиента «тоже понимает».

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

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

Читать дальше →
Total votes 17: ↑13 and ↓4 +9
Comments 9

Более чем 80 средств мониторинга системы Linux

Reading time 12 min
Views 315K
Ниже будет приведен список инструментов мониторинга. Есть как минимум 80 способов, с помощью которых ваша машинка будет под контролем.



1. первый инструмент — top

Консольная команда top- удобный системный монитор, простой в использовании, с помощью которой выводится список работающих в системе процессов, информации о этих процессах. Данная команда в реальном времени сортирует их по нагрузке на процессор, инструмент предустановлен во многих системах UNIX.
читать дальше
Total votes 94: ↑82 and ↓12 +70
Comments 68

Юбилейный дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №200 (22 — 28 февраля 2016)

Reading time 7 min
Views 27K
Предлагаем вашему вниманию юбилейную подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости.
Наши дайджесты еженедельно выходят на habrahabr.ru с 13 апреля 2012-го года, и спасибо что до сих пор их читаете :)


Читать дальше →
Total votes 39: ↑34 and ↓5 +29
Comments 7

Вы зарабатываете на информации (зачем нужен API и как его грамотно спроектировать)

Reading time 10 min
Views 24K
Здравствуйте, меня зовут Александр Зеленин и я веб-разработчик.
Информация — основа любого приложения или сервиса.



Более 10 лет назад я общался с владельцем покер-рума, и он показал мне страницу, приносившую около 10 000$ в день. Это была совершенно банально оформленная страница. На ней не было ни стилей, ни графики. Сплошной текст, разбитый заголовками, секциями и ссылками. У меня просто не укладывалось в голове — ну как вот это может приносить такие деньги?

Секрет в том, что «вот это» было одним из первых исчерпывающих руководств по игре в покер онлайн. У страницы был PageRank 10/10 (или 9, не суть), и в поисковой выдаче это было первое, на что натыкались.

Цель вашего приложения, какое бы оно ни было — донести (получить, обработать) некоторую информацию до пользователя.
Интернет магазин: информация о товаре, способы приобретения и доставки.
Даже если это будет ужасный, некрасивый и неудобный сайт, пользователи всё равно найдут тот товар, который искали. Особенно, если вы торгуете чем-то достаточно уникальным (хотя бы в вашем регионе). Плюс поисковики вам помогут, выводя пользователя сразу к нужному товару.

Конечно, конверсия может быть ниже, или пользователь может быть не очень доволен опытом работы с сайтом, но, если сам товар будет именно тем, что он искал — всё остальное будет малозначимо.

Я не рассматриваю магазины, продающие «на эмоциях», и покупки, о которых пользователь может потом пожалеть.

Многопользовательская онлайн игра: информация об игроке, друзьях и окружающем его мире
Примеры могут варьироваться в зависимости от жанра и других параметров, но в целом пользователя интересуют такие вещи, как история мира, переписка/общение с союзниками, информация о текущих событиях, информация об его персонаже/деревне/корабле/чем-угодно-другом.

Очень часто способ доступа к этой информации уходит за пределы самого клиента игры. С помощью мобильного приложения можно проверить, не нападает ли на тебя кто, или выставить какие-нибудь товары на внутриигровой аукцион, даже не заходя в саму игру.

Музыкальный стриминговый сервис — мета-информация + музыкальные файлы
Пользователь хочет найти интересующую его музыку. Все обёртки, умные очереди, лицензионность и прочая шелуха мало кого интересует.

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

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

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


Думаю, идею вы уже уловили. Примеры можно приводить бесконечно (вот ещё один: на википедию не за дизайном ходят. Более того, часть информации с википедии выводится сразу в поисковой выдаче, без открытия даже самого сайта), и если думаете, что в вашем случае это неприменимо — напишите в комментариях (или на почту / в личку), и я объясню, почему всё же применимо.

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

Я расскажу, как организовать работу с информацией так, чтобы это было:
1. Масштабируемо — репликация, шардирование и т.п. настраивается БЕЗ вмешательства в работу приложения.
2. Удобно для пользователей — легко документировать, понятно как использовать.
3. Удобно для ваших разработчиков — быстрое прототипирование, возможности оптимизации только необходимого.

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

Как же правильно работать с информацией?
Total votes 29: ↑20 and ↓9 +11
Comments 24

25 Laravel Tips and Tricks

Reading time 11 min
Views 83K
Было время, достаточно недавно, когда PHP и его сообщество ненавидели. Главная шутка была про то, насколько ужасен PHP.

Да, к сожалению, сообщество и экосистема просто были ниже сообществ других современных языков по уровню. Казалось, что предназначение PHP было прожить большинство времени в форме беспорядочных тем для WordPress.

Но позже, на удивление, вещи начали меняться — и достаточно быстро. Как будто пока ведьма помешивала горшочек, из ниоткуда начали появляться новаторские проекты. Наверно, самый заметный проект был Composer: наиболее полный менеджер зависимостей для PHP (как Bundler для Ruby или NPM для Node.js). В прошлом PHP разработчики были вынуждены совладать с PEAR (что было страшным сном, на самом деле), сейчас, благодаря Composer, они могут просто обновить JSON файл, и немедленно подтянуть все нужные зависимости. Здесь — профайлер, там — фреймворк для тестирования. Это занимает секунды.
Читать дальше →
Total votes 47: ↑40 and ↓7 +33
Comments 190

Google voice + ipkall + sipnet == Звоним в любую точку США бесплатно

Reading time 3 min
Views 31K

После того как я довольно плотно подсел на иглу виртуального шоппинга передо мной встал вопрос поиска дешевого решения для приема звонков из Американских магазинов.
Естественно можно купить прямой skype номер, но это стоит каких-то, но денег, а так как принимать звонки от магазинов приходится не так часто, то надо было найти решение поэкономичней.
Читать дальше →
Total votes 130: ↑124 and ↓6 +118
Comments 74

BookBook — необычный чехол для ноутбуков

Reading time 1 min
Views 4.4K
Пользователи ноутбуков Apple (думаю и для ноутов других производителей подойдет, хоть на сайте производителя и написано что они «Mac only») с диагоналями 13 и 15 дюймов получили возможность приобрести за $80 новый кожаный чехол-папку, имитирующую если не старинную, то хорошо зачитанную книгу с хорошо потертой обложкой. Обложка с легкой руки производителя – компании Twelve South получила имя BookBook. Спецификации чехла вызывают улыбку. Он совместим со всеми моделями ноутбуков MacBook и MacBook Pro с диагоналями 13 либо 15 дюймов. Как указывается на сайте, BookBook можно использовать и с новым MacBook Air, но в этом случае нужно положить в папку вместе с ноутбуком бумаги, чтобы ваш Air не болтался внутри.
image
Больше фоток под катом
Total votes 148: ↑101 and ↓47 +54
Comments 66

Теперь Google Analytics работает Асинхронно

Reading time 3 min
Views 5.4K
Новый код выглядит вот так:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
 var ga = document.createElement('script');
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
   'http://www') + '.google-analytics.com/ga.js';
 ga.setAttribute('async', 'true');
 document.documentElement.firstChild.appendChild(ga);
})();

Это значит, что гугл.аналитикс больше не замедлит загрузку вашего сайта :)
UPD: То есть, он скачивал свой 24кб ga.js во время загрузки страницы, теперь он это может делать после…
Но после первой загрузки, он обычно закэширован и на всех остальных сайтах используется один и тот же :)

Материалы по теме:
Под катом бонус, код для русских поисковиков
Total votes 85: ↑73 and ↓12 +61
Comments 83

Несколько jQuery плагинов, которые вы возможно станете использовать

Reading time 2 min
Views 1.9K

qTip





qTip — это бесплатный плагин для jQuery для создания подсказок (tooltip). Данный плагин кроссбраузерный, имеет обширные возможности к настройке и содержит множество функций, таких как: закругленные углы без применения изображений, speech bubbles (изображение речи как в комиксах), а так же эффекты — fade (постепенное исчезновение изображения), slide и возможность создания собственных эффектов. Данный плагин уже включает пять готовых тем, но можно создавать свои темы без особых усилий. Кроме того можно создавать окна диалогов, изменять цвет фона подсказки и места, где она отображается.

Скачать | Демо

Читать дальше
Total votes 96: ↑76 and ↓20 +56
Comments 30

Стабильный Windows XP, или правильная настройка системы после установки

Reading time 6 min
Views 4.3K
В этой статье описывается технология настройки компьютера (до и) после установки операционной системы, подсмотренная мною у моего тески и хорошего админа с ником jinsan.

Описанные шаги являются исключительно рекомендательными и довольно обобщенными. Как именно поступить на каждом этапе и какие программные продукты использовать — дело индивидуально каждого. Каждый шаг кратко но лаконично расписан, чтобы было понятно для чего, и почему именно так. Последовательность действий оптимизирована так, чтобы делать поменьше лишних движений («не верьте трудолюбивому админу....»©)

Данную статью можно воспринимать как шаблон для дальнейших действий. Настройка рассчитана для использования на клиентских компьютерах (чаще всего — на рабочем месте) и не предусматривает красивостей/удобностей.

Приступим…
Читать дальше →
Total votes 53: ↑22 and ↓31 -9
Comments 46

Использование Google Analytics API для построения статистики посещения страниц сайта

Reading time 5 min
Views 1.6K
При работе над одним из «опекаемых» сайтов возникла необходимость построить некое подобие системы внутренней статистики посещения страниц сайта. На помощь пришел Google Analytics, точнее Google Analytics API.
Читать дальше →
Total votes 14: ↑12 and ↓2 +10
Comments 5

Разрабатываем свой Sidebar Gadget

Reading time 7 min
Views 21K
image
Как часто вы пользуетесь гаджетами боковой панели Windows? А хотелось бы написать свой? Не простой гаджет «Hello World», а действительно полезный, который помог бы оптимизировать затраты времени на определенный кусок работы. Тогда давайте рассмотрим случай, когда вам нужно мониторить нагрузку 10-20 серверов.
Читать дальше →
Total votes 83: ↑73 and ↓10 +63
Comments 35

Windows 7 и USB-модем HUAWEI E1550

Reading time 2 min
Views 3.6K

Небольшая предыстория



Для кого-то доступ в интернет является неотъемлемой частью жизни, для кого-то чем-то должным, а для кого-то привилегией. В моем случае – это привилегия… В нашем провинциальном городке на юго-востоке Краснодарского края ситуация находится на весьма плачевном уровне (местный монополист ЮТК, предоставляющий доступ в инет по технологии ADSL и несколько мелких контор, которые работают с несколькими районами по оптоволокну), причем цены и качество услуг оставляют желать лучшего… Да и судьба распорядилась так, что воспользоваться услугами ни одной из этих контор возможности нет. По долгу службы, да и просто для души, инет хоть какой-нибудь, но нужен.

Решил я приобрести пакет МТС Коннект, в комплект которого входит USB-модем HUAWEI E 1550 и сим-карта с более-менее выгодным для серфинга тарифом. В центре обслуживания абонентов внимательно изучил коробку сего чуда, на которой в разделе «системные требования» было указано «Наличие стандартного USB-интерфейса, ОС Windows XP/Vista, Mac OS X 10.4/10.5». Первый вопрос, которые у меня возник – работает ли эта железка с Windows 7 ибо являюсь ее пользователем с момента выхода первой беты. Сотрудник центра категорично ответил «Нет, с Windows 7 работать не будет, тестирования проводились и дали отрицательный результат…» Заметив некую неуверенность в его ответе купить пакет я все же решился и добежав до машины воткнул заветную железку в ноут… С замиранием сердца я следил за процессом установки драйверов на Windows 7 RC x86… Через две минуты я был окутан всемирной паутиной, то есть все прекрасно установилось и работало без малейшего намека на сбои и нестабильную работу.

Далее маленькие трудности
Total votes 8: ↑8 and ↓0 +8
Comments 5

Information

Rating
Does not participate
Location
Белград, Белград, Сербия
Date of birth
Registered
Activity