Блокировки, блокировки, блокировочки...

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

Но вот не задача, почему то (sarcasm) подсети этого хостинга начинают блочить провайдеры...

Смачно выругавшись начинаем искать варианты:

1. Переехать значит на православный хостинг и платить x100500 деняг
2. Купить на православном хостинге VPS, поставить там nginx в режиме stream и надеяться, что хостинг не заблокируют на уровне магистрали.

Для тех кто выбрал второй вариант, все просто.

1. Ставим nginx с поддержкой stream
2. Добавляем в nginx.conf

...
stream {
    upstream k8s_https {
        server ваш_ip:443;
    }

    server {
        listen 443;
        proxy_pass k8s_https;
    }
}
...

В отличие от стандартного http {} блока, stream работает на уровне TCP, а не HTTP.
Он не трогает заголовки, не читает Host, не парсит User-Agent
Он просто берёт входящий TLS-трафик и тупо прокидывает его дальше.

При этом это работает охуительно быстро, в отличии от обычного proxy_pass

Никакого overhead, никакой нагрузки на CPU, ничего не разбирается, не кешируется и не мутируется.
Это как туннель, только без OpenVPN и танцев с бубном.


BEARlogin dev — подпишись!
#блокировки #proxy #devops

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

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

Не понимаю я людей, которые считают, что мы одни во вселенной.

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

То, что мы не нашли, еще не значит, что жизни нет.
Я почти уверен, что вселенная полна жизни в самых разных формах.

atomic-router v0.12

- Экспортирован тип HistoryRouter
- Минимальная версия Node.JS поднята до v18.x

atomic-router-react v0.12

- Минимальная версия Node.JS поднята до v18.x
- Минимальная версия atomic-router теперь v0.12.0
- Удален atomic-router-react/scope, так как effector-react теперь работает со Scope из коробки
- Добавлен параметр replace в Link — <Link replace>
- Добавлена поддержка React 19

P.S.
С точки зрения поведения брейкингов не было.
Все найденные баги репортите в репозитории пожалуйста.
В ближайшее время занимаюсь фиксами всех уже найденных.

Parcel переезжает на Rust

https://parceljs.org/blog/v2-15-0

Уже несколько лет пользуюсь @trivago/prettier-plugin-sort-imports для быстрой сортировки импортов через prettier.

В какой-то момент убрали лишнюю зависимость от @vue/compiler-sfc, пользоваться стало совсем приятно.

Вот мой конфиг, который обычно переношу из проекта в проект.

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrderGroupNamespaceSpecifiers": true,
  "importOrderParserPlugins": ["typescript", "jsx"],
  "importOrderSortSpecifiers": true,
  "importOrderSeparation": true,
  "importOrder": [
    "<THIRD_PARTY_MODULES>",
    "^@/app(.*)$",
    "^@/pages(.*)$",
    "^@/layouts(.*)$",
    "^@/widgets(.*)$",
    "^@/features(.*)$",
    "^@/entities(.*)$",
    "^@/shared(.*)$",
    "^[../]",
    "^[./]"
  ]
}

А вот совсем недавно обнаружил форк, который добавляет еще несколько опций поверх плагина от Trivago.

https://github.com/ianvs/prettier-plugin-sort-imports

1. Добавляет специальные группы <BUILTIN_MODULES> и <TYPES>;
2. Возможность разделять группы через "";

Но вот этих опций нет

"importOrderSortSpecifiers": true,
"importOrderSeparation": true,

И если с order separation всё понятно, теперь добавляем "" и живём, то вот с sort specifiers пока непонятно.

Тестирую с этим конфигом:

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
  "importOrder": [
    "<BUILTIN_MODULES>",
    "<THIRD_PARTY_MODULES>",
    "",
    "^@/app(.*)$",
    "^@/pages(.*)$",
    "^@/layouts(.*)$",
    "^@/widgets(.*)$",
    "^@/features(.*)$",
    "^@/entities(.*)$",
    "^@/shared(.*)$",
    "",
    "^[../]",
    "^[./]"
  ],
  "importOrderParserPlugins": ["typescript", "jsx"],
  "importOrderTypeScriptVersion": "5.0.0",
  "importOrderCaseSensitive": false
}

Много лет пользовался husky + lint-staged, недавно во время подготовки тестового задания попробовал lefthook.

Во первых, приятно, что он заменяет собой сразу две зависимости.
Во вторых, простой, но при этом супер гибкий в настройке.
Ну и наконец, в CLI приятно выглядит, просто как бонус.

pre-push:
  jobs:
    - name: packages audit
      run: pnpm audit

    - name: build
      run: pnpm build

pre-commit:
  commands:
    eslint:
      run: pnpm eslint {staged_files} --fix
      glob: "*.{js,ts,jsx,tsx}"
      stage_fixed: true
    prettier:
      run: pnpm prettier --write {staged_files}
      glob: "*.{js,ts,jsx,tsx,css,html,json}"
      stage_fixed: true

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

Главная проблема подхода — забывчивость. Очень легко выйти из цикла и забыть вызвать .groupEnd(), тогда логи начинают уходить лесенкой вправо.

А оказывается, Node.js 24 поддерживает синтаксис using

Что позволяет сделать даже логи проще и приятнее.

Когда mainGroup выйдет из скоупа (функция, if, for или {}), автоматически будет вызвана функция [Symbol.dispose]

Хоть изначально предназначено для очистки ресурсов, но здесь хорошо работает

https://github.com/tc39/proposal-explicit-resource-management

Плавный переезд Vite на Rolldown

https://voidzero.dev/posts/announcing-rolldown-vite

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

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

Меня радует, что авторы обещают отсутствие мажорных отличий. Конечно, для популярных плагинов/фреймворков этот переезд не критичен — баги быстро пофиксят, а критичные места можно покрыть через if(vite.rolldownVersion)

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

Благо это крайне легко:

{
  "pnpm": {
    "overrides": {
      "vite": "npm:rolldown-vite@latest"
    }
  }
}

Ecma International approves ECMAScript 2025: What’s new?

25 июня зафиксировали стандарт ECMAScript 2025.

Что зафиксировали: импорт-атрибуты (нужны для JSON-модулей), хелперы для итераторов, новые методы Set, немного улучшили RegExp, добавили Promise.try и поддержки 16-битных чисел с плавающей точкой

Import attributes
Добавили в язык возможность импортировать не JS код. Для этого понадобилось добавлять синтаксис, который бы объяснял движку или рантайму, что сейчас будет импорчено

import configData1 from './config-data.json' with { type: 'json' };

// Dynamic import
const configData2 = await import(
  './config-data.json', { with: { type: 'json' } }
);

Хелперы для итераторов
Для массивов есть удобные методы, а для итераторов - нет. Решили исправить эту несправедливость и перенесли часть методов на итераторы

const arr = ['a', '', 'b', '', 'c', '', 'd', '', 'e'];
assert.deepEqual(
  arr.values() // creates an iterator
    .filter(x => x.length > 0)
    .drop(1)
    .take(3)
    .map(x => `=${x}=`)
    .toArray()
  ,
  ['=b=', '=c=', '=d=']
);

Адаптированные для итератора методы
- iterator.filter(filterFn)
- iterator.map(mapFn)
- iterator.flatMap(mapFn)
- iterator.some(fn)
- iterator.every(fn)
- iterator.find(fn)
- iterator.reduce(reducer, initialValue?)
- iterator.forEach(fn)

Также сделали аналоги slice
- iterator.drop(limit) возвращает новый итератор без первых limit значений (по сути slice(limit))
- iterator.take(limit) возвращает новый итератор с первыми limit значениями (по сути slice(0, limit))

Еще сделали удобный метод для преобразования итератора в массив iterator.toArray()

Новые методы Set
- Создание нового сета из двух существующих:
- Set.prototype.intersection(other) - пересечение - только те значения, которые есть в обоих наборах
- Set.prototype.union(other) - объединение - значение из обоих наборов
- Set.prototype.difference(other) - позволяет достать множество, которое получится если из множества А убрать все элементы множества Б
- Set.prototype.symmetricDifference(other) - позволяет достать множество, которое содержит элементы которые входят только в одно из множеств
- Определение отношения наборов:
- Set.prototype.isSubsetOf(other) - является ли набор А - подмножеством набора Б
- Set.prototype.isSupersetOf(other) является ли набор А - надмножеством набора Б
- Set.prototype.isDisjointFrom(other) - возвращает true, если у множеств нет пересечений

assert.deepEqual(
  new Set(['a', 'b', 'c']).union(new Set(['b', 'c', 'd'])),
  new Set(['a', 'b', 'c', 'd'])
);
assert.deepEqual(
  new Set(['a', 'b', 'c']).intersection(new Set(['b', 'c', 'd'])),
  new Set(['b', 'c'])
);
assert.deepEqual(
  new Set(['a', 'b']).isSubsetOf(new Set(['a', 'b', 'c'])),
  true
);
assert.deepEqual(
  new Set(['a', 'b', 'c']).isSupersetOf(new Set(['a', 'b'])),
  true
);

Улучшения RegExp
RegExp.escape(text) позволяет вставить текст в RegExp и быть уверенным, что вставленный текст не сломает RegExp

 const regExp = new RegExp(
    `(?<!“)${RegExp.escape(text)}(?!”)`,
    'gu'
  );

Флаги теперь можно применять не ко всему RegExp, а к отдельным группам

 /^x(?i:HELLO)x$/.test('xHELLOx') // true

Можно использовать одинаковые имена для групп

const RE = /(?<chars>a+)|(?<chars>b+)/v;

Promise.try
Promise.try немного упрощает создание промиса с синхронными функциями

 return Promise.try(() => {
    const value = syncFuncMightThrow();
    return asyncFunc(value);
  });

Если функция syncFuncMightThrow бросит исключение, то Promise.try вернет реджектнутый промис.

Работа с 16-битными числами
По дефолту числа в JS представлены 64-битными числами с плавающей точкой. Но есть кейсы, когда необходимо вести все вычисления в 16 или 32-битных числах. В JS добавили разные хелперы для работы с такими числами, например Math.f16round делает округление в пространстве 16-битных чисел

console.log(Math.f16round(2**16)) // Infinity

console.log(2**16) //  65536

https://2ality.com/2025/06/ecmascript-2025.html

#development #javascript #ecmascript #releaseNotes

По какому поводу стоит писать в личку:

1. любые вопросы про frontend.vision
2. запросить разъяснения интересующей темы (это будет пост в канале)
3. попросить консультацию
4. что-то рандомное, не являющееся рекламой и не входящее в категории выше

effector 23.4.0

Babel/SWC plugin

- Добавлена поддержка hmr. Большое спасибо @movpushmov и @kireevmp за реализацию 🔥
- Добавлена поддержка опции transformLegacyDomainMethods для выключения трансформации методов доменов
- Добавлена опция forceScope чтобы проставлять forceScope в реакт-хуки автоматически
- Пакет effector-action добавлен в дефолтные factories
- Добавлена поддержка tagged template фабрик (например как patronum format)

Типизация

- Исправлен ряд проблем в типах split. Огромное спасибо @den_churbanov за то что улучшил эти необъятные типы 💪
- Добавлена пропущенная опция skipVoid для domain.createStore

Рантайм

- Улучшена поддержка поля name в sample, теперь его можно задавать в любых сэмплах и видеть имя связи в patronum debug с опцией trace

Релиз получил название Atlas