Web Overflow 🇺🇦

#how_to створити frying pan preloader 🥘

Виконаний з допомогою HTML та SCSS!

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

Welcome!

Let's practice our English! So...

👉 What’s one thing you wish people would stop doing on social media?

Have a nice #english_friday 💛

CSS changed 🟣

Перше, що варто зазначити, — CSS отримав нове лого. Історія походження цього кольору справді унікальна. Щоб дізнатися більше, перегляньте відео нижче.

Бонусом: Fireship розповідає про фічі CSS, які мало хто знає, але більшість із них вже стали або незабаром стануть стандартними у браузерах.

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

#tips

State of JS/React 🤨

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

Опитування щодо JavaScript і React відкриті!

На нашу думку, це не просто спроба отримати статистичні дані. Використайте це на свою користь: додавайте у свій Reading List нові речі, про які ви не чули, або ж чули, але досі не досліджували. Наприклад, у першому питанні ми для себе відзначили error.cause та hashbang grammar. Також позначайте своє ставлення до технологій у запитаннях — це дає корисний фідбек для всієї спільноти.

І, звісно, це ще одна нагода показати світу, що в Україні багато крутих спеціалістів!

👉 Відкрити State of JavaScript 2024 Survey
👉 Відкрити State of React 2024 Survey

#tips

#quiz

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

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

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

#interview

Welcome!

Let's practice our English! So...

👉 If you could have an unlimited supply of one item (not connected to money), what would it be and why?

Have a nice #english_friday 💛

Driver.js 🚖
#post_from @vova_taras

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

Driver.js — бібліотека, яка дозволяє легко створити подібний тур по вашому продукту, підкреслюючи ключові елементи. Краще один раз побачити, ніж десять разів прочитати, тож перегляньте демо-тур на офіційному сайті driver.js.

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

#library

ESLint Stylistic 💅

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

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

Ми зараз пробуємо додати цей плагін, щоб форсувати відступи під директивами ("use client"/"use server"). Можливо, це не надто корисно, але зате забезпечить узгодженість у всьому коді.

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

#tips

#todo написати функцію на будь-якій мові програмування, яка приймає ціле додатнє число ms - кількість мілісекунд, та викликає заздалегідь визначену функцію f. Функція має повернути результат виклику функції f, якщо функція f виконалась менш ніж ms мілісекунд, інакше - викинути помилку.

#quiz

Axios adapter 🔌

На поточному Next.js проєкті ми використовуємо axios. І, якщо ви досліджували нові версії Next.js, то могли помітити, що вони розширюють вбудований fetch. Next.js дозволяє керувати кешем саме через fetch.

За замовчуванням axios використовує fetch аж третім в черзі. Проте, це можна легко змінити, встановивши параметр adapter, створюючи обʼєкт axios.

const api = axios.create({ adapter: ["fetch", "xhr", "http"] })

Після цього ми можемо передавати fetchOptions при виклику методів axios.

api.get("/", { fetchOptions: { ... } })

Відверто кажучи, ми ще не встигли це протестувати (PR поки висить), але вже цього тижня ми хочемо перевірити, чи все працює правильно.

#localhost

З Днем Народження, Web Overflow! 🎉

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

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

Сьогодні ми святкуємо не лише твій день народження, а й шлях, яким пройшли разом. Вітаємо тебе, ти особливе місце! 💛

#quiz

Live coding 😰

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

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

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

#interview

У нашого адміна сьогодні День Народження! 🥳

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

Вітаємо! 💛

#how_to створити toggle pill 💊

Виконаний з допомогою HTML та CSS!

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

Welcome!

Let's practice our English! So...

👉 If you could commit any crime, knowing it would ensure nobody would ever commit that crime again, what would you choose and why?

Have a nice #english_friday 💛

Spell Checker 🧙

Spell - це про заклинання чи орфографію?

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

На щастя, є дуже багато способів слідкувати за орфографією:

- VSCode має розширення;
- JetBrains, здається, має це вже вбудовано;
- для браузеру можете встановити Grammarly.

#tips

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

#quiz

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

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

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

#interview

next-intl 🌐

Якщо ви працюєте з Next.js і вам потрібна багатомовність, зверніть увагу на бібліотеку next-intl. Вона підтримує форматування, має хорошу інтеграцію з TypeScript, роботу з датами та числами, а також підтримує обидва роутери: pages і app.

Ми зараз додаємо її до проєкту та поки всім задоволені! 💛

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

#library

Hello, world!

На вихідних ми залипли на різні відео про те, як краще організувати робочий простір. Тож давайте поділимося фото свого робочого місця у коментарях!

Продуктивного робочого тижня! 💛

Free WebStorm 🤯

Вічно ми говоримо лише про цей VS Code.

В чаті з нами поділились крутою новиною - JetBrains оголосили про те, що роблять WebStorm та Rider безкоштовними (для некомерційного використання).

👉 Відкрити пост в Twitter
👉 Відкрити статтю в блозі

#news

Welcome!

Let's practice our English! So...

👉 If you could witness any historical event in person, which one would you choose and why?

Have a nice #english_friday 💛

Next.js 15 & Conference 🤯

Не встигли ще всі відійти від виходу Next.js 13 та 14, як вже цього понеділка команда розробників релізнула 15 версію як стабільну.

З найцікавішого там: підтримка React 19 та стабільний Turbopack. Ну і все це підкріплюється конференцією, яка проходить сьогодні о 19:00.

Здається, нам знову є багато чого повчити 🥲

👉 Читати статтю
👉 Долучитись до конференції

#news

Deno 2 🦖
#post_from @vova_taras

Deno існує вже досить давно, але супер-великої популярності він не здобув, адже мав низку проблем/мінусів. Одним з них була відсутність підтримки npm-пакетів. Але ось нещодавно творець Node.js та Deno представив Deno версії 2, в якій ця проблема була вирішена.

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

Ну і для ознайомлення, додаємо відео від Fireship.

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

#news

#todo написати функцію на будь-якій мові програмування, яка приймає масив цілих чисел nums та ціле число target, та повертає перший число-елемент масиву nums, яке найближче до числа target (має найменший модуль різниці). Масив nums гарантовано не пустий.

Наприклад:
[1, 2, 3, 4], 5 -> 4
[7, 5, 3, 1], 4 -> 5

#quiz

Welcome!

Let's practice our English! So...

👉 What’s one thing you believe everyone should try at least once in their lifetime?

Have a nice #english_friday 💛

#todo написати функцію на будь-якій мові програмування, яка конвертує кілометри в милі та іншу функцію, яка виконує зворотнє конвертування.

#quiz

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

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

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

#interview

Де Настя пропала?

Ми позиціонуємо цей канал як блог, тому, думаю, є сенс відзвітуватися, де я була весь цей час (якщо ви, звичайно, відчули мою відсутність 🥲).

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

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

Щоб здійснити цю поїздку, я взяла відпустку за свій рахунок (сабатікал по-новому). Зараз потроху вливаюсь у роботу. Думала, що повністю забула, як писати код. Трохи правда, але руки памʼятають 😄

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

Я в жодному разі не хочу дражнити більшу частину нашого комʼюніті, яка зараз не може виїжджати за межі країни. Я від щирого серця бажаю, щоб у кожного були можливості здійснювати свої мрії ❤️

Якщо у вас є якісь питання про цю країну або поїздку, you’re welcome!

#how_to налаштувати debugger для Next.js проєкту в VS Code.

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

А також зверніть увагу на client-side та server-side налаштування. Вони спрацюють для відповідних не-Next.js проєктів.

Welcome!

Let's practice our English! So...

👉 If you could invent a new holiday, what would it celebrate, and how would people celebrate it?

Have a nice #english_friday 💛

Ollama 🤖

Ollama — це open-source платформа для запуску LLM (великих мовних моделей) безпосередньо на вашому комп'ютері. Це дає вам можливість використовувати потужність штучного інтелекту без потреби в хмарних сервісах, що не тільки підвищує швидкість обробки, але й забезпечує більший контроль за вашими даними. Ви можете вибрати з великої кількості готових моделей, а також знизити витрати, використовуючи ресурси свого пристрою.

Ollama також дозволяє налаштовувати та розширювати моделі під ваші конкретні завдання, пропонуючи спеціальний файл конфігурацій — Modelfile (нічого вам не нагадує?).

#tips

TailwindCSS container queries 🥡

Колись давно ми розповідали про Container Query в CSS. За даними Can I use майже 91% девайсів користувачів зможуть використовувати цей функціонал.

TailwindCSS з коробки не підтримує Container Query, але вони розробили окремий плагін, який дозволяє використовувати цей функціонал, майже так само, як ви використовуєте media-query.

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

#library

#todo написати функцію на будь-якій мові програмування, яка приймає додатнє число n та повертає випадковий вектор довжиною n у форматі (x, y), де x - зміщення по осі X, y - зміщення по осі Y.

Наприклад:
n = 5 => (3, 4)
n = 5 => (4, 3)
n = 5 => (-3, -4)

#quiz

Збір від "Повернись живим" та MacPaw

"Повернись живим" та MacPaw збирають 3,2 млн грн для купівлі кейсеваку для 53-ї та 54-ї піхотних бригад. Це спецмашина, яка евакуює поранених з найскладніших територій фронту.

🚑 Машину потрібно терміново доставити на фронт, тому 5, 10 чи 15 гривень від вас – це чиєсь врятоване життя.

А той, хто задонатив 200грн і більше - можуть виграти MacBook Air чи iPhone 15 Pro Max.
Або ж унікальний сталевий жетон від RBTNK за кожну закриту дружню банку на 10к грн. Для цього - пишіть до @macpawfoundation в Instagram чи Facebook.

👉 Долучитись до збору

VS Code Remote tunnels 🚇

Уявіть ситуацію, що весь ваш проєкт на робочому компʼютері в офісі, а вам терміново треба з дому щось змінити. Здається у VS Code є рішення.

Яке саме? Дивіться у відео за посиланням нижче.

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

#tips

Never* use git pull ↙️

Якщо ви працюєте над проєктом не самі, то вам часто доводиться стягувати зміни з поточної гілки або з базової. Якщо ви робите це через git pull - ви кожного разу будете отримувати новий merge комміт. Наче нічого поганого, але постійно буде присутній один "зайвий" комміт.

А от як цього можна уникнути завдяки rebase - дивіться у відео за посиланням нижче.

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

#tips

#how_to використовувати Object.groupBy в JavaScript.

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

#shorts

Welcome!

Let's practice our English! So...

👉 What’s the one quote you live by, and how does it inspire you?

Have a nice #english_friday 💛