Вакансия

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

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

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

Работа в Яндексе

Вакансия «Разработчик в команду плеера Кинопоиска» в Яндексе — работа в компании Яндекс для IT-специалистов

Плеер — одна из наших ключевых технологий. От неё прямо зависит развитие всего Кинопоиска. У нас много задач, и одна из основных — создать универсальный плеер для множества платформ. Откликайтесь, если отлично знаете JS и TS и умеете решать проблемы производительности.

Материалы со ШРИ 2024

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

Что-то затянул я с материалами со ШРИ — исправляюсь.

Лекция 1 - базовый реакт
- Видео
- Преза
- Код

Лекция 2 - next.js
- Видео
- Преза
- Код

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

YouTube

Реакт. Построение приложения (Часть 1) — ШРИ 2024

В предыдущих сезонах «ШРИ» мы уже подробно рассматривали сам React. Теперь пришло время детально поговорить о создании приложения с использованием этой библиотеки. В серии лекций мы подробно изучим экосистему React, рассмотрим различные архитектурные подходы…

И еще новость!
27 июня буду на Youngcon. Если тоже планируете посетить — пишите, буду рад пообщаться вживую)
(не реклама)

Young Con

Фест для тех, кто хочет начать карьеру в IT. Онлайн и офлайн, 30 спикеров, технологии и команды Яндекса, хедлайнеры Сергей Орлов, ХЛЕБ и The Hatters

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

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

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

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

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

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

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

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

Есть еще ряд планов, которые я пока не хочу спойлерить, оставлю небольшую интригу)

YouTube

Тёма Сенюков — Опасны ли перерендеры в React и как их избежать?

Ближайшая конференция — HolyJS 2024 Autumn, 7 ноября (online), 14–15 ноября (Санкт-Петербург + трансляция). Подробности и билеты: https://jrg.su/K18Cxd — — Многие в сообществе очень боятся перерендеров в React. Вместе со спикером пробуем разобраться, что…

Типизация ошибок

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

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

```

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 и т.д.

Современная программная инженерия. ПО в эпоху эджайла и непрерывного развертывания. Дэвид Фарли

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

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

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

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

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

Callback в ref

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

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

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

```

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

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

return (
        

```

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

```

RefCallback | RefObject

```

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

```

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

return (
        

```

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

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

App Router

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

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

Ютуб

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

YouTube

Next.AppRouter

В этом выпуске мы разберемся с новым роутингом NextJs. --- Мой телеграмм канал - https://t.me/temaProg Сообщество в vk - https://vk.com/public220265769

Куда пропал?

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

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

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

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

P.S. возвращаюсь к постам в тг и видео на канал)

YouTube

Реакт база (Тёма Сенюков)

Магия TS

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

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

Youtube
ВК

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

YouTube

TypeScript.MappedTypes

В этом выпуске мы разберемся с MappedTypes. --- Мой телеграмм канал - https://t.me/temaProg Сообщество в vk - https://vk.com/public220265769