А ось і Next.js
🎉 Нарешті виклав довгообіцяне відео про Next.JS. Хотів вкластися в 15 хвилин, але не вийшло.
У відео буде:
👉 Відмінності Next.JS і React.
👉 Можливості (не всі) Next.JS
👉 Чого в Next.JS немає.
🧑💻 І 10 хвилин практики під час якої я покажу як створювати сторінки, як створювати API ендпоінти, як це зв'язати до купи і як працює серверний рендерінг.
Вдячний за поширення та коментарі!
@reactbeginners
🎉 Нарешті виклав довгообіцяне відео про Next.JS. Хотів вкластися в 15 хвилин, але не вийшло.
У відео буде:
👉 Відмінності Next.JS і React.
👉 Можливості (не всі) Next.JS
👉 Чого в Next.JS немає.
🧑💻 І 10 хвилин практики під час якої я покажу як створювати сторінки, як створювати API ендпоінти, як це зв'язати до купи і як працює серверний рендерінг.
Вдячний за поширення та коментарі!
@reactbeginners
YouTube
Огляд Next.JS за 16 хвилин - українською
❗ Що таке Next.JS? Чим він відрізняється від React.JS? Як створити нову сторінку або написати API ендпоінт - про все це ви дізнаєтесь з цього короткого огляду.
0:00 Вступ
0:40 Що таке Next.JS
5:17 Пробуємо Next.JS на практиці
✉️ Telegram: https://t.me/reactbeginners…
0:00 Вступ
0:40 Що таке Next.JS
5:17 Пробуємо Next.JS на практиці
✉️ Telegram: https://t.me/reactbeginners…
👍43🔥22❤🔥5✍1
🎉Next.JS оновився до версії 13.4!
Вчора, 04.05, Next випустив довгоочікуване оновлення в якому, зокрема:
1️⃣ Новий роутер з більш зручною підтримкою layout
2️⃣ Серверні компоненти
3️⃣ Спрощене отримання даних
4️⃣ Тека App замість src
Сідаю готувати нове відео, бо зміни там і цікаві і значні.
Дякую AmelianceSkyMusic за наводку!
Вчора, 04.05, Next випустив довгоочікуване оновлення в якому, зокрема:
1️⃣ Новий роутер з більш зручною підтримкою layout
2️⃣ Серверні компоненти
3️⃣ Спрощене отримання даних
4️⃣ Тека App замість src
Сідаю готувати нове відео, бо зміни там і цікаві і значні.
Дякую AmelianceSkyMusic за наводку!
nextjs.org
Next.js 13.4
Next.js 13.4 moves App Router to stable, Turbopack to beta, and introduces experimental support for Server Actions.
🔥32👍9
Цікава можливість спробувати знайти собі першу роботу:
📆 16-17.05
🌐 Онлайн
🧑💻 Вакансії для початківців від SoftServe, UKRSIBBANK, appflame, Renesas Electronics, ОККО, Sigma Software, MobiDev, Infopulse (привіт вам!)
https://t.me/Job_IT_Junior/3590
📆 16-17.05
🌐 Онлайн
🧑💻 Вакансії для початківців від SoftServe, UKRSIBBANK, appflame, Renesas Electronics, ОККО, Sigma Software, MobiDev, Infopulse (привіт вам!)
https://t.me/Job_IT_Junior/3590
Telegram
Don't Panic Junior IT Jobs
Розкрий свій талант і перетвори бажання працювати в ІТ ⠖⡨ ⡈⢆⡉⢡⢄⢠ ⡔⡑⡉⢃ ⠱⠱⣈⡘ ⡒⢑ ⠱⡒⠃ ⢐⡅⢘⢉⡨⡒ 🤝
🦖 Підключайся на REX IT FEST, де ми зібрали 10 компаній, які продовжують розвивати бізнес в Україні й пропонують вакансії для початківців.
Будемо прокачувати твої…
🦖 Підключайся на REX IT FEST, де ми зібрали 10 компаній, які продовжують розвивати бізнес в Україні й пропонують вакансії для початківців.
Будемо прокачувати твої…
🔥5❤2
✍️Не функціональні вимоги до нового проекту та наслідки✍️
У кожному проекті є функціональні вимоги - що має робити ваш застосунок, і не функціональні вимоги - як він має їх робити.
Наприклад: як швидко має працювати ваш веб застосунок? На яких екранах? На яких браузерах? Скількома мовами? Що з доступністю? Чи важливе SEO?
І на кожне з цих питань має бути дана відповідь ще до початку проекту, тому що:
1️⃣ Не функціональні вимоги складають значний обсяг роботи, який "втиснути" під кінець буде просто не реально.
2️⃣ Клієнти, розраховують, що всі ці вимоги включені в проект автоматично, що, насправді, не так, бо виконання всіх вимог збільшує обсяг робіт вдвічі а то й у тричі.
❗️Тому всі ці моменти ви обов'язково маєте проговорити з клієнтом і зафіксувати! його рішення. Інакше потім будуть проблеми на етапі прийняття робіт і оплати.
А мій список з коментарями можна подивитись ось тут
І так, це не питання рівня початківців, але ви зростаєте, тож скоро це стане вам у нагоді.
@reactbeginners
У кожному проекті є функціональні вимоги - що має робити ваш застосунок, і не функціональні вимоги - як він має їх робити.
Наприклад: як швидко має працювати ваш веб застосунок? На яких екранах? На яких браузерах? Скількома мовами? Що з доступністю? Чи важливе SEO?
І на кожне з цих питань має бути дана відповідь ще до початку проекту, тому що:
1️⃣ Не функціональні вимоги складають значний обсяг роботи, який "втиснути" під кінець буде просто не реально.
2️⃣ Клієнти, розраховують, що всі ці вимоги включені в проект автоматично, що, насправді, не так, бо виконання всіх вимог збільшує обсяг робіт вдвічі а то й у тричі.
❗️Тому всі ці моменти ви обов'язково маєте проговорити з клієнтом і зафіксувати! його рішення. Інакше потім будуть проблеми на етапі прийняття робіт і оплати.
А мій список з коментарями можна подивитись ось тут
І так, це не питання рівня початківців, але ви зростаєте, тож скоро це стане вам у нагоді.
@reactbeginners
👍22❤8💯2❤🔥1
😈Ей, хформошльопи! 😈
Звучить образливо, правда? Але часом, нас, фронтендщиків дійсно так називають. Подумаєш, що там такого складного - кинути форму, кілька полів, вбудовану валідацію, action на бекенд та й усе. Форма готова, го смузі, я створив.
🧐Але, якщо подивитись на список не функціональних вимог до проекту, все стає трошечки складніше. Навіть не трошечки, а суттєво складніше. І ось тут то і криється диявол. Ті, хто називає фронтів формошльопами, просто не розуміють сучасну складність фронт-енд проекту.
📄Простий приклад. Якщо ви задеплоєте сервіс воркер, який не передбачає оновлення - ви будете ходити за кожним клієнтом, щоб той видалив його вручну. Одна помилка і привіт. І це лише маківочка айсбергу під назвою "Простенький веб застосунок"
😎Так що коли хтось буде казати що ми прості формошльопи, згадайте перелік не функціональних вимог, лагідно йому усміхніться і додайте х1.5 до ціни ваших послуг наступного разу. А сперечатися не треба, навчання інших не ваші проблеми.
@reactbeginners
Звучить образливо, правда? Але часом, нас, фронтендщиків дійсно так називають. Подумаєш, що там такого складного - кинути форму, кілька полів, вбудовану валідацію, action на бекенд та й усе. Форма готова, го смузі, я створив.
🧐Але, якщо подивитись на список не функціональних вимог до проекту, все стає трошечки складніше. Навіть не трошечки, а суттєво складніше. І ось тут то і криється диявол. Ті, хто називає фронтів формошльопами, просто не розуміють сучасну складність фронт-енд проекту.
📄Простий приклад. Якщо ви задеплоєте сервіс воркер, який не передбачає оновлення - ви будете ходити за кожним клієнтом, щоб той видалив його вручну. Одна помилка і привіт. І це лише маківочка айсбергу під назвою "Простенький веб застосунок"
😎Так що коли хтось буде казати що ми прості формошльопи, згадайте перелік не функціональних вимог, лагідно йому усміхніться і додайте х1.5 до ціни ваших послуг наступного разу. А сперечатися не треба, навчання інших не ваші проблеми.
@reactbeginners
👍32🔥8
🗞У мене є для вас кілька новин і одне прохання 🗞
📰Новини:
1️⃣ Відео про новий Next.JS в процесі. Є шанс що буде ввечері вівторка або середи.
2️⃣ 22 травня у нас буде внутрішнє обговорення цікавої теми - Summer School 23. Детальніше про це вже після 22 травня, є надія на новий курс, але не зовсім з React-у 😉
3️⃣ На наступному тижні буде також воркшоп про пет проекти для невеличкої групи. Орієнтовно в середу ввечері. Реєстрація і подробиці буде в понеділок.
⭐️І прохання:
В понеділок будемо відкривати один дуже цікавий збір на східний напрямок - вам сподобається. Всі домовленості є, залишається питання оплати. Тож, у кого є можливість, збережіть трохи грошей до понеділка. Навіть 10 гривень будуть дуже в нагоді. Подробиці також в понеділок.
Всім тихих вихідних, бережіть себе!
📰Новини:
1️⃣ Відео про новий Next.JS в процесі. Є шанс що буде ввечері вівторка або середи.
2️⃣ 22 травня у нас буде внутрішнє обговорення цікавої теми - Summer School 23. Детальніше про це вже після 22 травня, є надія на новий курс, але не зовсім з React-у 😉
3️⃣ На наступному тижні буде також воркшоп про пет проекти для невеличкої групи. Орієнтовно в середу ввечері. Реєстрація і подробиці буде в понеділок.
⭐️І прохання:
В понеділок будемо відкривати один дуже цікавий збір на східний напрямок - вам сподобається. Всі домовленості є, залишається питання оплати. Тож, у кого є можливість, збережіть трохи грошей до понеділка. Навіть 10 гривень будуть дуже в нагоді. Подробиці також в понеділок.
Всім тихих вихідних, бережіть себе!
👍44❤10❤🔥6🔥3
🛬На довгі руки (10 км) та на день народження
👉Відкриваю збір на дрони для наших хлопців на сході. Дрони це не прості - вони можуть нести до 2кг не дуже корисного для здоров'я навантаження на відстань до 10км. Фактично це мікроарта керована оператором. Дуже ефективне рішення яке чудово працює по живій силі і по не броньованій техніці. А усілякі антенки це просто щастя
🔧Збирають їх у нас, в Києві і я вже домовився за їх виготовлення. Ціна однієї такої пташки - 24_000 гривень. Це не мало, але користі з них реально дуже і дуже багато. Особливо якщо пощастить натрапити на якусь техніку. Ціна може окупитись багатократно
💰Той, хто задонатить найбільшу суму - отримає можливість вказати напис на дроні фарбою або гравіюванням. Збір буде відкритий до кінця цього тижня
💪Я знаю, що грошей багато не буває, особливо на другий рік війни, та давайте все ж підтримаємо тих, хто зараз дає можливість нам спокійно вчитись і працювати
Я, звичайно, теж в ділі!
Монобанк
4731185629296887
38 058 /48_000/1000 гривень - 6 людей
👉Відкриваю збір на дрони для наших хлопців на сході. Дрони це не прості - вони можуть нести до 2кг не дуже корисного для здоров'я навантаження на відстань до 10км. Фактично це мікроарта керована оператором. Дуже ефективне рішення яке чудово працює по живій силі і по не броньованій техніці. А усілякі антенки це просто щастя
🔧Збирають їх у нас, в Києві і я вже домовився за їх виготовлення. Ціна однієї такої пташки - 24_000 гривень. Це не мало, але користі з них реально дуже і дуже багато. Особливо якщо пощастить натрапити на якусь техніку. Ціна може окупитись багатократно
💰Той, хто задонатить найбільшу суму - отримає можливість вказати напис на дроні фарбою або гравіюванням. Збір буде відкритий до кінця цього тижня
💪Я знаю, що грошей багато не буває, особливо на другий рік війни, та давайте все ж підтримаємо тих, хто зараз дає можливість нам спокійно вчитись і працювати
Я, звичайно, теж в ділі!
Монобанк
4731185629296887
38 058 /48_000/1000 гривень - 6 людей
👍20🔥9
❤️Воркшопчик про пет проекти❤️
🐕 Як і обіцяв - в середу,17/05, о 19:00, відбудеться мікроворкшоп про пет проекти. Орієнтуйтеся десь до години часу.
👉 Поговоримо про те, що таке пет проекти, як обирати тему проекту, і про типові помилки.
🗒 Для участі - напишіть мені в особисті. Вартість - будь-яка сума на ваш вибір від 50 гривень, яка автоматично піде на збір на дрони.
Група обмежена десятьма учасниками, щоб всі могли поспілкуватися.
Бережіть себе!
🐕 Як і обіцяв - в середу,17/05, о 19:00, відбудеться мікроворкшоп про пет проекти. Орієнтуйтеся десь до години часу.
👉 Поговоримо про те, що таке пет проекти, як обирати тему проекту, і про типові помилки.
🗒 Для участі - напишіть мені в особисті. Вартість - будь-яка сума на ваш вибір від 50 гривень, яка автоматично піде на збір на дрони.
Група обмежена десятьма учасниками, щоб всі могли поспілкуватися.
Бережіть себе!
👍17
Media is too big
VIEW IN TELEGRAM
🛩Поки я записую відео про Next.JS - подивіться на роботу дронів на які ми оце зараз збираємо 🛩
Дрон на відео як раз тієї майстерні що буде робити наше замовлення. Тож, як бачите, хлопці знають що роблять!
Допомогти на збір: 42_499 + 5502 = 48_001
Збір закрито!
П.М. Дуже не виспався через нічну атаку, то ж голос на відео може бути не супер веселий. Вибачте.
@reactbeginners
Дрон на відео як раз тієї майстерні що буде робити наше замовлення. Тож, як бачите, хлопці знають що роблять!
Допомогти на збір: 42_499 + 5502 = 48_001
Збір закрито!
П.М. Дуже не виспався через нічну атаку, то ж голос на відео може бути не супер веселий. Вибачте.
@reactbeginners
👍18
А ось і нове відео про нову версію Next.JS
Зачепили:
👉 Нову структуру проекту (тепер у нас є лише тека app без pages та api)
👉 Новий App роутер, який підтримує індивідуальні лоадери, layout-и та error-и
👉 Серверні компоненти, які не можуть бути інтерактивними, зате код, який вони використовують для рендеру не включається в бандл для фронтенду.
Детальніше у новому огляді Next.Js 13.4.2
Дякую за перегляд, поширення та лайк.
Зачепили:
👉 Нову структуру проекту (тепер у нас є лише тека app без pages та api)
👉 Новий App роутер, який підтримує індивідуальні лоадери, layout-и та error-и
👉 Серверні компоненти, які не можуть бути інтерактивними, зате код, який вони використовують для рендеру не включається в бандл для фронтенду.
Детальніше у новому огляді Next.Js 13.4.2
Дякую за перегляд, поширення та лайк.
YouTube
Велике оновлення NextJS 13.4 - короткий огляд українською
❗ Нещодавно Next.JS випустив велике оновлення в якому з'явився новий App Router, вкладені сторінки та серверні компоненти. Про все це, а також чому useState тепер може викликати помилку ви дізнаєтесь з цього короткого огляду
0:00 Вступ
0:48 Нова структура…
0:00 Вступ
0:48 Нова структура…
👍14🔥11
🎉Збір на дрони закрито (навіть трохи перебрали)🎉
❗️Якщо ви пожертвували більше ніж 2000 гривень і хочете прийняти участь в написі на дроні - будь-ласка напишіть мені в особисті!
А всі результати вже завтра 😉
❗️Якщо ви пожертвували більше ніж 2000 гривень і хочете прийняти участь в написі на дроні - будь-ласка напишіть мені в особисті!
А всі результати вже завтра 😉
👍8🍾8
Після сьогоднішньої ночі підбивати підсумки на дрони проти русні вдвічі приємніше
❤️Дякую всім хто долучився до нашого збору. Разом ми зібрали 53 251 гривню з 48 000 необхідних! Було дуже приємно бачити і нові імена, і імена тих, хто і раніше підтримував мої збори. Дякую усім!
❗️Тепер щодо напису. Ми зібрали на 2 дрони, то ж написів буде два і, відповідно буде два автори за найбільший донат. А найбільший, не анонімний донат склав 2000 гривень. Таки людей у нас двоє:
👉Максим Ха. = ЗА СУМИ
👉Андрій Ко. = ???
❗️Будь-ласка, напишіть мені в особисті до кінця дня!
❓Якщо люди не знайдуться, буде план Б - голосування на каналі, тому кидайте ваші пропозиції під цей пост. Бо текст має бути готовий вже до завтра.
😍І ще раз хочу подякувати усім не байдужим, в тому числі тим хто кидав 10, 20 гривень. Дякую вам велике, бо маленької допомоги не буває! Ви круті!
Чекаю на ваші пропозиції під постом!
❤️Дякую всім хто долучився до нашого збору. Разом ми зібрали 53 251 гривню з 48 000 необхідних! Було дуже приємно бачити і нові імена, і імена тих, хто і раніше підтримував мої збори. Дякую усім!
❗️Тепер щодо напису. Ми зібрали на 2 дрони, то ж написів буде два і, відповідно буде два автори за найбільший донат. А найбільший, не анонімний донат склав 2000 гривень. Таки людей у нас двоє:
👉Максим Ха. = ЗА СУМИ
👉Андрій Ко. = ???
❗️Будь-ласка, напишіть мені в особисті до кінця дня!
❓Якщо люди не знайдуться, буде план Б - голосування на каналі, тому кидайте ваші пропозиції під цей пост. Бо текст має бути готовий вже до завтра.
😍І ще раз хочу подякувати усім не байдужим, в тому числі тим хто кидав 10, 20 гривень. Дякую вам велике, бо маленької допомоги не буває! Ви круті!
Чекаю на ваші пропозиції під постом!
🎉13❤🔥6❤1
Напис на дроні № 2
Anonymous Poll
11%
На Контранаступ
11%
ПТН ПНХ
32%
Геть з України
33%
Москаляку на гілляку
28%
Все буде Україна
✍5
💰Звіт💰
Зібрано: 54004 грн.
Витрачено:
✈️ Дрони 2x22850=45700
🍯Смаколики: кава 1кг, кава в стіках (20шт), цигарки 1 блок=1687
Залишок: 6617
Дрони вийшли дешевші бо знайшли дешевші запчастини і хлопці запропонували роботу по збірці у подарунок. Але їм теж треба купляти наступні запчастини, плюс вони відправляють за свій рахунок тож зійшлись на половині вартості, всі у виграші.
❤️Велетенське дякую за збір! Ви зробили найкращий подарунок!
⭐️Окрема подяка Ігорю Ц. та Роману Савицькому!
Зібрано: 54004 грн.
Витрачено:
✈️ Дрони 2x22850=45700
🍯Смаколики: кава 1кг, кава в стіках (20шт), цигарки 1 блок=1687
Залишок: 6617
Дрони вийшли дешевші бо знайшли дешевші запчастини і хлопці запропонували роботу по збірці у подарунок. Але їм теж треба купляти наступні запчастини, плюс вони відправляють за свій рахунок тож зійшлись на половині вартості, всі у виграші.
❤️Велетенське дякую за збір! Ви зробили найкращий подарунок!
⭐️Окрема подяка Ігорю Ц. та Роману Савицькому!
❤19👍11🍾3❤🔥1
👩🏫Про ІТ курси без прикрас - спроба № 2👩🏫
🙃 Минулого ефіру про IT курси ми трохи налажали - не дуже конструктивно, не дуже по суті, коротше вийшло може й цікаво, але не про те.
😎Тому ми вирішили виправити ситуацію і провести максимально корисний, максимально (як для нас чотирьох) сфокусований ефір про те, що таке гарні IT курси.
🕺 В ефірі буде @job_it_junior, @babich_ss, Роман Савицький та я.
👉Приходьте, ставте запитання, сподіваюся буде корисніше ніж минулого разу.
🙃 Минулого ефіру про IT курси ми трохи налажали - не дуже конструктивно, не дуже по суті, коротше вийшло може й цікаво, але не про те.
😎Тому ми вирішили виправити ситуацію і провести максимально корисний, максимально (як для нас чотирьох) сфокусований ефір про те, що таке гарні IT курси.
🕺 В ефірі буде @job_it_junior, @babich_ss, Роман Савицький та я.
👉Приходьте, ставте запитання, сподіваюся буде корисніше ніж минулого разу.
YouTube
е22: Про ІТ курси без прикрас 2.0. Рефакторинг.
22- й випуск подкасту з одним із засновників телеграм-каналу Don't Panic Junior IT Jobs Женею Гайдученко. Гості - Сергій Бабіч, Awesome Frontend Developer, Віталій Рубан, Competence Manager & Develover в ITERA Ukraine та Роман Савіцький, Frontend Service…
👍11✍1
Навіщо розділяти компоненти❓
🔶 Стався тут у нас цікавий діалог з приводу того, де краще робити анімацію компонента - в самому компоненті, або в тому компоненті який його імпортує.
🐁 Я порадив піти третім шляхом і створити окремий компонент, який буде займатися лише одним - анімацією компонента. А далі вже по необхідності можна буде використовувати або анімований, або базовий компонент.
Але тут постало питання:
- Просто якось дивно заради одного тега створювати цілий компонент
І, на перший погляд, це дійсно трохи дивно, можна ж одразу зробити компонент анімований та й усе. Але, тут є цілих два підводних камені:
1️⃣ Всі компоненти мають тенденцією рости та ускладнюватися. Власне, анімація, це чудовий приклад саме такого "розростання" компонентів. Відповідно, чим далі, тим більше буде у вашого компонента задач. А чим більше у нього задач - тим більше підстав для змін, що призводить до крихкості ваших компонентів і, відповідно, багів.
2️⃣ Рано чи пізно, станеться ситуація, коли вам буде потрібен компонент без цих додаткових функціональностей, або з суттєво іншими. І тут вам би знову у нагоді став би базовий компонент, але його немає. Замість нього на вас дивиться кнопка на 600 рядків і питає - ну, що ризикнеш ще один if втулити чи як?
👉Тож, принцип однієї відповідальності, чудовий принцип який може суттєво спростити вам життя. Надто ним захоплюватися теж, звісно не треба, підходьте до нього з розумом.
@reactbeginners
🔶 Стався тут у нас цікавий діалог з приводу того, де краще робити анімацію компонента - в самому компоненті, або в тому компоненті який його імпортує.
🐁 Я порадив піти третім шляхом і створити окремий компонент, який буде займатися лише одним - анімацією компонента. А далі вже по необхідності можна буде використовувати або анімований, або базовий компонент.
Але тут постало питання:
- Просто якось дивно заради одного тега створювати цілий компонент
І, на перший погляд, це дійсно трохи дивно, можна ж одразу зробити компонент анімований та й усе. Але, тут є цілих два підводних камені:
1️⃣ Всі компоненти мають тенденцією рости та ускладнюватися. Власне, анімація, це чудовий приклад саме такого "розростання" компонентів. Відповідно, чим далі, тим більше буде у вашого компонента задач. А чим більше у нього задач - тим більше підстав для змін, що призводить до крихкості ваших компонентів і, відповідно, багів.
2️⃣ Рано чи пізно, станеться ситуація, коли вам буде потрібен компонент без цих додаткових функціональностей, або з суттєво іншими. І тут вам би знову у нагоді став би базовий компонент, але його немає. Замість нього на вас дивиться кнопка на 600 рядків і питає - ну, що ризикнеш ще один if втулити чи як?
👉Тож, принцип однієї відповідальності, чудовий принцип який може суттєво спростити вам життя. Надто ним захоплюватися теж, звісно не треба, підходьте до нього з розумом.
@reactbeginners
🔥23👍10❤3🤔3