Frontend Interview - собеседования по Javascript / Html / Css

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

Что такое 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

👉 @frontendInterview

Все о жизни и работе в экосистеме МТС Это МТС - проект о цифровой экосистеме МТС, в котором делимся главным. Мы создаём и развиваем сервисы в сфере мобильной связи, больших данных, искусственного интеллекта, облачного хранения, медиа и финансов Здесь ты можешь узнать больше: - про внутреннюю жизнь в компании - о наших преимуществах и достижениях - посмотреть интервью с экспертами - реальные истории успеха сотрудников - актуальные карьерные советы - рекомендации по подготовке к собеседованию #это_компания_МТС #это_команда_МТС #это_достижения_МТС #это_карьера_МТС А еще МТС - это открытая корпоративная культура и разнообразие карьерных треков. Присоединяйся к команде Подписаться #реклама 16+ О рекламодателе

Бесплатный 14-дневный онлайн-курс по дизайну интерьеров Давно хочешь работать в творческой сфере и иметь доход от 100 тыс/мес? Тебе не нужно уметь рисовать или прямо сейчас принимать решение. Просто приходи и попробуй! Вдруг понравится создавать уютные интерьеры и ты найдешь в этом себя. Регистрируйся на практический курс по дизайну интерьера с личным наставником. Осталось 7 мест! Зарегистрироваться #реклама diskill.ru О рекламодателе

Как готовиться к собеседованию? Вы знали, что большинство работодателей готовятся к собеседованиям по открытым источникам, а многие вопросы повторяются? Как найти такие вопросы, чтобы подготовиться наиболее эффективно и увеличить свои шансы на оффер? В канале progway вы можете найти самые популярные вопросы с собеседований с их подробным разбором: — Как оценить алгоритм? — Откуда методы у примитивов? — Какая структура у HTTP запроса? — Что такое cookies? — и ещё более 150 вопросов Помимо теории, в канале можно найти разборы популярных задач, простое описание сложных концепций с нуля и рекомендации по составлению резюме и прохождению интервью! Автор канала — Денис, разработчик с опытом менторинга и подготовки к собеседованиям более 4 лет. Подписывайся и готовься к собеседованию эффективно! @prog_way_blog

Позвольте себе работать, не вставая с кровати! Углубите знания в веб-разработке, получите практичные инсайты и создавайте новые крутые проекты! Регистрируйтесь: https://epic.st/ey6x7 Вы научитесь: — создавать веб-страницы, используя язык разметки HTML и технологию CSS; — реализовывать серверную часть (backend) веб-приложений на языке PHP; — работать с базой данных MySQL при помощи языка запросов SQL; — создавать приложения на языке программирования JavaScript; — размещать сайты в интернете. 📌Спикер — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java и веб-разработки, руководит командами разработки в разных проектах. 🎁Подарки: — сертификат на скидку 10 000 рублей на любой курс; — доступ к изучению английского языка на год; — 5 полезных подборок материала; — персональная карьерная консультация. Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

​Какие основные шаги выполняет браузер для отображения веб-страницы? 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

В Reactify | Frontend Разработка есть все для бесплатного обучения! - Где брать опыт и как искать работу? - Как освоить сложную теорию? - Какие ресурсы использовать для обучения? Обо всем этом в ✈️Telegram канале. А еще у нас есть: 📹 YouTube Reactify — изучаем JavaScript, TypeScript, React, CSS. Создаем приложение новостей или курса криптовалюты. 🎓 Reactify Academy - платформа с бесплатными курсами, лекциями, конференциями и соревнованиями. 👨‍💻 Reactify Community - чат для общения единомышленников, помощи в обучении и обсуждения различных тем. Стань частью сообщества Reactify!

Курс «Python-разработчик» от Яндекса. Начните с нуля. Программа 2023 года. Диплом о переподготовке и помощь с поиском работы. Рассрочка. Зарегистрироваться #реклама 16+ practicum.yandex.ru О рекламодателе

В чем разница между 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

Заменить букву на ее позицию в алфавите В этой задаче вам нужно, имея строку, заменить каждую букву на ее позицию в алфавите. Если что-то в тексте не является буквой, игнорируйте это и не возвращайте его. "a" = 1, "b" = 2, и т.д. Пример: alphabetPosition("abc.") вернет "1 2 3" 👉 @frontendInterview

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

Узнайте свое новогоднее предсказание от героев книг И получите подписку на книги на 30 дней бесплатно! Более 200 000 книг и аудиокниг разных жанров в Букмейте. Без рекламы и даже без интернета! Узнать больше #реклама 18+ bookmate.ru О рекламодателе

​Что такое prop drilling? Prop drilling относится к процессу прохождения пропсов параметров через несколько уровней вложенных компонентов, даже если некоторые промежуточные компоненты не используют эти входные параметры напрямую. Это может привести к сложной и громоздкой структуре кода. // Parent component const Parent = () => { const data = "Hello, World!"; return ( <div> <ChildA data={data} /> </div> ); }; // Intermediate ChildA component const ChildA = ({ data }) => { return ( <div> <ChildB data={data} /> </div> ); }; // Leaf ChildB component const ChildB = ({ data }) => { return <div>{data}</div>; }; В этом примере проп data передается из компонента Parent в ChildA, а затем из ChildA в ChildB, даже если ChildA не использует проп напрямую. Это может стать проблемой при наличии множества уровней вложенности или когда доступ к данным должен осуществляться компонентами, находящимися ниже по дереву компонентов. Это может усложнить поддержку и понимание кода. Проп дриллинг можно смягчить, используя другие шаблоны, такие как библиотеки управления контекстом или состоянием, такие как Redux или MobX. Эти подходы позволяют компонентам получать доступ к данным без необходимости передачи входных параметров через каждый промежуточный компонент. 👉 @frontendInterview