Web Overflow 🇺🇦
4.42K subscribers
380 photos
40 videos
3 files
518 links
Затишний блог про веб-розробку і не тільки 💛

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
HTTP Methods and Codes

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

Дуже рідко повноцінний додаток працює без запитів до інших сервісів. Ви постійно будете діставати списки даних, сабмітити форми, зберігати дані на сервері тощо. І швидше за все ви будете використовувати HTTP-запити. Колись ми трохи зачіпали їх у пості про REST. Тож давайте ще раз розглянемо, які методи є в таких запитів, коли які використовувати, а також які статуси можуть повертатись нам назад.

Нагадаємо, що HTTP (скор. англ. HyperText Transfer Protocol — «протокол передачі гіпертексту») - це протокол передачі даних, що використовується в комп'ютерних мережах.

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

- GET - діставання даних. В цьому випадку мається на увазі, що дані ніхто змінювати не буде, вони лише повернуться у відповідь.
- POST - закидування даних. З цим методом ви швидше за все захочете відправити якийсь body з певними даними. Зазвичай цей метод використовують для створення саме нового обʼєкту даних, наприклад реєстрація.
- PUT - повне оновлення даних. Тут ви теж будете відправляти body, але вже з метою повністю оновити обʼєкт даних.
- PATCH - часткове оновлення даних. Знову кидаємо body, але воно може містити лише частину обʼєкту.
- DELETE - тут думаю по назві все можна зрозуміти 😉

Коли сервер отримає ваш запит, він підготує для вас відповідь і статус цієї відповіді. Розглянемо найпопулярніші з них:

- 200 - все спрацювало ок
- 404 -
- 201 - щось нове було створено
- 500 - здається сервер зламався
- 401 - ви не авторизовані
- 403 - доступ заборонено

#interview

❗️До кінця розіграшу залишилось 7 днів - доєднатись
👍357🤔2😁1
🔥112👍2👏2🤔1
🔥16🤔8👍73👏1🤩1
У Юри сьогодні День Народження! 🥳

Він би не хотів, щоб я це постила, але його ніхто не питає.

Давайте скинемось по привітанню людині, яка постійно старається знайти дійсно круту інфу, щоб вам було цікаво! А ще придумує ці дурацькі тести, на які всі сваряться, і я не виняток! 😄
🎉1276🤩3❤‍🔥2
#todo написати функцію на будь-якій мові програмування, яка приймає число і повертає true, якщо число є паліндромом (читається однаково в обох напрямках), і false в іншому випадку. Наприклад, 121 є паліндромом.

❗️До кінця розіграшу залишилось 6 днів - доєднатись
12👍5🔥3🤔2🤯2
5👍3🔥1👏1🤔1
Setup backend project

Спочатку налаштуй себе на роботу 😉

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

Я пропущу такі кроки як вибір мови та фреймворку, тут кожен обирає своє.

- Налаштуйте лінтери та форматтери - це справді допоможе зберігати один вигляд коду.
- Додайте git hook та github actions (або pipelines від bitbucket чи gitlab). Нехай перевірка форматування файлів запускається перед комітом, тести перед пушем. І навіть якщо хтось обійде цей захист, на GitHub все одно буде ще одна перевірка.
- Пограйтесь з Docker. Можете обгорнути свій застосунок в docker. Зараз майже будь-яка платформа може працювати з контейнерами. Якщо не сильно хочеться, все ж я раджу хоча б використовувати вже готові docker image з сервісами, які ви використовуєте (наприклад, базою даних). Припустимо, що ваш застосунок використовує postgres та redis, треба встановлювати їх собі на компʼютер і постійно запускати. Якщо ж напишете всього один файлик docker-compose - зможете однією командою це все запускати і використовувати.
- Налаштуйте змінні середовища. Зберігайте секретні дані у файлику .env (або .env.{середовище}). Швидше за все бібліотека/фреймворк автоматично будуть зчитувати його, але якщо ні, впевнений, що з легкістю зможете знайти рішення.
- Якщо працюєте з базою даних - налаштуйте зʼєднання з нею і додайте ORM (читати пост). Навряд чи вам захочеться писати прямі SQL-запити, тому додати Prisma, Sequalize для JS чи SQLAlchemy для Python буде хорошою ідеєю.

Старався коротко і по суті описати основні кроки. Тому, якщо вас цікавить щось детальніше - давайте обговорювати ⬇️

#experience

❗️До кінця розіграшу залишилось 5 днів - доєднатись
👍146🔥3👏2🤔1
Hello 👋

Давайте сьогодні попрактикуємо технічну англійську. Можете писати свої відповіді тут або в чаті. Тому ...

👉 Name your favorite language/technology and explain why you like it.

Have a wonderful Friday! 💛

#english_friday

❗️До кінця розіграшу залишилось 4 дні - доєднатись
9🔥4👍3👏1🤔1
🚀 Next.js 13

Нещодавно була оголошена версія Next.js 13, яка внесла величезні зміни у фреймворк. Команда Next.js співпрацювала безпосередньо з командою React, щоб створити найкращу веб-платформу.

Основні оновлення:

- Next.js 13 містить Turbopack, який до❗️700❗️разів швидший, ніж Webpack.
- Не потрібна папка pages, за допомогою якої працював маршрутизатор. Тепер можна оголосити файл page.js в будь-якій папці і він стане роутом. Крім цього, з'явились нові файли, такі як - error.js (дана сторінка буде з'являтись, коли виникла помилка), loading.js (коли сторінка завантажується), layout.js (обгортає всі сторінки в папці в прописаний в даному файлі врапер).
- Значно спростили getServerSideProps.

і ще багато іншого. Тому, хто цікавиться даним фреймворком, рекомендую переглянути!

Відкрити документацію
Дивитись огляд від Fireship

🥳 а ще у нас нова рубрика - #news , в якій ми пишемо про події в сфері ІТ, які не залишать вас байдужими

❗️До кінця розіграшу залишилось 4 дні - доєднатись
🔥29👍106🥰2🎉1
Зʼявилась крута ідея? Xочеться створити стартап або класну програму, але для назви спадає на думку тільки BestProgram або SuperStartup? От нам це насправді знайомо. Нещодавно знайшли такий сервіс як Namelix, який за ключовими словами спробує підібрати імʼя для вашої ідеї.

Зберігайте та користуйтесь - відкрити посилання 💛

#tips

❗️До кінця розіграшу залишився всього 1 день! Останній шанс доєднатись завтра до 18:00. Не впусти його! 😉
👍132🔥1🥰1👏1🤔1🤩1
Три місяці курсів - і я вже в IT?!

👋 Хей-хей! Маємо для вас круту ІТ-подію.

IT-індустрія і досі продовжує обростати новими міфами! Саме час спростувати деякі з них під час нового вебінару від Intellias. Долучайся 10 листопада, на каналі @IntelliStart у Telegram та вигравай один із двох павер бенків - Xiaomi Mi Wireless! Початок - о 18:00.

👉 Долучайся за посиланням:
https://yangx.top/+CN_zeMDNkA02MTli

#news
👍132🔥2😁1🤔1
👍43🔥2
Які етапи життєвого циклу класової компоненти замінює useEffect?

Що ви зараз бачите перед собою? Це - скарб. Тому що дане питання полюбляють запитувати як і в Junior розробників, так і Senior.

Давайте трішки пригадаємо.

Які взагалі параметри приймає useEffect?
- Функцію і масив залежностей. Почнемо з останнього. Залежності - це просто список ваших змінних, при зміні яких, ваша компонента буде ререндеритись, тобто буде викликати функцію, яку передали як перший параметр.

А якою ж може бути функція, яку передали в useEffect?
- Та будь-якою! Тільки вона не повинна приймати ніяких параметрів та, за бажанням, може повертати функцію зачистки (так-так, функція повертає функцію). Цю зачистку React викликає перед повторним викликом useEffect або перед unmount компоненти.

Тож повернемось до наших баранів. Проста відповідь на основне питання - componentDidMount, componentDidUpdate та componentWillUnmount.

useEffect дійсно обовʼязково запускається після того, як замаунтив компоненту в DOM. Тому, якщо ви хочете симулювати роботу didMount - передайте в компоненту пустий масив залежностей (в ньому всередині точно нічого не буде змінюватись).

Якщо хочете отримати didUpdate - взагалі не передавайте нічого як залежності (пропустіть параметр). В такому випадку React запускатиме ваш ефект при будь-яких змінах у компоненті.

Ну і як же отримати willUnmount? Згадуємо про повернення функції зачистки. Якщо у нас не буде залежностей в масиві, ця зачистка запуститься саме один раз - перед unmount компоненти.

Читати документацію

#interview

❗️Кінець розіграшу о 18:00. Не впусти свій шанс!
👍24🔥84🤔2
Цей момент настав - рівно рік нашому блогу! 🥳

Ще раз дякуємо всім, хто залишається з нами. Ми ніколи не думали, що зможемо зібрати таких крутих, цікавих, розумних людей в одному місці. Дякуємо вам, що надихаєте нас рухатись далі 💛

І як обіцяли, даруємо вам курси в честь свята!

Отож, наші переможці:
- @sourcehelper
- @Zohan_20
- @Ostr_Maria

Якщо добре пам'ятаєте, у нас було окреме місце для підписника, який зробить пост оригінально. І це - @MSTRID . Ви також отримуєте курс на будь-якій платформі за таких самих умов як і інші переможці.

Вітаємо! Сподіваємось, що курс, який ви оберете, значно допоможе вам у вашому професійному рості 🎉

В коментарях ділимось відео, де детально видно, що переможців обирало абсолютно чесно і рандомно.
🎉308🔥2🥰1
👍21🤯62🔥2🤔2😁1
👍31🤯21🤣13🔥6🤔43💯3
#todo пройти опитування - https://bit.ly/3fKu7fN

У команди Just Join IT, виникли питання про бонуси в ІТ компаніях і чи взагалі користуються ними наші ІТ-спеціалісти. Вони зробили дуже важливе опитування, результати якого допоможуть закордонним компаніям краще зрозуміти український ІТ ринок та звернути уваги на потреби українських програмістів.

Маєте 3 хвилини? Напишіть короткі відповіді на питаннячка 👉 https://bit.ly/3fKu7fN
👍63👏2
Personal websites

У різних сервісах для пошуку роботи зазвичай можна додавати своє cv, посилання на GitHub та багато чого іншого. І от серед цього всього іншого часто буває така опція як портфоліо. Не буду гадати наскільки це ефективно в пошуку роботи, але особисто для мене це досить "прикольний" плюс.

Нещодавно на Youtube наткнувся на канал розробника, який оглядає цікаві портфоліо, і там дійсно є на що подивитись. Загалом, залітайте, надихайтесь і черпайте ідеї для себе 💛

Дивитись відео

#tips
👍25🔥6🙏3🌚2🤔1🕊1
Welcome 👋

Let's practice our English today! So ...

👉 Tell us how did you decide to join IT?

Нам буде дуже цікаво почути ваші історії. Як завжди, можете писати свої відповіді тут або в чаті.

Have a nice Friday! 💛

#english_friday
👍85🔥3🎉2
Хей 👋

🚀 Ділимось в вами надзвичайно крутим ресурсом - Web Skills

Тут візуально показано ВСІ навички, які має мати веб-розробник, з усіма посиланнями на статті, де можна їх отримати. Такий собі roadmap, але крутіше!

Зберігайте - https://andreasbm.github.io/web-skills/

#tips
👍31🔥126👏4🤩1
За традицією, у вівторок ми розбираємо питання, які найчастіше задають на співбесідах. Але сьогодні, хочемо пошарити вам круту статтю, де відповідають на найпоширеніші запитання щодо TypeScript на StackOverflow.

У цій статті, автор дослідив 7 питань, які найчастіше з'являються на StackOverflow. Завдяки ній, ви зможете глибше зрозуміти типові проблеми, з якими може зіткнутись розробник, використовуючи TypeScript. Це також актуально, якщо ви тільки вивчаєте TypeScript — що може бути кращим, ніж ознайомитися зі своїми майбутніми челенджами! 🚀

Відкрити статтю

#interview
🔥11👍5👏42🤯1🤩1