​Какие методы использования 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

Что такое бандл (bundle) и как он используется в Frontend разработке?

Бандл - это артефакт, который создается сборщиком модулей (например, Webpack) и содержит весь JavaScript-код, требуемый для работы приложения. Он может включать в себя как код приложения, так и зависимости (библиотеки и фреймворки), необходимые для его функционирования. Бандл может быть в нескольких версиях для разных сред (например, разработка, тестирование, продакшн). Бандл позволяет сократить количество запросов к серверу, ускорить загрузку страницы и обеспечить лучшую производительность приложения. Кроме того, бандл можно оптимизировать для уменьшения его размера и ускорения загрузки, например, используя сжатие (compression) и минификацию (minification) кода.

👉 @frontendInterview

Learn Three.js: Program 3D animations and visualizations for the web with JavaScript and WebGL, 4th Edition (2023)

Книга начинается с основных концепций и строительных блоков, используемых в Three.js, и помогает вам подробно изучить эти важные темы с помощью обширных примеров и образцов кода. Вы узнаете, как создавать реалистично выглядящие 3D-объекты с помощью текстур и материалов и как загружать модели из внешнего источника.

👉 @frontendInterview

Кодировщик дубликатов

Цель этой каты - преобразовать строку в новую, где каждый уникальный символ преобразуется в "(", а каждый дублирующийся в ")"

Примеры:
"din" => "((("
"recede" => "()()()"
"Success" => ")())())"
"(( @" => "))(("

👉 @frontendInterview

Какое поведение будет у функции, определенной с помощью Function Declaration, если ее вызов расположен перед определением функции в коде?

В JavaScript функции, созданные с помощью Function Declaration, могут быть вызваны до их определения. Это называется "hoisting" или "поднятие". При поднятии переменные и функции объявляются на самом верхнем уровне области видимости. Таким образом, даже если вызов функции появляется до ее определения в коде, функция будет все равно выполнена успешно.

👉 @frontendInterview