Сова пишет…
3.16K subscribers
344 photos
37 videos
5 files
414 links
Frontend Senior Fullstack Backend Lead и прочие слова.
Изучаю самые современные технологии.
Обучаю разработчиков как стать сильнее — https://frontend.vision.

По коллаборациям и сотрудничеству пишите в сообщения канала!
Download Telegram
Parcel переезжает на Rust

https://parceljs.org/blog/v2-15-0
🤔8👍6👎3🔥3😁2
Уже несколько лет пользуюсь @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(.*)$",
"^[../]",
"^[./]"
]
}
1🔥43👍215
А вот совсем недавно обнаружил форк, который добавляет еще несколько опций поверх плагина от 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
}
1👍122
Много лет пользовался 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
1🔥33👍142
Обнаружил себя регулярно использующим вот такой паттерн для группировки логов.

Главная проблема подхода — забывчивость. Очень легко выйти из цикла и забыть вызвать .groupEnd(), тогда логи начинают уходить лесенкой вправо.
🔥7👍5
А оказывается, Node.js 24 поддерживает синтаксис using

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

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

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

https://github.com/tc39/proposal-explicit-resource-management
🔥35💅6441
Плавный переезд 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"
}
}
}
🔥12👍43
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
🔥3342👍1
Please open Telegram to view this post
VIEW IN TELEGRAM
33💅3🔥1
По какому поводу стоит писать в личку:

1. любые вопросы про frontend.vision
2. запросить разъяснения интересующей темы (это будет пост в канале)
3. попросить консультацию
4. что-то рандомное, не являющееся рекламой и не входящее в категории выше
👍12😁1
Forwarded from Effector news (Дима Zerꙫbias)
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
1🔥1062👎2😐1
Релиз получил название Atlas
2🔥1812😐5🗿2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Вроде неплохая библиотека частиц… но так лагает
🤩15😁116😢3👍2
Устанавливаю Zen браузер
Далее Zed редактор
И не забываем про Zod валидатор

Какие еще тулзы Z* остались?
😁31👎8🔥63😡3
😁24💅17😐11🔥9🗿6
Итак, представим.
Вы делаете продукт, он приносит деньги в начале, затем, вы много занимаетесь работой, жизнью, потом поиском работы и в процессе устаете от ответственности, которую сами же на себя возложили.
Выгораете

Что дальше? Как продолжать?
😢2051
Expert Generalists

Статья в блоге Мартина Фаулера про T-shaped специалистов. Точнее, все текущие термины (T-shape, П-shape, и другие) плохо подходят, поэтому в статье вводится термин Expert-Generalist, который означает, что человек одновременно является и экспертом (в противовес generalist) и использует свою экспертизу во многих областях (в противовес эксперту в одной области).

В данном случае имеется в виду, что человек является экспертом в фундаментальных понятиях, которые позволяют ему быть успешным в областях, которые построены на этих понятиях. Классический пример из IT, это когда человек имеет опыт написания ПО на 3-4 языка программирования и ему после этого уже не так важно, на каком именно другом языке писать код, пока этот язык следует общим парадигмам (основан на том же фундаменте). Условно, человек, который писал на JS, PHP, JAVA, C++ с легкостью может войти в Go, Rust, Kotlin. Но, вероятно, столкнется с некоторыми проблемами при входе в Haskell. Но, скорее всего, сможет это сделать в короткие сроки.

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

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

В чем сила таких специалистов:

Как правило, такие люди быстро обучаются - они изучат новый инструментарий, если он решает текущую задачу. Как следствие, они создадут более лучшее решение за счет подходящих инструментариев.

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

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

Ключевые качества экспертов-генералистов:
- Любознательность
- Умение сотрудничать
- Фокус на клиенте (бизнесовая направленность)
- Ставка на фундаментальные знания
- Широта знаний
- Способность понимать позицию смежных доменов (например, понимать проблемы SRE или DevOps)

Многие эксперты-генералисты вырастают в технических лидеров

Встает закономерны вопрос: "где брать таких специалистов?". Текущий найм устроен так, что мы скорее наймем ультра-эксперта в технологии, чем наймем человека, который любознателен и умеет погружаться в новые домены. В статье предлагается подход из двух решений:
- Перестать смотреть только на узкие хард-скилы. Вместо этого следует проверять человека на обучаемость, любознательность, создание условий для совместной работы
- Проводить внутренние тренинги и воркшопы, цель которых - погрузить специалистов в смежные области. В Thoughtworks есть 3 воркшопа, в которых специалисты делают решения из смежных областей. В рамках воркшопа они реализуют простые прототипы kafka, kubernetes, delta lake (штука для работы с данными). Создав прототип, люди начинают понимать базовые принципы, на которых основаны эти системы и начинают видеть рабочие ситуации с другой стороны

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

Для каждой ключевой компетенции в команде нужен 1-2 специалиста.

---

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



https://martinfowler.com/articles/expert-generalist.html

#managment #tshape #martinFowler
👍63👎1🤔11
Оказывается я эксперт-генералист
🙈9👎7👍3😁3🌚1
Жиза Армении
😁47💯6
Forwarded from Охуевительно
16👎3👍2🎅2
Forwarded from Effector news (Yan👀 Lobaty)
Всем привет!

@movpushmov осенью выступает на HolyJS с докладом «Почему вам (скорее всего) нужен эффектор». Поговорим о том, почему во фронтенде всё сложнее управлять состоянием и какие трудности это создаёт.

Покажет, чем Effector отличается от других инструментов и как он помогает проще решать даже запутанные задачи. Будем рады видеть вас на докладе!
🔥23😁179👎63