Ilnur Ryazhapov Frontend

Записываю уроки на менторинг

Разобрали ангуляр пайпы

Зацените подачу и качаество, как вам?

На какие темы хотели бы подобные видео?

Смотреть урок на YouTube

Полезная статья 👇

ВАЖНЫЙ ОТВЕТ ИЩУЩЕМУ ЛЕЧЕНИЕ ОТ ЛЕНИ, ЗАМЕШАТЕЛЬСТВА И ДР. СЕРДЕЧНЫХ БОЛЕЗНЕЙ

ВОПРОС: «Какого лечение того, кем распоряжается болезнь? Как вырваться из замешательства? Что делать тому, кого одолела лень? Какой путь ведёт к достижению содействия от Аллаха? Каков выход тому, на кого набросилось смятение? Если хочет направиться к Аллаху, то ему мешают его страсти. Если желает опомниться, то его одолевают раздумья. Если хочет занять себя чем-то (полезным), то неудача не подчиняется ему».

Ибн Таймийя, да помилует его Аллах, ответил:

«Его лечение состоит в том, чтобы он обратился ко Всевышнему Аллаху, постоянно умолял и просил Пречистого Аллаха, выучив мольбы, которые передаются (от пророка ﷺ), и старался обращаться с мольбой в те времена, в которых вероятность получить ответ больше. Например, конец ночи, время призыва к молитве и икама, во время земного поклона и в конце молитвы.

И пусть в дополнение к этому просит о прощении; ибо тому, кто просит прощения у Аллаха, и затем раскаивается, Он дарует хорошее наслаждение на определенный срок.

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

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

И пусть часто произносит: “Нет мощи и силы, кроме как от Всевышнего и Великого Аллаха”, ибо посредством этого раб переносит невзгоды, переживает ужасы и достигает высоких степеней.

И пусть не устает молиться и просить, ибо Аллах отвечает Своему рабу, пока он не поспешит и не скажет: “я молился, но не получил ответа”.

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

И ведь никто не достиг ничего из великого добра – ни пророк, ни кто-либо ниже его – иначе как через терпение.

И вся хвала Аллаху, Господу миров».

Примеры того, что есть в клубе 👆

Так же буду предлагать участникам клуба менторинг в записи на выгодных условиях (за один небольшой платеж можно будет получить видеозаписи всех уроков менторинга)

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

Напоминаю, что только сегодня добавляю в клуб бесплатно, пишите уже @safarovfarukh (а то я не успеваю 😅)

В клубе движ 😏

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

На данный момент утверждаю, что в клубе будут:

- Несколько занятий менторинга с полного нуля, для ознакомления (где чисто база)

- Несколько занятий менторинга по ангуляру (для продвинутых)

- Все подкасты с большого менторинга

- Несколько тестовых собеседований на ангуляр

- Навигация с путем изучения фронтенда с нуля

- Другие полезные материалы от меня

Сегодня день, когда принимаю в клуб бесплатно

Пишите мне в личку - @ilnur_ryazhapov, и я вас добавлю

🥊 Коэффициент конкуренции

Обещал статью про статистику. Ловите.
Будем использовать данные с Хабр-карьера и hh.
Рассмотрим вакансии.

Вакансии:
Angular: 33 / 1140
React: 136 / 2917
Vue: 75 / 1594

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

Специалисты:
Angular: 9377 / 3283 / 140 / 1253
React: 49674 / 29978 / 1082 / 7139
Vue: 17478 / 8200 / 446 / 2674

По спецам: первые три в Хабре — все спецы / “ищу работу” / эксперты (свежая фича).
Последняя - из hh (спасибо эйчару с работы, которая дала данные по кандидатам).

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

Спецы:
Angular: 1 ✋
React: 6.68 👋👋👋👋👋👋👋
Vue: 2.35 ✋✋

То есть на одного ангулярщика приходится почти 6 с половиной реакт-разработчиков и чуть больше 2 вью-разработчиков.
А что насчет вакансий? 🤔

Angular: 1 ✏️
React: 3.19 ✏️✏️✏️
Vue: 1.75 ✏️✏️

Начинаете понимать?) 🧠

А теперь самое интересное — коэффициент конкуренции (количество резюме на вакансию).
✋ 🚶🚶🚶🚶🚶🚶🚶🚶🚶🚶

Возьмем данные hh:
Вот результаты:
Angular: 1.10
React: 2.45
Vue: 1.68

Для тех кто мало что понял - чем больше циферка, тем хуже. 😐

Теперь возьмем данные с Хабр-карьера (резюмехи с “ищу работу” делим на вакансии).
Там получается гигантский коэффициент, так как, в отличие от hh, резюме не скрывается само, но соотношение примерно тоже самое.

Angular: 99.15
React: 220.15
Vue: 109.33

В любом случае разница очевидна. На React конкуренция более чем в 2 раза сильнее, чем на Angular, и в 2 или почти в 2, чем на Vue, смотря на какой источник смотреть. 🤟

Поэтому не нужно обманываться тем, что “React самый популярный”, и думать, что вы там быстро найдете работу. При поиске новой работы, вам будет сложнее, чем при прочих равных на Vue и Angular, однозначно. 🔫

Исходные цифры перед вами, посчитайте сами. 🔍

когда пытаешься свалить с офиса пораньше, но начальник палит:

СКИДКИ В ПЯТНИЦУ 18 ОКТЯБРЯ 🥳

ЗАПУЩУ РЕФЕРАЛЬНУЮ ПРОГРАММУ

Если будете залетать вместе с другом – ОБОИМ СКИДКА 50%

В ПЯТНИЦУ ЖДИТЕ ССЫЛКУ НА РЕФЕРАЛЬНУЮ ПРОГРАММУ, НА ПАРУ ЧАСОВ ВЫЛОЖУ И УДАЛЮ

ВСЕГО 10 МЕСТ

Пока договаривайтесь со своими, на практике замечен, что если вместе залетаете учеба легче и веселей идет

50 ФИШЕК АНГУЛЯР ДЛЯ ПРОФИ

https://youtu.be/eYhxPa3VmQI?si=5rlgquyAvfKI-Ndh

0:00 Начало
0:42 В angular.json настроить onPush
1:26 Юзать селектор для required поля или {required:true}
3:11 Писать везде модификаторы доступа
4:28 Везде писать readonly
5:22 Отписываться с помощью DestroyService или takeUntilDestroyed
9:04 Фишка с inject чтобы не писать всегда @Self
21:44 Инжект всегда с помощью функции inject
24:50 Standalone компоненты вместо scam
26:52 Любое приложение генерить на NX
29:28 Использовать ngrxLet и ngrxPush
31:15 Следить чтобы каждый Action вызывался только один раз (NgRx)
33:45 Использовать кастомные провайдеры или inject, и убирать логику из компонента
35:58 лучше использовать типы вместо интерфейсов
43:30 Везде юзать тип Readonly
44:28 При объявлении всех объектов и массивов дописывать as const
45:43 Юзать угловые скобки вместо as
46:53 Заменить any на unknown + type guard
50:17 Деление сущностей на DTO, entity, VM
53:45 Написание адаптеров для преобразования
55:20 Использовать smart/dumb компоненты
56:24 Про разницу Enum и const Enum
59:57 Что лучше использовать вместо Enum
1:01:12 Не подписывайтесь через subscribe без надобности
1:02:22 Всегда юзайте {providedIn: ‘forRoot’}
1:03:21 Присваивайте значения полям сразу, а не в конструкторе или ngOnInit
1:05:10 Не стройте архитектур в стиле /services, /components
1:06:20 Если кода больше 300 строк думайте о разделении
1:07:27 Используйте /lazy-load
1:08:42 Делать файлы index.ts
1:10:02 Юзать или фасады или контейнеры
1:11:31 Использовать компонент стор
1:13:18 trackBy
1:14:20 Отдавать subject как asObservable
1:15:26 Использовать fetch и optimistic updates из nx
1:16:46 Использовать ngOptimizedImg для картинок
1:17:22 Собирать приложение с помощью esbuild или vite
1:18:22 Используйте фрактальную архитектуру
1:21:19 Используйте композицию директив
1:22:58 Пишите всегда private
1:23:46 Удалите cli глобально и юзайте npx
1:25:07 Юзайте source-map-explorer чтобы чекнуть bundle size
1:25:49 Юзайте angular dev tools
1:29:04 Три подхода к shared модулям
1:31:19 Юзайте ngrx вместо самописных сервисов
1:34:05 Добавьте -o чтобы проект сам открывался при сборке
1:34:58 Проекты для изучения angular
1:40:13 Скорее обновляйте Angular до последних версий
1:41:40 Изучайте zoneless - это будущее Angular
1:44:19 Как генерить форму из конфига
1:47:54 Как стартовать приложение с APP_INITIALIZER и не только
1:50:08 Обновляйте Angular через nx migrate
1:51:45 Эффекты могут быть вызваны не только экшенами
1:52:41 Не импортируйте никогда фасад в эффекты
1:54:43 Используйте viewModel для шаблонов
1:56:18 Поймите higher order observables
1:58:36 Поймите виды subjects
2:00:16 Заключение

ПОДКАСТ: ПОЭТОМУ БРОСАЮТ УЧЕБУ ПРОГРАММИСТОМ

❌ Слишком интенсивная учеба длительное время, когда человек просто истощается

❌ Неверная программа, которая погружает в отчаяние своей сложностью

❌ Постоянные метания и перескакивания с одного на другое

❌ Излишняя увлеченность каким-либо другим делом, помимо программирования

❌ Большая нагрузка по сторонним обязательствам, которые не связаны с учебой

❌ Негативный эмоциональный фон в связи с набиванием головы лишней информацией (новости и тд)

❌ Постоянные отвлечения на развлечения, листания ленты и тд, что не дает сосредоточиться и получать результат

❌ Неграмотное распределение своих ресурсов, например, когда садишься за учебу уставшим и по этой причине все кажется сложнее, чем есть на самом деле

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

❌ Отстраненность от сообщества разработчиков, отдаленность от айти сферы, отсутствие ее интеграции в образ жизни

❌ Пренебрежение своим здоровьем и сном, что ведет к общему упадку сил и снижению мотивации

❌ «Однобокая» учеба, которая, например, включает только одну техническую сторону, что неотвратимо наскучивает со временем

❌ Следования за личностями, которые насаждают ложные ценности, которые вам чужды, что в конечном итоге приводит к разочарованию и упадку мотивации. Например, слушать гуру, которые считают, что нужно вдоль и поперек изучать computer science, а иначе ты не настоящий программист

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

Нашли что-то у себя?

ТЫ НЕ НАЙДЕШЬ РАБОТУ С ТАКИМ РЕЗЮМЕ ⛔️

Главные косяки:

1. Отсутствие или недостаток опыта - он должен быть, даже если вы идете на позицию джуна, желательно иметь в резюме 1-3 года опыта

2. Места работы расписаны вода водой. "Разрабатывал компоненты", "рефакторил код", "верстал согласно макету" - этим занимается каждый фронтендер на любом месте работы. Это как если повар будет писать: "варил в макароны кастрюле", "жарил мясо на сковородке" 😄 В резюме должны быть описание проекта, ваши достижения и реальная польза, которую вы принесли

3. Упоминания онлайн-школ в местах работы. Этого достаточно, чтобы ваше резюме дальше просто не читали, не делайте так.

4. Слишком частые смены мест работы. Если у вас 3-4 места работы по полгода, имеет смысл объеденить их, чтобы hr не мучали вас вопрсоами и не думали что вы разработчик, который меняет работу по первому зову.

5. Низкая ожидаемая заработная плата и указание "Junior/Trainee" в желаемой должности. Это сразу мимо, вы сами определяете себя как новичка который ничего не умеет и готов работать за копейки.

6. Упоминания пет-проектов и фриланса. Если вы пишите в резюме про пет-проекты, это в глазах рекрутеров автоматичекски делает вас ничего реально не умеющим джуном. То же самое фриланс, для рекрутеров фриланс это нерелевантный опыт и красный флаг.

7. Резюме с "душком" джуна - это когда по разным мелочам становится ясно, что перед тобой неуверенный в себе и слабый новичок. Вы явно можете это не писать, но через то, как вы пишете, какие обороты речи используете, это становится заметным.

Смотрите в новом видео 👇

https://youtu.be/N2QJ5fgdL8g?si=JA13tSxkALkHU_nn

В ПРОДОЛЖЕНИИ МИНУСОВ РАБОТЫ - ПРОБЛЕМЫ СО ЗДОРОВЬЕМ

Вот с чем столкнулся лично я:

- Боли в шее: прошло, как купил нормальное кресло

- Боли в пояснице: прошло, как перестал сидеть на табуретке и начал тренироваться

- Краснота, раздражение и сухость в глазах: прошло мигом с покупкой очков

- Состояние дереализации: возникает, если работать больше 10 часов подряд 😄

- Непрекращающаяся боль в кисти (прям мучение): заменил тачпад на мышку, и все прошло

- Боль в копчике при сидении: до сих пор проблема имеется, покупаю подкладки под кресло, кручусь верчусь на разные стороны

- Ухудшение зрения: сделал операцию и восстановил

- Проблемы со сном: было, когда писал на реакте и нервничал от того, что не понимаю как правильно писать, либо от того, что приходится писать целые костыли, где на ангуляре решил бы вопрос за пару строк кода 😂 ну и когда работал на двух работах и физически не успевал все сделать, дорабатывал ночью

ПОЧТИ ВСЕ ПРОБЛЕМЫ РЕШАЮТСЯ, ГЛАВНОЕ:

- Не сидеть больше 1-2 часов, не вставая с компа

- Работать в очках, если глаза не болят - можно и без них

- Пользоваться нормальной мышкой, а не тачпадами

- Взять себе нормальное кресло

- Тренироваться хотя бы 2 раза в неделю

Как у вас? Обсуждаем в комментах 👇

МИНУСЫ РАБОТЫ ПРОГРАММИСТОМ

1. СЛОЖНА

2. Много сидишь за компом

3. Непредсказуемость, стресс

4. Много созвонов 📞

5. Токсичное сообщество 🫵

6. Все меняется, постоянная учеба ✍️

Минусы от меня лично:

7. Мне стало скучно 😅

8. Всем пофиг на твою работу

НО: ВСЕ ФИГНЯ, ПЛЮСЫ ЖЕСТКО ПЕРЕВЕШИВАЮТ 🤑

https://youtu.be/yekpdQrAcYE?si=7kkocNRiAd7GJjAp

ГЛАВНОЕ В ИЗУЧЕНИИ ПРОГРАММИРОВАНИЯ

1. Правильный выбор сферы и языка, обратите внимание на:
- Порог входа
- Конкуренцию, число откликов на вакансию
- Что вообще пишут на этом языке и по душе ли вам вообще это
- Не является ли сфера/технология супер нишевой, где требуются, например, только опытные спецы
- Нужно ли специфичное ПО или оборудование (как в разработке на mac)

Идете к опытному программисту и берете у него консультацию/спрашиваете в сообществе

Плохие варианты стеков для начала - геймдев, бэкенд на редких языках типа Ruby, функциональные языки типа scala

Стандартные и адекватные варианты для старта - фронтенд через верстку, python, php, java/C#(если вы умный)

2. Определитесь с программой обучения

ГЛАВНОЕ - УБРАТЬ ВСЕ ЛИШНЕЕ И УЧИТЬ ТОЛЬКО НУЖНОЕ И ОБУЧАТЬСЯ НА ОСНОВЕ НАПИСАНИЯ РЕАЛЬНОГО ПРОЕКТА

Не бегите тратить месяца на основы computer science, алгоритмы и структуры данных, это нужно в основном только для собесов

Не заучивайте наизусь теги и стили, обучайтесь напрактике и набивайте руку вместе с пониманием

Сразу работайте над проектом, чтобы указать это все в резюме

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

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

Резко и мощно стартанете в кодинге - так же резко и мощно вылетите после пары недель мучений из-за непонимания

ЛАЙФХАКИ

- Начинайте свой день хотя бы с 10 минут изучения программирования (не обязательно код, можно послушать подкаст и тп)

- Не откладывайте учебу до позднего вечера, решает не время, а "мыслетопливо" (по Дорофееву) - вечером его практически не остается

Есть что добавить? Жду в комментах ✍️

Кто хочет готовую систему, можете писать в личку @safarovfarukh | отзывы

НОВОЕ ВИДЕО НА ЮТУБ 😏

ПЕРЕД ИЗУЧЕНИЕМ ПРОГРАММИРОВАНИЯ 👇

https://youtu.be/LOZimKZ05bY?si=6XEhb3BDknHq0WgY

ЧТО БУДЕТ НОВОГО В ANGULAR 19

19 ноября выходит новая версия Angular

1. standalone: true - по умолчанию

Вкратце - в старом и страшном ангуляре были обязательны модули, затем их упростили и вообще убрали, теперь достаточно указать у компонента standalone: true, и можно не создавать модули, в будущей версии даже писать ничего не потребуется

//angular 18

@Component({
standalone: true,
imports: [ CommonMpdule ],
selector: 'standalone-component',
template: './standalone-component.html',
})
export class StandaloneComponent {…}

//angular 19

@Component({
imports: [ CommonMpdule ],
selector: 'standalone-component',
template: './standalone-component.html',
})
export class StandaloneComponent {…}

2. Повышенная производительность и более быстрая сборка (как обычно, не особо интересно)

3. Улучшенная гидратация и рендеринг на стороне сервера (молодцы, и такое с каждой версией)

4. Различные улучшения для микрофронтендов (привет всем с кровавого интерпрайза)

5. Сигналы становятся основой ангуляра - еще меньше зависимость от ZoneJS

Сигналовые input и output у нас будут вместо декораторов @Input и @Output, а model вместо ngModel и они, похоже, выйдут из статуса developer preview

Как это все будет выглядеть:

@Component({
selector: 'todo-item',
template: ``,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TodoItemComponent {
id = input.required<number>();

constructor(){
effect(() => console.log(this.id());
}
}


👆 Эффект автоматически отслеживает все сигналы, которые будут использованы в теле коллбэка, очень напоминает реактовский useEffect()

@Component(
selector: "app",
template: `
<h3>Counter value {{counter()}}</h3>
<h3>10x counter: {{derivedCounter()}}</h3>
<button (click)="increment()">Increment</button>
`)
export class AppComponent {
counter = signal(0);
derivedCounter = computed(() => {
return this.counter() * 10;
})

increment() {
console.log(`Updating counter...`)
this.counter.set(this.counter() + 1);
}
}

computed автоматически переисчитывается на основе других сигналов (привет computed из VueJS)

СТАВЬТЕ СЕРДЕЧКО - КТО ВООБЩЕ НИЧЕГО НЕ ПОНЯЛ, НО БЫЛО ОЧЕНЬ ИНТЕРЕСНО ❤️