Привет!
На этой неделе у микрофона Саша @bespoyasov.

Работаю в DRIVE2. Пришёл туда как фронтендер, потом писал б… twitter.com/i/web/status/1…

В основном пишу на TS, иногда на Python и C#. В разное время писал на PHP и C++, не зашло ни то, ни то 😃
Пробовал L… twitter.com/i/web/status/1…

На эту неделю хочу предложить вам вот такой план:

В понедельник поговорим об архитектуре. День начнём с наброса —… twitter.com/i/web/status/1…

Во вторник набросим ещё больше и обсудим ООП и современный фронт.

Кто они: «хорошие друзья» или «заклятые враги»?… twitter.com/i/web/status/1…

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

Начнём с нейминга, закончим пр… twitter.com/i/web/status/1…

В четверг поговорим о том, где и как набраться опыта в разработке.

Что эффективнее: университет, галеры, опен-сорс… twitter.com/i/web/status/1…

В пятницу поговорим на несколько отвлечённую тему: зачем вести технический (или вообще какой угодно) блог.

Поделим… twitter.com/i/web/status/1…

В субботу обсудим, кто и как относится к пет-проектам. Не стали ли они завышенным требованием от разработчиков.

(А… twitter.com/i/web/status/1…

В воскресенье поболтаем о том, кто и как любит отвлекаться от работы и отдыхать. Какие у кого хобби, как получается… twitter.com/i/web/status/1…

Сейчас закончу своё дейли, и начнём ^_^

Как и обещал, начнём с наброса 😃
Что такое чистая архитектура, зачем нужна, плюсы, издержки.

Если вы работали c y… twitter.com/i/web/status/1…

Начнём с того, что такое «Чистая архитектура».

Behold! pic.twitter.com/7CSVZPn02Y

В общих чертах: весь код поделен на слои.

Центральный слой (домен) — ядро приложения, максимально независим и отве… twitter.com/i/web/status/1…

Адаптеры и порты — это связь со внешним миром: БД, UI, вот это всё.

Если хочется узнать побольше, то вот пара ссыл… twitter.com/i/web/status/1…

Когда я начал постить в блоге (о фронтенде) конспекты книг и статьи об архитектуре, мне стали прилетать вопросы тип… twitter.com/i/web/status/1…

Я отчасти понимаю природу этих вопросов.

Кажется, что архитектура это что-то далёкое от фронтенда: мы же просто ф… twitter.com/i/web/status/1…

Вот нафига мне выделять «слои» в приложении, если _всё_ моё приложение — это небольшое PWA с парой кнопочек?

Есть… twitter.com/i/web/status/1…

Да чтобы просто _нарисовать_ схему приложения по такой архитектуре у меня времени уйдёт больше, чем на то, чтобы на… twitter.com/i/web/status/1…

Я предлагаю начать с того, что архитектура — это прежде всего инструмент.

У любого инструмента есть область применения и ограничения.

Например, у нас есть приложение на TS для веба и для React Native. Домен должен описывать такие сущности и правила,… twitter.com/i/web/status/1…

А в адаптерах и портах — всё, специфичное для конкретной платформы.

Я, пожалуй, не стану покупать шуруповёрт, чтобы вкрутить один саморез.

Но если саморезов 1000, то я уже подумаю:… twitter.com/i/web/status/1…

Архитектура, как и шуруповёрт, стоит ресурсов.

Поддержка сложного проекта с лапше-кодом, как и артрит, — тоже сто… twitter.com/i/web/status/1…

Свой первый вывод я сделал для себя, когда сравнил маленький и простой проект с навороченной архитектурой и большой… twitter.com/i/web/status/1…

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

Ни о какой архитектуре… twitter.com/i/web/status/1…

Тогда я только-только начинал знакомиться с хорошими практиками в разработке софта, книжки там читать начал, всё та… twitter.com/i/web/status/1…

Работать было невозможно, потому что добавишь чё-нибудь-куда-нибудь, где-нибудь-что-то-ещё отвалится.

— Так напис… twitter.com/i/web/status/1…

Не писались там тесты, как бы мы ни старались 😃
Код был написан так, что чтобы протестировать какой-то модуль, при… twitter.com/i/web/status/1…

Поддерживать этот комбайн было трудно. И не только потому, что тестировать было неудобно — было трудно даже понять,… twitter.com/i/web/status/1…

Всё было намешано в кучу.

Держать в голове даже один модуль было трудно: модуль мог и за шаблонизацию отвечать, и… twitter.com/i/web/status/1…

Как и куда направлены зависимости тоже ясно не было. (Циклические зависимости себя не заставили долго ждать 😅)

Теперь контр-пример: прототип приложения на React.

Надо быстро, поддерживать будет, скорее всего, не нужно. А есл… twitter.com/i/web/status/1…

Страдая от, кхм, ПТСР с прошлого опыта, я накрутил туда архитектуры по всем правилам: вот тебе и домен, вот тебе пр… twitter.com/i/web/status/1…

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

Ладно хоть писал сам, а т… twitter.com/i/web/status/1…

И вот мой первый тогдашний вывод:
== Издержки должны быть меньше выгоды ==

Да, вот так очевидно 😃

После того проекта я решил порефлексировать на него.

Что бы произошло, если бы всё-таки прототип пришлось перепис… twitter.com/i/web/status/1…

*Сейчас пойду поработаю, а после расскажу:

Обед! Продолжим 😃

Итак, что бы произошло, если бы всё-таки прототип пришлось переписать.

Кто-то уже мог догадаться, что я клоню к домену.

Домен — это самое главное, что есть в приложении. Та функциональ… twitter.com/i/web/status/1…

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

Да, вероятно, с изменениями, возмо… twitter.com/i/web/status/1…

Второй вывод:
=== Стоит начать с домена ===

Сперва можно и не городить оставшиеся слои, не писать адаптеры к библ… twitter.com/i/web/status/1…

Я это называю, кхм, «прагматичной архитектурой» 😃

Это как правило 20/80, только про дизайн систем.
ru.wikipedia.org/wiki/Закон_Пар…

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

Так было в запутанном проекте из первого приме… twitter.com/i/web/status/1…

Имей мы на руках функции и модули конкретных сущностей, мы бы уже знали, как они себя ведут и что с ними можно дела… twitter.com/i/web/status/1…

— Ок, допустим. Но вот я читаю книжки об архитектуре, там сплошное ООП. А я не хочу в свой проект его тащить.

Пони… twitter.com/i/web/status/1…

Ну то есть понятно, что большая часть книг написана с примерами на ОО-языках, но это не значит, что нам нельзя взят… twitter.com/i/web/status/1…

Домен можно вообще писать как хочется. Главное, чтобы код был понятным и независимым.

Я, если пишу не в ОО-стиле,… twitter.com/i/web/status/1…

Профит в том, что если проект выстрелит и начнёт быстро расти, вам будет проще накрутить мяса вокруг самого важного… twitter.com/i/web/status/1…

Чем проще и прямолинейнее домен, тем очевиднее, что в системе можно вытворять, а что нет.

А чем очевиднее правила… twitter.com/i/web/status/1…

— Ладно, это всё, конечно, круто, но ты кажется забыл, что мы тут вс же на JS пишем. Какие нафиг типы? 😃

Отсутств… twitter.com/i/web/status/1…

Ну то есть да, статичная типизация помогает проектировать, но и без неё можно справиться.

Ну там JSDoc, объекты-ст… twitter.com/i/web/status/1…

(Без интерфейсов сложно сконцентрироваться на взаимодействии между сущностями.

Труднее выделять публичное API, аб… twitter.com/i/web/status/1…

Я для прототипов тесты, например, не пишу.

Но как только становится понятно, что из прототипа надо делать продукт… twitter.com/i/web/status/1…

В целом считаю, что выделенный домен — это то самое минимальное необходимое количество ресурсов, которое стоит выде… twitter.com/i/web/status/1…

— Окей, ладно. С доменом разобрались, допустим. Но вот зачем остальные слои? Они нужны?

Короткий ответ: не всегда.… twitter.com/i/web/status/1…

И это правда, перебраться с него на какой-то другой шаблонизатор сложно. У него богатая экосистема, куча уже написа… twitter.com/i/web/status/1…

Кто-то наверняка задумывался о том, чтобы сменить стейт-менеджер.

Кто-то, наверное, даже успешно его менял на как… twitter.com/i/web/status/1…

Он обычно затрагивает много кода: хранилище, события всякие, привязка к UI.

Вместе со всем этим кодом надо и тесты… twitter.com/i/web/status/1…

Сейчас в дополнение к котикам сделаем онлайн-магазин печенек! 🍪

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

Пользо… twitter.com/i/web/status/1…

В доменный слой я бы вынес следующее.

Дальше, слой адаптеров и портов. (Да, сейчас поговорим о самом внешнем слое, я в конце покажу, почему именно так: б… twitter.com/i/web/status/1…

Задача адаптера — сделать интерфейс стороннего сервиса совместимым с тем, который _хочет наше приложение_.

Это зна… twitter.com/i/web/status/1…

Порт — спецификация, как сторонние сервис _может_ общаться с нашим приложением, или как наше приложение _хочет_, чт… twitter.com/i/web/status/1…

Это всё был внешний слой.

Прикладной слой (между доменом и портами/адаптерами) — описывает сценарии, конкретно это… twitter.com/i/web/status/1…

Тогда прикладной слой магазина будет содержать:

При этом ту часть, например, оплаты, которая использует внешний сервис (допустим, PayPal), мы вынесем в адаптер.… twitter.com/i/web/status/1…

С адаптером для стейт-менеджера переезд попроще 🙂

Слой адаптеров — это барьер, который говорит, где заканчивается… twitter.com/i/web/status/1…

Адаптеры и порты делят внешний мир от нашего приложения как мембрана клетки отделяет её от окружающей среды.

И вс… twitter.com/i/web/status/1…

Адаптеры как бы ограничивают распространение изменений. Мы пишем такие «переходники», которые делают внешний мир бо… twitter.com/i/web/status/1…

Из-за этого и API _приложения_ меняется редко. Адаптеры же можно написать (в идеале) для любой сущности, с которой… twitter.com/i/web/status/1…

Это, кстати, ещё и ограничивает распространение ошибок 🙂

Об этом писал Ганмер в «Паттернах отказоустойчивых прило… twitter.com/i/web/status/1…

Кроме ошибок, это ещё и помогает рефакторить код.

Разделение по слоям — идеальный «шов», как называет его Физерс в… twitter.com/i/web/status/1…

Итак, к этому моменту:

...Но если это очень дорого и бессмысленно (проект точно не доживёт до момента, когда мы захотим поменять React на… twitter.com/i/web/status/1…

Хорошо, вот мы поняли, что нашему проекту на Реакте _нужна_ суровая масштабируемость, и одним выделением доменного… twitter.com/i/web/status/1…

Мы (люди) плохо умеем прогнозировать будущее. Проектирование систем — это прогнозирование будущего.

Чем больше исх… twitter.com/i/web/status/1…

(О соотношении карты и территории: ru.wikipedia.org/wiki/Соотношен…)

Что нам необходимо знать?

Чего мы хотим добиться:

Я недавно писал пост о дизайне системы с помощью слоёв и DDD:
bespoyasov.ru/blog/generatin…

Давайте используем его как п… twitter.com/i/web/status/1…

Так-с, обед закончился 😅
Ответим на вопросы после работы!

Продолжим 🙂

На какие вопросы мы ищем ответы? В первую очередь — какие перед нами стоят задачи. Потому что ответ н… twitter.com/i/web/status/1…

Кроме этого — какое решение мы посчитаем достаточным, какая требуется глубина проработки.

Если мы делаем приложени… twitter.com/i/web/status/1…

В первом случае мы можем не прорабатывать слой адаптеров так уж тщательно, потому что переиспользовать какой-то код… twitter.com/i/web/status/1…

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

Ту… twitter.com/i/web/status/1…

Невозможно проработать систему на 100%. Всегда останется что-нибудь, что можно улучшить.

Это стоит иметь в виду,… twitter.com/i/web/status/1…

При непосредственно дизайне я люблю сперва проектировать домен. Обычно я беру бумажку с ручкой и рисую квадратики с… twitter.com/i/web/status/1…

В стрелочках я указываю публичное API, возможно, абстрактно формат сообщений, которыми сущности будут обмениваться.… twitter.com/i/web/status/1…

Обычно получается нечто вроде такой диаграммы (из поста с деревьями): pic.twitter.com/o32dDa4TPH

Я не стал упарываться, покрывая веб-платформу адаптерами с ног до головы, так как был уверен, что мне это не понадо… twitter.com/i/web/status/1…

Также помогает выделить Driver (управляющие), и Driven (управляемые) адаптеры: pic.twitter.com/F4bK9UnJrZ

(На эту тему ещё раз посоветую эту статью herbertograca.com/2017/11/16/exp…)

Диаграмма помогает не писать сразу код, а сперва приметиться на бумаге — «а оно вообще поедет?».

Иногда диаграммы… twitter.com/i/web/status/1…

Архитектура — это не только возможность масштабироваться, но ещё и увеличенный порог входа. Возможно, будет нужен о… twitter.com/i/web/status/1…

7. Стараемся не плодить абстракций сверх меры.

Слои нам нужны, чтобы не смешивать зоны ответственности модулей.

То есть там конечно есть особенности, и оно не «точь в точь такое же», но кажется, будто бы идея где-то очень близко.

Кстати!

Структура папок никак не влияет на архитектуру и не отражает её 😃

То есть мы можем поделить приложение н… twitter.com/i/web/status/1…

А вообще идея разделения файлов/папок на фичи мне больше нравится, чем разделение их на те же «слои».

Кажется, что… twitter.com/i/web/status/1…

Есть и без Реакта!
Вот я писал недавно пост об архитектуре, есть репозиторий для с исходниками:
-… twitter.com/i/web/status/1…

Структура файлов в двух последних репозиториях не отражает слои, но из поведение — вполне.

Кстати, репозиторий с с… twitter.com/i/web/status/1…

Без ссылок на Гитхаб — Тяжеловато:
fuckgrechka.ru/tzlvt/

Писал в блоге, почему и как я его переписал. Там даже д… twitter.com/i/web/status/1…

За диаграмму особо не ругайте, он старая, я тогда ещё не умел рисовать нормально и стрелки в нужные стороны направлять :–/

Потом ещё DDD:
ddd.fed.wiki.org/view/welcome-v…

А дальше — книги 😃

Я в блоге делал конспекты

Спасибо всем, кто отвечал и задавал вопросы сегодня! ^_^

Ухожу спать. Завтра продолжим и подкинем в костёр несколько ООП-дровишек 😃

Доброе утро! Сегодня вторник, а значит поговорим об ООП на фронте.

Пока я заливаю в себя кофе, давайте проведём оп… twitter.com/i/web/status/1…

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

Начнём с хейта 😃

Сразу начну с того, что не каждому проекту ООП нужно.

Иногда гораздо проще написать пару функций с объектами, и н… twitter.com/i/web/status/1…

Во-вторых, насколько я вижу, ООП прочно ассоциируется с мутацией данных, а это сейчас немодно.

Я подозреваю откуд… twitter.com/i/web/status/1…

Я согласен, что иммутабельные структуры данных — это круто и надёжно. Но сам лично не считаю мутации чем-то плохим,… twitter.com/i/web/status/1…

Но беспорядочные мутации — это не проблема ООП, это проблема плохо написанного кода 😃

Запутанный код можно написат… twitter.com/i/web/status/1…

Для управления мутациями давно уже придумали много способов работы, тот же CQS:

С ним, кстати, вполне реально выстроить как 1-way, так и 2-ways data-flow, он достаточно универсален, чтобы быть удобным в обоих случаях.

Так вот, тот ООП энтерпрайз, который следовал CQS, был вполне себе понятным ¯\_(ツ)_/¯
Так что, возможно, дело не в… twitter.com/i/web/status/1…

Но опять, это не проблема самого ООП 😃

Да, среди принципов SOLID есть SRP, single responsibility principle. Он гов… twitter.com/i/web/status/1…

Может, дело просто в самой его сложности?
Ну… ООП сложный, но не сложнее настоящей™ функциональщины.

Теорию групп… twitter.com/i/web/status/1…

Хотя я даже работал на проекте, где это использовалось.

Очень оказалось полезно как раз для ООП. Проще стало пони… twitter.com/i/web/status/1…

Мне кажется, весь хейт в том, что ООП на фронте с JS просто не удобен.

Использовать его по-настоящему не получаетс… twitter.com/i/web/status/1…

Но есть TypeScript 🙂

Он всё ещё страдает от JS-райнтайма, но у него уже достаточное API, чтобы писать нормальный™… twitter.com/i/web/status/1…

Другое дело, что это опять-таки не всем проектам нужно 🙂

Парадигма программирования, как и архитектура, — это инструмент для укрощения сложности. И, как с архитектурой, нам… twitter.com/i/web/status/1…

Взять те же принципы SOLID.
ota-solid.now.sh

Мы можем (хоть с оговоркой и не все) использовать их в отрыв… twitter.com/i/web/status/1…

В коде Тяжеловато даже классов нет 😃

Я вообще считаю, что ООП — это больше не про классы, а про отношения между су… twitter.com/i/web/status/1…

В простейших случаях можно обойтись и объектом с парой функций.

Но вот то, как эти объекты будут друг с другом вза… twitter.com/i/web/status/1…

Я причём не говорю, что интерфейсы и реализации — это строго лишь ООП, нет.

Просто как их использовать для проекти… twitter.com/i/web/status/1…

— Ладно, вот простой вопрос: можно ли вообще писать в ООП-стиле фронтовый код? Не бекенд, а фронт?

Да. (Но нужен TypeScript 😃)

Есть ошибочное мнение, что фронт — типа ненастоящее программирование.

Но современный фронт сложный ¯\_(ツ)_/¯
А с… twitter.com/i/web/status/1…

Со сложностью надо как-то справляться.

У нас есть фреймворки и библиотеки, это хорошая помощь, но они решают толь… twitter.com/i/web/status/1…

И вот тут ООП может помочь:

Из всего, что я пробовал у ООП наиболее богатый инструментарий и словарь для проектирования систем ¯\_(ツ)_/¯

Крут… twitter.com/i/web/status/1…

Кстати, ООП не запрещает использовать преимущества ФП! 🙂

Мы можем продолжать использовать чистые функции, иммутаб… twitter.com/i/web/status/1…

У Марка Симанна есть отличная статья на эту тему, очень советую:
blog.ploeh.dk/2020/03/02/imp… pic.twitter.com/pAj2w117dE

Мне в целом воинствующее разделение на ООП / ФП не нравится. Для меня срачи на тему парадигмы выглядят вот так 😅 pic.twitter.com/OXPoRmEByq

Но я немного отступил от темы. Можно ли писать нормальный ООП-код на фронте?

Я недавно написал пост о том, как сов… twitter.com/i/web/status/1…

Внутри ссылаюсь на офигенную статью @hgraca
herbertograca.com/2017/11/16/exp…
там настолько круто всё разжёвано!

Я перечи… twitter.com/i/web/status/1…

Для Реакта вон люди тоже придумали стартовые шаблоны:

Но опять же, тащить огромную инфраструктуру в небольшой проект я не стану — научен горьким опытом 🙂

Сейчас я стар… twitter.com/i/web/status/1…

Обычно всё начинается с домена, внутри которого лежит пара функций да типы. Применяю S, O, I, а L и D на полшишечки… twitter.com/i/web/status/1…

(В Тяжеловато, например, я так и сделал: у меня есть пространство для манёвра с новыми инструментами, но самих инст… twitter.com/i/web/status/1…

Отследить, в какой момент пора наращивать инструментарий мне помогает ощущение «Чё-та сложна».

Иду по индукции с… twitter.com/i/web/status/1…

Мне ещё иногда кажется, проблема и преимущество JS в том, что «нам не объяснили, как на нём писать правильно».

По… twitter.com/i/web/status/1…

Так-с, ухожу работать!
Потом продолжим 🙂

Продолжим 🙂
Чем ООП полезен?

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

Под масштабирумеостью я понимаю возможность дописать, переписать, удалить какой-то модуль _без необходимости перепи… twitter.com/i/web/status/1…

Пример.

Я как-то писал пост о DI:
bespoyasov.ru/blog/di-ts-in-…

В нём был логгер. Давайте рассмотрим, как он устроен.

В типах я описываю публичный интерфейс:
github.com/bespoyasov/di-…

Интерфейс — это контракт на поведение, он говорит,… twitter.com/i/web/status/1…

Реализация интерфейса описана классом:
github.com/bespoyasov/di-…

Реализация _инкапсулирует_ в себе детали, которые в… twitter.com/i/web/status/1…

Обратим внимание, что интерфейс называется более абстрактно, чем реализация.

Нам важно сохранять инкапсуляцию и в… twitter.com/i/web/status/1…

Затем я в DI-контейнере указываю, какой именно класс реализует интерфейс `Logger`:
github.com/bespoyasov/di-…

Таким о… twitter.com/i/web/status/1…

В сущности, которой требуется логер, я указываю _интерфейс_ как зависимость:
github.com/bespoyasov/di-…

То есть мне з… twitter.com/i/web/status/1…

Это значит, что если я решу заменить консольный логер на какой-то другой, то единственное, что надо будет заменить:… twitter.com/i/web/status/1…

А чтобы протестировать модуль, который использует этот модуль как зависимость, мне надо замокать интерфейс Logger: pic.twitter.com/H0UU6LjkaZ

Этот мок я «подсуну» в регистрацию при тестировании: pic.twitter.com/wqw2Ee1Y6v

И ничего другого не поменялось!

Если мы ещё не будем забывать о LSP и OCP, то масштабировать будет ещё легче.

Теперь поговорим о том, чем ООП неудобен 🙂

Расскажите о своём опыте тоже? пробовали ли? что не понравилось?

DI, за который я сейчас топлю, когда-то был для меня непреодолимым барьером 😃

Я помню, пришёл в проект на первом А… twitter.com/i/web/status/1…

Поэтому для меня основное неудобство — это в первую очередь порог входа.

Перед тем, как затащить какой-то доп. ин… twitter.com/i/web/status/1…

Нужно постоянно лавировать между «кучей сущностей» и «дырявыми абстракциями» :–/

У меня есть подозрение, что навы… twitter.com/i/web/status/1…

А проблема с насмотренностью в том, что не весь код, который мы видим каждый день — понятный.

Мы начинаем думать,… twitter.com/i/web/status/1…

Я пока лишь могу порекомендовать читать книжки:
bespoyasov.ru/tag/books/

...и пробовать руками.

Ещё хочется пореко… twitter.com/i/web/status/1…

Дальше, не очень понятно, как это применять к нынешнему фронтенду — React, Vue, вот это всё.

Есть шаблоны:
-… twitter.com/i/web/status/1…

Сейчас уйду ещё поработать, а потом обсудим, почему строить грамотную архитектуру проще, но не обязательно с ООП.

ООП в своих принципах подразумевает деление сложного на части.

Инкапсуляция, например — размещение данных и методо… twitter.com/i/web/status/1…

Полиморфизм тоже абстрагирует от деталей, позволяя использовать один механизм для работы с разными сущностями.… twitter.com/i/web/status/1…

В принципах SOLID также заложено разделение сложного на части, а ещё — барьеры на распространение изменений:
ota-solid.vercel.app

Например, SRP и ISP требуют, чтобы модуль занимался только одной задачей.

OCP и LSP ограничивает изменения «коробо… twitter.com/i/web/status/1…

LSP и DIP обращают внимание на зависимости модулей и их направление.

Всё это — какие-то части проектирования.

У… twitter.com/i/web/status/1…

А теперь — о том, почему наследование как концепт должно умереть 😃

Наследование классов — это прямой путь к антипаттерну God-Object.

Проблема наследования в том, что будущее нельзя… twitter.com/i/web/status/1…

Нам стоит, наоборот, собирать сложное из простого — использовать композицию.

Давайте на примере воспользуемся насл… twitter.com/i/web/status/1…

Допустим, мы пишем приложение, в котором описываем живые организмы.

Что нам нужно, чтобы описать человека, использ… twitter.com/i/web/status/1…

Что нам нужно, чтобы описать человека, используя композицию интерфейсов?

Собрать те свойства и методы, которые на… twitter.com/i/web/status/1…

Ну окей, пока выглядит одинаково.

...До тех пор пока не приходит задача научить человека летать.

Пусть в нашем… twitter.com/i/web/status/1…

Животные →
Летающие животные?
Летающие приматы?
Суперчеловек?
Человек.

Нипанятна. Нам в какой-то момент придётся… twitter.com/i/web/status/1…

В композиции мы добавим дополнительные интерфейсы:

Супергерой = <...Интерфейсы человека> + LaserShooter + Flyable.

Я, кстати, сейчас не говорю об абстрактных классах. Там несколько другое поведение, и используются они иначе. Сейча… twitter.com/i/web/status/1…

Как защититься от наследования? 😅

Кстати, а накидайте, пожалуйста, случаев, когда без наследования никак не обойтись?

Я что-то пытался сейчас вспом… twitter.com/i/web/status/1…

Поговорим, как упростить тесты и найти на них время, обсудим причём тут TDD и парное программирование.

А, да! И ещ… twitter.com/i/web/status/1…

По результатам вчерашнего голосования фронтенд и ООП скорее хорошие друзья, чем заклятые враги, но большинство пред… twitter.com/i/web/status/1…

А сегодня поговорим о том, как сделать код читаемым и тестируемым ^_^

Расскажите о своих приёмах, как вы улучшаете… twitter.com/i/web/status/1…

Самое простое (и одновременно сложное 😃) — это нейминг.

Хорошие и внятные имена для переменных и функций — это оч… twitter.com/i/web/status/1…

Хорошее имя для сущности: короткое, но полное и описательное.

На Гитхабе есть классный чеклист по неймингу сущност… twitter.com/i/web/status/1…

Я люблю проверять имена всех экспортируемых сущностей на понятность со стороны пользователя.

«Если я буду импорти… twitter.com/i/web/status/1…

Например, внутри модуля пользователя функция `create` выглядит органично, не дублирует контекст, короткая, описывае… twitter.com/i/web/status/1…

Но если функцию импортировать и начать использовать, то уже не так очевидно: pic.twitter.com/BR5u7SlaNB

А вот тут — наоборот: pic.twitter.com/RvAt00Fu1X

Годный шаблон для названий можно вот тут посмотреть:
github.com/kettanaito/nam…

Шаблон A/HC/LC:
prefix? + action (A) + high context (HC) + low context? (LC)

В идеале по названию переменной долж… twitter.com/i/web/status/1…

Для булевых значений можно использовать префиксы:
should, is, has, will, did.

Для функций — первым словом лучше п… twitter.com/i/web/status/1…

Иногда (редко) от шаблона можно отойти, если двусмысленность получается исключить:

`let mounted = false` — тут сло… twitter.com/i/web/status/1…

Много о том, как делать так, чтобы было удобно читать:

Мне кажется, если он и умрёт (что вряд ли), то только в настоящем™ сложном виде.

Основная идея (об изоляции стилей… twitter.com/i/web/status/1…

Всё настраиваемое лучше сразу выносить в конфиги. Пусть даже по началу это будет объект в том же файле.

Это и чит… twitter.com/i/web/status/1…

Используйте паттерны проектирования.

Есть замечательная подборка паттернов на том же Гитхабе, очень советую посмот… twitter.com/i/web/status/1…

Как правило, большую часть наших задач уже решили за нас до нас 😃

Такие решения называются паттернами. Их польза н… twitter.com/i/web/status/1…

Паттерны удобно использовать в связке с SOLID. Некоторые из принципов прямо подразумевают какой-то из паттернов.

М… twitter.com/i/web/status/1…

Чаще рефакторите код, но без фанатизма ¯\_(ツ)_/¯

Писать код и рефакторить — это как «писать» и «редактировать статью», сложно делать одновременно.

Если кусок кода… twitter.com/i/web/status/1…

А ещё (самое сложное для меня) надо купировать перфекционизм 😅

Отрефакторить до идеала сложно, а чаще всего не нуж… twitter.com/i/web/status/1…

Чтобы рефакторить безопасно, пишите тесты.

Физерс в «Эффективной работе с легаси» писал о том, как можно рефактори… twitter.com/i/web/status/1…

Он предлагает искать швы — места, в которых можно относительно безопасно «распилить» комбайн на части.

Покрыть швы… twitter.com/i/web/status/1…

Как найти хороший шов?

Обычно шов — это место, где мы можем заменить одно поведение другим: месте соединения модул… twitter.com/i/web/status/1…

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

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

Типа, как заменить зависимость:
-… twitter.com/i/web/status/1…

Раз уж мы о книгах заговорили, то ещё «Чистый код» Мартина могу посоветовать:
bespoyasov.ru/blog/clean-cod…

Хотя и счита… twitter.com/i/web/status/1…

Ещё офигенная и практичная книга — “Debug it!” («Отдебажь это!», простите за кустарный перевод):… twitter.com/i/web/status/1…

Там даже содержание — это уже рецепт! 😃

Глава 1 — Исследовать обстановку
Глава 2 — Воспроизвести проблему
3 — Опр… twitter.com/i/web/status/1…

Внутри каждой главы есть списки действий под ситуацию. Короче, рекомендую.

От читаемости к тестированию! 🦸
Используйте TDD 🙂

TDD мне экономит кучу времени. К нему надо привыкнуть, потому что сперва приходится «вывернуть мозги», но он быстро окупается.

С ним:

Я недавно делал доклад о TDD на Frontend-crew:

• youtube.com/watch?v=1SGb-l…
• bespoyasov.ru/talks/podlodka…

Там рассказыва… twitter.com/i/web/status/1…

Как упростить тесты при работе по TDD:

С TDD можно искать пахнущий код. Код пахнет, если:

Там же я рассказываю, как помочь увидеть пользу от TDD (и тестов вообще) руководству.

Коротко: говорим только об… twitter.com/i/web/status/1…

Я ещё когда-то написал книжку с примером разработки крестиков-ноликов: bespoyasov.ru/ttt-tdd/

Там показываю, как… twitter.com/i/web/status/1…

TDD можно использовать и при работе с React тоже.

Недавно я проводил воркшоп об использовании TDD при разработке R… twitter.com/i/web/status/1…

Так-с, пора работать!
Продолжим во время обеда 😃

Продолжим!

Чем же так хорош TDD для тестируемости и читаемости?

Он сразу поставит нас в ситуацию, когда сперва п… twitter.com/i/web/status/1…

Напомню стандартный цикл разработки по TDD. В нём 3 этапа:

Когда мы пишем сперва тест, мы автоматически следим за тем, чтобы вызывать функцию было удобно.

Под этим я подраз… twitter.com/i/web/status/1…

Чем больше приходится готовить зависимостей, тем выше вероятность, что модуль делает слишком много — а это нарушение SRP и запах кода.

Когда мы проверяем, с какой причиной падает тест, он становится таким, которому можно доверять.

(Если мы видим, чт… twitter.com/i/web/status/1…

Правильные тесты сразу же закрывают написанную функциональность.

Рефакторить код становится безопасно: если мы чт… twitter.com/i/web/status/1…

А ещё TDD — это единственный способ безопасно (или даже вообще хоть как-то) отрефакторить легаси 😃

Кроме TDD тестируемость улучшит Dependency Injection.

Вместо того, чтобы мокать всё подряд, можно использовать DI… twitter.com/i/web/status/1…

DI — это не обязательно контейнеры и всё такое страшное, можно использовать кустарный DI через объект с зависимостя… twitter.com/i/web/status/1…

Сообщения о комитах — тоже часть кодовой базы.

Мне на больших проектах нравится использовать conventional commits… twitter.com/i/web/status/1…

Дублирование кода _на ранних этапах_ может показать, как всё на самом деле работает, и какие паттерны мы ещё не уви… twitter.com/i/web/status/1…

Чтобы не потерять места с копипастой, помечаю их коммент-флагом `DUPLICATE`.

После самого флага пишу, какую функци… twitter.com/i/web/status/1…

Оно немного противоречит DRY:
ru.wikipedia.org/wiki/Don’t_repeat_yourself

...но экономит время в будущем.

Проще вы… twitter.com/i/web/status/1…

Он предлагает искать швы — места, в которых можно относительно безопасно «распилить» комбайн на части.

Покрыть швы… twitter.com/i/web/status/1…

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

Представьте, где именно вы… twitter.com/i/web/status/1…

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

Типа, как заменить зависимость:
-… twitter.com/i/web/status/1…

Кстати, какие вы используете настройки для ESLint? 😃

Ещё, кстати, в TypeScript я стараюсь описывать тип-аргументы в дженериках не одной буквой, а нормальными названиями… twitter.com/i/web/status/1…

А вот старый код — действительно зло. Он отвлекает, а иногда и вводит в заблуждение.

Если я подозреваю, что код м… twitter.com/i/web/status/1…

Тогда я смогу найти удалённое по истории и восстановить.

Это потребует каких-то ресурсов, но зато код будет чище… twitter.com/i/web/status/1…

То же могу сказать и про закомментированный код. Он как бы удалён, но как бы нет.

А когда и как его использовать… twitter.com/i/web/status/1…

Дальше, чтобы код был понятнее, его должно быть как можно меньше 😃

Всё, что можно может сделать браузер, лучше отд… twitter.com/i/web/status/1…

Нужно сериализовать форму?
Используем FormData:
developer.mozilla.org/en-US/docs/Web…

Там есть конечно трудности со всякими кас… twitter.com/i/web/status/1…

Нужно сделать ленивую загрузку картинок?
Испольуем `loading="lazy"`:
developer.mozilla.org/en-US/docs/Web…

Опять же, полифилим т… twitter.com/i/web/status/1…

Ну вы поняли 😃
Кнопки — кнопками, короче.

Непонятное стороннее API лучше прятать за фасадом, чтобы намерение было выразительнее:
github.com/kamranahmedse/…

Если язык позволяет, то для выбора из нескольких вариантов используйте pattern matching:

Снова перерыв на работу 🙂
Вечером продолжим!

Продолжим!

Ещё один приём, который улучшает читаемость — CQS, command-query separation.

Запрос — функция, которая возвращает результат и не имеет сайд-эффектов.

Команда — функция, которая меняет состоя… twitter.com/i/web/status/1…

На чтение такого кода уходит меньше сил, потому что ожидания при чтении оправдываются, и мы можем строить прогнозы… twitter.com/i/web/status/1…

Ещё один приём рефакторинга, который улучшает читаемость — вынесение деталей в метод или функцию:
-… twitter.com/i/web/status/1…

В этом случае мы как бы прячем детали за названием функции.

Плюс в том, что нам не требуется больше прыгать по ра… twitter.com/i/web/status/1…

Ещё одна важная часть читаемого кода — это ошибки и стек-трейс.

За сообщениями об ошибках тоже надо следить, пото… twitter.com/i/web/status/1…

Чем чище и понятнее ошибки, тем проще дебажить код ¯\_(ツ)_/¯

Кстати, вот мы говорили про вынесение кода в функцию или метод.

Можно делать это не руками, а встроенными инструм… twitter.com/i/web/status/1…

Ну и конечно — документация!

В ней нам стоит описывать не «как оно работает», а «почему оно работает именно так».… twitter.com/i/web/status/1…

А на вопрос «как оно работает», считаю, должны отвечать тесты 🙂

Давайте теперь поговорим о том, когда можно продать часть читаемости взамен на производительность 😃

У меня за всё время работы таких случаев не было вообще. Обычно мне хватает оптимизаций при сборке.

Но вдруг и с J… twitter.com/i/web/status/1…

Случаи из не-JS мира тоже приветствуются! 😃

@jsunderhood Иногда встречаются ситуации, когда приходится делать не React-Way, например, чтоб всё не тормозило без… twitter.com/i/web/status/1…

Подведём итоги за сегодня 🙂

Завтра поговорим о том, как расти в разработке. Обсудим, что лучше:

Доброе утро четверга! ^_^

Чем ближе конце недели, тем больше мы уходим от хард-скилов 😃

Сегодня поговорим о том,… twitter.com/i/web/status/1…

На самом деле понятно, что пункты не взаимоисключающие, в жизни их можно сочетать 🙂

Я попробовал всё, кроме, пожал… twitter.com/i/web/status/1…

За весь свой опыт я помню 3 случая, когда рост был взрывным — и все 3 случая были на работе под присмотром ментора 😃

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

Показат… twitter.com/i/web/status/1…

Я нашёл эти курсы на Ютубе! 😱🙀🤠

youtube.com/watch?v=jj2TXJ…

С программированием было прям совсем худо.

Гугл не особо помогал, потому что я ещё не умел нормально гуглить вопр… twitter.com/i/web/status/1…

Первый значительный скачок произошёл году в 2010, на первом большом проекте. Писали на пару с чуваком из, кажется,… twitter.com/i/web/status/1…

Я тогда узнал про Ноду, прокачался во взаимодействии между сервером и браузером, анимации поднатаскал, даже какое-т… twitter.com/i/web/status/1…

Я бы не сказал, что он был прям ментором, но на ошибки указывал, хорошие решения подсказывал.

Забавно, что всё это… twitter.com/i/web/status/1…

Второй скачок был в команде, где я написал CRM
bespoyasov.ru/projects/reque…

Там познакомился с Реактом, написал первый… twitter.com/i/web/status/1…

Там и поуправлять другими разработчиками получилось немного, и блог переосмыслить (хотя и к тому времени пока что н… twitter.com/i/web/status/1…

Третий скачок был в D2. Тут техдир открыл мне дорогу в «настоящее программирование™» 😅

Я пописал на шарпе и .net,… twitter.com/i/web/status/1…

Ну и сейчас я вот занимаюсь R&D проектами всякого около-ML толка. Учусь реализовывать алгоритмы, которые нахожу в р… twitter.com/i/web/status/1…

Надо было, чтобы кто-то разжевал что с чем складывать, чтобы оно работало.

К некоторым книгам я возвращаюсь время… twitter.com/i/web/status/1…

Университет, пожалуй, был самым малополезным из всех перечисленных пунктов.

Ну то есть, там были попытки привить… twitter.com/i/web/status/1…

Хотя не, помню!

Сети с администрированием полезными оказались и плюсы немножко.

Мне, правда, было больше по кайф… twitter.com/i/web/status/1…

И вот сейчас смотря на это всё я думаю, что «ментор на работе» — это прям самое эффективное сочетание для роста 😃

А что думаете вы?

Сейчас я доберусь до завтрака и поговорим о плюсах и минусах каждого из пунктов 🙂

Мне ещё очень нравится вот эта заметка о росте, не могу не поделиться:

github.com/bobuk/addmeto.…

Мне сейчас повезло: я попал в команду, откуда можно опыт тоннами выкачивать — чем и занимаюсь 😃

Давайте начнём с университета ¯\_(ツ)_/¯

Я понимаю, что не мне с моим дипломом Уфимского технического говорить об у… twitter.com/i/web/status/1…

Из плюсов я сейчас вижу, пожалуй, нетворкинг. Это именно то, чем я не занимался в университете 😅

Университет — это… twitter.com/i/web/status/1…

Ещё один плюс — могут научить действительно полезным вещам, если попасть в правильный ВУЗ и на правильную специальн… twitter.com/i/web/status/1…

Ещё плюс: отсрочка и военная кафедра ¯\_(ツ)_/¯

Я при поступлении уже работал, знал, где хочу развиваться и куда р… twitter.com/i/web/status/1…

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

У нас в программе нейронные сети сч… twitter.com/i/web/status/1…

Офлайн-лекции.

Мне нравилось ходить только на лекции по матану — преподаватель делал из лекции шоу.

Он всегда чи… twitter.com/i/web/status/1…

Одна единственная специальность.

В 17 лет мне надо выбрать то, чем я буду заниматься ближайшие 5 лет, а то и всю ж… twitter.com/i/web/status/1…

Преподаватели, которым не хочется учить / хочется утвердиться.

Таких я не помню, чтобы встречал, но слышал рассказ… twitter.com/i/web/status/1…

В общем, всё сильно зависит от ВУЗа, но я больше склоняюсь ко мнению, что мне он оказался почти бесполезен.

Исключ… twitter.com/i/web/status/1…

Курсы! 😃
Я проходил какие-то курсы на Udemy и где-то ещё.

Тут могу сказать, что любые новые знания с курсов надо… twitter.com/i/web/status/1…

В курсах, мне кажется, самое полезное и важное — обратная связь и сообщество.

Потому что учиться надо на ошибках,… twitter.com/i/web/status/1…

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

+: курсов огромное количество.
–: а чёрт поймёт, какого они качества 😃

+: можно (хоть и трудно) найти качественную… twitter.com/i/web/status/1…

Идём к самому интересному 😃

Давайте следующим пунктом выберем боевую разработку.

Несомненный жирнейший плюс — это настоящий рабочий опыт, которым можно светить в резюме.

Да, даже если это была га… twitter.com/i/web/status/1…

Новичкам в боевой разработке трудно определить, они в хорошую компанию вот попали или нет? То, как устроены процесс… twitter.com/i/web/status/1…

Другой плюс боевой разработки: нет романтического флёра IT, который иногда продают курсы. Просто ещё одно ремесло.… twitter.com/i/web/status/1…

Минус — это может отпугнуть, если попасть не туда 😞

Ещё один плюс боевой разработки: она помогает бороться с перфекционизмом.

Он мне постоянно мешает, особенно в пет-… twitter.com/i/web/status/1…

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

Что в боевой разработке было для меня сложным: бывали моменты, когда я занимался одним и тем же, не развиваясь вооб… twitter.com/i/web/status/1…

Особенно отчётливо это было на фрилансе и на галере 😃

Нужно было много работать, чтобы были деньги, но делать прих… twitter.com/i/web/status/1…

Зато я научился многое автоматизировать.
Придумал себе, кхм, «веб-компоненты» 😅
bespoyasov.ru/blog/templates/

Это были такие папки с «компонентами». Каждый компонент состоял из HTML-шаблона, каких-то скелетных стилей и скрипт… twitter.com/i/web/status/1…

Я их подключал, конечно, не одним импортом, а тремя (разметка, стили и скрипты), но работали они независимо друг от друга и от контекста 😃

Там же пришлось научиться и «прогрессивному джипегу» в вёрстке:
bespoyasov.ru/blog/time/

Типа страница готова в люб… twitter.com/i/web/status/1…

А вот work-life баланс найти на фрилансе трудно. Для этого, кажется, нужна культура и команда.

Чуть позже поговорим о менторстве 🙂

Продолжим!

Расскажу, почему я считаю, что ментор нужен, почему не только джунам и почему боевая разработка без менторства растит медленнее.

Ментор, как мне кажется, — это не учитель.

Возможно, у меня искажение, но при слове «учитель» я сразу представляю… twitter.com/i/web/status/1…

Для меня ментор — это как кто-то кто переехал в другую страну до меня, насобирал шишек и теперь может предупредить… twitter.com/i/web/status/1…

Причём, _хорошие_ менторы в состоянии определить, о каких ошибках они могут предупредить меня заранее, а какие — мн… twitter.com/i/web/status/1…

Объясню: очень сложно передать какой-то опыт словами.

Слова — это код, модель. (Карта, если хотите.) Они не могут… twitter.com/i/web/status/1…

Хороший ментор в состоянии оценить мой уровень и сделать вывод о том, какие вещи я смогу понять, просто обсудив их, а какие — пока нет.

И вот тут хочется сказать, почему я считаю, что ментор нужен не только джунам.

Мидлы и сеньоры могут сталкиваться… twitter.com/i/web/status/1…

Такие задачи ставят в ступор и могут привести к параличу анализа, когда принять решение вообще не получается:
ru.wikipedia.org/wiki/Аналитиче…

Менторы, как более опытные разработчики, могут поделиться опытом решения подобных задач.

Прекрасно — если они уже… twitter.com/i/web/status/1…

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

Особенно это полезно, когда мы подходим к более философским задачам:

Мне кажется, на более поздних этапах менторы уже скорее идейные вдохновители что ли. Сложно сформулировать 🤔

Они… twitter.com/i/web/status/1…

Для джунов, как по мне, ментор — это вообще обязательно.

Я вот жалею, что у меня было мало возможностей учиться на… twitter.com/i/web/status/1…

Кстати! Как вы считаете, какими навыками должен обладать хороший ментор?

Понятно, что уметь разжёвывать сложное пр… twitter.com/i/web/status/1…

Можем подвести предварительный итог ^_^

Нужны:

Скоро закончу с задачами на работе и вернусь, чтобы обсудить опен-сорс 😃

Ну теперь давайте поговорим и об опен-сорсе!

У меня опыта в трушном™ опен-сорсе нет. Весь мой Гитхаб — это пара не… twitter.com/i/web/status/1…

И я, если честно, не очень понимаю, как эффективно расти через опен-сорс, особенно если я новичок.

Я когда был джу… twitter.com/i/web/status/1…

Просить объяснить я не могу, потому что просто так буду отнимать у людей время — они же занимаются опен-сорсом в св… twitter.com/i/web/status/1…

Просто присылать пул-реквесты — тоже нутакое.

Мейнтейнерам придётся не только отвлечься, но ещё и накатать какой-… twitter.com/i/web/status/1…

Остаётся — делать какие-то библиотечки и пакетики, которые будут кому-то полезны.

Первым у меня был `groontograf`… twitter.com/i/web/status/1…

Было ещё приложеньице для конвертации дат в таймштампы и обратно. Кому-то вроде даже было полезно.

Но опять-таки,… twitter.com/i/web/status/1…

Из каких-то более полезных вещей:

Букмарк, скриптик для навигации по странице

• bespoyasov.ru/bookmark/

Прокрутчи… twitter.com/i/web/status/1…

Собственно вопрос: в чём секрет роста через опен-сорс?

Как это делать?
Как это делать этично, чтобы никому не дос… twitter.com/i/web/status/1…

@jsunderhood Как вариант, пробовать как-то контрибьютить тут cultofmartians.com

Завтра утром подведём итоги сегодняшнего опроса из начала треда и начнём говорить о технических блогах ^_^

Это первый тред, который не сломался за день ни в одном месте 😅

Итак, самое большое влияние оказала боевая разработка. Ментор на втором месте, университет и курсы — на третьем. pic.twitter.com/A86m0Oji9b

Давайте под конец рабочей недели поговорим о ведении технического (и не только) блога!

Расскажите, ведёте ли вы свой блог?
как начинали?
что подтолкнуло?
что для вас самое сложное?
какие плюшки вы от блога получаете?

Я пока начну и расскажу о своём блоге:
bespoyasov.ru/blog/

Начал я его вести примерно тогда же, когда начал ра… twitter.com/i/web/status/1…

Бывает, правда, кажется, будто писать не о чем.
«Все обо всём уже давно написали, и смысла повторяться нет.»

Пиши… twitter.com/i/web/status/1…

...Если нет, то это повод перечитать книгу и дополнить конспект.

Потом я подумал, чего б не делать конспекты хорош… twitter.com/i/web/status/1…

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

Например, вот пост-снип… twitter.com/i/web/status/1…

Я начал собирать стандартные ответы в заметочку, которую потом использовал как шаблон.

О шаблонах и инсайдах я пот… twitter.com/i/web/status/1…

Позже я стал отвечать на вопросы людей из почты и сотрудников. Когда я заметил, что они тоже повторяются, начал пос… twitter.com/i/web/status/1…

Из таких стандартных ответов могу вот привести:

• Как описывать баги
  bespoyasov.ru/blog/cant-repr…

• О документации… twitter.com/i/web/status/1…

  7:10

Это, правда, почти не повлияло на мою устную речь. Этот навык надо, видимо, отдельно развивать 😅

А сейчас поговорим о том, как вытащить из себя статью.

Итак, у меня есть идея для статьи. Я сажусь её писать, и...

То чаю захотелось, то в Твитере что-то интересное пишу… twitter.com/i/web/status/1…

Есть три принципа, которыми я пользуюсь, чтобы избегать ступора, прокрастинации и разочарования:

Я замечал за собой, что прокрастинирую я те задачи, которые кажутся большими, объёмными и _непонятными_.

Новый пос… twitter.com/i/web/status/1…

Все эти вопросы так или иначе возникают при написании статьи.

Просто мы можем не отдавать себе отчёт, что они ест… twitter.com/i/web/status/1…

Первый принцип «Есть слона по частям» старается разбить большую непонятную задачу на маленькие куски.

Такие малень… twitter.com/i/web/status/1…

Этот же принцип я применяю при собственно написании текста статьи.

Я не пишу сразу огромную портянку на 40 тысяч с… twitter.com/i/web/status/1…

Причём

Статьи из разряда, «мы столкнулись с такими проблемами» помогают открыть глаза на эти вещи.

Оказалось — это один из самых читаемых постов вообще.

3. Отразить процесс обучения, чтобы отрефлексировать его.

П… twitter.com/i/web/status/1…

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

И тут наступает проблема «белого листа» — С Ч Е Г О Н А Ч А Т Ь ? 😃

Используйте второй принцип: «ну блин коро… twitter.com/i/web/status/1…

Пишите просто сплошняком, без абзацев, без разбиения на предложения. Строчите из буквомёта, пока идёт.

Не беспокой… twitter.com/i/web/status/1…

Старайтесь разделять сессии написания и редактирования.

Это разные задачи, их решать надо тоже по-разному. При ре… twitter.com/i/web/status/1…

Всё это встаёт в прямое противоречие с «написанием».

Можно сравнить написание с брейм-штормом, а редактирование — с анализом результатов.

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

Как так? Неужел… twitter.com/i/web/status/1…

Важно: во время перерыва я не смотрю на то, что написал. Вообще.

Если я отдыхаю от текста, то не вспоминаю о нём д… twitter.com/i/web/status/1…

В следующий раз, когда я сяду за текст, я буду отдохнувшим от него (что позволит найти ошибки и нелогичное повество… twitter.com/i/web/status/1…

Забавно, но именно во время мытья посуды или прогулки я придумываю хорошие доводы и сравнения для своих статей ¯\_(ツ)_/¯

Хорошо, вот за несколько подходов мы наполнили структуру из заголовков каким-то текстом.

Там нет абзацев, иногда н… twitter.com/i/web/status/1…

Я обычно сперва проверяю логику повествования:

На этом этапе можно переделывать структуру всего текста, как захочется, потому что сил потрачено ещё не очень много… twitter.com/i/web/status/1…

Когда с логикой всё хорошо, можно углубляться в сам текст:

После того, как текст становится монолитом, где ни убрать, ни добавить, можно приступать к пунктуации, орфографии и грамматике.

Если есть роскошь дать кому-то почитать — обязательно дайте.

Чей-то информационный пузырь, который отличается от… twitter.com/i/web/status/1…

Днём поговорим о том, что выбрать:

@jsunderhood 1. Личный бренд.

Продолжим 🙂
Давайте ещё один опрос!

Self-hosted блог или чья-то платформа?

Я топлю и всегда топил за селф-хост.

У платформ я вижу только одно преимущество — можно сразу писать на какую-то а… twitter.com/i/web/status/1…

Я писал немного на newline и сейчас пробую dev.to в рамках эксперимента, чтобы выйти на зарубежную… twitter.com/i/web/status/1…

В селф-хосте мне нравится, что контент всегда остаётся у меня и в одном месте.

Я могу переехать со своими заметкам… twitter.com/i/web/status/1…

— Но для селф-хоста нужен дизайн!

Не-а 😃
Можно наверстать сайт на чистом HTML без стилей. Если есть, что написать… twitter.com/i/web/status/1…

— Но для селф-хоста нужен домен и хостинг, и TLS, и деньги!

Да, но не очень много:

— Но селф-хост надо промоутить!

Сарафанное радио работает не хуже, чем блого-платформы.

(Говорю по опыту:

Кстати, насчёт сарафанного радио.

У Веб-стандартов недавно появился список с инди-блогами о фронтенде ;–)

— Но что, если я не буду писать?

Всегда можно сделать архив с заметками и опубликовать их в тех же gist на Гитхабе… twitter.com/i/web/status/1…

— Но я не хочу кодить, я хочу просто писать!

Если не хочется _много_ кодить, то можно посмотреть на генераторы тип… twitter.com/i/web/status/1…

Окей, а что с языком? 😃
На каком языке писать: русском или английском.

Мне гораздо проще писать на русском и потом… twitter.com/i/web/status/1…

Контрпродуктивно, потому что хороший пост с английского и так переведут на русский, а я делаю двойную работу 😃

Ну,… twitter.com/i/web/status/1…

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

Если вы заводите трактор,… twitter.com/i/web/status/1…

Чтобы писать на английском, я использую:

Если вы пишете на платформу, где используется Markdown, то вот читщит по нему:

• github.com/adam-p/markdow…

(У карти… twitter.com/i/web/status/1…

В общем, не повторяйте моих ошибок, пишите сразу на английском 😃

Отправляюсь работать.

После поговорим об RSS (надо / не надо) и как вставлять примеры кода (нужна ли подсветка, с… twitter.com/i/web/status/1…

Продолжим!

RSS — надо или нет. До сих пор считаю, что ничего лучше для подписки на блог не придумали 😃

А когда п… twitter.com/i/web/status/1…

Не у всех платформ RSS есть, и в селф-хосте добавить его тоже бывает сложно.

Мне вот пришлось писать собственный с… twitter.com/i/web/status/1…

Но RSS для меня — единственное место, где блоги читать _удобно_.

Почта — для работы, я сейчас наоборот чищу почту… twitter.com/i/web/status/1…

Поэтому для меня ответ однозначный — да, RSS нужен.

*Старческое кряхтение.*

А теперь о примерах кода 😃

Вот мы пишем статью о какой-то технологии или случае из разработки. Там будет код.

Как его правильно оформить?

Нам же одновременно надо решить почти противоречащие задачи:

Начнём с простого.
— Добавлять ли простые и маленькие примеры?

Да, лучше добавить. Это как в кино, лучше показат… twitter.com/i/web/status/1…

— Писать объяснения до примера, после или внутри?

Расположение не имеет значения, но последовательность — имеет. Л… twitter.com/i/web/status/1…

Хорошо, потому что объяснение находится прямо в том месте, которое объясняет.

Лучше написать комментарий перед стр… twitter.com/i/web/status/1…

Мне ещё кажется, это более привычно для читателей, потому что они сами видят комментарии именно в таком виде на работе.

— Как выбрать, какой код добавлять в статью?

Я стараюсь добавлять код, который относится _непосредственно_ к теме… twitter.com/i/web/status/1…

— Что делать с примерами, которые не делятся?

В первую очередь подумать, можно ли это отрефакторить.

Затем подум… twitter.com/i/web/status/1…

Теперь самое сложное:

— Как выбрать, какой именно код и сколько код приводить в примерах?

Откусывайте от кода мал… twitter.com/i/web/status/1…

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

О… twitter.com/i/web/status/1…

Акцентируйте внимание на развитии примера сквозь статью.

Давайте на примере моего поста о DI:

Показываем предпосылку к идее на простом примере кода:

(Зависимости — это как аргументы.) pic.twitter.com/HVnUYm0Gpq

Обращаем внимание на детали, которые помогут вникнуть в идею позже:

(Кроме аргументов мы используем глобальный объ… twitter.com/i/web/status/1…

Приводим читателей за руку в собственно идею:

(Такие зависимости тоже можно передавать явно.

Обратите внимание,… twitter.com/i/web/status/1…

Этот же кусок кода мы дальше используем, как опорную точку для развития идеи:

(Важно описать поведение, не важно,… twitter.com/i/web/status/1…

Так, от простого и _знакомого читателям_ кода мы переходим к новым для них концепциям.

Знакомый код даёт ощущение… twitter.com/i/web/status/1…

Ну и предлагаю сегодня закончить пораньше — пятница всё-таки 😃

Ещё мне не нравится идея равнять возможности всех людей под какой-то «стандарт».

Можно писать хорошие статьи раз в… twitter.com/i/web/status/1…

Но я согласен, что хороший пост — это много работы: ресёрч, формулировка, определение пользы, текст, редактура, код и графика, если надо.

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

Доброе утро субботы! ^_^

Давайте сегодня поболтаем о пет-проектах?

Сейчас я постараюсь проснуться и начну 😅

Я иногда задумываюсь, а не становятся ли пет-проекты и опен-сорс обязательным (и завышенным) требованием при найме?… twitter.com/i/web/status/1…

Пет-проекты — это с одной стороны, способ улучшить свои навыки. А если сойдутся звёзды — то и разбогатеть на мега-с… twitter.com/i/web/status/1…

Одно дело, когда я _горю идеей_ что-то сделать и попробовать; и совсем другое — когда от меня этого _требует_ вакансия.

Тем более что не во всех компаниях выделяют время на опен-сорс или пет-проекты.

Так вроде только в Гугле делали (… twitter.com/i/web/status/1…

У меня из пет-проектов самый долгий (и известный) — это Тяжеловато:

Мы его делали с @Yumadilov, когда нам не на что было выживать 😃

Оттуда и название и дефолтный лимит в один прожиточный минимум 😅

Разработку вели открыто.

Прямо перед началом объявили, что сделаем приложение за две недели и начали об этом писат… twitter.com/i/web/status/1…

Примерно тогда же я начал тыкать в электрон и в курс доллара и сделал Курсовик 😅

• bespoyasov.ru/blog/kursovik/

Я его… twitter.com/i/web/status/1…

А затем я вообще использовал идею курсовика как основу для воркшопа о тестировании реакт-приложений:

-… twitter.com/i/web/status/1…

Пробовал делать инструменты для разработчиков. Один из тех, которыми пользуюсь сам — Тмстмп:

-… twitter.com/i/web/status/1…

Один из тех, которым пользуюсь не только я, — Прокрутчик:

• bespoyasov.ru/scroller/

Скрипт для прокрутки контента… twitter.com/i/web/status/1…

А дальше меня как-то переключило на книги ¯\_(ツ)_/¯

Первым таким пет-проектом-книгой стало «Фронтенд — это не бол… twitter.com/i/web/status/1…

Изначально я хотел сделать доклад, но потом понял, что не хватило бы времени на всё.

Так вместо презентации появи… twitter.com/i/web/status/1…

...Пофильтровали его, подчистили.

На новогодних каникулах я всё сверстал и насобирал мемов для иллюстраций.

В ко… twitter.com/i/web/status/1…

Недолго после этого я проходил какой-то курс о тестировании, где затрагивали тему TDD.

Затрагивали очень поверхнос… twitter.com/i/web/status/1…

Я стащил идею расположения текста и кода отсюда:

• glebec.github.io/lambda-talk/

(Сейчас кажется, что ещё неплохо было… twitter.com/i/web/status/1…

Когда я начал заниматься проектированием и чуть чаще работать с ООП, я понял, что не понимаю принципов SOLID.

Тогд… twitter.com/i/web/status/1…

Мы решили не просто рассказать о принципах, но ещё и показать их действие на примерах в коде, в жизни и в паттернах… twitter.com/i/web/status/1…

Всё остальное либо не дожило до наших дней, либо не развивается и не поддерживается 😅

С опен-сорсом проще: иногда работа внутри компании позволяет релизнуть что-то в опен-сорс.

А вот с пет-проектами н… twitter.com/i/web/status/1…

@jsunderhood просто пишу на всякие темы по js, которые кажутся интересными

howtojs.ru

@jsunderhood Требовать - нет. Но наличие интересного пет проекта позволяет говорить с кандидатом не на стандартные… twitter.com/i/web/status/1…

Я не стараюсь набросить, а скорее разобраться, что побуждает смотреть при найме не только на результаты _работы_, н… twitter.com/i/web/status/1…

Мне понятная мотивация компаний, которые ищут трудоголиков, чтобы те работали по 240 часов в сутки.

Мне понятна м… twitter.com/i/web/status/1…

У меня возникает мысль «найти работу интереснее», но это не всегда возможно.

Отчасти как раз потому, что не всегд… twitter.com/i/web/status/1…

@jsunderhood Завел блог примерно в то время когда устроился работать программистом.
Начал с того что записывал для… twitter.com/i/web/status/1…

@feakuru @UntrueMe @jsunderhood github.com/Muao/raspberry…

@jsunderhood github.com/unger1984/dia - вебсервер на dart. Решил закодить когда захотелось аналога из ноды

@denis_f_l @jsunderhood inoreader.com же :) Он и обычные сайты умеет парсить и создавать из них RSS ленты.

@not_a_reptiloid @jsunderhood Телеграм — это пуш, РСС — это пул.

Пуш вызывает FOMO и нервирует, пул позволяет потр… twitter.com/i/web/status/1…

Сегодня воскресенье, давайте подводить итоги недели!

Спасибо всем, кто читал, отвечал и участвовал! Вы все классные.

Ну или относиться к работе, как к ремеслу, если первое не срабатывает.

(Только главное к себе прислушиваться, вдру… twitter.com/i/web/status/1…

@jsunderhood Проект вырос из рабочей потребности парсить бб коды и делать манипуляции с ними. Вместо текущих регуля… twitter.com/i/web/status/1…