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

Кто интересовался, в какой стране ЕС проще всего получить вид на жительство для квалифицированных специалистов? Включая венчурных инвесторов, бизнесменов и предпринимателей? В кратчайшие сроки, даже из России и с российским паспортом, при полной поддержке властей и правительства? Португалия – страна N1 в мире для экспатов. Виза для Highly Qualified Activity, или виза HQA поможет в кратчайшие сроки и при максимальном содействии и поддержке со стороны правительства Португалии получить разрешение на проживание и работу, а спустя 5 лет – и гражданство, причем как для себя, так и для членов семьи. Короткое видео от Сергея Сандера поможет вам разобраться, кто и как может получить визу HQA, в чем состоят основные ее преимущества, нужно ли знать португальский язык для получения вида на жительство и кому виза HQA не подходит: https://youtu.be/IoFDaxOGaTM

Waiting room В комнате есть несколько кресел, которые пронумерованы от 1 до N. Первое кресло находится ближе всего ко входу. Люди, входящие в комнату занимают кресла по следующим правилам: 1. Кресло находится на самом дальнем расстоянии от занятого. 2. Кресло находится ближе всего ко входу Ваша задача: найти номер кресла для входящего человека. Пример: lastChair(10) => 9 👉 @frontendInterview

javascript. Визуальные редакторы Подавляющее большинство ныне действующих сайтов сделано при помощи CMS. А такие системы невозможно представить без визуальных редакторов страниц. WYSIWYG - редакторы позволяют администратору управлять содержимым ресурса, не будучи знакомым даже с азами программирования. Многие разработчики используют не готовые CMS, а пишут собственные. Данная книга призвана помочь им в этом непростом деле. На ее страницах описаны четыре WYSIWYG-редактора — на разный вкус и для разных задач. Все системы являются оригинальными и не содержат каких-либо заимствований кода. Функциональные возможности приведенных разработок имеют исчерпывающие описания и разъяснения. 👉 @frontendInterview

👉 @frontendInterview

​Как вы реализуете адаптивный дизайн? Для реализации адаптивного дизайна я использую следующие подходы и инструменты: - Media queries - используются для изменения стилей в зависимости от размера экрана устройства пользователя.

 @media (max-width: 767px) {
   .header {
     font-size: 16px;
     padding: 10px;
    }
 }

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

 .container {
   display: flex;
   flex-wrap: wrap;
   max-width: 100%;
 }

 .col {
   flex-grow: 1;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
 }

- Flexible Images - применяется для того, чтобы изображения могли менять свой размер в зависимости от размера экрана.

 img {
   width: 100%;
   height: auto;
 }

- Mobile-first Approach - основной принцип заключается в том, чтобы сначала оптимизировать сайт для маленьких экранов мобильных устройств, а затем наращивать функционал и компоненты для больших экранов.

 //Mobile styles
  .main-header {
    font-size: 1.8rem;
    padding: 10px;
  }


 //Desktop styles
 @media (min-width: 1200px) {
  .main-header {
    font-size: 3rem;
    padding: 20px;
  }
 }

Эти подходы и инструменты помогают создать адаптивный дизайн, который будет корректно отображаться на разных устройствах и экранах. 👉 @frontendInterview

​Как вырасти от junior до middle? Middle-специалист отличается не только опытом и уровнем владения технологиями, но и софт скилами. Курс Яндекс Практикума «Мидл фронтенд-разработчик» составлен так, чтобы вы могли освоить и то, и другое, а ещё: • разработать мессенджер, используя только JavaScript, Typescript, CSS и API браузера; • познакомиться с теорией и отработать её на практике в больших проектах; • научиться брать ответственность за решения и вкладываться в общий результат; • самостоятельно декомпозировать задачи и распределять время; • исследовать смежные сферы программирования, без которых невозможен фронтенд: • информационную безопасность, прототипирование интерфейсов, командную работу, DevOps, ООП. На всех этапах вас будут сопровождать опытные разработчики: мы не дадим просесть по учёбе и поможем выкроить время на образование. Вы будете практиковаться на реальных кейсах и положите в портфолио работающие проекты. А карьерные консультации подготовят вас к разговору о повышении или помогут с поиском новой работы. Начать учиться: https://practicum.yandex.ru/middle-frontend/

Совет фронтендерам: уважайте свое время Первый шаг — не изобретать велосипед. В Html Gram собраны готовые codepen решения на каждый день. От эффектов при наведении до 3D анимации. Быстрее пишешь код — больше отдыхаешь. Подписывайся: @HtmlGram

Какие инструменты и технологии вы используете для оптимизации производительности веб-страниц? Для оптимизации производительности веб-страниц существует множество инструментов и технологий. Вот некоторые из них: - Сжатие и минификация кода: Gulp, Grunt, Webpack; - Оптимизация и сжатие изображений: ImageOptim, Kraken.io, TinyPNG; - Кеширование: CDN, Varnish Cache, Redis; - Параллельная загрузка ресурсов: Resource Hints (preload, prefetch); - Предзагрузка и предварительная отрисовка: Link rel="prerender", Intersection Observer API; - Уменьшение имен файлов и использование компрессии: gzip, brotli, Babel; - Использование кэширования браузера: Cache-Control, ETag, Expires. Эти инструменты и технологии помогают сократить время загрузки страницы, увеличить скорость работы сайта и улучшить пользовательский опыт. 👉 @frontendInterview

​Какие методы использования flexbox вы знаете и какие особенности имеет каждый из них? Flexbox предоставляет несколько методов для организации и управления расположением элементов на веб-странице. Рассмотрим некоторые из них: 1. flex-direction: Определяет основную ось гибкого контейнера и направление элементов. Может быть row (главная ось горизонтальная), column (главная ось вертикальная), row-reverse (главная ось горизонтальная в обратном направлении), column-reverse (главная ось вертикальная в обратном направлении). 2. justify-content: Определяет выравнивание элементов вдоль главной оси. Может быть flex-start (выравнивание в начале), flex-end (выравнивание в конце), center (выравнивание по центру), space-between (равномерное распределение элементов вдоль оси), space-around (равномерное распределение элементов вдоль оси со внешними отступами. 3. align-items: Определяет выравнивание элементов вдоль поперечной оси. Может быть flex-start (выравнивание в начале), flex-end (выравнивание в конце), center (выравнивание по центру), stretch (растягивание элементов по высоте контейнера), baseline (выравнивание по базовой линии). 4. flex-wrap: Определяет, должны ли элементы переноситься на новые строки (wrap) или должны быть в одной строке (nowrap). 5. align-content: Применяется, когда элементы занимают не всю доступную высоту контейнера. Определяет, как выравнивать и размещать элементы по вертикали. Может быть flex-start, flex-end, center, space-between, space-around, stretch. Эти методы позволяют управлять расположением элементов на странице более гибко и эффективно. 👉 @frontendInterview

❔❔ JS-разработчик? А насколько хорошо ты знаешь Vue.js? JS-разработчик? А насколько хорошо ты знаешь Vue.js? ✔️ Пройди тест из 20 вопросов и узнай, сможешь ли ты учиться на курсе "Vue.js Developer" от OTUS. Если правильно ответишь хотя бы на 12 вопросов - сможешь поступить на курс по специальной цене! ⏰ Время прохождения теста ограничено 30 минут ✍️ПРОЙТИ ТЕСТ: https://otus.pw/3bpj/ Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Реклама. Информация о рекламодателе на сайте www.otus.ru

Сортировка нечетных значений Вам дан массив чисел. Ваша задача состоит в том, чтобы отсортировать нечетные числа по возрастанию, а четные оставить на их местах. Пример: sortArray([5, 3, 2, 8, 1, 4]) //[1, 3, 2, 8, 5, 4] 👉 @frontendInterview

Beginning React and Firebase: Create Four Beginner-Friendly Projects Using React and Firebase (2021) Вы начнете с основ: научитесь развертывать приложение React на хостинге Firebase. Затем вы научитесь создавать полнофункциональное приложение "ToDo", которое будет использовать базу данных Firebase для хранения списка элементов действий. Также вы научитесь создавать приложение "Stories", в котором можно показывать короткие вертикальные видеоролики, и приложение для хранения документов. 👉 @frontendInterview

​Каковы преимущества и недостатки написания JavaScript-кода на языке, который компилируется в JavaScript? Вот несколько языков, которые компилируются в JavaScript: CoffeeScript, Elm, ClojureScript, PureScript и TypeScript. Преимущества: - Исправляют некоторые давние проблемы в JavaScript и препятствует использованию анти-паттернов в JavaScript. - Позволяют писать более короткий код, предоставляя синтаксический сахар поверх JavaScript, которого, как мне кажется, не хватало в ES5, но с приходом ES2015 все изменилось. - Статическая типизация идеальна (в случае TypeScript) для больших проектов, которые необходимо поддерживать с течением времени. Недостатки: - Необходима сборка/компиляция кода, так как браузеры запускают только JavaScript, и ваш код должен быть скомпилирован в JavaScript перед тем, как он будет передан в браузеры. - Отладка может быть трудной, если карты кода (source maps) плохо сопоставляются с исходным кодом. - Большинство разработчиков не знакомы с этими языками и должны будут изучить их. Если ваша команда будет использовать их для своих проектов, это приведет к увеличению затрат. - Меньшее сообщество (зависит от языка), что означает, что будет труднее найти ресурсы, учебные пособия, библиотеки и инструменты. - Может отсутствовать поддержка в IDE/редакторе. - Эти языки всегда будут позади последнего стандарта JavaScript. - Разработчики должны знать, во что компилируется их код — потому что это то, что будет запускаться в браузере, и это наиболее важно. По большому счету, ES2015 значительно улучшил JavaScript и сделал разработку на нем намного удобнее. Я не вижу причин использовать CoffeeScript в наши дни. 👉 @frontendInterview

👉 @frontendInterview

Стать сотрудником Яндекса быстрее и проще, чем кажется. Участвуйте в днях быстрого найма: решите тестовое, пройдите несколько секций собеседования и получите офер за несколько дней. Теперь дни быстрого найма будут проходить регулярно. Чтобы вам было удобно следить за расписанием, собрали его на отдельной странице. Ближайшие мероприятия: • 20-22 апреля - Fast Track для frontend-разработчиков пишущих на JavaScript/TypeScript, офер за 3 дня в команду Поиска. • 27-28 мая - Weekend Offer для frontend-разработчиков, офер за 2 дня в команды Яндекса. Зарегистрироваться