​Кажется, время постов.

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

Естественно, основной наш инструмент — резюме, CV. Но речь сегодня не о нём. Часто вас могут попросить дать ссылку на ваш GitHub, или другие хранилища, где можно посмотреть, что вы делаете. Не секрет, что если на гитхабе создать репозиторий с названием, совпадающим с вашим юзернеймом, то при просмотре профиля люди смогут увидеть красиво оформленный README.md из этого репо. Если вы (как я) не понимаете, как сделать его читаемым и интересным, либо же просто не хотите запариваться — то для вас хорошие новости. Да-да, для всего есть инструмент. И я нашёл один!

Даю ссылку на бесплатный конструктор, который позволит вам быстро и без напрягов создать красивый README для вашего профиля на гитхабе. Всё максимально просто, понятно, и на выходе — красивый результат, где всё разложено по полочкам. На мой вкус, правда, многовато смайликов, но ничто не помешает вам отредактировать готовый файл по вашим предпочтениям)

Ссылка: https://www.profileme.dev/

Хороший день сегодня. Ведь именно сегодня Microsoft прекратила поддержку IE11.

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

Всем привет!
Вчера был День знаний, с чем и поздравляю всех, к кому это относится. А ещё вчера был запущен подкаст Console.dialog, к которому я присоединился в качестве ведущего!

Первый выпуск, конечно же, о входе в IT. В нём мы поговорили с моим другом Женей, который самостоятельно выучил основы фронтенда и нашёл свою первую работу. Получилось очень интересно, всем рекомендую послушать, особенно если вы планируете начинать свой путь во фронтенд.

Послушать можно на Яндекс.Музыке, Apple Podcasts, Spotify и YouTube. Приятного прослушивания!

https://www.youtube.com/watch?v=QHFfHcmsbOg
https://open.spotify.com/show/07WreoVi3aGBMkunTxT92S
https://music.yandex.ru/album/23377479/track/106933867
https://shorturl.at/imoX1 (Apple Podcasts)

#console_dialog

Preact представил Сигналы - https://preactjs.com/blog/introducing-signals/

Если вы уже успели потрогать SolidJS, то вам это покажется знакомым. Однако, до сих пор Preact старались делать что-то досконально копирующее React, но чуть лучше, легче и быстрее. Теперь же мы видим что-то большее.

Всё это выглядит как React без лишнего головняка, убивающий все эти проблемы ререндеринга, мемоизацию и тд. А ещё всё это очень похоже на Vue3, а с некоторых пор я очень люблю Vue3.

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

Кстати, версию для React команда Preact тоже сделали. Революция ли? Пишите ваше мнение в комментариях.

Прошло две недели, а значит настало время для второго выпуска подкаста!
В гостях — Искандер Накипов из мира data science и ML, с которым мы поговорили про образование в сфере IT. Нужно ли оно, "пускают" ли без него, и что оно вам даёт — все ответы в этом выпуске. Слушайте и распространяйте!

#console_dialog

https://www.youtube.com/watch?v=3FUGQ-n6fLw
Apple podcasts: https://podcasts.apple.com/us/podcast/console-dialog/id1642880193
Яндекс музыка: https://music.yandex.ru/album/23377479
Castbox: https://castbox.fm/channel/id5068349?utm_campaign=ex_share_ch&utm_medium=exlink&country=ru
Spotify: https://open.spotify.com/show/07WreoVi3aGBMkunTxT92S
Pocket casts: https://pca.st/sb8ualpb
RadioPublic: https://radiopublic.com/consoledialog-WD1PAE
Google Podcasts: https://podcasts.google.com/feed/aHR0cHM6Ly9hbmNob3IuZm0vcy9iM2YwYWE0Yy9wb2RjYXN0L3Jzcw

И снова две недели, и снова выпуск подкаста #console.dialog.
В гостях Арсений Скурт, который делится своим опытом прохождения собеседований. Лично я узнал много полезного для себя из этого разговора, так что если вы опасаетесь собеседований - рекомендую послушать.
Ставьте лайки и пишите комментарии, здесь и на платформах.

Все ссылки теперь можно найти здесь: https://consoledialog.mave.digital/ep-3
https://youtu.be/82KEZIfnCTM

#console_dialog

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

Переходите по ссылке, чтобы выбрать удобную платформу, а также ставьте лайки и пишите комментарии!
https://consoledialog.mave.digital/ep-4

https://youtu.be/RywurDg7IG0

#console_dialog

В пятом выпуске подкаста поговорил с Валентином Удальцовым — возможно, вы его знаете по каналу https://t.iss.one/phpyh. А для меня он экс-коллега и тимлид команды бэкенд-разработки.
С ним мы обсудили, как принимают решения в IT: и технические, и управленческие. Валентин поделился опытом и рассказал пару историй, которые имели место в его карьере.

Переходите по ссылке, чтобы выбрать удобную платформу, а также ставьте лайки и пишите комментарии!
https://consoledialog.mave.digital/ep-5

https://youtu.be/D_8gwbIIgiI

#console_dialog

Чуть не забыл про новый выпуск подкаста!
В гостях - Денис, с которым мы говорили про фронт в финтехе, да и о финтехе в целом. Милости прошу!
https://consoledialog.mave.digital/ep-6

https://youtu.be/M3jMaOoZgRo

#console_dialog

На прошлой неделе, естественно, вышел 7-й эпизод подкаста #console_dialog.
Но я решил не публиковать информацию сюда. Мы создали отдельный телеграм-канал подкаста, где будут все анонсы, обсуждения и ещё какая-нибудь интересная инфа.

Всех заинтересованных прошу сюда - https://t.iss.one/consoledialog

Внезапно врываюсь с рубрикой TIL (today I learned).

Надеюсь, все знают про классы и Proxy в JS. И как бы с ними всё понятно, первое многие применяют довольно часто, а второе лично мне не доводилось трогать часто и подробно. Однако, сегодня я выяснил интересную (и, возможно, для кого-то очевидную) вещь: их можно очень интересно смешать.

Естественно, речь не о том, чтобы создать экземпляр класса и на него навесить proxy. Речь о том, чтобы возвращать proxy из конструктора!

Да, так можно. Да, будет работать. И наследование будет работать. И даже если в классе-наследнике будет свой конструктор - тоже будет работать. И будет перехватывать обращения ко всем свойствам и методам класса, изнутри и снаружи. И даже тайпскрипт разрешит вам это сделать: интерфейсы-то совпадают.

Что это позволяет делать? Ну, на самом деле, дофига всего. Самое банальное - геттеры и сеттеры без геттеров и сеттеров. Но вообще, использование ограничено только вашей фантазией.

В конце хотел написать, что каждый день что-то новое, но вспомнил, что не писал сюда уже почти год :) Так что просто порадуюсь очередной находке. Что думаете об этом?

UPD: Carbon поломал переносы строк в коде, но, думаю, смысл понятен :)

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

В последнее время я часто работаю с Vuex ORM. Можно долго рассуждать о том, какие минусы и плюсы есть у библиотеки, или у концепции ORM в целом, но факт очевиден: всё это есть, и всё это используют люди. У Vuex ORM 12К загрузок в неделю: не то чтобы сильно впечатляющий показатель, но всё же.

Что меня расстраивало, так это то, что для других фреймворков и библиотек — в частности, для React — ничего подобного не было. Я решил попробовать написать что-то обобщённое, что можно было бы использовать с чем угодно, хоть с обычным JS-объектом. Набив шишек в попытках сделать всё с нуля, я решил обратить внимание на Vuex ORM Next. Взял его код за основу, отрефакторил всё, отвязал от Vuex и Normalizr, и вот — Rattus ORM.

Подключение состоит из двух пакетов: @rattus-orm/core + нужная вам интеграция. На сегодняшний день поддерживаются Vuex и Pinia для Vue, Redux, Mobx и Signals для React, и фреймворк-агностик версия для Local storage. В ближайших планах — Solid.js, Svelte и Angular.

Также планирую добавить асинхронщину, чтобы либу можно было использовать с запросами к API, например, или с sqlite. Первичные «болезни», насколько я могу судить, ликвидированы, поэтому я осмелился перешагнуть минорную версию — 0.1. В целом, код Vuex ORM Next достаточно стабилен, хоть давно и не обновлялся. Плюс, в процессе разработки провайдеров, я кое-чего подлатал.

Милости прошу на сайт. Буду рад контрибьютам, issues и вашим отзывам.

И снова TIL (today I learned).

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

Для этого есть очень логичный путь, который, однако, никогда раньше не приходил мне в голову: передать уникальный аргумент в конструктор. А что есть более уникального в JS, чем Symbol? Правильно, ничего (если без костылей).

Так что если вы хотите что-то запретить, можете смело делать примерно вот такое. Главное убедитесь, что ваш Symbol не торчит наружу.

Помните, как раньше, в Vue 2, чтобы добавить на лету свойство объекта нужно было использовать Vue.set, и как мы радовались, когда вышла версия 3 на Proxy и всё стало работать само?

Пытался я сегодня завести редактор Tiptap на ЧИСТЕЙШЕМ проекте Vue. В связи с этим, хочу предложить небольшой интерактив на понимание принципов работы Vue 3.

Ниже привожу код компонента с созданием редактора. При клике на кнопку "Test" мы получаем Uncaught RangeError: Applying a mismatched transaction. Я предлагаю вам подумать, почему так происходит? Сразу скажу, что дело не в HTML элементе и в не настройке редактора — этот код из документации, и там точно всё правильно. Гугление результатов не дало. Скажу лишь, что для фикса достаточно частично поменять всего одну строку.

Через какое-то время опубликую пост с объяснением.

<script setup lang="ts">
import { ref, onMounted, useTemplateRef } from "vue"
import { Editor } from "@tiptap/core"
import StarterKit from "@tiptap/starter-kit"

const elemRef = useTemplateRef('elemRef')
const editorRef = ref<Editor>()

onMounted(async () => {
  editorRef.value = new Editor({
    element: elemRef.value,
    extensions: [StarterKit],
    content: "<p>Hello World!</p>",
  })
})

const onClick = () => {
  editorRef.value.commands.insertContent("<p>Updated</p>")
}
</script>

<template>
  <div>
    <div ref="elemRef" class="element"></div>
    <button type="button" @click="onClick">Test</button>
  </div>
</template>

Ответ на этот пост — грёбаные Proxy.

Если в функцию ref передан объект (а экземпляр класса Editor, собсно, тоже объект) — Vue решает, что знает лучше нас, что нужно делать, и делает из объекта... reactive (пруф, пруф 2). Для нас это значит только одно: Vue везде вкорячит свой Proxy.

И это почему-то очень не нравится Tiptap: видимо, где-то теряется контекст, или ещё что, но у меня есть личная жизнь и я не хочу лезть насколько глубоко.

Решение задачи — всего-то поменять ref на shallowRef: Unlike ref(), the inner value of a shallow ref is stored and exposed as-is, and will not be made deeply reactive. Only the .value access is reactive.

TIL, что методы класса могут быть тайп-гардами для самого этого же класса.

Даже не знаю, что ещё тут добавишь. Довольно удобно, по-моему. Хэппи кодинг, как говорится.