Всем привет.

Сейчас будет не-собес по фронтенд разработке на React. Присоединяйтесь
PS. На 2 следующие недели не-собесы уже будут совсем далеко не по Frontend-у 😏

https://www.twitch.tv/izede

В гостях в супер коротком формате.
Буду крайне предвзят и накидывать кучу субъективщины
Не знаю что можно за 15 мин рассказать по такой теме, но попытаюсь :D
(специально максимально холливарная тема и подача, все ради актива)

Сейчас будет не-собес по GameDev разработке на Unity. Присоединяйтесь
Будет что-то новое

https://www.twitch.tv/izede

А вот и причина, почему стримы пока отложены.
Готовлюсь к данному докладу.
Самой трансляции на конференции не будет ((
Но обещают что через 2-3 недели видео выложат на ютубе

PS. Я помню про 2 заказа висящих на мне
- с меня доклад по v8 (тема ответственная, поэтому хочу подготовиться)
- с меня... flappy bird на 1C (чтобы это ни было....)

Всем привет, какое-то время мы не виделись, но у меня для вас достаточно новостей:
1) скоро выложу доклад с UFADEVCONF
2) сейчас будет предновогодний стрим с SIBERIA CAN CODE
3) на новогодних праздниках будет серия стримов на разные темы

С минуты на минуту начнется совместный контент с Siberiacancode. Где мы проревьювим его код на Vue и поговорим о различных путях решений проблем во фронтенде.
https://youtube.com/live/_z9ZEoluOFQ

твич https://www.twitch.tv/siberiacancode

Поделюсь небольшой радостью
Мой доклад прошел на Holy.js начинаем к нему готовиться.

ПС. в комменты кинул видео с прошлого доклада на UfaDevConf для тех кто еще не видел

И еще раз уж начал о новостях. Вчера поучаствовал в новом для себя деле.
Участвовал в роли спикера на съемках курса по Vue.js
И это прям... супер тяжело :D
почти 6 часов записывали буквально 5 небольших уроков.
Если честно, вышло прям совсем плохо- у меня. Но я и шел туда с целью получить этот болзненный опыт и поднять кач-во контента.
Хотя вряд ли я смогу перед видосами или стримами пол часа делать мейкап (да гриммировали прям по жесткому :D)

Подготовка этого курса как текстовой версии так и видео съела прилично нервов и времени.
Зато узнал много нового и, думаю, смогу в скором времени реализовать его и для вас.

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

У меня дико неоднозначные ощущения от TS. Когда он только вышел, то вызывал эйфорию, так как обещалось очень многое...
Но годы идут и уже четкое понимание: этот язык обречен навечно остаться сырым.

На TS взвалили непосильную задачу: решить проблемы с типизацией TS для повышения DX.
А у JS хватает своих приколов: неопределённый тип у this. Почти что угодно может стать чем угодно. Расширение прототипов и тд…

Поэтому у TS крайне сложная модель системы типов которая то и дело дает сбои.

Сегодня я бы подсветил проблему у типа void. Что же он означает?
Что функция ничего не возвращает? Мммм не совсем. Это значит, что результат функции должен игнорироваться.
Те результат функции не должен ни на что влиять.

Делаем пару простых пассов с типами:

function foo(test: boolean): void {
  if (test) {
    // можем делать пустой возврат
    return
  }
  // можем явно возвращать undefined
  return undefined
}

function bar(test: boolean): void {
  if (test) {
    // (ОШИБКА!) другие falsy значения не прокатят
    return false
  }
  // (ОШИБКА!) другие falsy значения не прокатят
  return null
}

Пока вроде все хорошо. Но значит ли что void подобен undefined?
Продолжаем следить за руками

function baz(test: number): void {
  if (test === 0) {
    // результатом функции которая возвращает void может быть вызов функции возвращающий void
    return (function(): void {})()
  } else if (test === 1) {
    // результатом функции которая возвращает void может быть вызов функции возвращающий undefined
    return (function(): undefined {})()
  } else if (test === 2) {
    // (ОШИБКА!) а вот другие функции не пустит
    return (function(): number { return 5 })()
  }
}

Все еще никаких странностей. Но что будет если мы будем принимать ее в качестве аргумента

function qux(cb: () => void) {
    return cb()
}

// все хорошо
qux(function(): void {})

// и все еще все хорошо
qux(function(): undefined {})

// стоп что? Ошибки нет
qux(function(): number { return 5 })

Вот тут уже начинаются странности. И тут уже начинаются расхождения void с undefined. Те мы можем передать как аргумент функции которые возвращают что угодно (да даже never)

// все окей, вызывай функцию
qux(function(): never { throw 5 })

Что же это значит? Да то что любой тип может расширять void? Да нет

type isVoid<X> = X extends void ? true : false

type test1 = isVoid<undefined>
//   ^? true
type test2 = isVoid<null>
//   ^? false
type test3 = isVoid<never>
//   ^? never

Вроде не расширяется. Возвращаемся к нашим функциям и смотрим как расширяются void функции

type isVoidFunction<X> = X extends () => void ? true : false

type test4 = isVoidFunction<() => undefined>
//   ^? true

type test5 = isVoidFunction<() => null>
//   ^? true

type test6 = isVoidFunction<() => never>
//   ^? true

Вот оно как... Но это лишь подводка к главному примеру: void и сложение типов. void по своей сути говорит, что "игнорируй возвращаемое событие". Но если мы его смешиваем с другим значением, то TS закрывает руки и говорит "ну делай что хочешь"

const some = (cb: () => (void | number)) => {
    const value = cb() // void | number

  // отсекаем void
    if (value) {
        value
        //^? number
    }
}

// ожидаем функцию которой все равно что вернет (например для мемоизации)
const example = (cb: () => void) => {
    return cb
}

// и ломаем рантайм к чертям, ибо TS пофиг
// он считает что () => 'hello' это расширение для () => void
// а вот JS пойдет по пути number 
// так как 'hello' пройдет проверку на if (value)
some(example(() => 'hello'))

Вам кажется что тут пассы такие синтетические? Далеко ходить не нужно. union-ы с void вполне используются в коде React-а для useEffect

type Arg = Parameters<typeof useEffect>[0]
//    ^? () => void | Destructor

// Нет проблем. вот вам async коллбек для useEffect
// Конечно он не будет работать как надо, но TS доволен
useEffect(example(async () => {}), [])

Так проблема имеется. Но как ее решить? Может использовать undefined вместо явного void? Тоже не выход,
- так как функции () => void не являются расширениями к () => undefined
- так еще и всегда придется четко прописывать типы

const someFixed = (cb: () => (undefined | number)) => {}
someFixed(() => undefined) // все окей
someFixed(() => {}) // ERROR! void несовместим с undefined

Мне пока не пришло в голову как можно красиво это обойти, да и у команды React видимо тоже. И нет, мы не первые сделали это открытие. Есть вот такой пропозал в TS.

В нем данная тема рассматривается достаточно подробно. Кто осилил "лонгрид" спасибо. Буду рад услышать чужие мысли. Ну и спасибо тем, кто подталкивал меня к верным рассуждениям в моем импульсе(отдельное спасибо @cevek) :D

Для тех кто хочет поиграться: TS плейграунд куда я записал все примеры.

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

Ладно, таких тонкостей о появлении React я не знал 😀

Появление React ребята из Facebook часто объясняют примерно вот так:

В далеком 2013 году в Facebook Chat часто появлялись фантомные сообщения: уведомление приходило, иконка загоралась, а самого сообщения не было.

Это было вызвано ужасным императивным кодом, а чтобы это починить и был придуман React.

У меня всегда были вопросы к этому объяснению. А вчера Adam Wolff причастный к разработке добавил деталей:

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

https://twitter.com/dmwlff/status/1762885255030259854?s=20

Немного расскажу про обновление формата данного канала.
Если кратко: тут будут активно выходить новости.
Я часто их отправляю в различные тематические чаты и ко мне разумно прилетело требование: "а почему у тебя контент размазывается между сообществами, когда у тебя на канале тишина".
Подумал, что пора это исправлять.
Теперь вы тут сможете наблюдать интересные новости для меня из области разработки. Интересные для меня технические особенности с которыми пришлось столкнуться.

Надеюсь, что интересно будет всем

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

Что я заметил (сам дизайн разбирать не буду):
1) Отношение между Current / LTS кнопками загрузки
- раньше было на главном экране только 2 равнозначные кнопки: скачать LTS / скачать Current
- теперь кнопка лишь у LTS версии, а вот "Current" уехала скромненько в ссылочку под кнопкой (я ее даже не сразу заметил)

Чем это интересно? Ну как минимум, что у ноды изначально необычное использование semver-а
по факту имеем, что четные мажоры - это stable версии
нечетные мажоры - это unstable версии (хотя, конечно, они не называют его так, но он по сути им и является)
те основная доля новых фичей приходится на нечетные мажоры (например сейчас это node 21), а к четному релизу они стремятся исправить как можно больше багов.
Подробнее можно почитать о релизном цикле node.js тут и тут

И вот решили большинство пользователей огородить от потенциальных проблем таким интересным способом, предлагая явно лишь LTS версии. Я с ними полностью согласен

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

3) Страница загрузок
- Больше не пугает новичков страшной таблицей в которой нужно сделать выбор, а сделали интерактивный селектор
- Добавили готовые скрипты установки для инструментов NVM / Docker etc

4) Контент
Контент между сайтами одинаковый. Но добавили несколько фишек:
- навигация справа по контенту
- ссылочка на страничку в гитхабе (мастхев, если делаете доку, то лучше всегда такое добавлять)
- в конце статьи Prev / Next ссылки

5) Документация
А вот сама документация пока осталось прежней, но она ссылается на старый сайт, так что может и его тоже обновят

PS. Что по стеку?
Можно почитать тут
Кратко: остался прежним (Next + tailwind + radix ui)
переезд на Next был пошаговым более года назад, до этого момента они сидели на metalsmith

"ЯЛЮБЛЮJS"

я уже 10+ лет углубленно погружаюсь в дебри языка JS. Но все равно каждый раз находится что-то что меня поражает.
В этот раз речь пойдет о кое чем затертом до дыр: this. И если вы думаете, что вас им не удивить, то либо вы наивны, либо мне остается вам позавидовать.

Возьмем очень простой пример:

const a = []
function b() { a.push(this) }
b.call(4)
b.call(4)

console.log(a[0] === a[1])

Что мы увидим в результате?

Дам вам некоторое время на подумать, а потом дам объяснение

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

#js

Ответ:
Как мы видим, большинство запутались с ответом. Прям ровненько 50/50 разделились
И это не просто так, ибо поведение хоть и без особого подвоха, но 1 особенность в JS есть которая может повлиять на все происходящее: это strict mode.

Да, strict mode это вам не только "больше нельзя перезаписать arguments у функций и this по-умолчанию undefined". Там список изменений прям неплохой и неплохо бы его изучить.
Что же сейчас должно зацепить наш взгляд? А вот этот пункт, который нам уже частично знаком (сделал для удобства ленивых сразу с переводом)

Если this оценивается в strict mode, то значение this не преобразуется в объект. Значение this, равное undefined или null, не преобразуется в глобальный объект, а примитивные значения не преобразуются в объекты-обертки. Значение this, переданное через вызов функции (включая вызовы с использованием Function.prototype.apply и Function.prototype.call), не преобразует переданное значение this к объекту (10.2.1.2, 20.2.3.1, 20.2.3.3).

Те мы все знаем первую часть про то что мы не берем глобальный объект по-умолчанию, а вот то что меняется поведение для других примитивов - большинство не знает. Те в strict mode у this может быть значение `4` / `"string"` / `Symbol` и тп, а вот без него там окажутся результаты выражений `"new Number(4) / new String("string") / (ага, а вот для Symbol так не прокатит, у него нет вызова через new :D)"`. Вот и получается, что не зная в каком режиме запущен код, то вы не знаете какой будет результат у выражения. Забавно, что это реально приводило к багам на проде(например, такая проблема всплывала у автора эффектора @ZeroBias). На всякий случай напомню, что в некторых случаях strict mode включается автоматически: внутри es-модулей, классов и тд

Еще занимательный момент вытекающий из пунктов выше, что 'use strict' должен быть внешний. Те
```
function a() { return this }
function b() { 'strict mode'; return this }
```
разницы никакой не несет в этом плане