#quiz #тест

Как проходят ваши рабочие будни? Надеемся, что продуктивно и вы уже построили крутые планы на выходные.

Все знают, что программистам важен английский язык. Ловите интересный сайт, на котором можете искать конкретную фразу в рандомных видео. Наш преподаватель по английскому иногда нам его включает, когда мы коверкаем слова (а мы любим такое дело). Так действительно лучше запоминается!

Открыть сайт

Loader

Сегодня хотим поделиться своей идеей - как делать лоадер?

На всех проектах, на которые я попадала, был глобальный лоадер, записаный в redux, который мог принимать true или false. Если true - отображался компонент лоадера, который закрывал весь контент, когда false - пропадал. Вроде бы идея неплохая. НО, а если у вас 2 или больше actions, первый то action отработает и поставит loader=false. А другие то actions ещё работают. Хм.. проблема.

На своём новом проекте, который я настраивала с нуля, я сделала хитрее. Глобальный лоадер я оставила, только он у меня не boolean, а массив (массив actions). Когда запускаются actions, я добавляю их тип в этот массив. Если массив не пустой - значит loader должен делать своё дело. Когда action закончил своё дело или произошла ошибка - я удалая его тип с массива. Если массив пуст - лоадер пропадает. Вот и все!

Ещё я использую redux toolkit. Это вообще бомба. У меня эта логика заняла не больше, чем 10 строк!!

Надеюсь, вам было интересно. А нам ещё интересней узнать, как вы делаете лоадер (такую вроде бы простую, но хитрую штуку) ⬇️

#tips #советы

Всем привет!
Ребята, мы взяли небольшой отпуск и поэтому пропадём на недельку. Но мы обещаем вернуться!!

Желаем вам продуктивной недели, но при этом, не забывать об отдыхе 💛

Виключайте світло. Цікавого контенту не буде.

Зараз ми не можемо ні працювати, ні спокійно спати і звичайно вести цей блог ми також не можемо.

Ми хочемо миру. Ми хочемо мирне небо над нашими головами. Ми хочемо бути поруч з рідними і друзями.

Якщо ви підтримуєте дії путіна - допобачення! Бажаємо вам пережити те, що зараз переживає кожен українець.

Ми вистоїм. За нами правда.

🇺🇦 Слава Україні!

Друзі, ви навіть не уявляєте, як ми скучили за вами. Ми віримо, що ви та ваші рідні у безпеці 🙏

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

Канал буде точно в такому ж форматі, як був і до цього, АЛЕ він буде виключно українською мовою (сподіваюсь, ви нас розумієте). Тому, якщо вам буде щось не зрозуміло з того, що ми будемо описувати в постах - запрошуємо вас до коментарів.

Також хочемо нагадати, що ми все здолаємо і дуже скоро!
Все буде Україна 💙💛

В чому різниця Spread і Rest операторів?

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

Давайте по простому, на прикладі масивів: Rest збирає дані в масив, spread, навпаки, розділяє дані масиву.

const [a, b, …rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]

В цьому випадку, ми зібрали 3, 4 в змінну rest і отримали масив.

const arr = [1,2,3];
const newArr = [...arr, 4]; // newArr: [1, 2, 3, 4]

А в цьому випадку масив arr розібрали на 1,2,3.

Тай таке.

Детальніше про ці два оператори, можете почитати тут: читати статтю

Там є дуужее багато прикладів, тому сподіваємось, буде наглядно і корисно 😉

#interview

GitHub Copilot

Ми вже десь вище писали за GitHub Copilot (а точніше тут).
Кароче, нам обом дали доступ!

І в нас є чудова новина: вони зараз почали активно відкривати доступи і тому ви також можете підписатись і швидко (амінь) поставити цей екстеншин. Посилання тут:

Відкрити сайт

Якщо коротко про наші враження, то Юрі він дуже зайшов і всім нашим знайомим. Починаєш щось писати - на тобі зразу готовий функціонал. Час дуже економить. Дійсно, розумна штука. Аж страшно!

А ось я як завжди. В мене зараз два активних проекта і в кожному я використовую Tailwind CSS (про мої враження від нього я напишу пізніше) + я працюю в Web Storm. І коли я включаю Copilot в мене середовище перестає підказувати tailwind і взагалі виключаються всі звичайні підказки (можливо якась фігня з версією Web Storm, як завжди). Тому я поки з ним не дуже подружилась. А шкода.

А ну да, Юрі ще досі цікаво, чи він не вчиться на нашому коді і чи не буде він його потім красти (наче комусь нада мій гавнокод).

Тому дуже чекаємо на ваші відгуки про цю круту штуку!

#experience

Всім привіт!

Нещодавно мені прилетіла задача, винюхати щось таке, на чому можна було б почати новий проект. Взагалі вибір був з двох - Next.js та Remix. Якщо хтось їх ще не зустрічав - це фреймворки для написання React додатків. Вони дозволяють рендерити сторінки на сервері, що робить сайт швидшим, та мають ще ряд переваг. Так як з Next.js я вже знайомий, головна ціль була зрозуміти чи буде Remix кращим вибором.

Сам фреймворк створений розробниками react-router. Також він дуже швидко білдиться, так як не використовує бандлерів, по типу, webpack чи rollup. Взагалі його творці повернулись до основ web-додатків. Самі запити відбуваються на стороні сервера, а клієнт робить їх за допомогою старих добрих форм. Якщо слідувати всім принципам фреймворку, то на клієнті можна обійтись і без підтримки Javascript. Але в свою чергу, це змушує вас робити все незручним (на мою думку) способом.

Моя думка сходиться з думкою автора відео нижче - Remix більше підходить для додатків з відображенням даних, наприклад, певної аналітики. Тому зараз моїм вибором став Next.js. В додачу виходу нової версії React, думаю, фреймворки теж отримають значні покращення.

В будь-якому випадку буде цікаво почути і вашу думку!

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

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

#article

Cookies vs sessionStorage vs localStorage

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

Як завжди, давайте, по простому.

Почнемо з cookies. Я думаю, вас також замахує, що коли заходиш на більшість сайтів, вас просять дозволити куки. Навіщо? Коли ви їх дозволяєте, на вашому пристрої додається маленький файл, в якому сайт записує дані про вас, які йому потрібні. Наприклад, цей сайт доступний у вільному доступі на 30 діб. Коли ви прийняли куки, сайт записав у файл дату, коли ви в перший раз заходили. І наступні рази, коли ви будете заходити на нього, він буде перевіряти по даті, чи ще не збігло тих 30 діб. Якщо так - ну всьо, допобачення.

localStorage - це місце, в якому ви можете зберігати собі дані у браузері за допомогою JavaScript. У кожного домена localStorage свій. А працювати з ним можна, як зі звичайним JSON об’єктом. І дані зберігаються навіть якщо закрити браузер.

А sessionStorage робить абсолютно те саме, але чиститься після закриття браузера.

Базу ми вам дали, а детальні можете почитати тут.

Читати статью

#interview