Free React For Beginners
3.46K subscribers
231 photos
5 videos
1 file
385 links
💻 Про #React та #frontend та #веб розробку
🧑‍🎓 Для початківців і не тільки

👉 https://www.youtube.com/@reactdev
Download Telegram
UPD: ЗБІР ЗАКРИТО!
Проміжні підсумки збору на 2 FPV для 82 ОДШБр

❤️ За першу добу ви зібрали 34_500 гривень, або 76%! Це дуже круті результати - фактично, півтора дрони вже є залишилось зовсім трохи. ❤️

Тепер по претендентах на книжку:

1️⃣ 8888 - Ігор Цв. (знаю)
2️⃣ 5000 Олексій Андрійович Вил. (не знаю 😢)
3️⃣ 2222 Ігор Ол. (знаю)

Я думаю буде справедливо, якщо 2 та 3 місця зможуть також замовити напис на дроні, за бажанням звісно.
Тому, Олексію, якщо ти це читаєш - напиши мені в ПМ будь-ласка.

❗️ Важливий момент - я ще не складав повний список благодійників, але вже бачу що багато хто переказує гроші без зазначення контактних даних. Якщо це навмисно - ОК, якщо просто забули - обов'язково мені напишіть! Можна просто в ПП.

До-речі, дрони вже замовлені, тепер питання лише в оплаті і транспортуванні. А на фото - наша попередня доставка, яку ми робили на мій ДР.

Всім добра, продовжуємо збирати далі, залишилось не багато.
👍25
😅 Скажу відверто - я не дуже вмію в анімацію. Максимум - це transition, keyframes то вже складно, а 3D анімація то взагалі. Отой куб що ви бачили - все на що я спроможний разом з гуглом 😁

😎На щастя, не всі такі слабенькі як я і, також, на щастя є люди які готові цим умінням ділитися. Тому, запрошую вас до того хто на цьому розуміється і може показати як це робиться за допомогою JS: DOU livecoding з Юрієм Артюхом. Створення 3D анімації

👉Подія відбудеться 12 вересня (вівторок) о 19:00 тут (телеграм канал)

Приходьте, має бути цікаво!
👍19🔥51
Що ж шановні - це кінець тижня і гарний час сказати всім дякую.

👉 Дякую тим хто донатив по 50 гривень. Не буває маленьких донатів, а часом і 50 гривень буває важко знайти.
👉 Дякую тим хто донатив більше за довіру та щедрість.
👉 Дякую тим хто репостив і лайкав - не буває маленької підтримки.

🍺Особлива подяка BeerJS Житомир, якому, до-речі, виповнюється шість років, тож не забудьте їх поздоровити!

❤️ А ще хочу окремо подякувати за розуміння. За те що ніхто не написав, що "два дрони нічого не змінять". За те що ніхто не сказав - "чому я маю віддавати свої гроші, коли яйця по 17 гривень". За те, що ніхто не сказав що це не потрібно. Дякую всім вам!

Тепер про результати:

Зібрали: 49280 гривень
Долучилося: 58 людей
Найбільший донат: 13_000 гривень від пані Марини Д. Будь-ласка, вийди на зв'язок, тебе чекає книга Дугласа Крокфорда з його особистим підписом!
Друге місце: - Ігор Ц. - 8_888
Третє місце: - Олексій Вил. - 5000

❗️ Ігоре, Олексію - якщо є побажання щодо напису на дроні - прошу в ПП.

Розіграш другої книжки - "Чистий код" Роберта Мартіна (до-речі видання 22 року, свіженьке), а також мерчу, буде наступного тижня, відео я викладу прямо сюди, тож очікуйте 😀

✍️ Звіт буде обов'язково, як тільки буде підтверджено отримання дронів. Думаю теж до кінця тижня маємо впоратися.

Ще раз дякую, бережіть себе і скоро побачимося.
25🔥5
💪Вийшов мажорний реліз Bun - нового runtime для JavaScript

😎 Обіцяє тону бонусів - від нативної підтримки TypeScript та TSX до бандлінга та пакетного менеджера та вбудованої бази даних. І все це зі швидкістю світла. Робимо завтра ефір для огляду?
Anonymous Poll
57%
Так
40%
Так, але що таке runtime?
3%
Нє
👍61🔥1
Bun - випробовуємо новий runtime для JavaScript

Коли
: В понеділок, 11.09.23 о 19:00
Де: YouTube канал
Програма:

👉 TypeScript
👉 Тести
👉 React

Плюс проведемо розіграш призів за попередній збір 😊

П.М. Дякую всім причетним за нову обкладинку)
👍257
Відредаговане відео про Bun вже готове для перегляду.

😅Повноцінно* React ми так і не запустили, зате за три хвилини написали примітивний скраппер та розіграли призи з попереднього збору.

Таймінги:

0:00 Про Bun
06:10 Практичні експерименти
42:15 Розіграш призів

* Але боком-скоком таки змогли)

Завтра ще буде коротеньке відео підсумок, тож очікуйте.

Всім гарного дня і бережіть себе.
👍262🍾2
Інструкція: Як налаштувати #NextJS з нуля - prettier, eslint, jest, автоматизація

Хто цікавився як налаштувати Next.JS v13.4 з нуля - прошу ознайомитися з цією інструкцією.

В програмі:

- Prettier
- EsLint
- Автоматизація форматування з husky на commit
- Jest і його автоматизація на push
- Підказки для деплойменту Azure

Мінімум води + готовий код (писав як для себе)

❤️ Буду вдячний за поширення!

@reactbeginners
52🔥16
😊П'ятниця - час для гарних новин 😊

⭐️Зірки зійшлися (до-речі, не в останню чергу завдяки вам) і я буду виступати оффлайн на React+TS fwdays’23 з дуже цікавою темою:

👉 Складнощі формошльопства в 2023 році, або про не функціональні вимоги до сучасного фронт-енд застосунку.

Я спробую показати, що сучасний веб, зовсім трішки складніший ніж <form><input name="email"/></form> і має дуже і дуже багато чого важливого і цікавого.

Хто хоче побачити що в мене вийде - приєднуйтесь!

🔥Оопс, а в мене ще й є знижка на 15% на усі квитки))) Пишіть, не соромтеся!
🔥31👍53🍾1
❗️Зміна форматування файлу next.config.js може призвести до зміни в самому білді #NextJS

В задачі питається - ДЕ Я ТАК НАГРІШИВ?

Поки без подробиць, бо ще розбираємось, але схоже на trailing coma.

П.М. Все всім відправлено, чекаємо на звіт.
4
Навіщо тестувати код і чому за це платить замовник?

Код ми тестуємо щоб дізнатися:

1. Чи коректно працює нова функціональність
2. Чи не зламали ми стару функціональність
3. І дізнатися це швидко, а не через три дні коли це протестує QA або користувачі на проді.

Замовник за це платить, тому що:

1. Баги з прода виправляти і довше і ризиковіше, ніж баги які до проду так і не дійшли
2. Користувачі менше страждають і приносять більше грошей замовнику
3. Зменшується time-to-market - нова фіча швидше долітає до проду і починає приносити прибуток.

Але є нюанс....
👍152
Free React For Beginners
Навіщо тестувати код і чому за це платить замовник? Код ми тестуємо щоб дізнатися: 1. Чи коректно працює нова функціональність 2. Чи не зламали ми стару функціональність 3. І дізнатися це швидко, а не через три дні коли це протестує QA або користувачі на…
Нюанс полягає в тому що:

👉 З однієї сторони, замовник хоче мати 100% покриття коду щоб бути абсолютно впевненим що нічого не зламано.
👉З іншої сторони, замовнику потрібна функціональність, а не тести, які прибутку не приносять і він не хоче аби розробники витрачали на це час.

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

✍️В результаті - отримуємо конфлікт бажань з реальністю - нам потрібне 100% покриття тестами, яке ще й не відбирає час розробника.

І що робити?
👍111
Free React For Beginners
Нюанс полягає в тому що: 👉 З однієї сторони, замовник хоче мати 100% покриття коду щоб бути абсолютно впевненим що нічого не зламано. 👉З іншої сторони, замовнику потрібна функціональність, а не тести, які прибутку не приносять і він не хоче аби розробники…
І що ж його робити?

1. Забити*
. Жарти жартами - це дійсно дуже популярний варіант. Але ви маєте розуміти що за все доводиться платити і за "забити" теж. Рано чи пізно на проді з'явиться веселий баг після якого замовник почне вимагати тестування.

2. Тестувати що попало, аби швидко і замовник бачив гарні числа в репортах. Не робіть так, це найгірший з варіантів - тому що і впевненості немає, і час витрачено. Вже краще перший варіант - хоча б собі час зекономите.

3. Працювати з замовником:

По-перше: пояснити що 100% покриття коду не потрібне і майже не можливе, якщо ми говоримо про справжні числа. Більше того воно ще й шкідливе, тому що буде сповільнювати розробку.

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

По-третє: - використовувати правильні інструменти. Наприклад один E2E тест з перевіркою процесу купівлі покриє вам набагато більше ніж десяток юніт тестів і принесе більше користі. І навпаки, математику набагато простіше покрити звичайним unit тестом, і ви точно будете знати що там усе добре.

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

*До-речі, якщо ваш застосунок на початку розвитку і має нестабільну функціональність, то забити - цілком правильний варіант.

П.М. Вважайте це анонсом до відео про тестування

@reactbeginners
🔥24👍7
Трохи гарних новин - дрони вже на півдні України і чекають на свій перший обліт.

До речі, на фото два моїх колеги які служать разом.

✍️ Тепер звіт:

Зібрано: 49_380
Витрачено: 45_300
Залишок: 4_080

Ще зібрав їм кавову торбинку + сухих батончиків + шоколад (+2 до моралі)
Залишок трохи почекає (є деякі плани).

❤️ А ще - одна добра душа закинула 20USD через наш OpenCollective - дякую друже

Всім дякую, тепер чекаємо на гарні відео)
🔥214👍1
Forwarded from Don't Panic Junior IT Jobs (TelepostBot)
🤓Ловіть невеличку добірку корисних технічних статей для вашого розвитку

#MemoryLeak
▶️ What is a Memory Leak? (And How to Avoid it)
У вас коли-небудь був один із тих днів, коли ваш комп’ютер більше схожий на втомленого равлика, ніж на найсучасніший пристрій?
У статті ви прочитаєте що ж таке Memory Leak, що його викликає, наведені практичні приклади та надані рекомендації щодо усунення.

👉https://is.gd/v8C1tb

#JavaScript
▶️ Використання маркованих циклів у JavaScript
Марковані цикли дозволяють вам переривати і продовжувати зовнішній цикл з контексту внутрішнього циклу, явно називаючи оператори циклу. Ця функціональність є в ColdFusion і, виявляється, така ж функціональність доступна в JavaScript.

👉https://is.gd/rPeBz3

#React
▶️ waku — мінімалістичний React фреймворк з серверними компонентами
Waku - це фреймворк React, який підтримує React Server Components (RSC), нову функцію, яка буде доступна в наступній версії React. RSC дозволяють розробникам рендерити UI-компоненти на сервері, покращуючи продуктивність та уможливлюючи використання серверних функцій. Для використання RSC необхідний фреймворк для об'єднання, за бажанням сервер, роутер і так далі.

👉Посилання на документацію

Продуктивного перегляду!

#корисно #стаття #tech #добірка

Всі наші платформи 👉Територія джунів | Підтримати канал | Масонська ложа😎
11👍3🏆1
ВАКАНСІЯ ЗАКРИТА - обробляємо резюме

З'явилось стажування в Itera

❤️ У нас буквально тільки що відкрилась нова вакансія Intern Front-End Developer:

✍️Позиція на 3 місяці, оплачується. Працювати треба буде з Next.JS застосунком. Англійська потрібна обов'язково.

Раптом кому цікаво - пишіть сюди: hr.ukraine@iteraconsulting.com

П.С. Прийшла команда розмістити це в LinkedIn, що я і зроблю через годину - sapienti sat
🔥24👍76
❗️Хлопці, дівчата, майбутні колеги - вчіть англійську❗️

Український ринок, нажаль, обмежений. Конкуренція тут буде завжди вища, проектів завжди менше.

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

І я вже не кажу про те, що, більшість документації та нові статті - англійською.

Це не питання вибору - це необхідність

П.М. Мені мова дається складно, але якось виплив же

@reactbeginners
👍61113🔥2
Free React For Beginners
ВАКАНСІЯ ЗАКРИТА - обробляємо резюме З'явилось стажування в Itera ❤️ У нас буквально тільки що відкрилась нова вакансія Intern Front-End Developer: ✍️Позиція на 3 місяці, оплачується. Працювати треба буде з Next.JS застосунком. Англійська потрібна обов'язково.…
🤯 За вчора, за три години отримали більше двохсот відгуків

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

🤞Але, незважаючи на це, я бачу що ринок трішки пожвавлюється і з'являються нові вакансії. Повільно, потроху, але рух є. І якщо не станеться нічого критичного - покращення буде. А, особливо, після нашої перемоги.

💪Тому вірте в себе, продовжуйте навчання та пошуки, і допомагайте ЗСУ. Чим швидше ми переможемо, тим швидше все піде на краще.

@reactbeginners
41👍10💯8🤯2
Всі ж пам'ятають, що useEffect:

1️⃣ Виконується вже після рендеру компоненту
2️⃣ У випадку маніпуляції зі стейтом - викликає повторний рендер і самого компоненту, і скоріше за все, його нащадків?

👁Тепер подивіться на приклад коду на зображенні. Маємо каунтер і маємо ефект, який спостерігає за ним. Коли каунтер змінюється, ми оновлюємо умовну data - наче все просто.

Чому цей код "не дуже"? Тому що відбувається наступне:

1. Викликається setCounter
2. Відбувається перерендер компонента і його нащадків
3. Викликається effect
4. Оновлюється state що ще раз викликає перерендер компонента і його нащадків

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

🤔А тепер уявіть собі декілька ефектів які поєднуються в ланцюг?

🥶Я бачив такі ланцюги з трьох-чотирьох ефектів і, повірте, це не те що ви хочете мати у своєму проекті.

P.M. Працюю над відео про тести, думаю будео одразу мучити Next.

@reactbeginners
24👍4