tgoop.com »
United States »
Frontend Interview - собеседования по Javascript / Html / Css » Telegram Web
Millipede of words
Дан массив из 3-7 слов произвольной длины. Без заглавных букв. Слова объединяются, если последняя буква одного слова и первая буква другого слова одинаковы. Возвращается true, если все слова из набора могут быть объединены в одно слово. Каждое слово может и должно быть использовано только один раз. В противном случае возвращается false.
Пример:
👉 @frontendInterview
Дан массив из 3-7 слов произвольной длины. Без заглавных букв. Слова объединяются, если последняя буква одного слова и первая буква другого слова одинаковы. Возвращается true, если все слова из набора могут быть объединены в одно слово. Каждое слово может и должно быть использовано только один раз. В противном случае возвращается false.
Пример:
solution(["no", "dog", "on", "good"]) => false
solution(["engine", "endure", "elite"]) => true
👉 @frontendInterview
За что отвечает z-index?
Это CSS-свойство, которое определяет порядок расположения элементов по оси z (перпендикулярно экрану). Это свойство используется для управления тем, какие элементы будут отображаться поверх других, когда они перекрываются.
Как он работает?
Контекст наложения (stacking context): Чтобы
Числовое значение:
Пример
В этом примере у нас есть два элемента, которые перекрываются. Красный квадрат имеет
Почему это важно?
Управление перекрытиями: Важен для создания сложных интерфейсов, где элементы могут перекрываться. Это часто встречается в модальных окнах, всплывающих подсказках, выпадающих меню и т.д.
Визуальная иерархия: Он позволяет разработчикам управлять визуальной иерархией, гарантируя, что более важные элементы остаются видимыми и доступны пользователям.
👉 @frontendInterview
Это CSS-свойство, которое определяет порядок расположения элементов по оси z (перпендикулярно экрану). Это свойство используется для управления тем, какие элементы будут отображаться поверх других, когда они перекрываются.
Как он работает?
Контекст наложения (stacking context): Чтобы
z-index работал, элемент должен иметь установленное значение position, отличное от static (например, relative, absolute, fixed или sticky). Без этого z-index не будет применяться.Числовое значение:
z-index принимает целые числа, включая отрицательные. Элементы с более высоким значением z-index будут отображаться поверх элементов с более низким значением.Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример z-index</title>
<style>
.box {
position: absolute;
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
z-index: 1;
top: 50px;
left: 50px;
}
.box2 {
background-color: blue;
z-index: 2;
top: 80px;
left: 80px;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>
В этом примере у нас есть два элемента, которые перекрываются. Красный квадрат имеет
z-index: 1, а синий квадрат — z-index: 2. Поскольку значение z-index у синего квадрата выше, он будет отображаться поверх красного.Почему это важно?
Управление перекрытиями: Важен для создания сложных интерфейсов, где элементы могут перекрываться. Это часто встречается в модальных окнах, всплывающих подсказках, выпадающих меню и т.д.
Визуальная иерархия: Он позволяет разработчикам управлять визуальной иерархией, гарантируя, что более важные элементы остаются видимыми и доступны пользователям.
👉 @frontendInterview
Какое значение примет переменная arr?
Anonymous Quiz
6%
['a', 'b', 'c']
23%
[10, 20, 30]
69%
[NaN, NaN, NaN]
3%
undefined
Как сделать превью проекта на собственном сервере
Почти всегда в проекте существует задача смотреть на текущие сборки из неосновной ветки репозитория. В крупных проектах есть инженеры, которые занимаются такими задачами. А что, если вы один на проекте? А что, если вы работаете в опенсорс? А что, если у вас совсем маленькая команда и нет возможности нанимать инженеров с нужным опытом?
Есть несколько готовых сервисов. Если вы работаете над статическим сайтом, можно использовать GitHub Pages, Netlify или Surge. Но это не всегда удобно по целому ряду причин. А вот если есть свой выделенный сервер, возможности резко увеличиваются. Почему бы и не использовать уже имеющийся у вас ресурс?
Моё решение основано на использовании веб-сервера Nginx, зато кроме него ничего не понадобится. С другой стороны, вы всегда сможете приспособить моё решение под свои нужды.
👉 @frontendInterview
Почти всегда в проекте существует задача смотреть на текущие сборки из неосновной ветки репозитория. В крупных проектах есть инженеры, которые занимаются такими задачами. А что, если вы один на проекте? А что, если вы работаете в опенсорс? А что, если у вас совсем маленькая команда и нет возможности нанимать инженеров с нужным опытом?
Есть несколько готовых сервисов. Если вы работаете над статическим сайтом, можно использовать GitHub Pages, Netlify или Surge. Но это не всегда удобно по целому ряду причин. А вот если есть свой выделенный сервер, возможности резко увеличиваются. Почему бы и не использовать уже имеющийся у вас ресурс?
Моё решение основано на использовании веб-сервера Nginx, зато кроме него ничего не понадобится. С другой стороны, вы всегда сможете приспособить моё решение под свои нужды.
👉 @frontendInterview
А о техническом долге я скажу…
Бывало у вас такое, что приходилось вставлять не самое лучшее решение в код, только чтоб успеть сдать задачу перед условной выставкой? Или идет работа над проектом в течение уже пары месяцев, а документация откладывается на потом, когда все устаканится? Поздравляю, вы “счастливый” обладатель технического долга. Не стоит расстраиваться, это часть жизни, которую следует принять и проработать как на сеансе у психолога для комфортной жизни в будущем.
👉 @frontendInterview
Бывало у вас такое, что приходилось вставлять не самое лучшее решение в код, только чтоб успеть сдать задачу перед условной выставкой? Или идет работа над проектом в течение уже пары месяцев, а документация откладывается на потом, когда все устаканится? Поздравляю, вы “счастливый” обладатель технического долга. Не стоит расстраиваться, это часть жизни, которую следует принять и проработать как на сеансе у психолога для комфортной жизни в будущем.
👉 @frontendInterview
Что такое "предварительный запрос" (Preflight Request) в контексте CORS?
Anonymous Quiz
75%
Запрос, отправляемый браузером перед основным, чтобы проверить разрешение кросс-доменного доступа
6%
Запрос, отправляемый сервером в ответ на основной запрос, чтобы подтвердить разрешение
17%
Запрос, отправляемый браузером, чтобы проверить доступность ресурса
2%
Запрос, отправляемый сервером, чтобы проверить авторизацию пользователя
Расскажите про приоритет селекторов
Приоритет селекторов (также известный как специфичность селекторов) определяет, какие стили будут применяться к элементу, если на него действуют несколько правил с различными селекторами. Специфичность основана на типах селекторов и их количественном присутствии в одном CSS-правиле.
Как она вычисляется?
Специфичность выражается четырьмя уровнями: A, B, C, D. Чем выше значения, тем более специфичный селектор.
A: Инлайновые стили (например,
B: Количество ID-селекторов в селекторе (например,
C: Количество классов, атрибутов и псевдоклассов (например,
D: Количество тегов и псевдоэлементов (например,
Рассмотрим несколько примеров и определим их специфичность:
1.
2.
3.
4.
Чем выше значения специфичности, тем выше приоритет стиля. Если два селектора имеют одинаковую специфичность, то стиль, который объявлен позже, будет применён.
Пример
В этом примере на
Поскольку
Почему это важно?
- Управление конфликтами стилей: Знание специфичности помогает правильно управлять стилями и избегать конфликтов.
- Чтение и поддержка кода: Более специфичные селекторы позволяют писать CSS, который легко поддерживать и расширять.
- Эффективность разработки: Понимание специфичности позволяет создавать более предсказуемый и стабильный код.
👉 @frontendInterview
Приоритет селекторов (также известный как специфичность селекторов) определяет, какие стили будут применяться к элементу, если на него действуют несколько правил с различными селекторами. Специфичность основана на типах селекторов и их количественном присутствии в одном CSS-правиле.
Как она вычисляется?
Специфичность выражается четырьмя уровнями: A, B, C, D. Чем выше значения, тем более специфичный селектор.
A: Инлайновые стили (например,
style="color: red;") имеют самую высокую специфичность.B: Количество ID-селекторов в селекторе (например,
#header).C: Количество классов, атрибутов и псевдоклассов (например,
.class, [type="text"], :hover).D: Количество тегов и псевдоэлементов (например,
div, h1, ::before).Рассмотрим несколько примеров и определим их специфичность:
1.
#main-content — (0, 1, 0, 0)2.
.article p — (0, 0, 1, 1)3.
header h1 span — (0, 0, 0, 3)4.
div#main .content .text — (0, 1, 2, 1)Чем выше значения специфичности, тем выше приоритет стиля. Если два селектора имеют одинаковую специфичность, то стиль, который объявлен позже, будет применён.
Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример специфичности</title>
<style>
p {
color: black; /* (0, 0, 0, 1) */
}
.text {
color: blue; /* (0, 0, 1, 0) */
}
#highlight {
color: red; /* (0, 1, 0, 0) */
}
p#highlight {
color: green; /* (0, 1, 0, 1) */
}
</style>
</head>
<body>
<p class="text" id="highlight">Этот текст будет зелёным.</p>
</body>
</html>
В этом примере на
<p> элемент действует несколько селекторов с разной специфичностью:p имеет специфичность (0, 0, 0, 1).text имеет специфичность (0, 0, 1, 0)#highlight имеет специфичность (0, 1, 0, 0)p#highlight имеет специфичность (0, 1, 0, 1)Поскольку
p#highlight имеет наивысшую специфичность (0, 1, 0, 1), он применяет стиль цвета зелёный.Почему это важно?
- Управление конфликтами стилей: Знание специфичности помогает правильно управлять стилями и избегать конфликтов.
- Чтение и поддержка кода: Более специфичные селекторы позволяют писать CSS, который легко поддерживать и расширять.
- Эффективность разработки: Понимание специфичности позволяет создавать более предсказуемый и стабильный код.
👉 @frontendInterview
Шпаргалки для начинающего верстальщика HTML/CSS
Книга отлично подходит тем, кто только начинает учить верстку. Здесь вы найдете универсальный код и полезные советы, крутые эффективные ресурсы, применяя которые можно быстро и легко научиться верстать реальные проекты. Вы откроете новые фишки, лайфхаки для своей верстки...
👉 @frontendInterview
Книга отлично подходит тем, кто только начинает учить верстку. Здесь вы найдете универсальный код и полезные советы, крутые эффективные ресурсы, применяя которые можно быстро и легко научиться верстать реальные проекты. Вы откроете новые фишки, лайфхаки для своей верстки...
👉 @frontendInterview
Find the unique string
Есть массив строк. Все строки содержат одинаковые буквы, кроме одной. Попробуйте найти его!
Пример:
Строки могут содержать пробелы. Пробелы не имеют значения, имеют значение только символы, не являющиеся пробелами. Например, строка, содержащая только пробелы, аналогична пустой строке
Гарантируется, что массив содержит более двух строк
👉 @frontendInterview
Есть массив строк. Все строки содержат одинаковые буквы, кроме одной. Попробуйте найти его!
Пример:
findUniq([ 'Aa', 'aaa', 'aaaaa', 'BbBb', 'Aaaa', 'AaAaAa', 'a' ]) // => 'BbBb'
findUniq([ 'abc', 'acb', 'bac', 'foo', 'bca', 'cab', 'cba' ]) // => 'foo'
Строки могут содержать пробелы. Пробелы не имеют значения, имеют значение только символы, не являющиеся пробелами. Например, строка, содержащая только пробелы, аналогична пустой строке
Гарантируется, что массив содержит более двух строк
👉 @frontendInterview
Как можно оптимизировать перерисовки ?
Оптимизация перерисовок (или "repaints" и "reflows") в веб-приложениях является важной задачей для обеспечения высокой производительности и плавности интерфейса. Вот несколько методов и стратегий, которые можно использовать для оптимизации перерисовок:
Используйте Document Fragments:
Вместо многократного добавления элементов в DOM, добавляйте их в
Избегайте синхронных изменений стилей и компоновки:
Вместо изменения нескольких отдельных стилей, измените один класс.
Вместо этого используйте класс:
Избегайте чтения свойств, вызывающих перерисовку:
Чтение некоторых свойств, таких как
CSS анимации и трансформации:
Используйте CSS для анимаций и трансформаций, так как они могут выполняться на уровне GPU, что снижает нагрузку на основной поток.
Debouncing и Throttling:
Используйте дебаунс и троттлинг для событий, которые происходят часто (например,
Использование библиотек с виртуальным DOM:
Библиотеки, такие как React, используют виртуальный DOM, чтобы минимизировать количество изменений в реальном DOM, что значительно улучшает производительность.
Избегайте использования layout thrashing
Это происходит, когда чередуются операции записи и чтения из DOM, что вызывает множественные перерисовки.
Сгруппируйте чтения и записи отдельно:
Избегайте глубоких вложенностей в DOM
Старайтесь минимизировать глубину вложенности элементов, так как это может усложнить перерисовку и компоновку.
Уменьшите количество правил и селекторов:
Сложные CSS-селекторы могут замедлить работу браузера. Используйте более простые селекторы и старайтесь избегать вложенных правил.
Использование will-change
Используйте свойство will-change, чтобы заранее сообщить браузеру о планируемых изменениях, что позволяет оптимизировать рендеринг.
👉 @frontendInterview
Оптимизация перерисовок (или "repaints" и "reflows") в веб-приложениях является важной задачей для обеспечения высокой производительности и плавности интерфейса. Вот несколько методов и стратегий, которые можно использовать для оптимизации перерисовок:
Используйте Document Fragments:
Вместо многократного добавления элементов в DOM, добавляйте их в
DocumentFragment, а затем добавьте фрагмент в DOM одним действием.const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const div = document.createElement('div');
div.textContent = `Item ${i}`;
fragment.appendChild(div);
}
document.body.appendChild(fragment);
Избегайте синхронных изменений стилей и компоновки:
Вместо изменения нескольких отдельных стилей, измените один класс.
element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'red';
Вместо этого используйте класс:
.new-style {
width: 100px;
height: 100px;
background-color: red;
}
Избегайте чтения свойств, вызывающих перерисовку:
Чтение некоторых свойств, таких как
offsetHeight или offsetWidth, после изменения стилей, заставляет браузер выполнять немедленную перерисовку. Избегайте таких действий.CSS анимации и трансформации:
Используйте CSS для анимаций и трансформаций, так как они могут выполняться на уровне GPU, что снижает нагрузку на основной поток.
.animated {
transition: transform 0.3s;
transform: translateX(100px);
}
Debouncing и Throttling:
Используйте дебаунс и троттлинг для событий, которые происходят часто (например,
resize или scroll), чтобы уменьшить количество вызовов обработчиков событий. function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
window.addEventListener('resize', debounce(() => {
console.log('Resized!');
}, 200));
Использование библиотек с виртуальным DOM:
Библиотеки, такие как React, используют виртуальный DOM, чтобы минимизировать количество изменений в реальном DOM, что значительно улучшает производительность.
Избегайте использования layout thrashing
Это происходит, когда чередуются операции записи и чтения из DOM, что вызывает множественные перерисовки.
const height = element.offsetHeight;
element.style.height = out;
Сгруппируйте чтения и записи отдельно:
const height = element.offsetHeight;
element.style.height = ${height + 10}px;
Избегайте глубоких вложенностей в DOM
Старайтесь минимизировать глубину вложенности элементов, так как это может усложнить перерисовку и компоновку.
Уменьшите количество правил и селекторов:
Сложные CSS-селекторы могут замедлить работу браузера. Используйте более простые селекторы и старайтесь избегать вложенных правил.
Использование will-change
Используйте свойство will-change, чтобы заранее сообщить браузеру о планируемых изменениях, что позволяет оптимизировать рендеринг.
.will-change-transform {
will-change: transform;
}
👉 @frontendInterview
Какое максимальное одновременое количество значений может быть у свойства border-radius?
Anonymous Quiz
15%
1
6%
2
67%
4
13%
8
Всем привет!
Хотите узнавать небанальное об интервью на английском? Получить оффер в валюте на удаленке или даже переехать?
Тогда приглашаем вас, дорогие и уважаемые, в наш маленький канал! Мы очень стараемся постить всякие интересности регулярно, и, если поскроллить, то уже можно почитать бомбические советы по составлению резюме, байки про работу в айти и даже попрактиковаться в ответах на типичные вопросы собеседования.
Будем очень рады вашей подписке, но еще больше - вашим вопросам и мнениям.
Ваши Аня и Любовь
из @acceleracio
Хотите узнавать небанальное об интервью на английском? Получить оффер в валюте на удаленке или даже переехать?
Тогда приглашаем вас, дорогие и уважаемые, в наш маленький канал! Мы очень стараемся постить всякие интересности регулярно, и, если поскроллить, то уже можно почитать бомбические советы по составлению резюме, байки про работу в айти и даже попрактиковаться в ответах на типичные вопросы собеседования.
Будем очень рады вашей подписке, но еще больше - вашим вопросам и мнениям.
Ваши Аня и Любовь
из @acceleracio
Telegram
Acceleracio | подготовка к интервью на английском
🟣 Пишем резюме!
Мы уже писали пост о том, как получать приглашения на интервью. Сегодняшний пост — логическое продолжение той же темы.
Кто-то всё еще кричит, что резюме можно копипастить налево и направо и веерно рассылать? Подумаешь, работа! Но, чтобы…
Мы уже писали пост о том, как получать приглашения на интервью. Сегодняшний пост — логическое продолжение той же темы.
Кто-то всё еще кричит, что резюме можно копипастить налево и направо и веерно рассылать? Подумаешь, работа! Но, чтобы…
Как опубликовать сайт прямо на GitHub?
Задача
Как опубликовать сайт в виде набора HTML-страниц для тестирования или постоянного размещения прямо на GitHub. Например, такой сайт может стать отличным портфолио. Для него будут бесплатными хостинг и доменное имя третьего уровня.
На GitHub для этого есть специальный инструмент — GitHub Pages. С помощью него публикуют сайты, используя в качестве хостинга сам сервис. Есть два способа использования этого инструмента:
1. Собранный сайт помещается в отдельную папку в выбранной ветке репозитория, GitHub просто отображает эту папку как корневую для сайта. Такой подход используют для показа уже собранного статического сайта в виде набора файлов в форматах, которые отображаются в браузере напрямую.
2. Статический сайт сначала собирается с помощью средств автоматизации GitHub Actions и публикуется также как в первом случае.
Второй способ не будем рассматривать, так как он находится на этапе бета-тестирования. В этом режиме можно выбрать уже готовые решения, например, GitHub Pages Jekyll и Static HTML, а можно настроить свой воркфлоу.
Рассмотрим в статье подробно первый способ.
👉 @frontendInterview
Задача
Как опубликовать сайт в виде набора HTML-страниц для тестирования или постоянного размещения прямо на GitHub. Например, такой сайт может стать отличным портфолио. Для него будут бесплатными хостинг и доменное имя третьего уровня.
На GitHub для этого есть специальный инструмент — GitHub Pages. С помощью него публикуют сайты, используя в качестве хостинга сам сервис. Есть два способа использования этого инструмента:
1. Собранный сайт помещается в отдельную папку в выбранной ветке репозитория, GitHub просто отображает эту папку как корневую для сайта. Такой подход используют для показа уже собранного статического сайта в виде набора файлов в форматах, которые отображаются в браузере напрямую.
2. Статический сайт сначала собирается с помощью средств автоматизации GitHub Actions и публикуется также как в первом случае.
Второй способ не будем рассматривать, так как он находится на этапе бета-тестирования. В этом режиме можно выбрать уже готовые решения, например, GitHub Pages Jekyll и Static HTML, а можно настроить свой воркфлоу.
Рассмотрим в статье подробно первый способ.
👉 @frontendInterview
Войти в IT – в 37 и с дипломом филфака
Я нашла свою первую работу тестировщика в 37 лет, с гуманитарным образованием, без коммерческого опыта и без курсов. В этой статье хочу показать все максимально объективно – и успехи, и разочарования на этом пути.
👉 @frontendInterview
Я нашла свою первую работу тестировщика в 37 лет, с гуманитарным образованием, без коммерческого опыта и без курсов. В этой статье хочу показать все максимально объективно – и успехи, и разочарования на этом пути.
👉 @frontendInterview
Как можно сделать куки недоступными для JavaScript?
Anonymous Quiz
48%
Установив флаг HttpOnly
27%
Установив флаг Secure
13%
Используя Local Storage вместо Cookies
12%
Изменив настройки браузера
Что такое falsy значения?
"falsy" (ложные) значения — это значения, которые при приведении к логическому типу (Boolean) дают
Основные значения:
false:
Само значение
0 и -0:
Нулевые значения считаются ложными.
"" (пустая строка):
Пустая строка считается ложной.
null:
Значение null также является ложным.
undefined:
Значение undefined является ложным.
NaN (Not-a-Number):
Специальное значение NaN, которое обозначает нечисловое значение, считается ложным.
"falsy" (ложные) значения — это значения, которые при приведении к логическому типу (Boolean) дают
false. Эти значения часто используются в условиях (например, в if выражениях) для проверки истинности или ложности.Основные значения:
false:
Само значение
false является ложным. if (false) {
console.log('Это не выполнится');
}
0 и -0:
Нулевые значения считаются ложными.
if (0) {
console.log('Это не выполнится');
}
if (-0) {
console.log('Это тоже не выполнится');
}
"" (пустая строка):
Пустая строка считается ложной.
if ("") {
console.log('Это не выполнится');
}
null:
Значение null также является ложным.
if (null) {
console.log('Это не выполнится');
}
undefined:
Значение undefined является ложным.
if (undefined) {
console.log('Это не выполнится');
}
NaN (Not-a-Number):
Специальное значение NaN, которое обозначает нечисловое значение, считается ложным.
if (NaN) {
console.log('Это не выполнится');
}