Всем привет! На этой неделе с вами Влад Шилов (@Omgovich) из Ростова-на-Дону. Во фронтенде уже около 12 лет. Работа… twitter.com/i/web/status/1…

Большую часть карьеры был тимлидом и CTO в агентствах. Участвовал в запуске ~800 различных сайтов: от лендингов, пр… twitter.com/i/web/status/1…

Делал много интерфейсных анимаций (о чем стараюсь не вспоминать), застал темные времена IE6 (верстал на таблицах, б… twitter.com/i/web/status/1…

В последние годы работаю разработчиком на удаленке в продуктовой компании (чему бесконечно рад). В основном занимаю… twitter.com/i/web/status/1…

Темы этой недели:

— Зависимости: почему их стоит избегать и как их выбирать.
— JS-экосистема, популярность !== кач… twitter.com/i/web/status/1…

Слоган первого дня: «Do not choose dependencies blindly».

Начну с истории, которые слушатели подкаста Веб-стандарт… twitter.com/i/web/status/1…

В июне нам, в resume.io, понадобился компонент колор-пикера, чтобы пользователи могли менять цвет фон… twitter.com/i/web/status/1…

Я пошел в Google и NPM c поисковым запросом "react color picker", и не смог найти ничего кроме пакета react-color.… twitter.com/i/web/status/1…

После установки я только и делал, что удивлялся:

Импорт любого компонента из react-color делал наш бандл тяжелее а… twitter.com/i/web/status/1…

У меня в голове случился конфликт: «Не может же такой популярный пакет быть таким плохим. Я же вижу, что комьюнити… twitter.com/i/web/status/1…

Сначала я увидел, что там не настроен три-шейкинг, поэтому несмотря на то, что я импортировал только один компонент… twitter.com/i/web/status/1…

К слову, прямых зависимостей у пакета оказалось аж 6 штук, а всего в графе зависимостей их 11. Пожалуй, многовато для одного компонента.

Сами зависимости, тоже были "хороши".

Например, библиотека tinycolor для конвертации цветов (у которой между прочи… twitter.com/i/web/status/1…

Я начал искать другие пикеры и изучать их. Они оказались примерно такими же (куча зависимостей, большой вес, нет a1… twitter.com/i/web/status/1…

Пакеты, которые, в буквальном смысле, замедляют веб, могут стать популярными. А высокая популярность подталкивает е… twitter.com/i/web/status/1…

Почему я вообще считаю, что надо заморачиваться на тему числа и веса зависимостей? Кто-то скажет: «10 КБ или 100 КБ… twitter.com/i/web/status/1…

Проблема в том, что в проектах редко бывает только одна зависимость, а если у вас 10 зависимостей по 100 КБ, то это… twitter.com/i/web/status/1…

Представим, что вам надо по-быстрому сделать форму на нескольких языках с колор-пикером, автосаджестом и еще парой… twitter.com/i/web/status/1…

Если вы возьмете, например, react-dom (120KB), styled-components (14 KB), react-color (140 KB), react-intl (54 KB)… twitter.com/i/web/status/1…

Или вы возьмете preact (4 KB), goober (2 KB), react-colorful (6 KB), eo-locale (5 KB) и т.д., получите тот же самый… twitter.com/i/web/status/1…

@nikmostovoy Согласен, это просто самый частный пример.

К слову, на Chrome Dev Summit был доклад про main thread в… twitter.com/i/web/status/1…

Итак, пакеты которые разработаны без заботы о размере и доступности зачастую становятся очень популярны и делают ве… twitter.com/i/web/status/1…

Звучит разумно и благородно, но получается не всегда.

Например, однажды я решил помочь одной библиотеке: сделал PR… twitter.com/i/web/status/1…

К тому же, зачастую, если пакет изначально разрабатывался без мыслей о размере, то его либо сложно, либо невозможно… twitter.com/i/web/status/1…

Если же решите помочь какому-либо проекту стать легче, сперва вам понадобится настроить в репозитории инструменты,… twitter.com/i/web/status/1…

Рекомендую именно size-limit, так как в нем легко отслеживать вес отдельных импортов с учетом tree-shaking, да и во… twitter.com/i/web/status/1…

Так же, можно добавить в репозиторий action, для авто-отчетов в Pull Request-ах, чтобы упростить мейнтенерам процес… twitter.com/i/web/status/1…

Как можно сделать существующую библиотеку легче? Вариантов много, но начал бы со следующих пунктов:

Например, ощутимо помогает замена классов на функции, так как Babel трансформирует классы в "колбасу" из кода. К то… twitter.com/i/web/status/1…

Многие авторы не настраивают это и, в итоге, мы скачиваем в свои node_modules все подряд, включая тесты, демки и т.… twitter.com/i/web/status/1…

@jsunderhood Была похожая проблема с графиками, в итоге сделал свой велосипед sanichkotikov.github.io/micro-charts/

Если вы видите, что популярный пакет сложно сделать легче или автор не хочет принимать PR-ы на эту тему, вы можете… twitter.com/i/web/status/1…

Учитывая, например, алгоритм сортировки поиска NPM: чем больше пакет скачивают, тем выше он в выдаче. Поэтому самое… twitter.com/i/web/status/1…

Давайте сперва посмотрим на типичный флоу по поиску и установке пакетов:

Google/NPM → GitHub → npm install looks-g… twitter.com/i/web/status/1…

Weekly downloads в NPM обманчивая метрика, так как есть много вариантов по которым у пакета может быть много скачив… twitter.com/i/web/status/1…

Например, у moment до сих пор в несколько раз больше скачиваний чем у date-fns, хотя авторы первого уже даже заявил… twitter.com/i/web/status/1…

Unpacked size в NPM тоже почти бестолковая цифра, т.к. характеризует вес именно самого пакета. При этом, например,… twitter.com/i/web/status/1…

К примеру, содержимое пакета qs, у которого 40 млн скачиваний в неделю, имеет и тесты, и настройки редатора, и даже… twitter.com/i/web/status/1…

На Last publish в NPM, разумеется стоит посмотреть, так как если у пакета нет обновлений больше года, значит его, с… twitter.com/i/web/status/1…

Число звездочек на GH это просто vanity-метрика и не характеризует доверие комьюнити к проекту. Разработчик также м… twitter.com/i/web/status/1…

А вот на Issues надо смотреть обязательно. Если у какого-нибудь, простого по функционалу пакета, уже несколько деся… twitter.com/i/web/status/1…

Отмечу, что обязательно стоит посмотреть сами Issue: о чем они, как много среди них багов, как долго они уже открыт… twitter.com/i/web/status/1…

Разумеется, если автор их добавил, в README проекта могут быть различные бейджи про наличие тестов, процент code co… twitter.com/i/web/status/1…

Окей, на GH и NPM метрик маловато, как же тогда оценить пакет не ковыряясь полдня в репозитории и не устанавливая е… twitter.com/i/web/status/1…

1) Проект bundlephobia.com я очень люблю и пользуюсь им почти каждый день. Здесь можно получить такую информ… twitter.com/i/web/status/1…

Также очень полезно посмотреть распределение веса. Зачастую авторы библиотек выбирают зависимости так неудачно, что… twitter.com/i/web/status/1…

Кстати, bundlephobia.com ведет что-то вроде библиотеки аналогов пакетов. Если вы знаете легкую альтернативу… twitter.com/i/web/status/1…

Кто-то скажет, что так открыто предлагать альтернативы это немного токсично. Я лично считаю, что надо дать пользова… twitter.com/i/web/status/1…

2) Если не хочется заходить на сайт бандлфобии, то есть браузерный extension, который работает с их API и добавляет… twitter.com/i/web/status/1…

3) Переходим к сервису npm.anvaka.com, который обожаю не меньше. Этот сервис рекурсивно строит граф зависи… twitter.com/i/web/status/1…

Результаты могут вас, мягко говоря, удивить. Например, у пакета react-input-color шесть прямых зависимостей, но ит… twitter.com/i/web/status/1…

На меня, кстати, сильно влияет то, с какой такой анимацией тут строится граф: как будто какой-то вирус распространя… twitter.com/i/web/status/1…

4) Если вдруг npm.anvaka.com не работает (у них иногда бывает), можете воспользоваться сайтом… twitter.com/i/web/status/1…

5) Для любителей CLI-инструментов, могу предложить npm-consider. Не особо популярный инструмент, но с кучей полезны… twitter.com/i/web/status/1…

Если вы ищете пакеты на сайте NPM, то попробуйте npms.io — их поиск IMHO работает лучше.

Разница в… twitter.com/i/web/status/1…

В общих чертах, о том как работает анализатор пакетов от npms.io написано у них на сайте:… twitter.com/i/web/status/1…

Если хотите сравнить насколько лучше работает поиск npms.io, посмотрите, например, на выдачу все по… twitter.com/i/web/status/1…

... половина первых страниц выдачи на npmjs.com по этому запросу — форки самого популярного пакета. Д… twitter.com/i/web/status/1…

@jsunderhood Добавлю свои 5 копеек. Сервис, позволяющий оценить качество поддержки. Чем больше проблем и чем дольше… twitter.com/i/web/status/1…

Резюмирую недавние треды: хотел бы попросить вас внимательней подходить к подбору зависимостей, и изменить привычны… twitter.com/i/web/status/1…

Массово "ужесточив" отбор зависимостей, мы можем сделать тяжелые библиотеки менее популярными, и повысить рейтинг л… twitter.com/i/web/status/1…

tinyhttp and @UseExpressJS dependency tree comparison

@jsunderhood @havenchyk Помню как то нашёл внутри react-highcharts их собранные демки, которые занимали 80% от паке… twitter.com/i/web/status/1…

День второй: «Micro-libraries»

Что я подразумеваю под этим понятием? Для меня лично, микро-библиотека — это средст… twitter.com/i/web/status/1…

Это, например, date-fns, который решает большинство задач по работе с датами/временем, разбит на модули и весит оче… twitter.com/i/web/status/1…

Несколько месяцев назад, я узнал, что самый популярный колор-пикер для React весит аж 140 KB, а легких альтернатив… twitter.com/i/web/status/1…

Также, мы с @mlfrg, занимаемся развитием Wouter — это легкая современная альтернатива react-router, которая весит в… twitter.com/i/web/status/1…

Эти проекты и их цели вызвали некоторый резонанс, и я хотел бы поделиться нашими знаниями о создании подобных решен… twitter.com/i/web/status/1…

Недавно мы с коллегами из resume.io отдыхали в дачном поселке в Тульской области, всего в 2 часах от… twitter.com/i/web/status/1…

Есть много статей и видео о том, как размер JS-бандла влияет на время загрузки страниц при плохом соединении и как… twitter.com/i/web/status/1…

Это все наводит на мысли, что важно стараться держать в уме, что не у всех в мире есть проводной домашний интернет,… twitter.com/i/web/status/1…

Давайте наконец перейдем к тому, как разрабатывать микро-библиотеки.

Если вы нашли какую-то проблему или сферу для… twitter.com/i/web/status/1…

Если решите, например, создать альтернативу какому-то тяжелому компоненту, то вам стоит заранее определить максимал… twitter.com/i/web/status/1…

Почему это важно?

Во-первых, вам нужна цель, чтобы разработка вашей библиотеки не превратилась просто в копировани… twitter.com/i/web/status/1…

Во-вторых, для того, чтобы успешно продвигать библиотеку (об этом мы еще поговорим), вам понадобятся объективные пр… twitter.com/i/web/status/1…

К слову, ограничения могут касаться не только размера, но и производительности.

У меня есть один проект — генерато… twitter.com/i/web/status/1…

Для этого я "загнал" все популярные генераторы паролей в один бенчмарк, посмотрел на цифры и решил, что мой должен… twitter.com/i/web/status/1…

Как только вы определили ограничения, настраивайте инструменты для их мониторинга: например, size-limit и benchmark… twitter.com/i/web/status/1…

Кроме того, если вы планируете разрабатывать легкий аналог какой-то тяжелой библиотеки, то вам еще до начала разраб… twitter.com/i/web/status/1…

С одной стороны если API будет таким же, то разработчики легко смогут мигрировать на вашу библиотеку, а с другой —… twitter.com/i/web/status/1…

Например wouter повторяет знакомые по react-router интерфейсы, но при этом упрощает или отбрасывает advanced-кейсы,… twitter.com/i/web/status/1…

The blog post "You might not need date-fns" is published! Only facts, only hardcore, only lazy dev 🌈… twitter.com/i/web/status/1…

@jsunderhood В качестве альтернатив react и preact можно вспомнить github.com/ryansolid/solid

Как добиться того, чтобы вес библиотеки был небольшим?

Многое, конечно, зависит от задачи, но первым универсальны… twitter.com/i/web/status/1…

Причин избегать зависимостей в ваших пакетах просто уйма. По сути из-за добавления зависимостей вам станет сложно г… twitter.com/i/web/status/1…

Даже если вы грамотно подобрали зависимость для своего пакета и она идеально подходит вам в текущем состоянии, нет… twitter.com/i/web/status/1…

Где-то год назад я потратил несколько дней, изучая отчеты webpack-bundle-analyzer и ковыряясь в yarn.lock нашей мон… twitter.com/i/web/status/1…

Например, вы используете у себя в пакете ES6 классы, для работы которых Babel меняет код и добавляет кучу функций в… twitter.com/i/web/status/1…

Также, если избегать вещей, которые плохо минифицируются, требуют полифиллов или трансформация кода, то можно замет… twitter.com/i/web/status/1…

Если рассматривать различные микро-оптимизации веса бандла, то выделил бы следующие:

Вместо какого-нибудь { totalAmountOfPages: 1 } напишите { pageCount: 1 }.

А еще лучше попробовать разбить объект… twitter.com/i/web/status/1…

Кстати, если ваша библиотека подразумевает настройку с помощью конфиг-объекта, то лучше сразу придумать названия кл… twitter.com/i/web/status/1…

Мне дважды предлагали заменить этот код на аналог с Math, так как он короче. Однако не учитывали, что минификация в… twitter.com/i/web/status/1…

Из области нано-оптимизаций:

Самое дикое, что я видел на эту тему — это сортировка строки с алфавитом в nanoid, чтобы gzip лучше сжал итоговый ф… twitter.com/i/web/status/1…

Коротко о продвижения микро-библиотек.

Сразу скажу, что я не особо известный разработчик. Летом у меня было всего… twitter.com/i/web/status/1…

Если считаете, что нужно быть "звездой", чтобы ваш проект начали использовать, то это не так. Разумеется это поможе… twitter.com/i/web/status/1…

Советую посмотреть доклад @andrey_sitnik о продвижении опен-сорс проектов, так как многие вещи я оттуда использовал… twitter.com/i/web/status/1…

Бесполезный проект продвинуть невозможно.

У хорошей микро-библиотеки есть главное, что необходимо для роста популя… twitter.com/i/web/status/1…

Если подойти к разработке проекта используя принципы, которые я описывал в начале дня, то она будет в разы легче/бы… twitter.com/i/web/status/1…

Не поленитесь потратить некоторое время и сделать бенчмарки. Тогда люди смогут объективно оценить выгоду от использ… twitter.com/i/web/status/1…

Мне, кстати, не хватало бейджей про три-шейкинг и число зависимостей, так что я сделал их сам:… twitter.com/i/web/status/1…

Как только вы сделали первые стабильные версии, сформировали хорошее README, нужно запускать волну продвижения: дел… twitter.com/i/web/status/1…

Нет смысла делать что-то целый год, чтобы потом написать один твит. Публикуйте информацию по мере выхода фич и разв… twitter.com/i/web/status/1…

Как разработчик микро-библиотеки, вы в выгодном положении — ваш проект уже несет очевидную пользу для комьюнити и э… twitter.com/i/web/status/1…

Несколько постов в Твиттере на английском, несколько публикаций на Reddit/DEVto, пара постов в Telegram/Twitter-кан… twitter.com/i/web/status/1…

Кто-то скажет: "У меня вообще нет подписчиков, как люди увидят мои твиты?". Справедливо. И я вас понимаю, ведь у ме… twitter.com/i/web/status/1…

Reddit на удивление сильно помог нам на начальном этапе продвижения. После первых постов у нас даже появились актив… twitter.com/i/web/status/1…

Так же, рекомендую вам не стесняться mention-ить в Твиттере известных разработчиков, которые могут оценить вашу заб… twitter.com/i/web/status/1…

@jsunderhood 4. Если у вас TypeScript, то можно использовать Transformation API.
К примеру, github.com/timocov/ts-tra…… twitter.com/i/web/status/1…

@jsunderhood 2. Если этого нет, можно договориться в проекте об особом именовании свойств, и потом настроить минифи… twitter.com/i/web/status/1…

Чтобы разработчики начали использовать ваш пакет в продакшене, информация о вашей либе должна внушать им уверенност… twitter.com/i/web/status/1…

Без популярности неоткуда взяться установкам, а без них нет доверия, которое нужно для популярности.

Нужно, чтобы… twitter.com/i/web/status/1…

Если ваша библиотека только вышла, то вряд ли кто-то сам найдет и установит ее.

Но никто не мешает вам найти через… twitter.com/i/web/status/1…

Эти проекты не обязательно должны быть какими-то супер-популярным. На стартовом этапе важно, чтобы у вашей библиоте… twitter.com/i/web/status/1…

Разумеется, шанс, что PR-ы примут — не очень высок, а делать их при этом очень сложно (нужно развернуть и запустить… twitter.com/i/web/status/1…

Если у вас хорошее README, демка и вы хорошо описали пользу для проекта от вашего PR, то шансы конечно выше.

Сразу… twitter.com/i/web/status/1…

Точно не будет лишним отметить проекты, которые используют вашу библиотеку, в README и, по возможности, "приправить… twitter.com/i/web/status/1…

Мне немного повезло, так как я изначально сделал колор-пикер как рабочую задачу для resume.io, а уже… twitter.com/i/web/status/1…

Так что если у вас есть возможность применить вашу библиотеку в рамках проектов вашей компании, то разумеется это с… twitter.com/i/web/status/1…

Продвижение опен-сорс проекта это работа. Нужно много думать, много писать на английском, делать публикации на разн… twitter.com/i/web/status/1…

@jsunderhood 5. В продолжение 4 - github.com/timocov/ts-tra… - переименовывает вообще всё, что не торчит наружу или не… twitter.com/i/web/status/1…

Do they really make any sense for library's size? Of course! For lightweight-charts 2 these transformers reduces th… twitter.com/i/web/status/1…

15:48

One of the projects I'm proud to be part of is lightweight-charts. It's the library written in TypeScript to displa… twitter.com/i/web/status/1…

Ключевой частью resume.io является конструктор, в котором пользователи создают резюме, чтобы потом ск… twitter.com/i/web/status/1…

Ближайшие два дня пройдут в формате истории.

Сегодня о том, на какие грабли мы наступили, пытаясь сделать рендерин… twitter.com/i/web/status/1…

В 2016 году, когда велась работа над MVP нашего продукта, ребятам был нужен быстрый и легкий способ внедрить генера… twitter.com/i/web/status/1…

Бекенд resume.io работал и работает на Rails, поэтому ребята нашли гем Wicked PDF, который генерирует… twitter.com/i/web/status/1…

Wicked PDF — это ruby-обертка над CLI-инструментом wkhtmltopdf, который под капотом работает с Qt Webkit. Последний… twitter.com/i/web/status/1…

Быстро были сверстаны несколько HTML-шаблонов для резюме, которые рендерились рельсами как обычные view, и в 2016 в… twitter.com/i/web/status/1…

С точки зрения UX не очень хорошо, зато уже работало и приносило деньги.

Однако, с ростом пользовательской базы на… twitter.com/i/web/status/1…

Оказалось, что многие CSS-свойства в Wicked PDF работали неправильно. Например, letter-spacing не работал вообще, а… twitter.com/i/web/status/1…

В 2017 мы выпустили следующую версию редактора, в которой, поскольку этого явно не хватало, была добавлена возможно… twitter.com/i/web/status/1…

Превью, работало на том же HTML- и CSS-коде, который мы использовали для рендера PDF. Поскольку это были обычные ве… twitter.com/i/web/status/1…

Добавление превью открыло Ящик Пандоры и число наших проблем начало расти в геометрической прогрессии.

Дело в том,… twitter.com/i/web/status/1…

Тру стори. Считаю, что опен-сорс — это тренажёр по запуску своего продукта. Там всё то же самое: есть рынок, каналы… twitter.com/i/web/status/1…

Продвижение опен-сорс проекта это работа. Нужно много думать, много писать на английском, делать публикации на разн… twitter.com/i/web/status/1…

12:02

Большая часть проблем, которые в 2017 году были у нас в рендеринге PDF из HTML+CSS, были вызваны тем, что Wicked PD… twitter.com/i/web/status/1…

Это, к слову, стало одной из причин закрытия PhantomJS, который тоже работал на Qt Webkit. Вот интересное интервью… twitter.com/i/web/status/1…

Пока мы думали, что же делать, команда Хрома выпустила Puppeteer и все недовольные пользовали Wicked PDF, включая н… twitter.com/i/web/status/1…

Мы переделали архитектуру рендеринга и сделали новый изолированный сервис, который запускал Puppeteer. Сам код для… twitter.com/i/web/status/1…

Что не маловажно, мы не удалили наш Wicked PDF рендерер. И он, и наш новый сервис работали с HTML+CSS, а значит был… twitter.com/i/web/status/1…

После миграции на Puppeteer жизнь стала в разы легче, PDF-ки стали рисоваться без багов, а клиенты стали на порядок… twitter.com/i/web/status/1…

@jsunderhood Звучит как преролл к какому-то боевику или триллеру…

От создателей «Уронить прод за 60 секунд» и «Гар… twitter.com/i/web/status/1…

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

Пол… twitter.com/i/web/status/1…

Поэтому мы разработали новую версию редактора, правую часть экрана в котором занимает лайв-превью с (внимание!) пос… twitter.com/i/web/status/1…

Принцип отрисовки самого превью мы не поменяли — это все еще были обычные HTML и CSS, которые показывали через ifra… twitter.com/i/web/status/1…

Суть в том, что веб-страница это просто длинное "полотно" и разделения на страницы у нее нет.

В попытках решить эт… twitter.com/i/web/status/1…

Скрипт пробегался по всем HTML-элементам и проверял, попадают ли они в зону указанного размера и, таким образом соб… twitter.com/i/web/status/1…

Общение между Paguin-ом в iframe и нашим редактором резюме осуществлялось через postMessage.

Paguin посылал "навер… twitter.com/i/web/status/1…

Смена страниц производилась без перезагрузки iframe — мы просто устанавливали display: none всем элементам, которые… twitter.com/i/web/status/1…

Вроде бы это все должно было решить проблему с превью, но увы...

Главной темой жалоб в поддержку стало то, что пол… twitter.com/i/web/status/1…

Дело в том, что полностью повторить, то как Chrome разбивает контент на А4-страницы при печати у нас не вышло. Из-з… twitter.com/i/web/status/1…

Например, в сделанной Puppeteer-ом PDF-ке параграф текста мог начаться на одной странице, а закончится на другой. М… twitter.com/i/web/status/1…

Были и более жестокие проколы. Например, некоторые пользователи заполняли резюме так, что у них попадался непрервын… twitter.com/i/web/status/1…

Кроме того, так как сами PDF-файлы мы генерировали с помощью Headless Chrome, у пользователей, например, Edge и Fir… twitter.com/i/web/status/1…

В течение года мы предпринимали разные попытки потюнить скрипт пагинации, но быстро стало понятно, что эту битву на… twitter.com/i/web/status/1…

У @GlafiraZhur узнал про существование специальных очков, которые симулируют плохое зрение.

Купите такие своим диз… twitter.com/i/web/status/1…

Резюмирую сегодняшнюю информацию:

Вы можете генерировать PDF-файлы на основе HTML+CSS если ваше приложение не пока… twitter.com/i/web/status/1…

Тот же Puppeteer достаточно легко внедрить, а для верстки PDF нужно будет знать только HTML и CSS. Это хорошее реше… twitter.com/i/web/status/1…

Завтра продолжу рассказом о том, к какому решению и почему мы в итоге пришли, как генерация и live-превью PDF у нас… twitter.com/i/web/status/1…

Раз уж мы сегодня погружаемся в прошлое, как на счет немного удариться в ностальгию?

Давайте поделимся друг с друг… twitter.com/i/web/status/1…

@jsunderhood Было время... pic.twitter.com/2Eb5YCX1sp

@jsunderhood Нашёл свой дизайн, только рипнутый.
Ох уж эти волшебные 3 буквы - DLE pic.twitter.com/5yPje7HXYG

Мой первый сайт, в далеком 2009 🙂 pic.twitter.com/nTB4HW3zw7

Раз уж мы сегодня погружаемся в прошлое, как на счет немного удариться в ностальгию?

Давайте поделимся друг с друг… twitter.com/i/web/status/1…

16:08

@jsunderhood Ого, я нашел свой самый первый задизайненый сайт
~8 лет назад 😅 pic.twitter.com/S0teXuITyy

@jsunderhood Самый древний дизайн (только!), который делал в 2007 году pic.twitter.com/pEpQFf1ju5

@jsunderhood Год не помню, возможно 2006. pic.twitter.com/UjB0HI7hxK

Тред ностальгии по дизайну сайтов в нулевые

Раз уж мы сегодня погружаемся в прошлое, как на счет немного удариться в ностальгию?

Давайте поделимся друг с друг… twitter.com/i/web/status/1…

19:30

@jsunderhood Почему футер не приклеен? Почему хлебные крошки едут? Почему сайдбар под землей?

Посоветуйте, пожалуйста, хороший онлайн редактор кода для собеседований? @jsunderhood @xufocoder @GlafiraZhur @devellloper

Продолжаю историю про PDF:

Наступил 2018, у нас стало 1,8 млн юзеров и наш support был завален письмами от пользов… twitter.com/i/web/status/1…

Как я писал вчера, хоть Puppeteer и делал PDF на основе тех же HTML+CSS, что мы показывали юзеру в браузере. Для св… twitter.com/i/web/status/1…

Стало понятно, что пока за рендер и превью будут отвечать разные инструменты, идентичного отображения добиться не выйдет. Что же делать?

Можно было бы, например, оставить и Puppeteer, и наши HTML/CSS-шаблоны: Генерировать новый PDF-файлы при каждом изм… twitter.com/i/web/status/1…

Однако, этот вариант быстро "отпал", так как для каждого пользователя превью нужно обновлять хотя бы раз в нескольк… twitter.com/i/web/status/1…

Мы проверили существующие JS-библиотеки, которые позволяли бы создавать PDF и на сервере, и в браузере. Были, напри… twitter.com/i/web/status/1…

Autolayout-а в jsPDF и PDFkit нет — нужно самостоятельно расставлять элементы по координатам (как в Canvas API), "р… twitter.com/i/web/status/1…

Упс, опечаточка: "мы НЕ смогли написать".

PDFkit, PDFmake и jsPDF не подошли, так что мы решили потестировать проект React-PDF, за которым уже некоторое врем… twitter.com/i/web/status/1…

React-PDF нам хорошо подходил, так как отлично укладывался в наши требования:

1) Знакомые технологии. Чтобы создат… twitter.com/i/web/status/1…

3) SSR и CSR. React-PDF может делать PDF не только на сервере, но и в браузере, а это значит, что можно сэкономить… twitter.com/i/web/status/1…

Мы сделали у себя в проекте браузерный playground для экспериметов с React-PDF. И, чтобы снова не наступить на стар… twitter.com/i/web/status/1…

Например, у нас был чеклист для проверки "качества" рендеринга. Не хватало только поддержки SVG (вроде бы уже есть)… twitter.com/i/web/status/1…

В первой половине 2019 года мы переверстали все шаблоны резюме на React-PDF, решили все возникшие по пути проблемы… twitter.com/i/web/status/1…

React-PDF хорош тем, что упрощает верстку сложных PDF-файлов, делая его максимально похожим на верстку HTML-страниц… twitter.com/i/web/status/1…

Есть ряд компонентов, которые специфичны именно для PDF:

— Document – корневой компонент, для описания различных м… twitter.com/i/web/status/1…

Отмечу, что хотя компонент и называется Page, не нужно вручную оборачивать каждую страницу в отдельный компонент. В… twitter.com/i/web/status/1…

Чтобы вручную перенести контент на новую страницу, можно воспользоваться специальным property "break". pic.twitter.com/kyHr3FwLOa

Хотя рендеринг в React-PDF, по сути, не имеет отношения к вебу и браузерам, стилизация там делается с помощью CSS,… twitter.com/i/web/status/1…

Серьезно, тут есть и полноценный flexbox, и отступы, и border-ы, все что нужно для настройки шрифтов. Даже position… twitter.com/i/web/status/1…

Как я понял, React-PDF, как и React-Native, для работы с расположением элементов использует yoga-layout.

yogalayout.com

Стандартным способом работы с CSS является использование StyleSheet и передача стилей в properties компонентов: pic.twitter.com/BDOTPQWYcz

Есть также дополнительный пакет, который дает возможность работать со styled-components, если так удобнее или привы… twitter.com/i/web/status/1…

В React-PDF есть поддержка кастомных шрифтов и, в целом, API для работы с ними очень удобное. Все, опять же, максим… twitter.com/i/web/status/1…

Список поддерживаемых в стилях единиц измерения. Не так давно добавились vw и vh. pic.twitter.com/xz9kYeKFKh

В рендеринге сложных PDF-ок безусловно помогает то, что React-PDF работает именно на React, так как это дает возмож… twitter.com/i/web/status/1…

Ну и, разумеется, вы можете разделять ваш код на компоненты, оборачивать их в условия и циклы. В общем все так же,… twitter.com/i/web/status/1…

Без ложки дёгтя конечно никуда. Давайте расскажу про минусы React-PDF и про проблемы, с которыми столкнулись в процессе работы...

👇

1) Блокировка потока. Ранее я говорил, что React-PDF генерит PDF-файл для простого резюме где-то за 200 ms. Это дос… twitter.com/i/web/status/1…

Это дико печально, но мы разобрались с этой проблемой просто "засунув" весь браузерный код генерации PDF в вебворке… twitter.com/i/web/status/1…

2) Не HTML. У нас в редакторе резюме есть поля, которые заполняются с помощью WYSIWYG и их контент хранится в базе… twitter.com/i/web/status/1…

Но React-PDF не знает что такое HTML. Поэтому нам пришлось дополнительно установить в приложение HTML-парсер и потр… twitter.com/i/web/status/1…

3) Не CSS. Хоть и похоже, но все таки это не браузерный CSS. Бывают небольшие различия в работе и в первое время он… twitter.com/i/web/status/1…

4) Размер. К сожалению, React-PDF весит очень много. Минифицированный вес рендерера больше 1 МБ (420 KB gzip). Поэ… twitter.com/i/web/status/1…

В защиту React-PDF скажу, что все JS-генераторы PDF-файлов весят много. PDFmake, например, весит еще больше. Так чт… twitter.com/i/web/status/1…

5) Поскольку это не веб-страница, а PDF-файл, то дебажить верстку сложновато. В браузерном превью вы не можете клик… twitter.com/i/web/status/1…

В React-PDF есть специальный проперти debug, который подсвечивает box элемента и показывает его размер, но это, раз… twitter.com/i/web/status/1…

6) Достаточно долгое время автор библиотеки работает над релизом v2 (уже вышло 14 бета версий), поэтому если вы зах… twitter.com/i/web/status/1…

React-PDF у нас работает не только в браузере, но и в микросервисе. Мы собираем webpack-oм тот же самый код, импорт… twitter.com/i/web/status/1…

Серверный React-PDF мы используем:
— как fallback для юзеров, браузер которых не поддерживает React-PDF в браузере;… twitter.com/i/web/status/1…

Вообще говоря, помимо генерации PDF, у нас еще куча всего "крутится" в микросервисах: рендер DOCX-файлов, "склейка… twitter.com/i/web/status/1…

Недавно наш CTO @mlfrg делал доклад о возможностях serverless-функций и современном edge computing. Там много приме… twitter.com/i/web/status/1…

Кстати, тем кто предпочитает видео тексту или пропустил мои вчерашние треды: ~1,5 года назад (когда мы еще работали… twitter.com/i/web/status/1…

@jsunderhood @dmtrKovalenko Вот пилю опенсорс решение в виде сервиса @VisualReTracker
Под капотом там pixelmatch
Буду рад фидбеку ☺️

An interesting alternative to lodash and Ramda:

Remeda: The first "data-first" and "data-last" utility library des… twitter.com/i/web/status/1…

Наступила пятница, а значит время немного отдохнуть от разработки!

Первая тема — коллекционирование.

Я, например,… twitter.com/i/web/status/1…

@Lik04ka @jsunderhood Хожу на конференции и получаю на день рождения 😅 pic.twitter.com/XowuJP3m19

@Neesoglasnaja @jsunderhood @Lik04ka Тоже есть одна от Wix, правда я её решил переименовать :) pic.twitter.com/pKIakcc8Ev

@jsunderhood Коплю медиаторы. Основная коллекция раз в 6-7 больше, просто при переезде не взяла её из дома 🤷‍♀️ Ста… twitter.com/i/web/status/1…

@jsunderhood В прошлом году начал собирать транспортные карты Тройка. Их выпускают ограниченным тиражом и распростр… twitter.com/i/web/status/1…

Благодаря отцу, с детства читаю много науч. фантастики и кажется, это прокачало мое воображение. Когда работаю над… twitter.com/i/web/status/1…

@jsunderhood Художественной литературы мало, но фильмы/игры с детства прям ну очень повлияли на воображение. По сут… twitter.com/i/web/status/1…

@jsunderhood я читаю много, но на меня очень сильно повлияли три:
Айн Ренд "Источник"
Джек Лондон "Мартин Иден".
Ми… twitter.com/i/web/status/1…

Больше всего на карьере стартап-программиста отразилось творчество группы Кровосток

Благодаря отцу, с детства читаю много науч. фантастики и кажется, это прокачало мое воображение. Когда работаю над… twitter.com/i/web/status/1…

13:32

@jsunderhood Спикерская сентиментальность: собираю беджики с конференций. Иногда не свои. Да, @Neesoglasnaja?) pic.twitter.com/QLmWpSLGZO

Ладно, настало время задать самый важный вопрос, ради которого я пришел в jsunderhood...

Чего больше вы пьете?

@jsunderhood Как-то одному студенту рассказывал про этот метод, а его жена и дочь увидели в чате фото уточек, и при… twitter.com/i/web/status/1…

Ищу работу frontend-developer / junior. Знаю HTML, CSS, BEM, JS, JSX, Bootstrap, React, Git, ST. На React пишу прос… twitter.com/i/web/status/1…

Тред-дискуссия: Работа и счастье.

Последние 2 года работаю "рядовым" разработчиком в продукте и текущая работа дел… twitter.com/i/web/status/1…

Уверен, что я, как и многие, даже не задумывался зачем мне вообще карьерный рост. Это какой-то советский стереотип,… twitter.com/i/web/status/1…

Мне кажется, я был неплохим руководителем, но это всегда было очень тяжело: сколько я не делегировал обязанности, н… twitter.com/i/web/status/1…

Слава богу, жизнь наградила меня стабильной психикой, но однажды я начал чувствовать, что приближаюсь к своему пред… twitter.com/i/web/status/1…

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

Если у кого-то, как у меня раньше, в голове сидит стереотип, что нужно обязательно стать "начальником цеха", остано… twitter.com/i/web/status/1…

А какие цели вы глобально ставите своей работе и к чему сейчас стремитесь?

@jsunderhood Поддерживаю. Был СТО, ощущал себя не в своей тарелке. Провёл даунгрейд до разработчика - счастлив.

@jsunderhood Небольшая статистика по теме pic.twitter.com/rlX9bQahZs

Как долго готовы в целом писать код?

16:56

Недавно мы затронули тему поиска зависимостей и я упомянул, что GitHub и NPM плохо помогают в этом.

Скажите, а что… twitter.com/i/web/status/1…

Не пугает ли вас возможная перспектива того, что Microsoft может, если захочет, изменить вектор развития всего наше… twitter.com/i/web/status/1…

@jsunderhood А как это решается в других экосистемах?

Кому принадлежат pypi, rubygems, maven central?

👋 Для тех кто пропутил контент, который был в начале недели, или хочет сохранить эту информацию в более структуриро… twitter.com/i/web/status/1…

Вот и подошла к концу моя неделя в jsunderhood.

Спасибо, что читали и комментировали! Надеюсь, было интересно и вы… twitter.com/i/web/status/1…

Подписывайтесь, чтобы оставаться на связи 👋

GitHub: github.com/omgovich

Twitter и Telegram: @Omgovich