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

Чат: @web_overflow_chat
Співпраця: @web_overflow_support
Автори: @lluchkaa & @anastasiia_tarasenko
加入频道
Welcome 👋

Let's practice our English! So...

👉 Tell us which type of task you would never work on or maybe you have already got a bad experience with.

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

Have a nice Friday! 💛

#english_friday
4👍2👏2
New React Documentation 🎉

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

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

#news
👍27🔥84🎉4🌚1
Box Shadow 🎨

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

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

#tips
👍134🔥4🤩3
#todo продовжити послідовність чисел: 1, 11, 21, 1211, 111221, 312211, …

А якщо є вільний час, то написати код для отримання такого списку 💛
😁7🤔6🔥3👍2🤯2
Що таке tree-shaking? 🍃

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

Всі ж ми любимо встановити багато бібліотек без потреби або ж залишати в проекті код, який ніколи не використовуємо. Tree-shaking механізм аналізує ваш проект та сам видаляє непотрібний код.

Хто ж займається процесом? За це відповідають ваші збирачі модулів (webpack, rollup). Також важливо згадати, що зовсім не всі бібліотеки підтримують цей механізм. В основному, це працює з ES6 або вище, адже тут нам завезли "статичні імпорти" import something from "somewhere" замість const something = require("somewhere"). Причиною є те, що другий запис можна засунути в різні блоки (наприклад if), що не дозволяє заздалегіть визначити чи використовується цей модуль.

Тому tree-shaking дуже важливий у сучасній веб-розробці, адже дозволяє зменшувати розмір коду та підвищувати продуктивність 💛

#interview
👍23👏32🔥1
👍5🤯3🔥2🤔1
Що виведе консоль?
Anonymous Quiz
36%
false false
37%
false true
14%
true false
13%
true true
👍17🤔5🔥4🤯3
#todo написати функцію на будь-якій мові програмування, яка на вхід приймає число N і на вихід повертає масив з першими N простими числами.

Наприклад, 5 => [2, 3, 5, 7, 11]
👍5🔥2🤔2😱2
New AI 23.03 😱

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

На днях Google вступив в боротьбу з ChatGPT і вже відкриває доступ до Bard. Хоч він все ще з поміткою Experiment, ви все одно можете залишити свою заявку. Не спішіть радіти, адже України в списку немає, проте не сумніваюсь, що вже сьогодні будуть обхідні шляхи.

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

Не відстає і GitHub, який з анонсом Copilot X спробує захопити нішу саме розробників. Тут для вас одразу кілька варіацій. Можна спілкуватись у вже звичному форматі чату, отримати допомогу при роботі з документаціями або ж з Pull Requests, чи навіть попрацювати з ним з командного рядка.

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

#todo відгадати, скільки ще нових революційних штучних інтелектів ми побачимо до кінця тижня 😅

#news
😁8👍63🔥1
Welcome 👋

Let's practice our English! So...

👉 Tell us about your biggest mistake (fuckup) in the IT industry (at work, during learning). How did the situation finish?

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

Have a nice Friday! 💛

#english_friday
👍102🔥2🤔1
Zustand

Якщо вам потрібен менеджер стану для React, і ви віддаєте перевагу простоті, то Zustand стане чудовим рішенням. Це компактна бібліотека, яка надає інтуїтивний інтерфейс для роботи зі станом у React.

Однією з ключових переваг є саме простота: робота з Zustand схожа на використання звичайних хуків, тому вам не потрібно вчити нові підходи чи писати шаблонний код. Зокрема, дозволяє легко використовувати Immer, що істотно спрощує роботу з вкладеними об'єктами.

Отже, якщо ви шукаєте новий інструмент для роботи зі станами, обов'язково спробуйте Zustand!

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

#tips
👍133🔥3🤔3
This media is not supported in your browser
VIEW IN TELEGRAM
#todo розшифрувати текст з візуального відображення.
👍6🤯4🤔32😁1
Zapier 🔥

Github, Notion, Slack, Discord, Gmail, Jira/Trello, і це тільки початок списку сервісів, які стають нашою повсякденною рутиною. А чи задумувались ви над тим, щоб автоматизувати їх роботу між собою? Наприклад, коли хтось створює тікет в Jira, потрібно відправити повідомлення в канал у Slack.

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

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

#tips
👍134🔥4🤔3
Що таке React Suspense?

Памʼятаємо, що в React 18 нам підвезли concurrent mode, який може паралельно рендерити ваші компоненти.

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

<Suspense fallback={<p>loading…</p>}>
<Children />
</Suspense>


Зараз такий функціонал використовується у двох випадках: для компонент, які обгорнуті в React.lazy, та у таких фреймворках як Next.js, Remix чи Relay. Проте з часом планують додавати нові способи використання Suspense.

👉 Читати більше

А ще, забігаючи наперед, в експериментальній версії React ви вже можете спробувати нові хуки: use та useEffectEvent. Звісно, вони ще можуть сильно змінитись, але ви вже можете слідкувати за їх розробкою.

А от саме хук use працює у парі з Suspense і дозволяє дочекатись завантаження ваших даних.

👉 Дивитись відео про use
👉 Дивитись відео про useEffectEvent

#interview
👍14🔥4🤔32👌2
👍53🔥2🤔2
👍13🔥4🤔4🤣32
#todo написати функцію на будь-якій мові програмування, яка на вхід приймає масив та число N і на вихід повертає новий масив, який утворився з циклічного зсуву оригінального масиву на N позицій вправо.

Наприклад:
[1, 2, 3, 4, 5], N=1 => [5, 1, 2, 3, 4]
[1, 2, 3, 4, 5], N=2 => [4, 5, 1, 2, 3]
🤔10👍6😱3🤯2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Bard

На днях я отримав доступ до Bard - чат з штучним інтелектом від Google. Зараз він працює тільки в США та Об'єднаному Королівстві. Це ще досі експерементальний режим, проте цікаво, куди це все піде з урахуванням баз даних Google.

І ще коротка новина: Ілон Маск, Стів Возняк та інші відомі люди, які мають відношення до даної індустрії, написали листа з проханням призупинити розробки систем ШІ через ризики 🤔

#news
13🤔9👍6🔥2
Welcome 👋

Let's practice our English! So...

👉 Tell us about stereotypes about programmers that you think are truth/lie.

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

Have a nice Friday! 💛

#english_friday
🔥5👍32🤔1
Jotai 👻

Ще тільки недавно ми розповідали про Zustand, а сьогодні ділимося новим і дуже схожим допоміжним інструментом.

Jotai - бібліотека React, що використовує атомарний підхід до роботи з глобальним станом. З нею ви зможете відчутно зменшити кількість простих Context у своїх застосунках. Створіть атом у глобальному просторі і використовуйте його за допомогою useAtom.

Також ви отримуєте багато різних допоміжних утиліт, наприклад: зберігання стану в localStorage/sessionStorage, робота з асинхронними даними та інші.

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

#tips
👍83🔥3🤩1