ТОП - Тёма о программировани – Telegram
ТОП - Тёма о программировани
2.83K subscribers
9 photos
1 file
41 links
Канал о программировании
Реклама - @vlad_0045
Мой личный контакт - @ngArchie

Мой ютуб канал - https://www.youtube.com/@temaProg
Download Telegram
Next 13.4

Здарова, работяги!

Недавно релизнулся Next 13.4. Самое основное, что приносит нам эта версия - стабильный AppRouter, который ранее находился в бете.

Мотивация разработчиков в том, что время идёт, технологии развиваются и нексту тоже хочется расти и радовать нас новыми классными фичами, поддерживать крутые новинки реакта, но PageRouter(его мы использовали до версии 13.4) уже не позволяет это делать. Поэтому ребята подготовили новое решение AppRouter, которое с версии 13.4 становится основным выбором.

Про PageRouter я рассказывал в этом видео. Какое-то время он еще будет актуален, тк проекты обновляются не по щелчку пальцев.

В ближайшее время постараюсь релизнуть подробный разбор AppRouter)
🔥102
Магия TS

Здарова, работяги!

Вы просили - я сделал. Первое видео о TypeScript уже на канале. В нем разбираю MappedTypes мощный инструмент для генерации типов.

Youtube
ВК

Приятного просмотра!
🔥23👍42
Куда пропал?

Здарова, работяги!

Давненько не писал посты, не выкладывал видео.
И если вы думаете, что я забил, халтурил, свалил в отпуск или что-то подобное, то нет. Готовился к ШРИ.

В этом году читал 3 лекции про Реакт:
1. База;
2. Продвинутые темы;
3. Next + StateManagement.

Приятного просмотра!

P.S. возвращаюсь к постам в тг и видео на канал)
🔥78👀4🐳1🆒1
App Router

Здарова, работяги!

На канале вышло первое видео по обновленному нексту, начинаем с базовых возможностей App Router:

Ютуб

Приятного просмотра!
🔥534👍1
Callback в ref

Здарова, работяги!

Думаю, для вас не секрет, что в React доступ к DOM-элементу можно получить не только с помощью document.getElementById(и подобного), но и используя useRef. Но есть еще один способ, и в некоторых случаях он даже лучше.

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



function MyComponent() {
    const inputRef = useRef(null);

    useEffect(() => {
        inputRef.current?.focus();
    }, []);

    return (
        <div>
            {/* разные элементы */}
            <input ref={inputRef} />
            {/* разные элементы */}
        </div>
    );
}


По моему мнению, оно не самое эффективное, особенно учитывая двойные вызовы колбека useEffect в React.StrictMode(dev mode). Чтобы воспользоваться альтернативным решением, необходимо посмотреть на апи ref’а. Там мы увидим, что ref ожидает следующие значения:



RefCallback<T> | RefObject<T>


Делаем вывод, что [[ref]] принимает еще и ссылку на функцию. Собираем пример:



function MyComponent() {
    const onRender = useCallback((element) => {
        element?.focus();
    }, []);

    return (
        <div>
            {/* разные элементы */}
            <input ref={onRender} />
            {/* разные элементы */}
        </div>
    );
}


onRender будет вызываться при добавлении (и при удалении, если этот элемент рисуется условно).

Такой подход также решает проблему, когда вам нужно получить доступ к элементу, который условно рисуется в дочернем элементе. В этом случае использование ref с useEffect будет неэффективно.
👍62🔥341
Современная программная инженерия. ПО в эпоху эджайла и непрерывного развертывания. Дэвид Фарли

Недавно (больше месяца назад, недавно...) был на HollyJs и на стенде с книгами приобрел себе несколько книг. Одна из них была — «Современная программная инженерия. ПО в эпоху эджайла и непрерывного развертывания» Дэвида Фарли.

Ранее я уже читал книгу этого автора — «Непрерывное развертывание ПО: автоматизация процессов сборки, тестирования и внедрения новых версий программ». Именно поэтому я уже был готов к тому, что CI, TDD, trunk-based development и т. д. будут всячески превозноситься в этой книге. Так и случилось, тут без сюрпризов. Возможно, когда-то я напишу посты со своим мнением об этих подходах, но сейчас мне хочется остановиться на другом:

1. Фокус автора на важность в разработке программной инженерии. К сожалению, сейчас многие превращают разработку в рутину, просто ремесло. Но идея автора сильно бодрит, отрезвляет и помогает иначе взглянуть на то, что мы делаем каждый день. Позволяет увидеть наметки пути к улучшениям и развитию. Эта идея открывает дверь ко многим практикам, которые недоступны ремесленнику, но полезны инженеру.
2. Хороший обзор современной разработки, процессов, метрик. А самое главное — со ссылками на источники.

Советую ли я эту книгу?
Если вы закопались в рутине — точно да.
Если вы никогда не слышали про DORA-метрики, практики экспериментов, циклы обратной связи, не знаете отличия итерации от инкремента, не слышали про управление сложностью, то снова да.

НО нужно помнить, что эта книга — приятный старт, а не исчерпывающее руководство. И если вас заинтересует то, о чем рассказывает автор, и вы захотите внедрить себе что-то, то лучше почитать что-то более конкретное. Благо автор дает ссылки на другую литературу.
Одной из таких книг является «Ускоряйся! Наука DevOps. Как создавать и масштабировать высокопроизводительные цифровые организации», о ней 100% процентов будет отдельный пост, так как книга очень достойная.
🔥33👍7
Типизация ошибок

Здарова, работяги!

Скорее всего, у многих возникала проблема с типизацией ошибок. Рассмотрим кейс:

try {
// logic
} catch (error: Error) {

}

В этой ситуации ts будет ругаться:

Catch clause variable type annotation must be 'any' or 'unknown' if specified.ts(1196)

Возникает вопрос, почему any или unknown?

В ошибку может прилететь все что угодно:

throw 'hello';
throw null;
throw {};
throw undefined;
throw 123;

Поэтому единственно верным вариантом будет:


try {
// logic
} catch (error: unknown) {

}

Именно с unknown!!! Никакого any!!!

Но как тогда обработать такую ошибку?
Очень просто, написать тайпгард:


if (error instanceof Error) {
return error.message; // как пример
}

Если у вас кастомная ошибка, то нужно будет использовать другой тайпгард - type predicate, in и т.д.
🔥66👍27🆒72💅2
Привет, работяги!

С последнего поста прошло много времени, много всего поменялось. Хочу поделиться с вами различными новостями и планами на каналы в «Телеграме» и YouTube, планами на выступления и прочие активности.

В ноябре 2023-го я выступал на HolyJs в Питере. Рассказывал о ререндерах в React. Видео уже доступно на канале конференции — https://youtu.be/DDN9himU5PE?si=aFGsKPTsJXGCy9si. Приятного просмотра)

В конце апреля выступил на HolyJs в Москве. Доклад был про роутеры NextJs, виды рендеринга и серверные компоненты. Записи пока нет, но скину в канал сразу, как откроют доступ.

В ближайших планах ШРИ. Будет, как всегда, летом. Готовим полностью новые лекции по React, ну или не только по React) Уже скоро скину более точную инфу.

Теперь о курсах, которые я веду на платформе learn.javanoscript.ru. Принял решение завершить преподавание в таком формате. Сейчас идёт/заканчивается набор на курс по React, TypeScript и паттернам. Это последние наборы, которые буду вести я, потом там будут другие преподаватели. Мой уход с платформы не значит, что там что-то не так, нет. Я просто решил сместить фокус на другие сферы своей жизни. Уверен, лекторы, которые будут вести после меня, тоже будут супер.

После ухода с платформы я не планирую совсем завязывать с преподаванием, оно останется в моей жизни как хобби. Теперь основными платформами будут «Телеграм» и YouTube. Уход с платформы позволит перенаправить часть освободившегося времени на них, поэтому скоро наконец будет новый контент. В ближайших планах — серия роликов по React, Next и экосистеме, контент по внутреннему устройству React и Next. Для «Телеграма» уже заготовил пару интересных постов)

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

Есть еще ряд планов, которые я пока не хочу спойлерить, оставлю небольшую интригу)
🔥100👍4710🙏2💯21
Привет, работяги!

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

Есть мысли собрать ламповый список с художественной литературой. Если интересно, то пишите в комменты)

Приятного чтения!
🔥86❤‍🔥118🫡6🥰2🐳2👨‍💻21🎄1🆒1
Здарова, работяги!

В открытый досутп опубликовали доклад с весенней HolyJs - YouTube.

А уже 24, 25, 26 июня в рамках ШРИ будет блок лекций по React.
В этом году план следующий:
1. 24 поговорим о базе Реакта. Я каждый год делаю эту лекцию с нуля, добавляю новые нюансы, улучшаю объяснения и т. д. Этот год не исключение.
2. 25 большая лекция про NextJS. Посмотрим, как построить приложения, используя этот фреймворк.
3. 26 Андрей Зубков, мой коллега, расскажет о построении классического SPA.

Все лекции, как и каждый год, будут в открытом доступе.
🔥76❤‍🔥54🏆32👍1👨‍💻1
И еще новость!
27 июня буду на Youngcon. Если тоже планируете посетить — пишите, буду рад пообщаться вживую)
(не реклама)
🔥16🆒2
Вакансия

Здарова, работяги!

Ко мне в команду открылась вакансия.

Ищем мощного разработчика (JS/TS), который будет вместе с нами развивать плеер Кинопоиска. Более подробное описание о том, что предстоит делать, и требования в самой вакансии. Если будут вопросы, пишите).
🔥41🐳3💩1
Челендж

Здарова, работяги!

Уже несколько недель, как я активно погрузился в найм новых членов команды. Раньше я всегда выступал в роли собеседующего на секциях с кодом. В этот раз роль во всем этом мероприятии новая. Раньше мне просто назначали секцию, я ее проводил, заполнял «отчет» и шел пить кофеек со спокойной совестью. Сейчас иначе, вместо секций с кодом провожу финальные секции. Но, как по мне, это не главное отличие. Самое основное изменение в том, что необходимо просматривать большое кол-во кандидатов, которые уже прошли секции с кодом, анализировать их решения и т. д. Задач много, решения разные... И вот тут я почувствовал, что во всей этой лидовской кутерьме совсем позабыл про свою рутину с задачками.

Раньше я стабильно порешивал литкод, кодварс и прочее. Решил, что пора вернуться к этому занятию. Очень символично, что сегодня начало сентября и учебного года. Пока в планах решать по задачке в день, предлагаю вам ко мне присоедениться.

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

P.S. Буду рад, если в комменты к этому посту скинете ваши любимые подборки задачек)
🔥8614👍7❤‍🔥6👏2😍1😎1
Итоги первого месяца

Привет, работяги!

В прошлом месяце я решил вернуться к решению задачек на «Литкоде». Старался решать минимум по 1 задачке в будний день.

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

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

НО! Какое-то время назад, достаточно давно, я начал бороться именно с пагубным перфекционизмом, не путать со здоровым перфекционизмом. Поэтому сейчас смотрю на челендж иначе. Главное не сделать всё идеально с первого раза, куда важнее после пропуска сделать выводы и снова вернуться на дистанцию и продолжать. Может звучать очень очевидно и слишком просто, но в этом и кроется опасность. Слишком легко недооценить идею.

Мне эта мысль сильно помогает делать что-то на длительной дистанции. Не опускать руки, если что-то не получилось. Дисциплина как мышца, ее тоже нужно тренировать, поэтому начинайте с малого, не бойтесь пропусков и старайтесь каждый следующий раз делать лучше. А я начинаю следующий месяц решения задачек)

Скидывайте свои результаты за месяц в комменты. Чтобы добавить интереса, предлагаю среди самых стойких решателей задач разыграть символический приз — созвон 1-1, на котором можем пообщаться на интересующие вас темы (в рамках программирования, конечно), поревьюить код, поговорить о книгах, развитии и карьере, мб смогу помочь вам каким-то советом. !Важно! Это не консультация, их я, как и раньше, проводить не планирую.

В следующем месяце поступим аналогично)

Если заинтересовала мысль о дисциплине и хочется глубже покопать в эту тему, то вот отличная книга.
🔥50👍18
Enums - зло? Или мы просто не поняли замысел творца?

Вокруг enums в TS ходит большое кол-во споров. Кто-то их любит, кто-то ненавидит. Я был и в том, и в другом лагере. Давайте посмотрим на их плюсы и минусы(по моему мнению), чтобы вам было проще вывести для себя ответ. ВАЖНО!!! Я не призываю отказываться от enums, просто призывая подумать.

Прежде чем начнем, накидаю немного теории.
Если по-простому, то enum - набор именованных констант, который можно использовать как для хранения значений, так и для типизации.
Бывают числовыми(дефолтно), строковыми и смешанными. Выглядит это так:

enum BookGenre {
horror = 1,
comedy = 'comedy'
}


:
Строковые enums удобны.
Вы сразу и константы сгруппировали по смыслу, и тип сделали. Лаконично и наглядно.

enum BookGenre {
horror = 'horror',
comedy = 'comedy'
}
function logGenre(genre: BookGenre) {}
logGenre(BookGenre.comedy)


:
Нелогичное поведение при проверке значений.
В данном примере значение у элемента энама идентично строке, но в TS будет ошибка. Где-то это +, мол, мы явно говорим использовать только конкертный enum, где-то минус, бэкенд присылает вам просто строку, и тут вам будет недостаточно просто проверить значение, нужно писать тайпгард.

logGenre(BookGenre.comedy)
logGenre('comedy') // error


Реверсивность.
Числовые элементы enum(в значении число) являются реверсивными: по ключу получаем значение, по значению ключ. Выглядит это так:

enum BookGenre {
horror,
comedy
}
console.log(BookGenre.comedy) // 1
console.log(BookGenre[1]) // comedy

Иногда это может вам пригодиться. Но как поведет себя вот такой энам?

enum BookGenre {
horror = 1,
comedy = 1
}
console.log(BookGenre[1]) // ?

Ответить на этот вопрос мы можем, если посмотрим в результат компиляции этого enum:

var BookGenre;
(function (BookGenre) {
BookGenre[BookGenre["horror"] = 1] = "horror";
BookGenre[BookGenre["comedy"] = 1] = "comedy";
})(BookGenre || (BookGenre = {}));

После этого ответ становится очевидным, но поведение, по моему мнению, странное. Сделали бы и на уникальность числовых значений проверки…
А как вам такой пример?

console.log(BookGenre[25])

Логично было бы увидеть тут ошибку, т.к. у нас нет элемента со значением 25, но нет, ошибки от TS мы не увидим.

:
Лишний код.
Часто enums используют просто для типизации. Но не все задумываются, во что эти энамы компилируются. Многие уже привыкли, что типы в скомпилированный код не попадают… Тудуууум:

var BookGenre;
(function (BookGenre) {
BookGenre[BookGenre["horror"] = 1] = "horror";
BookGenre[BookGenre["comedy"] = 1] = "comedy";
})(BookGenre || (BookGenre = {}));

Знакомьтесь, ваш энам. И он поедет с вашим кодом к пользователю, даже если вам от него нужны только типы. И если у вас их много, то и лишнего когда у вас много.

Кто-то предложит использовать const enum. Я очень часто разрабатываю пакеты, поэтому нет, спасибо. Дока.

Они мерджатся.
Давайте взглянем на такой код:

enum BookGenre {
horror = 'horror',
comedy = 'comedy'
}
// много строк между
enum BookGenre {
drama = 'drama'
}

В нем нет ошибки, он рабочий. Скомпилируется он в:

var BookGenre;
(function (BookGenre) {
BookGenre["horror"] = "horror";
BookGenre["comedy"] = "comedy";
})(BookGenre || (BookGenre = {}));
(function (BookGenre) {
BookGenre["drama"] = "drama";
})(BookGenre || (BookGenre = {}));

Следовательно, если у вас есть большой файлик с типами, то будьте готовы к тому, что вы случайно можете расширить какой-то другой enum. Для меня это строгий минус, т.к. поведение неявное.

Что делать если вы решили заменить часть или все ваши энамы. 🔽
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥29👍131
ТОП - Тёма о программировани
Enums - зло? Или мы просто не поняли замысел творца? Вокруг enums в TS ходит большое кол-во споров. Кто-то их любит, кто-то ненавидит. Я был и в том, и в другом лагере. Давайте посмотрим на их плюсы и минусы(по моему мнению), чтобы вам было проще вывести…
Альтернативы

Для группы констант, когда типизация не нужна:

const BookGenre = {
horror: 'horror',
comedy: 'comedy'
} as const


Если нужны только типы - юнион литералов(обожаю их, максимум пользы и минимум лишнего):

type BookGenre = 'horror' | 'comedy' // как обычный тип уйдет на компиляции


Нужны и значения, и типы:

const BookGenre = {
horror: 'horror',
comedy: 'comedy'
} as const
type BookGenre = keyof typeof BookGenre

function logGenre(genre: BookGenre) {} // тип
logGenre(BookGenre.comedy) // значение
🔥43👍12
HolyJs 2024

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

Если вы сегодня и завтра будете на Холли, то подходите, буду рад познакомиться, пообщаться, обсудить разработку)

Если у вас не получилось приехать на офлайн часть, но очень хочется заглянуть, то заходите на стрим к SeberiaCanCode. Ребята стримят прямо с конфы(доклады не стримят), задают вопросы спикерам и общаются с участниками о разработке.
20👍8🔥7
Конференции😀

Сейчас еду в поезде из Питера с HolyJs и решил поделиться с вами своими мыслями о конфах.

Что для меня конференция

1. Мотивация🔥. Я много раз говорил о том, что люблю Яндекс, Шри за возможность работать с очень мотивированными людьми(берем среднее по больнице), которые горят своим делом. Конференция это еще одно такое место. Рассказы о каких-то новых хитроумных велосипедах, героически решённых сложных задачах, общение с увлеченными инженерами очень сильно меня мотивируют и заряжают энергией(даже перекрывают недосыпы😴)
2. Расширение кругозора👨‍💻. Какие бы мы любопытные не были у нас не всегда есть возможность попробовать что-то новенькое во всех возможных кейсах, а если эта технология еще и не входит в ваш стек(потенциальный стек), то вероятность становится еще меньше. И если с новинками в вашем стеке все понятно, то с решениями за его пределами возникает резонный вопрос - зачем мне вообще про них слушать? Для меня технологии это в первую очередь реализация идей, задумок, которые могут прокачать уже ваши решения, натолкнуть на новые мысли и идеи.
3. Общение📞. Конфа это возможность пообщаться 1-1, подискутировать, обменяться опытом, идеями. Это возможность узнать, как устроено где-то еще, кроме вашей компании/проекте/коллективе, познакомиться с другим взглядом на ежедневные рутинные задачи и проблемы.

Ну и бонусный пункт — конференция это весело🥳

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

А пока обзор готовится, вы можете сделать свой обзор после конфы и рассказать своим коллегам. Подумайте, чтобы вы посоветовали глянуть, что может пригодится им в работе. Организуйте небольшую встречку с рассказом. Я уверен, что они будут вам благодарны)

А чем конференции интересны вам?
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4011🥰6👍1