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

Что такое CSS переменные и как их использовать? CSS переменные - это сущности, хранящие конкретные значения, которые можно повторно использовать в документе. Их можно использовать, чтобы убрать дублирования в вашей таблице стилей. Чтобы объявить переменную, вам сначала нужно решить, в какой области должна быть переменная. Если вы хотите, чтобы она была доступна глобально, просто определите её в псевдоклассе :root

 :root {
   --main-color: #ff6f69;
 }

Для получения доступа к переменной, нужно использовать функцию var() и передать имя переменной в качестве первого параметра.

 #title {
   color: var(--main-color); 
 }

Функция var поддерживает второй параметр - значение, которое будет использоваться, если переменная, переданная первым параметром, не определена:

 #title {
   color: var(--main-color, black);
 }

Вы также можете создавать переменные с локальной областью видимости.

 .alert {
   --alert-color: #ff6f69;
 }

Посмотрите, как пишут код уровня Senior Frontend в Google или Uber На собеседованиях и среди коллег обсуждают не работоспособность вашей программы, а то, как она написана. Чтобы ваш код выглядел достойно и опрятно, опытные FrontEnd-разработчики создали канал @seniorFront. — примеры лучших решений во Frontend-разработке — тесты на проверку знаний, чтобы сравнить свой уровень с уровнем конкурентов — статьи по JS, HTML, CSS за 2020 В каком проекте примените навыки, полученные после подписки на @seniorFront?

React and React Native (2020) React и React Native, инновационные фреймворки для разработки пользовательского интерфейса, созданы для написания качественных кроссплатформенных мобильных и веб-приложений. Данная книга была обновлена, чтобы соответствовать последней версии React. Поработав с книгой, вы сможете быстро создавать новые проекты. Для комфортного чтения необходимы знания JavaScript.

Деление чисел 2520 - самое маленькое число, которое может быть разделено без остатка числами от 1 до 10. Напишите функцию smallest(n), которая будет находить самое меньшее число, которое будет делиться на n. (n <= 40). Примеры: smallest(5) == 60 smallest(10) == 2520

HTTP/2 in Action (2019) Данное руководство рассматривает HTTP/2, один из основных сетевых протоколов. Вы узнаете про то, как разрабатывался данный протокол, про обратную совместимость, основные характеристики и приемы работы с ним. Также в конце вас ждет небольшой обзор HTTP/3, который должен выйти совсем скоро.

Что такое порталы (portals)? Порталы предоставляют быстрый и удобный способ рендеринга дочернего компонента в узле DOM, находящимся за пределами иерархии DOM родительского компонента. Обычно, компонент рендерит дерево элементов (как правило, с помощью JSX). React-элемент определяет, как должен выглядеть DOM родительского компонента.

 ReactDOM.createPortal(child, container)

Возможности 1. Дочерний компонент передается узлу, находящемуся в другом поддереве 2. По умолчанию таким узлом является document.body, но им может быть любой существующий DOM-элемент 3. Поддерживается рендеринг на стороне сервера 4. Массивы не требуется оборачивать в div или React.Fragment Случаи использования 1. Модальные окна 2. Всплывающие подсказки 3. Раскрывающиеся меню 4. Виджеты и т.д.

Что такое LocalStorage и SessionStorage? Веб-хранилище - это данные, хранящиеся локально в браузере пользователя.существует 2 типа веб-хранилищ: LocalStorage и SessionStorage. В них вы можете хранить информацию в формате ключ-значение. Ключ и значение – это всегда строки. Отличие между этими хранилищами сводится только к периоду времени, в течение которого они могут хранить данные, помещенные в них: SessionStorage – выполняет это в течение определённого промежутка времени (сессии). Закрытие вкладки или браузера приводит их к удалению. При этом данные в SessionStorage сохраняются при обновлении страницы. LocalStorage – осуществляет это в течение неограниченного времени. Они сохраняются при перезагрузке браузера и компьютера. Их длительность хранения ничем не ограничена. Но, хоть эти данные могут храниться бесконечно в браузере, обычный пользователь может их очень просто удалить, например выполнив очистку истории (при включенной опции «файлы cookie и другие данные сайтов»).

Курс по NodeJS со скидкой до 90%: NestJS - с нуля, современный backend на TypeScript и Node JS 🐈 NestJS - это быстро растущий Node.js фреймворк, который позволяет командам легко разрабатывать поддерживаемые, легко тестируемые и масштабируемые приложения благодаря TypeScript и его архитектуре. 🧑‍💻 В рамках курса мы настроим рабочее окружение Node.JS и познакомимся с TypeScript. Далее мы разберем все основные компоненты NestJS, сервисы, модули, контроллеры, затем развернём базу данных и начнем работу с ней. Мы изучим то, как делать валидацию входящих данных, проводить авторизацию и как она устроена. Важным разделом будет тестирование и отладка приложения, которое пригодится в реальной разработке. А для тех, кому интересны более сложные темы, мы разберем агрегации и функции в MongoDB. Для подписчиков сообщества Frontend Interview этот курс со скидкой до 90% по ссылке 👇

Сколько внешних элементов может содержаться в JSX-выражении? JSX-выражение должно содержать только один внешний (родительский) элемент. Например:

 const headings = (
     <div id = "outermost-element">
        <h1>Заголовок</h1>
        <h2>Еще один заголовок</h1>
     </div>
 )

Обратите внимание: для предотвращения рендеринга лишних DOM-элементов можно воспользоваться компонентом <React.Fragment></React.Fragment> или его сокращенной версией (<></>). Сокращенная версия работает не во всех вспомогательных инструментах.

Мы ищем парфюмера!✌️ Нам нужен крутой парфюмер или эвалюатор, который подарит продуктам Сбера новое измерение — аромат ✨ В обязанности войдёт создание уникального запаха, контроль производства и участие в продвижении парфюма в качестве эксперта. Что мы ждём от кандидата: 👉опыт работы от 3 лет, 👉профильное образование (в идеале — ISIPCA), 👉знание протоколов IFRA, 👉желание придумывать и запускать ароматы для разных сервисов экосистемы Сбера. Взамен мы предложим зарплату выше рынка, гибкий график с возможностью работать на удалёнке и, конечно, нестандартные и интересные задачи. Откликайся на вакансию по ссылке!

Работу для парфюмера надо? У нас она есть👌 Ищем креативного эвалюатора или парфюмера в Сбер для запуска уникальных ароматов для наших продуктов. Если заинтересовался — смотри подробности по ссылке. И подписывайся на «Карьеру в Сбере», самые классные вакансии только у нас!

Только уникальные Создайте функцию, которая будет определять, содержит ли строка только уникальные символы. Строка может содержать любой из 128 ASCII символов. Символы чувствительны к регистру. Примеры:

 hasUniqueChars("  nAa")

false Потому что присутствует два пробела

 hasUniqueChars("abcdef")

true

 hasUniqueChars("aA")

true - чувствительна к регистру

 hasUniqueChars("++-")

false Пристутствует два +