How we deleted 4195 code files in 9 hours

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

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

Итоги клинатона в компании у автора:
- Сэкономили тысячи долларов месячных оплат (за счет удаление чего-то, что требует оплаты)
- Удалили 4195 файлов с кодом и дополнительно 4747 строчек кода
- Закрыли 120 PR и удалили 2851 неиспользуемые гит-ветки
- Удалили 22 фиче-флага и 46 пакетов из зависимостей
- Удалили 42 джобы и 58 пайплайнов
- Архивировали 50 репозиториев
- Удалили 63 таблицы
- Удалили 47804 файла в гугл диске
- Удалили 159 документов в конфлюенсе и архивировали 200 тикетов в jira
- Удалили 6 фигма файлов и 40 правил автоматизации в jira

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


https://zaidesanton.substack.com/p/organizing-the-best-cleanathon-your

#development #hackathon #refactoring

Reactile

Reactile - инструмент для организации UI приложения в виду рабочих столов с виджетами. От вас - виджеты в виде React-компонентов, от Reactile - удобный интерфейс для управления виджетами.

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


https://www.reactile.net/

#development #javascript #react #dragndrop

Common Sense Refactoring of a Messy React Component

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

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

Далее следует поставить себе целью выделить такой код, который плох не только в текущем контексте, но который не хочется видеть в проекте вообще. На такой код необходимо написать автоматические проверки (например, правила eslint)

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

После этого необходимо бороться с тем, что в компоненте слишком много логики. Это решается несколькими шагами: разделением ветвления вёрстки на независимые под-компоненты, вынос утилитарных функций, констант и хелперов вне компонента, создание кастомных хуков, следование SRP - явное разделение потоков обработки разных вариаций логики.

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

В целом хорошая статья про рефакторинг react-компонентов. Не без субъективных вещей, как и любой нетривиальный рефакторинг


https://alexkondov.com/refactoring-a-messy-react-component/

#development #javascript #react #refactoring

Vitale - Live notebooks in VS Code for JavaScript or TypeScript, web development, and AI experimentation

Vitale - удобный notebook, работающий в VSCode с использованием JS и TS. Я не особо в курсе как корректно перевести notebook в контексте инструмента. Notebook - это категория инструментов, позволяющих вам блочно описывать какой-то код, исполнять его, визуализировать результаты или передавать результат исполнения одного блока в другие блоки. Такие инструменты популярны в академической среде и в продуктовой аналитике. Хотя, лично я думаю, что средней руки тимлид или ведущий разработчик тоже смог бы извлечь много пользы из такого инструмента

Ну так вот, Vitale - это новый notebook, который позволяет писать блоки кода на JS и при этом дает полный DX от VSCode. Звучит и выглядит очень круто и я обязательно поставлю себе эту вундервафлю по выходу из отпуска. Я как раз недавно искал что-то похожее, но не смог найти хорошего решения, а тут вот Vitale вышел.

Что показано на лендосе с Vitale:
- Возможности работы с кодом в режиме REPL
- Возможности визуализации через React
- Хождение в API
- Работа с AI моделями от Github

Выглядит очень круто, рекомендую ознакомиться.


https://githubnext.com/projects/vitale/

#development #javascript #react #notebook #repl

Дайджест за 2024-08-13 - 2024-08-16

How we deleted 4195 code files in 9 hours
Вы наверное уже не раз слышали, как компании проводят внутри себя хакатон по какой-то теме, когда команды в короткий промежуток сфокусированной работы стараются создать какую-то крутую ценность. Есть даже багатоны - это когда команды собираются исправлять баги в продукте. И вот в статье описывается новый вид хакатона - клинатон (cleanathon). Это когда цель хакатона - вычистить систему от всякого старья - легаси кода, документов, джоб в пайплайне

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

Reactile
Reactile - инструмент для организации UI приложения в виду рабочих столов с виджетами. От вас - виджеты в виде React-компонентов, от Reactile - удобный интерфейс для управления виджетами.

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

Common Sense Refactoring of a Messy React Component
Статья про рефакторинг запутанного реакт-компонента. В статье приводится огромный реакт-компонент, в котором очень много логики и она действительно запутанная. Автор по шагам показывает, как можно сделать рефакторинг такого компонента.

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

Vitale - Live notebooks in VS Code for JavaScript or TypeScript, web development, and AI experimentation
Vitale - удобный notebook, работающий в VSCode с использованием JS и TS. Я не особо в курсе как корректно перевести notebook в контексте инструмента. Notebook - это категория инструментов, позволяющих вам блочно описывать какой-то код, исполнять его, визуализировать результаты или передавать результат исполнения одного блока в другие блоки. Такие инструменты популярны в академической среде и в продуктовой аналитике. Хотя, лично я думаю, что средней руки тимлид или ведущий разработчик тоже смог бы извлечь много пользы из такого инструмента

Ну так вот, Vitale - это новый notebook, который позволяет писать блоки кода на JS и при этом дает полный DX от VSCode. Звучит и выглядит очень круто и я обязательно поставлю себе эту вундервафлю по выходу из отпуска. Я как раз недавно искал что-то похожее, но не смог найти хорошего решения, а тут вот Vitale вышел.

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

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

Frontend Security Checklist

Небольшая статья-чеклист про безопасность в вебе.

Разобраны следующие области: XSS, CSP, CSRF, IDOR, Environment Variables. Для каждой из них приводится что это такое, как с этим работать и примеры корректной реализации на JS.


https://www.trevorlasn.com/blog/frontend-security-checklist/

#development #javascript #security #xss #csp

Node.js Best Practices - 2024

Вышло обновление лучших практик Node.js для 2024 года. Обновлены многие пункты, добавлены новые, а также обновлены рекомендуемые библиотеки и решения

https://github.com/goldbergyoni/nodebestpractices/

#development #javascript #nodejs #bestPractices

Процесс, который продолжал умирать

Статья про поиск причины регулярного падения node.js приложения. Написано в нуарном детективном стиле, поэтому читается достаточно интересно. А т.к. это перевод, то некоторые фразы заставляют улыбнуться (об этом дополнительно напишу в конце)

В чем проблема: была компания, у которой раз в 3-4 часа умирал node.js процесс. Статья рассказывает, как автор искал причину такого поведения

Для управления приложениями в компании используется pm2 (тут даже я удивился). PM2 забирает на себя весь менеджмент управления приложениями, но также он известен своими приколами (например, в моей личной практике - отправлял запросы в умерший процесс). В данном случае анализ логов pm2 показал, что приложение рестартует из-за слишком большого потребления памяти. Получается, причина падения - утечка памяти

Далее автор наглядно показывает, как найти утечку памяти в приложении. Запускаем приложением => снимаем снапшот памяти => даем нагрузку => снимаем новый снапшот памяти => сравниваем и находим утечку

В данном случае, в проекте давно не обновляли moment.js, в котором была утечка памяти, пофикшенная в 2020 году.

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

https://habr.com/ru/companies/ruvds/articles/832752/

#development #javascript #nodejs #memoryLeak #performance #pm2

Анимации Hover и эффекты Blur: Полный гид по созданию динамических карточек

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

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

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

https://habr.com/ru/articles/836308/

#development #css #blur #javascript

How to compose javascript function that take multiple parameters - the epic guide

Очередная крутая статья от James Sinclair про композицию JS функций, у которых несколько параметров.

Для композиции функций с несколькими аргументами рассматриваются несколько техник:
1. Композировать данные в структуры (массивы или объекты)
2. Применять Partial Application
3. Как следствие предыдущего пункта - применять технику каррирования
4. Использовать ap() для решения проблемы одновременного чтения и записи значения
5. Использовать flatMap() для проблемы конфигов

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

const sum = (a,b) => a+b
const sumForCompose = ({a,b}) => sum(a,b)

const result = compose(
   sumForCompose,
   () => ({
     a: getValueA(),
     b: getValueB()
   })
)

Partial Application - одна из техник функционального программирования, которая заключается в создании прокси-функции, которая принимает аргументы частями

const sum = (a,b) => a+b
const sumForCompose = (a) => (b) => sum(a,b)

const result = compose(
   sumForCompose(getValueA()),
   getValueB()
)

// Либо через .bind
const result = compose(
   sum.bind(null, getValueA()),
   getValueB()
)

Каррирование (Currying) - еще одна техника из функционального программирования, напрямую связанная с PartialApplication. PartialApplication - для функции с 4 аргументами можно представить разными способами:

const sum = (a,b,c,d) => a + b + c + d
const partialApplicationVariant1 = (a,b,c) => (d) => sum(a,b,c,d)
const partialApplicationVariant2 = (a,b) => (c, d) => sum(a,b,c,d)
const partialApplicationVariant3 = (a) => (b, c) => (d ) => sum(a,b,c,d)

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

Каррирование же это паттерн разбиения вызова функции, когда за 1 вызов мы передаем 1 аргумент (хотя есть варианты когда можно передавать сколько угодно аргументов, а исходная функция вызовется только тогда, когда наберется нужное количество аргументов)

const sum = (a,b,c,d) => a + b + c + d
const curriedSum = a => b => c => d => a + b + c + d

Часто, когда мы работаем с данными, нам надо взять данные из одного поля объекта, преобразовать их и установить в другое поле объекта. Для композиции такого паттерна есть ap

const ap = (binaryCurriedFn) => (unaryFn) => (value) => binaryCurriedFn(value)(unaryFn(value));

Как это работает. Например, у нас есть объект, с полями a и b и надо просуммировать в result

binaryCurriedFn - это функция, которая умеет устанавливать новое поле. В нашем случае

const setResult = obj => value => ({...obj, result: value})

unaryFn - функция, которая высчитывает какое-то значение их полей объекта. В нашем случае

const sum = ({a,b}) => a + b

Теперь с помощью применения ap, мы можем получить функцию, которая считает поля объекта a и b и запишет их сумму в поле result

const setResult = obj => value => ({...obj, result: value})
const sum = ({a,b}) => a + b
const sumABtoResult = ap(setResult)(sum)

И теперь можно это использовать для обработки объектов

const arr = [{a:1, b:2}, {a:2, b:3}]
arr.map(ap(setResult)(sum))

Теперь имея в своем арсенале getter, transformer, setter и ap, можем завести примитив getSet

const getSet = (setter) => (getter) => (transform) => ap(setter)(compose(transform, getter));

flatMap и flip я оставляю на самостоятельное изучение, потому что а) там сложно б) я подошел к лимиту длины поста в телеге :)

Рекомендую статью к прочтению не только любителям ФП, но и вообще всем т.к. композируемость ценится не только в ФП

https://jrsinclair.com/articles/2024/how-to-compose-functions-that-take-multiple-parameters-epic-guide/

#development #javascript #functionalProgramming #composition #recommended

Дайджест за 2024-08-19 - 2024-08-23

Frontend Security Checklist
Небольшая статья-чеклист про безопасность в вебе.

Разобраны следующие области: XSS, CSP, CSRF, IDOR, Environment Variables. Для каждой из них приводится что это такое, как с этим работать и примеры корректной реализации на JS.

Node.js Best Practices - 2024
Вышло обновление лучших практик Node.js для 2024 года. Обновлены многие пункты, добавлены новые, а также обновлены рекомендуемые библиотеки и решения


Процесс, который продолжал умирать
Статья про поиск причины регулярного падения node.js приложения. Написано в нуарном детективном стиле, поэтому читается достаточно интересно. А т.к. это перевод, то некоторые фразы заставляют улыбнуться (об этом дополнительно напишу в конце)

В чем проблема: была компания, у которой раз в 3-4 часа умирал node.js процесс. Статья рассказывает, как автор искал причину такого поведения

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

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

⭐️How to compose javascript function that take multiple parameters - the epic guide
Очередная крутая статья от James Sinclair про композицию JS функций, у которых несколько параметров.

Для композиции функций с несколькими аргументами рассматриваются несколько техник

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

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

One on One Meeting Format Ideas

Неплохая статья про 1:1. Автор делится собственным опытом проведения 1:1 с сотрудниками и показывает свой формат ведения 1:1

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

Основная цель 1:1 - не убедиться, что работа делается. Основная цель - построить хорошие рабочие взаимоотношения с сотрудником.

Чтобы этого достичь предлагаются следующие практики:
- Автор рекомендует проводить 1:1 длительностью 30 минут еженедельно. 30 минут в хватает для еженедельного общения, а сам факт еженедельного общения гарантирует, что никакая информация не будет забыта, в отличии от более редких форматов. Также частые и короткие 1:1 спасут вас от кучи проблем, которые иначе бы превратились в настоящий пожар и их пришлось бы тушить
- 1:1 не двигается и не отменяется, кроме форс-мажоров (болезнь, отпуск, упавший прод). Если нужно двинуть - то на ближайшие свободный слот у обоих участников
- 1:1 не заменяет все общение с сотрудником. Если вы ведете джуна - выделите отдельно время на его обучение. Если ваш старший инженер работает над критичной задачей - выделите отдельное время на обсуждение задачи. 1:1 - это всегда 1:1
- Для ведения заметок следует завести шаренный документ, в который могут писать как менеджер, так и сотрудник. Это единая платформа для ведения заметок


Автор делит 30-минутный 1:1 на 3 части
- 10 минут для сотрудника. Сотрудник может принести любую тему и обсуждать что угодно. Ваша задача, как менеджера - слушать и слышать. Эту часть можно начинать с фразы "о чем ты хочешь поговорить?"
- 10 минут на свои темы: вопросы по проектам, технические дискуссии, получение фидбека, офтопики
- 10 минут для того, чтобы не было сюрпризов на перформанс ревью. В этом слоте необходимо давать фидбек по работе. Если все идет хорошо, следует поговорить про интересные проекты, карьерные возможности, зарплату. Если идет плохо, следует поговорить о проблемах и договориться о возможностях для улучшения ситуации.. Фидбек идет в обе стороны.
- Длительность частей может варьироваться в зависимости от ситуации.


https://marcgg.com/blog/2021/03/27/one-on-one-format/

#managment #oneToOne

Regexes Got Good: The History And Future Of Regular Expressions In JavaScript

Хорошая статья про развитие RegExp в JavaScript и про современные фишки RegExp. RegExp в JS прошел большой путь - от простой первоначальной реализации, до современной и удобной реализации, которая по фичам не сильно уступает другим языкам, а некоторые языки даже обгоняет

Автор хорошо описывает относительно новые фичи регулярок в JS - именованные группы, lookbeind, упрощение глобального матчинга и работу с юникодом

Вкратце перескажу эту фичи

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

const record = 'Admitted: 2024-01-01\nReleased: 2024-01-03';
const re = /^Admitted: (?<admitted>\d{4}-\d{2}-\d{2})\nReleased: (?<released>\d{4}-\d{2}-\d{2})$/;
const match = record.match(re);
console.log(match.groups);
/* → {
  admitted: '2024-01-01',
  released: '2024-01-03'
} */

Эти группы также отлично работают и при replace

// Change 'FirstName LastName' to 'LastName, FirstName'
const name = 'Shaquille Oatmeal';
name.replace(/(?<first>\w+) (?<last>\w+)/, '$<last>, $<first>');
// → 'Oatmeal, Shaquille'

Lookbehind - это фича регулярок, которая позволяет заматчить текст только если до текста что-то встречается (или не встречается). Особенность фичи - что условие не матчится вместе с основным блоком регулярки

Например, эта регулярка заменяет кота на голубя, только если коту предшествует описание fat. Заметьте, что fat при этом не заменяется, хотя присутствует в регулярке

const re = /(?<=fat )cat/g;
'cat, fat cat, brat cat'.replace(re, 'pigeon');
// → 'cat, fat pigeon, brat cat'

Если же мы, наоборот, хотим заменить только тех котов, которые не fat, то можно инвертировать условие

const re = /(?<!fat )cat/g;
'cat, fat cat, brat cat'.replace(re, 'pigeon');
// → 'pigeon, fat cat, brat pigeon'

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

const re = /(?<char1>\w)(?<char2>\w)/g;
for (const match of str.matchAll(re)) {
  const {char1, char2} = match.groups;
  // Print each complete match and matched subpatterns
  console.log(`Matched "${match[0]}" with "${char1}" and "${char2}"`);
}

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

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

const record = 'Admitted: 2024-01-01\nReleased: 2024-01-03';
const re = regex`
  ^ Admitted:\ (?<admitted> \g<date>) \n
    Released:\ (?<released> \g<date>) $

  # Определяем паттерны для групп
  (?(DEFINE)
    (?<date>  \g<year>-\g<month>-\g<day>)
    (?<year>  \d{4})
    (?<month> \d{2})
    (?<day>   \d{2})
  )
`;
const match = record.match(re);
console.log(match.groups);
/* → {
  admitted: '2024-01-01',
  released: '2024-01-03'
} */

https://www.smashingmagazine.com/2024/08/history-future-regular-expressions-javascript/

#development #javascript #regexp #recommended

Using JavaScript Generators to Visualize Algorithms

Интересная статья про нетривиальное использование генераторов. А именно: для визуализации алгоритмов на JS.

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

В статье рассматривается визуализация сортировки пузырьком.

https://www.covicale.com/blog/using-javascript-generators-to-visualize-algorithms

#development #javascript #generators

Optimizing SPA load times with async chunks preloading

Интересная статья про ускорение загрузки SPA сайта. Есть много разных техник, но тут автор рассказывает, как имплементировать автоматический прелоад всех ресурсов, необходимых страницы

В целом флоу выглядит так:
- Сначала надо сделать так, чтобы каждому роуту в приложении соответствовал именованный чанк
- Затем необходимо написать небольшой плагин в сборщике, который по каждому ентри-поинту поймет, какие файлы необходимо загрузить для работы ентри-поинта
- Затем необходимо в том же плагине сгенерировать инлайн-скрипт, который будет заинжектен в index.html шаблон и которые добавляет <link rel=preload> для каждой ссылки, необходимой для текущего ентри-поинта

Выглядит одновременно и просто и сложно. Но, в любом случае, интересно

https://mmazzarolo.com/blog/2024-08-13-async-chunk-preloading-on-load/

#development #javascript #performance

fuite - is a CLI tool for finding memory leaks in web apps.

Вышел релиз 5.0.0 инструмента fuite, который ищет утечки памяти. Я не пробовал, но уже по описанию инструмента понятно, что он может быть очень полезным

Инструмент запускает браузер через puppeteer, загружает страницу, прогоняет целевой сценарий несколько раз и анализирует, какие объекты утекают. Из поддерживаемых типов утекающих сущностей: объекты, обработчики событий, DOM-ноды, коллекции (массивы, мапки, сеты)

https://github.com/nolanlawson/fuite

#development #javascript #performance #memoryLeak #library

Дайджест за 2024-08-26 - 2024-08-30

One on One Meeting Format Ideas
Неплохая статья про 1:1. Автор делится собственным опытом проведения 1:1 с сотрудниками и показывает свой формат ведения 1:1

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

⭐️Regexes Got Good: The History And Future Of Regular Expressions In JavaScript
Хорошая статья про развитие RegExp в JavaScript и про современные фишки RegExp. RegExp в JS прошел большой путь - от простой первоначальной реализации, до современной и удобной реализации, которая по фичам не сильно уступает другим языкам, а некоторые языки даже обгоняет

Автор хорошо описывает относительно новые фичи регулярок в JS - именованные группы, lookbeind, упрощение глобального матчинга и работу с юникодом

Using JavaScript Generators to Visualize Algorithms
Интересная статья про нетривиальное использование генераторов. А именно: для визуализации алгоритмов на JS.

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

Optimizing SPA load times with async chunks preloading
Интересная статья про ускорение загрузки SPA сайта. Есть много разных техник, но тут автор рассказывает, как имплементировать автоматический прелоад всех ресурсов, необходимых страницы

fuite - is a CLI tool for finding memory leaks in web apps.
Вышел релиз 5.0.0 инструмента fuite, который ищет утечки памяти. Я не пробовал, но уже по описанию инструмента понятно, что он может быть очень полезным

Инструмент запускает браузер через puppeteer, загружает страницу, прогоняет целевой сценарий несколько раз и анализирует, какие объекты утекают. Из поддерживаемых типов утекающих сущностей: объекты, обработчики событий, DOM-ноды, коллекции (массивы, мапки, сеты)

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

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

Announcing Rspack 1.0

Вышел в свет Rspack v1.0. Rspack - это бандлер, написанный на Rust, совместимый с webpack экосистемой и работающий быстрее в 10 раз.

Что изменилось с момента релиза 0.1:
- Ускорили работу бандлера
- Улучшили совместимость с webpack экосистемой. Около 80% webpack-плагинов могут работать с Rspack или имеют альтернативу
- Генерируют меньший по размеру бандл
- Поддерживают Module Federation 2.0
- Ну а главное, конечно - стабильное API. Инструмент выходит из активного бета-тестирования в продакшн-реди решение

https://rspack.dev/blog/announcing-1-0

#development #javascript #bundler #rspack #release

How I cut 22.3 seconds off an API Call using Trace View

Статья в блоге Sentry про то, как можно использовать Trace View для оптимизации перформанса. Если честно, только из этой статьи я узнал что в Sentry вообще есть такая фича, как трейсинг.

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

Традиционно, такие инструменты используются на бэкенде. Например, можно построить трейс обработки HTTP-запроса и увидеть, сколько он делает запросов в базу данных и сколько времени они занимаются. Однако такие инструменты, при желании, можно использовать и для веба.

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

В статье применены несколько оптимизаций, благодаря чему отдача контента была ускорена в 2 раза (с 44 до 22 секунд)

https://blog.sentry.io/how-i-cut-22-3-seconds-off-an-api-call-using-trace-view/

#development #javascript #sentry #traces #performance

Всем привет! Мы в Т-Банк ищем таланты 🙃

У нас тут:
- Проекты разного размера: от бекенда для бекенда до крутых клиентских сервисов
- Можно радовать результатами своей работы миллионы пользователей, а можно быть частью технической команды и разрабатывать внутренние инструменты
- В компании выстроена культура обмена знаниями и роста. Есть внутренние конференции, митапы, системы менторинга, курсы, книжные клубы и тд и тп. Каждый день что-то происходит
- Крутая инженерная культура. Я, когда пришел сюда фронтендером, был сильно впечатлен скилом местных фронтендеров - есть куча ребят, которые реально профи в своем деле и имеют глубокую экспертизу. Сейчас я уже менеджер и могу сказать, что скиловые не только технари, но и ребята из дискавери и менеджеры.

Вообще Т-Банк большой и нам нужны все, но я пишу отдельный пост потому что в моем проекте - Т-Банк Отели, нужен мощный фронтендер.

Что у нас по фронтенду:
- Пишем на React
- Приложение на крутом самописном (но заопенсорсенном) фреймворке tramvai (про который, кстати, часто пишет Олег Драпеза в своем канале)
- Есть немножко nodejs (SSR, внутренние мелкие сервисы и небольшие api). Мы не сильно развиваем эту область, но она есть.
- Покрываем все автотестами, автоматизируем любую рутину (кастомные правила линтинга, релизные скрипты и тд)
- Делаем крутой клиентский продукт - целимся стать лучшим сервисом для бронирования отелей. Сейчас ищем человека конкретно в команду поиска. Цель команды - сделать такой поиск, чтобы пользователь мог найти максимально "свой" отель в максимально короткий срок

Если вас заинтересовало или вы знаете того, кого могло бы подобное заинтересовать - велком ко мне в личку (@crazymax101) - отвечу на любые вопросы, либо можете сразу закинуть свою резюмешку по ссылке (но если вы хотите прям в Отели - лучше написать мне в личку, чтоб я нашел вас и вас направили в Отели)