😂Я подивився DemolitionRanch і що я хочу сказати😂

1️⃣ Вони круті і особливо крутий у них підхід до відео, - хлопці просто кайфують від того що роблять. Це дуже надихає.

2️⃣ Я таки надихнувся і завтра планую зробити ефір #React_Ranch. Cпробуємо навантажити рендер реакту і подивитись скільки і чого він зможе витримати )

👉 Так що чекаю вас завтра (22.08) на прямому ефірі о 19:00. Лінка теж буде вже завтра.

Бережіть себе, скоро побачимось)

П.М. Хто не прийшов - той не побачив ;)

Будемо експерементувати з React в прямому ефірі

В програмі:

👉1000 звичайний каунтерів
👉 Типу екран в екрані
👉 (Голосом диктора в боксі) - Гіііііпееееркуууб!

Побачимо хто здасться раніше, React чи Chrome 😆

Ставте нагадування щоб не пропустити!

😅 Все таки вийшло трохи важкувато😅

Сама ідея мені відверто сподобалася, ось так пробувати і дивитися на результат дуже цікаво. 10_000 батонів я до цього на сторінку ще не ставив).

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

Тому, формату жити, але він буде меншим - до 30хв і один якийсь приклад. Мені здається так всім буде і цікавіше і простіше.

Дякую за відгуки!

Тримайте лайфак

Ми, на проекті, зараз переходимо на strict mode в TypeScript і в мене зараз в консолі більше 500 попереджень. Власне їх так багато, що я навіть не можу їх всі прочитати щоб виправити. Але є простий лайфак - спрямувати вивід з консолі у файл:

npm run type-check > ts.txt

Ключовий момент тут оператор виводу > і назва файлу куди піде запис. Так само можна робити з лінтером, тестами і будь-чим що виводить дані у консоль.

Спробуйте самі:

echo 'hello world' > file.txt

Працює з cmd, powershell на Windows!

П.М. Лайфак № 2 - використовуйте striсt mode з самого початку, щоб не страждати як я 😃

@reactbeginners

😍З днем незалежності всіх нас! 😍

Нехай, через рік, ми будемо святкувати цей день, вже з перемогою!

❤️ Дякую за таку теплу підтримку - тепер подробиці❤️

Курс будемо робити як і минулий - в дві ітерації. Спочатку коротка версія, потім, за необхідності, розширена, але формат буде іншим:

- Довжина відео - мінімальна, буду триматися між 5 та 20 хвилинами
- Кожне відео присвячено одному і лише одному аспекту
- Всі відео записані* (так це довше, але воно того варте)
- У відео дві частини (за деяким виключенням) - спочатку коротка теорія, потім коротка практика
- Під час всього курсу робимо один проект - спрощений блог

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

⏳По часу - не швидко. Плюс я хочу спочатку зробити хоча б чотири відео, а вже потім їх викладати.

❗️Найголовніше - є бачення як це зробити і бажання.

Тож, шановні, пора до справи. Скоро побачимося!

* Прямі ефіри за шоколапки :)

Itera Open Day відбувся!

Як вам офлайн?

П.М. Більше танцювати не буду 😂

Оцей <Image/> з Next.JS класна штука

👉Він автоматично регулює вагу зображення
👉Сам визначає width та height і мені більше не треба з цим мучитися
👉Автоматично додає йому lazy, щоб не вантажити зображення які користувач поки не бачить

Круто правда?

❗️Але є два нюанси (ну завжди є нюанс)

😢 По-перше: Image не працює якщо ви хочете експортувати Next.JS в статичний сайт
😢 По-друге: не забувайте додавати priority атрибут для головного зображення на сторінці, бо може так статися що він буде ліниво вантажитись, а це не добре.

Хтось вже пробував цю чуду-юду?

@reactbeginners

Ну так і є)
Правда не скажу що все це він робить добре 😁

Нагадую - створювати компоненти в середині компонентів погана ідея.

✍️ Хоча це інкапсуляція (добро), але з точки зору реалізації React це зло, і воно суттєво переважує.

Всі ж знають чому?

П.М. На зображенні - оригінальна версія матрьошки - та яка з Японії.

Приклад того як НЕ треба

Як гадаєте, чому?

Повна відповідь буде трохи пізніше

Розповідаю звідки пішли ноги, і чому ці ноги геть зовсім криві.

✍️ Як ви знаєте, в JS інкапсуляцію не завезли by design. Раніше навіть не було можливості робити приватні поля, тому всі писали _xxxx і молились аби ніхто такі поля просто так не чіпав.
До речі, оця конструкція - функції, яка викликає сама себе (function () {})(); теж пішла з бажання сховати всі внутрішні змінні і не смітити ними в глобальному об'єкті window.

😊 З часом ситуація покращилася, з'явилися ES модулі, які автоматично ховають все, що не експортується і не додають свої змінні в window. Але, залишилась інша проблема - глобальність експорту. Якщо ви експортуєте якийсь шматок коду - імпортувати його може хто завгодно. А це погано, тому що ваш компонент можуть почати використовувати інші і от він уже приймає 100500 пропсів аби задовольнити усі примхи.

🧐Тому дехто вирішив вдаритися в крайнощі і почав ховати компоненти, в середині компонентів, тому що export звідти буквально не можливий. Такий собі спосіб сказати - цей компонент лише мій і навіть не думай його чіпати. Власне такі конструкції можна побачити в C#, коли клас створює під клас в середині себе і там це все цілком ОК і ніхто не дивується.

👉 Але з React є мааааанюнький такий нюанс розміром десь з Ейфелеву вежу:

❗️Коли React визначає, які зміни сталися в застосунку, він порівнює, в тому числі класи або функції компонентів. А, в цьому підході з інкапсуляцією, на кожен рендер буде створюватися новий клас або функція-компонент. Коли React таке бачить - він вважає зміни настільки значущими, що повністю видаляє старий компонент і монтує туди новий. Зрозуміло, що це не ефективно з точки зору роботи з браузером, але це ще пів біди. Другі "пів біди" полягають в тому, що стейт внутрішнього компоненту також знищується! Відповідно такі компоненти ще й фактично поламані! 😃

🤷 Ось такі ситуації виникають, коли хочеться як краще, але з бібліотекою до кінця не розібрався.

Всім гарних вихідних і готуйте гроші на наступний тиждень. Буде збір і буде дуже крутий лот на розіграш (таких в Україні може штук 5 є)

@reactbeginners

Поки я деплою учбовий Next.JS застосунок на Azure, хочу вам показати один пост, який хоч і не стосується React, але дуже стосується нашого майбутнього.

Я дуже, дуже хочу щоб ми всі зрозуміли один простий факт:

- Або ми разом, або нас не буде.

Всім добра та сил.

👉 Відкотити останній коміт, який ще не запушив:

git reset HEAD~1

👩‍🏫 Ця команда видалить останній коміт, при цьому всі зміни які ви в ньому зробили залишаться. Буде стан наче ви зробили роботу, але ще не закомітили.

💡Може бути корисно якщо хочете додати щось в коміт або змінити текст, але amend використовувати не хочете.

П.М. І так, я задеплоїв)

Якщо вже мова зайшла про гіт - то ось ще один трюк

👉 Гіт має аліас для попередньої гілки: -

Наприклад git checkout - поверне вас до попередньої гілки, а git merge - змерджить попередню гілку в поточну. Відповідно можна зробити такий трюк (повершелл)

git checkout dev; git pull; git checkout -; git merge -;

💪 І все, за хвилину маємо оновлений дев і оновлену поточну гілку. Просто і без зайвих рухів

@reactbeginnes

Я не так часто роблю збори, тому прошу прочитати до кінця.

У мене є колега - цілком собі звичайний React розробник, який так само як і я любить сноуборд і якого я знаю вже сім років. Але є один нюанс - сьогодні він воює у складі роти ударних безпілотників 82 ОДШБр і зараз вони знаходяться на дуже і дуже зубастому напрямку.

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

Збираємо на два FPV дрони - 45_000 гривень до кінця наступного тижня

Я розумію що зараз у всіх з грішми не дуже, тому, на знак вдячності я пропоную три лоти, один з яких дуже особливий для мене.

👉 Перший лот - книга "JavaScript - сильні сторони", особисто підписана для мене її автором - Дугласом Крокфордом, легендою JavaScript, який колись відвідував Київ. Про нього достатньо сказати, що JSON форматом ми завдячуємо саме йому. Не думаю що таких книг, на сьогодні дуже багато.

👉 Другий лот - також книга - Чистий Код Роберта Мартіна, в цей раз без підпису. Але вона буде корисною для будь-якого розробника, в цьому у мене немає жодного сумніву. За бажанням можу підписати, хоч це навряд чи буде нести якусь цінність 😁

👉 Третій лот - більше утилітарний, але теж корисний: чохол для ноуту 15'' + термочашка від Itera.

❗️Перший лот отримає той хто пожертвує найбільшу суму.
❗️Другий і третій лоти будуть розіграні серед усіх учасників хто внесе від 50 гривень. Кожні 50 гривень - додатковий шанс отримати подарунок.

ЗБІР ЗАКРИТО

Будь-ласка, не забудьте вказати в коментарі до внеску контакт як з вами зв'язатися.

Всім дякую за участь та поширення. Поширення також дуже важливе!
@reactbeginners

Останній трюк з гіт

💡Окрім стандартних аліасів, гіт дозволяє робити свої , наприклад, якщо ви втомилися писати checkout можна створити свій аліас:

git config alias.co checkout

💪Тепер вам достатнього написати git co feature/drones і ви перейдете на гілку feature/drones. Також ви можете додати параметер --global і тоді цей аліас буде доступний в усіх локальних репозиторіях. Є правда один нюанс - аліасом не можна поділитися через git, тому, можете викладати на gist. І людям користь і ви не втратите.

👉 Але, саме чудове в них те, що ми можемо поєднати декілька команд в один аліас. Наприклад, мою серію команд з попереднього посту:

git config --global alias.sync "!git checkout dev && git pull && git checkout - &&  git merge -"

😎І все! Тепер просто git sync і далі воно само, а ви можете пити каву)

Хіба це ж не краса? Якщо зацікавились - посилання на документацію, та посилання на більш детальний пост на ItJuniors про це

П.М. подивитись всі ваші аліаси можна в ./.git/config
П.М.М Сьогодні будуть проміжні результати збору - якщо коротко - ви неймовірні!

@reactbeginners