Що таке Lazy Loading? 🦥

А ви знали, що для кращої продуктивності інколи треба бути трішки лінивим? Або, якщо сказати красивіше - не робіть щось, поки в цьому немає потреби.

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

Для веб-сторінок можна реалізувати наступні техніки lazy-loading:

- Використання defer або async (читати пост) для завантаження скриптів. Завдяки цьому вони не будуть блокувати завантаження вашої сторінки.
- Використання loading="lazy" для зображень чи iframe.
- Використання IntersectionObserver. Завдяки ньому ви можете слідкувати за елементами та реагувати, коли вони зʼявляються чи зникають на екрані.

#interview

GPT-4 🤖

Кидаємо зараз, щоб не бути останніми (як зазвичай).

🔥 OpenAI представили GPT-4, наступну версію всім відомої моделі штучного інтелекту. Ну і звісно ж оновили СhatGPT, але поки тільки у платній Plus підписці.

Тішимося крутій новинці чи копаємо бункер для захисту від роботів? 😄

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

#news

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

Наприклад, "Hello from Web Overflow" => "Overflow Web from Hello"

IcoMoon 🌔

Замість того, щоб зберігати безліч картинок-іконок у вашому проекті, можна зробити font-family з даними іконками і використовувати його як звичайний шрифт!

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

Ділимось з вами сервісом IcoMoon, який допоможе перенести всі ваші іконки в шрифт.

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

#tips

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

New React Documentation 🎉

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

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

#news

Box Shadow 🎨

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

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

#tips

#todo продовжити послідовність чисел: 1, 11, 21, 1211, 111221, 312211, …

А якщо є вільний час, то написати код для отримання такого списку 💛

Що таке tree-shaking? 🍃

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

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

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

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

#interview

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

Наприклад, 5 => [2, 3, 5, 7, 11]

New AI 23.03 😱

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

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

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

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

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

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

#news

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

Zustand

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

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

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

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

#tips

#todo розшифрувати текст з візуального відображення.

Zapier 🔥

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

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

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

#tips

Що таке 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