JavaScript - проповедь Чистого кода!

[@Howtogoit]

Тренажеры HTML Academy (HTML, CSS, JS, React) + Академия + Книга рецептов фронтендера + комьюнити за 99 рублей: boosty.to/how-to-learn-it Какие тренажеры бывают: htmlacademy.ru/courses#fe-start В моем Telegram - канале "Как пройти в IT?" публикуется ровно один пост в день! Это отборный и полезный материал для вашего развития! На пути в синьоры-помидоры важно каждый день уделять образованию хотя бы 10-15 минут! Подписывайтесь: t.me/howToLearnIT ________________ 0:00 Пролог 00:58 Первое правило чистого кода 02:00 Пиши, Сокращай 02:50 Общее и частное 03:33 Проблема, которая есть в каждом проекте 05:40 Как укратить функцию? 08:11 Линтер - верный спутник чистого кода 09:02 Открытость - Закрытость 09:27 Гигантизм 10:15 Какие комментарии самые полезные? 11:40 Газетная метафора в JavaScript 12:32 Порядок в доме 13:35 Психология фронтенда 14:00 Настольная книга, каждого разработчика 14:26 Резюме ________________ Упоминаются в ролике: 1) PowerThesaurus - www.powerthesaurus.org/ 2) Чистый код Мартин Роберт К. #JavaScript #js #Frontend #Программирование

[@ЭдгарЕдигарян-ц3ъ]

природе осталось очень мало 🤣🤣🤣🤣🤣🤣 kzbin.info/www/bejne/bXm8m2ePm7OAiK8

[@uvy.studios]

Дружище, ты стал первым, на ком я проверил работу ютубовского колокольчика. Респект!

[@enjoymtx]

Кстати, я тоже)

[@pirozhok2097]

+

[@volodimiryemshyn715]

Что творит, ты посмотри на него, глядишь и код писать научимся :) Спасибо за видео, на конец то у меня есть аргументы и ссылочка, почему делать нужно именно так а не как иначе. Не мало нового узнал что жило в мое голове, ну не было возможности описать это коллегам, спасибо и за это!!!

[@olehy5000]

Очень нравится подача материала! Очень полезный контент! Подписка и колокол однозначно)

[@androidpasha]

Очень полезная информация. Спасибо.

[@alexeleave4551]

Хорошая тема. Чтобы код был чистый, понятный, эффективный и может быть даже красивый - это и вправду целое искусство! Развиваемся и качаем навыки, дамы и господа))

[@Ramosok]

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

[@dimakovalenkov7835]

приватные поля через # это пока экспериментальное предложение так что продолжаем чёрточки ставить, ребят = )

[@dreykanbern1453]

Привет из будущего

[@astkh4381]

Лучше ts использовать

[@coffeebit6468]

Восхищаюсь полезностью и практичностью твоих видео!🎉

[@YarkiiYa]

Обожаю твою подачу! Супер респектище)

[@max_mgtow]

Приветствую дружище 🤝 Всегда жду роликов👍

[@snatvb]

с 1:55 поржал) это я когда ревьюю своих соколиков)))

[@olezhonnv3215]

Вкусовщина сплошная. Чувак, тебе в проповедники надо - больше заботаешь)

[@apsolution4722]

ЗИП файл! Теперь я буду писать чистейший арийский код, спасибо

[@DimaTiunov]

11:33 используйте let, назначение которого полностью не заменяет var

[@Re_p1ay]

Очень круто, спасибо за твой труд 😊

[@Nabunga]

Клеевое видео, спасибо за труд!

[@noname-nh8mx]

Офигенно качественный контент! Контент других похожих ютуберов которых мне кидает в рекомендациях и рядом не стоит с твоим (ДЖАВАСКРИПТИЗЕРЫ | КИРИЛЛ ПОЗДНЯКОВ, purple group)

[@malyarevich]

8:22 что это за сервис?

[@bublik462]

Очень интересно и полезно , спасибо !

[@saitaro]

Хорошие советы. Для Python тоже годятся.

[@EsteradThyssen]

Осторожно, в видео присутствует 25 кадр, вызывающий привыкание и стимулирующий ставить лайк.

[@nikolay_51]

Осторожно, в этом комментарии тоже присутствует 25 кадр, который заставляет поставить лайк этому комментарию:)

[@motivator3d]

Что такое 25 кадр?

[@Amelin1207]

@@motivator3dто что не успевает уловить человеческий глаз)

[@motivator3d]

@@Amelin1207 спасибо

[@АлексейБомко-ь1ш]

Не знаю почему, но очень захотелось написать комментарий, поставить лайк и нажать колокольчик. Магия какая-то!)

[@romanryaboshtan9270]

1:39 Этого я не знал, респект

[@soulwind7577]

- Да кто писал этот код, тут лишний пробел, нейминг не правильный :) - Это был ты - Какие божественные пробелы XD

[@Evgeny..]

Спасибо за хорошие мысли .но сопровождающие видео-фрагменты немного пугают))

[@pasokolov]

Для понимания бэка и фронта в плане разности названий есть великая вещь - swagger и OpenAPI

[@hola-ig9gb]

После этого видео захотелось писать хороший код ещё раз в десять сильнее чем до него.

[@FailValiev]

Да, как раз читаю "Чистый код" от известного дядюшки

[@chirkov]

"В коде коллег" услышал как "В коде калек" ))

[@dmaberlin]

Спасибо!!!

[@Volodymyr-Serhiovych]

Неплохой подход к донесению информации!) Но делать столько примеров на Классах?) Сейчас редко встретишь адекватный проект на классах. ФП, маст хев) Личное субьективное мнение)

[@lol-q1v]

хз чел. в маленьких проектах может быть. в больших проектах классы очень часто встречаются

[@Volodymyr-Serhiovych]

@@lol-q1v за последние 5 лет, только на овер старых проектах видел классы…ито если тим лид пхп-шник) и я говорю за большие saas продукты.

[@bubblesort6368]

@@Volodymyr-Serhiovych А если проект на angular2+? А проекты на nestjs? Там же почти все на классах. Может вы просто много лет писали на react и у вас сформировалась проф. деформация?

[@ТурдыбекДиас]

@@Volodymyr-Serhiovych Я хз, больше классы нравятся. Наверное привык из-за других языков.

[@ТурдыбекДиас]

Да и классы более чисто выглядит.

[@illiaonishchenko6303]

топ видео, годный контент

[@АндрейБ-п4я9н]

палец вверх за 25 кадр))

[@zergzerg4844]

можно ссылку на видео про декомпозицию, не могу найти

[@tatyana885]

спасибо

[@AbraKadabra000]

Иногда на кодревью просят кократить context до ctx , и element до el ))

[@oleg_deezus]

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

[@soulwind7577]

мне попадалось, что наоборот, но так лень бывает в элементарных местах прописывать полное название )))

[@ИмяФамилия-э4ф7в]

@@soulwind7577 имхо, важно просто приучить себя, и потом так пишешь на автомате.

[@diogen8443]

User в проучаемой дате? Меня тл все время дрчил чтоб было абстрактное название.

[@awenn2015]

0:33 то чувство когда ты фрилансер и очень далек от всей этой темы с ревьверами, менеджерами, и прочими непонятным словам которые означают не понятных людей, У меня есть один крупный заказчик, но они сайтом не на столько занимаются что бы нанимать прям команду, я им один сайт допиливаю, сам слежу и сам правлю )

[@konstantinchernyaev3011]

Про черточки: пока в JS/TS не появятся # или {public get; private set} как в C# мы так и будем писать черточки. Иначе как ты назовешь одно и то же поле только одно это публичный геттер, а другое - приватное поле? field и privateField?

[@konstantinchernyaev3011]

Это про поля. В методах такое встречается гораздо реже

[@Eugeniyges]

Простите, а если надо посчитать координаты? Например написать функцию которая ищет пересечение двух линий, то вместо x, y, нужно писать что-то вроде xCoordinate, yCoordinate?

[@funnycatvideo8968]

i-index, j-jindex, k-kindex?

[@mikaelgevorgyan4521]

А если функция такая 🤔, что надо так сделать?

[@АлександрРыбальченко-г8ч]

Привет, недавно решил попрбовать js, что бы ты мог посоветовать для начинающего, после изучения синтаксиса?

[@bubblesort6368]

Потом что то из большой тройки на выбор: angular, react, vue

[@noisekov]

​@@bubblesort6368 ну точно не после изучения синтаксиса 😂😂😂

[@AbraKadabra000]

"Кодирование", это из области алкоголизма))

[@darkside3184]

лайк за 25ый кадр)

[@VadimSuharnikov]

8:45 Ты чего, форматтер не врубил что ли, пробел пофикси! Нижний private имеет лишний пробел в отступе.

[@forsez4904]

13:08 Уши шапочкой не закрывают 😫 , а так видео полезное

[@jorgenUA]

Просьба: объяснить на примерах что класть в Redux, а что нет

[@АндрейСидоров-б7н]

Про кавычки вконце не сказал

[@cxldz5859]

А как назвать итератор в ситуации, когда у меня цикл в цикле? Вместо i можно назвать index, а какие альтернативы для k/j?

[@ИмяФамилия-э4ф7в]

Фигня это, если цикл не более 3-5 строк, то i вполне годится. Если цикл в цикле, то тут на любителя, я бы дал осмысленные имена переменным, т.к. приростить i во вложенном цикле - классика. Но тут, конечно, имхо.

[@VasyaFF]

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

[@ГенаПетров-н5ы]

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

[@КириллХора]

Если обратить на 1 секунде видео, написано Фронтенд Show. Сразу становиться поняться, сам материал подаётся в развлекательной форме, а не так как будто ты на уроке изучаешь очередную тему. Мне нравиться такой формат, легкий и не напрягающий

[@soulwind7577]

@@КириллХора Забавно то, что автор хоть и подает материал в более развлекательной и простой форме, но у него наверное один из замых понятных и полезных каналов по рассуждению на разные темы в программировании. По крайней мере точно лучше чем у некоторых инфоцыган, которые еще за свой "контент" какие то деньги просят

[@alex-lar]

Половины слов не понял, конечно, но было поучительно

[@konstantinchernyaev3011]

Про порядок функций это булщит. Когда разбираешься с кодом лучше чтобы функции шли по порядку вызова, а API IDE подскажет

[@tohadolinskiy7791]

В целом круто. Но некоторые вещи нереалистичные в коммерческом проекте с ограниченным буджетом

[@unknown9621]

Блин, у тебя очень знакомый голос. У тебя есть (был) еще какой-то канал не связаный с программированием?

[@WATCHAKOV]

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

[@bebe558812]

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

[@YuriiHoroshkov]

По поводу приватных полей в js, такие методы ложатся в сам инстанс класса, а не в прототип. В итоге если у нас будет 100 экземпляров класса, то в них будет условно 100 одинаковых методов, вместо одного в прототипе. Это больше никого не смущает? П.С. тот самый олдфаГ

[@LuckyStilet1]

Приятно читать - понятие растяжимое, лично я ненавижу отступы между функциями. Начало функции видно за 2 метра.

[@AbraKadabra000]

Про комментарии к коду не согласен. Посмотрите исходники того же реакта) . как правило бесполезного там нет

[@TheMorisBlack]

Тоже удивился такому подходу в видео. Однажды видел лекцию, где преподаватель настаивал, что программу НУЖНО начинать с комментариев, а уже потом кодить. Тема явно неоднозначная.

[@romanryaboshtan9270]

10:42 Этот принцип не подходит, когда ты пишешь алгоритм какой-то, там придётся комментировать, в остальных случаях я с тобой согласен

[@alexanderafonin1688]

Вот это я понимаю поле для холивара))))

[@chikenmacnugget]

моя настольная книжечка

[@qwertin1998]

В чем смысл писать onUserChange и ТД на обработчиках, какое это даёт представление о том, что конкретно делает обработчик? Имхо это глинокод

[@bebe558812]

А зачем тебе это представление?)) Что-то делает и ладненько ахах.

[@bebe558812]

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

[@alfany6252]

Жду C#

[@mikaelgevorgyan4521]

Особенно когда одна функция будет работать с 1000 и более сущностями и все приносят ту же самую сущность, тогда, как их наименовывать? 😂

[@chip253]

Который раз говорят об идеале, что редко выполнимо в реалиях. 20 строк на функцию и класс 500 ? Посмотрите движок UnrealEngine 4, такие кассы как скелетел меши, експорты - громадные методы. Или Блендер - не выполнимо такое правило. Может быть в каком-то маленьком UI для вашего сайтеца - будет достаточно, но для реально большого проекта - даже не заморачивайтесь.

[@ritsu133]

причем в том же реакте функцию ты по сути пишешь как полноценный класс, со своими методами и ретерном возможного огромного jsx'a

[@Akasa_Lust]

Метод/класс должен выполнять только одну задачу. Чтобы когда его сломают, сломалось что-то одно. Отсюда идёт правило, про число строк. Много строк - много на себя берёт. Надо разбить по задачам.

[@РоманДерябин-е2к]

(e) => {} ---- на тебе в борщ!

[@MrVertu01]

Видео мантра прям

[@trays1377]

В проекте,а не НА. "На" это то что сверху, а "В"внутри. Как будто речь про работодателя который как раз стоит над проектом.

[@alexander551]

В Украине?

[@trays1377]

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

[@artempronenko5105]

Экстрим код не одобрит)

[@catalan2857]

Пусть не одобряют, у них вообще какой-то клоун-контент

[@lancelottheknightofthelake5240]

@@catalan2857 Гении зачастую становятся отвергнуты обществом. Ну а вообще Экстрим код всё по факту говорит

[@artempronenko5105]

@@catalan2857 так и есть) они же не делают обучающий контент. Просто угарают мужики)

[@heisserkaiser394]

@@catalan2857 излишняя серьёзность - первый признак низкого IQ

[@max_mgtow]

Петухони поставит 😆

[@СултанНуриев-ъ3м]

Че мой коммент удалил =)

[@Howtogoit]

Это промысел ютуба)

[@timofey9052]

13:24, не объективно)

[@realmanproject7529]

збс

[@QwDragon]

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

[@mikaelgevorgyan4521]

Ммм комменты используйте😅🗿, обязательно без них проект будут поддерживать месяцами это ужасно😅😅

[@ИгорьКовальков-м3ш]

kzbin.info/www/bejne/bXm8m2ePm7OAiK8 рили? у кого такой же шрифт, на таком мониторе?

[@AbraKadabra000]

У меня, чтобы коллеги подходя могли видеть что именно написано)

[@ИгорьКовальков-м3ш]

@@AbraKadabra000 блиииин, жадь что я на удаленке, тоже бы так сделал

[@heisserkaiser394]

А теперь немного про сам JS, попробуйте понять смысл увиденного : [1,2,5,3,8,4][4,2] == 5 Итак, объясняю: - Берём сначал укропу (последнее значение во втором массиве 2) - Потом кошачью **** (первый массив) - 25 картошек, 17 мандавошек (вся ебанутая логика реализованная в js) - Ведро воды и *** туды (берём из первого массива значение с индексом 2 равное пяти) - Охапку дров (сравниваем с пятёркой) - И плов готов! (получаем ответ true)

[@AbraKadabra000]

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

[@____Olga__]

@@AbraKadabra000 получается, что последнее обращение по индексу к массиву перетирает первое значение , потом они сравниваются нестрогим равенством если заменить на строку в массиве и сравнить строку '' 5'' === 5 строгим равенством будет false и если разобраться как работает приведение к типу в JS , то многие неочевидные вещи станут понятны

[@bloodrik]

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

[@AbraKadabra000]

@@bloodrik сам почитай и сам проверь :-Р всё там есть иначе бы не работало. В "индексер" передаётся не массив а значение. Которое сформировано с использованием оператора запятая. Почитай про оператор запятая, и может быть что-нибудь поймёшь)

[@ИмяФамилия-э4ф7в]

То, что так можно написать в JS не значит, что так кто-то пишет. Как там, большая гибкость накладывает большую ответственность (я посмотрел нового челопука, не советую)

[@flatl1ne]

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

[@Howtogoit]

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

[@flatl1ne]

@@Howtogoit вот именно, что мальчики. А мне не очень интересно разуверять последователя секты чистого кода, но раз уж ты ответил мне, то я тоже постараюсь

[@flatl1ne]

​@@Howtogoit про сокращение переменных: любой js программист, да и не только, прекрасно знает самые популярные сокращения, вроде el == element, i == index, btn == button, db == database и т.д. Это те сокращения, которые мы используем постоянно и читать их не составляет никакого труда. Почему же не использовать полное слово, вместо сокращения, чтобы "даже менеджер понял ваш код"? Во-первых, нахуя менеджеру вообще смотреть ваш код, во-вторых, чтобы уменьшить размер конечного файла и быстрее передавать его по сети === у клиента быстрее грузится ваше приложение, в-третьих, чтобы код стал более лаконичным в местах, где не требуется излишнее обьяснение происходящего "const mailBoxes = users.map(u => u.mail)", в-четвертых, чтобы меньше писать. Про обобщения в нейминге: Это неплохой совет, но какой же отсосный пример, начиная от того, что fetch возвращает тебе не юзера, а обьект ответа Response (точнее промис, который резолвит обьект ответа в случае успеха), и твой нейминг только запутает читающего код, заканчивая тем, что даже тело ответа может содержать не юзера, а что-то вроде { message: 'success', code: 0, data: и тут обьект юзера }, в общем, неубедительно Про разный нейминг для одной сущности мне понравилось Про нейминг функций тоже неплохо, но я считаю и я такой не один, что все функции (мб за исключением предикатов) должны начинаться с глаголов, т.к. функция всегда отражает некоторое действие, не clickHandler, а handleClick Про отступы тоже хороший совет А вот про комментарии это полный ахтунг! Комментарии не то, что желательны, а зачастую обязательны. Тезис про то, что код должен говорить за себя - чушь. Что, например, сможет сказать за себя функция, в которой используются только битовый операторы или функция реализующая мат. формулу или что скажет за себя функция throttle, человеку не знакомому с ней? Очевидно, что комментарии нужно использовать, но нужно использовать их грамотно. Те комментарии, что у тебя в примерах действительно лучше не писать. Комментарий должен давать понимание, для чего написана данная функция или класс, как их можно использовать, не углубляясь в детали реализации (кому надо сам прочитает и поймет). Реализацию стоит описать в комментарии, когда она не очевидна, например, использует нестандартный, но эффективный алгоритм. А уж использовать jsdoc для библиотек общих для проекта это де-факто стандарт в индустрии. Так что рекомендую тебе разобраться в этом вопросе получше, прежде чем делать такие громкие заявления

[@wraithking3406]

@@flatl1ne постарался) Автору за видео большое спасибо! Эстетика - превыше всего

[@ionizePlaying]

в Dart приватные методы все еще делаются с черточками