Дайджест за 21 ноября - 25 ноября

Deno 1.28: Featuring 1.3 Million New Modules
Как и обещала команда Deno - в этом релизе стабилизировали совместимость с npm экосистемой. Это значит, что теперь все пакеты из npm можно свободно использовать в Deno. При этом получая все плюшки Deno, связанные с безопасностью.

Release v4.0.0: Complete rewrite · fullstack-build/tslog
Вышел 4.0.0 релиз либы для логирования tslog в котором либу полностью переписали:
- без зависимостей
- работает в node.js и браузере
- ESM
- Большие возможности кастомизации

google/wireit: Wireit upgrades your npm scripts to make them smarter and more efficient.
Новый опенсорс от гугла в JS экосистему. Встречайте, wireit!

У библиотеки достаточно ёмкое описание: wireit улучшает npm scripts делая их умнее и эффективнее.

Why would anyone need JavaScript generator functions?
Очень хорошая статья от James Sinclair про генератор-функции в JS. Рекомендую к прочтению

What’s so great about functional programming anyway?
James Sinclair выложил 1 короткую главу из своей пока неизданной книги "A skeptic’s guide to functional programming with JavaScript".
На простых примерах показывается, как ФП помогает делать простой и понятный код.
Рекомендую к прочтению.

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

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

terrastruct/d2: D2 is a modern diagram scripting language that turns text to diagrams.

Новая либа для рисования диаграмм из текста

https://github.com/terrastruct/d2

#link #development #library #github #diagram

Hyperstack is a modern full-stack Node.js web framework for the pragmatic programmer

Вышел новый веб-фреймворк для nodejs - Hyperstack.
Вдохновлен rails и уже имеет в себе всё, что нужно разработчику для комфортной и быстрой разработки:
- контроллеры
- orm (если я правильно понял)
- апи для написания автотестов
- апи для создания джоб

https://hyperstackjs.io/

#link #development #nodejs #javascript #library

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

Но для тех, кому лень читать, дам тлдр:
- Читаю всякие статьи в интернете уже 6 лет. Раньше каждое утро, теперь не каждое.
- Статьи сохраняю в raindrop.io. Уже 1600+ статей
- Восприятие информации за это время сменилось
- Ссылка на все сохраненные ссылки: https://raindrop.io/crazymax101/development-2544878 . Там есть поиск, инфа обновляется в риалтайме.

Теперь для тех, кому не лень читать.

Когда-то в 2016 году я прочитал книжку "идеальный программист" Роберта Мартина и там была важная мысль: в сфере разработки ПО нужно постоянно учиться. Ну и я как-то решил, что будет неплохо читать 5 статей из интернета каждое утро и так, маленькими шагами, я стану супер-крутым разрабом как дядя Боб.

Также мне сразу стало понятно, что процесс обучения идёт лучше, если итоги чтения куда-то конспектировать. Поэтому я решил сохранять ссылки в какой-нибудь сервис. И этим сервис оказался raindrop.io. Почему я выбрал именно его - я не помню. Но я начал раскладывать там ссылки по коллекциям и ссылки, которые мне казались боле мене полезными, я сохранял в коллекцию development. В начале своего пути ценз на статьи был очень низкий - есть контент, у него ненулевая ценность? Добавляем!

Со временем это привычка эволюционировала: условия для попадания в коллекцию выросли, читал я уже не каждое утро, но все же какая-то регулярность была. База статей уже была достаточно большой, чтобы находить полезные статьи по определенным запросам. Например "Макс, а у тебя есть что-нибудь почитать про CI?" или свой собственный запрос "Я же читал где-то про это уже. Надо найти". Эта база ссылок использовалась как внутренняя база знаний.

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

Потом я подумал, что модель defront, ссылки + краткий пересказ, мне в целом нравится и подходит. И настроил с помощью no-code решения integromat автоматическую публикацию статей из raindrop в telegram канал. Затем Александр Мышов, автор defront, опубликовал список разных полезных каналов по вебу, среди которых был и мой. По-моему около 100 или 200 человек пришло из defront - это было 95% подписчиков в тот момент 🙂

И вот мы с вами здесь. Я почти ежедневно постю ссылки в канал с описанием, формирую еженедельные дайджесты, общаюсь с вами в комментариях. Что изменилось за 6 лет:
- Ценз полезности для попадания в канал стал выше. Просто то, что либа существует, теперь недостаточно. Как следствие, стала частой ситуация, когда я открываю дайджест, например, jsweekly и не беру оттуда ни одной ссылки.
- Читаю не каждое утро. Но раз в неделю точно, если не отпуск и не завал на работе\в жизни
- Пытаюсь следить за тегами и писать боле мене хорошее описание к ссылкам

На текущий момент в коллекции в raindrop 1637 ссылок. В честь преодоления отметки в 777 пользователей, я открываю ссылку на всю коллекцию. Там есть поиск (по тексту, по тегам). Пользуйтесь, если вам нужно найти какую-то ссылку по какой-то теме.

Ссылка на ссылки https://raindrop.io/crazymax101/development-2544878 🙂

Огромная благодарность Александру Мышову (@myshov), за то, что популяризировал формат ссылка + статья и пропиарил меня в свое время в своем канале. Вероятно, без Александра этого бы канала бы могло бы и не быть.

liriliri/eruda: Console for mobile browsers

Библиотека, которая эмулирует dev-tools в браузере. Библиотека пробует решить проблему недоступности браузерных devtools при тестировании сайта в настоящем смартфоне в мобильном браузере с помощью создания своих devtols.

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

https://github.com/liriliri/eruda

#link #development #javascript #library #erunda #devtools

Convert the codebase to modules by jakebailey · Pull Request #51387 · microsoft/TypeScript

Typescript совершил большой внутренний рефакторинг, в рамках которого код перевезли на ESM модули, отказались от namespaces, начали собирать код через esbuild (т.к. пользователи TS ожидают 1 выходной файл), выкинули немного лишнего (дублирующего) кода и это значительно улучшило показатели перформанса проекта:

- Компилятор на 10-25% быстрее
- tsc стартует на 30% быстрее
- npm пакет стал на 43% меньше

По сути, основной код typescript не был никак изменен, просто выкинули namespace и заменили их на честные импортые, которые забандлили через esbuild. Namespace давали просадку перформанса из-за сложных доступов к объектам, а esbuild дал еще оптимизаций на уровне сборки бандла.

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

https://github.com/microsoft/TypeScript/pull/51387

#link #development #typescript #performance #esbuild

Agile Product Ownership in a Nutshell

15-минутное видео про роль Product Owner в Agile разработке. Кроме роли PO также рассказывается про agile разработку в целом: важность коммуникации, коротких циклов обратной связи, мелких историй, накоплению знаний.

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

Рекомендую к просмотру.

https://www.youtube.com/watch?v=502ILHjX9EE

#video #development #agile #recommended #productOwner

Дайджест за 28.11.2022 - 02.12.2022

terrastruct/d2: D2 is a modern diagram scripting language that turns text to diagrams.
Новая либа для рисования диаграмм из текста

Hyperstack is a modern full-stack Node.js web framework for the pragmatic programmer
Вышел новый веб-фреймворк для nodejs - Hyperstack.
Вдохновлен rails и уже имеет в себе всё, что нужно разработчику для комфортной и быстрой разработки:
- контроллеры
- orm (если я правильно понял)
- апи для написания автотестов
- апи для создания джоб

Пост в честь 777 пользователей
О том, как получился текущий канал и ссылка на все мои ссылки, сохраненные за 6 лет https://raindrop.io/crazymax101/development-2544878

liriliri/eruda: Console for mobile browsers
Библиотека, которая эмулирует dev-tools в браузере. Библиотека пробует решить проблему недоступности браузерных devtools при тестировании сайта в настоящем смартфоне в мобильном браузере с помощью создания своих devtols.

Convert the codebase to modules by jakebailey · Pull Request #51387 · microsoft/TypeScript
Typescript совершил большой внутренний рефакторинг, в рамках которого код перевезли на ESM модули, отказались от namespaces, начали собирать код через esbuild (т.к. пользователи TS ожидают 1 выходной файл), выкинули немного лишнего (дублирующего) кода и это значительно улучшило показатели перформанса проекта:

- Компилятор на 10-25% быстрее
- tsc стартует на 30% быстрее
- npm пакет стал на 43% меньше


Agile Product Ownership in a Nutshell
15-минутное видео про роль Product Owner в Agile разработке. Кроме роли PO также рассказывается про agile разработку в целом: важность коммуникации, коротких циклов обратной связи, мелких историй, накоплению знаний.

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

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

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

Larman's Laws of Organizational Behavior - Craig Larman

Законы Лармана об организационном поведении

Это наблюдения, сделанные Крейгом Ларманом в результате десятилетий наблюдений за организациями.

1. Организации неявно оптимизированы избегать изменения статуса кво менеджеров и специалистов
2. Следствие первого закона, любая инициатива по изменению статуса кво будет заторможена переопределением или переосмыслением новой терминологии так, чтобы статус кво не изменился
3. Следствие первого закона, любая инициатива по изменению статуса кво будет высмеяна как революционная, теоретическая, религиозная и будет предлоожено приземлить ее в реальный мир так, чтобы не менять статус кво
4. Следствие первого закона, если менеджеры или специалисты все таки изменили свой статус, то они становятся коучами/тренерами, которые курируют изменения и усиливают действие второго и третьего законов.
5. В больших организациях культтура следует за структурой. В мальеньких организациях структура следует за культурой.

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

https://www.craiglarman.com/wiki/index.php?title=Larman%27s_Laws_of_Organizational_Behavior

#link #managment #larmanLaws #changeManagment

Попросили закинуть анонс на митап 🙂

8 декабря в 18:00 (мск) состоится онлайн-митап на тему дизайн-систем. В программе доклады и дискуссия с представителями команд Контура, Ростелекома, Skyeng и SuperJob, которые создавали свои системы и готовы поделиться опытом, обсудить узкие места и удачные решения.

Регистрация: https://superjob.ru/i/3sBdE

Отдельно отмечу, что среди участников есть Владимир Дзех, руководитель команды дизайн-системы в Контуре. Я работал в контуре и, мое большое ИМХО, команда дизайн-системы в контуре делает очень крутую дизайн систему. Не просто набор компонентов, а прямо гайдлайны как, что и когда следует использовать, с подробной мотивацией почему именно так, а не по-другому. После контура обычные ui-kit под видом дизайн-системы кажутся обманом 😅

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