Legend

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

https://legendapp.com

#link #app #tool #focus #legend #personalProductivity #taskManagment

Inside Framer's Magic Motion

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

Все это с подробными примерами кода (css + React) и с хорошими примерами анимаций.

Объясняются проблемы с анимацией (почему css анимация не всегда подходит, проблемы анимации изменения размера элемента)

Также подробно объясняется методика анимации FLIP.
Если коротко:
- First - запомнить позицию элемента, где он находится в начале анимации
- Last - запомнить позицию элемента, где он находится в конце анимации
- Inverse - применить такое изменение, которое превращает состояние Last в First
- Play - Убрать применение inverse. Таким образом элемент будет анимирован от First к Last.

Рекомендую к прочтению

https://www.nan.fyi/magic-motion

#link #development #javascript #animations #recommended

Timeline of a React Component With Hooks

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

https://julesblom.com/writing/react-hook-component-timeline

#link #development #react #reactHooks

Improving React Interaction Times by 4x - The Causal Blog

История про ускорение React приложения с таблицами в 4 раза.

Инженеры из Casual - приложения, которое умеет показывать таблицы с большими данными, поделись историей профилирования React кода и ускорения приложения.

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

Сначала они искали долгие вызовы в Chrome DevTools и обнаружили кучу ререндеров React. Для отрисовки таблиц используется библиотека AG Grid. После нахождения нужного вызова в Chrome DevTools они решили посмотреть его в React Profiler.

Автор также описывает, почему сначала искали в Chrome DevTools. Искать глобальные проблемы лучше в Chrome DevTools. И только после обнаружения конкретного источника следует обращаться к React Profiler.

В рамках React Profiler находится конкретная причина ререндар конкретного компонента. Дальше автор уже дебажит через console.time.

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

Например, была проблема перезапуска useEffect при изменении переменных для автокомплита, когда они поменялись для JS, но не по смыслу. Например, были ['one', 'two'], а стал новый массив ['one', 'two'] или ['two', 'one']. В обоих изменениях не нужно перезапускать useEffect. Решение немного грязное, но хорошее

useEffect(() = {
  // ...
}, [gridApi, Object.keys(autocompleteVariables).sort().join(',')]);

Также, из интересных приёмов, была найдена проблема в AG Grid. Ребята решили ее достаточно интересным способом - воспользовались yarn patch. Для тех кто не знает что это - yarn позволяет делать изменения в пакетах в node_modules. Этот же патч ребята предложили в AG Grid, но AG Grid не принимает PR от сообщества.

Также из интересных техник можно отметить замену useSelector на useStore. useSelector подписывается на изменения стора, что ведет к ререндеру компонента. Однако, компоненту не нужны были данные из useSelector для рендера, они использовались в колбеке onChange. Чтобы избежать лишнего ререндера, компонент получал весь стор через useStore и доставал нужные поля прямо в onChange. На текущем проекте мы решаем такие проблемы тем, что логика взаимодействия, которая не связана напрямую с UI, выносится в отдельные action'ы. А они уже достают данные откуда им удобно. Это как раз решает эту проблему by design - компонент не тянет данные и логику, которые ему не нужны.

Еще из интересного: в приложении используется protobuf. Это бинарный протокол передачи данных, поэтому он требует парсинга. Если данных много - парсинг моет идти долго (400-800мс в статье). Этот парсинг - отличный кандидат на вынос в web workers. Применение воркера вынесло обработку в отдельный тред, но общение с воркером - не бесплатное. Т.к. нужно передать между приложением и воркером много данных, эта оптимизация особо не ускорила приложение.

Вот такими разными способами инженеры из Casual ускорили отображение модели из 100 категорий в 4 раза.

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

https://www.causal.app/blog/react-perf

#development #react #performance #recommended

QAk-QAk — и в продакшен - АББревиатуры

Вышел выпуск подкаста "QAk-QAk — и в продакшен", где я полчаса рассказываю про TDD, BDD и автотесты в целом. Еще немного задеваем DDD.

Достаточно коротко и ёмко, на мой скромный взгляд :)

По ссылке лежат ссылки на разные платформы для подкастов. Для тех кто не слушает подкасты в приложеньках, ссылка на ютуб ютубе https://www.youtube.com/watch?v=zicVvaU4S44&feature=youtu.be

https://podcast.ru/e/8t70BzyvPXU

#link #development #TDD #bdd #podcast

Дайджест за 5 - 9 декабря

Larman's Laws of Organizational Behavior - Craig Larman
Законы Лармана об организационном поведении.
Это наблюдения, сделанные Крейгом Ларманом в результате десятилетий наблюдений за организациями.

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

Inside Framer's Magic Motion
Очень хороший гайд по созданию анимаций. Объясняется, как Framer делает такие плавные анимации и как достичь таких же плавных анимаций в своем коде.

Все это с подробными примерами кода (css + React) и с хорошими примерами анимаций.

Timeline of a React Component With Hooks
Простая анимированная шпаргалка объясняющая, что происходит, когда применяются хуки в React. Можно проследить за каждым шагом применения хука - от старта рендера до отрисовки в браузере

Improving React Interaction Times by 4x - The Causal Blog
История про ускорение React приложения с таблицами в 4 раза. Статья - отличный показатель того, как можно заниматься ускорением приложения - показаны разные инструменты и разные подходы.

——————————————

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

ufostation.tech

Завершил веху работы над сайтом — перенес основные посты из телеграмм канала. Все исходники в открытом виде на github, материалы свободно распостраняются по CC BY-SA 4.0 (копируй/модифицируй).

Буду рад любой обратной связи, которая поможет улучшить ресурс: комментарии под этим постом, сообщения в личку, любой issue или pull requests на github.

Нравится контент? Поддержи меня на boosty 🙃

Speeding up the JavaScript ecosystem - one library at a time

Сейчасть есть модный тренд на переписывание инструментов для сборки на Rust или Go. Типа если мы перепишем инструмент на язык, который ближе к железу, то он будет работать быстрее. Однако JIT в текущих JS движках тоже достаточно быстрый, и возможно проблема не в языке, на котором написан инструмент, но в самом коде.

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

В статье достаточно подробное описание, что за проблема, почему это проблема и как её решать. Также есть ссылки на PR-ы в инструменты

Честь и хвала таким героям, которые оптимизируют инструменты, которые афектят на все сообщество.

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

Рекомендую к прочтению

https://marvinh.dev/blog/speeding-up-javascript-ecosystem/

#development #javascript #performance #recommended

How to split JavaScript strings into sentences, words or graphemes with "Intl.Segmenter"

Статья про Intl.Segmenter - API, которое позволяет разделить текст на предложения, слова или графемы. В статье описывается, почему обычный str.split не подходит и почему нужно более умное API, которое само умеет корректно разделять текст на составные части.

https://www.stefanjudis.com/today-i-learned/how-to-split-javascript-strings-with-intl-segmenter/

#development #javascript #IntlSegmenter

Sketchy Pencil Effect with Three.js Post-Processing | Codrops

Хорошая статья про добавление своего пост-процессинга в Three.js.

В статье рассказывается про то, как добавить эффект типа "скетч, нарисованный ручкой" в рендер Three.js. Если вам интересна анимация - можно почитать.

Такие статьи меня цепляют тем, что показывают, какие возможности у нас сейчас есть при работе с JS в браузере. Не просто формочки или простые задачи, а вот 3d-рендер с кастомным интересным эффектом.

https://tympanus.net/codrops/2022/11/29/sketchy-pencil-effect-with-three-js-post-processing/

#development #javascript #three.js

Inside React Query

Пост про то, как реализован внутри react query, в серии постов про react query

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

https://tkdodo.eu/blog/inside-react-query

#development #react #reactQuery

Дайджест за 12 декабря - 16 декабря

QAk-QAk — и в продакшен - АББревиатуры
Вышел выпуск подкаста "QAk-QAk — и в продакшен", где я полчаса рассказываю про TDD, BDD и автотесты в целом. Еще немного задеваем DDD.

Достаточно коротко и ёмко, на мой скромный взгляд 🙂

Speeding up the JavaScript ecosystem - one library at a time
Сейчасть есть модный тренд на переписывание инструментов для сборки на Rust или Go. Типа если мы перепишем инструмент на язык, который ближе к железу, то он будет работать быстрее. Однако JIT в текущих JS движках тоже достаточно быстрый, и возможно проблема не в языке, на котором написан инструмент, но в самом коде.

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

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

Рекомендую к прочтению

How to split JavaScript strings into sentences, words or graphemes with "Intl.Segmenter"
Статья про Intl.Segmenter - API, которое позволяет разделить текст на предложения, слова или графемы. В статье описывается, почему обычный str.split не подходит и почему нужно более умное API, которое само умеет корректно разделять текст на составные части.

Sketchy Pencil Effect with Three.js Post-Processing | Codrops
Хорошая статья про добавление своего пост-процессинга в Three.js.

В статье рассказывается про то, как добавить эффект типа "скетч, нарисованный ручкой" в рендер Three.js. Если вам интересна анимация - можно почитать.

Inside React Query
Пост про то, как реализован внутри react query, в серии постов про react query

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

——————————————

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

GitHub - tjkandala/baahu: 🐘 (fast) state machine-based UI framework

UI Framework основанный на стейт машинах. Про то, что UI хорошо проектируется через стейт машины не говорил только ленивый. Но готовых инструментов не так много. baahu исправляет это, предоставляя API, в котором state machine и компонент очень тесно переплетены.

Выглядит интересно

https://github.com/tjkandala/baahu

#link #development #stateMachines #uiFramework

Announcing SvelteKit 1.0

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

Весь блог-пост посвящен краткому знакомству со SvelteKit - что это такое, для кого, для чего, какие основные фичи есть, ссылка на гайд по миграции из бетки в 1.0.0

https://svelte.dev/blog/announcing-sveltekit-1.0

#development #svelte #svelteKit #release

ECMAScript proposal: iterator helpers

Очередной пост в блоге Dr. Axel Rauschmayer. На тот раз про новый пропозал - хелперы для работы с итераторами.

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

А затем автор переходит к новому API.

take(n) знаком всем, кто погружался в ФП - метод сгенерирует новый итератор, который отдаст только N элементов от исходного итератора. Что-то типа slice, но с учетом основного смысла итераторов

Из стандартных методов массива были перенесены: filter, map, forEach, reduce, flatMap, some, every, find

Также добавлены методы from и toArray, что позволяет прыгать между представления iterator = array = iterator.

Если вы работаете с генераторами или итераторами - рекомендую прочесть подробно.

https://2ality.com/2022/12/iterator-helpers.html

#link #development #javascript #iterators #axelRauschmayer

Cypress V12 Is A Big Deal | Better world by better software

Вышел 12 релиз Cypress. В нем применили CQS и разделили команды на 2 вида - query и command. Query только лишь запрашивают данные, command - что-то делает.

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

https://glebbahmutov.com/blog/cypress-v12/

#development #cypress #release

Еще один тул для автоматических рефакторингов. Выглядит воодушевляюще

codeque.co

Крутой тул, давно искал что-то такое. Регексп ищет по символам, а эта штука учитывает контекст из AST. Еще и eslint плагин есть.

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

Кстати, для автоматизированного рефакторинга по AST посмотрите на putout.

Codux | Visual IDE for React

Визуальная IDE для React.

IDE позволяет накидывать UI в GUI, ну типа как в Figma, и при этом на выход даёт React code.

Выглядит интересно

https://www.codux.com/

#link #development #react #ide

Дайджест за 19 декабря - 23 декабря

GitHub - tjkandala/baahu: 🐘 (fast) state machine-based UI framework
UI Framework основанный на стейт машинах. Про то, что UI хорошо проектируется через стейт машины не говорил только ленивый. Но готовых инструментов не так много. baahu исправляет это, предоставляя API, в котором state machine и компонент очень тесно переплетены.

Выглядит интересно

Announcing SvelteKit 1.0
Вышел SevelteKit 1.0. Я из новости не до конца понял, что там нового вышло, но то, что они зарелизили первую стабильную версию - уже достойно внимания.

Весь блог-пост посвящен краткому знакомству со SvelteKit - что это такое, для кого, для чего, какие основные фичи есть, ссылка на гайд по миграции из бетки в 1.0.0

ECMAScript proposal: iterator helpers
Очередной пост в блоге Dr. Axel Rauschmayer. На тот раз про новый пропозал - хелперы для работы с итераторами.

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

Cypress V12 Is A Big Deal | Better world by better software
Вышел 12 релиз Cypress. В нем применили CQS и разделили команды на 2 вида - query и command. Query только лишь запрашивают данные, command - что-то делает.

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

Codux | Visual IDE for React
Визуальная IDE для React.

IDE позволяет накидывать UI в GUI, ну типа как в Figma, и при этом на выход даёт React code.

Репост от artalog про codequo - тул для автоматических рефакторингов
——————————————

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

Tao of Node - Design, Architecture & Best Practices | Alex Kondov - Software Engineer

Тао of Node - opinionated список бест практиксов для разработы сервисов на node.js.

Большинство практик действительно несут объективную пользу. Остальные являются скорее выбором автора среди альтернатив (поэтому список и opinionated).

Некоторые практики описаны достаточно подробно (с примерами кода), некоторые слишком утрировано. В целом получается скорее обзор на практики.

Практики разделены на 4 группы.

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

Далее идут инструменты. Тут советы уже весьма opinionated, но в целом все равно хороши

Затем идет блок про тестирование, который, достаточно короткий, но на мой взгляд, содержит очень правильные рекомендации по тестированию nodejs - вкладываться в test coverage, тестировать интеграционными тестами, бизнес-логику покрывать юнит-тестами.

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

Могу рекомендовать к прочтению тем, кто окунается в nodejs разработку. Опытные разрабы также могут просмотреть список, но большую часть они скорее всего уже знают

https://alexkondov.com/tao-of-node/

#development #nodejs #bestPractices #recommended