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

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
🚀 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
🤯6👍52🤔2👏1
🤯13👍102🤔2👏1💯1
#todo написати функцію на будь-якій мові програмування, яка виконує транспонування матриці.

Приклад транспонування:
[[1, 2, 3], [[1, 4, 7],
[4, 5, 6], => [2, 5, 8],
[7, 8, 9]] [3, 6, 9]]
🤔18👍7🔥32👏1🤡1
🚀 Noty.ai

Один з наших близьких друзів зараз активно штурмує британський ІТ ринок. АЛЕ коли він заходить до них на дзвінки, він абсолютно нічого не розуміє. На жаль, якщо ви добре знаєте американську англійську, це не означає, що ви зрозумієте британську.

💡 Він знайшов рішення!

Noty.ai автоматично створює субтитри в режимі реального часу під час дзвінків за допомогою Google Meet і Zoom. Але це ще не все! Він зберігає всі ваші нотатки, статистику та підсумки.

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

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

#tips
👍165🤯3🔥1🥰1👏1🤔1
Welcome 👋

Let's practice our English! So...

👉 Which technology would you choose if you were forced to replace your current one and why?

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

Have a nice Friday! 💛

#english_friday
8👍3🔥3👏1🤔1
APIs for your project

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

Хочемо поділитися з вами статтею з списком відкритих API, з яких ви можете почерпнути трохи натхнення та знайти ідею для власного проекту.

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

#article
👍224🔥4😁1🤩1
#todo розшифрувати закодований текст - Ckfdf Erhf]ys!
👍8🤔4🔥3🤯1