25 запитань і відповідей на співбесіді з веб-розробниками, які потрібно знати

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

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

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

1. Яка роль HTML, JavaScript і CSS у веб-розробці?

HTML означає HyperText Markup Language і це стандартна мова для розробки документів для публікації в Інтернеті. JavaScript і CSS є додатковими.

JavaScript спочатку був розроблений як мова програмування на стороні клієнта, він виконується в браузері для створення більшої функціональності веб-сторінки. CSS розшифровується як Cascading Style Sheets і використовується для представлення елементів на екрані.

2. Що таке адаптивний веб-дизайн

Адаптивний веб-дизайн — це підхід до веб-розробки, спрямований на створення найкращого досвіду для користувача шляхом адаптації зовнішнього вигляду веб-сайту на основі пристрою чи середовища цього користувача.

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

3. Які переваги використання фреймворку?

Існує багато переваг використання фреймворку для розробки веб-додатків. Основні з них такі:

1. Простіший процес розробки з найкращими практиками.
2. Швидша розробка початкових проектів економить час.
3. Використання перевіреного коду.
4. Часто забезпечує кращу безпеку.
5. Економія коштів, особливо у великих проектах.

4. Що таке зворотний виклик JavaScript?

Зворотний виклик JavaScript — це функція, яка має виконуватися після іншої функції. Ім’я та аргументи функції зворотного виклику можна передати першій функції як аргументи, а також перша функція також може передавати внутрішні аргументи функції зворотного виклику, які є результатом її обчислень.

Функції зворотного виклику найкраще використовувати з асинхронними функціями, які повинні чекати, поки інші функції спочатку завершать виконання.

5. Поясніть локальний і глобальний масштаб у JavaScript

Визначені змінні записуються словами, і вони мають значення лише в правильному контексті. Локальна та глобальна область посилається на цей контекст визначених змінних. Глобальна змінна має бути визначена поза функцією, тоді як локальні змінні визначаються всередині функції.

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

6. Поясніть Z-індекс у CSS

Z-індекс — це властивість елемента, яка використовується для визначення порядку стека елемента. Порядок стека стосується здатності елемента бути позаду або попереду інших елементів, як стос карток.

Елементи з вищим порядком стека відображаються перед елементами з нижчим порядком стека. У цьому контексті надання елементу порядку стека 2 або 100 гарантує, що він відображатиметься поверх усіх інших на сторінці. Подібним чином, сторінка без визначеного порядку стека розміщуватиме нижні елементи з джерела вище, ніж верхні.

7. Що таке Marquee у HTML?

Marque — тег контейнера в HTML, який використовується для відображення тексту, що прокручується. Це дозволяє контролювати напрямок прокручування, а також швидкість. Однак Marquee не підтримується в HTML5, тому вам радимо використовувати замість нього CSS.

Приклад прокручування з рамкою:

Текст прокручування рамки

8. Перелічіть основні способи скорочення часу завантаження сторінки

Існує багато кроків, які розробник може вжити, щоб покращити час завантаження сторінки, основні з них:

• Оптимізуйте зображення та зменшіть їх розмір
• Позбудьтеся непотрібних віджетів
• Скоротіть пошуки до мінімуму
• Розмістіть веб-сайт на гідному хості
• Використовуйте Accelerated Mobile Pages або статичні сайти
• Відкладене завантаження зображень
• Зменште свій код

9. Які відмінності між Canvas і SVG?

SVG означає масштабовану векторну графіку та тег — це елемент-контейнер для створення графіки, наприклад кола, прямокутника, еліпса тощо. Ви можете змінювати SVG за допомогою CSS або JavaScript, а масштабованість означає, що він добре працює для виходів із високою роздільною здатністю.

The контейнер, з іншого боку, базується на растрі і не масштабується. Він також використовується для створення графіки, але його можна змінювати лише за допомогою JavaScript. Однак він більш ефективний при обробці більшої кількості об’єктів.

10. Як працює Null Відрізнятися від Не визначено?

Null — це представлення без значення. Зазвичай він використовується як утримувач розміщення для ініціалізації визначеної змінної, якій не було присвоєно реальне значення. Undefined, з іншого боку, посилається на визначену змінну, яка не була ініціалізована.

У JavaScript:

змінна змінна A;

var variableB = null;

сповіщення (змінна A); //показує undefined

сповіщення (зміннаB); //показує null

11. Чим ідентифікатор відрізняється від класу?

Ідентифікатор і клас — це два методи ідентифікації та обробки елементів у документі HTML. Основна відмінність між ними полягає в тому, що ID має бути унікальним. Іншими словами, два елементи не можуть мати один і той же ідентифікатор, але два або більше елементів можуть спільно використовувати той самий клас.

Ідентифікатор використовується для обробки конкретних елементів, тоді як клас використовується для обробки групи елементів, які мають одну або більше спільних ознак.

12. Як покращити функції безпеки веб-сайту?

Кілька кроків, які ви можете зробити, щоб покращити безпеку веб-сайту, включають:

1. Застосування політики надійних паролів. Це означає перевірку того, що вибраний пароль має більше 8 символів і містить цифри, спеціальні символи, а також символи верхнього та нижнього регістру.
2. Використання captcha або будь-якого іншого засобу боротьби з ботами.
3. Використання двофакторних або багатофакторних методів автентифікації, таких як одноразові паролі (One-Time-Passwords) і апаратні ключі, якщо це необхідно.
4. Використання хосту із захистом від DDoS і функціями автоматичного резервного копіювання.

13. Чим localStorage відрізняється від sessionStorage?

Системи localStorage і sessionStorage дозволяють розробнику зберігати дані у веб-браузері. Однак localStoarage є постійним, а sessionStorage – ні. Іншими словами, дані, що зберігаються в localStorage, будуть доступні у веб-переглядачі протягом кількох сеансів, а дані, що зберігаються в sessionStorage, видаляються, коли вкладка браузера закривається.

14. Перелічіть удосконалення HTTP2.0 у порівнянні з HTTP 1.1

Протокол HTTP/2 був опублікований у 2015 році та пропонує значні вдосконалення, такі як:

1. Краща безпека за допомогою двійкового коду замість тексту.
2. Краща продуктивність.
3. Менша затримка.
4. Краща обробка помилок.
5. Нижні накладні витрати.

15. Яка різниця між Git Pull і Git Merge?

Команда git pull дозволяє завантажувати вміст із віддаленого сховища, а потім оновлює ваш локальний репозиторій завантаженим вмістом.

З іншого боку, команда git merge дозволяє об’єднати дві окремо розроблені гілки одного проекту. Команду злиття потрібно виконати з гілки, яку ви бажаєте об’єднати, і зазвичай це головна гілка.

16. Чим GET відрізняється від POST і PUT?

Метод HTML GET використовується браузером для запиту інформації з сервера, тоді як методи POST і PUT використовуються для надсилання інформації з браузера на сервер.

Але тоді як запит POST може просто додати дані до ресурсу сервера, запит PUT використовується для повної заміни ресурсу, використовуючи корисне навантаження запиту.

17. Перелічіть найпопулярніші формати обміну даними

Ось найпопулярніші на сьогодні формати обміну даними:

1. XML
2. ЯМЛ
3. CSV
4. JSON
5. HTTP
6. SQL

18. Перелічіть 3 типи спливаючих вікон

Спливаючі вікна в JavaScript використовуються для відображення повідомлень користувачу, для запиту введення, а іноді і для того, і для іншого. Ось 3 типи спливаючих вікон JavaScript:

1. Сповіщення – Це відображає ваше повідомлення та кнопку «ОК».
2. Поле підтвердження – Це діалогове вікно містить кнопки «ОК» і «Скасувати», які можуть впливати на код.
3. Скринька підказок – Це поле містить поле введення тексту для збору інформації від користувача.

19. Назвіть різні способи включення коду CSS

Є 3 способи включити CSS в документ HTML. Це:

1. Зовнішній CSS – Ви включаєте документ .css за допомогою всередині документа теги.
2. Вбудований CSS – Ви включаєте код CSS усередину теги будь-де в документі.
3. Вбудований CSS – Ви використовуєте пару style=”CSS-property: value” у своїх тегах HTML, наприклад. PSquare!

20. Як працює window.onload Чи відрізняється від document.onload?

Window.onload використовується для виконання коду JavaScript після того, як браузер завантажить дерево DOM сторінки та інші основи, включаючи зображення, код CSS і сценарії.

Хоча document.onload виконується відразу після того, як DOM буде готовий, це може означати ще до завантаження зображень і зовнішніх бібліотек.

21. Як приховати елемент за допомогою CSS?

Ви можете приховати елемент HTML за допомогою 3 методів CSS, а саме:

1. Дисплей: немає; – Елемент не рендериться і не відображається.
2. Видимість: прихована; – Елемент візуалізується, але не відображається.
3. Позиція: Абсолютна; – Елемент візуалізується та відображається, але розташований за межами області відображення.

22. Як найкраще використовувати Ajax?

Ajax — це метод завантаження даних із сервера у фоновому режимі за допомогою JavaScript. Він має багато застосувань, наприклад перевірка даних, програми чату, коментарі, фільтрація даних, візуальне редагування, опитування тощо.

23. Перелічіть деякі нові функції CSS3

CSS3 містить багато сучасних і корисних функцій порівняно з CSS2, наприклад:

1. Закруглені кути для коробок і зображень.
2. Анімація об'єктів.
3. Змінні та функції для оголошень.
4. Grid & Flexbox для адаптивного дизайну.
5. Градієнти для кольорів фону.
6. Контроль непрозорості за допомогою rgba.
7. Ефект тіні для полів і текстів.
8. Переходи для наведення та фокусування на елементах.

24. Які нові типи введення з’явилися в HTML5?

Тип введення – це значення, яке ви надаєте елементу введення в документі HTML.

Прикладом є:

or

Нові типи введення HTML5 включають:

1. Дата
2. Колір
3. Електронна пошта
4. Пошук
5. Такі
6. місяць
7. Діапазон номерів
8. місяць
9. URL
10. Дата-час-локальний

25. Опишіть медіа-елементи HTML5

HTML5 містить більше тегів елементів для обробки типів медіа та джерел. Це:

• – для відео MP4, WebM і Ogg.
• – для визначення кількох джерел у різних форматах.
• – для MP3, Ogg і WAV аудіо.
• – контейнер для включення зовнішніх ресурсів від зображень до відео та веб-сторінок.
• – для визначення доріжок субтитрів для відео.

Висновок

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

Хоча це керівництво, яке стосується різних аспектів роботи, воно аж ніяк не є вичерпним. Отже, вам належить визначити сфери, які вам незрозумілі, а потім навчитися.