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

Здаєтьcя, я ще не розказував, але кілька тижнів тому в мене зʼявився новий проект, і він на Flutter. Тому, хочу поділитись з вами своїми думками про це чудо.

В першу чергу, вам обовʼязково треба ознайомитися з Dart. Це мова програмування, яка відповідно і використовується в Flutter. Доведеться звикати до типів 😈

Якщо ви знайомі з React, це буде хорошим плюсом, адже Flutter черпає свою ідеологію саме звідти. Віджет - це така собі аналогія до компоненти у React. А для тих, хто знайомий з React Native, там навіть є окрема стаття (насправді її можна читати будь-кому), яка розкаже про паралелі між Flutter та React Native. Хоча, тільки що переглянув, там є і стаття для web-розробників. Прочитавши її, можна мати досить чітке уявлення про цей фреймворк.

Так все виглядає з тех-сторони. А взагалі - це дуже динамічний фреймворк, що швидко розвивається. Та і в принципі він дуже швидко працює, і часто проблеми з швидкодією, які виникають на React Native, просто не відтворюються на Flutter.

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

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

#experience

Програмістом можна стати самостійно

Сьогодні хочемо поділитись платформами, які 100% зайдуть новачкам. Зрозуміло, що документацій ніхто не замінить, але якщо б я в свій час відкрила документацію і пробувала по ній щось вчити, я б зараз працювала на заводі.

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

W3Schools - платформа, на якій можна вивчити основи HTML, CSS, JS, TS і бааагаато іншого. Все викладено дуже стисло і лаконічно, а головне є тести для закріплення матеріалу.

Sololearn - додаток, який містить велике різноманіття курсів. Так, ви там знайдете тільки базу, але знову ж з тестами і з зрозумілим поясненням. І та, там можна влаштовувати батли, тому ми з Юрою іноді тим бавимось.

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

Зрозуміло, що на цих платформах ви отримаєте тільки базу, але і без бази ви далеко не зайдете.

Успіхів 💛

#tips

Сьогодні вирішили відсвяткувати перше кругле число на нашому каналі.
Дякуємо, що залишаєтесь з нами. Далі тільки краще! 💛

Що таке async / defer ?

Питання, яке можна почути як і на співбесідах, так і на різних assessment review. Але зайдем трохи здалека...

Так як ми працюємо з вебом, рано чи пізно потрібно додавати собі на сторінку скрипти. І якщо ваш проект - це щось трохи більше, ніж маленька сторінка, швидше за все, ви захочете винести той скрипт у окремий файлик. Ну і звісно після того його собі підключити. Думаю, код схожий на <script src="index.js"> буде вам досить знайомий. Але куди правильно помістити цей код? В head? В кінець body? Може варто додати ще якийсь атрибут для способу завантаження скрипта?

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

На допомогу приходять такі атрибути як async та defer. З англійської вже маємо певне уявлення, що щось буде асинхронним, а щось інше відкладеним. Якщо браузер побачить async, він почне паралельно завантажувати сам скрипт і обробляти html. Коли скрипт буде завантажено, він зупинить обробку html, виконає скрипт, після чого продовжить далі роботу з html. А зустрівши defer, браузер так само паралельно почне завантажувати скрипт, але виконувати його він буде тільки тоді, коли закінчить всю роботу з html. Тому висновок такий - async використовувати тоді, коли немає маніпуляцій з DOM, а defer - коли вони є.

Хто хоче більше почитати про дану тему, подивитись ілюстрації, як це все виглядає, може переглянути статті.

Читати статтю 1
Читати статтю 2

А той, хто вже пробував писати з використанням фреймворків чи бібліотек, може перевірити, яким способом скрипти додаються у ваші *.html.

#interview

#todo зареєструватись на LinkedIn та заповнити свій профіль

Time Tracking

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

Псс.. Компанія використовувала Hubstaff, якщо комусь стало цікаво.

АЛЕ, в нас (а особливо в мене) тепер є звичка постійно моніторити скільки часу я трачу. Я маю part-time роботу, і там я просто записую час, який я відпрацювала. І щоб вручну то не вираховувати і тд, я використовую Clockify. В мене є кілька проектів, і коли я сідаю за один із них, я включаю таймер відповідного проекту. І так я бачу скільки часу я відпрацювала, і відповідно стільки ж відправляю замовнику. А ще кожного тижня Clockify відправляє мені репорт, скільки годин я працювала цього тижня.

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

Також буде цікаво почути, які засоби ви використовуєте для трекінгу часу 💛

#experience

console.log()

Реальні пацани дебажать за допомогою console.log(). Тому хочемо поділитись властивостями console, які стануть корисними, коли будете наступний раз ловити якусь хитру багу.

PS: тут тільки один лінк на статтю, а console.info та console.group виділяється як лінка, бо телеграм щось трохи тупашить 🙃

console.dir()

console.dir() і console.log() дуже схожі, але console.dir() друкує елемент у JSON-подібному дереві.

console.warn(), console.error(), console.info()

Основною відмінністю між console.warn(), console.error() і console.log() є колір, яким буде підсвічено результат. console.warn() повертає результат жовтого кольору, console.error() - червоного кольору.

Існує лише одна різниця між console.info() та console.log(). У деяких браузерах відображається значок «i», якщо ви використовуєте console.info().

console.count()

console.count() в основному використовується як лічильник, він повертає кількість викликів протягом усього життєвого циклу.

Ви також можете передати ім’я змінної як параметр у console.count(). Коли в значенні змінної відбудуться будь-які зміни, лічильник автоматично скидається.

console.assert()

За допомогою console.assert(arg1, arg2) ви можете вивести повідомлення, якщо перший аргумент має значення false. Він не запускається, якщо перший аргумент істинний.

console.table()

Якщо ви хочете читабельний формат даних у консолі, то console.table() - це найкращий варіант. Перший параметр є обов’язковим і має бути або масивом, або об’єктом, а другий параметр – це масив, що містить імена стовпців, які потрібно включити в таблицю.

console.time() / timeLog() / timeEnd()

console.time() використовується, щоб запустити таймер. Потім, з кожним викликом console.timeLog(), буде надруковано час, що минув з моменту запуску.

Щоб зупинити таймер і вивести загальний час, потрібно викликати console.timeEnd().

console.group() / groupEnd()

За допомогою console.group() / groupEnd() можна групувати повідомлення, щоб уникнути спаму та безладу в консолі. Також можна використати console.groupCollapsed() замість console.group(), щоб дана група виводу була згорнута за замовчуванням.

Подивитись приклади використання даних властивостей можна тут - читати статтю

#tips

Що таке Context в React?

Швидше за все, його придумали розумні люди, тому може і не дарма назвали цей Context контекстом? Подумаємо, що взагалі таке контекст. Наприклад, коли зранку в Насті дзвінок і вона починає матюкатись на членів своєї команди, і закінчує питанням до мене: “Ну правда ж?”, я зазвичай відповідаю: “Ну я не знаю контексту, тому не можу нічого сказати”. Виходить, що контекст, це якась інформація, на основі якої вже і будуються нові твердження.

Тепер повернемось до React. І насправді тут все десь так само. Контекст - це шматок даних. Використовуйте Реакт, щоб створити контекст, що в дослівному перекладі - React.createContext.

Створити - створили, тепер потрібно його всім розповісти. Context.Provider - той, хто може це зробити. Він огортає компоненти, які мають право доступатись до даних в контексті. Тепер всі нащадки цієї компоненти будуть знати, яке значення поточного контексту. А яким способом цю інформацію дістати, обирайте самі - або Context.Consumer, або красивий хук useContext.

Тепер коротко: хтось створює контекст та розповідає його всьому дереву нижче, а вони в свою чергу завжди можуть запитати значення цього контексту. По секрету, це ще є вирішенням проблеми props drilling, але про неї вже іншим разом.

А цікаво, що буде якщо компонента спитає за контекстом, якого немає вище? Вона відповість десь те саме, що я відповідаю Насті.

І прикріпляю документацію для кращого розуміння - читати статтю

#interview