Web Overflow 🇺🇦
4.32K subscribers
388 photos
40 videos
3 files
519 links
Затишний блог про веб-розробку і не тільки 💛

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
Download Telegram
🥲
😁17👍1😢1
"Неофіційні" правила в команді 👀

Ви напевно вже чули, що ми понад два роки працюємо над стартапом. За цей час наша команда значно виросла (спочатку працювали лише вдвох, а тепер нас уже 7 розробників із різних країн і часових зон). Разом із цим стало трохи складніше взаємодіяти у команді: кожен сфокусований на своїх тасках, вони часто переплітаються, виникають одні й ті ж питання, ті ж проблеми. А оскільки внутрішні процеси в нас майже не налаштовані, ми вирішили запровадити кілька "неофіційних" правил, які мають допомогти нам покращити взаємодію.

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

2. Ділити завдання на менші частини.
Оскільки це стартап, таски бувають дуже різними — від "підправити стилі таблички" до "розробити мобільний застосунок". Якщо завдання велике, намагаємось розбити його хоча б на backend і frontend або на окремі модулі. Адже якщо PR містить 100+ змінених файлів, його дуже складно перевірити — це займає купу часу, а якість рев’ю від цього тільки страждає.

3. Перевіряти PR-и колег.
Ми працюємо над великим проєктом, і важливо розуміти, що розробляють інші учасники команди. Якщо немає термінових завдань, намагаємось приділяти час рев’ю чужих PR. Це допоможе підтримувати якість коду, уникати конфліктів та краще розуміти загальний розвиток проєкту.

У нас немає бізнес-аналітика, ПМа, тестувальника і взагалі жодних "зайвих" людей. Так, звучить страшно, але це стартап, шо поробиш 😅 Сподіваємось, ці правила допоможуть нам трохи врятувати ситуацію.

Розкажіть, які "неофіційні" правила є у вас у команді? 💛

#experience
10👍5🔥3
👍6🤯5
Чи буде виведено імʼя покемона?
Anonymous Quiz
25%
Так, перед помилкою
34%
Так, після помилки
42%
Ні
🤯9👍3
#todo написати функцію на будь-якій мові програмування, яка приймає масив подій обʼєктів типу:
{
"start": "DateTime",
"end": "DateTime"
}


Кожен цей обʼєкт описує певну подію у календарі. Функція має повернути всі пари обʼєктів, які перетинаються у часі.

Наприклад:
[
{ "start": "2025-03-12 08:00", "end": "2025-03-12 08:30" },
{ "start": "2025-03-12 10:00", "end": "2025-03-12 13:00" },
{ "start": "2025-03-12 12:00", "end": "2025-03-12 15:00" },
{ "start": "2025-03-12 14:30", "end": "2025-03-12 15:00" }
]


Результат:
[
[
{ "start": "2025-03-12 10:00", "end": "2025-03-12 13:00" },
{ "start": "2025-03-12 12:00", "end": "2025-03-12 15:00" }
],
[
{ "start": "2025-03-12 12:00", "end": "2025-03-12 15:00" },
{ "start": "2025-03-12 14:30", "end": "2025-03-12 15:00" }
]
]
👍32
This media is not supported in your browser
VIEW IN TELEGRAM
Welcome!

Let's practice our English! So...

👉 What’s your favorite framework or library, and why?

Have a nice #english_friday 💛
😁8👍4
👍61
GitHub Copilot review 👀

Нещодавно в нашій команді з’явилося багато PR-ів, які потрібно було перевірити. Найскладніше – писати коментарі на доволі очевидні речі. Хотілося, щоб хтось (наприклад, АІ) узяв це на себе.

Microsoft (через GitHub і VS Code) активно впроваджує Copilot у свої продукти. Нещодавно вони додали Copilot Agent у VS Code (щоправда, поки що лише в preview).

Щоб спростити собі життя з PR-ами, ми зареєструвалися у waitlist GitHub Copilot Review. Юрі доступ дали приблизно через два тижні, а от Настя, на жаль, не помітила, що отримала його вже наступного дня 🥲

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

Якщо вам цікаво, залишаємо посилання, де можна зареєструватися у waitlist. І, звісно, діліться своїми враженнями та очікуваннями.

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

#news
👍102
Lynx 🐈

Близько тижня тому компанія ByteDance представила новий JS-фреймворк Lynx, який дозволяє розробляти застосунки для iOS та Android.

Заявлено, що його продуктивність значно вища порівняно з React Native. Стилі можна писати навіть на CSS, що доволі зручно. А найцікавіше те, що Lynx не прив’язаний до конкретного фреймворку та підтримує React, Vue, Svelte та інші.

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

#news
👍7🤯21😁1
5👍3
#todo написати функцію на будь-якій мові програмування, яка приймає два масиви чисел, відсортованих у порядку зростання, і повертає один відсортований масив, що містить усі елементи вхідних масивів. Заборонено використовувати вбудовані методи сортування.
2👍2
TypeScript port 🏎️

Цікавий факт: TypeScript написаний на ... TypeScript.

Щоб покращити продуктивність TypeScript (зокрема, type checker та компілятора), команда працює над портом на мову програмування Go. Перехід на нативну імплементацію та використання concurrency дозволили досягти приблизно 10-кратного прискорення, що вражає.

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

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

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

#news
👍102
Welcome!

Let's practice our English! So...

👉 Do you think true privacy exists in today’s online world? What steps do you take to protect your privacy online?

Have a nice #english_friday 💛
😁113
#how_to перевантажити функції в TypeScript.

👉 Читати пост
4👍2
Як давно ви долучились до нашого каналу? 👀
Anonymous Poll
10%
2025
33%
2024
26%
2023
14%
2022
17%
Це було давно і неправда 😅
3👍3
TanStack Form 📋

Ми вже багато розповідали про продукти від TanStack — у них уже сформувалася ціла екосистема. Нещодавно вони представили ще один інструмент — TanStack Form.

Його створення мотивували відсутністю вбудованих засобів для роботи з формами у багатьох фреймворках. Через це розробникам доводиться або писати власні рішення, або використовувати сторонні бібліотеки. TanStack Form має на меті вирішити проблеми продуктивності (згадуємо redux-form), складної валідації та композиції форм.

Ось простий приклад використання TanStack Form:
const form = useForm({
defaultValues: { ... },
onSubmit: async ({ value }) => { ... },
})

...

<form.Field
name="firstName"
validators={{
onChange: ({ value }) => !value ? 'A first name is required' : undefined,
}}
children={(field) => (
<>
<label htmlFor={field.name}>First Name:</label>
<input
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
/>
<FieldInfo field={field} />
</>
)}
/>


Завдяки використанню form.Field тут є гарна підтримка TypeScript, а також можна пропускати деякі пропси (аналогічно до <Controller control /> у react-hook-form).

Валідація підтримується як для всієї форми (через useForm, зокрема зі схемами типу zod), так і для окремих полів.

Що одразу привертає увагу - підхід через children. Полю передається функція, а не JSX-елементи. Команда TanStack у коментарях зазначає, що render-пропси - "great". А що думаєте ви?

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

#library
👍81🔥1
Radashi ⚙️

Колись ми розповідали про Radash — легку й корисну бібліотеку, яка містила багато зручних методів і могла стати альтернативою Lodash. Вона була оптимізованою для TypeScript мала меншу вагу, що робило її привабливим вибором для багатьох розробників.

Проте з часом підтримку Radash припинили. На щастя, з’явилася її дочірня бібліотека, яка продовжує розвиток проєкту та зберігає ключові переваги попередника. Вона, як і раніше, пропонує безліч утиліт, які можуть стати в пригоді в будь-якому проєкті. Тому, якщо ви шукали сучасну й легку альтернативу Lodash, варто звернути на неї увагу.

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

#library
👍62
4👍2🤯1
#todo написати функцію на будь-якій мові програмування, яка приймає масив, що складається з чисел або символів операцій (+, -, *, /), інтерпретує його як вираз у префіксній нотації, обчислює значення та повертає числовий результат.

Наприклад:
['+', 10, 2] => 12
['*', 2, '+', 10, 2] => 24
['/', '*', 2, '+', 10, 2, 4] => 6
4🤯2