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

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
👍63🔥2👎1🤔1
Що виведе консоль?
Anonymous Quiz
19%
false false
15%
false true
53%
true false
14%
true true
👍19🤯8🔥3🤔32💯2
#todo написати функцію на будь-якій мові програмування, яка на вхід отримує стрічку і повертає довжину останнього слова. Наприклад, для стрічки “ Hello from Web Overflow ” функція повинна повернути 8 (останнє слово Overflow і його довжина 8).
5👍4👏1🤔1🤯1
🦖 Docosaurus

Пропонуємо вам переглянути наступні веб-сайти:

👉 Jest
👉 React Native
👉 pnpm

Не помічаєте нічого спільного?

Ну, по перше, всі вони закликають підтримувати Україну, що дуже важливо! 🇺🇦

А ще, якщо придивитися, всі вони трішки схожі - кнопки, поля для пошуку та інші компоненти. Ви сильно здивуєтесь, якщо я скажу, що це ще один JavaScript фреймворк? 😱

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

Особливістю є те, що ви можете писати не тільки React-код, а просто Markdown сторінки. Ще тут є підтримка версіонування (яке швидше за все може знадобитись), інтернаціоналізація, пошук та налаштування візуальної теми.

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

👉 Читати документацію

#library
👍184🔥3🤔1
Good Morning, guys!

Let's practice our English! So...

👉 Which tools/services do you consider to be very useful so you pay for them (Ex: Google Drive, Netflix, Spotify and etc)?

Як завжди, можете писати свої відповіді тут або в чаті.

Have a wonderful Friday! 💛

#english_friday
5👍5👏2🔥1🤔1
🚀 Arc Browser

Я думаю, що вже всі помітили, що я обожнюю постійно відкривати для себе щось нове. Ось і сьогодні я нарешті отримав доступ до нового браузера Arc Browser 🎉

І перше враження було вау 🤩

Вони обіцяли щось нове та незвичне, і вони свого слова дотримались - надзвичайно відполірований дизайн та реорганізовані всі звичні для нас інструменти. З основного ще виділю те, що він таки дає враження повністю повноекранного. Є вбудована функція split view, тому тепер з легкістю можна одночасно дивитися СуперМаму та ревʼювити код (це must have для Насті 😄). А ще є вбудовані нотатки та щось на кшталт муд-борду. Вражаюче 😱

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

А поки залишаємо їх сайт!

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

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

🎁 В мене ще є кілька запрошень, тому, якщо є охочі, пишіть в коментарі!

#news
👍115🔥3🤩3😁1🤡1
Підготували для вас трішки гавнокоду. #todo порефакторити його і пояснити, що з ним було не так.
👍6😁5🔥2🤔2😱1
Advanced VS Code Shortcuts

Працюєш у VS Code? Маємо для вас дещо корисне! 🤩

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

Тому знайшли 2 статті (2 частини), де показано на детальних прикладах використання крутих шорткатів. Деякі для нас добре відомі і ми постійно їх використовуємо, а деякі ми побачили вперше, але вже активно практикуємо в роботі!

👉 Читати частину 1
👉 Читати частину 2

Зберігайте і, найголовніше, використовуйте! 💛

#article
👍34🔥7🤩43🤔1
2👍2🔥2👏2
Як обробити складний state в React?

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

Інколи стан компоненти в React може бути досить складним. В таких випадках часто породжуються різні функції для роботи з цим станом і стає важко за всім прослідкувати. А ще, якщо потрібно передавати всі ці дані компонентам вниз, настає повний жах. Хочеться мати все в одному місці.

Для вирішення даної проблеми можна використати useReducer. Це альтернатива до useState, яка допомагає в роботі з складними станами.

useReducer приймає на вхід функцію reducer, початкові дані та функцію ініціалізації (опціонально). Найважливіша частина тут - reducer. Це функція з типом (state, action) => newState. Ті, хто знайомий з redux, мабуть помітили спільне. state - попередній стан, action - це обʼєкт, який описує, що потрібно змінити.

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

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

👉 Читати документацію
👉 Читати статтю

#interview
👍143👏3🤯3🤔1
👍52🔥2🤯2🤔1
Що виведе консоль?
Anonymous Quiz
25%
Promise
33%
string
20%
object
22%
function
👍21🤯96🤔4🔥2
#todo написати функцію на будь-якій мові програмування, яка на вхід отримує дві стрічки та повертає boolean, який вказує, чи є ці стрічки анаграмами. Анаграма - переставлення літер у слові, в результаті чого утворюється нове слово.

Наприклад, "літо" та "тіло" - вхідні два слова мають однаковий набір літер та їх кількість.
👍11🤯8🤔4🔥2😁1
🚀 dnd kit

Пам'ятаєте, ми кидали відео, де описано, які бібліотеки краще використати для розробки drag and drop, а які вже застарілі?

Минулого тижня мені якраз випала нагода додати drag and drop функціонал. Тому я ще раз переглянула відео, обрала для себе dnd kit і не пожалкувала! Класна документація, багато прикладів, легкий у використанні. Тому сміло можу його рекомендувати!

Я задоволена, замовник задоволений - всі щасливі! ⤵️

* In addition, your landing pages and drag-and-drop designs are exceptional. You should be proud of the work you have produced!

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

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

#library
👍16🔥43👏1
Good Morning, guys!

Let's practice our English! So...

👉 Please tell us how you imagine your perfect working day.

Як завжди, можете писати свої відповіді тут або в чаті.

Have a wonderful Friday! 💛

#english_friday
👍5🔥43🥰1
yargs + inquirer

Якщо ви пишете консольний застосунок, то рано чи пізно потрібно буде додавати аргументи від користувача. І тут я бачу два шляхи: прописувати їх відразу при запуску команди або запитувати аргументи в користувача походу роботи програми.

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

Yargs - бібліотека node.js, яка допомагає вам розпарсити аргументи з командного рядка та згенерувати хороший інтерфейс користувача.

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

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

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

#library
👍122🔥2👏1
#todo опишіть будь-який патерн проектування і його практичне застосування 😎
🔥6🤔4👍3👏1
Інколи нам потрібно виводити список в стрічку і всі ми знаємо про метод .join. Але радимо спробувати зробити трішки елегантніший вивід, використовуючи вбудовані функції JavaScript.

Ділимось з вами коротким ютуб-тіктоком, в якому зможете побачити як це зробити 💛

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

#tips
🔥16👍43🤔3👏1
🚀 Top 100+ Angular Interview Questions and Answers 2023

Нещодавно ми ділились шпаргалкою на співбесіду про React, а сьогодні знайшли для вас про Angular!

Дана стаття має чудову підбірку питань/відповідей про Angular, які допоможуть успішно пройти інтерв’ю.

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

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

#interview
🔥10👍5👏3🥰1🤔1😍1