Що таке DOM?

Це база, як то кажуть. Але на співбесідах люблять питати і таке.

DOM - Document Object Model - об’єктна модель документа.

Браузер завантажує з сервера веб-сторінку у вигляді HTML коду, який часто називається вихідний кодом сторінки. І якщо у коді вказані інші файли, такі як стилі css, js - то завантажує і їх. І уже з завантаженого з сервера HTML коду браузер формує DOM.

Браузер створює DOM для того, щоб мати уявлення як виглядає веб-сторінка, а JavaScript, в свою чергу, за допомогою DOM маніпулює веб-документом: шукає потрібний елемент, додає нові елементи, отримує наступний дочірний елемент і т.д.

Вигляд DOM можна глянути у панелі розробника в браузері.

DOM подібний на вихідний код HTML, але не є ним, а лише формується з нього. Браузер автоматично виправляє помилки, якщо вони є у HTML коді. Тобто закриває не закриті теги HTML, вставляє обов'язкові теги, якщо вони опущені.

DOM має деревоподібну ієархію. Документ DOM складається з вузлів Node. Кожен вузол може містити у собі вкладені вузли, елемент, текст чи коментар. Кожен вузол DOM формується з HTML тегу і отримує властивості, події, стилі, які вказані у самих атрибутах тегу, CSS стилях і в JavaScript коді.

DOM підтримує об'єктно орієнтоване представлення веб-сторінки і дозволяє змінювати документ веб-сторінки за допомогою JavaScript. У JavaScript для роботи з DOM є об'єкт document, який містить методи і властивості для роботи з документом.

#interview

#todo поділитися в коментарях останньою статтею/відео, які ви читали/дивилися

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

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