🏷 Продолжаем рассказывать про opensource-проекты, которые делают наши лучшие специалисты. В этот раз о ttag

ttag - это библиотека и набор утилит для локализации javascript-приложений. Работает на тегировагных шаблонных строках. Это фича языка, когда строка заворачивается в обратные кавычки, как gql у Apollo. В нашем случае выглядит вот так:

import { t } from "ttag";
t`Введите имя пользователя`

История:
4 года назад возникла задача локализации фронтенда prom.ua. Хотелось иметь простой инструмент для организации перевода интерфейса. Нам было важно, чтобы переводы в проект мог вносить переводчик (не тех.специалист, без доступа к репозиторию). Для перевода бекенда уже использовался gettext. Это надежный и проверенный стандарт для организации инфраструктуры переводов. Однако тогда мы не нашли готового удобного gettext инструмента для js. В итоге, решили писать свой, о чем ни разу не пожалели. Проекту уже около 4-х лет, успешно внедрен на продуктах EVO и не только. Также пришелся по душе ребятам из ProtonMail, Metabase.

Особенности:
- CLI для извлечения строк в формат gettext (*.pot, *.po файлы), для которых есть специальные редакторы
- babel-плагин для удобной сборки в разные локали
- поддержка JSX-тегов внутри строк для перевода. Удобно для перевода фраз, внутри которых зашита верстка. Например в случаях, когда в тексте встречается ссылка

Автор и основной мейнтейнер наш лучший специалист в области архитектуры фронтенда Саша Мостовенко. Задавайте ему свои вопросы в комментариях

#evo

🤛 Сегодня расскажем про новый плагин для eslint'a eslint-plugin-react-use-props. Это приятная мелочь, облегчающая борьбу за перфоманс и чистую кодовую базу.

С его помощью можно указать обязательное использование некоторых props для конкретного компонента.

Пример использования:
Мы активно улучшаем prefomance на проме. Один из важных факторов замедления - это отсутствие у картинок html атрибутов width и height, что приводит к смещению контента во время загрузки страницы и бьет по показателям Cumulative Layout Shift (CLS), т.е. прыгает страница при загрузке (тут подробней https://ax.digital/measuring-cumulative-layout-shift-cls/).

Точечно фиксить можно но это бесперспективняк. С помощью плагина указываем обязательные пропсы для компонентов картинок:

{
  "rules": {
    "react-use-props/require": [2,
      { "element": "img", "props": ["width", "height"] },
      { "element": "Image", "props": ["width", "height"] },
      { "element": "Picture.Item", "props": ["width", "height"] }
    ]
  }
}

картинка может быть <img src='' /> , <Image src='' /> , <Picture><Picture.Item src='' /></Picture>.

Также возможность депрекейтить пропсы, что поможет при рефакторинге часто используемого компонента.

{
  "rules": {
    "react-use-props/deprecate": [2,
      { "element": "MyComponent", "props": ["oldProp"] }
    ]
  }
}

Автор плагина - Евгений Марченко, наш лучший специалист по фронтенду. Задавайте ему вопросы в комментариях. Например, "что еще за Image и Picture.Item, Евгений?"

#javascript #evo

🎙 А вот и свежий WatEvoCast! Гостем 17го выпуска стал Александр Мостовенко, наш лучший специалист, архитектор фронтенда Prom.ua и автор библиотеки интернационализации ttag (https://ttag.js.org), про которую я писал недавно

Что обсуждали:
- кто такой архитектор и какие задачи решает
- что актуально в современном фронтенде
- прохладные истории про былое джаваскрипта prom.ua
- легкая интернационализация js-приложений

#watevocast

📈 Shopify описали свой способ построения rate-limit для API, построенных на базе GraphQL.

Каждому клиенту API выдается бюджет сложности запросов. Чем больше сущностей и связей вытягивает клиент за один запрос, тем более сложный, т.е. дорогой выходит запрос. Запросы на мутации дороже чем, на чтение, поскольку обычно провоцируют больше работы на стороне сервера.

Сложность запроса вычисляется отдельным middleware анализом самого запроса и его вложенности еще до того, как он попал на обработку graphql-бекенда. Таким образом продакшн-приложение оценка не нагружает и можно послать специальный запрос.

Наши лучшие специалисты из Shafa реализовали свой подобный анализатор сложности для GraphQL-запросов на Django. Это не рейтлимит, но можно докрутить в нужную сторону https://github.com/shafa-dev/graphql-limits

В начале статьи отдельно сравнивается полученное решение с рейт-лимитом обычного REST. И там обычно вообще не заморачиваются по этому поводу и рубят простым количеством запросов в секунду, независимо от сложности конкретного эндпоинта. Хотя, при желании, и на rest можно накрутить хитрую систему со сложностями.

https://shopify.engineering/rate-limiting-graphql-apis-calculating-query-complexity

#graphql

🔎 Через 20 минут наш лучший специалист Эрик Гимиранов расскажет об оптимизации веб-приложений. Как замерять перфоманс, как исправлять основные утечки, как мониторить прогресс

Трансляция будет тут https://youtu.be/YVVXxGmZMmM

#web

🎲 Фейсбук опубликовали статью с описанием новой структуры данных Ribbon-фильтр.

Если сильно упростить, то это оптимизированный по памяти Блум-фильтр. По-сути это вероятностная структура данных, которая позволяет проверить принадлежность элемента к множеству. Пока только в виде white-paper, но наверняка скоро и библиотеки с реализацией подъедут, в том числе от энтузиастов.

https://engineering.fb.com/2021/07/09/data-infrastructure/ribbon-filter/

#computerscience

🤖 Выходим из сезона отпусков. Сегодня в 13.30 наш лучший data-science специалист Даниил Петраковский расскажет о работе с ключевыми словами в товарном поиске на Prom.ua.

https://youtu.be/ho-ViD4D12w

#datascience

🎙 Записали новый выпуск WatEvoCast с Виталием Харитонским, лучшим специалистом и CTO Prom.ua

О чем говорили:
- Как ты стал СТО?
- Что входит и не входит в круг обязанностей?
- Вспоминаем факапы, с которыми пришлось справляться
- Как выбрать правильный инструмент под задачу?
- Что будет после кубернета?
- Вопросы за жизнь от друзей и коллег

Забавный факт, слово "PHP" в подкасте звучит гораздо раньше, чем слово "Python"

https://youtu.be/qbjw90n95AA
Apple Podcasts
Google Podcasts

Все выпуски можно найти на сайте https://podcast.evo.run/ или по хештегу

#watevocast

📺 Через 10 минут наш лучший специалист Данила Казимиров проведет доклад, в котором расскажет про микрофронтенд на Проме

Трансляция тут https://youtu.be/hQRpMgqZcBA
Старт в 13.30, приходите!

#javascript

🌌Продолжаем про наш opensource

Darq - асинхронный Celery-like менеджер задач для Python.


Предыстория

В одном из наших проектов мы начинали плавный переход с синхронного на асинхронный Python. Мы активно использовали Celery, и он был главным блокером при переходе - так, как даже постановку в очередь существующих Celery-задач из асинхронного кода реализовать нетривиально и очень костыльно. Не говоря уже о том, что весь новый код мы хотели писать асинхронным, а оставляя Celery пришлось бы дублировать много логики.

Основными нашими требованиями было:
- поддержка асинхронного кода
- возможность постановки задач из синхронного кода
- гибкость настройки: интеграция кастомного логгинга, трассировки, покрытие метриками

Из существующих решений ничего подходящего не нашлось. Так и появился Darq.

Что такое Darq?

Это асинхронный Celery-like менеджер задач, в качестве транспорта использующий Redis. Является форком arq (https://github.com/samuelcolvin/arq).

Основные фичи:
- @task декоратор, .delay() для постановки задачи в очередь (как в Celery)
- Отложенный запуск задачи
- Cron (scheduler)
- Graceful shutdown: при тушении процесса текущие задачи корректно завершаются
- Широкие возможности для кастомизации: сallback-и on_startup, on_shutdown, on_job_prerun, on_job_postrun, on_job_prepublish, on_scheduler_startup, on_scheduler_shutdown позволяют добавлять трассировочную информацию, покрывать метриками задачи и тд

#opensource #python

🏗 Любопытный новый сборщик esbuild. Обещает собирать статику в 40 раз быстрее вебпака.

Есть поддержка TypeScript, JSX, плагинов и sourceMaps. Можно ставить через пакетный менеджер, есть WASM версия и поддержка Deno. Проект активно развивается и имеет 28к звезд на гитхабе.

Пробовали? Делитесь впечатлениеми в комментариях.

https://github.com/evanw/esbuild

#javascript

🐯 Пользовались Notion? Знали, что под капотом реляционная база данных?

На первый взгляд кажется, что это задача для MongoDb или Cassandra, но нет — там самый натуральный постгрес.

Разработчики спроектировали интересную и довольно универсальную схему. За базовую структурную единицу взяли "блок": текст, список или картинку в приложении. Все это одна и та же сущность блока, только в разных ипостасях. Таким образом им удалось представить практически все сущности, которые создает в приложении пользователь.

О том, как Notion спроектировал схему для своей базы данных, читать тут: https://www.notion.so/blog/data-model-behind-notion

А историю шардинга их огромной базы, из-за которой все тормозило тут: https://www.notion.so/blog/sharding-postgres-at-notion

#databases

👀 Сегодня о важном, о больном — код ревью.

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

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

Есть несколько причин стараться сделать ревью удобнее для проверяющего:

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

О том как прокачать код ревью подробнее можно почитать здесь: https://mtlynch.io/code-review-love/

#culture

👏 GitLab стал первой open source компанией - выпускником Y Combinator, вышедшей на IPO.

Y Combinator — один из самых популярных стартап-акселераторов в мире, ежегодно туда поступает несчетное количество заявок. В их числе и украинские стартапы.

В честь успеха GitLab, YC выпустил пост, в котором они решили поделиться тем, что по их мнению помогло стартапу так быстро вырасти и добиться таких результатов. Главной ценностью отмечают радикальную прозрачность. CEO GitLab говорит, что единственное, чем компания не делится с окружающим миром — это зарплаты сотрудников и результаты performance reviews.

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

Мы в EVO пользуется GitLab-ом и да, классная штука, в масштабах такой компании, как наша, приносит неоценимую пользу.
Вдохновиться успешным успехом GitLab можно по ссылке: https://blog.ycombinator.com/gitlab-from-yc-to-ipo/

P.S. Также стало известно, что один из основателей Дмитрий Запорожец покидает GitLab https://dou.ua/forums/topic/35372

🌪 Мешок good first issues для тех, кто хочет стартовать в open source.

Есть все любимые языки, короткие описания проектов и количество ишшусов — можно выбирать любые.

Много очень классных, из тех, что вы наверное знаете:
- Jaeger на Go
- Numpy 🐍
- Next.js & Brave Browser на JS

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

Если у вас есть свои хаки как лучше заходить в опен сорс, делитесь. Ищите ли вы проекты специально или сначала чем-то долго пользуетесь, а потом возникает желание поконтрибьютить?

https://goodfirstissue.dev/

❤️ Не совсем технологическая, но классная новость. Evo вместе с благотворительным фондом Запорука запустили благотворительную платформу “Перемагаємо разом”.

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

Почему эта новость появилась тут? Корни проекта растут из проекта Charity, который начинала разрабатывать одна из команд интернатуры на Evo Summer Python Lab. Пару лет это был внутренний портал, а теперь он получил такое красивое развитие.

#evo

🔍 Что каждый разработчик должен знать про поиск?

Поиск это вообще ни разу не просто. Поисковые запросы и поисковые интенты очень варьируются у разных продуктов и в разных нишах.

- В фэйсбуке поиск осуществляется по графу с людьми
- В ютубе поиск осуществляется по каждому отдельному видео
- В Kayak и разных travel-planning приложениях поиск работает по абсолютно другому принципу, нежели у Фэйсбука и Ютуба
- В Google Maps поиск снова отличается от первых трех примеров
Pinterest и поиск по картинкам с едой?

Материал длинный, основательный и заслужил любовь наших лучших специалистов, появившись в одном из общих чатов EVO

https://scribe.rip/p/what-every-software-engineer-should-know-about-search-27d1df99f80d

#architecture

📎 Что известно про React Server Components?

React Server Components недавно анонсированная фича React, которая по словам создателей фреймворка должна “объединить перфоманс традиционного серверного рендеринга и интерактивность современных клиентских приложений”.

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

Ребята из команды Vercel, разработчиков Next.js, показывают как с помощью Next.js и React, они делают пару демо приложений (markdown editor и hacker news), используя React Server Components.

https://vercel.com/blog/everything-about-react-server-components?ck_subscriber_id=1095223562

#react

🥷 ClickHouse vs TimescaleDB

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

Датасет был взят из материалов, которые публиковали инженеры TimescaleDB. Скачать его и попробовать самостоятельно можно.

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

https://pradeepchhetri.xyz/clickhousevstimescaledb/

#databases

Пара орг.моментов о канале EvoDevClub

Раньше большинство постов сюда писал я, @brabadu. С недавних пор еще одним автором стал @t_khlr. Большая часть последних сообщений - его. Cпасибо тебе за это большое, Трой ;)

Также мы завели бота, через которого можете скидывать ссылки на интересные видео, проекты или просто пообщаться с нами @evo_suggestions_bot. Напримет, прямо сейчас напишите нам, что интересного за год с вами произошло

🔥EVO Python Lab’22! 🔥

Это случилось, мы снова открываем набор на интернатуру! Начинаем сбор заявок тут https://cutt.ly/PYLNfUn

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

Отличный способ получить опыт разработки в команде. Как всегда: все этапы от идеи до релиза финального проекта. Параллельно - лекции от лучших специалистов Evo.

Заявки принимаем до 21 января 2022.

Можете подписаться еще на Facebook интернатуры https://cutt.ly/xYL3A1I

Задавайте вопросы в комментариях, с радостью ответим

#evo #evopythonlab