#how_to створити ефектну анімацію на посилання 🔥

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

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

Box model 📦

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

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

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

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

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

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

#interview

#todo написати функцію на будь-якій мові програмування, яка приймає число, розділяє тисячі у його цілій частині та повертає відформатований таким чином текст.

Наприклад:
3000 => 3 000
1234567 => 1 234 567
1234567.89 => 1 234 567.89

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% виконає те, що ви вказали, і стільки раз скільки потрібно 😎
Дока нижче 😉

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

#how_to створити кастомний tooltip 🤩

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

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

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 💛

Про англійську.
Сьогодні максимально все присвячено англійській мові, #english_friday так сказать 😅

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

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

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

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

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

А ще, з допомогою родинних зв'язків, вибила вам знижку 40% на перше заняття з промокодом WebOverflow 🎁

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 💛

Bun 1.0 🎉

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

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

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

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

#news

#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
}

Локалізація app-ок в micro Front-End 🤯

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

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

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

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

Welcome!

Let's practice our English! So...

👉 Tell us about unusual habits that you have.

Have a nice #english_friday 💛

#how_to налаштувати Prettier на проекті та редакторі коду VSCode.

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