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"

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