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

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
Bun 1.0 🎉

Поки ми нічого не встигаємо, весь світ змінюється і безліч нових технологій зʼявляються чи оновлюються.

Швидше за все, ви вже чули про Bun - супер-швидкий JS. Нещодавно зʼявилась версія 1.0, а отже потрібно бути готовим, що можливо скоро ваш бос чи тім лід задумається над використанням такої технології.

Тож ділимось коротким відео від Fireship, в якому зможете трішки більше дізнатись що таке Bun.

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

#news
16👍11🗿6
🔥5👍31🤓1
Що виведе консоль?
Anonymous Quiz
33%
number string
28%
array array
39%
object object
👍21🔥8🤯21🤓1
#todo написати функцію на будь-якій мові програмування, яка приймає на вхід масив об'єктів типу { name: string, age: number }. Функція має погрупувати обʼєкти за name та знайти середнє значення age у кожній групі. Функція має повернути обʼєкт/map/словник, де ключ - name, а значення - середній age. Наприклад:

Вхід:
[
{ name: "John", age: 20 },
{ name: "Jane", age: 18 },
{ name: "John", age: 22 },
{ name: "John", age: 27 },
{ name: "Jane", age: 19 },
]

Результат:
{
"John": 23,
"Jane": 18.5
}
👍102🔥2🤯1🤓1
Локалізація app-ок в micro Front-End 🤯

Поки ми серйозно заганяємось, вже традиційно ловіть
#post_from @Yurets7777 @urbfkfys

Останнім часом нас трохи занесло в оцей весь micro Front-End. Ми розробляємо окремі модулі powered by ReactJS, котрі вбудовуються в батьківську App (CRM, яка також на ReactJS).

Ми вирішили поділитися тим, як ми це зробили і написали для вас статтю. Винесли її в Notion і щоб було веселіше - додали приклади з кодом.

👉 Відкрити статтю
👍143🔥2🤓1
Welcome!

Let's practice our English! So...

👉 Tell us about unusual habits that you have.

Have a nice #english_friday 💛
👍72🤔2🤓1
#how_to налаштувати Prettier на проекті та редакторі коду VSCode.

👉 Відкрити посилання
👍172🔥1💅1
🔥51👍1🤓1
Як записуєте такі стрілкові функції ви?
Anonymous Poll
51%
Коротко, лаконічно
19%
Завжди з return
30%
Залежить від настрою і погоди
👍64🔥2🤓2🤨1
4👍3🔥3🤣2😱1
Що виведе консоль?
Anonymous Quiz
55%
one
3%
two
9%
default
33%
one two default
🤪375😱5👍3🕊2😭1
#todo написати функцію на будь-якій мові програмування, яка приймає на вхід масив чисел, кожне з яких означає ціну з обраного продукту в інтернет-магазині. В інтернет магазині акція, тому за кожних 2 продукти в корзині третій (найдешевший з доступних) - безкоштовно. Функція має повернути 3 значення (як масив чи обʼєкт): загальна ціна, ціна з урахуванням знижки та значення знижки.

Наприклад:
[1, 2, 3] => [6, 5, 1]
[1, 2, 3, 4] => [10, 9, 1]
[1, 6, 2, 5, 3, 4] => [21, 18, 3]
👍9🤓4😱32👨‍💻2
Давайте поговоримо про деплой …

Для того щоб не скидати замовникам посилання на localhost, ловіть
#post_from @Yurets7777

Деплой - простими словами це розгортання і запуск проекту на хостингу/сервері.
Поділюся своїм хоч і невеликим експірієнсом і враженнями.

🌍 Звичайний хостинг
Тут говорити особо нічого. Мав декілька кейсів:
1. Хостинг із підтримкою NodeJS. Запускав там фронт. Великий мінус - не було зв’язку із GitHub репозиторієм, відповідно всі зміни в коді потрібно було закидати по FTP.
2. Тут взагалі все було просто як пробка. Робимо локально build React App і туда його на хостинг. Жабаскрипт зібраний, до index.html підключений, що ще потрібно? 🤷 Не цікаво, але дешево і сердито.

🌍 Виділений віртуальний сервер
Ще часто фігурують скорочення типу VDS / VPS.
Це був практично найперший досвід деплоя full-stack javascript app на “голій” Ubuntu. Орендував у одного із Українських хостерів близько ~ $10 / місяць.

Мінуси:
⁃ Довго налаштовувати під себе. Для того щоб просто стартонути прийшлося навісити NodeJS, додаткові приблуди для запуску, щоб запустити Back та Front, прикрутити SSL сертифікати. Це щоб просто запуститися без зайвих обвісів;
⁃ Коли app падає, потрібно піднімати руками, перезапускати. Або городити ще щось зверху;
Плюс лише один:
⁃ робиш під себе все що хочеш, в рамках дозволених правилами хостингу.

🌍 Vercel - деплой фронтової частини апки
Взагалі не Верселем єдиним, є і інші схожі сервіси. Але мені сподобався даний сервіс.

Плюси:
⁃ адекватні безкоштовні ліміти;
⁃ автодеплой із GitHub репозиторію. Пряма зав’язка за допомогою якої, не потрібно руками налаштовувати GitHub Actions. Пуш у продакшн гілку запускає автоматичний деплой;
⁃ прив’язка свого домена (адекватна інструкція how to);
Мінуси:
⁃ бува підтуплює на халявному тарифному плані.

🌍 Heroku - деплой back-end
Раніше був безкоштовним, наразі став платним, але воно того вартує.

Плюси:
⁃ адекватні тарифи, звичайний щось ~ $7/місяць (виділяється певна к-сть годин, якщо мені памʼять не зраджує). Разом із тим є еко-тариф за $5/місяць (певна к-сть робочих годин). На еко-тарифі сервак спить до першого запиту, через це перший запит відпрацьовує із деяким затупом, а потім все як положено. Якщо запитів не має, апп-ка знову засинає;
⁃ автодеплой із GitHub репозиторія. Пряма зав’язка за допомогою якої, не потрібно руками налаштовувати GitHub Actions. Пуш у продакшн гілку запускає автоматичний деплой;
⁃ коли програма падає, Хероку відловлює критичні помилки і самостійно перезапускає build;
Мінуси:
⁃ Не зручно масштабувати.

Потрібно ще AWS пощупати. Поки дорогувато і не має потреби. Але там цікаво реалізоване масштабування інстансів програми.
Наразі все.
👍315🤓2
Welcome!

Let's practice our English! So...

👉 Tell us about fun or unusual coincidences that you have experienced recently.

Have a nice #english_friday 💛
👍11😁2
#todo поділитися абревіатурою/скороченням/сленгом з IT та дати коротке пояснення.
👍5😁32
👍62🔥2
👍15🔥32😱2
#todo написати функцію на будь-якій мові програмування, яка приймає рядок тексту (повний шлях до текстового файлу) та повертає кількість рядків у цьому файлі.

* завдання з зірочкою - повернути кількість слів у цьому файлі
👍63
Як відправити SMS повідомлення | 2fa
#post_from @Yurets7777 @urbfkfys

В чаті іноді з’являються запитання: а як, а де?
Тому why not, погнали 😉

Раптом хтось вірив в чудо, нажаль 🤷 чуда не має, і sms-повідомлення відправляються за допомогою сторонніх сервісів. Саме про такі сервіси і піде мова нижче.

По-перше, де, для чого і як (поки що❗️) то юзається?
⁃ 2fa - двох-факторна автентифікація (раджу почитати про автентифікацію та авторизацію);
⁃ промо sms-розсилки;
⁃ Підтвердження замовлення, etc.

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

TurboSMS

👉 Дока тут
Насправді взагалі нічого складного. Реєструємося, отримуємо токен даного сервісу.
Шлемо запит методом POST по даному енд-поінту: https://api.turbosms.ua/message/send.json

При цьому в header кладемо наш токен, а в body необхідні параметри:
headers['Authorization'] = TOKEN;
body = {
sender, // Відправник
recipients, // Отримувачі (номери телефонів типу string)
text: message, // Тест sms повідомлення
sms: {}, // Залежно від того, який тип повідомлення необхідно надіслати, в тілі запиту повинні бути присутні параметри viber або sms, або обидва, для гибридної відправки.
};

eSputnik

Ці трішки постаралися і зробили sdk.
const sdk = require('api')('@esputnik-com/v1.0#3ztkwwleradipt');

Також, ну само собою, потрібен API ключ)
await sdk.auth(userLogin, "API-Key");

await sdk.sendSMS(
{
from: sender,
phoneNumbers: recipients,
text: message,
},
{ accept: "application/json; charset=UTF-8" }
);


Twilio - один із любимчиків поза межами наших ланів широкополих

Мають свій пакет в npm.
const client = require("twilio")(SID, token);

await client.messages.create({
body: message,
from: sender,
to: +${recipients[0]}, // варто вказувати “+” перед номером відправника
});

Даний сервіс видає такі ідентифікатори:
⁃ Account SID;
⁃ Auth Token;
⁃ Ну і звісно можна зарегати тестового відправника;

SMS-ки триндець які дорогі тут 😥

Бонус плюс, як реалізувати 2fa via sms
Фронт шле запит на бек типу, давай генеруй разовий код.
Бек генерує разовий пароль, приміром рандоматіком.
Зберігає його в БД та відправляє sms - повідомлення на вказаний номер телефону.
Задається ttl (час життя даного одноразового коду). На фронті, в ідеалі, тікає таймер.
Користувач отримує sms-повідомлення із паролем, вводить його на фронті.
Фронт відправляє на бек. Бек апрувить і далі виконує необхідні дії.

Ось так все просто відбувається за кадром.
До нових зустрічей!

PS: Не забувайте зберігати важливі дані користувача (паролі, токени) у безпеці та в зашифрованому вигляді 😉
👍236🔥3🤓1
Welcome!

Let's practice our English! So...

👉 Are you superstitious? Why or why not? If yes what do you believe in?

Have a nice #english_friday 💛
👍93