Infinite scroll

Infinite scroll - це техніка, яка автоматично додає наступну сторінку, коли користувач прокручує вміст. Якщо по простому, то уявіть, що у вас є список покемонів. І коли ви прокручуєте цей список до кінця, то вам підгружаються ще дані. Або хто сидить в TikTok, знає, що можна вічно скролити відосіки - це і є infinity scroll.

Зайшли хорошу статтю, яка показує як можна імплементувати цю техніку різними способами в React - читати статтю

Зберігайте 💛

#article

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

- VS Code - редактор коду, користуюсь саме ним через те, що це неважке середовище, яке легко налаштувати під себе.

- Chrome - тут без пояснень. В web-розробці без браузера нікуди, а конкретно цей, здається, зараз найпопулярніший.

- nvm / pyenv - менеджер версій для Node / Python. Якщо вам потрібно переключатись між різними версіями - це дуже хороше рішення.

- Postman - додаток, яким можна протестувати та полегшити розробку API. Якщо треба перевірити POST запит - це саме те що треба. Хоча, якщо чесно, зараз я використовую HTTPie, яким почав користуватись ще коли він був тільки консольною програмою. Але Postman - добре та перевірене рішення.

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

- Slack / Telegram / Skype - для звʼязку.

- Notion - для документацій.

- Firefox / Safari - для перевірки роботи сайту в різних браузер.

- XCode / Android Studio - для мобільної розробки.

- ngrok - для того, щоб скинути комусь свій localhost 😁

Я впевнений, що є ще багато інших програм, тому чекаю ваші улюблені тут ⬇️

#tips

Всім привіт! Хотіли почати тиждень з чогось нескладного. Нескладне - значить невелике, а невелике - це розмір екрану в смартфорнах (хоча вони чим далі, тим більші).

Коли ви відкриваєте веб-сайт на мобілці, браузер хоче дозволити вам бачити чим-побільше і може приховувати пошуковий рядок. Також буває таке, що ваш сайт має зайняти всю висоту екрану і НЕ СКРОЛИТИСЬ. Тут і зʼявляються проблеми на мобілці.

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

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

#article

Що таке web workers?

Всі ми добре знаємо, що JS - це однопоточна мова програмування. А чи є якийсь механізм, який дозволяє виконувати скрипт в іншому потоці? Спойлер: так є.

Web workers - це механізм, який дозволяє скрипту виконуватись у фоновому потоці, який відокремлений від основного потоку веб-додатку. Перевага полягає в тому, що ресурсомісткі обчислення можуть виконуватися в окремому потоці, дозволяючи запустити основний (зазвичай користувацький) потік без блокування та уповільнення.

Детальніше про дану технологію та її використання можете почитати тут - читати статтю

#interview

#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 та заповнити свій профіль