Труд!

Доброе утро, работяги!

Праздник труда закончился, а результаты остались.

На канале вышел новый выпуск про Next.js. В нем мы с вами разберемся с роутингом.

Приятного просмотра - https://youtu.be/RIA5N660mr8

Расширяемся

Работяги, решил создать сообщество в вк. Посты и видео теперь будут дублироваться там.

https://vk.com/temaprogchannel

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

Всем продуктивной недели!

3 работы
#ПростоМысли

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

Несколько работ - достаточно горячая тема. Есть люди кто «За» то, чтобы иметь несколько работ, есть те, кто «против». У меня есть опыт работы в нескольких компаниях одновременно, поэтому есть желание поделиться выводами из этого опыта. Под несколькими работами я подразумеваю работу по совместительству и калым.

Пойдем четко по плюсам и минусам.

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

Минусы:
1. Замедление роста. Доп работы отнимают много времени, которое вы могли бы потратить на чтение и осознанную практику в петпроектах.

Вывод: для младших работяг рост это основное. Их нанимают с целью вырастить. Замедляя свой рост, вы уменьшаете свою ценность. Поэтому сконцентрируйтесь на росте.

Для простых работяг
Плюсы:
1. Деньги.
2. Возможно вам повезет и вы сможете на доп проекте поупражняться в проектировании.

Минусы:
1. Замедление роста в большинстве случаев.
2. От вас ждут роста знаний по вашему основному проекту. Имея несколько разных проектов сложнее хорошо разобраться в одном из них.

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

Для старших
Плюсы:
1. Деньги.

Минусы:
1. Сильное замедление карьеры. От вас уже ждут крутых сложных решений, максимальной вовлеченности, где-то уже менеджерских навыков, предложений по улучшению и развитию вашего основного сервиса. Распыляясь, вы вряд ли сможете выдавать крутые продуманные решения, из-за постоянного перемещения фокуса вы будете генерить, скорее, что-то быстрое и поверхностное, либо сильно замедляться. Чем сложнее задачи, тем больше концентрации. Для старших разработчиков это наиболее актуально.

Вывод: однозначно нет!

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

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

Наливайте кофеёк
#Анонсы

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

На выходных появилась идея записать разговорный видос. Формат для канала новый. Буду очень рад вашему фидбеку)

В пилотном выпуске проведем сравнение плодородности больших и маленьких компаний для стажера.
Ютуб
ВК
Приятного просмотра.

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

Подписывайтесь на канал, чтобы их не пропустить!

Минутка саморекламы
#Анонсы

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

Я веду курс по React и интенсив по TS на платформе https://learn.javanoscript.ru/
Сейчас проходит набор:
20.05-21.05 интенсив по TS - https://learn.javanoscript.ru/courses/typenoscript
18.05 - 26.06 курс по React(React+Next) - https://learn.javanoscript.ru/courses/react

Лекции веду я лично, все дз проверяю я лично в формате код-ревью.

Если у вас есть желание освоить новую технологию, либо закрыть пробелы, то буду рад вас видеть.

Next 13.4

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

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

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

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

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

Магия TS

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

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

Youtube
ВК

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

Куда пропал?

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

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

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

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

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

App Router

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

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

Ютуб

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

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 будет неэффективно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Приятного чтения!

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

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

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

Все лекции, как и каждый год, будут в открытом доступе.

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

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

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

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

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

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

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

Вакансия

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

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

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

Челендж

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

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

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

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

P.S. Буду рад, если в комменты к этому посту скинете ваши любимые подборки задачек)

Итоги первого месяца

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

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

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

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

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

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

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

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

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