Пост для сбора комментариев на розыгрыш.

Всем привет!

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

И так, вот результаты.

Сейчас буду отсчитывать победителя.

И так, под номером 20 у нас @AAkab11.

Так, кто-то удалил свой коммент вначале…

В общем, еще раз перепроверил. Второй победитель у нас Артем.

Он было 406, до того, как кто-то начал удалять комменты.

На будущее напишу бота, чтобы не было таких проблем.

Напишу каждому из победителей в личные сообщения.

Итак, друзья.

Делюсь новостями фронта за эту неделю, которые мне показались интересными.

Deno выпустила версию 1.31 с поддержкой package.json. Теперь работать с npm пакетами будет намного проще. Кажется, что они работают над тем, что максимально просто было мигрировать с node проектов на deno.
https://deno.com/blog/v1.31

Также наткнулся на статью про релиз Astro 2.1, там ничего особенного нету. Однако из нее я узнал про такой формат, как marcdoc от stripe. Поддержку его добавили из-за перформанса, но в целом интересно посмотреть, насколько он станет популярен.
https://astro.build/blog/astro-210/#built-in-image-support

Статья от Astro про перфоманс различных фреймворков.
https://astro.build/blog/2023-web-framework-performance-report/

Vercel поделился причиной, почему Turborepo съезжает с go на rust. Думаю вам тоже будет интересно почитать.
https://vercel.com/blog/turborepo-migration-go-rust

#devtips #news

Всем привет!

Наконец вышло новое видео. В этот раз поговорим про TypeScript.

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

В следующие 2-3 недели буду продолжать выпускать видео по TS, разберем много полезных тем, также поделюсь практическими примерами использования.

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

https://youtu.be/lnO4YX0Luso

Всем привет!

Недавно наткнулся на интересное видео от Theo и задумался, что ведь и в правду не нужно везде пихать тайпчекинг.

Он же должен быть только в одной таске в CI. По крайней мере жесткий.

Например, очень часто я раньше ставил проверку типизации на unit и e2e тесты, хотя она там и не нужна, только замедляет запуск тестов. То же самое касается и билда.

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

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

Я уже давно начал использовать отдельный конфиг для дева и для тайпчека, так как в деве, например, noUnusedLocals/noUnusedParameters - не несут никакого толка, только мешаются.

Однако после этого видео понял, что лучше для сборки и юнит/е2е тестов тоже все убрать. Оставить только ошибки в терминале/консоли для дева и отдельную typecheck таску в CI с жестким конфигом.

А что вы думаете по этому поводу? Как у вас все настроенно в проекте?

#devtips #typescript

Всем привет!

Продолжаем наш плейлист по TypeScript. В сегодняшнем видео поговорим про такую важную тему, как type guards и type assertions.

Детально разберем, что это такое, когда их использовать, какие есть встроенные type guard’ы и как превратить вашу функцию в type guard или type assertion.

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

https://youtu.be/xsyykEdOQ7E

Всем привет!

После моего последнего видео многие из вас спрашивают о комментарии ^? внутри TS кода, который показывает тип значения, находящегося строкой выше над комментарием.

Данная фича по дефолту работает в TypeScript playground на их официальном сайте. Однако если вы хотите иметь такое же поведение в VSCode - нужно скачать плагин vscode-twoslash-queries.

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

#devtips #typescript

Всем привет!

Продолжая нашу тему с TS, хочу поделится тем, почему не надо использовать опциональные параметры для колбэков.

Разберу я это на примере обертки над Array.prototype.map, так как о ней меня спрашивали под одним из моих собесов (тот, что “мидл в 19 лет”).

Что бы понять о чем я, давайте взглянем на этот кусок кода:

function map<Item, MappedItem>(
  arr: Item[],
  mapper: (item: Item, index: number, originalArray: Item[]) => MappedItem
) {
  return arr.map(mapper);
}

Собственно, вопрос стоит в том, почему параметры index и originalArray - обязательные, ведь мы не всегда их используем?

Тут давайте попробуем чуть более детально разобрать, что мы говорим такой типизацией TypeScript'у?

Мы говорим, что в колбэк mapper обязательно должны приходить 3 параметра, а не только 1.

Соответсвенно, даже если человек их не использует, никакой ошибки не будет.

map([1, 2, 3], (item) => String(item));

Остальные 2 параметра придут, но они нам в данном случае просто не нужны. Данный код будет нормально работать в браузере или любом другом runtime. Ну и правила типизации мы никак не нарушаем.

Однако если сделать index и originalArray опциональными - мы получим ошибку.

function map<Item, MappedItem>(
  arr: Item[],
  mapper: (item: Item, index?: number, originalArray?: Item[]) => MappedItem
) {
  return arr.map(mapper);
}

map([1, 2, 3], (item, index) => [item, index * 2]);
//                                ^^^^^
//                 'index' is possibly 'undefined'.

Это происходит потому, что мы хотим использовать index, однако типизация map говорит о том, что он не всегда будет передан нам в колбэк. Из-за этого у нас появляется кейс когда index - undefined.

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

Об это говорится даже в официальном HandBook.

#devtips #typescript

Наткнулся на этой неделе на статью от создателя core-js про open source.

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

И когда я глянул на их страницу - то понял, что количество спонсоров и сами спонсоры там явно такие крутые, как в других популярных проектах.

Сейчас, вроде, чуть по больше, но раньше прям вообще грустно было.

Например, тот же babel уже несколько лет почти стоит на месте, после того, как его создатель начал работать над альтернативой на rust.

Но проект, насколько я знаю, регулярно получает деньги (по этому поводу даже был срач в Твиттере как-то, мол деньги идут, а что улучшается?).

И тут интересно, почему же так происходит? Проект же и в правду важен, особенно для публичных сайтов (еком, соцсети, инфо-сайты и тд.).

Мне все-таки кажется, что спонсорство, это скорее способ пропариться в README какого-то проекта.

Например, тот же frontendmasters - я о нем вообще не знал долгое время. Встретил его я, насколько я помню, именно так.

Для купаных компаний тут думаю тоже есть аспект - во первых имидж в глазах разработчиков (“Мы поддерживаем OSS!”). Ну и думаю может какой-то пуш фичей или что-то подобное тоже может происходить.

А что вы думаете по этому поводу? Вы вообще когда-то слышали про core-js?

https://github.com/zloirock/core-js/blob/master/docs/2023-02-14-so-whats-next.md

Из интересных вещей, на которые я наткнулся на этой неделе, помимо gpt-4 - это вот этот ПР в react.

В нем наконец-то убирают warning про использование useLayoutEefect во время SSR.

В плане use case’ов тут все ясно, если тебе реально нужен замер позиции элемента при первом рендере, чтобы правильно спозиционировать какой-то элемент, то лучше вообще скрывать этот компонент на сервере.

Однако зачастую useLayoutEffect (особенно в библиотеках) используется для синхронизации ref’ов или еще каких-то действий, никак не связанных с замерами.

В итоге все просто пилили костыли по типу useIsomorphicLayoutEffect, просто чтобы не было лишних ворнингов.

В целом, думаю, что решение правильное. Однако есть момент с тем, что для новичков это может быть совсем не понятным. Но тут уже проблема того, насколько хорошая дока.

Да и так думаю, загуглить такое должно быть не сложно (ну или спросить ChatGPT).

А что думаете вы по этому поводу?

#devtips #news

Всем привет!

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

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

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

Исключение, наверное, можно сделать для топовых универов (ВШЭ, МФТИ и может еще парочку каких-то).

Из того, что слышал, преподают там намного лучше, чем в других местах. Да и статус хотяб эти университеты могут дать.

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

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

По итогу на работу устроился, в универ поступил, но за исключением 1-го раза там и не появлялся (вспомнил, что надо аттестат забрать от туда).

Касательно друзей на всю жизнь и нетворкинга, думаю все тоже сомнительно. За 4 года можно и без университета обзавестись хорошей компанией. Но спросить на эту тему не хочу, тут у всех по разному.

В общем, никаких советов тут не даю, сам своему решению пока что рад, а дальше уже время покажет.

Поделитесь в комментариях своей историей (какое образование, где учились и тд.), буду рад почитать.

Всем хорошего вечера!

Всем привет!

Вышел еще один ролик по TypeScript. В нем мы разберем, что такое unknown, never, void. И также поговорим про остальные непонятные типы (Boolean, Object, object, Record, {} и тд.).

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

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

https://youtu.be/KMsbIdTYrd4

Всем привет!

Вышло новое видео про дженерики в TypeScript. Рассмотрим, как с помощью них можно типизировать сложные кейсы в коде.

Также в конце поговорим про новый функционал, добавленный в версии 4.7.

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

https://youtu.be/-AxxfhR95oQ

Всем привет!

Даю апдейт по статусу моей библиотеки для работы c i18n, которую я вынес в отдельный пакет.

Сегодня наконец доделал типизацию для кейсов, когда у вас ключи хранятся в TS файлах. Теперь при включении опции inferParameterTypes библиотека попробует сама подхватить тип ваших {{}} параметров.

Если у нее это по какой-то причине не получится - произойдет fallback на options?: Record<string, string | number>. Если кому интересно - вот ПР.

Также была улучшена интеграция с React. useI18n теперь возвращает не инстанс I18N, а объект-обертку над инстансом. Соотвественно изменения в языке теперь также поведут обновления компонента и для данного хука (раньше было только для useTranslate).

По дальнейшим планам, докинуть в доку хорошие примеры и полный API reference. Буду рад, если покидаете проекты с хорошей документацией в README для вдохновения.

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

Ну и тесты докинуть надо, но это думаю уже мы сделаем вместе с вами)

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

Всем привет!

Сегодня общался с подписчиком, и он сообщил об одной проблеме в видео про топ 5 ошибок в rtq.

Так вот, проблема заключалась в том, что при экспорте всех экшенов из слайса return type каждого из action creator'ов был void. А при экспорте конкретных - Action.

Вот пример:


// slice.ts
export const { actions: sliceActions } = slice;
export const { someAction } = slice.actions;

// component.ts
const doSomething = () => {
someAction(); // { type: 'string', payload: string[] }
sliceActions.someAction(); // void
}


Понятное дело, что TypeScript так не работает. Да и в моем опыте ни разу такого не было. Но в чем же тогда проблема?

И тут я вспомнил, что webstorm, который использовал человек, да и в целом продукты от JetBrains не используют LSP (language server protocol).

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

Так вот, оказалось, что и в правду причина была именно в этом. После того, как проект был открыт в VS Code - все проблемы ушли.

Целью этого поста не является принижение web storm или разжигание войны между фанатами каждого из этих редакторов. Однако иногда нужно учитывать возможность подобных проблем.

Да и в целом, кажется, что LSP дал большой шаг вперед в плане развития редакторов. Когда с помощью плагина ты можешь добавить полноценную поддержку языка в любом редакторе, поддерживающим данный протокол. Думаю VS Code без него не был бы VS Code'ом.

#devtips #ide