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

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
З Днем Незалежності, Україно!
З Днем Незалежності, Українці!

Нехай кожен захисник повернеться додому цілим і неушкодженим! Робімо все, щоб наблизити нашу перемогу!

Слава Україні! 🇺🇦
69👍4🎉2🕊1🍾1
Welcome! 👋️️️️️️
Let's practice our English! So...

👉 Tell us where are you from and what’s your favorite thing about your hometown?

Have a nice #english_friday 💛
👍74
😁9👍31
NestJS + Telegram Bot API
#post_from @Yurets7777 @urbfkfys

Багато хто чув або вже знає, що таке є той NestJS. І звісно всі знають, що таке Телеграм і Телеграм-Боти. Хтось чув, хтось пробував щось писати з допомогою Telegram Bot API або NestJS.

Даний пост про те - а як правильно запустити телеграм бота на NestJS?

Не можу сказати що це просто.

Як рекомендує NestJS, створюємо окрему директорію для нашого телеграм бота під назвою telegram. В ній, по класиці, нам потрібні: module - telegram.module.ts; controller - telegram.controller.ts; service - telegram.service.ts.

telegram.service.ts - це те, що відповідає за запити до нашої БД. Сюди ми підтягуємо інші сервіси, щоб ТГ-бот вмів працювати із різними сутностями в нашій БД.

@Injectable()
export class TelegramService {
constructor(
private userService: UserService,
private categoryService: CategoryService,
private cityService: CityService,
) {}
}


І всі запити до нашої БД, котрі вміють робити дані сервіси, буде вміти робити наш ТГ-бот. Потрібно просто прописати необхідні методи з даних класів в сервісі телеграму.

telegram.controller.ts - контроллер; сама назва говорить сама за себе - контролюю. Сюди ми підтягуємо наш телеграм сервіс. Прописуємо команди, прослуховувачі на екшени (кліки на кнопки) та інше.

@Update()
export class TelegramController {
private readonly telegramActions: TelegramActions;

constructor(
@InjectBot() private readonly bot: Telegraf<Context>,
private readonly telegramService: TelegramService,
) {
this.bot.telegram.setMyCommands(COMMANDS);
this.telegramActions = new TelegramActions(this.telegramService);
}

@Start()
async startCommand(ctx): Promise<any> {
// do something
}

@Command(my_command)
async addLotCommand(ctx): Promise<any> {
// do something
}

@Action(String || RegEx)
async handleRejectLot(ctx): Promise<any> {
// do something
}
}

Ну і звісно модуль, куди ж без нього 🤷
telegram.module.ts - модуль збирає в себе все що потрібно для запуску нашої app, в даному випадку бота.

@Module({
imports: [
ConfigModule.forRoot({
envFilePath: '.env', // для того щоб була змога читати змінні із env
}),
TelegrafModule.forRoot({
middlewares: [session()],
token: process.env.TELEGRAM_BOT_TOKEN, //
не має сенсу в коментарях
}),
UserModule,
CategoryModule,
CityModule,
],
controllers: [],
providers: [
TelegramService,
TelegramController,
RegisterUserScene,
],
})
export class TelegramModule {}


Ліба для запуску Телеграм-Бота на NestJS називається nestjs-telegraf. Якщо хочете конкретики, запитуйте. Що знаємо - підкажемо 😉

Корисні посилання:
- NestJS
- NestJS Telegraf
- Telegram Bot API

PS. Ми тут робимо щось дійсно цікаве на даних технологіях. Скоро очікуйте Український продукт 😉
PPS. Забули показати root компонент app.module.ts

@Module({
imports: [
ConfigModule.forRoot({
envFilePath: '.env',
}),
MongooseModule.forRoot(process.env.MONGO_CONNECTION_STRING),
UserModule,
TelegramModule,
CategoryModule,
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}


Поки все 😉
👍215👏3🔥1
Advent of Code 🗓

Сьогодні розповімо про адвент календар, тільки, на жаль, без смаколиків. Проте, на нашу думку, він є не менш цікавим.

Advent of Code - це збірник з 25 задачок. У кожній з них ви отримаєте вхідні дані на основі яких потрібно буде внести відповідь, після чого рухатись до наступної задачі.

Особливо рекомендуємо спробувати пройти ці задачки, якщо ви вивчаєте нову мову програмування. Адже саме на практиці ви зможете закріпити теоретичний матеріал. Також корисно буде пройти перед співбесідою, live coding ніхто не відміняв 🤫

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

#interview
👍126😍1
5👍5😍1
Що виведе консоль?
Anonymous Quiz
19%
1
49%
2
14%
undefined
18%
NaN
👍12👌52
Сьогодні проста, але максимально практична #todo - написати функцію, яка перевіряє чи об'єкт/map/словник пустий.

Наприклад:
{} -> true
{ a: 1 } -> false
👍123
vim 🤓

Останнім часом я вирішив спробувати vim. І сьогодні я хочу коротко поділитись про перший досвід та враження.

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

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

У vim справді закладено певний сенс. Ви зможете будувати свої команди на ходу, оперуючи вже тим, що вивчили. Ось короткий приклад: delete word - dw, delete inside () - di(.

Поки я пробую комбінувати VSCode з розширенням vim та Neovim редактори. Ще не вирішив чи буду змінювати редактор коду, але думаю, що все таки vim залишу у будь-якому випадку (хоча б як розширення).

Тому, якщо вам зручно працювати з фокусом на клавіатурі, раджу хоча б спробувати.

Якщо ви зацікавились, поділюсь кількома ресурсами:
- Youtube плейлист від ThePrimeagen
- Learn Vim for the last time
- Vim Adventures

#experience
👍14🤓64😨1
Welcome! 👋️️️️️️
Let's practice our English! So...

👉 What things are important for you when you choose company? For example, insurance, remote work option, education budget etc.

Have a nice #english_friday 💛
👍54
This media is not supported in your browser
VIEW IN TELEGRAM
#how_to створити ефектну анімацію на посилання 🔥

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

👉 Відкрити посилання
19👍8🔥6🌚1🌭1👀1
Box model 📦

Давайте про щось просте, але обов'язкове до вивчення.

Box model - це одна з фундаментальних концепцій у HTML/CSS. Вона пояснює, як будується кожен елемент на веб-сторінці та як обчислюється їх розмір. Отож, box model передбачає кілька різних компонент, про які зараз і поговоримо.

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

Padding - це простір між вашим контентом та рамкою елемента. Задавати цю відстань можна через однойменний CSS параметр. Якщо ваш будинок - це контент, то газон чи подвірʼя від будинку і до паркану - це паддінг.

Border - це, власне, рамка, лінія, що оточує контент та паддінг вашого елемента. Ви можете конфігурувати її ширину, колір та стиль. Як ви вже напевно здогадались, border - це паркан навколо вашого будинку.

Margin - це простір між рамками різних елементів. З допомогою цієї компоненти ви можете конфігурувати відстань між елементами. За тією ж аналогією, margin - це простір між вашим парканом і парканами сусідів.

#interview
👍374🔥4🤓2
👍73😁2🤯1🤓1
👍13🤯103🤓2😱1
#todo написати функцію на будь-якій мові програмування, яка приймає число, розділяє тисячі у його цілій частині та повертає відформатований таким чином текст.

Наприклад:
3000 => 3 000
1234567 => 1 234 567
1234567.89 => 1 234 567.89
7👍2🔥1🤓1
BullMQ - продвинутий cron для NodeJS 💪
#post_from @Yurets7777 @urbfkfys

Що таке "cron"?

Cron - це утиліта для планування завдань у багатьох операційних системах, зокрема в Unix і подібних до неї, таких як Linux. Вона дозволяє користувачам створювати розклади для виконання автоматичних завдань, які будуть виконуватися регулярно або за заданим графіком. BullMQ - це бібліотека Node.js, яка реалізує швидку та надійну систему черг, побудовану на основі Redis, що допомагає у роботі багатьом сучасним мікросервісним архітектурам.

Бібліотека розроблена таким чином, щоб виконувати наступні завдання:
- встановлення черги "рівно один раз", тобто спроби зробити кожну дію рівно один раз. Кожна дія буде виконана принаймні один раз або більше, в залежності від встановлених параметрів;
- легке масштабування по горизонталі. Додайте більше "воркерів" для паралельної обробки завдань;
- послідовність;
- висока продуктивність.

А тепер простими словами!

Потрібно виконати певні дії із певною затримкою або певним інтервалом. Що перше спадає на думку? setTimeout та setInterval. Логічно 🤔, рухаємося далі. А якщо сервер крашнеться або код "посипеться"?

Так, розумні хостери типу Heroku це побачать і перезапустять build. Але … наша черга чи інтервал пішов по одному місцю 🤦‍♀️

І тут нам на допомогу приходять такі от ліби, як BullMQ. Це прям ДУЖЕ крутий комбайн, але під капотом він юзає redis. Сюди він зберігає всі екшени, які повинні відпрацювати. Саме тому, коли код крашнеться і перезапуститься, ліба піде в rdb (redis data base) і продовжить свою роботу, а не почне спочатку, як у випадку із таймаутом.

Як то працює?

Спочатку необхідно створити чергу.
async function createQueue(queueName: string) {
try {
const queue = new Queue(queueName);
return queue;
} catch (error) {
console.log("[error]", error);
}
}

У дану чергу додаються воркери - це, скажімо так, методи (функції) котрі всередині можуть містити інші методи (функції), котрі повинні відпрацювати, коли прийшла черга роботи даного воркера.
const worker = new Worker("queueName", async (job) => {
const {
// тут все, що ви закинули у воркер в дані
} = job.data;
// тут ваш пейлоад, котрий має доступ до даних, які ви закинули у воркер
});


А тепер час "подружити" наш воркер із чергою 😉
await queue.add(
"queueName",
{ /* закидаємо нашу дату для воркера */ },
{
jobId: someJobId, // унікальний id джоби, щоб вони не задвоїлися
// інші параметри як то ріпіт чи once
}
);


Вітаємо, ви створили cron, який 100% виконає те, що ви вказали, і стільки раз скільки потрібно 😎
Дока нижче 😉

👉 Відкрити документацію
👍17🔥43🤓2
This media is not supported in your browser
VIEW IN TELEGRAM
#how_to створити кастомний tooltip 🤩

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

👉 Відкрити посилання
👍21🤓32🌚2
Welcome! 👋️️️️️️
Let's practice our English! So...

👉 Are you a morning lark or a night owl? And how do you handle it?

Have a nice #english_friday 💛
👍5🔥52💅1
Про англійську.
Сьогодні максимально все присвячено англійській мові, #english_friday так сказать 😅

Пам'ятаєте про SpeakyClub? Той, що організувала моя сестра. Вони запустили купу нових фіч!

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

Але лишилися і стабільні фічі:
- найефективніше подолання мовного бар'єру;
- всі групи поділені на рівні, тому ви точно будете почуватись комфортно;
- рівень англійської все ще можна визначити абсолютно безкоштовно 🤩

Ми вже давно їх відвідуємо і тому можемо впевнено рекомендувати. Там ми знайшли багато крутих людей, обговорили теми, про які в повсякденному житті і не задумались би, ще й розмовний бар'єр подолали.

Якщо цікаво, залишаємо посилання на інстаграм та сайт. Якщо не рахувати CRM, то все інше робили ми з Юрою. Можете трохи потестити (там переважно тільки верстка) і почмирити, ми не проти 😅

А ще, з допомогою родинних зв'язків, вибила вам знижку 40% на перше заняття з промокодом WebOverflow 🎁
👍144🔥2🍾1
Welcome!
#post_from @ihor_888 😅

Let's practice our English! So...

👉 Tell us about the music you listen to while coding.

Have a nice #english_friday 💛
👍91🔥1😁1😱1🤣1
Bun 1.0 🎉

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

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

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

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

#news
16👍11🗿6