- Видео 202
- Просмотров 824 265
Максим Гром
Канада
Добавлен 9 фев 2019
Канал по веб разработке.
Таких много в RUclips но мой особенный.
В этом видеоблоге я буду рассматривать токонсти в профессии разработчика.
Основные направление:
- js, html, css, php
- angular, nestjs, nodejs
- git, github
- OOP, Паттерны программирования, DDD, TDD
----
Чтобы поддержать канал
1) Можно поставить лайк под просмотренным видео (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов (можно решенное ДЗ)
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
Материально поддержать канал можно следующим способом
1) Перевод на карту send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
docs.google.com/forms/d/1Sx9as3eHCSo1kNyIwUQWyhPB3Wjqdtj8hUMf1uz7YRE/prefill
Таких много в RUclips но мой особенный.
В этом видеоблоге я буду рассматривать токонсти в профессии разработчика.
Основные направление:
- js, html, css, php
- angular, nestjs, nodejs
- git, github
- OOP, Паттерны программирования, DDD, TDD
----
Чтобы поддержать канал
1) Можно поставить лайк под просмотренным видео (или дизлайк, если не понравилось видео)
2) Оставить комментарий более 5 слов (можно решенное ДЗ)
3) Досмотреть видео до конца (так удержание будет выше и мне это поможет в продвижении)
4) Оставить отзыв в комментариях, что можно улучшить в видео, чтобы не хотелось его закрывать
Материально поддержать канал можно следующим способом
1) Перевод на карту send.monobank.ua/7oqmsFg3Y
2) Пройти опрос, чтобы помочь выбрать подходящие варианты поддержки
docs.google.com/forms/d/1Sx9as3eHCSo1kNyIwUQWyhPB3Wjqdtj8hUMf1uz7YRE/prefill
Как я в канаде работу искал, или лайхаки при составлении резюме
Разговорное видео, где я делюсь как и с каким резюме я нашел работу в Канаде в Торонто в топ 1 Банке как Techlead Frontend Developer
Основные советы:
- писать сопроводительное письмо когда подаетесь на вакансию (cover letter)
- составлять резюме под тип вакансии если не под каждую вакансию
- обновить свой профиль на linkedIn и заполнить там всю историю проектов
- резюме должно быть из сплошного текста, заголовков и списков. Не используй таблицы и более сложные варианты оформления, так как робот будет сканировать документ
- указывать нужно заслуги в том порядке в каком будет интересно читать работодателю
- указывать нужно проекты над которыми работал и процент и ответственность в этом проекте
Резю...
Основные советы:
- писать сопроводительное письмо когда подаетесь на вакансию (cover letter)
- составлять резюме под тип вакансии если не под каждую вакансию
- обновить свой профиль на linkedIn и заполнить там всю историю проектов
- резюме должно быть из сплошного текста, заголовков и списков. Не используй таблицы и более сложные варианты оформления, так как робот будет сканировать документ
- указывать нужно заслуги в том порядке в каком будет интересно читать работодателю
- указывать нужно проекты над которыми работал и процент и ответственность в этом проекте
Резю...
Просмотров: 2 360
Видео
HostDirectives полезная фича angular? Миксуем директивы с компоненом. Практика
Просмотров 2,3 тыс.Год назад
HostDirectives новая фича доступная для standalone directive позволяет решить ряд задач которые раньше было сложно решить путем композиции Первая задача - добавление директивы на компонент, даже если это PageComponent или DynamicComponent Вторая задача - устранение конфликтов инпутов директивы Дополнения по этому видео следует ждать после выхода плейлиста по сервисам в angular Код готового урок...
Shared Module - любимый антипаттерн angular разработчиков. Как он влияет на размер бандла?
Просмотров 3,4 тыс.Год назад
Видео сумбурное, переснять не получается, если тяжело, то переходите к краткому гайду. Shared module это антипаттерн который вносит ряд проблем в проект: - увеличивает бандл на размер не используемых компонентов - не дает возможности использовать private компонентов - сложный в поддержке и рефакторинге - и много другого В этом видео я показал насколько изменился размер бандла при уходе от общег...
Angular standalone component. Private component. Как перейти от модулей к standalone components
Просмотров 3,7 тыс.Год назад
Модули позволяют создавать приватные юниты, такие как компоненты, директивы, пайпы. Новый подход, где модуль совмещен с компонентом не имеет возмжности создавать приватные юниты. В этом видео я показал недостаток standalone compoent, но и показал как на них перейти и какой выигрыш Код готового урока: github.com/MaksymGrom/angular-example/tree/modules_sa_private Инструкция по установке angular п...
Модули Angular, какие задачи решает, как создавать.Angular Module. Модульное мышление
Просмотров 4 тыс.Год назад
Модуль это кирпичик в архитектуре angular, тема достаточно интересная и комлексная, но мы уже готовы ее рассмотреть. В этом видео показал как модуль делает приватные юниты, умеет прокисровать юниты и как angular не разрешает юнитам быть во многих модулях Приятного просмотра и спасибо за активность под видео Код готового урока: github.com/MaksymGrom/angular-example/tree/modules_general_view Инст...
Как обновить Angular до последней версии. Обновление простого проекта с V13 до V16
Просмотров 1,7 тыс.Год назад
Обновление angular до последней версии типичная задача, учитывая что angular обновляется каждые пол года. В этом видео я показал общую стратегию для обновления приложения написанного на angular. В моем случае я обновил angular 13 до версии angular 16. Хоть проект и пустой, но основная идея легко переиспользуется Код готового урока: github.com/MaksymGrom/angular-example/tree/start_v16 Инструкция...
Angular специальные селекторы. ::ng-deep, :host, :host(), :host-context()
Просмотров 2 тыс.Год назад
Стили в angular в компоненте изолированы версткой компонента. Для более гибкой конфигурации css в angular предусмотрены селекторы помощники, такие как :host, :host(), :host-context() и ::ng-deep Такая конфигурация позволяет создавать темы стилей, связывать стили компонента с классом модификатором, а также менять стили дочерних компонентов или верстки которую прислал сервер В этом видео я показа...
Angular почему нельзя отключать ViewEncapsulation. Подключение глобальных стилей в проект
Просмотров 1,2 тыс.Год назад
Angular гибкий фреймворк с большим количеством функционала и конфигураций. Одна из таких конфигураций это отключение encapsulation в компоненте. Может показаться что это хорошая опитимизация, но за этим скрывается критическая проблема добавления стилей. Эту проблему я ракрыл в этом видео, это поможет вам избежать проблем на реальном проекте Код готового урока: github.com/MaksymGrom/angular-exam...
Angular подключение стилей в компонент. Encapsulation. ViewEncapsulation
Просмотров 1,2 тыс.Год назад
Angular компонент состоит из TS / HTML / CSS кода, каким образом можно добавить css к компоненту и какой способ чаще всего используется я показал в этом видео. Редко когда стили пишутся на чистом css, angular позволяет использовать популярные препроцессоры из коробки, такие как sass. В этом видео вы узнаете о трех способах подключить css к компоненту и узнаете что такое инкапсуляция стилей или ...
Angular Directives. Передача ng-template через структурную директиву в Table Component часть 2
Просмотров 1,1 тыс.Год назад
В этом видео раскрыт вариант продвинутого использования структурных директив для передачи шаблона в компонент. Директива может быть транспортым элементом для связи параметов и ссылки на шаблон и извлечении директив через ViewChildren. В этом видео все это показано наглядно В продолжении будет рассмотрен более сложный вариант этого паттерна Код готового урока: github.com/MaksymGrom/angular-examp...
Angular Directive. Аналог Mat Table. Структурная директива для передачи шаблона
Просмотров 2,1 тыс.Год назад
В этом видео раскрыт вариант продвинутого использования структурных директив для передачи ng-template с параметрами в компонент. Директива может быть транспортым элементом для связи параметов и ссылки на шаблон и извлечении директив через ViewChildren. В этом видео все это показано наглядно В продолжении будет рассмотрен более сложный вариант этого паттерна Код готового урока: github.com/Maksym...
Angular структурные директивы, отличие от атрибутивной
Просмотров 2,1 тыс.Год назад
Чем отличается структурная диектива от атрибутивной? Все дело в звёздочке! Рассмотрим как создать структурную директиву и как с ней работать как с атрибутивной. В этом видео рассмотрим как передать параметры в структурную директиву, как получить значения из директивы назад Structural directive in Angular это когда мы используем обычную директиву с префиксом звездочки Больше информации в видео и...
Angular Rendere2, Tooltip Directive с нуля
Просмотров 2 тыс.Год назад
Для взаимодействия с DOM API в Angular рекомендуется использовать сервис Renderer2. Почему не Renderer? Да потому что Renderer устарел. В этом видео я расскажу о возможностях Renderer2 и создам Tooltip Directive для отрисовки тултипы на любом DOM элементе. Renderer2 создержит большое количество методов помошников для взаимодействия с DOM. Обычно я не использую его в работе, но много раз встреча...
Angular Directive Host element, component, template и пример декоратора Optional
Просмотров 1,9 тыс.Год назад
Angular Directive гораздо мощнее чем кажется. Директива имеет доступ к HTML Element на котором она была создана, в этом видео я показал как это сделать. Более того, директива может получить доступ к компоненту и работать с ним как с обьектом, а если компонента нет, то можно подавить ошибку через декоратор Optional. И не менее важно, директива повешенная на ng-template может получить к нему дост...
Angular directives, создание директивы, пример highlight директивы
Просмотров 2,6 тыс.Год назад
Angular directives, создание директивы, пример highlight директивы
Angular async pipe своими руками (DIY). Глубокий разбор реализации async pipe
Просмотров 3,1 тыс.2 года назад
Angular async pipe своими руками (DIY). Глубокий разбор реализации async pipe
Angular async pipe. RxJS на новом уровне при таком подходе
Просмотров 6 тыс.2 года назад
Angular async pipe. RxJS на новом уровне при таком подходе
Date pipe angular. Локализация и настройка формата даты
Просмотров 2,8 тыс.2 года назад
Date pipe angular. Локализация и настройка формата даты
Pipe из коробки Angular. Как найти все Pipe в проекте? Как пользоваться документацией?
Просмотров 2,1 тыс.2 года назад
Pipe из коробки Angular. Как найти все Pipe в проекте? Как пользоваться документацией?
Angular Pipe. Как создать пайпу и почему нужно их использовать?
Просмотров 7 тыс.2 года назад
Angular Pipe. Как создать пайпу и почему нужно их использовать?
NgAfterViewInit & NgAfterViewChecked. ViewChid & ViewChildren декораторы в Angular
Просмотров 3,1 тыс.2 года назад
NgAfterViewInit & NgAfterViewChecked. ViewChid & ViewChildren декораторы в Angular
AfterContentInit & AfterContentChecked. ContentChild. Как передать шаблоны без Input
Просмотров 3,4 тыс.2 года назад
AfterContentInit & AfterContentChecked. ContentChild. Как передать шаблоны без Input
ngOnChanges vs ngDoCheck. ChangeDetectionStrategy OnPush в Angular
Просмотров 9 тыс.2 года назад
ngOnChanges vs ngDoCheck. ChangeDetectionStrategy OnPush в Angular
Constructor vs OnInit где писать код? OnDestroy, все варианты отписки в компоненте
Просмотров 5 тыс.2 года назад
Constructor vs OnInit где писать код? OnDestroy, все варианты отписки в компоненте
Angular lifecycle hooks. Методы жизненного цикла компонента
Просмотров 6 тыс.2 года назад
Angular lifecycle hooks. Методы жизненного цикла компонента
Разработка Menu UI компонента. HostBinding, HostListener. Как подписаться на window в Angular?
Просмотров 5 тыс.2 года назад
Разработка Menu UI компонента. HostBinding, HostListener. Как подписаться на window в Angular?
ng-template, ng-content, ng-container, *ngTemplateOutlet, context лайфхаки. Angular
Просмотров 20 тыс.2 года назад
ng-template, ng-content, ng-container, *ngTemplateOutlet, context лайфхаки. Angular
Angular Input Output декораторы и как сделать двустороннее связывание в компоненте
Просмотров 9 тыс.2 года назад
Angular Input Output декораторы и как сделать двустороннее связывание в компоненте
Angular. Аттрибуты, классы и стили в шаблоне. NgStyle, NgClass, Attr.
Просмотров 3,9 тыс.2 года назад
Angular. Аттрибуты, классы и стили в шаблоне. NgStyle, NgClass, Attr.
Angular. Структурные директивы. *ngIf, *ngFor, *ngSwitchCase (structural directives)
Просмотров 4,6 тыс.2 года назад
Angular. Структурные директивы. *ngIf, *ngFor, *ngSwitchCase (structural directives)
Я пришел к следующей схеме: - поднимать быстро проект на NestJs и в случае успеха из него делать Backend For Frontend и параллельно писать монолит уже на PHP и к нему обращаться из ноды. - Писать сразу на PHP а NodeJs для минизадач (стриминг, сокеты, микросервисы) PHP медленноизменяемый. что я поставил сегодня, я запущу через 3 года с composer install и все пакеты подтянутся. Да, и ноду я стараюсь минимум окружать пакетами сторонними. Даже уже от TS отказываюсь
А алгоритмы не спрашивали?
@@Алексей-б3ц6в не спрашивали, им нужен был Техлид, вот и вопросы в эту сторону больше шли. До сих пор работаю, полет нормальный
11:13 лучшие видеоуроки там)
7:25 Для инициализации можно создать effect, отловить встроенную action ROOT_EFFECTS_INIT и затем запустить initAuthData() initEffect$ = createEffect(() => this.actions$.pipe( ofType(ROOT_EFFECTS_INIT), map(() => initAuthData()) ) ) ROOT_EFFECTS_INIT - запускается после того как все эфекты добавлены
Если модуль подключен как LazyLoaded то он пропускает ROOT_EFFECTS_INIT 😢
вместо устаревшего delayWhen можно использовать concatMap и delay concatMap((action) => of(action).pipe( delay((action.exp ?? 1) * 1000 - 60 * 1000 - Date.now()) )), у меня exp?: number | undefined поэтому использую (action.exp ?? 1)
@@pzaydulin rxjs.dev/api/operators/delayWhen#example Вот рекомендуемый паттерн для этого из документации rxjs
Спасибо, огромное, за ролик!😊
Для typeORM 0.3 теперь требует DataSource создаем *ormconfig.ts* import { DataSource, DataSourceOptions } from 'typeorm'; export const dataSourceOptions: DataSourceOptions = { type: 'mysql', host: 'localhost', port: 3306, username: 'root', password: '', database: 'test', entities: ['dist/**/*.entity{.ts, .js}'], dropSchema: false, synchronize: true, migrationsRun: true, logging: false, migrations: ['dist/**/db/migrations/*{.ts, .js}'], }; const dataSource = new DataSource(dataSourceOptions); export default dataSource; для использования в модуле *imports: [TypeOrmModule.forRoot(dataSourceOptions)],* *package.json* "typeorm": "ts-node -r tsconfig-paths/register ./node_modules/typeorm/cli.js", "migration:create": "npm run typeorm -- migration:create ./src/db/migration/%npm_config_name%", "migration:run": "npm run typeorm -- migration:run -d ormconfig.ts" на "cli" {migrationDir} в ormconfig теперь ругается, поэтому просто удалил и в package.json указываю полный путь ./src/db/migration/ Использование: npm run migration:run npm run migration:create --name=foo *Если скрипты запускаются в Windows для передачи имен используется %npm_config_name% ($npm_config_name Linux, Mac)*
ruclips.net/video/F_OUtfJLcHo/видео.html чтобы первоночальный код работал возможно Макс не указал -- (двойной дефис) в команде
Я зміг))
так и не понял для чего нужен ngDoCheck
Когда нужен свой change detection механизм. Например в компоненте рисуется /D3/SVG/Canvas и нужно синхронизировать со стейтом angular. SVG ангулар может сам обрабатывать, но вот D3 синхронизацию уже нужна такая гибкость
ЭТО ПРОСТО ЛЕГЕНДАРНЫЙ УРОК!!! БОЛЬШОЕ СПАСИБО!
БОЖЕЕЕ КАК ЖЕ ЭТО ПИЗДАТО
а как же tree shaking? standalone components по факту не решает никакой проблемы. Он поможет избавится от сущности модулей, что сократит код на 3 строчки, но при этом все импорты затащите в компонент. Как по мне делать мелкие модули очень разумно. Но так же я не отрицаю удобвство standalone component если у этого компонента минимум зависимостей либо нет вообще. До появления standalone я видел в проекте shared mudules для пайпов, директив. Я не импортировал эти модули, а просто регистрировал эти сущности в тех модулях где это нужно(естесвенно если у этих сущностей не было никаких зависимостей).
Действительно tree shaking работает с shared модулями, это конечно же увеличивает время билда, но не бандла. Затянуть сущность где используется ангулар не разрешит, так как только в одном месте можно делать регистрацию Интересный момент, что я тестировал stand alone component и в 16 ангулар tree shaking для них не сработал, если импорт был то в бандле будут По этому делать shared со standalone components пока не рекомендую да и вообще :) Но тема standalone components толковая и за ней будущее большинства компонентов
Максим, спасибо Вам большое! Ещё 4 года назад нашёл Ваш канал, но тогда был совсем джуном, трудно было понять. Сейчас, по прошествии лет, очень хорошо заходят Ваши прекарсно раскрытые уроки, благодарю!
супер
Коли ж будуть нові відео 😢
как быть с вариантом когда в input set приходит объект и в нем меняется какое-то из свойств (не весь объект целиком)?
@@raprap630 это грустная часть angular, что это легче сделать чем в других решениях Нужно придерживаться иммутабельного подхода, NGRX позволяет хранить данные с учетом иммутабельности Обычно все придерживаются такого подхода, с этим нет больших проблем, но рефакторить старый код сложно…
SELECT DISTINCT Price AS SecondHighestPrice FROM Products ORDER BY Price DESC OFFSET 1 ROWS FETCH NEXT 1 ROWS ONLY;
Привет Макс) Круто объясняешь, единственный момент когда мы вместо ngOnChanges используем set, дополнительно к set добавляется get, по идее get вызывается почти всегда, отсюда вопрос не влияет ли это на производительность? Если к примеру будет 10 гетеров)
@@dmytrokapustiuk9531 привет 👋 Set и get я бы не рекомендовал использовать :) Get должен выполнять очень простую операцию, причем детерминированную (которая всегда вернет тот же результат если параметры не изменились) и тогда все будет нормально с производительностью. Как делать не нужно, в getter делать новый observable (через добавление динамически pipe к существующему observable), также не нужно копировать объекты в getter, иначе поменяется ссылка Какие паттерны есть для того чтобы не иметь геттер и сеттер ( или иметь их более надежном виде ) 1) ngOnChange для запуска перерасчета и сохранения в свойство компонента 2) rxjs стрим, все можно конвертировать в стримы и описать логику расчета один раз в ngOnInit (тут бы я держал слой умного и простого компонента) 3) новая фича - signals поможет сделать это красивее с точки зрения кода Ну и разумеется, тяжелые вычисления, если сильно хочется во время отрисовки их делать, то можно вынести в pipe, как минимум если это по SOLID и более одного компонента будут использовать это (гипотетически или практически)
Спасибо, Максим за ваш труд!
Спасибо за урок!!!
По умолчанию ставится последняя версия и начинает конфликтовать с версией Angular. Нужно ставить соответственно npm install @ngrx/store@14.0.0 --save
Кто изучал Python, подскажите с чего начать его учить если я в программирование чайник ?. Имеет смысл идти именно на эти курсы или лучше что ни-будь подешевле выбрать и реальное ли его изучить по книгам и видосикам из RUclips ?. Планирую войти в backend и с помощью "Методички" ХаудиХо буду изучать всё аналогичное требованиям современного рынка труда. Ну очень нужна помощь в этом деле, буду безумно благодарен.
Спасибо за материал!
О привет)
@@dmytrokapustiuk9531 привет 🤝 welcome :)
Спасибо за урок!!!
Спасибо за урок!!!
Спасибо за урок!
Очеь круто! Есть вопрос: если больше одного модуля используют один и тот же модуль (например FormsModule импортирован в каждый такой модуль), то FormsModule будет один на весь проект или несколько (свой на каждый модуль)?
Один на весь проект 👍
Спасибо за ваш труд!!!
После реакта сложно, но круто! Спасибо огромное за курсы!
5 и 6 разве аналогичны? Насколько я понял, в 5 вручную передаём экземпляр сервиса в каждом месте, где инъекция будет, а в 6 поставили @injectable и автоматом всё будет делать ангуляр, создаст один общий 6?
В 5 пункте не ясно почему сервис не injectable если по итогу инъекция происходит Очень круто!
Вы прекрасно объясняете, выкладывайте больше видео, пожалуйста! Ангуляр обновляется быстро, а хороших видео катастрофически мало.
сегодня мучался со стилизаций вложенного компонента. Спасибо!
Максим, благодарю вас за труд, за отличное разъяснение материала! У вас отличная подача материала и подробно разъясняете довольно не легкий материал для понимания простым языком!
Я не могу понять, как можно устраиваться лидом и доказывать, что ты сеньор и не умеешь писать тесты ?? Как это работает ?? Где гитхаб, где доказательства кода ?? Ученый, который так и не стал учёным 🤣🤣 Зачем ты так прикалываешься ?
Хз, не понятно) работаю теперь лидом, и по иронии судьбы буду разрабатывать стандарты по написанию тестов 🙃 Интересно как часто гитхаб на собесе смотрят, когда собеседуют 10 человек, хотелось чтобы они резюме прочитали 😅
@@grommaks в твои функции входит набор сотрудников и проведение собесов ??
@@ugin-nb4sy на 70% работаю как разработчик в команде На 30% делаю задачи уровня отдела Максимально технически ориентированная должность, иногда с архитекторами работаю, иногда с командными тех лидами Правда недавно сделали менеджером для двух разработчиков… Если рассматривать ветку, то следующая позиция это principal developer Условно мою позицию можно переименовать как эксперт front end, я привык когда Техлид это у кого есть команда, но у нас это squad tech lead P.S. За Hiring не отвечаю, в прошлой компании привлекали, тут еще ни разу
на 12:20 подсказки value: и prefix: для записи метода transform() какое расширение показывает подсказки, о том какие параметры мы передали?
Webstorm из коробки может это делать
May can you create video - how to build GRUD project with ANGULAR 17 includ JWT token,Reduce,RXJS and best practices .NET CORE API .(я присоединился к каналу)
Очень полезная информация. Я серверный программист, начал изучать ANGULAR. Очень профессионально. Акцент на том, что будут спрашивать на собеседовании.Thanks a lot.
Канал в котором лежит золотой клад знаний, не только по ангуляру, но и в целом, если вы захотите стать разработчиком, тут находиться один из лучших материалов, автор научит Вас как правильно делать, расскажет об альтернативах, разберет плюсы и минусы, тут все что нужно разрабу.
А можно было использовать with?
Единственное чтобы добавил так это то что в ngFor можно получить первый и последний элемент используя такие переменные как first и last, поставил лайк, топ ролик.
Thanks a lot.Usefull content.
Такая жизнь, такой JavaScript, извините =)
спасибо большое еще раз за прекрасное объяснение! за труд! мне любой формат нравится, главное понятное объяснение на примерах 🙏
спасибо большое за подробный, интересный, понятный курс 🤩🙏
девочки тоже есть)) у нас на проекте больше женского пола, чем мужского
structuredClone()
комфорт Кити важнее личного комфорта)