Frontend Interview - собеседования по Javascript / Html / Css

​overscroll-behavior Допустим, есть два вложенных друг в друга элемента. У обоих есть прокрутка. Если пользователь пролистает дочерний элемент, то при достижении его границы прокрутка перейдет на родительский элемент. Подобное поведение называется цепочкой прокрутки. В мобильных браузерах при достижении границы прокрутки контент элемента немного оттягивается в направлении скролла, создавая эффект отскока. Изменить поведение прокрутки в обоих примерах может свойство overscroll-behavior. С его помощью можно настроить прокрутку так, чтобы вложенные элементы не передавали скролл родителю, а страница не прыгала при достижении границ. Синтаксис свойства позволяет задать два значения — для оси x и оси y. Если указано одно значение, оно применится к обеим осям. Можно использовать самостоятельные CSS-свойства overscroll-behavior-x и overscroll-behavior-y для отдельных осей или их логические эквиваленты overscroll-behavior-inline, overscroll-behavior-block. Значения: - auto — значение по умолчанию. При достижении границы элемента создаётся цепочка прокрутки либо эффект отскока в зависимости от устройства; - contain — предотвращает создание цепочек прокрутки, но сохраняет эффект отскока; - none — отключает создание цепочек прокрутки и эффект отскока. 👉 @frontendInterview

💬 Хочешь понять фронтенд и как проходят собеседования в IT? Привет! Веду блог о фронтенде, чтобы помогать тем, кто только начинает путь в IT. Здесь я делюсь опытом, разбираю темы, которые реально важны новичкам, и говорю по делу: — какие бывают собеседования и как к ним готовиться — как выбрать стек технологий под задачи — развеиваю мифы и заблуждения в IT — как не застрять на туториалах и начать делать Без надоевшего всем успешного успеха и гейткипинга. Только реальный опыт и советы, которые можно применить на практике. 📌 Подписывайся, если хочешь понимать, как развиваться во фронтенде. Да и просто, если тебе эта идея зашла! ➡️ Подписаться

В чём разница между макро и микро задачами ? Существует понятие 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

Это треугольник? Реализуйте функцию, принимающую 3 целых значения a, b, c. Функция должна возвращать true, если треугольник может быть построен со сторонами заданной длины, и false в любом другом случае. Пример: isTriangle(1,2,2) = true 👉 @frontendInterview

Learn Three.js: Program 3D animations and visualizations for the web with JavaScript and WebGL Книга начинается с основных концепций и строительных блоков, используемых в Three.js, и помогает вам подробно изучить эти важные темы с помощью обширных примеров и образцов кода. Вы узнаете, как создавать реалистично выглядящие 3D-объекты с помощью текстур и материалов и как загружать модели из внешнего источника. 👉 @frontendInterview

Курсы JAVA-разработки Гарантия ЗП от 120 000р в договоре Jаvа — это язык, на котором строятся банковские системы, мобильные приложения, крупные веб-сервисы и многое другое, а спрос на Jаvа-разработчиков стабильно высок. Благодаря кроссплатформенности и надежности, ты сможешь работать в любой сфере IТ — от финансов до Коммерческой отрасли.📊💰 Почему это работает?✨ - Минимальные вложения. - Тысячи человек уже в IТ. Наши выпускники работают в крутых компаниях: от стартапов до международных корпораций. - Наши менторы — это опытные разработчики, которые ежедневно работают в IТ и готовы делиться актуальными знаниями. P.S. Если всё ещё сомневаешься и думаешь что будет сложно — просто попробуй.😊 Мы берем на себя все риски: ты оплачиваешь основную стоимость обучения только после успешного трудоустройства — это закреплено в договоре. Подать заявку #реклама 16+ kata.academy О рекламодателе

​Как добавить слушатель события? Добавление слушателя события — это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке 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

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

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

Я не гуру продакшена – я такой же новичок, как и ты Но вместе мы можем прокачаться быстрее! ✨ Основы продакшена ✨ Разборы треков ✨ Вдохновение и мысли Подписаться #реклама 16+ О рекламодателе

Как настроить баннер cookie-согласия по требованиям GDPR, Google Consent Mode и законодательства разных стран В современном вебе защита персональных данных – неотъемлемая часть ответственной разработки. Один из ключевых элементов – получение согласия пользователя на использование cookie-файлов. Несоблюдение этих требований может повлечь не только серьёзные штрафы, но и подорвать доверие аудитории. В этой статье мы разберём: - Зачем нужно согласие на cookie? - Какие бывают типы cookie? - Что такое Google Consent Mode? - Как реализовать баннер согласия? - Как управлять куки в зависимости от предпочтений пользователя? - Как проверить, что настройки согласия работают? А также приведем примеры политик использования файлов cookie. 👉 @frontendInterview

Принимаете платежи в криптовалюте? Если нет — то ваш ежегодный объем недополученной выручки может составлять до 15% от оборота Если да – вы продолжаете переплачить 1.5-3% на комиссиях Мы помогаем компаниям принимать оплату в USDT с минимальными комиссиями без посредников. CoinCrossPay — выгоднее, чем у конкурентов! ✅ Комиссия 0,02–0,09% — дешевле не бывает! – для любого бизнеса ✅ Крипта — напрямую вам. Без посредников. Полный контроль. ✅ Персональная платежная страница = больше продаж! ✅ Простая интеграция и поддержка 24/7 Кому подойдет? E-commerce, SaaS, freelancers, и т.д Подключите ❤️CoinCrossPay уже сегодня и увеличивайте продажи без лишних затрат! Оставь заявку на сайте: ➡️ CoinCrossPay.space Или напиши нам напрямую (предварительно расскажи нам о продукте): @CoinCross_manager

Высшее образование онлайн — поменяйте жизнь в 2025 году! ✅Набор в мае: от 6700 ₽/мес.* Московский технологический институт предлагает: — Высшее образование в московском вузе без выезда на сессии — Полностью дистанционный онлайн-формат — Возможность обучаться дома, на работе, в путешествии — Диплом государственного образца — Более 60 направлений на выбор (IT, инженерные, экономические, педагогические, управленческие и другие) — 5 способов оплаты обучения — Поддержка персонального куратора: от поступления до получения диплома Узнать больше #реклама 16+ mti-vuz.ru О рекламодателе

👩‍💻 Всем программистам посвящается! Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Frontend — t.me/frontend_ready 📱 JavaScript — t.me/javascript_ready 👩‍💻 Backend — t.me/backend_ready 📱 GitHub — t.me/github_ready 👩‍💻 Python — t.me/python_ready 👩‍💻 Java — t.me/java_ready 👩‍💻 Всё IT — t.me/it_ready 🖥 Базы Данных & SQL — t.me/sql_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 🖼️ DevOps — t.me/devops_ready 🤔 Хакинг & ИБ — t.me/hacking_ready 👩‍💻 Linux — t.me/linux_ready 👩‍💻 Bash & Shell — t.me/bash_ready 👩‍💻 Нейросети — t.me/neuro_ready 📖 IT Книги — t.me/books_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

​Что делает $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

Чемпионат для подростков по 12 направлениям от «Алабуга Политех»☺️ Программирование и Битва роботов, Экономика и Юриспруденция, 3D моделирование и Английский язык и многое другое, чтобы каждый нашел свою дисциплину. Для участия тебе нужно☺️ ☺️Оставь заявку на сайте😀 ☺️Пройди заочный этап на HR-платформе: Business Cats до 1,0 по «Общению» и «Аналитике» для оплаты дороги туда и обратно😀 ☺️Приезжай на чемпионат😀 Мы предлагаем тебе☺️ ☺️Общий призовой фонд турнира составляет 1 000 000 рублей😀 ☺️Проживание и дорога бесплатно😀 ☺️Возможность поступить в «Алабуга Политех»😀 Участвуй в турнире от образовательного центра мирового уровня и получай призы и преимущество в поступлении☺️