​Что делает $emit во Vue?

$emit — это метод, используемый для отправки событий из дочернего компонента в родительский компонент. Он позволяет дочернему компоненту уведомлять родительский компонент о том, что что-то произошло, передавая вместе с этим событием любые необходимые данные.

Как его использовать
1. В дочернем компоненте:
- Используйте метод $emit, чтобы отправить событие.
- Передайте имя события и любые данные, которые нужно передать родительскому компоненту.

2. В родительском компоненте:
- Слушайте это событие, используя директиву v-on или её сокращение @.
- Обработайте событие в методе родительского компонента.

Дочерний компонент (ChildComponent.vue)

<template>
  <button @click="notifyParent">Нажми меня</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('childClicked', 'Данные от дочернего компонента');
    }
  }
}
</script>

Родительский компонент (ParentComponent.vue)

<template>
  <div>
    <h1>Родительский компонент</h1>
    <child-component @childClicked="handleChildClick"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildClick(message) {
      console.log('Событие от дочернего компонента:', message);
    }
  }
}
</script>

Пояснение
1. В дочернем компоненте `ChildComponent`:
- Мы создали кнопку и добавили к ней обработчик события @click, который вызывает метод notifyParent.
- Метод notifyParent использует $emit для отправки события childClicked и передает строку 'Данные от дочернего компонента' в качестве данных.

2. В родительском компоненте ParentComponent:
- Мы добавили дочерний компонент <child-component> в шаблон и прослушиваем событие childClicked с помощью директивы @childClicked.
- Когда событие childClicked происходит, вызывается метод handleChildClick, который принимает данные, переданные дочерним компонентом, и выводит их в консоль.

Почему это важно?
- Коммуникация между компонентами: $emit позволяет организовать эффективную коммуникацию между компонентами, передавая данные и уведомления от дочернего компонента к родительскому.
- Разделение обязанностей: С помощью событий можно поддерживать чистую и разделенную архитектуру, где каждый компонент отвечает только за свои задачи и уведомляет другие компоненты о произошедших изменениях через события.
- Масштабируемость и поддерживаемость: Использование событий делает приложение более масштабируемым и поддерживаемым, так как компоненты остаются независимыми и могут повторно использоваться в разных частях приложения.

👉 @frontendInterview

Как настроить баннер cookie-согласия по требованиям GDPR, Google Consent Mode и законодательства разных стран

В современном вебе защита персональных данных – неотъемлемая часть ответственной разработки. Один из ключевых элементов – получение согласия пользователя на использование cookie-файлов. Несоблюдение этих требований может повлечь не только серьёзные штрафы, но и подорвать доверие аудитории.

В этой статье мы разберём:
- Зачем нужно согласие на cookie?
- Какие бывают типы cookie?
- Что такое Google Consent Mode?
- Как реализовать баннер согласия?
- Как управлять куки в зависимости от предпочтений пользователя?
- Как проверить, что настройки согласия работают?

А также приведем примеры политик использования файлов cookie.

👉 @frontendInterview

Как сделать мобильное приложение, если у тебя лапки? Путь от PWA до TWA

Если вы веб-разработчик, но руки «чешутся» написать мобильное приложение, варианты есть. В этой статье я расскажу, как создать собственное прогрессивное веб-приложение (PWA) и доработать его до TWA, чтобы потом протестировать и опубликовать в разных сторах. Никакого rocket science, просто небольшое пособие, которое основывается на моем опыте.

👉 @frontendInterview

Я: «Сегодня усердно поработаю.»
Также я, через минуту после включения компа:

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

Это треугольник?

Реализуйте функцию, принимающую 3 целых значения a, b, c. Функция должна возвращать true, если треугольник может быть построен со сторонами заданной длины, и false в любом другом случае.

Пример:
isTriangle(1,2,2) = true

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

​overscroll-behavior

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

В мобильных браузерах при достижении границы прокрутки контент элемента немного оттягивается в направлении скролла, создавая эффект отскока.

Изменить поведение прокрутки в обоих примерах может свойство overscroll-behavior. С его помощью можно настроить прокрутку так, чтобы вложенные элементы не передавали скролл родителю, а страница не прыгала при достижении границ.

Синтаксис свойства позволяет задать два значения — для оси x и оси y. Если указано одно значение, оно применится к обеим осям. Можно использовать самостоятельные CSS-свойства overscroll-behavior-x и overscroll-behavior-y для отдельных осей или их логические эквиваленты overscroll-behavior-inline, overscroll-behavior-block.

Значения:
- auto — значение по умолчанию. При достижении границы элемента создаётся цепочка прокрутки либо эффект отскока в зависимости от устройства;
- contain — предотвращает создание цепочек прокрутки, но сохраняет эффект отскока;
- none — отключает создание цепочек прокрутки и эффект отскока.

👉 @frontendInterview

Idle, Loading, Error, Success: как устроить надёжный UI

При разработке фронтенда мы часто ограничиваемся тремя состояниями UI‑запроса: loading, error, data (или success). Но это не всегда достаточно — особенно когда дело доходит до тонких UX‑деталей, предотвращения гонок запросов и адекватного управления отменой при размонтировании компонентов. В статье рассмотрим, почему добавление состояния idle делает систему более надёжной, как реализовать конечный автомат для управления статусами, как отменять fetch‑запросы и оптимизировать перерисовки.

👉 @frontendInterview

Ни один разработчик не может устоять перед таким

👉 @frontendInterview

​Что такое state manager и с какими приходилось работать?

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

Зачем нужен менеджер состояний?
- Упрощение доступа к данным: Предоставляют унифицированный интерфейс для доступа к данным из любого места в приложении.
- Повышение производительности: Эффективное управление состоянием может помочь избежать ненужных обновлений интерфейса и повысить производительность приложения.
- Улучшение масштабируемости: Упрощает масштабирование приложения и добавление новых функций.
- Упрощение отладки и тестирования: Делает приложение более предсказуемым, что упрощает отладку и тестирование.

Примеры:
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

WeIrD StRiNg CaSe

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

Переданная строка будет состоять только из алфавитных символов и пробелов(' '). Пробелы будут присутствовать только при наличии нескольких слов. Слова будут разделены одним пробелом(' ').

Примеры:

"String" => "StRiNg"
"Weird string case" => "WeIrD StRiNg CaSe"

👉 @frontendInterview