Всем привет. На этой неделе с вами будет @pgurtovaya . Я занимаюсь фронтом примерно пять лет, несколько из них в Зл… 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…

Распространенный пример: "Нам нужна сотка на Lighthouse!111". Мой первый вопрос – "зачем?". Часто оказывается, что… twitter.com/i/web/status/1…

Lighthouse отличный инструмент (об этом мы поговорим чуть позже), но это всего лишь инструмент. pic.twitter.com/POkCku50Sh

Иногда, чтобы понять причину того что вы делаете приходится провести небольшое расследование и задавать вопросы.

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

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

Заодно можно найти там страшных монстров, типа layout recalculate на mousemove без тротлинга, заботливо скопипасчен… 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…

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

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

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

Полезно посмотреть какие-нибудь курсы или почитать книжки (типа The Design of Everyday Things)
Можно сделать пет-пр… twitter.com/i/web/status/1…

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

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

Полезный скилл номер три – конвертация мысли => текст. Наверное, вы уже заметили, что у меня с этим не очень хорошо… twitter.com/i/web/status/1…

В марсианах быстро превратить свою мысль в сообщение особенно важно – ведь вся наша рабочая коммуникация происходит в слаке.

Кроме сообщений в чатах я пишу комментарии к своему коду, комментарии к чужому коду (code review), технические док… twitter.com/i/web/status/1…

Поэтому прочитать несколько книг по теме кажется мне неплохой идеей. Больше всего мне понравилось "On Writing Well:… twitter.com/i/web/status/1…

Если читать не хочется, то вот несколько простых правил:
* Перечитать написанное и выкинуть половину.
* Перечитать… twitter.com/i/web/status/1…

Для текстов на английском лучше использовать Grammarly.

Не будьте как я и ставьте правильные кавычки :)

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

@jsunderhood В целом академический бэкграунд дает хорошую основу для "исследовательского" взгляда на мир - методоло… twitter.com/i/web/status/1…

Интересно что вариант "Ничего не нужно" набрал так мало голосов :)

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

Узнаете картиночку?) pic.twitter.com/1xdtOkgfM0

^ кривые Безье это не только easing для анимаций.
Ими еще можно рисовать стрелочки. Я нарисовала очень много стрело… twitter.com/i/web/status/1…

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

Школьная физика тоже очень помогает. Например если вам нужно запилить взрывающиеся конфети... или вертолеты :)

Для рисования часиков и pie-chart пригодится тригонометрия.

Старая, но очень полезная статья на MDN в которой есть все что нужно про кривые developer.mozilla.org/en-US/docs/Web…

Линейная алгебра/аналитическая геометрия (матрицы и векторы) очень полезный для фронтенда склилл. Особенно если вы… twitter.com/i/web/status/1…

Всегда можно посмотреть что-то по теме от MIT
ocw.mit.edu/courses/mathem…

И последняя тема на сегодня – зачем же фронтендам Data Science?
Сразу предупреждаю – я не настоящий сварщик :)

Первая причина – ML/DL это жутко весело. Просто попробуйте и вы поймете о чем я говорю.
Есть множетсво способов нач… twitter.com/i/web/status/1…

А вот очень классный курс atcold.github.io/pytorch-Deep-L… (но он немножко академический)

Используя ML/DL можно решать множество разнообразных задач.
Мне, например, как-то пришлось детектить лица прямо в браузере :)

Используя нейросеточки можно улучшать наши инструменты, например есть очень популярная история про DL-based autocom… twitter.com/i/web/status/1…

Я очень хочу поэксперименировать с миксом PyTorch и Wasm, хотя понятия не имею что из этого получится.
Но я обязат… twitter.com/i/web/status/1…

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

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

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

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

В процессе могут возникнуть интересные performance – челенджи (ведь приходится генерить кучу элементов а потом их анимировать)

Не стоит экспериментировать на TODO-листах, лучше что-нибудь нарисовать :)

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

А вот и State of JS. 2020.stateofjs.com/en-US/
Стало чуть больше Wasm ❤️. Количество знающих и юзающих WebRTC подросл… twitter.com/i/web/status/1…

Gatsby слегка теряет популярность (и мне кажется это неплохо, ибо он слишком сложен под крышкой)
Testing Library пр… twitter.com/i/web/status/1…

Сегодня поговорим про коммуникацию между людьми и сервисами.
Начнем с того что посложнее – общения с людьми и code… twitter.com/i/web/status/1…

Каждый раз когда я делаю git commit, я предполагаю что его будут ревьюить и поэтому стараюсь упростить жизнь людям,… 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…

Я считаю хорошей практикой готовить свой код для ревью. И для этого нужна всего одна простая команда - `git rebase`

Я часто слышу что rebase и последующий forcepush это опасно и ужасно. На самом деле все ровно наоборот. Ребейзить и… twitter.com/i/web/status/1…

Я почти всегда делаю rebase c флагом --onto. Просто потому что не помню как работают другие варианты синтаксиса :)

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

Форспушить в общую с коллегой ветку тоже можно, но тут нужно быть аккуратнее и использовать флаг --force-with-lease… twitter.com/i/web/status/1…

Есть удобный трюк с флагом --fixup. Вы делаете коммит (когда угодно в вашей ветке) примерно так:
`git commit --fixu… twitter.com/i/web/status/1…

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

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

Ревью предыдущих итераций не блокер для дальнейшей разработки, ведь не обязательно открывать PR прямо в основную ветку.

Если фича состоит, скажем, из двух итераций: 'Компонент Вертолет' и 'Взрывающийся Вертолет', то можно открывать PR… twitter.com/i/web/status/1…

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

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

Иногда бывает удобно создать PR из основной ветки в пустой или какой-то специальный коммит. Эта ветка никогда никуд… twitter.com/i/web/status/1…

Вот еще несколько полезностей для code review

2. Не использовать человеческие ресурсы для проверок с которыми могут справиться наши линтеры или другие полезные инструменты

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

Переходим к коммуникации с внешними источниками данных. Для начала общий опрос-вопрос: как бы вы описали бекенд(ы) вашего текущего проекта?)

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

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

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

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

Сложные архитектурные решения могут появляться из-за того что несколько людей и/или команд просто не смогли договориться.

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

Я всегда за максимально простую архитектуру и итеративное ее усложнение. Главное не пропустить момент когда действительно нужно усложнять :)

Работать на проекте с надежным и понятным backend-API очень здорово. Список того, что нужно фронту от бекенда не очень-то и большой

1. Где-то есть асет, описывающий все что может прислать мне бекенд

2. Бекенд никогда не пришлет мне того, чего нет в описании. И мне никогда не придется искать null, спрятанный в мегабайтах JSONа

3. У фронта и бека есть контракт. Он распространяется на все их взаимодействия .

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

Одна из технологий, которая выполняет все эти хотелки - GraphQL.
Когда я говорю о GraphQL я подразумеваю 2 вещи: фо… twitter.com/i/web/status/1…

GraphQL не единственная технология, которая предоставляет строгий контракт. Так может делать RESTful апишка с OpenA… twitter.com/i/web/status/1…

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

GraphQL уже очень давно с нами, широко используется, но почему-то заблуждения насчет GraphQL все еще остаются.

Например, многие считают что GraphQL это что-то сверхгибкое, где можно попросить от бекенда все что угодно. Все ров… twitter.com/i/web/status/1…

Самая крутая фишка GraphQL – автоматически генерируемая документация. Для генерации доков не надо делать вообще ничего.

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

Когда мне надо предложить какое-нибудь новое изменение в GraphQL API я просто кидаю расширение схемы в чатик

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

GraphQL может использовать любой транспорт. Пересылать данные можно почтовыми голубями. Однако чаще это делается по HTTP или веб-сокетам.

В GraphQL есть Subscription, который описывает стрим событий от сервера. Чудесный строго-типизированный стрим :)

Валидация запросов зашита в GraphQL engine. Если вы прислали невалидный запрос, GraphQL engine заботливо подскажет… twitter.com/i/web/status/1…

Про схему и прикольные штуки которые можно с ней проделывать расскажу чуть попозже в отдельном тредике

Тред о том что прикольного можно сделать с GraphQL схемой. Схема это строготипизированное описание всего-всего что… twitter.com/i/web/status/1…

Схему можно куда-нибудь загрузить и использовать загруженное как референс. Можно использовать несколько разных версий схемы

Можно трекать историю изменений схемы (Apollo, например, предоставляет для этого удобный сервис)

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

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

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

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

Можно взять схему и сгенерировать из нее сервер-заглушку. Вся генерация занимает примерно 10 строчек кода

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

Этот подход настолько прикольный что, возможно, вдохновил создателей webpack сделать свои федерации :) webpack.js.org/concepts/modul…

Суббота – самое время поговорить я красивостях, а именно о картиночках.
Картиночки это огромная часть трафика на пр… twitter.com/i/web/status/1…

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

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

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

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

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

Продолжаем тему про изображения. В этом тредике суперкоротко о losseless форматах.
Loseless - сжатие без потерь. У… twitter.com/i/web/status/1…

Форматы, которые умеют сжиматься без потерь - gif, png, webp и всякая экзотика типа JPEG 2000. На всякий случай: jp… twitter.com/i/web/status/1…

gif самый древний формат. Ему аж 33 года. В основе gif лежит алгоритм LZW, который сжимает 256-цветовую палитру. К… twitter.com/i/web/status/1…

Прикольно то, что иногда относительно древний LZW алгоритм дает лучшие результаты чем тот что используется в PNG

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

Еще PNG умеет добавлять фильтры к каждой строчке пикселей в изображении (predictive coding). Если правильно угадать… twitter.com/i/web/status/1…

webp это на самом деле 2 формата. Эти форматы просто пакуются в одинаковые RIFF контейнеры. В этих контейнерах есть… twitter.com/i/web/status/1…

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

В статьях часто встречаются утверждения типа: "формат изображений X лучше Y" или "X сжимает изображения на 23% лучш… twitter.com/i/web/status/1…

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

Есть методы оценки визуального качества изображений на основе нейросеточек. Вот от Netflix например github.com/Netflix/vmaf

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

А это тредик про сжатие картинок с потерями. Тут все намного интереснее и разнообразнее. У сжатия с потерями нет ни… twitter.com/i/web/status/1…

С потерями умеют сжиматься jpeg, webp и avif. Стоит также отметить, что все форматы без потерь тоже можно сжимать с… twitter.com/i/web/status/1…

Не буду вдаваться в подробности сжатия для каждого формата, но попробую показать "на пальцах" как могут вноситься потери для сжатия.

Для начала каждый канал изображения разбивается на кусочки. На какие – зависит от кодека (от формата). Получается ч… twitter.com/i/web/status/1…

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

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

Потери это просто зануление коэффициентов для определенных частот.

Древние форматы (jpeg) пилились индивидуально. Более новые – lossy webp и avif это побочное следствие того как круто развились видеокодеки.

avif и lossy webp это просто фреймы видео, пережатого для avif - AV1 кодеком, а для webp - VP8 кодеком, уложенные в… twitter.com/i/web/status/1…

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

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

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

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

avif использует универсальный контейнер – HEIF. Это универсальный формат для хранения изображений. В нем, например,… twitter.com/i/web/status/1…

На низких качествах остальные форматы начинают распадаться на блоки, а avif выглядит очень круто. pic.twitter.com/lfGkN55hcN

Правда, как показывает практика, на нормальных качествах AVIF особого выигрыша не дает.

Воскресенье. Астрологи объявили день рандомного контента :) А пока я его придумываю, вот ссылочка на марсианский те… 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…

И последний тредик – рандомные оклофронтовые штуки :)

Используя WebGL, мы повстречаемся с програмками-шейдерами. Один из типов шейдеров - fragment shader. Это програмка… twitter.com/i/web/status/1…

Чтобы лениво грузить картинку ставим ей атрибут loading=lazy. В хроме это гарантирует только то, что картинка на ра… twitter.com/i/web/status/1…

JS-парсер V8 очень ленивый. Он не будет парсить тело функции если вы ее не вызываете.

Советы по улучшению продуктивности:

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

Внутрь SVG можно закинуть JS-строку и она будет выполняться

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

WebAssembly или Wasm. Не WASM

Поражаюсь что изучая Rust можно найти gitbook на каждый топик. Вот, например, про rust-компилятор

rustc-dev-guide.rust-lang.org/overview.html

В macOS есть программка - Color Sync Utility. Там можно посмотреть на 3D визуализации цветовых пространств

Осталось еще много всего, чем хочется поделиться, но нужно себя останавливать :)

Спасибо всем большое-прибольшое 🤗… twitter.com/i/web/status/1…

Меня можно найти вот здесь @pgurtovaya или в телеграмчике t.me/polina_gurtova…

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