Decorators in JS 🎄

І хоч в самій специфікації ECMAScript декоратори на стадії пропозиції та плану, їх вже можна спробувати завдяки TypeScript чи Babel.

Отож, що воно таке? Почнемо з маленьких аналогій. Якщо ви працювали з Python, то можливо вже зустрічали там декоратори, і там вони працюють десь з таким ж принципом. Або ж, можливо, ви вивчали патерни і зустрічали там однойменний структурний патерн. Мета декораторів - динамічно навішати певний функціонал. Стандартний приклад - вивести повідомлення перед початком виконання функції та після її завершення.

Синтаксис використання декораторів. Перед оголошенням класу, його методу чи властивості необхідно додати імʼя декоратора з префіксом @. Наприклад:

class Pokemon {
  @log
  attack() { }
}

Декоратори можуть створюватись динамічно, тому наступний синтаксис теж цілком можливий:

class Pokemon {
  @log({ level: "debug" })
  attack() { }
}

Як написати свої декоратори? Тут трохи більше деталей, тому ми думаємо, що краще використати документацію 🙂

Декоратори можна зустріти, наприклад, у NestJS, де зокрема з їх допомогою працює Dependency Injection.

Зверніть увагу, що в документації за посиланням нижче є банер з посиланням на статтю про декоратори із стадії 3.

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

#interview

Що таке lock-файли та як з ними працювати? 🔒

В своїх проєктах ви часто можете помітити файл з назвою package-lock.json, yarn.lock, pnpm-lock.yaml чи bun.lockb. Ці файли містять зафіксовані версії всіх залежностей вашого проєкту, включно з версіями всіх підзалежностей. Це своєрідний "знімок" стану ваших залежностей у певний момент часу.

Нехай у вас у package.json зазначено, що вам потрібна залежність x версії ^1.0.0. Це означає, що використовуватись може будь-яка версія, сумісна з 1.0.0, наприклад 1.1.0 чи 1.0.1. Lock-файл зафіксує конкретну версію (наприклад 1.0.1) і це гарантує, що всі розробники чи сервери будуть використовувати точно цю ж саму версію.

Також це своєрідний спосіб оптимізації, адже тоді менеджер пакетів швидше розуміє, які версії залежностей/підзалежностей потрібно інсталювати.

Lock-файли, на нашу думку, треба комітити, адже тоді у вас значно рідше виникатиме ситуація "працює на моєму компʼютері".

#interview

🚀 Top 50+ React Interview Questions and Answers 2024

У цій статті було розглянуто питання на співбесіді з React, які охоплюють все, від базових до просунутих концепцій React, таких як Virtual DOM, компоненти, стан та пропси, JSX, хуки, маршрутизація та багато іншого. Незалежно від того, чи ви новачок, чи досвідчений розробник, дана стаття може стати вам в нагоді.

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

Зберігайте та користуйтесь 💛

#interview

"use server" ⚙️

React постійно змінюється, серверні компоненти працюють по новому, тому всім необхідно встигати за оновленнями.

У відео нижче автор розповідає як вони працюють та які небезпеки можуть на вас чекати.

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

#interview

Віртуалізація списків 📋

Іноді трапляються ситуації, коли потрібно відрендерити великі списки даних (дуууже великі). І виявляється рендеринг тисяч елементів одночасно може серйозно вплинути на продуктивність вашого застосунку.

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

Як це працює?

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

Використання віртуалізації значно покращує продуктивність та досвід користувача при роботі з довгими списками.

#interview

Sitemap 🗺️

Sitemap — це файл, який містить інформацію про сторінки та інші файли на вашому вебсайті. Він допомагає пошуковим системам, таким як Google, ефективніше індексувати ваш сайт. Sitemap зазвичай побудований у форматі XML та містить інформацію про такі поля як шлях до сторінки, пріоритет чи дату останньої зміни.

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

#interview

dependencies vs devDependencies vs peerDependencies 🍐

При роботі з JavaScript, правильне управління залежностями проєкту є ключовим моментом. У package.json ми можемо побачити різні типи залежностей, кожен з яких має своє призначення.

dependencies — це ключові залежності вашого проєкту. Вони містять всі бібліотеки та фреймворки, без яких ваш додаток не зможе працювати в production середовищі. Якщо ваша програма викликає якусь бібліотеку або інструмент під час виконання, вона повинна бути додана до розділу dependencies.

devDependencies містять інструменти, які використовуються тільки під час розробки додатку. Вони не потрапляють у production, тому що їхня функція полягає в тому, щоб полегшити процес написання та тестування коду. Наприклад, компілятори, такі як Babel, інструменти для тестування, такі як Jest, лінтери чи форматувальники будуть у цьому розділі.

peerDependencies визначаються тоді, коли ваш пакет розрахований на використання разом з іншими бібліотеками, які повинні бути встановлені на рівні проєкту користувача. Це стосується плагінів або модулів, які розширюють функціональність певних фреймворків або бібліотек. Вони не встановлюються автоматично, а лише сигналізують користувачеві про необхідність самостійно їх додати.

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

#interview

Як підвищити свої шанси успішно пройти співбесіду в IT-компанію? 🤓

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

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

#interview

Пошук прямого контракту 🧭

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

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

#interview

Live coding 😰

Live coding став частим явищем на технічних співбесідах (на жаль 😢). І хоча зазвичай ви не знаєте, які завдання вас чекатимуть, до них усе одно можна підготуватися.

Ми знайшли для вас цікаву статтю, в якій авторка розповідає, на які кроки під час live coding варто звернути увагу, як бути готовим до них та як правильно спілкуватися з інтерв’юером.

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

#interview