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

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

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

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

Выполните функцию, которая возвращает массив длины n, начинающийся с заданного числа x и квадратов предыдущего числа. Если n отрицательно или равно нулю, верните пустой массив.

Примеры:
2, 5 --> [2, 4, 16, 256, 65536]
3, 3 --> [3, 9, 81]

👉 @frontendInterview
👎1
Страдаете от недостатка заказов на фрилансе?

Конкуренция на крупных биржах просто зашкаливает. Новички давят демпингом, а старички – авторитетом.

@LinkUp.market – молодая, но очень перcпективная фриланс биржа внутри Telegram. Тут можно легко построить карьеру фрилансера, прокачать личный бренд и собрать базу постоянных клиентов, которые будут кормить вас долгие годы.

Свой первый заказ сможете получить уже сегодня

Вот ссылкаhttps://t.iss.one/+sxHaL9B-asZlNTQy

🚀 Дерзайте!
В чём различия между Long-Polling, Websockets и Server-Sent Events?

Ajax Long-Polling
1. Клиент запрашивает веб-страницу с сервера, используя обычный HTTP.
2. Клиент получает запрошенную веб-страницу и выполняет JavaScript на странице, которая запрашивает файл с сервера.
3. Сервер не сразу отвечает запрошенной информацией, а ждёт, пока не появится новая информация.
4. Когда появляется новая информация, сервер отвечает новой информацией.
5. Клиент получает новую информацию и немедленно отправляет другой запрос на сервер, перезапуская процесс.

HTML Websockets
1. Клиент запрашивает веб-страницу с сервера, используя обычный HTTP.
2. Клиент получает запрошенную веб-страницу и выполняет JavaScript на странице, которая открывает соединение с сервером.
3. Сервер и клиент теперь могут отправлять друг другу сообщения, когда доступны новые данные (с обеих сторон).
- Трафик в реальном времени от сервера к клиенту и от клиента к серверу.
- С помощью WebSocket можно подключиться к серверу из другого домена.
- Также можно использовать сторонний сервер веб-сокетов. Таким образом, вам нужно будет реализовать только клиентскую часть.

Server-Sent Events
1. Клиент запрашивает веб-страницу с сервера, используя обычный HTTP.
2. Клиент получает запрошенную веб-страницу и выполняет JavaScript на странице, которая открывает соединение сервером.
4. Сервер отправляет событие клиенту, когда появляется новая информация.
- Трафик в реальном времени от сервера к клиенту.
- Соединения с серверами из других доменов возможны только при правильных настойках CORS.

👉 @frontendInterview
👍92
Forwarded from Юрий
Оставьте сомнения и сделайте уверенный шаг к карьере веб-разработчика на мини-курсе Skillbox. Научитесь зарабатывать на фрилансе! Вы с нуля создадите 3 проекта — сайт, приложение и сервис — и изучите основы самых востребованных технологий.

Регистрация: https://epic.st/I68Wze

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

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

Каждый участник получит подборку полезных материалов, а также подарки от Skillbox!

🌟Полезные знания — на расстоянии клика. Учитесь где угодно и когда угодно!

Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
👍21
Дайте определение функции высшего порядка.

Функция высшего порядка — это любая функция, которая принимает одну или несколько функций в качестве аргументов, которые она использует для работы с данными, и/или возвращает функцию в качестве результата. Классическим примером является метод map, который принимает массив и функцию в качестве аргументов. Затем map использует эту функцию для преобразования каждого элемента в массиве, возвращая новый массив с преобразованными данными. Другими популярными примерами в JS являются filter и reduce.

👉 @frontendInterview
👍15👎1
Возможно ли создать подобное диалоговое окно без использования JS?
Anonymous Quiz
85%
Да
15%
Нет
В чём разница между классом в ES6 и функцией-конструктором в ES5?

Основное отличие в конструкторе возникает при использовании наследования. Если мы хотим создать класс Student (который будет являться подклассом класса Person) и добавить поле studentId, то в дополнение к вышеописанному мы должны сделать следующее:

// ES5 функция-конструктор

function Student(name, studentId) {
// Вызов конструктора суперкласса для инициализации производных от суперкласса членов.

Person.call(this, name);

// Инициализация собственных членов подкласса.

this.studentId = studentId;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// ES6 класс

class Student extends Person {
constructor (name, studentId) {
super(name);
this.studentId = studentId;
}
}


Наследование в синтаксисе ES5 является намного более многословным, а в ES6 более понятное и усваиваемое.

👉 @frontendInterview
👏9👍4
Изучаем vi и Vim. Не просто редакторы, 8-е издание

Среди текстовых редакторов, используемых программистами, самыми важными является vi и его вариации. В обновленном издании пользователи Unix и Linux изучат основы редактирования текста как в vi, так и в Vim (vi improved), прежде чем перейти к более продвинутым инструментам в каждой из программ. Авторы описывают основные новейшие версии Vim.

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

👉 @frontendInterview
👍32👎2
Самый высокий и самый низкий

В этой задаче вам дается строка чисел, разделенных пробелами, и вы должны вернуть наибольшее и наименьшее число

Примеры:
 highAndLow("1 2 3 4 5");           // return "5 1"
highAndLow("1 2 -3 4 5"); // return "5 -3"
highAndLow("1 9 3 4 -5"); // return "9 -5"


👉 @frontendInterview
👍2👎1🔥1
for...of

Инструкция for...of выполняет цикл обхода перечисляемых свойств итерируемого объекта.
Итерируемый объект можно воспринимать как коллекцию элементов. К итерируемым объектам относятся: Array, String, Map, Set, TypedArray, а также массивоподобные объекты такие как объект arguments и DOM-коллекции.
В каждой итерации цикла выполняются инструкции, которые могут ссылаться на значение текущего элемента коллекции.

Пример
Выводим форматированное представление для элементов объекта Map:
const skills = new Map()

skills.set(1, 'JS')
skills.set(2, 'CSS')
skills.set(3, 'PHP')

for (let value of skills) {
console.log(`${value[0]}.`, value[1])
}
// 1. JS
// 2. CSS
// 3. PHP


👉 @frontendInterview
👍9
forced-colors

Одно из значений директивы @media для проверки пользовательских настроек. Отслеживает режим принудительных цветов. Одна из его реализаций — режим высокой контрастности в Windows.

Режим принудительных цветов (forced colors mode) ограничивает количество цветов, чтобы повысить читаемость текста за счёт изменения контраста текста и фона. В основном используются цвета с высоким контрастом. Этот режим автоматически изменяет цвета и в системе, и на сайтах.

Когда браузер узнаёт о выборе режима принудительных цветов, он ограничивает цветовую палитру до небольшого набора цветов. С помощью forced-colors можно гибче настраивать поддержку этого режима на сайте.

Пример
<button class="button button-aqua">
<svg
xmlns="https://www.w3.org/2000/svg"
width="36"
height="36"
viewBox="0 0 24 24"
fill="none"
stroke="#000000"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="button-icon"
>
<path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4"/>
<path d="M5 19.5C5.5 18 6 15 6 12c0-.7.12-1.37.34-2"/>
<path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/>
<path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/>
<path d="M8.65 22c.21-.66.45-1.32.57-2"/>
<path d="M14 13.12c0 2.38 0 6.38-1 8.88"/>
<path d="M2 16h.01"/>
<path d="M21.8 16c.2-2 .131-5.354 0-6"/>
<path d="M9 6.8a6 6 0 0 1 9 5.2c0 .47 0 1.17-.02 2"/>
</svg>
<span class="visually-hidden">
Зайти по отпечатку пальца
</span>
</button>


@media (forced-colors: active) {
.button-icon {
stroke: buttonText;
}
}


Если посмотрите демку в режиме принудительных цветов без директивы и с ней, в первом случае иконка с отпечатком пальца останется чёрной (#000000), а во втором — перекрасится в белый цвет как у кнопки.

👉 @frontendInterview
🔥4