tgoop.com »
United States »
Frontend Interview - собеседования по Javascript / Html / Css » Telegram Web
Как настроить баннер cookie-согласия по требованиям GDPR, Google Consent Mode и законодательства разных стран
В современном вебе защита персональных данных – неотъемлемая часть ответственной разработки. Один из ключевых элементов – получение согласия пользователя на использование cookie-файлов. Несоблюдение этих требований может повлечь не только серьёзные штрафы, но и подорвать доверие аудитории.
В этой статье мы разберём:
- Зачем нужно согласие на cookie?
- Какие бывают типы cookie?
- Что такое Google Consent Mode?
- Как реализовать баннер согласия?
- Как управлять куки в зависимости от предпочтений пользователя?
- Как проверить, что настройки согласия работают?
А также приведем примеры политик использования файлов cookie.
👉 @frontendInterview
В современном вебе защита персональных данных – неотъемлемая часть ответственной разработки. Один из ключевых элементов – получение согласия пользователя на использование cookie-файлов. Несоблюдение этих требований может повлечь не только серьёзные штрафы, но и подорвать доверие аудитории.
В этой статье мы разберём:
- Зачем нужно согласие на cookie?
- Какие бывают типы cookie?
- Что такое Google Consent Mode?
- Как реализовать баннер согласия?
- Как управлять куки в зависимости от предпочтений пользователя?
- Как проверить, что настройки согласия работают?
А также приведем примеры политик использования файлов cookie.
👉 @frontendInterview
Как сделать мобильное приложение, если у тебя лапки? Путь от PWA до TWA
Если вы веб-разработчик, но руки «чешутся» написать мобильное приложение, варианты есть. В этой статье я расскажу, как создать собственное прогрессивное веб-приложение (PWA) и доработать его до TWA, чтобы потом протестировать и опубликовать в разных сторах. Никакого rocket science, просто небольшое пособие, которое основывается на моем опыте.
👉 @frontendInterview
Если вы веб-разработчик, но руки «чешутся» написать мобильное приложение, варианты есть. В этой статье я расскажу, как создать собственное прогрессивное веб-приложение (PWA) и доработать его до TWA, чтобы потом протестировать и опубликовать в разных сторах. Никакого rocket science, просто небольшое пособие, которое основывается на моем опыте.
👉 @frontendInterview
Когда Web Worker автоматически уничтожается без вызова terminate()?
Anonymous Quiz
15%
Никогда
6%
При каждом вызове postMessage()
27%
После выполнения всех операций в worker'e
52%
При перезагрузке страницы или закрытии вкладки
Как добавить слушатель события?
Добавление слушателя события — это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.
Почему это нужно?
Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.
Как это используется?
Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.
Чистый JavaScript
Для добавления слушателя события используется метод
Пример:
В этом примере мы получаем элемент кнопки по её
React
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как
Пример:
В этом примере мы определяем функцию
jQuery
Если вы используете его, добавление слушателей событий также очень просто и удобно.
Пример:
В этом примере мы используем jQuery для добавления обработчика события
Почему это удобно и важно:
- Интерактивность: Позволяет создавать динамичные и отзывчивые интерфейсы.
- Гибкость: Возможность реагировать на различные действия пользователей.
- Удобство: В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.
👉 @frontendInterview
Добавление слушателя события — это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.
Почему это нужно?
Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.
Как это используется?
Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.
Чистый JavaScript
Для добавления слушателя события используется метод
addEventListener.Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Listener Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
alert('Button was clicked!');
});
</script>
</body>
</html>
В этом примере мы получаем элемент кнопки по её
id и добавляем слушатель события click, который вызывает функцию, отображающую сообщение.React
Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как
onClick, onChange и т.д.Пример:
import React from 'react';
function App() {
const handleClick = () => {
alert('Button was clicked!');
};
return (
<div>
<button onClick={handleClick}>Click me</button>
</div>
);
}
export default App;
В этом примере мы определяем функцию
handleClick и передаем её в атрибут onClick кнопки. Когда пользователь нажимает на кнопку, вызывается функция handleClick.jQuery
Если вы используете его, добавление слушателей событий также очень просто и удобно.
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Listener Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="myButton">Click me</button>
<script>
$(document).ready(function() {
$('#myButton').on('click', function() {
alert('Button was clicked!');
});
});
</script>
</body>
</html>
В этом примере мы используем jQuery для добавления обработчика события
click к кнопке.Почему это удобно и важно:
- Интерактивность: Позволяет создавать динамичные и отзывчивые интерфейсы.
- Гибкость: Возможность реагировать на различные действия пользователей.
- Удобство: В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.
👉 @frontendInterview
Learn Three.js: Program 3D animations and visualizations for the web with JavaScript and WebGL
Книга начинается с основных концепций и строительных блоков, используемых в Three.js, и помогает вам подробно изучить эти важные темы с помощью обширных примеров и образцов кода. Вы узнаете, как создавать реалистично выглядящие 3D-объекты с помощью текстур и материалов и как загружать модели из внешнего источника.
👉 @frontendInterview
Книга начинается с основных концепций и строительных блоков, используемых в Three.js, и помогает вам подробно изучить эти важные темы с помощью обширных примеров и образцов кода. Вы узнаете, как создавать реалистично выглядящие 3D-объекты с помощью текстур и материалов и как загружать модели из внешнего источника.
👉 @frontendInterview
Это треугольник?
Реализуйте функцию, принимающую 3 целых значения a, b, c. Функция должна возвращать true, если треугольник может быть построен со сторонами заданной длины, и false в любом другом случае.
Пример:
👉 @frontendInterview
Реализуйте функцию, принимающую 3 целых значения a, b, c. Функция должна возвращать true, если треугольник может быть построен со сторонами заданной длины, и false в любом другом случае.
Пример:
isTriangle(1,2,2) = true👉 @frontendInterview
В чём разница между макро и микро задачами ?
Существует понятие Event Loop (цикл событий), который отвечает за выполнение кода, сбор событий и обработку сообщений. В его контексте важную роль играют понятия макро- и микрозадач. Эти типы задач помогают понять, как обрабатываются асинхронные операции.
Макрозадачи (Macro-tasks):
Это задачи, которые управляются циклом событий и выполняются одна за другой. Каждая такая задача выполняется в отдельном цикле, после чего выполняются все доступные микрозадачи.
Примеры:
-
-
-
- Запросы к серверу через
-
Микрозадачи (Micro-tasks):
Также управляются циклом событий, но они имеют более высокий приоритет, чем макрозадачи. Они выполняются сразу после завершения текущей исполняемой задачи и перед тем, как Event Loop перейдет к следующей макрозадаче. Это означает, что все они в очереди будут выполнены до начала выполнения следующей макрозадачи.
Примеры:
-
-
-
Различия между макро и микрозадачами:
- Приоритет: Микрозадачи имеют более высокий приоритет по сравнению с макрозадачами. Все микрозадачи в очереди будут выполнены до начала следующего цикла Event Loop и до того, как будет взята новая макрозадача.
- Время выполнения: Микрозадачи выполняются непосредственно после текущей задачи и перед тем, как браузер получит возможность перерисовать страницу или обработать другие события, такие как ввод пользователя. Макрозадачи же разделяются циклами Event Loop.
- Источники: Макро- и микрозадачи поступают из разных источников. Например, таймеры (
👉 @frontendInterview
Существует понятие Event Loop (цикл событий), который отвечает за выполнение кода, сбор событий и обработку сообщений. В его контексте важную роль играют понятия макро- и микрозадач. Эти типы задач помогают понять, как обрабатываются асинхронные операции.
Макрозадачи (Macro-tasks):
Это задачи, которые управляются циклом событий и выполняются одна за другой. Каждая такая задача выполняется в отдельном цикле, после чего выполняются все доступные микрозадачи.
Примеры:
-
setTimeout-
setInterval-
setImmediate (Node.js)- Запросы к серверу через
XMLHttpRequest или fetch (не сам запрос, а обработка результата)-
I/O операции (в Node.js)Микрозадачи (Micro-tasks):
Также управляются циклом событий, но они имеют более высокий приоритет, чем макрозадачи. Они выполняются сразу после завершения текущей исполняемой задачи и перед тем, как Event Loop перейдет к следующей макрозадаче. Это означает, что все они в очереди будут выполнены до начала выполнения следующей макрозадачи.
Примеры:
-
Promise.then/catch/finally-
queueMicrotask-
MutationObserverРазличия между макро и микрозадачами:
- Приоритет: Микрозадачи имеют более высокий приоритет по сравнению с макрозадачами. Все микрозадачи в очереди будут выполнены до начала следующего цикла Event Loop и до того, как будет взята новая макрозадача.
- Время выполнения: Микрозадачи выполняются непосредственно после текущей задачи и перед тем, как браузер получит возможность перерисовать страницу или обработать другие события, такие как ввод пользователя. Макрозадачи же разделяются циклами Event Loop.
- Источники: Макро- и микрозадачи поступают из разных источников. Например, таймеры (
setTimeout, setInterval) и I/O операции генерируют макрозадачи, в то время как обработчики промисов (then, catch, finally) создают микрозадачи.👉 @frontendInterview
Какой оператор JavaScript используется для проверки наличия свойства в объекте?
Anonymous Quiz
88%
in
7%
if
4%
for
2%
while
overscroll-behavior
Допустим, есть два вложенных друг в друга элемента. У обоих есть прокрутка. Если пользователь пролистает дочерний элемент, то при достижении его границы прокрутка перейдет на родительский элемент. Подобное поведение называется цепочкой прокрутки.
В мобильных браузерах при достижении границы прокрутки контент элемента немного оттягивается в направлении скролла, создавая эффект отскока.
Изменить поведение прокрутки в обоих примерах может свойство overscroll-behavior. С его помощью можно настроить прокрутку так, чтобы вложенные элементы не передавали скролл родителю, а страница не прыгала при достижении границ.
Синтаксис свойства позволяет задать два значения — для оси x и оси y. Если указано одно значение, оно применится к обеим осям. Можно использовать самостоятельные CSS-свойства overscroll-behavior-x и overscroll-behavior-y для отдельных осей или их логические эквиваленты overscroll-behavior-inline, overscroll-behavior-block.
Значения:
- auto — значение по умолчанию. При достижении границы элемента создаётся цепочка прокрутки либо эффект отскока в зависимости от устройства;
- contain — предотвращает создание цепочек прокрутки, но сохраняет эффект отскока;
- none — отключает создание цепочек прокрутки и эффект отскока.
👉 @frontendInterview
Допустим, есть два вложенных друг в друга элемента. У обоих есть прокрутка. Если пользователь пролистает дочерний элемент, то при достижении его границы прокрутка перейдет на родительский элемент. Подобное поведение называется цепочкой прокрутки.
В мобильных браузерах при достижении границы прокрутки контент элемента немного оттягивается в направлении скролла, создавая эффект отскока.
Изменить поведение прокрутки в обоих примерах может свойство overscroll-behavior. С его помощью можно настроить прокрутку так, чтобы вложенные элементы не передавали скролл родителю, а страница не прыгала при достижении границ.
Синтаксис свойства позволяет задать два значения — для оси x и оси y. Если указано одно значение, оно применится к обеим осям. Можно использовать самостоятельные CSS-свойства overscroll-behavior-x и overscroll-behavior-y для отдельных осей или их логические эквиваленты overscroll-behavior-inline, overscroll-behavior-block.
Значения:
- auto — значение по умолчанию. При достижении границы элемента создаётся цепочка прокрутки либо эффект отскока в зависимости от устройства;
- contain — предотвращает создание цепочек прокрутки, но сохраняет эффект отскока;
- none — отключает создание цепочек прокрутки и эффект отскока.
👉 @frontendInterview
Idle, Click Me Load More, Error, Success: как устроить надёжный UI
При разработке фронтенда мы часто ограничиваемся тремя состояниями UI‑запроса: loading, error, data (или success). Но это не всегда достаточно — особенно когда дело доходит до тонких UX‑деталей, предотвращения гонок запросов и адекватного управления отменой при размонтировании компонентов. В статье рассмотрим, почему добавление состояния idle делает систему более надёжной, как реализовать конечный автомат для управления статусами, как отменять fetch‑запросы и оптимизировать перерисовки.
👉 @frontendInterview
При разработке фронтенда мы часто ограничиваемся тремя состояниями UI‑запроса: loading, error, data (или success). Но это не всегда достаточно — особенно когда дело доходит до тонких UX‑деталей, предотвращения гонок запросов и адекватного управления отменой при размонтировании компонентов. В статье рассмотрим, почему добавление состояния idle делает систему более надёжной, как реализовать конечный автомат для управления статусами, как отменять fetch‑запросы и оптимизировать перерисовки.
👉 @frontendInterview
Для каких элементов работает свойство z-index?
Anonymous Quiz
3%
Только для элементов с position: static
67%
Для элементов с position: relative, absolute, fixed или sticky
27%
Для всех элементов, независимо от position
3%
Только для элементов с display: flex
Что такое state manager и с какими приходилось работать?
Это инструмент или библиотека, который помогает управлять состоянием приложения. Состояние приложения может включать различные данные: от пользовательского ввода и временных данных до кэшированных страниц и аутентифицированного пользователя. Менеджер состояний помогает централизованно управлять этими данными, облегчая их передачу между компонентами, упрощая тестирование и повышая производительность приложения.
Зачем нужен менеджер состояний?
- Упрощение доступа к данным: Предоставляют унифицированный интерфейс для доступа к данным из любого места в приложении.
- Повышение производительности: Эффективное управление состоянием может помочь избежать ненужных обновлений интерфейса и повысить производительность приложения.
- Улучшение масштабируемости: Упрощает масштабирование приложения и добавление новых функций.
- Упрощение отладки и тестирования: Делает приложение более предсказуемым, что упрощает отладку и тестирование.
Примеры:
1. Redux: Одна из самых популярных библиотек для управления состоянием в React-приложениях. Она предлагает однонаправленный поток данных, что делает изменения состояния предсказуемыми.
2. Vuex: Библиотека для управления состоянием в Vue.js. Подобно Redux, она предлагает централизованное хранилище для всех компонентов приложения.
3. MobX: Альтернатива Redux, которая использует наблюдаемые объекты для управления состоянием. Она предлагает более гибкий подход к управлению состоянием, автоматически отслеживая изменения.
4. Context API и Hooks в React: Начиная с версии 16.8, React предоставляет встроенный механизм для управления состоянием без необходимости добавления внешних библиотек. Хотя для небольших или средних проектов это может быть достаточно, в больших приложениях может потребоваться более мощное решение вроде Redux.
👉 @frontendInterview
Это инструмент или библиотека, который помогает управлять состоянием приложения. Состояние приложения может включать различные данные: от пользовательского ввода и временных данных до кэшированных страниц и аутентифицированного пользователя. Менеджер состояний помогает централизованно управлять этими данными, облегчая их передачу между компонентами, упрощая тестирование и повышая производительность приложения.
Зачем нужен менеджер состояний?
- Упрощение доступа к данным: Предоставляют унифицированный интерфейс для доступа к данным из любого места в приложении.
- Повышение производительности: Эффективное управление состоянием может помочь избежать ненужных обновлений интерфейса и повысить производительность приложения.
- Улучшение масштабируемости: Упрощает масштабирование приложения и добавление новых функций.
- Упрощение отладки и тестирования: Делает приложение более предсказуемым, что упрощает отладку и тестирование.
Примеры:
1. Redux: Одна из самых популярных библиотек для управления состоянием в React-приложениях. Она предлагает однонаправленный поток данных, что делает изменения состояния предсказуемыми.
2. Vuex: Библиотека для управления состоянием в Vue.js. Подобно Redux, она предлагает централизованное хранилище для всех компонентов приложения.
3. MobX: Альтернатива Redux, которая использует наблюдаемые объекты для управления состоянием. Она предлагает более гибкий подход к управлению состоянием, автоматически отслеживая изменения.
4. Context API и Hooks в React: Начиная с версии 16.8, React предоставляет встроенный механизм для управления состоянием без необходимости добавления внешних библиотек. Хотя для небольших или средних проектов это может быть достаточно, в больших приложениях может потребоваться более мощное решение вроде Redux.
👉 @frontendInterview
javascript. Визуальные редакторы
Подавляющее большинство ныне действующих сайтов сделано при помощи CMS. А такие системы невозможно представить без визуальных редакторов страниц. WYSIWYG - редакторы позволяют администратору управлять содержимым ресурса, не будучи знакомым даже с азами программирования. Многие разработчики используют не готовые CMS, а пишут собственные. Данная книга призвана помочь им в этом непростом деле. На ее страницах описаны четыре WYSIWYG-редактора — на разный вкус и для разных задач. Все системы являются оригинальными и не содержат каких-либо заимствований кода. Функциональные возможности приведенных разработок имеют исчерпывающие описания и разъяснения.
👉 @frontendInterview
Подавляющее большинство ныне действующих сайтов сделано при помощи CMS. А такие системы невозможно представить без визуальных редакторов страниц. WYSIWYG - редакторы позволяют администратору управлять содержимым ресурса, не будучи знакомым даже с азами программирования. Многие разработчики используют не готовые CMS, а пишут собственные. Данная книга призвана помочь им в этом непростом деле. На ее страницах описаны четыре WYSIWYG-редактора — на разный вкус и для разных задач. Все системы являются оригинальными и не содержат каких-либо заимствований кода. Функциональные возможности приведенных разработок имеют исчерпывающие описания и разъяснения.
👉 @frontendInterview
WeIrD StRiNg CaSe
Напишите функцию, которая принимает строку и возвращает ту же самую строку со всеми четными символами в каждом слове, выделенными верхним регистром, и всеми нечетными символами в каждом слове, выделенными нижним регистром. Индексация, как уже объяснялось, основана на нулях, поэтому нулевой индекс четный, следовательно, этот символ должен быть в верхнем регистре, и вам нужно начать сначала для каждого слова.
Переданная строка будет состоять только из алфавитных символов и пробелов(' '). Пробелы будут присутствовать только при наличии нескольких слов. Слова будут разделены одним пробелом(' ').
Примеры:
👉 @frontendInterview
Напишите функцию, которая принимает строку и возвращает ту же самую строку со всеми четными символами в каждом слове, выделенными верхним регистром, и всеми нечетными символами в каждом слове, выделенными нижним регистром. Индексация, как уже объяснялось, основана на нулях, поэтому нулевой индекс четный, следовательно, этот символ должен быть в верхнем регистре, и вам нужно начать сначала для каждого слова.
Переданная строка будет состоять только из алфавитных символов и пробелов(' '). Пробелы будут присутствовать только при наличии нескольких слов. Слова будут разделены одним пробелом(' ').
Примеры:
"String" => "StRiNg"
"Weird string case" => "WeIrD StRiNg CaSe"
👉 @frontendInterview
Чем тип отличается от интерфейса?
Типы в TypeScript используются для создания алиасов для различных типов данных. Они могут описывать примитивные типы, объединения, пересечения, массивы, объекты и функции. Типы предоставляют гибкость в описании более сложных структур данных.
Типы могут комбинировать другие типы с использованием объединений (|) и пересечений (&):
Интерфейсы используются для описания структуры объектов. Они позволяют определять обязательные и необязательные свойства, а также методы объектов. Интерфейсы поддерживают наследование и могут быть расширены.
Интерфейсы могут расширять другие интерфейсы:
Ключевые различия
Интерфейсы могут расширять другие интерфейсы с помощью ключевого слова
Типы могут определять объединения (например,
Интерфейсы могут быть объединены (merged) TypeScript'ом, если они объявлены несколько раз с одинаковым именем. Типы не поддерживают объединение, и объявление одного и того же типа несколько раз приведет к ошибке.
Типы могут представлять примитивные типы (например,
Примеры
Тип с объединением
Объединение интерфейсов
Расширение интерфейсов
Тип с пересечением
👉 @frontendInterview
Типы в TypeScript используются для создания алиасов для различных типов данных. Они могут описывать примитивные типы, объединения, пересечения, массивы, объекты и функции. Типы предоставляют гибкость в описании более сложных структур данных.
type User = {
name: string;
age: number;
};Типы могут комбинировать другие типы с использованием объединений (|) и пересечений (&):
type ID = string | number;
type Employee = {
id: ID;
department: string;
};
type Manager = User & Employee & {
employees: User[];
};
Интерфейсы используются для описания структуры объектов. Они позволяют определять обязательные и необязательные свойства, а также методы объектов. Интерфейсы поддерживают наследование и могут быть расширены.
interface User {
name: string;
age: number;
}
interface Employee extends User {
department: string;
}Интерфейсы могут расширять другие интерфейсы:
interface Manager extends Employee {
employees: User[];
}Ключевые различия
Интерфейсы могут расширять другие интерфейсы с помощью ключевого слова
extends. Типы могут использовать пересечения (&) для комбинирования других типов.Типы могут определять объединения (например,
string | number), что позволяет описывать переменные, которые могут быть одного из нескольких типов. Интерфейсы не поддерживают объединения.Интерфейсы могут быть объединены (merged) TypeScript'ом, если они объявлены несколько раз с одинаковым именем. Типы не поддерживают объединение, и объявление одного и того же типа несколько раз приведет к ошибке.
Типы могут представлять примитивные типы (например,
string, number), а также сложные типы и функции. Интерфейсы могут описывать только структуры объектов.Примеры
Тип с объединением
type ID = string | number;
const userId: ID = 123;
const userName: ID = "abc";
Объединение интерфейсов
interface User {
name: string;
}
interface User {
age: number;
}
const user: User = {
name: "John",
age: 30
};Расширение интерфейсов
interface User {
name: string;
age: number;
}
interface Employee extends User {
department: string;
}
const employee: Employee = {
name: "Alice",
age: 25,
department: "HR"
};Тип с пересечением
type User = {
name: string;
age: number;
};
type Employee = User & {
department: string;
};
const employee: Employee = {
name: "Bob",
age: 35,
department: "IT"
};👉 @frontendInterview
