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

👉 https://www.youtube.com/@reactdev
Download Telegram
98👍40❤‍🔥9🥰1
Ледь не забув - там @babich_ss зробив стрім про CSS Grid на якому збирав для нас трохи грошей.

А поки у нього зараз афтепаті після конфи (мені то ще не по чину 🤣) зроблю йому маленьку рекламу :)

А хто бажає - може долучитися до збору, потроху збираємо інструменти та комплектуху на корисну справу і не дивуйтеся опису, життя воно таке, не очікуване)

Був радий трохи повернутися в часи конференцій) Вірю, це не остання. Правда, @FwDays?

П.М. Миші м'яке зло :)
🔥3211👍1🕊1
Click on link.pdf
289.7 KB
Що трапляється, коли ми клікаємо на лінку?

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

Спробувала максимально розкрито і водночас компактно відповіcти на це запитання в доці. Що б ви ще добавили?
❤‍🔥2712👍5
Побував сьогодні на DevChallange, де мене навіть виперли на сцену з промовою.

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

До-речі, якби раптом таке диво сталося в не далекому майбутньому - про що вам би було цікаво послухати?

Ваш ЗамПоМиш)
44👍15
Алгоритми сортування: level easy

Наступні декілька дописів поговоримо про сортування. Конкретно в цьому пропоную зосередитися на найбільш інтуїтивних і легких для розуміння:

1. Selection sort. Алгоритм простий: ми знаходимо найменший елемент в масиві і вставляємо його на поточний в ітерації індекс. Big O: time complexity - O(n2), space complexity - O(1);
Код: https://codepen.io/olenitut/pen/qBeQPxJ?editors=0011


2. Bubble sort. При кожній ітерації порівнюємо два сусідні елементи масиву, якщо вони не сортовані між собою - міняємо їх місцями. Це гарантує, що при першій же ітерації “максимальний” елемент масиву буде в правильному місці (звідси назва - він ніби спливає). Відповідно в наступних ітераціях “сплиті” елементи не треба перевіряти. Також, гарною оптимізацією для бабл сорта є вихід з нього, якщо при попередній ітерації не був змінений жодний елемент. Big O: time complexity - O(n2), space complexity - O(1);
Код: https://codepen.io/olenitut/pen/eYqQGLV?editors=0011

3. Insertion sort. Тут ми тримаємо ліву частину масиву сортованою. При першій ітерації ми вважаємо, що перший елемент масива вже відсортований. І тепер нам треба просто в правильне місце вставити (звідси назва алгоритму - insertion) другий елемент. Як наслідок в нас ліва частина масиву з 2-х елементів є відсортованою, і нам треба вставити на правильне місце третій елемент. І так до кінця масиву. Big O: time complexity - O(n2), space complexity - O(1);
Код: https://codepen.io/olenitut/pen/ZEgmXmv?editors=0011


Візуалізовану версію можна знайти у цій статті: https://medium.com/@nisfari/sorting-algorithm-bubble-sort-selection-sort-insertion-sort-fd6dadea3d1e
26🔥5👍1
Merge sort (сортування злиттям)


Переходимо до більш просунутих алгоритмів сортування. Merge sort є одним з найшвидших алгоритмів сортування з time complexity O(n log n) - найкраща, що ми маємо наразі для сортування універсальних датасетів (кращу average time complexity можуть мати алгоритми, які працюють тільки з окремими типами даних, найчастіше з числами, але це нам наразі не так цікаво).

Merge sort працює за принципом розділяй та володарюй (divide and conquer). Перше припущення, яке ми тут робимо - датасети(масиви), що мають один або нуль елементів завжди є сортованими. Тобто isSorted([]), isSorted[2], isSorted[‘g’] завжди є true.

Відповідно нашою задачею є розділити великий масив на підмасиви з сортованих елементів і потім рекурсивно змерджити ці масиви в один сортований.

Розділення на масиви має time complexity O(log n). Злиття двох сортованих масивів в один сортований - це луп з O(n). Звідси маємо загальну time complexity mergeSort O(n log n).

Код: https://codepen.io/olenitut/pen/OJKaBYN?editors=0011
Стаття з візуалізацією процесу: https://www.geeksforgeeks.org/merge-sort/
16👍1
В житті неважливий сигнал GPS, якщо не один ти рюкзак свій несеш (С) Кузьма Скрябін

Дякую друзям за допомогу нашому підрозділу в ці не легкі часи.

Дякую @fwdays, @babich_ss, Skelar, Itera та всім небайдужим хто допомагає нам зі зборами. Без вас би було набагато важче.

Всіх обіймаю і скоро побачимось)

П.М. Живий, здоровий, задовбаний мультізадачами, але продовжуємо працювати на користь Україні.
П.М.М. Пишу код на ПІТОНІ 🤪
46👍8🔥1
Чи потрібно вчити усі ці сортування, структури даних, типові алгоритми? Я ж на роботі не буду писати квік сорт! Краще вивчу Реакт, хіба мені не вистачить?

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

Та це не так:

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

По-друге - це інструменти, які цілком вам згодяться у повсякденній роботі - особливо структури даних. Розуміння де використати Map, а де звичайний масив не буде зайвим навіть у фронтенді - я про це вже навіть писав

По-треті - вони універсальні. Сьогодні ви пишете фронт-енд і вони працюють. Завтра ви пишете бек - вони працюють. Після завтра доведеться програмувати мікроконтролер - і вони теж працюють.

React зміниться на щось інше, а базові речі залишаться на завжди.

Тож відкривайте LeetCode або CodeWars - вперед, вам сподобається)
👍464🔥3
HTTP та його версії 🌐

HTTP (Hypertext Transfer Protocol) - це протокол, що є основою передачі даних у WEB. В цьому дописі пропоную трохи розібратися в його еволюції.

🌐 HTTP/0.9

Найперша версія HTTP була створена за ініціативи Тіма Бернерс-Лі. Насправді, в неї в той час не було номера, але з часом до неї стали звертатися як до версії 0.9. У HTTP/0.9 не було хедерів, статус кодів, а єдиним можливим форматом файлів для передачі був HTML. Запит складався з однієї строчки, єдиним доступним методом був метод GET. Респонс містив в собі тільки файл, що було запитано.

🌐 HTTP/1.0

1.0 була націлена на усунення лімітацій попередньої версії. Тепер при респонсі ми стали отримувати статус коди, що дозволило браузерам реагувати не них належним чином. З’явилися хедери, що зробило можливим уніфікацію передачі метаданих. Також завдяки появі хедеру ‘content-type’ стало можливим передавати не тільки файли типу HTML.

🌐 HTTP/1.1

Це перша стандартизована версія HTTP протоколу. Крім цього, вона впровадила декілька важливих змін. Ми отримали змогу мати keep-alive connection, pipelining, а також розбиття респонсу на чанки, що знижувало затримку в комунікації. Клієнт і сервер могли домовитися, який вміст обмінювати (мова, кодування, тип). HTTP/1.1 був відносно стабільним протягом 15 років.

🌐 HTTP/2

Основні зміни, впроваджені в рамках цієї версії, були спрямовані на перформанс. Потокол став бінарним, а не текстовим як в HTTP/1.x, що дозволяє впроваджувати вдосконалені методи оптимізації. Завдяки його мультіплексійності, паралельні запити можуть виконуватися через одне з’єднання. Також тепер ми стали стискати заголовки, що усуває дублювання та зменшує обсяг переданих даних.

🌐 HTTP/3

Семантика цієї версії така ж, як у попередніх. Основною відмінністю стало використання QUIC замість TCP, що зменшує затримку HTTP-з'єднань та запобігає блокуванню всіх потоків у разі втрати пакетів.
35❤‍🔥3👍1
Пропоную вирішити класичну інтервʼю задачку по тому, як працює контекст в javascript

Ваші відповіді, та (важливо) пояснення чому так працює пишіть в коменти)
👍26
Я на свята буду скоріше за все зайнятий, а мені є що сказати - то ж не буду стримуватися.

По-перше. Дякую. Дякую спільноті та особливо тим хто прямо допомагав в цьому складному році - @babich_ss, @fwdays, Skelar, @olenitut та інші. Ви допомогли тоді, коли це було потрібно, а це найбільш цінно. То ж дякую ще раз, вірю що ще зустрінемося за келихом кави, просто трохи пізніше.

По-друге. Ми так і не навчилися спілкуватися. Нажаль я не можу передати вам свій досвід на службі, а ви не можете передати як то шукати роботу два роки і не знаходити. А зараз від цього буквально залежить виживання нашої держави. І заклики "гуртуйтеся", "готуйтеся", "не сріться", не працюють. Особливо коли умовно свої ж підпалюють машину звичайної людини, аби вона вийшла.

Для мене початок війни асоціювався з піснею Меч Арея. Сильна пісня про людей що стали на захист своєї сім'ї та країни. Але, нажаль зараз це більше схоже на Sleeping in The Cold Below, - пісню прощання.

Тому, перед цими святами, я хочу побажати всім нам уміння розумітися один з одним та підтримки. Є такі шляхи які одна людина подолати не може. А от разом з товаришами, з друзями, зі спільнотою - це може стати дійсністю.

На цьому у мене все, всіх обнімаю, побачимося потім,
Ваш зампомиш

П.М. Коли буде трохи вільного часу - запишу вам нове відео на ютуб, вже знаю про що.
99👍12
SOLID частина 1

Пропоную поговорити про принципи солід. Цей концепт був вперше представлений у 2000 році Робертом Мартіном, і він все ще не втрачає своєї актуальності. Тут ми не будемо сперечатися, чи потрібен він нам чи ні, бо SOLID дійсно може бути оверкілом для нескладних проектів. Тим не менш, маючи в голові ці принципи, легше писати гарний код. У цій серії дописів розберемо окремо кожен принцип і подивимося на нескладні приклади його застосування.

Перший принцип - SRP (single responsibility principle). За цим принципом, в класа (функціїї, модуля і тп) повинна бути тільки одна зона відповідальності і одна причина для змін.

Розглянемо приклад:
class User {
constructor(name, email) {
this.name = name;
this.email = email;
}

getUserInfo() {
return `Name: ${this.name}, Email: ${this.email}`;
}
}
class NotificationService {
static sendEmail(email, message) {
console.log(`Sending email to ${email} with message: "${message}"`);
}
}

const user = new User('Alice', 'alice@example.com');
console.log(user.getUserInfo());
NotificationService.sendEmail(user.email, 'Welcome to our platform!');


В коді можемо подивитися невеликий приклад SRP в дії. Ми маємо бізнес задачу - реєструвати юзера і відправлять йому імейли. Початково під час розробки є бажання інкапсулювати цю фічу просто в один клас (функцію). Тобто юзер би і дані юзера записував і імейли відправляв. Але це порушує SRP. По перше, в User більше однієї зони відповідальності (і юзер і імейли). По-друге, в нього більше однієї причини для зміні - щось змінилося в логіці реєстрування юзера або змінилися реквайременти для емейлів. Розділяючи це на два класи, ми дотримуємося SRP. Можна ще створити RegistrationService який би керував процесом реєстрації за допомогою цих двох класів.

Антипатерном принципу Single Responsibility є God Object. Це коли один клас (об’єкт) знає про всю логіку великої фічі/додатку.
👍4910
Логічний оператор && в #react

Часто* бачу використання логічного && в React для виведення на екран якогось контенту з умовою. Наприклад десь так:

logged && <Greetings/>

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

Що робити? Або використовувати тернарний оператор разом з null

logged ? <Greetings/> : null


Або, просто перетворити logged на true/false за допомогою !!

!!logged && <Greetings/>


Так і код буде коротшим, і проблем не буде.

П.М. Так, я повернувся з відрядження)
П.П.М. * Ну зараз не часто, але раніше було, це правда 😃
78👍14
Анонс прямого ефіру 🤩

Мені дали відпустку, так що якщо нічого не станеться то:

Коли: 28.01.24, о вівторок, о 19:00 (через 10 днів)
Де: Ютуб, не забудьте підписатися
Про що: Пет проекти, як доводити їх до кінця і чи потрібно це взагалі.

Буду вдячний за поширення і всіх чекаю.

П.М. Я ж казав що буде нове відео :)
43🔥23❤‍🔥1🏆1🍾1
Forwarded from Той самий Бабіч (Сергій Бабіч)
Подкасти повертаються! Уже цього четверга відбудеться запис випуску на тему "Хто такі, курвамать, ті синьйори, як їх відрізнити від нормальних людей і чи варто ломиться в синьйори усім поголовно".

А допоможе мені розібратися в цій темі неперевершений Нікіта Галкін, найбільший експерт з NodeJS, якого я знаю, справжній системний архітектор (не то шо я), Google Developer Expert і просто неймовірної душі людина.

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

ВАЖЛИВО
1. Запис буде. Але згодом. Змонтований.
2. Під час етеру будемо збирати донати на ЗСУ та розіграємо подарунки
3. Виключно під час етеру ви матимете нагоду поставити своє запитання гостю
4. Ще раз: запис буде викладено згодом, відредагований.
5. Приходьте на етер, буде цікаво ;)

23 січня, канал "Сергій Бабіч та Дивовижний світ веброзробки", 19:00

.
👍20
Питання зі світу #React і, якщо дуже не пощастить, співбесіди:

Коли ви не можете використати <></>, а змушені використовувати <Fragment>?

Коротка відповідь:
Тоді, коли нам потрібно використати властивість key, яка не існує в <></>

Довга відповідь:
У React компоненті, може бути лише один нащадок нащадок першого рівня. Але, іноді, нам потрібно їх декілька, і раніше нам доводилося створювати зайвий елемент, просто для групування. Це призводить до засмічення коду та появи зайвих елементів в DOM.

Для того щоб із цим боротися з'явився компонент <Fragment>, який потім спростили до конструкцію <></>. Але ця конструкція не може мати атрибутів, в тому числі key який потрібен під час генерації списків. І ось тут то і може стати в нагоді старий <Fragment:

[].map((user, i) => <Fragment key={i}>{user}</Fragment>);


І тут постає ще одне питання - чому ж не винести це в окремий компонент, на якому ми зможемо використати свій key? Як ви думаєте?
👍403
Про пет проекти - їх потрібність, як обирати тему і як довести все до кінця - поговоримо вже завтра, 28.01 о 19:00 в прямому ефірі на ютубі

Приходьте, буде цікаво. І завжди вдячний за поширення 😉

П.М. Буду вдячний якщо пошерите в LinkedIn
👍35🔥11
Невтомлююся радіти людям поруч зі мною. Провів чудовий день разом з @FwDays, які вчергове не відмовили допомогти нам зі збором. Хлопці, дівчата, вся ваша команда крута та неймовірна! Та й і програма була цікава, особливо сподобалася остання доповідь.

П.М. Сподіваюся наш маленький інтерактив нікого не розлякав) Якщо так то на наступну конфу ще щось придумаємо)
П.П.М. Респект Serhii Nemchynskyi за доповідь Українською, дуже круто!
П.П.М. Живий, здоровий, часу на ТГ майже немає :( Але прорвемося!
46
Повернемося до #React. В #reactrouter є цікава можливість - винесення завантаження даних на рівень роута

Це може спростити ваш код оскільки тепер за обробку помилок а також за обробку стану завантаження буде відповідати код роутера.

Якщо виникне помика - буде показаний errorElement
Поки код буде вантажитися - буде показаний hydrateFallbackElement

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

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

Можливо систему зі складними правилами інвалідації кешу на ньому не побудуєш, але для простих застосунків можливість цікава і зручна. Ну і так, трохи холіварна))
👍27🤔2