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

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
#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
This media is not supported in your browser
VIEW IN TELEGRAM
#how_to створити анімованy оцінку

Виконаний лише з допомогою HTML, SCSS та JavaScript!

👉 Відкрити посилання
🔥19👍82
Менторство від Web Overflow 🤓

Всім привіт!

Місяць тому ми почали займатись менторством. Зараз ми трішки переформовуємо групи і можемо взяти до себе 2-3 людини. Щоб потрапити до нас, заповніть анкету нижче.

👉 Відкрити анкету

Також прочитати про організацію, процес та вартість можна тут:

👉 Відкрити посилання

Успіхів! 💛
13👍5🔥1
Як створити резюме? 😬

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

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

#interview
14👍9🔥2
👍133
#todo написати функцію на будь-якій мові програмування, яка приймає обʼєкт/map/словник і видаляє з нього всі null/undefined/None значення.

Наприклад:
{ a: true, b: null, c: 0, d: undefined } => { a: true, c: 0 }
5👍3🤓2
Імплементуємо кросс-проектний DRY 🤔
#post_from @Yurets7777

Кажуть, що полюбляють на співбесідах запитувати про DRY (don’t repeat yourself). В межах одного проекту то звісно всім все зрозуміло. А якщо одні і ті ж методи використовуються в різних проектах? Наприклад, сервіс для відправки смс-повідомлень або ж сервіс для обробки онлайн платежів тощо. Тобто скрізь однакова логіка під ваші задачі.

Отак і у нас постало питання, щоб винести однотипну логіку в одне місце для перевикористання між різними проектами.

Перше, що ми зробили, це просто окремий GitHub репозиторій. В ньому загальні сервіси із необхідними методами. Підключається такий репо до іншого проекту так само, як і npm пакет:
"common-services": "а_тут_посилання_на_потрібний_репозиторій"

Таким чином, необхідні сервіси та залежності підтягнуться із даного репо. Трабл, з яким ми зіткнулися - репозиторії то приватні 🤦 і під час деплою наш "common-services" не підтягнув код із нашого ж приватного репо. Тому такий підхід підійде для публічних репозиторіїв. А якщо хтось знає як розшарити доступи до таких репо при деплої, welcome у коментарі 👇

Оскільки в нас вже були готові загальні сервіси, ми просто їх "сконвертували" в повноцінний npm-пакет. Це діло 5 - 10 хвилин.
А як то робиться - 👉 читайте тут
Токен - Авторизація - Публікуємо.

Нюанси:
- для публікації приватних npm пакетів необхідно оформити підписку. Але ніхто не обмежує в публікації публічних пакетів 😉
- кожна нова публікація пакету це зміна версії програми в package.json. Не важливо мінорна версія чи мажорна, головне оновити версію перед публікацією.

Профіт колосальний, універсальні сервіси із чистими функціями, котрі юзаються кросс-проектно. Внесення змін в коді лише в одному місці. Щоб запрацював оновлений код у всіх інших проектах, достатньо просто оновити свій npm пакет в необхідному проекті 🤟
👍116👨‍💻2❤‍🔥1
Welcome!

Let's practice our English! So...

👉 Which country would you like to visit the most, and why?

Have a nice #english_friday 💛
👍54
Отримали такий відгук, дякуємо 💛

Нагадуємо, що ще є можливість потрапити до нас на менторство. Початок наступного тижня 🤓

👉 Відкрити посилання
17🔥12👍11👏3
#todo поділитися в коментарях яку ОС, IDE/редактор та браузер ви використовуєте 🧑‍💻
5👍3🗿1
Drizzle ORM 🤓

Рік тому ми розповідали вам про Prisma. Якщо хтось пропустив, читайте пост тут. Напевно, саме час розповісти і про іншу ORM 😅

Drizzle - це легка, швидка і типізована ORM. Чим вона може вас зацікавити? Тут сама задумка (ну і реалізація) побудована за принципом SQL-like. Тобто, якщо ви вже знаєте SQL, ви знаєте Drizzle.

Тут немає інших залежностей та кодогенерації та все працює одразу з діалектом SQL. Також тут вже все готово для роботи в різних середовищах (наприклад, serverless). Ну і все відправляється одним запитом (Prisma відправляє кілька запитів, якщо є join).

Тому, маєте ще один спосіб для роботи з базою даних у ваших Node.js застосунках.

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

#library
👍96
DDoS-атаки 😈

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

Як можна захиститись від такої атаки?

- Послуги пом’якшення DDoS. Є різні сервіси, які надають послуги захисту від DDoS і відфільтрують весь зловмисний трафік.
- Використання CDN. Content Delivery Network може кешувати різні ресурси, тому запити не завжди долітатимуть до вашого серверу.
- Балансувальники навантаження (load balancers). Якщо у вас є кілька серверів, балансувальники можуть розподілити трафік між ними, підвищуючи доступність і стійкість.

А чи мали досвід з DDoS-атаками ви? Якщо так, то ви атакували чи захищались? Діліться з нами в коментарях ⬇️

#interview
👍136🔥1
👍63
#todo поділитись в коментарях, де ви читаєте актуальну інформацію про ІТ, технології і різні бібліотеки (наприклад, тижневі розсилки, YouTube-канали тощо), щоб завжди залишатись в темі 😎
👍64🤓2
Stylex 💅

Якщо вам здається що TailwindCSS вже повсюди і вам критично потрібно щось нове, то гляньте на Stylex.

Це бібліотека від Meta (ті що Facebook), що дозволить вам писати стилі прямо в JS та ще й перевикористовувати (React Native розробники одразу помітять щось знайоме). Зараз це ще поки бета версія, однак ніхто ж не забороняє спробувати 😁

👉 Дивитися відео
👉 Читати документацію

Діліться своїми думками про цю бібліотеку в коментарях ⬇️
11👍11🤓2🤯1😐1
Welcome!

Let's practice our English! So...

👉 What was your first job? Tell us about this experience.

Have a nice #english_friday 💛
5👍2
В мене локально працює!

Фраза, яку ви точно використовували хоч раз в житті.

Одна із причин, чому у вас на комп'ютері все працює, а в іншого користувача ні - це кешування даних. Щоб цьому запобігти, достатньо вимкнути кешування в себе в браузері, як показано на картинці 😉

#tips
👍294🔥2