Frontend Interview - собеседования по Javanoscript / Html / Css – Telegram
Frontend Interview - собеседования по Javanoscript / Html / Css
11.4K subscribers
2.1K photos
118 videos
319 files
530 links
Канал для подготовки к собеседованиям по фронтенду

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/frontendinterview

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
Web Application Security

Несмотря на то, что доступно много ресурсов с информацией по обеспечению безопасности сети и ИТ, подробные знания о безопасности современных веб-приложений не были структурированы - до выхода данной книги. Это практическое руководство содержит описывает разнообразные концепции информационной безопасности, которые разработчики программного обеспечения могут легко освоить и применить.

👉 @frontendInterview
Заменить букву на ее позицию в алфавите

В этой задаче вам нужно, имея строку, заменить каждую букву на ее позицию в алфавите.
Если что-то в тексте не является буквой, игнорируйте это и не возвращайте его.
"a" = 1, "b" = 2, и т.д.

Пример:
alphabetPosition("abc.")
вернет "1 2 3"

👉 @frontendInterview
2
В чем разница между spread-оператором и rest-оператором?
Spread-оператор и rest-оператор - это два разных оператора, которые используются в JavaScript для работы с массивами и объектами.

Spread-оператор (...):

- Распространяет элементы массива или свойства объекта.
- Используется для создания нового массива или объекта, содержащего элементы или свойства исходного массива или объекта.
- Распаковывает элементы массива или свойства объекта, позволяя передавать их в другие функции или объединять с другими массивами или объектами.
Пример:
 const numbers = [1, 2, 3];
const newArray = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]
const person = { name: 'John', age: 30 };
const newPerson = { ...person, city: 'New York' }; // { name: 'John', age: 30, city: 'New York' }


Rest-оператор (...):
- Собирает оставшиеся аргументы функции в массив.
- Используется для объявления параметра функции, который будет содержать все оставшиеся аргументы, переданные при вызове функции.
Пример:
function sum(...numbers) {
let total = 0;
for (let number of numbers) {
total += number;
}
return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 15

function printNames(first, last, ...middle) {
console.log('First name:', first);
console.log('Last name:', last);
console.log('Middle names:', middle);
}

printNames('John', 'Doe', 'Smith', 'Johnson', 'Williams');
// First name: John
// Last name: Doe
// Middle names: ['Smith', 'Johnson', 'Williams']


👉 @frontendInterview
👍203😁3🔥2👏1
Как правильно задать overflow для body чтобы убрать горизонтальный и сохранить вертикальный скролл?
Anonymous Quiz
15%
overflow: hidden;
63%
overflow-x: hidden;
14%
overflow-y: hidden;
8%
overflow-x-y: auto hidden;
🥰8👏31
Какие основные шаги выполняет браузер для отображения веб-страницы?

1. Ввод URL: Пользователь вводит URL (Uniform Resource Locator) в адресную строку браузера. URL указывает на веб-страницы, которую пользователь хочет посетить.

2. DNS-запрос: Браузер отправляет DNS-запрос (Domain Name System) на DNS-сервер, чтобы получить IP-адрес сервера, на котором хранится веб-страница. DNS-сервер преобразует доменное имя (например, www.example.com) в соответствующий IP-адрес.

3. Установка соединения: Браузер устанавливает TCP-соединение с сервером, используя полученный IP-адрес. Это позволяет браузеру отправлять и получать данные от сервера.

4. Запрос страницы: Браузер отправляет HTTP-запрос (Hypertext Transfer Protocol) на сервер, запрашивая веб-страницу. Запрос может содержать различные параметры, такие как метод запроса (GET, POST и т. д.), заголовки и тело запроса.

5. Получение ответа: Сервер обрабатывает запрос и отправляет обратно HTTP-ответ, содержащий запрошенную веб-страницу. Ответ может также содержать различные заголовки, статус ответа и тело ответа.

6. Рендеринг страницы: Браузер получает ответ от сервера и начинает обрабатывать его. Он анализирует HTML-код страницы, строит DOM (Document Object Model) - внутреннее представление страницы, и создает дерево элементов.

7. Загрузка ресурсов: Браузер загружает все связанные ресурсы, такие как изображения, стили CSS, скрипты JavaScript и другие файлы, указанные в HTML-коде страницы.

8. Отображение страницы: Браузер использует полученные ресурсы и информацию о стилях для отображения страницы на экране. Он располагает элементы в соответствии с их CSS-свойствами, применяет шрифты, цвета и другие стили, и отображает содержимое страницы.

👉 @frontendInterview
👍41
Позвольте себе работать, не вставая с кровати! Углубите знания в веб-разработке, получите практичные инсайты и создавайте новые крутые проекты!


Регистрируйтесь: https://epic.st/ey6x7

Вы научитесь:
— создавать веб-страницы, используя язык разметки HTML и технологию CSS;
— реализовывать серверную часть (backend) веб-приложений на языке PHP;
— работать с базой данных MySQL при помощи языка запросов SQL;
— создавать приложения на языке программирования JavaScript;
— размещать сайты в интернете.

📌Спикер — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java и веб-разработки, руководит командами разработки в разных проектах.

🎁Подарки:
— сертификат на скидку 10 000 рублей на любой курс;
— доступ к изучению английского языка на год;
— 5 полезных подборок материала;
— персональная карьерная консультация.


Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
👎2
Назовите способ изменения opacity для всех строк таблицы кроме той, на которую навёл пользователь.
Anonymous Quiz
54%
tbody:hover tr:not(:hover)
16%
tbody:hover:not(:hover)
11%
tbody:not(:hover):hover
19%
tr:not(:hover) tbody:hover
👍121
Какой из методов жизненного цикла Vue вызывается сразу после инициализации экземпляра, перед установкой наблюдения за данными и механизмов слежения и событий?
Anonymous Quiz
31%
beforeCreate
22%
created
47%
beforeMount
👍4
Что такое IIFE (Immediately Invoked Function Expression)?

IIFE (Immediately Invoked Function Expression) - это выражение функции, которое вызывается немедленно после его определения. Оно позволяет создавать локальную область видимости для переменных и функций, чтобы избежать конфликтов имен и сохранить приватность данных.

IIFE обычно используется для создания модулей, эмуляции блока кода с областью видимости или для выполнения некоторых инициализаций при загрузке страницы.

Пример:
 (function() {
// Код, который будет выполнен немедленно
var x = 5;
console.log(x); // Выводит 5
})();

 // Переменные и функции, определенные внутри IIFE, не видны в глобальной области видимости
console.log(x); // ReferenceError: x is not defined

В приведенном примере, функция обернута в круглые скобки (function() { ... }), чтобы превратить ее в выражение. Затем, после закрывающей скобки, добавляются еще одни круглые скобки () для вызова функции немедленно.
IIFE может принимать аргументы, например:
 (function(name) {
console.log('Hello, ' + name);
})('John'); // Выводит 'Hello, John'

IIFE также может возвращать значение, которое может быть присвоено переменной:
 var result = (function() {
return 5 + 3;
})();

 console.log(result); // Выводит 8


Использование IIFE помогает изолировать код и предотвращает его влияние на глобальную область видимости, что способствует более безопасному и организованному коду.

👉 @frontendInterview
👍18
Multithreaded JavaScript

Готовы ли вы к разработке многопоточных приложений на JavaScript? Прочитав данную книгу, JavaScript-разработчик среднего уровня узнает о сильных и слабых сторонах API веб-исполнителей в браузерах и рабочих потоков в Node.js.
Авторы рассказывают о двух подходах к построению многопоточных приложений: на основе передачи сообщений и на основе разделяемой памяти. Описываются API для обоих случаев, объясняется, когда использовать тот или другой, а когда - их сочетание. Вы также увидите, как реализуются высокоуровневые паттерны на базе этих подходов.

👉 @frontendInterview
Basic Mathematical Operations

Ваша задача - создать функцию, которая выполняет четыре основные математические операции.
Функция должна принимать три аргумента - операция(строка/знак), значение1(число), значение2(число).
Функция должна возвращать результат в виде числа после применения выбранной операции.

Пример:
('+', 4, 7) --> 11
('-', 15, 18) --> -3
('*', 5, 5) --> 25
('/', 49, 7) --> 7

👉 @frontendInterview
😁5🔥2👎1
Что такое NAT?

NAT - механизм преобразования сетевых адресов.

Сети обычно проектируются с использованием частных IP адресов. Это адреса 10.0.0.0/8, 172.16.0.0/12 и 192.168.0.0/16. Эти частные адреса используются внутри организации или площадки, чтобы позволить устройствам общаться локально, и они не маршрутизируются в интернете. Чтобы позволить устройству с приватным IPv4-адресом обращаться к устройствам и ресурсам за пределами локальной сети, приватный адрес сначала должен быть переведен на общедоступный публичный адрес.

И вот как раз NAT переводит приватные адреса, в общедоступные. Это позволяет устройству с частным адресом IPv4 обращаться к ресурсам за пределами его частной сети. NAT в сочетании с частными адресами IPv4 оказался полезным методом сохранения общедоступных IPv4-адресов. Один общедоступный IPv4-адрес может быть использован сотнями, даже тысячами устройств, каждый из которых имеет частный IPv4-адрес. NAT имеет дополнительное преимущество, заключающееся в добавлении степени конфиденциальности и безопасности в сеть, поскольку он скрывает внутренние IPv4-адреса из внешних сетей.

👉 @frontendInterview
👍9😁1
Если ширина контейнера 500px, то какие ширины будут у его дочерних элементов при таком коде?
Anonymous Quiz
11%
50px, 200px, 300px
13%
50px, 100px, 200px
60%
50px, 150px, 300px
16%
50px, 50px, 100px
👍16
Что такое git stash?

Команда git stash позволяет на время «сдать в архив» (или отложить) изменения, сделанные в рабочей копии, чтобы вы могли применить их позже. Откладывание изменений полезно, если вам необходимо переключить контекст и вы пока не готовы к созданию коммита.

Вернуть изменения в рабочую область можно, выполнив команду git stash pop.

👉 @frontendInterview
👍18🔥4
Какое значение прописать свойству flex-direction, чтобы элементы следовали в обратном порядке, снизу вверх?
Anonymous Quiz
3%
column
14%
row-reverse
80%
column-reverse
3%
wrap-reverse
С чего JS-разработчику начать изучение React?

С бесплатного практического урока «Typenoscript и React. Типизация основных строительных блоков приложения» от OTUS.

На вебинаре:
- углубимся в typenoscript;
- разберёмся с типами для React;
- поймем, зачем нужны дженерики и как описывать компоненты React на typenoscript;
- изучим enums, interfaces, functions, classes, keyof, typeof, union an as и многое другое.

Занятие пройдёт 29 января в 20:00 мск и будет приурочено к старту курса «React.js Developer».
Программа доступна в рассрочку!

Пройдите короткое тестирование прямо сейчас, чтобы принять участие в открытом уроке и получить запись:
https://clck.ru/382m8h

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru Erid 2SDnjc4QCbS
👎2🥰1😁1