"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

Як пройти співбесіду англійською? 📚

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

👉 Співбесіда англійською – 11 найпопулярніших запитань та відповідей
👉 Співбесіда англійською мовою - як пройти інтерв'ю на англійській?

#interview

Database Normalization 🤓

Якщо вам раптом доведеться працювати з базою даних, обов'язково потрібно знати, як правильно її спроектувати. Хороший дизайн БД, зокрема нормалізація, — саме про це розповідає автор у відео нижче.

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

#interview

🔥 Next.js Interview Questions and Answers - 2025

Знайшли для вас круту шпаргалку про Next.js!

Стаття містить чудову підбірку питань і відповідей, включаючи основи SSR, SSG, ISR, а також маршрутизацію, API-роути та багато іншого. Ідеально підходить для підготовки до інтерв'ю!

Помітили, що немає питань про App Router. Тому, якщо вам буде цікаво, маякніть, спробуємо розкрити цю тему.

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

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

#interview

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

10 математичних та логічних задач зі співбесід 🧠

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

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

P.S. Пам’ятаю, останню задачу мені колись показав Юра — я просиділа над нею цілий вечір, але таки вирішила. А він за цей час зміг від мене відпочити 😁

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

#interview

11 Non-Technical Interview Questions for Software Developers (With Examples) 🤔

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

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

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

Зберігайте, щоб не розгубитись із відповідями на подібні питання 💛

#interview

CV 🤓

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

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

Заодно тестую Claude 4, який нещодавно з’явився. Згодував йому стару версію резюме — тепер разом ліпимо нову.

Єдине, що тривожить — Настя досі не починала дивитись у бік пошуку роботи. Схоже, жарти про содєржанку були не жартами 🤔

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

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

#interview

Go Code Challenge 🤔

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

Тепер до задачі: у демо-версії потрібно було вирішити проблему з множинами. Тож я готувався до чогось подібного, але… завдання виявилося іншим. Там був мінімальний веб-сервер. В імпортах уже був модуль із функцією GetUsers, і потрібно було лише відфільтрувати їх та повернути у відповіді на GET-запит.

Завдання було нескладним. Єдине, що фреймворк був для мене новим, тому довелося звернутись до ChatGPT, щоб дізнатися, як перевірити HTTP-метод.

#interview

Знову опитування!

Але цього разу - для нас. Ми хочемо трохи змінити формат блогу й перестати публікувати аби що, аби регулярно. Нам більше до душі ділитись дійсно цінними матеріалами та новинами. Тому пропонуємо невелике опитування: які рубрики вам ще цікаві, а які, на вашу думку, вже себе вичерпали?

Ось коротке нагадування про рубрики, які будуть в опитуванні:

#interview - розбираємо типові питання з технічних співбесід (давненько не було, зізнаємось).
#quiz - вирішуємо tricky задачки (переважно від Юри).
#todo - ділимось цікавими задачами, які треба вирішити кодом (або просто змушуємо вас щось зробити 😅).
#english_friday - щоп’ятниці обговорюємо цікаві теми англійською.
#how_to - ділимось класно реалізовані кейси (здебільшого з CodePen).

Для нас це важливо ⬇️

Мій досвід співбесід 🤓

Нещодавно я проходив кілька технічних співбесід і хочу поділитися з вами своїм досвідом.

Перше, що хочу сказати - не було жодної «сухої» співбесіди, де просто перевіряють знання. У більшості випадків це були розмови про рішення, досвід, з чим я стикався, як вирішував проблеми, а також про архітектурні підходи. Або IT-сфера відходить від жорстких теоретичних опитувань, або це частіше трапляється з тими, хто лише починає свій шлях в ІТ, або ж, можливо, мені просто щастить у цьому плані 😄

Приклади з моєї практики:

1. System Design Interview.
Мене попросили описати, як би я проєктував застосунок схожий на Twitter. Потрібно було розподілити компоненти, прийняти архітектурні рішення, що було досить цікаво.

2. Live Coding з AI.
На одній зі співбесід потрібно було за 20 хвилин реалізувати to-do list на React з нуля. Інтерв’юер додав, що було б цікаво побачити, як я використовую AI у процесі. Це було доволі незвично, особливо з урахуванням того, що довелося коментувати свої дії в реальному часі.

3. Live Coding з алгоритмами.
В одній компанії першим етапом був live coding, де потрібно було розв’язати дві задачі у стилі LeetCode. Треба було не лише знайти розв’язання, а й запропонувати покращення, пояснити підхід до задачі та оцінити алгоритмічну складність.

#interview

Мій досвід співбесід, частина 2 👩‍💻

Тепер вже Настя на зв’язку і розповім трохи про свої співбесіди.

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

На кожній співбесіді був live coding. Мене завжди це лякало, адже боюсь опозоритись і не написати якусь просту функцію. Але чим далі я в цьому процесі знаходжусь, тим більше розумію, що код писати мені легше, ніж відповідати на питання. Адже по суті я практик, а не теоретик. І задачки підкидали різнопланові: наприклад, написати просту апку на React, написати функцію мемоізації на JS, або задачки на роботу з об’єктами/масивами тощо.

По теорії ганяють гарно, але велику увагу, на мій подив, приділяють саме процесам у командах - Scrum, Kanban, Agile, різні метрики, функціональні/нефункціональні вимоги. На жаль, я мало працювала в командах із нормально налаштованими процесами, але, на щастя, маю освіту і це все вивчалося в університеті. По технічних питаннях постійно питають про accessibility, оптимізацію додатків (не тільки на React, а й на чистому HTML/CSS/JS), замикання/event loop в JS, Generic у TypeScript, поглиблено про хуки в React, state management, чим кращий Next.js і питання по ньому, знання Git, REST, GraphQL. Не забувають і про патерни, алгоритми, SOLID, декларативне/імперативне програмування і далі по теорії.

Я далеко не ідеально знала відповіді на всі ці питання. Одну співбесіду я думала, що повністю провалила, але все одно отримувала позитивні відгуки, що ще раз доводить: навіть якщо подаєшся на senior позицію, від тебе не очікують знання всього на світі. Головніше - твій досвід, відкритість і розуміння своїх сильних і слабких сторін.

#interview

*Десятки команд в Git просто існують*
Тим часом на співбесідах питають тільки різницю між git merge та git rebase.

Тому let's go розбиратись.

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

Уявіть, що у вас є гілка main і є ваша локальна гілка feature/1, де ви працюєте над якимсь новим функціоналом. Ви вже створили кілька комітів і хочете отримати останні зміни з головної гілки main (в якій тим часом також з'явились нові коміти).

git merge
Якщо ви виконуєте команду git merge, то створюється новий merge commit, який об'єднує дві гілки. В історії буде видно, як вони розвивалися окремо, а потім злилися в один потік (на першій картинці merge commit С6). З плюсів такого підходу - зберігається повна картина розвитку проєкту, але водночас вона виглядає більш заплутаною.

git rebase
Якщо ви викликаєте команду git rebase, то git перепише коміти вашої гілки так, ніби вони були зроблені після актуального стану main. На другій картинці після коміту C3 я викликала git rebase і отримала лінійну структуру. Перевага цього підходу в тому, що історія виглядає простою і послідовною, без зайвих merge-комітів. Але варто пам’ятати, що змінюються хеші комітів, і це може заплутати команду.

📌 Коротко:
- merge з’єднує історії як є;
- rebase "переписує" історію так, ніби все робилося послідовно.

А щоб розібратись, як працюють основні команди Git, вже вкотре рекомендуємо LearnGitBranching. Друзі, це СКАРБ!

#interview