#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

#todo розшифрувати закодований текст - 01001000 01100101 01101100 01101100 01101111 00100000 01110111 01101111 01110010 01101100 01100100 00100001

State of JS

Раніше ми ділилися з вами посиланням на підсумки року від Stack Overflow та Fireship.

Зараз хочемо поділитись з вами підсумками суто по JavaScript. Саме звідси Fireship і брав багато графіків та інформації, але сподіваємось, вам буде цікаво поклікати і подивитись все власноруч.

На State of JS ви зможете знайти багато інформації - демографіку, список технологій, бібліотек та фреймворків, їх рейтинг за 2022 рік. Завдяки цьому можна дізнатись про нові інструменти та спостерігати за тим, як розробники відмовляються від одних речей на користь інших.

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

#tips

Bad Code Smells In Typescript

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

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

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

#interview

#todo наверстати листівку-привітання з 8 березня і прикріпити код та зображення в коментарі.

Delete node modules ❌

Навряд чи ваш проект можна назвати великим, якщо node modules важать менше 100 терабайтів.

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

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

#tips

Good Morning, guys! ✨

Let's practice our English! Tell us your opinion about this question:

👉 What are the pros and cons of Ukrainian developers? Why do you think so?

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

Have a wonderful Friday! 💛

#english_friday

Input Handling ✍️

Коли ми стикаємось з полями для вводу, то на вибір отримуємо різні типи даних. І хоча звичайний type="text" може підійти для будь-чого, для вводу числових даних краще обрати type="number", а для вводу дати - type="date". Для того, щоб працювати з введеними даними, зазвичай потрібно ще їх обробити, наприклад, через parseInt, parseFloat чи new Date.

Або можна просто використати такі властивості як valueAsNumber чи valueAsDate, про які розкаже автор відео нижче. Вони добре підтримуються у різних браузерах та можуть полегшити вам роботу.

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

#tips

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

??

Нагадуємо про надзвичайно корисний оператор в JavaScript - nullish coalescing. Він повертає перший аргумент виразу, якщо він не null/undefined. В іншому випадку, він поверне другий аргумент.

Прикріпляємо коротке відео, яке допоможе вам швидко опанувати даний оператор.

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

#tips

Що таке Lazy Loading? 🦥

А ви знали, що для кращої продуктивності інколи треба бути трішки лінивим? Або, якщо сказати красивіше - не робіть щось, поки в цьому немає потреби.

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

Для веб-сторінок можна реалізувати наступні техніки lazy-loading:

- Використання defer або async (читати пост) для завантаження скриптів. Завдяки цьому вони не будуть блокувати завантаження вашої сторінки.
- Використання loading="lazy" для зображень чи iframe.
- Використання IntersectionObserver. Завдяки ньому ви можете слідкувати за елементами та реагувати, коли вони зʼявляються чи зникають на екрані.

#interview