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

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
Download Telegram
Welcome!

Let's practice our English! So...

👉 If you had to explain your job to a 5-year-old, how would you do it?

Have a nice #english_friday 💛
👍7🔥3🎉2
This media is not supported in your browser
VIEW IN TELEGRAM
#how_to створити ефект набору тексту, як у терміналі 💻

👉 Відкрити посилання
👍61
Ховайте свої API-ключі 🎂

Починаємо тиждень із повчальних історій. Якщо ви вже давно з нами, то знаєте, що Настя — людина традицій. І кожного 21 березня вона збирає всіх наших друзів їсти київський торт. Ніхто його не любить, і вона сама теж, але це вже традиція. У мене є питання до її політичних поглядів, але то вже особисте.

Цього року ми хотіли запаритися й організувати різні інтерактиви. Одним із них була вікторина. Для цього є гарний вебзастосунок, тому вирішив його використати й почав складати список питань. Я хотів додати зображення та відео для інтерактивності, але виявилося, що ця функція доступна лише у PRO-акаунтах. Щоб отримати доступ, потрібно було одноразово сплатити певну суму $. Платити не дуже хотілося (київський торт сам по собі також не дешевий), тому я вже почав шукати безкоштовні альтернативи, але стало цікаво, як усе влаштовано на цьому сайті.

Перше, що помітив – весь вихідний код був відкритий (не мініфікований, не обфускований). У ньому знайшовся адмінський API-ключ для Supabase, який був доступний на клієнті. Обмежень по доменах не було, тому вдалося підключитися і отримати доступ.

Інформація про план акаунта зберігалася в базі даних. Для цього використовувався окремий бекенд, і не було очевидно, чи ця база на Supabase.

З вихідного коду також стало відомо, що існує адмінська сторінка, доступна лише для одного акаунта – розробника. На щастя, ID цього акаунта був захардкоджений. Завдяки доступу до Supabase вдалося створити magic link, який дозволяв увійти на будь-який акаунт без пароля. Після цього залишалося лише видати собі Pro-план через адмінську панель.

Висновок: Завжди перевіряйте, які дані ви відкриваєте публічно, щоб випадково не дати доступ до своїх ресурсів.

З етичних причин посилання не публікую – збираюсь повідомити розробника про вразливість. Але сподіваюсь, що PRO-акаунт мені залишать, бо створювати вікторини мені сподобалось.

То шо, я тепер хакер, получається, чи шо?

#localhost
🔥28😁72👍1
🙃
😁221
🔥 Next.js Interview Questions and Answers - 2025

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

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

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

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

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

#interview
👍10🔥5
Що виведе консоль?
Anonymous Quiz
37%
undefined true
41%
undefined false
11%
null true
11%
null false
👍8
#todo написати функцію на будь-якій мові програмування, яка приймає масив чисел і повертає той самий масив, але з усіма нулями, переміщеними в кінець, зберігаючи порядок ненульових елементів.

Наприклад:
[0, 1] => [1, 0]
[0, 1, 0] => [1, 0, 0]
[0, 1, 0, 3, 12] => [1, 3, 12, 0, 0]
[0, 12, 0, 1, 3] => [12, 1, 3, 0, 0]
3👍3
Aerospace Script 🪟

Window manager — це програма, яка керує вікнами ваших застосунків: їхнім розташуванням і розміром.

Серед таких програм (або схожих до них) можна виділити:
- Linux: i3, Hyprland;
- MacOS: Magnet, Rectangle, Yabai, Amethyst.

Зараз я тестую Aerospace. І в один момент я зрозумів, що мені дечого не вистачає.

#how_to втикати відосіки під час роботи, якщо у вас один монітор: двічі натискаєте праву клавішу на відео в YouTube та натискаєте Picture in Picture.

Проблема в тому, що через використання WM я розділяю вікна на різні воркспейси, а вікно Picture in Picture залишається тільки на одному з них. Оскільки fixed-режиму для вікон немає, єдиний варіант — змусити вікно автоматично переміщуватися під час зміни воркспейсу.

Ось як це зробив я:
exec-on-workspace-change = [
'/bin/bash/', '-c',
'aerospace move-node-to-workspace --window-id $(aerospace list-windows --monitor focused --app-bundle-id com.google.Chrome --format "%{window-id} %{window-title}" | awk "\$0 ~ /Picture in Picture/ {print \$1}") $AEROSPACE_FOCUSED_WORKSPACE'
]


#experience
2👍2🔥2
Welcome!

Let's practice our English! So...

👉 Do you think certifications matter in software development? Why or why not?

Have a nice #english_friday 💛
😁152
This media is not supported in your browser
VIEW IN TELEGRAM
#how_to створити ефект прокручування на числах.

Бібліотека NumberFlow дозволяє легко реалізувати цей ефект, не має жодних залежностей і добре кастомізується. Підтримує React, Vue, Svelte та Vanilla JS.

👉 Відкрити посилання
🔥93👍3
Розпочинаємо тиждень із нового опитування! 👻
😁204
Чи продовжували б ви програмувати / вивчати програмування, якби мали достатньо коштів для комфортного життя?
Anonymous Poll
38%
Так
36%
Скоріше так, ніж ні
17%
Скоріше ні, ніж так
8%
Ні
👍71😁1
Що виведе консоль?
Anonymous Quiz
15%
{}
44%
{ a: [Function: a] }
25%
{ a: "() => 1" }
16%
{ a: 1 }
👍11
#todo поділіться своїм останнім досвідом проходження технічної співбесіди. Які запитання ви отримували? Чи відповідали вони вашому рівню?

Так, так, ми давно не були на співбесіді, which is a shame, але нам цікаво, що там зараз відбувається! 🥲
😁15👍1
😁171
Я тепер Vibe coder 💅

Нещодавно @Yurets7777 розповідав у чаті, що замовник хоче почути пояснення від тих, хто не використовує Cursor: як вони планують залишатися такими ж продуктивними, як ті, хто працює з ним?

ШІ настільки швидко розвивається, що важливо навчитися ефективно ним користуватися. Тож я вирішив спробувати й встановив Cursor, зараз тестую Free Trial.

Перше, що варто відзначити: Cursor побудований на базі VS Code. Тому, якщо ви працювали у VS Code, звикнути до нього буде легко. Передбачено імпорт налаштувань, хоча у мене виникли труднощі з перенесенням профілів. У VS Code я використовував різні конфігурації для різних проєктів, але перенести їх у Cursor не вдалося. Я спробував вручну відтворити налаштування, але зіткнувся з іншою проблемою: при відкритті не-default профілю всі параметри постійно скидалися. Загалом, останнім часом я працював у Neovim, тому перехід дався непросто.

Ще не до кінця розібрався з робочим процесом у Cursor. Тут є кілька режимів (chat, agent…), і підказки буквально вискакують на кожному кроці, навіть коли їх не просиш. Поки що ретельно перевіряю кожну зміну, яку він пропонує, і досить часто доводиться вказувати, що виправити. Також не до кінця зрозумів, як краще з ним працювати: давати одразу велику задачу й доопрацьовувати її частинами чи самому продумувати загальну схему, а потім просити імплементувати окремі шматки?

Загалом, враження поки змішані. Для мене ШІ — це інструмент, яким можна користуватися, але точно не той, що зробить усю роботу за мене. Водночас здається, що Cursor (разом із Windsurf, Trae та іншими) задає правильний напрямок. Vibe coder-ом я поки точно бути не хочу, але намагаюся знайти оптимальний спосіб інтеграції ШІ у свій робочий процес.

Подивимося, як ця технологія розвиватиметься далі.

А ви вже тестували щось подібне? Діліться враженнями! 💛

#experience
👍9🔥5😢2💅1
Welcome!

Let's practice our English! So...

👉 What do you think about this situation? Is the author right or not?

📎 You can check the source here

Have a nice #english_friday 💛
😁11