JS Dates Are About to Be Fixed
Статья, объясняющая грядущие изменения работы с датами в JS. Работа с датами в системах, где нужно учитывать часовой пояс - это всегда боль. Мой любимый пример, с одной из прошлых работ: сотрудник агенства недвижимости работает из Владивостока, само агенство недвижимости зарегистрировано в Казани, а объекты недвижимости продает в Екатеринбург. Вопрос: как отображать время работы менеджера в интерфейсе?
Новое предложение как раз решает эту проблему, добавляя
Более того, новое API, кроме таймзон и календаря, будет иметь удобные методы для работы с ним. Например, сравнения
https://docs.timetime.in/blog/js-dates-finally-fixed/
#development #javascript #Date #proposal
Статья, объясняющая грядущие изменения работы с датами в 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
docs.timetime.in
JS Dates Are About to Be Fixed | TimeTime
Why I’m excited about the new Temporal API in JavaScript: finally, easy and accurate date handling with time zones using ZonedDateTime. Say goodbye to the headaches of traditional Date objects.
JavaScript Generators Explained, But On A Senior-Level
Очень хорошая статья про генераторы в JavaScript. Она объясняет не синтаксис генераторов, а их суть.
Генераторы - это pull streams (вытягивающие потоки). Stream (поток) - это когда данные приходят не сразу, а их приход распределен во времени. Потоки делятся на pull и push. Push - это когда мы не контролируем проход данных по потоку. Например, websockets - мы не контролируем когда данные приходят - они просто приходят. Pull - это когда мы контролируем, когда мы хотим получить следующие данные. Так вот, генераторы - это штука для pull streams.
В программировании данные могут быть обработаны двумя способами - жадно (eager) - обрабатываем сразу; или лениво (lazily) - обрабатываем по мере необходимости.
Пример жадной обработки: результат нам может быть еще не нужен, но мы его весь уже посчитали
В случае ленивой обработки, мы бы не обсчитывали квадраты, пока они не понадобятся на самом деле. В статье совсем странный пример, поэтому я, для наглядности, адаптирую пример с квадратами числем
Данный пример немного синтетический и его стоит заменить на что-то более сложное и ресурсоёмкое. Но, надеюсь, мысль понятна.
Промисы жадные (
Получается, что промисы - это жадная асинхронщина.
Генераторы тоже асинхронщина, но уже ленивая - можно управлять потоком выполнения кода, приостанавливать его и запускать снова.
Основные 3 юзкейса для генераторов:
- Ленивый расчет. Это полезно если у вас либо сложные расчеты, либо бесконечный поток данных
- Асинхронное программирование
- Итерирование - генераторы позволяют поставить алгоритм на паузу, что полезно в случае в сложных алгоритмов
https://www.reactsquad.io/blog/understanding-generators-in-javascript
#development #javascript #generators #recommended
Очень хорошая статья про генераторы в 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
www.reactsquad.io
JavaScript Generators Explained, But On A Senior-Level
Many tutorials on generators only scratch the surface. In this article, we’ll dive deep to give you an advanced understanding of generators.
How To Create An NPM Package
Достаточно подробный туториал, описывающий, как флоу создания и публикации npm-пакета в 2024 году. В целом, ничего нового, но описано хорошо и может быть кому-то полезно.
https://www.totaltypescript.com/how-to-create-an-npm-package
#development #javascript #npm #tutorial
Достаточно подробный туториал, описывающий, как флоу создания и публикации npm-пакета в 2024 году. В целом, ничего нового, но описано хорошо и может быть кому-то полезно.
https://www.totaltypescript.com/how-to-create-an-npm-package
#development #javascript #npm #tutorial
Total TypeScript
How To Create An NPM Package
Learn how to publish a package to npm with a complete setup including, TypeScript, Prettier, Vitest, GitHub Actions, and versioning with Changesets.
Дайджест за 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). С тем что сообщество повернуло не туда в плане проверок перед наймом не спорю 🙃
Если вам интересно узнать чтото про работу в ТБанк - пишите в личку любые вопросы, постараюсь на них ответить
——————————————
Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегам или друзьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂
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
На 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
Немного странный бенчмарк производительности серверного рендеринга разных библиотек. Задача простая: отрисовать спираль из 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
Platformatic Blog
An SSR Performance Showdown
💡
Note: In the first iteration of this benchmark, we made a few mistakes, summarized in this tweet by Theo Browne . We'd like to first apologize for these errors, and to sincerely thank Rich Harris, Ryan Carniato, Dan Abramov, Balázs Németh and Domi...
Note: In the first iteration of this benchmark, we made a few mistakes, summarized in this tweet by Theo Browne . We'd like to first apologize for these errors, and to sincerely thank Rich Harris, Ryan Carniato, Dan Abramov, Balázs Németh and Domi...
Announcing Vue 3.5
Анонсирован Vue 3.5. Давно не следил за vue, хотя продолжительно время писал на нём. И вот решил посмотреть что там нового в vue 3.5.
Я, конечно, давно уже не слежу за тем, насколько Vue быстрее или медленнее других библиотек и фреймворков. Но в моей памяти - он считается достаточно быстрым (поправьте в коментах, если это уже давно не так). Тем не менее, в 3.5 уменьшили в 2 раза потребление памяти системой реактивности, а трекинг огромных вложенных массивов ускорился в 10 раз в определенных кейсах
Также я до сих пор помню баги, связанные с тем, что разработчик решил деструктуризировать что-то из vuex и оно теряло свою реактивность. В 3.5 решили проблему с деструктуризацией пропсов. Компилятор сам увидит деструктуризация и заменит её на "обычное" обращение к
т.е. теперь можно писать
тогда как раньше везде, где был нужен
Также в релиз попали улучшения, связанные с SSR, который давно запрашивало сообщество.
Во-первых, ленивая гидрация. Теперь можно объявить компонент ленивым и попросить vue гидрировать его, только если он стал виден
Добавили хук
Добавили служебный атрибутReact в этом случае будет ругаться при гидрации (в коментах меня поправили, что также можно отключить), а во vue вот добавили специальную директиву на случай, если это ожидаемое поведение
Внезапно также улучшили интеграцию с custom-elements. Теперь писать веб-компоненты на Vue еще проще
Еще из интересного - добавили явное API для отчистки сайд-эффектов в вотчерах
В общем, на Vue я не пишу, но релиз ноутсы все равно выглядят очень интересно :)
https://blog.vuejs.org/posts/vue-3-5
#development #javascript #vue #release
Анонсирован 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. <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
blog.vuejs.org
Announcing Vue 3.5 | The Vue Point
The official blog for the Vue.js project
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
Небольшая статья, показывающая интересный юзкейс для нейронок. Чувак увидел прикольную ASCII-анимацию на сайте, и захотел узнать как она работает. Как это часто бывает на сайтах - из исходников есть только минифицированный код на React в сорсах страницы.
Его можно было бы и реверснуть ручками (там небольшой фрагмент кода), но чел воспользовался мощью chatGPT, который правильно разобрал алгоритм и затем почти правильно написал читаемую имплементацию на typescript.
https://glama.ai/blog/2024-08-29-reverse-engineering-minified-code-using-openai
#development #javascript #minifiedCode #chatgpt
Glama – MCP Hosting Platform
I was curious about how a component was implemented in a minified JavaScript file and used ChatGPT to reverse engineer the component.
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
Комитет стандартизации 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
The New Stack
Inside ECMAScript: JavaScript Standard Gets an Extra Stage
After nine years of annual JavaScript updates, the TC39 committee has tweaked the process to make rolling out new features faster and smoother.
А еще завтра я буду выступать в Томске на конференции Город-ИТ. Если вдруг вы там будете - заходите. Буду рассказывать доклад про парное программирование, поотвечаю на вопросы и покажу коллегу из Томска, который пейрит в нашей команде :)
https://gorod.it/inprog2024?fact_id=19590
https://gorod.it/inprog2024?fact_id=19590
gorod.it
Программа ежегодной IT-конференции в городе Томске | Город ИТ 2024
Описание секций Город IT 2024
Обычно я не рассказываю как прошла очередная конфа, но про город ИТ не могу не поделиться.
В прошлом году фронтенд трек проходил в ночном клубе и это было супер-атмосферно: томный свет, на заднем фоне был, есть танцпол, липкий пол, кожаные диваны. В этом году площадку взяли ровно противоположную - филармонию. Я уж думал буду как ферзь выступать на крутой сцене. Но все оказалось ещё круче - утренний фронтенд трек проходил в шатре на улице (а сентябрь в Томске не прям тёплый, утра холодно было). Рассказал доклад про парное программирование, вроде людям зашло) позадавали вопросов и рассказали своих кейсов. На стенде сибура выиграл мемного кота.
Томск, конечно, ультра вайбовый город. Чем то похож на Питер, только компактнее как в целом по масштабам, так и по размерам старых зданий. Также здесь есть очень хорошая бургерная. Местные говорят, что лучшая в мире и я им верю
В прошлом году фронтенд трек проходил в ночном клубе и это было супер-атмосферно: томный свет, на заднем фоне был, есть танцпол, липкий пол, кожаные диваны. В этом году площадку взяли ровно противоположную - филармонию. Я уж думал буду как ферзь выступать на крутой сцене. Но все оказалось ещё круче - утренний фронтенд трек проходил в шатре на улице (а сентябрь в Томске не прям тёплый, утра холодно было). Рассказал доклад про парное программирование, вроде людям зашло) позадавали вопросов и рассказали своих кейсов. На стенде сибура выиграл мемного кота.
Томск, конечно, ультра вайбовый город. Чем то похож на Питер, только компактнее как в целом по масштабам, так и по размерам старых зданий. Также здесь есть очень хорошая бургерная. Местные говорят, что лучшая в мире и я им верю
Дайджест за 2024-09-09 - 2024-09-13
⭐️Особенности Effector, которые почему-то никто не обсуждает: опыт ВКонтакте спустя год использования
На Codefest команда ВК рассказывала, как они решили перейти на effector и почему пришлось откатываться. Мне лично доклад сильно понравился, потому что он, по своему смыслу, двух-уровневый: на первом уровне - критика effector, на втором уровне - как выбирать инструменты (отдельно кекнул прям на докладе, что решили выбирать стейт менеджер на основе голосования)
Записи докладов с Codefest еще не обнародовали, но команда VK выпустила статью на ту же тему. Статья уже стала источником небольшой драмы в сообществе (например, можно почитать кучу постов у sergeysova и немножко у artalog).
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).
В комментах отписаличь, почему бенчмарк - фигня
Announcing Vue 3.5
Анонсирован Vue 3.5. Давно не следил за vue, хотя продолжительно время писал на нём. И вот решил посмотреть что там нового в vue 3.5.
Я, конечно, давно уже не слежу за тем, насколько Vue быстрее или медленнее других библиотек и фреймворков. Но в моей памяти - он считается достаточно быстрым (поправьте в коментах, если это уже давно не так). Тем не менее, в 3.5 уменьшили в 2 раза потребление памяти системой реактивности, а трекинг огромных вложенных массивов ускорился в 10 раз в определенных кейсах
В комментах разные уточнения к посту и перформансу
OpenAI is shockingly good at unminifying code
Небольшая статья, показывающая интересный юзкейс для нейронок. Чувак увидел прикольную ASCII-анимацию на сайте, и захотел узнать как она работает. Как это часто бывает на сайтах - из исходников есть только минифицированный код на React в сорсах страницы.
Его можно было бы и реверснуть ручками (там небольшой фрагмент кода), но чел воспользовался мощью chatGPT, который правильно разобрал алгоритм и затем почти правильно написал читаемую имплементацию на typescript.
Inside ECMAScript: JavaScript Standard Gets an Extra Stage
Комитет стандартизации Ecmascript добавил еще 1 Stage для предложений по улучшению языка. Между 2 и 3 этапом добавился stage 2.7.
Почему он понадобился: часто большие предложения, попадавшие на Stage 3, разворачивались обратно на Stage 2 т.к. оказывалось, что у предложения есть существенные недостатки, которые не были выявлены ранее. Это означает, что вся работа, сделанная в stage 3, была сделана зря. Чтобы минимизировать подобные кейсы, решили добавить шаг 2.7, в котором уже договорились о том, как все должно работать, но теперь пишут тест-кейсы и валидируют, что это предложение действительно рабочее (если я правильно понял).
——————————————
Также короткий пост о том как я посетил конфу в Томске
——————————————
Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегам или друзьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂
⭐️Особенности Effector, которые почему-то никто не обсуждает: опыт ВКонтакте спустя год использования
На Codefest команда ВК рассказывала, как они решили перейти на effector и почему пришлось откатываться. Мне лично доклад сильно понравился, потому что он, по своему смыслу, двух-уровневый: на первом уровне - критика effector, на втором уровне - как выбирать инструменты (отдельно кекнул прям на докладе, что решили выбирать стейт менеджер на основе голосования)
Записи докладов с Codefest еще не обнародовали, но команда VK выпустила статью на ту же тему. Статья уже стала источником небольшой драмы в сообществе (например, можно почитать кучу постов у sergeysova и немножко у artalog).
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).
В комментах отписаличь, почему бенчмарк - фигня
Announcing Vue 3.5
Анонсирован Vue 3.5. Давно не следил за vue, хотя продолжительно время писал на нём. И вот решил посмотреть что там нового в vue 3.5.
Я, конечно, давно уже не слежу за тем, насколько Vue быстрее или медленнее других библиотек и фреймворков. Но в моей памяти - он считается достаточно быстрым (поправьте в коментах, если это уже давно не так). Тем не менее, в 3.5 уменьшили в 2 раза потребление памяти системой реактивности, а трекинг огромных вложенных массивов ускорился в 10 раз в определенных кейсах
В комментах разные уточнения к посту и перформансу
OpenAI is shockingly good at unminifying code
Небольшая статья, показывающая интересный юзкейс для нейронок. Чувак увидел прикольную ASCII-анимацию на сайте, и захотел узнать как она работает. Как это часто бывает на сайтах - из исходников есть только минифицированный код на React в сорсах страницы.
Его можно было бы и реверснуть ручками (там небольшой фрагмент кода), но чел воспользовался мощью chatGPT, который правильно разобрал алгоритм и затем почти правильно написал читаемую имплементацию на typescript.
Inside ECMAScript: JavaScript Standard Gets an Extra Stage
Комитет стандартизации Ecmascript добавил еще 1 Stage для предложений по улучшению языка. Между 2 и 3 этапом добавился stage 2.7.
Почему он понадобился: часто большие предложения, попадавшие на Stage 3, разворачивались обратно на Stage 2 т.к. оказывалось, что у предложения есть существенные недостатки, которые не были выявлены ранее. Это означает, что вся работа, сделанная в stage 3, была сделана зря. Чтобы минимизировать подобные кейсы, решили добавить шаг 2.7, в котором уже договорились о том, как все должно работать, но теперь пишут тест-кейсы и валидируют, что это предложение действительно рабочее (если я правильно понял).
——————————————
Также короткий пост о том как я посетил конфу в Томске
——————————————
Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегам или друзьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂
How I Created a 3.78MB Docker Image for a JavaScript Service
Чем бы ты не занимался, всегда найдется азиат, который сделает это круче.
Так произошло и с докер-образами для JS-сервисов. Чела не устраивало, что все текущие образы весят 50+ МБ, вне зависимости от рантайма, и тогда он сделал свой докер-образ, который весит 3.7МБ.
Чтобы сделать такой худой образ, автор использует LLRT как рантайм. Это рантайм, который развивает AWS, если я правильно помню. Создан поверх движка QuickJS.
Т.к. llrt весит так мало не просто так (а потому что многое там упрощено и многого там просто нет), то пришлось немножко адаптировать свое приложение. Например, переписать часть, связанную с http сервером.
Итоги:
- Докер образ стал весить меньше
- Приложение быстрее стартует
- Приложение медленее работает
- Автор в целом рекомендует оставаться на nodejs для большинства кейсов.
https://shenzilong.cn/record/How%20I%20Created%20a%203.78MB%20Docker%20Image%20for%20a%20JavaScript%20Service
#development #javascript #docker
Чем бы ты не занимался, всегда найдется азиат, который сделает это круче.
Так произошло и с докер-образами для JS-сервисов. Чела не устраивало, что все текущие образы весят 50+ МБ, вне зависимости от рантайма, и тогда он сделал свой докер-образ, который весит 3.7МБ.
Чтобы сделать такой худой образ, автор использует LLRT как рантайм. Это рантайм, который развивает AWS, если я правильно помню. Создан поверх движка QuickJS.
Т.к. llrt весит так мало не просто так (а потому что многое там упрощено и многого там просто нет), то пришлось немножко адаптировать свое приложение. Например, переписать часть, связанную с http сервером.
Итоги:
- Докер образ стал весить меньше
- Приложение быстрее стартует
- Приложение медленее работает
- Автор в целом рекомендует оставаться на nodejs для большинства кейсов.
https://shenzilong.cn/record/How%20I%20Created%20a%203.78MB%20Docker%20Image%20for%20a%20JavaScript%20Service
#development #javascript #docker
Exploring Goja: A Golang JavaScript Runtime
Вот было у вас такое, что вы пишете на golang, и вам не хватает простого человеческого javascript? Теперь ваша боль решена - Goja - js рантайм для Golang
Если без шуток, челу необходимо было запускать JS в рамках Golang приложения. Конкретного кейса автора я не понял, но в целом могу выдумать несколько интересных: запуск JS-кода в контролируемом рантайме (для спортивного программирования например), описание сложных правил в UI на JS, а исполнение правил - на сервере на golang.
Автор смотрел в сторону разных вариантов запуска JS в рамках Golang, но остановился на Goja. Основное преимущество Goja - это бесшовная связка структур в Golang со структурами JS.
В целом, если у вас на сервере крутится golang и вам надоело дублировать какую-то логику в нескольких местах, можете предложить в команде использовать Goja, чтобы реализовывать общую логику на JS и использовать ее в golang. Ну или у вас могут быть еще какие-то кейсы для использования такой библиотеки
На последок, закину сниппет кода, который использует Goja
https://jtarchie.com/posts/2024-08-30-exploring-goja-a-golang-javascript-runtime
#development #javascript #runtime
Вот было у вас такое, что вы пишете на golang, и вам не хватает простого человеческого javascript? Теперь ваша боль решена - Goja - js рантайм для Golang
Если без шуток, челу необходимо было запускать JS в рамках Golang приложения. Конкретного кейса автора я не понял, но в целом могу выдумать несколько интересных: запуск JS-кода в контролируемом рантайме (для спортивного программирования например), описание сложных правил в UI на JS, а исполнение правил - на сервере на golang.
Автор смотрел в сторону разных вариантов запуска JS в рамках Golang, но остановился на Goja. Основное преимущество Goja - это бесшовная связка структур в Golang со структурами JS.
В целом, если у вас на сервере крутится golang и вам надоело дублировать какую-то логику в нескольких местах, можете предложить в команде использовать Goja, чтобы реализовывать общую логику на JS и использовать ее в golang. Ну или у вас могут быть еще какие-то кейсы для использования такой библиотеки
На последок, закину сниппет кода, который использует Goja
package main
import (
"fmt"
"github.com/dop251/goja"
)
func main() {
vm := goja.New()
// Passing an array of integers from 1 to 100
values := []int{}
for i := 1; i <= 100; i++ {
values = append(values, i)
}
// Define the JavaScript code to filter even values
script := `
values.filter((x) => {
return x % 2 === 0;
})
`
// Set the array in the JavaScript runtime
vm.Set("values", values)
// Run the script
result, err := vm.RunString(script)
if err != nil {
panic(err)
}
// Convert the result back to a Go slice of empty interfaces
filteredValues := result.Export().([]interface{})
fmt.Println(filteredValues)
// Outputs: [2 4 6 8 10 12 14 16 18 20 22 24 26 28 30 32 34 36 38 40 42 44 46 48 50 52 54 56 58 60 62 64 66 68 70 72 74 76 78 80 82 84 86 88 90 92 94 96 98 100]
first := filteredValues[0].(int64)
fmt.Println(first)
}
https://jtarchie.com/posts/2024-08-30-exploring-goja-a-golang-javascript-runtime
#development #javascript #runtime
Jtarchie
Exploring Goja: A Golang JavaScript Runtime
The personal website of JT Archie. Includes a blog, work ethic, and projects they have worked on.