Дайджест за 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) - отвечу на любые вопросы, либо можете сразу закинуть свою резюмешку по ссылке (но если вы хотите прям в Отели - лучше написать мне в личку, чтоб я нашел вас и вас направили в Отели)

JS Dates Are About to Be Fixed

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

Новое предложение как раз решает эту проблему, добавляя Temporal.ZonedDateTime, в которой кроме, собственно, времени, также хранится и таймзона и календарь (Грегорианский например)

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

const one = Temporal.ZonedDateTime.from('2020-11-01T01:45-07:00[America/Los_Angeles]');  
const two = Temporal.ZonedDateTime.from('2020-11-01T01:15-08:00[America/Los_Angeles]');  
  
Temporal.ZonedDateTime.compare(one, two);

https://docs.timetime.in/blog/js-dates-finally-fixed/

#development #javascript #Date #proposal

JavaScript Generators Explained, But On A Senior-Level

Очень хорошая статья про генераторы в JavaScript. Она объясняет не синтаксис генераторов, а их суть.

Генераторы - это pull streams (вытягивающие потоки). Stream (поток) - это когда данные приходят не сразу, а их приход распределен во времени. Потоки делятся на pull и push. Push - это когда мы не контролируем проход данных по потоку. Например, websockets - мы не контролируем когда данные приходят - они просто приходят. Pull - это когда мы контролируем, когда мы хотим получить следующие данные. Так вот, генераторы - это штука для pull streams.

В программировании данные могут быть обработаны двумя способами - жадно (eager) - обрабатываем сразу; или лениво (lazily) - обрабатываем по мере необходимости.

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

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(num => { 
 console.log(`Squaring ${num}`);  // выводит каждый "квадрат"
 return num * num; 
}); 
console.log('squares:', squares); // [1, 4, 9, 16, 25]

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

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(num => { 
    return {
      valueOf: () => {
       console.log(`Squaring ${num}`);  // выводит каждый "квадрат"
        return num * num; 
      }
    }
 
}); 
console.log('squares: ', squares); // выведетм массив объектов - ни один квадрат не посчитан
console.log(+squares[3]) // унарный оператор `+` вызовет `valueOf` и только тогда запустится расчет квадрата числа

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

Промисы жадные (eager), т.к. колбек промиса выполняется моментально и нет способа его остановить.

Получается, что промисы - это жадная асинхронщина.
Генераторы тоже асинхронщина, но уже ленивая - можно управлять потоком выполнения кода, приостанавливать его и запускать снова.

Основные 3 юзкейса для генераторов:
- Ленивый расчет. Это полезно если у вас либо сложные расчеты, либо бесконечный поток данных
- Асинхронное программирование
- Итерирование - генераторы позволяют поставить алгоритм на паузу, что полезно в случае в сложных алгоритмов

https://www.reactsquad.io/blog/understanding-generators-in-javascript

#development #javascript #generators #recommended

How To Create An NPM Package

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

https://www.totaltypescript.com/how-to-create-an-npm-package

#development #javascript #npm #tutorial

Дайджест за 2024-09-02 - 2024-09-06

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

How I cut 22.3 seconds off an API Call using Trace View
Статья в блоге Sentry про то, как можно использовать Trace View для оптимизации перформанса. Если честно, только из этой статьи я узнал что в Sentry вообще есть такая фича, как трейсинг.

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

JS Dates Are About to Be Fixed
Статья, объясняющая грядущие изменения работы с датами в JS. Работа с датами в системах, где нужно учитывать часовой пояс - это всегда боль. Мой любимый пример, с одной из прошлых работ: сотрудник агенства недвижимости работает из Владивостока, само агенство недвижимости зарегистрировано в Казани, а объекты недвижимости продает в Екатеринбург. Вопрос: как отображать время работы менеджера в интерфейсе?

Новое предложение как раз решает эту проблему, добавляя Temporal.ZonedDateTime, в которой кроме, собственно, времени, также хранится и таймзона и календарь (Грегорианский например)

⭐️JavaScript Generators Explained, But On A Senior-Level
Очень хорошая статья про генераторы в JavaScript. Она объясняет не синтаксис генераторов, а их суть.

Генераторы - это pull streams (вытягивающие потоки). Stream (поток) - это когда данные приходят не сразу, а их приход распределен во времени. Потоки делятся на pull и push. Push - это когда мы не контролируем проход данных по потоку. Например, websockets - мы не контролируем когда данные приходят - они просто приходят. Pull - это когда мы контролируем, когда мы хотим получить следующие данные. Так вот, генераторы - это штука для pull streams.

How To Create An NPM Package
Достаточно подробный туториал, описывающий, как флоу создания и публикации npm-пакета в 2024 году. В целом, ничего нового, но описано хорошо и может быть кому-то полезно.

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

Также я промил работу в ТБанк. Мы в целом ищем скиловых разработчиков, в том числе фронтендеров и в том числе в проект, где я работаю - в Отели.
В комментариях под записью можно почитать мои ответы на некоторые вопросы и как все плохо в современной культуре найма (алгособесы, нерелевантные задачи, отписки от HR). С тем что сообщество повернуло не туда в плане проверок перед наймом не спорю 🙃

Если вам интересно узнать чтото про работу в ТБанк - пишите в личку любые вопросы, постараюсь на них ответить

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

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

Особенности Effector, которые почему-то никто не обсуждает: опыт ВКонтакте спустя год использования

На Codefest команда ВК рассказывала, как они решили перейти на effector и почему пришлось откатываться. Мне лично доклад сильно понравился, потому что он, по своему смыслу, двух-уровневый: на первом уровне - критика effector, на втором уровне - как выбирать инструменты (отдельно кекнул прям на докладе, что решили выбирать стейт менеджер на основе голосования)

Записи докладов с Codefest еще не обнародовали, но команда VK выпустила статью на ту же тему. Статья уже стала источником небольшой драмы в сообществе (например, можно почитать кучу постов у sergeysova и немножко у artalog).

В целом в статье подсвечены нюансы effector, которые могут быть проблемой при разработке. Я в свое время писал простую помидорницу (ого, даже еще доступно по pomodoro.msosnov.com) с использованием effector. Для себя я тогда подчеркнул, что при входе в разработку на effector, приходится перезагружать стиль мышления чтобы работать с его сущностями и реактивной моделью. В целом нахождение хорошего решения или дебаг всех текущих связей напоминал игру в шарады - с непривычки приходится долгое время сидеть и думать как бы изменить граф связей, чтобы было хорошо, а когда находишь решение - чувствуешь детский восторг, а потом понимаешь, что на своем рабочем стеке это заняло бы пол-минуты максимум. До сих пор считаю решение шарад - идеальной метафорой знакомства с effector :)

А статью рекомендую почитать. В целом на объяснении нюансов, которые команда ВК посчитала недостатками, можно узнать и про инструмент, и про то, на что необходимо обращать внимание при выборе инструментов.


https://habr.com/ru/companies/vk/articles/839632/

#development #javascript #effector #vk #recommended

An SSR Performance Showdown

Немного странный бенчмарк производительности серверного рендеринга разных библиотек. Задача простая: отрисовать спираль из 2398 дивов. В сравнении участвовали fastify-html (простая либка для рендера html из fastify), react, preact, vue, solidjs, svelte.

В явных лидерах (>1000 RPS): fastify-html и vue, далее с небольшим отставанием (>900 RPS) идут svelte и solidjs, завершают рейтинг preact (717 RPS) и react (572 RPS).

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

https://blog.platformatic.dev/ssr-performance-showdown

#development #javascript #ssr #performance #react #preact #vue #svelte #fastify #solidjs

Announcing Vue 3.5

Анонсирован Vue 3.5. Давно не следил за vue, хотя продолжительно время писал на нём. И вот решил посмотреть что там нового в vue 3.5.

Я, конечно, давно уже не слежу за тем, насколько Vue быстрее или медленнее других библиотек и фреймворков. Но в моей памяти - он считается достаточно быстрым (поправьте в коментах, если это уже давно не так). Тем не менее, в 3.5 уменьшили в 2 раза потребление памяти системой реактивности, а трекинг огромных вложенных массивов ускорился в 10 раз в определенных кейсах

Также я до сих пор помню баги, связанные с тем, что разработчик решил деструктуризировать что-то из vuex и оно теряло свою реактивность. В 3.5 решили проблему с деструктуризацией пропсов. Компилятор сам увидит деструктуризация и заменит её на "обычное" обращение к props.

т.е. теперь можно писать

const { count } = defineProps<{
  count: number
}>()

тогда как раньше везде, где был нужен count, все требовалось использовать props (если требовалась реактивность)

const props = defineProps<{
  count: number
}>()
console.log(props.count)

Также в релиз попали улучшения, связанные с SSR, который давно запрашивало сообщество.

Во-первых, ленивая гидрация. Теперь можно объявить компонент ленивым и попросить vue гидрировать его, только если он стал виден

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnVisible()
})

Добавили хук useId, который генерирует уникальные id, которые сойдутся и на сервере и на клиенте

Добавили служебный атрибут data-allow-mismatch, который говорит Vue, что контент может отличаться после гидрации. Это полезно для кейсов, где идет работа с датами. Например, на сервере мы выводим today и получается 2024-09-09, а у пользователя уже 2024-09-10. React в этом случае будет ругаться при гидрации (в коментах меня поправили, что также можно отключить), а во vue вот добавили специальную директиву на случай, если это ожидаемое поведение

<span data-allow-mismatch>{{ data.toLocaleString() }}</span>

Внезапно также улучшили интеграцию с custom-elements. Теперь писать веб-компоненты на Vue еще проще

Еще из интересного - добавили явное API для отчистки сайд-эффектов в вотчерах

import { watch, onWatcherCleanup } from 'vue'

watch(id, (newId) => {
  const controller = new AbortController()

  fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {
    // callback logic
  })

  onWatcherCleanup(() => {
    // abort stale request
    controller.abort()
  })
})

В общем, на Vue я не пишу, но релиз ноутсы все равно выглядят очень интересно :)

https://blog.vuejs.org/posts/vue-3-5

#development #javascript #vue #release

OpenAI is shockingly good at unminifying code

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

Его можно было бы и реверснуть ручками (там небольшой фрагмент кода), но чел воспользовался мощью chatGPT, который правильно разобрал алгоритм и затем почти правильно написал читаемую имплементацию на typescript.

https://glama.ai/blog/2024-08-29-reverse-engineering-minified-code-using-openai

#development #javascript #minifiedCode #chatgpt

Inside ECMAScript: JavaScript Standard Gets an Extra Stage

Комитет стандартизации Ecmascript добавил еще 1 Stage для предложений по улучшению языка. Между 2 и 3 этапом добавился stage 2.7.

Почему он понадобился: часто большие предложения, попадавшие на Stage 3, разворачивались обратно на Stage 2 т.к. оказывалось, что у предложения есть существенные недостатки, которые не были выявлены ранее. Это означает, что вся работа, сделанная в stage 3, была сделана зря. Чтобы минимизировать подобные кейсы, решили добавить шаг 2.7, в котором уже договорились о том, как все должно работать, но теперь пишут тест-кейсы и валидируют, что это предложение действительно рабочее (если я правильно понял).

А вот сделали бы стейджи, как при программировании на BASIC, где код пишут обозначая строки и обычно делают строки 10, 20, 30, 40, чтобы можно было добавить новых строк между текущими, то не пришлось бы добавлять дробный stage, добавили бы 25 😁

https://thenewstack.io/inside-ecmascript-javascript-standard-gets-an-extra-stage/

#development #javascript #ecmascript

А еще завтра я буду выступать в Томске на конференции Город-ИТ. Если вдруг вы там будете - заходите. Буду рассказывать доклад про парное программирование, поотвечаю на вопросы и покажу коллегу из Томска, который пейрит в нашей команде :)

https://gorod.it/inprog2024?fact_id=19590