Container Queries

Container queries дозволяють стилізувати елементи в залежності від розміру батьківського елемента (схоже до media queries, які залежать від розміру екрану). А якщо взяти до уваги, що сьогоднішні веб-сайти в більшості базуються на компонентах, то container queries стають надзвичайно актуальними!

Тому ділимось з вами відео, де автор детально показує, як ефективно використовувати дану властивість.

👉 Переглянути відео

#tips

Welcome 👋

Let's practice our English! So...

👉 Tell us about the best interview experience you have ever had.

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

Have a nice Friday! 💛

#english_friday

Loaders 🚀

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

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

#tips

#todo розшифрувати закодований текст - 01001000 01100101 01101100 01101100 01101111 00100000 01110111 01101111 01110010 01101100 01100100 00100001

State of JS

Раніше ми ділилися з вами посиланням на підсумки року від Stack Overflow та Fireship.

Зараз хочемо поділитись з вами підсумками суто по JavaScript. Саме звідси Fireship і брав багато графіків та інформації, але сподіваємось, вам буде цікаво поклікати і подивитись все власноруч.

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

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

#tips

Bad Code Smells In Typescript

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

Тому прикріпляємо статтю, де ви можете ознайомитись з поганими практиками в TypeScript.

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

#interview

#todo наверстати листівку-привітання з 8 березня і прикріпити код та зображення в коментарі.

Delete node modules ❌

Навряд чи ваш проект можна назвати великим, якщо node modules важать менше 100 терабайтів.

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

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

#tips

Good Morning, guys! ✨

Let's practice our English! Tell us your opinion about this question:

👉 What are the pros and cons of Ukrainian developers? Why do you think so?

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

Have a wonderful Friday! 💛

#english_friday

Input Handling ✍️

Коли ми стикаємось з полями для вводу, то на вибір отримуємо різні типи даних. І хоча звичайний type="text" може підійти для будь-чого, для вводу числових даних краще обрати type="number", а для вводу дати - type="date". Для того, щоб працювати з введеними даними, зазвичай потрібно ще їх обробити, наприклад, через parseInt, parseFloat чи new Date.

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

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

#tips

#todo порефакторити код і пояснити, що з ним було не так.

??

Нагадуємо про надзвичайно корисний оператор в JavaScript - nullish coalescing. Він повертає перший аргумент виразу, якщо він не null/undefined. В іншому випадку, він поверне другий аргумент.

Прикріпляємо коротке відео, яке допоможе вам швидко опанувати даний оператор.

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

#tips

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