👉 @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

Beginning React and Firebase: Create Four Beginner-Friendly Projects Using React and Firebase (2021)

Вы начнете с основ: научитесь развертывать приложение React на хостинге Firebase. Затем вы научитесь создавать полнофункциональное приложение "ToDo", которое будет использовать базу данных Firebase для хранения списка элементов действий. Также вы научитесь создавать приложение "Stories", в котором можно показывать короткие вертикальные видеоролики, и приложение для хранения документов.

👉 @frontendInterview

Сортировка нечетных значений

Вам дан массив чисел.
Ваша задача состоит в том, чтобы отсортировать нечетные числа по возрастанию, а четные оставить на их местах.

Пример:
sortArray([5, 3, 2, 8, 1, 4])
//[1, 3, 2, 8, 5, 4]

👉 @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

Какие инструменты и технологии вы используете для оптимизации производительности веб-страниц?

Для оптимизации производительности веб-страниц существует множество инструментов и технологий. Вот некоторые из них:

- Сжатие и минификация кода: 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

​Как вы реализуете адаптивный дизайн?

Для реализации адаптивного дизайна я использую следующие подходы и инструменты:

- 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

👉 @frontendInterview

javanoscript. Визуальные редакторы

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

👉 @frontendInterview

Waiting room

В комнате есть несколько кресел, которые пронумерованы от 1 до N. Первое кресло находится ближе всего ко входу.
Люди, входящие в комнату занимают кресла по следующим правилам:
1. Кресло находится на самом дальнем расстоянии от занятого.
2. Кресло находится ближе всего ко входу

Ваша задача: найти номер кресла для входящего человека.

Пример:
lastChair(10) => 9

👉 @frontendInterview

​В чем отличия между отзывчивым (responsive) и адаптивным (adaptive) дизайном и какой подход лучше применять?

Responsive и Adaptive дизайн оба направлены на создание лучшего пользовательского опыта на различных устройствах.

Различия между отзывчивым (responsive) и адаптивным (adaptive) дизайном заключаются в подходах, используемых для достижения этой цели.
Отзывчивый дизайн использует гибкую сетку (flexible grid), чтобы создать дизайн, который автоматически масштабируется и меняет свой шаблон в соответствии с шириной экрана. Изначально разработчики создают макет для наиболее широкого экрана, но потом, используя медиазапросы (media queries), устанавливают разные правила CSS для разных размеров экранов, чтобы оптимизировать отображение страницы на различных устройствах.

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

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

👉 @frontendInterview

Какие преимущества имеет использование CSS-препроцессоров и какие препроцессоры вы знаете?

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

Некоторые из самых популярных CSS-препроцессоров:

- Sass - это один из самых популярных препроцессоров, в котором используется более развернутый набор функций и возможностей.
- Less - это более легковесный препроцессор, который использует синтаксис, более похожий на обычный CSS, чем Sass.
- Stylus - это менее распространенный, но все еще мощный препроцессор, который зачастую используется в определенных фреймворках для веб-разработки.

👉 @frontendInterview

👉 @frontendInterview