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

Mermaid

Багато хто не любить будувати діаграми. Проте візуальне сприйняття одне з найкращих. Тому сьогодні хочемо поділитися з вами інструментом Paint Mermaid.

За допомогою спеціального і досить простого коду ви можете отримати різні типи діаграм. Найцікавіше те, що все це легко обробляється за допомогою JavaScript. А ще, цей інструмент вже вбудований в такі системи як GitHub, GitLab, Notion та багато інших.

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

#library

Welcome 👋

Let's practice our English! So...

👉 Tell us about the most interesting project you were working on (as much as NDA allows).

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

Have a nice Friday! 💛

#english_friday

Satisfies

У Typescript версії 4.9 було додано новий оператор satisfies. Якщо коротко, то satisfies дозволяє перевірити чи змінна задовільняє певний тип, проте не присвоює його в змінну.

Підготували для вас приклад, який допоможе вам ознайомитись з цим оператором. Зверніть увагу на тип .age в обох випадках 😉

👉 Переглянути приклад
👉 Читати документацію

#tips

Що таке CDN?

CDN, або Content Delivery Network - це мережа серверів, розподілених по всьому світу. Коли ви використовуєте CDN, статичний контент вашого сайту (зображення, відео, CSS, JavaScript) зберігається на всіх цих серверах, а не лише на одному. Коли користувач заходить на ваш сайт, контент завантажується з найближчого до нього сервера, що пришвидшує час завантаження.

Основна причина використання CDN - пришвидшити роботу вашого сайту. Розподіляючи ваш контент між кількома серверами, ви можете скоротити відстань між вашим сайтом і користувачами, у результаті чого веб-сайт буде швидше завантажуватись.

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

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

А щоб почитати більше, ділимося з вами статтею від одного з CDN провайдерів.

👉 Читати більше

#interview

#todo написати функцію на будь-якій мові програмування, яка на вхід приймає масив об'єктів типу { price: number; category: string }, та повертає словник/обʼєкт, в якому ключ - це категорія, а значення - середня ціна за категорією.

ChatGPT Extensions

Всі ми вже чули, що минулого тижня ChatGPT став доступним в Україні! 🎉

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

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

👉 Читати статтю

#article

Минув рік.

Коли почалась війна, ми навчались в школі і мало розуміли, що відбувається. Тоді моя сім’я мала маленький будинок і змогла прийняти людей зі сходу. І я добре запам’ятала, як вони казали: «Ми ненадовго, ми скоро повернемось додому».

Пройшло 9 років війни і 365 днів від повномасштабного вторгнення. Їхнього дому вже немає і вони вже давно не сподіваються повернутись додому.

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

Слава ЗСУ! Дякуємо, що захищаєте!

#todo порефакторити код і пояснити, що з ним було не так.

Package Manager 📦

Якщо ви працюєте з Javascript або Node.js то, ймовірно, знаєте про npm. А які є альтернативи npm та які в них переваги/недоліки?

npm (Node Package Manager) - це менеджер пакетів за замовчуванням для Node.js, який ви отримуєте з інсталяцією Node.js. За допомогою цього інструменту ви можете встановлювати пакети, а також керувати ними та публікувати їх в npm-реєстр. В npm дуже широка спільнота, що теж дуже важливо. Також npm має кешування, що пришвидшує встановлення пакетів. А у файлі package-lock.json він зберігає інформацію, необхідну для правильної інсталяції та роботи пакетів.

yarn - це менеджер пакетів, створений Facebook і випущений у 2016 році. Yarn було створено для вирішення деяких проблем та обмежень npm, наприклад, повільне встановлення пакетів. Для цього yarn інсталює їх паралельно. Замість package-lock.json було введено yarn.lock. Ще yarn надає функціонал workspaces, за допомогою якого можна керувати кількома проектами одночасно, якщо у вас, наприклад, monorepo. А щоб зекономити трохи памʼяті, yarn використовує плоске дерево залежностей, завдяки чому уникає дублювання пакетів.

pnpm (скорочення від "performant npm") - менеджер пакетів, випущений у 2016 році. Як і в yarn, його мета усунути деякі обмеження npm, зокрема щодо швидкості встановлення та використання дискового простору. pnpm використовує унікальний підхід до керування залежностями, який може призвести до значного покращення продуктивності та економії памʼяті. Для цього він використовує спільне сховище в якому тримає пакети, і вони, відповідно не дублюються у кожному вашому проекті. Такий підхід дозволяє навіть встановлювати пакети без зʼєднання з мережею Інтернет.

Який з них використовувати?

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

#experience

Debounce

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

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

Існують різні випадки використання функції debounce. Для прикладу, коли у системі є текстове поле для пошуку, можна застосувати цю функцію, щоб не виконувати пошук при кожному натисканні кнопки користувачем, а тільки тоді, коли він не змінював це поле, наприклад, 1 секунду. Таким чином ви зможете зменшити кількість викликів самого пошуку.

Також є дуже схожа функція до debounce - throttle, тільки вона спочатку виконує функцію, а тоді протягом проміжку часу буде ігнорувати виклики функції, поки знову не дозволить робити нові.

👉 Читати більше

#interview

#todo написати функцію debounce на будь-якій мові програмування.

Container Queries

Container queries дозволяють стилізувати елементи в залежності від розміру батьківського елемента (схоже до media queries, які залежать від розміру екрану). А якщо взяти до уваги, що сьогоднішні веб-сайти в більшості базуються на компонентах, то container queries стають надзвичайно актуальними!

Тому ділимось з вами відео, де автор детально показує, як ефективно використовувати дану властивість.

👉 Переглянути відео

#tips

Welcome 👋

Let's practice our English! So...

👉 Tell us about the best interview experience you have ever had.

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

Have a nice Friday! 💛

#english_friday

Loaders 🚀

Знайшли для вас крутий сайт, який містить набір різних типів лоадерів, спінерів та їх вихідного коду. Всі вони зроблені за допомогою чистого CSS. Тому їх легко можна скопіювати та налаштувати під ваші потреби.

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

#tips