tgoop.com »
United States »
Frontend Interview - собеседования по Javascript / Html / Css » Telegram Web
Sentence Smash
Напишите функцию, которая принимает массив слов, объединяет их в предложение и возвращает это предложение
Вы можете игнорировать необходимость очистки слов или добавления знаков препинания, но вам следует добавлять пробелы между каждым словом.
Будьте внимательны: ни в начале, ни в конце предложения не должно быть пробела!
Пример:
👉 @frontendInterview
Напишите функцию, которая принимает массив слов, объединяет их в предложение и возвращает это предложение
Вы можете игнорировать необходимость очистки слов или добавления знаков препинания, но вам следует добавлять пробелы между каждым словом.
Будьте внимательны: ни в начале, ни в конце предложения не должно быть пробела!
Пример:
['hello', 'world', 'this', 'is', 'great'] => 'hello world this is great'
👉 @frontendInterview
Какое свойство позволяет вам спрятать элемент, но сохранить занимаемое им пространство на странице?
Это свойство называется
По умолчанию, элементы имеют значение
Когда элементу назначается значение
В этом примере, второй
Зачем это нужно?
- Когда важно сохранить исходный макет и расположение элементов.
- Когда требуется временно скрыть элемент и затем снова сделать его видимым, не изменяя при этом расположение других элементов на странице.
Альтернативы
Это свойство полностью удаляет элемент из документа, как если бы его не было, освобождая занимаемое им место.
Это свойство делает элемент полностью прозрачным, но элемент остается интерактивным и занимает место.
👉 @frontendInterview
Это свойство называется
visibility. Это свойство может принимать несколько значений, но основными для скрытия элемента являются visible и hidden..hidden-element {
visibility: hidden;
}
По умолчанию, элементы имеют значение
visibility: visible;, что означает, что они видимы на странице.Когда элементу назначается значение
visibility: hidden;, он становится невидимым, но продолжает занимать то же пространство в макете страницы, что и когда он был видимым.В этом примере, второй
<div> с классом hidden-element скрыт, но продолжает занимать место на странице. Третий <div> расположен после него, как если бы скрытый элемент был видимым.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.hidden-element {
visibility: hidden;
}
.visible-element {
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="visible-element">Этот элемент видим.</div>
<div class="hidden-element">Этот элемент скрыт, но сохраняет место.</div>
<div class="visible-element">Этот элемент тоже видим и расположен после скрытого элемента.</div>
</body>
</html>
Зачем это нужно?
- Когда важно сохранить исходный макет и расположение элементов.
- Когда требуется временно скрыть элемент и затем снова сделать его видимым, не изменяя при этом расположение других элементов на странице.
Альтернативы
display: none;Это свойство полностью удаляет элемент из документа, как если бы его не было, освобождая занимаемое им место.
opacity: 0;Это свойство делает элемент полностью прозрачным, но элемент остается интерактивным и занимает место.
👉 @frontendInterview
Чему равен 'this' в функции-обработчике события?
Anonymous Quiz
11%
null
19%
e
30%
e.currentTarget
40%
window
Как добавить стили на каждый элемент страницы?
Чтобы добавить стили на каждый элемент страницы, можно использовать универсальный селектор
Пример использования
Пример кода выше сбрасывает отступы (
Использование универсального селектора полезно, когда нужно задать базовые стили для всего документа. Например, это может быть полезно в начале проекта для создания единообразного внешнего вида всех элементов.
Хотя универсальный селектор может быть полезным, его использование следует ограничивать, поскольку он может влиять на производительность страницы. Применение стилей ко всем элементам может привести к увеличению времени обработки стилей браузером, особенно на сложных страницах с большим количеством элементов.
👉 @frontendInterview
Чтобы добавить стили на каждый элемент страницы, можно использовать универсальный селектор
*. Этот селектор выбирает все элементы в документе.Пример использования
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Пример кода выше сбрасывает отступы (
margin) и внутренние отступы (padding) всех элементов на странице до нуля. Это часто делается для того, чтобы избежать неожиданных отступов, которые могут быть заданы по умолчанию браузером. Также устанавливается box-sizing: border-box, что изменяет модель коробки элемента, позволяя лучше контролировать размеры элементов при добавлении отступов и границ.Использование универсального селектора полезно, когда нужно задать базовые стили для всего документа. Например, это может быть полезно в начале проекта для создания единообразного внешнего вида всех элементов.
Хотя универсальный селектор может быть полезным, его использование следует ограничивать, поскольку он может влиять на производительность страницы. Применение стилей ко всем элементам может привести к увеличению времени обработки стилей браузером, особенно на сложных страницах с большим количеством элементов.
👉 @frontendInterview
Интеграция CSS-фреймворков в Angular: советы, которые вы не знали
Вы создали новое Angular‑приложение, подключили популярный CSS‑фреймворк, но вместо ожидаемого вау‑эффекта столкнулись с проблемами: стили выглядят не так, как хотелось, валидация форм работает странно, а некоторые элементы вообще не реагируют на изменения состояния. Знакомо? Это типичная ситуация, когда CSS‑фреймворки интегрируются без учета особенностей Angular.
Эта статья поможет вам разобраться, почему возникают такие трудности, и покажет, как правильно интегрировать CSS‑фреймворки в Angular. Мы рассмотрим ключевые проблемы, разберем их решения и реализуем стильное, реактивное поле ввода с применением лучших практик Angular.
👉 @frontendInterview
Вы создали новое Angular‑приложение, подключили популярный CSS‑фреймворк, но вместо ожидаемого вау‑эффекта столкнулись с проблемами: стили выглядят не так, как хотелось, валидация форм работает странно, а некоторые элементы вообще не реагируют на изменения состояния. Знакомо? Это типичная ситуация, когда CSS‑фреймворки интегрируются без учета особенностей Angular.
Эта статья поможет вам разобраться, почему возникают такие трудности, и покажет, как правильно интегрировать CSS‑фреймворки в Angular. Мы рассмотрим ключевые проблемы, разберем их решения и реализуем стильное, реактивное поле ввода с применением лучших практик Angular.
👉 @frontendInterview
Что такое коллбек (callback) в JavaScript?
Anonymous Quiz
14%
Функция, которая вызывается сразу после выполнения другой функции.
79%
Функция, которая передается как аргумент другой функции и вызывается позже.
1%
Функция, которая используется для обработки ошибок.
6%
Функция, которая возвращает значение.
Что такое inline стили, и какой они имеют приоритет?
Инлайн-стили — это CSS-правила, прописанные непосредственно в HTML-элементе через атрибут style. Они имеют более высокий приоритет, чем стили из таблиц стилей или встроенные теги <style>, но уступают !important. Использование инлайн-стилей снижает переиспользуемость и усложняет поддержку.
👉 @frontendInterview
Инлайн-стили — это CSS-правила, прописанные непосредственно в HTML-элементе через атрибут style. Они имеют более высокий приоритет, чем стили из таблиц стилей или встроенные теги <style>, но уступают !important. Использование инлайн-стилей снижает переиспользуемость и усложняет поддержку.
👉 @frontendInterview
Find the capitals
Напишите функцию, которая принимает в качестве аргумента одну непустую строку, состоящую только из строчных и прописных букв ascii, и возвращает упорядоченный список, содержащий индексы всех заглавных (прописных) букв в этой строке.
Пример (вход --> выход):
👉 @frontendInterview
Напишите функцию, которая принимает в качестве аргумента одну непустую строку, состоящую только из строчных и прописных букв ascii, и возвращает упорядоченный список, содержащий индексы всех заглавных (прописных) букв в этой строке.
Пример (вход --> выход):
"CodEWaRs" --> [0,3,4,6]
👉 @frontendInterview
Паттерны проектирования jаvascript
Автор дает исчерпывающее представление о паттернах проектирования в современном jаvascript (ES6+) и приводит практические примеры их применения. Сначала вы познакомитесь с порождающими, структурными и поведенческими паттернами проектирования в идиоматическом для jаvascript стиле, а затем переключитесь на архитектурные паттерны и паттерны пользовательского интерфейса. Вы узнаете, как применять паттерны, характерные для таких библиотек, как React, и распространять их на фронтенд и микрофронтенд.
В последней части книги представлены и проиллюстрированы паттерны улучшения производительности и безопасности, включая обмен сообщениями, события и стратегии загрузки ресурсов, а также паттерны высокопроизводительных асинхронных вычислений. В издании приводятся примеры использования React и Next.js, а также jаvascript и Web API. Они помогут выбрать и внедрить проверенные паттерны проектирования в различных веб-экосистемах и изменить ваш подход к разработке.
👉 @frontendInterview
Автор дает исчерпывающее представление о паттернах проектирования в современном jаvascript (ES6+) и приводит практические примеры их применения. Сначала вы познакомитесь с порождающими, структурными и поведенческими паттернами проектирования в идиоматическом для jаvascript стиле, а затем переключитесь на архитектурные паттерны и паттерны пользовательского интерфейса. Вы узнаете, как применять паттерны, характерные для таких библиотек, как React, и распространять их на фронтенд и микрофронтенд.
В последней части книги представлены и проиллюстрированы паттерны улучшения производительности и безопасности, включая обмен сообщениями, события и стратегии загрузки ресурсов, а также паттерны высокопроизводительных асинхронных вычислений. В издании приводятся примеры использования React и Next.js, а также jаvascript и Web API. Они помогут выбрать и внедрить проверенные паттерны проектирования в различных веб-экосистемах и изменить ваш подход к разработке.
👉 @frontendInterview
Почему лучше не встраивать строки непосредственно в DOM?
Передача строки непосредственно в DOM (Document Object Model) может привести к различным проблемам, связанным с безопасностью и корректностью рендеринга. Рассмотрим более подробно, почему это не рекомендуется.
XSS-атаки (Cross-Site Scripting):
Если строка содержит пользовательский ввод или динамически полученные данные, она может включать вредоносный код. Например, злоумышленник может вставить
Неправильный рендеринг HTML:
Строка, содержащая HTML-код, может быть неправильно интерпретирована или отрендерена браузером. Это может привести к некорректному отображению страницы или нарушению её структуры.
Как безопасно работать с динамическим контентом?
- Вместо передачи строк, рекомендуется использовать методы DOM API, такие как
- Если необходимо вставить HTML-код из строки, можно использовать методы, которые экранируют потенциально опасные символы.
Примеры
Добавление текстового контента:
Создание и добавление элементов:
👉 @frontendInterview
Передача строки непосредственно в DOM (Document Object Model) может привести к различным проблемам, связанным с безопасностью и корректностью рендеринга. Рассмотрим более подробно, почему это не рекомендуется.
XSS-атаки (Cross-Site Scripting):
Если строка содержит пользовательский ввод или динамически полученные данные, она может включать вредоносный код. Например, злоумышленник может вставить
<script> тег, который будет выполнен браузером и может украсть данные пользователей или выполнить другие вредоносные действия.const userInput = "<img src='x' onerror='alert(\"XSS Attack\")'>";
document.getElementById('output').innerHTML = userInput;
Неправильный рендеринг HTML:
Строка, содержащая HTML-код, может быть неправильно интерпретирована или отрендерена браузером. Это может привести к некорректному отображению страницы или нарушению её структуры.
const invalidHTML = "<div>Unclosed tag";
document.getElementById('output').innerHTML = invalidHTML;
// Это может привести к неправильному отображению содержимого.
Как безопасно работать с динамическим контентом?
- Вместо передачи строк, рекомендуется использовать методы DOM API, такие как
createElement, appendChild, textContent и другие. Эти методы позволяют безопасно добавлять элементы и текст в DOM.const userInput = "Safe text";
const outputElement = document.getElementById('output');
const textNode = document.createTextNode(userInput);
outputElement.appendChild(textNode);
- Если необходимо вставить HTML-код из строки, можно использовать методы, которые экранируют потенциально опасные символы.
const userInput = "<div>Safe content</div>";
const outputElement = document.getElementById('output');
outputElement.textContent = userInput;
// Использование textContent гарантирует безопасное добавление текста.
Примеры
Добавление текстового контента:
const userInput = "Some user-provided text";
const outputElement = document.getElementById('output');
outputElement.textContent = userInput;
Создание и добавление элементов:
const userInput = "Some user-provided text";
const outputElement = document.getElementById('output');
const paragraph = document.createElement('p');
paragraph.textContent = userInput;
outputElement.appendChild(paragraph);
👉 @frontendInterview
Как сделать градиентную границу у кнопки?
В этой статье рассматривается CSS свойство background-clip и его значение border-area, при помощи которого можно создавать уникальные границы блоков.
👉 @frontendInterview
В этой статье рассматривается CSS свойство background-clip и его значение border-area, при помощи которого можно создавать уникальные границы блоков.
👉 @frontendInterview
Почему джуны путаются в асинхронном коде (и как научиться с ним работать)
Асинхронная модель — одна из самых сложных и одновременно важных тем в современном программировании, особенно в веб‑разработке. Если посмотреть на боль новичков (да и не только новичков), то одна из самых частых жалоб — непонимание, что там происходит под капотом, почему код скачет и не дает предсказуемых результатов, или почему программа не ждет выполнения функции.
В этой статье разберем, в чем корень путаницы, какие есть ключевые концепции асинхронности, и как к ним прикипеть, чтобы перестать путаться и научиться эффективно писать, отлаживать и поддерживать асинхронный код.
👉 @frontendInterview
Асинхронная модель — одна из самых сложных и одновременно важных тем в современном программировании, особенно в веб‑разработке. Если посмотреть на боль новичков (да и не только новичков), то одна из самых частых жалоб — непонимание, что там происходит под капотом, почему код скачет и не дает предсказуемых результатов, или почему программа не ждет выполнения функции.
В этой статье разберем, в чем корень путаницы, какие есть ключевые концепции асинхронности, и как к ним прикипеть, чтобы перестать путаться и научиться эффективно писать, отлаживать и поддерживать асинхронный код.
👉 @frontendInterview
Какой синтаксис используется для встраивания переменных и выражений в шаблонные литералы?
Anonymous Quiz
13%
{{variable}}
3%
[[variable]]
83%
${variable}
1%
#(variable)