Мої розширення до VSCode

1. Prettier Дуже звик до автоформату, стоїть на всіх енвайрментах. Якщо будуть конфлікти з EsLint - спробуйте Prettier EsLint

2. Сode Spell Checker з українським словником. Одруківки у мене часто, бісять вони мене і моїх колег, а ця штука проблему вирішує. Незабудьте додати українську: "cSpell.language": "en,uk",

3. EsLint - чудовий і дуже гнучкий інструмент для встановлення єдиних правил кодування на проекті. До прикладу, у нас заборонений прямий експорт з MUI, лише через наші врапери для нього. Без EsLint це було б досить складно зробити.

4. ImportCost - дуже допомагає якщо ви хочете контролювати розмір коду, що імпортуєте зі сторонніх бібліотек

Це майже всі мої розширення для повсякденного життя. Усілякі колорайзери я не використовую, просто вибрав максимально знайому тему з часів Visual Studio. Також маю декілька розширень для Azure та кілька спеціалізованих, коли треба щось конкретне (наприклад Tailwind або WSL), але загалом цього скромного набору мені вистачає + я хочу щоб VsCode залишалася швидкою та легенькою (я навіть вимикаю деякі періодично)

Якщо ж вам хочеться пошукати ще щось цікавеньке - ось непогана підбірка

А що ви використовуєте?)
@reactbeginners

Всім привіт, завтра, в середу, о 19:00 та 19:10 виходять одразу два відео про Next.JS:

3.1 Next.JS та стилізація, в якому ми коротенько розберемо як ми можемо стилізувати наш Next.JS застосунок та які проблеми існують з CSSinJS
3.2 Практика зі стилізацією де ми спробуємо щось намалювати на сторінці.

Загалом список виглядає ось так:

0.0 - Вступ до курсу Next.JS
1.1 - Що таке Next.JS
1.2 - [Практика] Мій перший застосунок
2.1 - NextJs, компоненти та їх види
2.2 - Справжні клієнтські компоненти в Next.JS
2.3 - [Практика] NextJs, компоненти та їх види
3.1 - Next.JS та стилізація
3.2 - [Практика] Next.JS та стилізація

Наступне відео - 4-1 Next.JS та Клієнтський роутинг буде на наступному тижні.

Бережіть себе та допомагайте ЗСУ, @reactbeginners

Не можу не привітати з перемогою, цілком заслуженою!

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

І також мої найщиріші вітання Сергію Немчинському, Віктору Турському та Наталі Попелишко!

Пропоную відсвяткувати цю нагороду донатом на наш збір на дрон ;)

Вчора вийшли два відео про #NextJs

Хто ще не дивився - подивіться і поставте лайк, бо схоже навіть ютуб Next не любить 😀

CSS - теорія
СSS - практика

Наступне відео буде про роутинг, має бути цікавішим. А практику я думаю зробити по всьому пройденому матеріалу в прямому ефірі.

Як відповідально обробити відповідь від серверу - покрокова інструкція

fetch(API.user);

1. Перевірте statusCode, звичайний fetch не кидає помилок на не 2ХХ статус коди

fetch(API.user).then((response) => {
  if (!response.ok) {
    throw new Error(`Fetch failed`, { cause: response });
  }
  return response.json();
});

2. Провалідуйте тіло відповіді, особливо якщо працюєте з "чужим" бекендом

.then((maybeUser) => {
  // 2
  if (typeof maybeUser?.id !== "string") {
    throw new Error(`UserDTO is invalid`, { cause: maybeUser });
  }
});

3. Перетворіть отриманий об'єкт на модель, якою буде користуватися frontend

.then((maybeUser) => {
  // ...2
  return { userId: maybeUser.id };
});

Паралельно, не забуваємо обробити стани коли:

1. Запит триває => показуємо індикацію завантаження
2. Запит завершився помилкою => показуємо повідомлення
3. Запит повернув "нічого" => показуємо повідомлення

І не забуваємо про AbortController (C)

Валідацію та перетворення (маппінг) моделей не обов'язково робити руками:
Yup (5.8KK завантажень, 22к ⭐️), Joi (10KK завантажень, 21к⭐️), Zod (7.6M завантажень, ⭐️29.1К )

❓Чи завжди все це потрібно? Залежить від рівня серйозності проекту. Якщо він має жити більше року і приносити гроші - варто зважити.
@reactbeginners

Я не так часто роблю збори, але давайте у кого 20 гривень ще лишилося - допоможемо добрати на Mavic Сергію.

П.М. Не плануйте нічого на вечір середи, десь з 19:00 по 20:30

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

Гепі енду, на жаль, у цієї історії немає. Герой нашої історії загинув, а нам із вами дісталась одна з тих самих банок меду. І саме ця банка й стане головним лотом у нашому коштозборі, час на який спливає усе швидше й швидше.

Збираємо 153 000 гривень на DJI Mavic 3T, який назвемо "Бджолою помсти" для зведеної механізованої роти при 184 навчальному центрі на бахмутський напрямок. Часу — вважайте, що до пʼятниці.
Наразі зібрано:
80 267 гривень

Серед усіх учасників збору розіграю ось цю банку меду, та ще декілька дрібничок особисто від мене. Дякую усім, хто долучається бодай гривнею!

https://send.monobank.ua/jar/5cRWaZqKoK
5375411213510832

Всім привіт.

Сьогодні, в понеділок, о 19:00 виходить наступне відео про #NextJS присвячене роутингу. Поговоримо про те як додавати різноманітні види нових сторінок.

А от в середу ввечері у нас буде прямий ефір на якому будемо пробувати все те що ми проходили попередньо - зробимо частину мікроблогу, тож резервуйте час - середа, 19:00.

Цей ефір - кінець першої частини курсу. Лінка буде вже завтра.

Бережіть себе, допомагайте ЗСУ і гарного всім тижня!

Як знайти невикористані експорти в TypeScript проекті

npx ts-prune -p

Вітаю 🎉, ви знайшли знайшли експорти, що або зовсім не використовуються, або використовуються в середині модуля і їм можна прибрати export.

З ростом проекту таке слід робити періодично - дозволяє більш менш безпечно видаляти зайвий код. Ще більш актуально така чистка стає, якщо над проектом працює велика кількість постійно нових людей 😉

З #NextJS буде трохи проблем, використовуйте прапорець -i для того щоб вимкнути перевірку не потрібних файлів (page.tsx, layout.tsx, etc)

Документація тут

@reactbeginners

Відео про Next.JS та роутинг вже готове для перегляду

Зараз програма виглядає ось так:

0.0 - Вступ до курсу Next.JS
1.1 - Що таке Next.JS
1.2 - [Практика] Мій перший застосунок
2.1 - NextJs, компоненти та їх види
2.2 - Справжні клієнтські компоненти в Next.JS
2.3 - [Практика] NextJs, компоненти та їх види
3.1 - Next.JS та стилізація
3.2 - [Практика] Next.JS та стилізація
4.1 - Next.JS та клієнтський роутинг

До речі, все це є в цьому плейлісті, можете на нього підписатися щоб не пропустити оновлення.

І не забудьте залишити на завтра десь півтори години з 19:00 для прямого ефіру

@reactbeginners

🎙LIVE Ця середа, 06.03, 19:00 - NextJS - клієнтська частина від А до Я

Заплановано:

1. Створення застосунку з нуля
2. Базова стилізація: reset, variables
3. Роутинг: статична сторінка, динамічна, not-found
4. Проста робота зі стейтом
5. Робота з localStorage
6. Проста пагінація

А ще, якщо не забуду, покажу дуже цікаву поведінку suppressHydrationWarning який працює трошки не так як очікується з його назви.

🤝Приходьте та поширюйте. Завтра ще продублюю на LinkedIn та попрошу вашої допомоги в поширенні.

@reactbeginners

Прохання підтримати пост і обов'язково приходьте сьогодні, о 19:00.

Буде і цікаво і корисно.

ПМ (міг - впади!)

@reactbeginners

👉 Починаємо за 5хв - беріть чай, дружину і давайте дивитися
Ставки скільки разів мене підставить Next пишіть під цим постом

Дякую всім хто прийшов вчора і обіцяне:

1. Трохи відредаговане відео
2. Репозиторій оновлений учорашнім кодом

Буду вдячний за відгуки, коментарі та лайки під відео - це допомагає його поширенню на YouTube.

Мені залишається провести сьогодні останній 1-2-1 і я візьму невеличку перерву для відпочинку.

Всіх був вчора радий бачити - якщо що пишіть)

@reactbeginners

Нещодавно побачив пост про змагання 100 days of code - коли ви пишете код кожен день, без перерви, протягом ста днів.

Ідея в принципі зрозуміла - отримати знання та напрацювати корисні звички, але зі свого досвіду скажу що з таким треба бути дуже обережним.

Розробка, хоча і може виглядати як щось просте, - потребує значних розумових зусиль та елементів творчості і таке випробування, замість корисних навичок вас може просто виснажити, або взагалі викликати відразу до розробки. А відновлення може зайняти навіть більше за ці 100 днів.

Я, коли занурююсь у якісь пет проекти паралельно з роботою, потім ще місяць можу ходити просто ніякий без бажань щось робити (навіть дійсно цікаве)

Якщо ви все ж таки хочете випробувати себе - ставтеся до цього серйозно і обережно - ніхто одразу не намагається підняти 100 кілограмову штангу як тільки почав займатися.

Тихих вихідних, бережіть себе та допомагайте ЗСУ.

@reactbeginners

Не беріть #NextJS в адмінку, це погана ідея:

1. Next, в першу чергу, це server side rendering (SSR)
2. SSR це додана складність і часом суттєва (спитайте Влада)
3. SSR адмінці до одного місця не потрібен

Висновок: ви додаєте складність в обмін на ніщо.

Для адмінки беріть щось більше до цього пристосоване - можна чистий React, можна PHP, .NET + Razor. Але не Next, не наступайте на мої граблі, не робіть каку на пустому місці

П.М. На перший погляд ці двері однакові

@reactbeginners

Що ж, вже за 10 хвилин ми розпочинаємо наш четвертий епізод "Резюме гриль", і він буде присвячений розбору резюме спеціалістів рівня Junior. 

⏰19.00
📍Де: Ютуб канал Juniverse

Чекаємо вас з нетерпінням😎

Коротенький підсумок по 1-2-1 зустрічам:

1. Заплановано сім зустрічей, з них п'ять відбулося, на дві люди чомусь не прийшли (сподіваюся що з вами усе гаразд, але якщо ви просто проспали то не треба так)
2. Теми дуже різні, від очікуваних про кар'єру/навчання до таких які сам мусив передивлятися (архітектура React з середини)
3. В цілому, мені здається такий формат ОК - але будь-ласка, хто був - дайте чесний відгук чи було це вам корисно (можна тут, можна в Link, можна в ПП)

На наступному тижні я відкрию один слот на тиждень (в понеділок або четвер) на наступний місяць і відпишусь про доступність

І на одну з тем, на яку людина не прийшла, відпишусь тут - як раз про кар'єрний шлях та розвиток, можливо комусь буде корисно.

П.М. У кого є - відкладіть трохи грошей, треба Сергію допомогти зі збором на машину (700 грн з минулого збору я як раз туди сьогодні кину)

Всім продуктивного та тихого дня.