Що таке lock-файли та як з ними працювати? 🔒
В своїх проєктах ви часто можете помітити файл з назвою
Нехай у вас у
Також це своєрідний спосіб оптимізації, адже тоді менеджер пакетів швидше розуміє, які версії залежностей/підзалежностей потрібно інсталювати.
Lock-файли, на нашу думку, треба комітити, адже тоді у вас значно рідше виникатиме ситуація "працює на моєму компʼютері".
#interview
В своїх проєктах ви часто можете помітити файл з назвою
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
👍17❤2🔥1
🚀 Top 50+ React Interview Questions and Answers 2024
У цій статті було розглянуто питання на співбесіді з React, які охоплюють все, від базових до просунутих концепцій React, таких як Virtual DOM, компоненти, стан та пропси, JSX, хуки, маршрутизація та багато іншого. Незалежно від того, чи ви новачок, чи досвідчений розробник, дана стаття може стати вам в нагоді.
👉 Читати статтю
Зберігайте та користуйтесь 💛
#interview
У цій статті було розглянуто питання на співбесіді з React, які охоплюють все, від базових до просунутих концепцій React, таких як Virtual DOM, компоненти, стан та пропси, JSX, хуки, маршрутизація та багато іншого. Незалежно від того, чи ви новачок, чи досвідчений розробник, дана стаття може стати вам в нагоді.
👉 Читати статтю
Зберігайте та користуйтесь 💛
#interview
👍16🔥3❤1
"use server" ⚙️
React постійно змінюється, серверні компоненти працюють по новому, тому всім необхідно встигати за оновленнями.
У відео нижче автор розповідає як вони працюють та які небезпеки можуть на вас чекати.
👉 Дивитись відео
#interview
React постійно змінюється, серверні компоненти працюють по новому, тому всім необхідно встигати за оновленнями.
У відео нижче автор розповідає як вони працюють та які небезпеки можуть на вас чекати.
👉 Дивитись відео
#interview
👍7❤2
Віртуалізація списків 📋
Іноді трапляються ситуації, коли потрібно відрендерити великі списки даних (дуууже великі). І виявляється рендеринг тисяч елементів одночасно може серйозно вплинути на продуктивність вашого застосунку.
Віртуалізація списків - це техніка оптимізації, яка передбачає рендеринг лише видимої частини великого списку даних. Замість того, щоб створювати DOM-елементи для кожного елемента у списку, віртуалізація рендерить лише ті елементи, які користувач бачить в даний момент, плюс невелику кількість елементів вище та нижче для плавного скролінгу.
Як це працює?
Потрібно розрахувати видиму область, визначити, скільки елементів поміщається у вікні. Також потрібно відслідковувати скрол, щоб визначити, які саме елементи повинні бути видимими.
Використання віртуалізації значно покращує продуктивність та досвід користувача при роботі з довгими списками.
#interview
Іноді трапляються ситуації, коли потрібно відрендерити великі списки даних (дуууже великі). І виявляється рендеринг тисяч елементів одночасно може серйозно вплинути на продуктивність вашого застосунку.
Віртуалізація списків - це техніка оптимізації, яка передбачає рендеринг лише видимої частини великого списку даних. Замість того, щоб створювати DOM-елементи для кожного елемента у списку, віртуалізація рендерить лише ті елементи, які користувач бачить в даний момент, плюс невелику кількість елементів вище та нижче для плавного скролінгу.
Як це працює?
Потрібно розрахувати видиму область, визначити, скільки елементів поміщається у вікні. Також потрібно відслідковувати скрол, щоб визначити, які саме елементи повинні бути видимими.
Використання віртуалізації значно покращує продуктивність та досвід користувача при роботі з довгими списками.
#interview
👍12❤3
Sitemap 🗺️
Sitemap — це файл, який містить інформацію про сторінки та інші файли на вашому вебсайті. Він допомагає пошуковим системам, таким як Google, ефективніше індексувати ваш сайт. Sitemap зазвичай побудований у форматі XML та містить інформацію про такі поля як шлях до сторінки, пріоритет чи дату останньої зміни.
👉 Відкрити посилання
#interview
Sitemap — це файл, який містить інформацію про сторінки та інші файли на вашому вебсайті. Він допомагає пошуковим системам, таким як Google, ефективніше індексувати ваш сайт. Sitemap зазвичай побудований у форматі XML та містить інформацію про такі поля як шлях до сторінки, пріоритет чи дату останньої зміни.
👉 Відкрити посилання
#interview
👍6❤2
dependencies vs devDependencies vs peerDependencies 🍐
При роботі з JavaScript, правильне управління залежностями проєкту є ключовим моментом. У
dependencies — це ключові залежності вашого проєкту. Вони містять всі бібліотеки та фреймворки, без яких ваш додаток не зможе працювати в production середовищі. Якщо ваша програма викликає якусь бібліотеку або інструмент під час виконання, вона повинна бути додана до розділу dependencies.
devDependencies містять інструменти, які використовуються тільки під час розробки додатку. Вони не потрапляють у production, тому що їхня функція полягає в тому, щоб полегшити процес написання та тестування коду. Наприклад, компілятори, такі як Babel, інструменти для тестування, такі як Jest, лінтери чи форматувальники будуть у цьому розділі.
peerDependencies визначаються тоді, коли ваш пакет розрахований на використання разом з іншими бібліотеками, які повинні бути встановлені на рівні проєкту користувача. Це стосується плагінів або модулів, які розширюють функціональність певних фреймворків або бібліотек. Вони не встановлюються автоматично, а лише сигналізують користувачеві про необхідність самостійно їх додати.
👉 Відкрити посилання
#interview
При роботі з JavaScript, правильне управління залежностями проєкту є ключовим моментом. У
package.json
ми можемо побачити різні типи залежностей, кожен з яких має своє призначення.dependencies — це ключові залежності вашого проєкту. Вони містять всі бібліотеки та фреймворки, без яких ваш додаток не зможе працювати в production середовищі. Якщо ваша програма викликає якусь бібліотеку або інструмент під час виконання, вона повинна бути додана до розділу dependencies.
devDependencies містять інструменти, які використовуються тільки під час розробки додатку. Вони не потрапляють у production, тому що їхня функція полягає в тому, щоб полегшити процес написання та тестування коду. Наприклад, компілятори, такі як Babel, інструменти для тестування, такі як Jest, лінтери чи форматувальники будуть у цьому розділі.
peerDependencies визначаються тоді, коли ваш пакет розрахований на використання разом з іншими бібліотеками, які повинні бути встановлені на рівні проєкту користувача. Це стосується плагінів або модулів, які розширюють функціональність певних фреймворків або бібліотек. Вони не встановлюються автоматично, а лише сигналізують користувачеві про необхідність самостійно їх додати.
👉 Відкрити посилання
#interview
👍9❤2
Як підвищити свої шанси успішно пройти співбесіду в IT-компанію? 🤓
Перед проходження співбесіди важливо підготуватися не лише з технічної сторони, але й показати свої софт-скіли та здатність працювати в команді. Знайшли для вас класну статтю, яка допоможе уникнути найпоширеніших помилок і підвищити свої шанси на успішний результат співбесіди.
👉 Відкрити посилання
#interview
Перед проходження співбесіди важливо підготуватися не лише з технічної сторони, але й показати свої софт-скіли та здатність працювати в команді. Знайшли для вас класну статтю, яка допоможе уникнути найпоширеніших помилок і підвищити свої шанси на успішний результат співбесіди.
👉 Відкрити посилання
#interview
❤3👍2😁1
Пошук прямого контракту 🧭
Праця напряму на компанію має свої плюси, і багато розробників зацікавлені в цьому. Знайшли для вас цікаву статтю, у якій можна дізнатись про способи збільшення шансу працевлаштування на прямий контракт.
👉 Відкрити статтю
#interview
Праця напряму на компанію має свої плюси, і багато розробників зацікавлені в цьому. Знайшли для вас цікаву статтю, у якій можна дізнатись про способи збільшення шансу працевлаштування на прямий контракт.
👉 Відкрити статтю
#interview
❤4👍2🔥1
Live coding 😰
Live coding став частим явищем на технічних співбесідах (на жаль 😢). І хоча зазвичай ви не знаєте, які завдання вас чекатимуть, до них усе одно можна підготуватися.
Ми знайшли для вас цікаву статтю, в якій авторка розповідає, на які кроки під час live coding варто звернути увагу, як бути готовим до них та як правильно спілкуватися з інтерв’юером.
👉 Відкрити посилання
#interview
Live coding став частим явищем на технічних співбесідах (на жаль 😢). І хоча зазвичай ви не знаєте, які завдання вас чекатимуть, до них усе одно можна підготуватися.
Ми знайшли для вас цікаву статтю, в якій авторка розповідає, на які кроки під час live coding варто звернути увагу, як бути готовим до них та як правильно спілкуватися з інтерв’юером.
👉 Відкрити посилання
#interview
❤6👍3
Як пройти співбесіду англійською? 📚
Майже завжди одним із етапів співбесіди в нову компанію є перевірка знань англійської мови. Щоб почуватися впевнено і знати відповіді на поширені запитання, знайшли для вас гарні статті, які допоможуть у цьому.
👉 Співбесіда англійською – 11 найпопулярніших запитань та відповідей
👉 Співбесіда англійською мовою - як пройти інтерв'ю на англійській?
#interview
Майже завжди одним із етапів співбесіди в нову компанію є перевірка знань англійської мови. Щоб почуватися впевнено і знати відповіді на поширені запитання, знайшли для вас гарні статті, які допоможуть у цьому.
👉 Співбесіда англійською – 11 найпопулярніших запитань та відповідей
👉 Співбесіда англійською мовою - як пройти інтерв'ю на англійській?
#interview
👍8❤2
Database Normalization 🤓
Якщо вам раптом доведеться працювати з базою даних, обов'язково потрібно знати, як правильно її спроектувати. Хороший дизайн БД, зокрема нормалізація, — саме про це розповідає автор у відео нижче.
👉 Дивитися відео
#interview
Якщо вам раптом доведеться працювати з базою даних, обов'язково потрібно знати, як правильно її спроектувати. Хороший дизайн БД, зокрема нормалізація, — саме про це розповідає автор у відео нижче.
👉 Дивитися відео
#interview
👍11❤6
🔥 Next.js Interview Questions and Answers - 2025
Знайшли для вас круту шпаргалку про Next.js!
Стаття містить чудову підбірку питань і відповідей, включаючи основи SSR, SSG, ISR, а також маршрутизацію, API-роути та багато іншого. Ідеально підходить для підготовки до інтерв'ю!
Помітили, що немає питань про App Router. Тому, якщо вам буде цікаво, маякніть, спробуємо розкрити цю тему.
👉 Читати статтю
Зберігайте та користуйтесь 💛
#interview
Знайшли для вас круту шпаргалку про Next.js!
Стаття містить чудову підбірку питань і відповідей, включаючи основи SSR, SSG, ISR, а також маршрутизацію, API-роути та багато іншого. Ідеально підходить для підготовки до інтерв'ю!
Помітили, що немає питань про App Router. Тому, якщо вам буде цікаво, маякніть, спробуємо розкрити цю тему.
👉 Читати статтю
Зберігайте та користуйтесь 💛
#interview
👍10🔥5
Next.js App Router 🚏
Колись давно, до Next.js 13, існував лише pages router. Він працював за доволі простими правилами: є папка pages, у якій кожен файл (крім деяких зарезервованих) автоматично стає сторінкою. Шлях до сторінки визначався її розташуванням у цій папці.
Однак із появою серверних компонентів, actions та підтримки streaming зʼявився і новий підхід до роутингу.
У Next.js 13 було представлено новий App Router. Замість папки pages тепер використовується папка app, де сторінками є лише файли з іменем page.tsx (чи з іншим відповідним розширенням). Такий підхід дозволяє використовувати всі нові можливості React: асинхронні компоненти, серверні функції, а також новий функціонал, зокрема layout, loading, паралельні роути тощо.
Загалом, з переваг можемо відмітити кращу модульність, більший фокус на сервері та можливості роботи з ним, та, здається, краща продуктивність. Але, на жаль, тим хто ще не перейшов на новий роутер потрібен час, щоб його вивчити та дослідити.
👉 А який тип роутера ви використовуєте у своїх застосунках?
#interview
Колись давно, до Next.js 13, існував лише pages router. Він працював за доволі простими правилами: є папка pages, у якій кожен файл (крім деяких зарезервованих) автоматично стає сторінкою. Шлях до сторінки визначався її розташуванням у цій папці.
Однак із появою серверних компонентів, actions та підтримки streaming зʼявився і новий підхід до роутингу.
У Next.js 13 було представлено новий App Router. Замість папки pages тепер використовується папка app, де сторінками є лише файли з іменем page.tsx (чи з іншим відповідним розширенням). Такий підхід дозволяє використовувати всі нові можливості React: асинхронні компоненти, серверні функції, а також новий функціонал, зокрема layout, loading, паралельні роути тощо.
Загалом, з переваг можемо відмітити кращу модульність, більший фокус на сервері та можливості роботи з ним, та, здається, краща продуктивність. Але, на жаль, тим хто ще не перейшов на новий роутер потрібен час, щоб його вивчити та дослідити.
👉 А який тип роутера ви використовуєте у своїх застосунках?
#interview
👍7🔥4
10 математичних та логічних задач зі співбесід 🧠
З попередніх обговорень у чаті ми помітили, що багато компаній на технічних співбесідах часто дають логічні задачі, щоб оцінити хід мислення кандидата. Саме тому ми знайшли корисну статтю, де зібрано 10 таких математичних і логічних задач.
Буде цікаво тим, хто готується до співбесід, хоче потренувати мозок або просто любить челенджі.
P.S. Пам’ятаю, останню задачу мені колись показав Юра — я просиділа над нею цілий вечір, але таки вирішила. А він за цей час зміг від мене відпочити 😁
👉 Відкрити статтю
#interview
З попередніх обговорень у чаті ми помітили, що багато компаній на технічних співбесідах часто дають логічні задачі, щоб оцінити хід мислення кандидата. Саме тому ми знайшли корисну статтю, де зібрано 10 таких математичних і логічних задач.
Буде цікаво тим, хто готується до співбесід, хоче потренувати мозок або просто любить челенджі.
P.S. Пам’ятаю, останню задачу мені колись показав Юра — я просиділа над нею цілий вечір, але таки вирішила. А він за цей час зміг від мене відпочити 😁
👉 Відкрити статтю
#interview
1👍7❤2😁1
11 Non-Technical Interview Questions for Software Developers (With Examples) 🤔
Технічні скіли важливі, але часто саме нетехнічні питання на інтерв’ю можуть вплинути на загальне враження про вас. Роботодавці хочуть зрозуміти, як ви мислите, працюєте в команді, вирішуєте конфлікти — і чи підходите їм як людина, а не лише як розробник.
Знайшли для вас чудову добірку з 11 нетехнічних питань, які часто ставлять на співбесідах. У статті також є поради, як відповідати, і пояснення, чому ці питання взагалі задають.
👉 Читати статтю
Зберігайте, щоб не розгубитись із відповідями на подібні питання 💛
#interview
Технічні скіли важливі, але часто саме нетехнічні питання на інтерв’ю можуть вплинути на загальне враження про вас. Роботодавці хочуть зрозуміти, як ви мислите, працюєте в команді, вирішуєте конфлікти — і чи підходите їм як людина, а не лише як розробник.
Знайшли для вас чудову добірку з 11 нетехнічних питань, які часто ставлять на співбесідах. У статті також є поради, як відповідати, і пояснення, чому ці питання взагалі задають.
👉 Читати статтю
Зберігайте, щоб не розгубитись із відповідями на подібні питання 💛
#interview
👍6😁6❤3
CV 🤓
Травень уже минає, а це означає, що час потихеньку шукати нову роботу. За цей місяць нам ще виплатять зарплату (так-так, у нас був прикольний роботодавець), але все одно треба рухатись далі.
Почав з оновлення CV, до якого вже давно не заглядав. Здається, знайшов прикольний шаблон — його автор не просто створив документ, а провів ціле дослідження і навіть книжку про це написав 😅
Заодно тестую Claude 4, який нещодавно з’явився. Згодував йому стару версію резюме — тепер разом ліпимо нову.
Єдине, що тривожить — Настя досі не починала дивитись у бік пошуку роботи. Схоже, жарти про содєржанку були не жартами 🤔
Загалом, гляньте на шаблон і скажіть, що думаєте. І кидайте свої варіанти резюме — цікаво подивитися!
👉 Відкрити документ
#interview
Травень уже минає, а це означає, що час потихеньку шукати нову роботу. За цей місяць нам ще виплатять зарплату (так-так, у нас був прикольний роботодавець), але все одно треба рухатись далі.
Почав з оновлення CV, до якого вже давно не заглядав. Здається, знайшов прикольний шаблон — його автор не просто створив документ, а провів ціле дослідження і навіть книжку про це написав 😅
Заодно тестую Claude 4, який нещодавно з’явився. Згодував йому стару версію резюме — тепер разом ліпимо нову.
Єдине, що тривожить — Настя досі не починала дивитись у бік пошуку роботи. Схоже, жарти про содєржанку були не жартами 🤔
Загалом, гляньте на шаблон і скажіть, що думаєте. І кидайте свої варіанти резюме — цікаво подивитися!
👉 Відкрити документ
#interview
1😁9👍2
Go Code Challenge 🤔
Зараз проходжу співбесіду в одну компанію, і одним із перших кроків є вирішення задачки. Кандидат виконує її самостійно, ніхто не дивиться під руки.
Тепер до задачі: у демо-версії потрібно було вирішити проблему з множинами. Тож я готувався до чогось подібного, але… завдання виявилося іншим. Там був мінімальний веб-сервер. В імпортах уже був модуль із функцією
Завдання було нескладним. Єдине, що фреймворк був для мене новим, тому довелося звернутись до ChatGPT, щоб дізнатися, як перевірити HTTP-метод.
#interview
Зараз проходжу співбесіду в одну компанію, і одним із перших кроків є вирішення задачки. Кандидат виконує її самостійно, ніхто не дивиться під руки.
Тепер до задачі: у демо-версії потрібно було вирішити проблему з множинами. Тож я готувався до чогось подібного, але… завдання виявилося іншим. Там був мінімальний веб-сервер. В імпортах уже був модуль із функцією
GetUsers
, і потрібно було лише відфільтрувати їх та повернути у відповіді на GET-запит.Завдання було нескладним. Єдине, що фреймворк був для мене новим, тому довелося звернутись до ChatGPT, щоб дізнатися, як перевірити HTTP-метод.
#interview
👍6🔥2
Знову опитування!
Але цього разу - для нас. Ми хочемо трохи змінити формат блогу й перестати публікувати аби що, аби регулярно. Нам більше до душі ділитись дійсно цінними матеріалами та новинами. Тому пропонуємо невелике опитування: які рубрики вам ще цікаві, а які, на вашу думку, вже себе вичерпали?
Ось коротке нагадування про рубрики, які будуть в опитуванні:
#interview - розбираємо типові питання з технічних співбесід (давненько не було, зізнаємось).
#quiz - вирішуємо tricky задачки (переважно від Юри).
#todo - ділимось цікавими задачами, які треба вирішити кодом (або просто змушуємо вас щось зробити 😅).
#english_friday - щоп’ятниці обговорюємо цікаві теми англійською.
#how_to - ділимось класно реалізовані кейси (здебільшого з CodePen).
Для нас це важливо ⬇️
Але цього разу - для нас. Ми хочемо трохи змінити формат блогу й перестати публікувати аби що, аби регулярно. Нам більше до душі ділитись дійсно цінними матеріалами та новинами. Тому пропонуємо невелике опитування: які рубрики вам ще цікаві, а які, на вашу думку, вже себе вичерпали?
Ось коротке нагадування про рубрики, які будуть в опитуванні:
#interview - розбираємо типові питання з технічних співбесід (давненько не було, зізнаємось).
#quiz - вирішуємо tricky задачки (переважно від Юри).
#todo - ділимось цікавими задачами, які треба вирішити кодом (або просто змушуємо вас щось зробити 😅).
#english_friday - щоп’ятниці обговорюємо цікаві теми англійською.
#how_to - ділимось класно реалізовані кейси (здебільшого з CodePen).
Для нас це важливо ⬇️
❤5👍2
useState vs useRef 🧠
Якщо вірити опитуванню, вам досі цікава рубрика, де ми розбираємо питання з технічних співбесід. А оскільки ми з Юрою активно їх проходили, то ловіть питання, яке мені трапилось і здалося дійсно цікавим: яка різниця між useState та useRef?
useState: коли потрібен ререндер.
useState створює реактивне значення. Якщо ти змінюєш стейт (через setState) - компонент ререндериться і ти побачиш зміни.
📌 Використовуйте useState, якщо…
- Зміна значення має викликати новий рендер.
- Значення впливає на розмітку.
useRef: коли ререндер НЕ потрібен.
useRef зазвичай асоціюють лише з ref на певний елемент. Але насправді в ньому можна тримати будь-що, це як контейнер для зберігання значення, яке залишається стабільним між рендерами. Але зміна .current не викликає повторний рендер.
📌 Використовуй useRef, якщо…
- Потрібен доступ до DOM-елемента.
- Ти хочеш зберігати значення в компоненті та модифікувати його без виклику ререндеру.
#interview
Якщо вірити опитуванню, вам досі цікава рубрика, де ми розбираємо питання з технічних співбесід. А оскільки ми з Юрою активно їх проходили, то ловіть питання, яке мені трапилось і здалося дійсно цікавим: яка різниця між useState та useRef?
useState: коли потрібен ререндер.
useState створює реактивне значення. Якщо ти змінюєш стейт (через setState) - компонент ререндериться і ти побачиш зміни.
📌 Використовуйте useState, якщо…
- Зміна значення має викликати новий рендер.
- Значення впливає на розмітку.
useRef: коли ререндер НЕ потрібен.
useRef зазвичай асоціюють лише з ref на певний елемент. Але насправді в ньому можна тримати будь-що, це як контейнер для зберігання значення, яке залишається стабільним між рендерами. Але зміна .current не викликає повторний рендер.
📌 Використовуй useRef, якщо…
- Потрібен доступ до DOM-елемента.
- Ти хочеш зберігати значення в компоненті та модифікувати його без виклику ререндеру.
#interview
1👍10🔥10❤4