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

Большая кладовая онлайн-курсов Stepik – незаменимый спутник для тех, кто работает удаленно и любит путешествовать, так как помогает учиться в любой точке мира. Это отличная альтернатива чтению книги и просмотру фильма: позволит вам скоротать время в дороге, осваивая полезный навык или подтягивая иностранный язык, особенно удобно это делать в мобильном приложении. У Stepik есть свой телеграм-канал, в котором они рассказывают об авторских курсах (как платных, так и бесплатных), а также публикует полезные статьи и ссылки. У них есть такие подборки курсов: - Разработка на Python - Дизайн и графика - Тестирование ПО - Работа с данными Подпишитесь на stepik_courses и найдите интересующий курс для себя! Подписаться #реклама 16+ О рекламодателе

Приглашаем на вебинар курса Fullstack Developer! 📅 Дата: 20 ноября 2024 года 🕗 Время: 20:00 (мск) 📍 Тема: Базовое использование системы контроля версий Git ## Что будет на вебинаре? - Введение в систему контроля версий, основные команды и концепции (репозитории, коммиты, ветки). - Как клонировать репозиторий, выполнять слияния и разрешать конфликты при работе в команде. - Рекомендации по эффективному использованию Git и обзор популярных инструментов для удобства работы (например, GitHub, GitLab). ## Что узнают участники? - Основные команды и концепции Git: как использовать команды git init, git add, git commit, git branch и другие. Эти знания помогут создать и управлять своими проектами, отслеживая изменения в коде и организуя свою работу более эффективно. - Работа с удалёнными репозиториями: научатся клонировать репозитории, отправлять свои изменения и синхронизировать локальные изменения с удалёнными. Эти навыки будут полезны для совместной работы над проектами в командах и использования платформ, таких как GitHub или GitLab. - Разрешение конфликтов и управление ветками: как управлять различными ветками в проекте и разрешать конфликты, которые могут возникнуть при слиянии изменений. Эти навыки помогут более уверенно работать в команде, минимизируя риски потери данных и улучшая процесс разработки. Не упустите возможность улучшить свои навыки и стать более уверенным разработчиком! Присоединяйтесь к нашему вебинару и узнайте все секреты работы с Git. 🔗 Зарегистрироваться на вебинар: https://vk.cc/cEUXOc Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru erid 2SDnjeBbtfm

​Событие change Событие change срабатывает, когда пользователь изменяет значение в <input>, <select> или <textarea> и фиксирует свои изменения. Это событие лучше всего использовать при создании форм, когда не требуется постоянно взаимодействовать с каждым изменённым символом в поле ввода. Так же данное событие пригодится и при создании чекбоксов, полей выбора и т. п. Когда использовать В текстовых полях (<input>, <textarea>), когда нужно получить окончательное значение после завершения ввода. В выпадающих списках (<select>), если пользователь выбрал новое значение из дропдауна с доступными опциями. Чекбоксы и радиокнопки (<input type="checkbox">, <input type="radio">), когда состояние переключается между «выбрано» и «не выбрано». Например, при отправке формы или при взаимодействии с выбором нескольких значений (чекбоксы или выпадающие списки). Пример:

const input = document.querySelector('.input')

input.addEventListener('change', function (event) {
  console.log(event.target.value)
})

В этом примере мы выбираем элемент с классом .input с помощью document.querySelector(). Используя метод addEventListener, мы привязываем обработчик события change к элементу. Этот обработчик будет вызываться, когда событие произойдет. Внутри функции мы можем получить новое значение элемента с помощью event.target.value. Это значение будет отображено в консоли после изменения и подтверждения ввода пользователем. 👉 @frontendInterview

Как мы делаем СУБД Pangolin? Привет! На связи команда разработки СУБД Platform V Pangolin. Мы делаем полезное сообщество для всех профессионалов из мира СУБД и всех, кому интересен наш продукт. Пишем о том, как делаем Pangolin, разбираем ваши кейсы в чате, помогаем решать рабочие задачки, зовем на бесплатные вебинары и митапы, проводим квизы про базы данных, разбираем английский сленг, а еще у нас есть вакансии и идеи для хобби айтишников... Подпишитесь, у нас как раз много нового! Подписаться #реклама 16+ О рекламодателе

Trash Party Вы получите trash1 и trash2, которые могут иметь следующие значения:

[], false, '', new Array(), null, NaN, undefined, 0, -0, 0n, -0n, '0'.

Вы должны вернуть булево значение, если они строго равны. Примечание: тройное равенство === и строгое неравенство !== не допускаются Пример:

compareTrash(0, false) => false
compareTrash('', '')   => true
compareTrash([], 0)    => false

👉 @frontendInterview

Agile для всех AGILE дает реальные и действенные ответы на вопрос, который не дает спокойно спать руководителям: «Как оставаться успешным в быстро меняющемся и непредсказуемом мире?» Эта методология уже завоевала рынок, доказав что является одним из лучших подходов для создания и доставки программного обеспечения. «Agile для всех» адресован практикам, из этой книги вы узнаете как целые организации — от менеджеров по продукту и разработчиков до маркетологов и руководителей — могут использовать «гибкий» подход. Мэтт Лемей просто и без сленга объясняет, что такое Agile, и предлагает конкретные и действенные шаги, позволяющие любой команде реализовать свои задачи максимально эффективно. Вы найдете множество примеров, которые подойдут для любого типа и размера организации — от стартапов до крупных предприятий, — позволяющих реализовать Agile-подход в разных сферах деятельности. 👉 @frontendInterview

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

Что такое falsy значения? "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('Это не выполнится');
   }

UX designer - нарисовал Devs - сделали QA - протестировали Пользователь: 👉 @frontendInterview

Войти в IT – в 37 и с дипломом филфака Я нашла свою первую работу тестировщика в 37 лет, с гуманитарным образованием, без коммерческого опыта и без курсов. В этой статье хочу показать все максимально объективно – и успехи, и разочарования на этом пути. 👉 @frontendInterview

Дизайн в FIGMA с нуля. Бесплатный курс + портфолио Онлайн-программа с наставником и чатом. Дизайн от профессионалов. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

​Как опубликовать сайт прямо на GitHub? Задача Как опубликовать сайт в виде набора HTML-страниц для тестирования или постоянного размещения прямо на GitHub. Например, такой сайт может стать отличным портфолио. Для него будут бесплатными хостинг и доменное имя третьего уровня. На GitHub для этого есть специальный инструмент — GitHub Pages. С помощью него публикуют сайты, используя в качестве хостинга сам сервис. Есть два способа использования этого инструмента: 1. Собранный сайт помещается в отдельную папку в выбранной ветке репозитория, GitHub просто отображает эту папку как корневую для сайта. Такой подход используют для показа уже собранного статического сайта в виде набора файлов в форматах, которые отображаются в браузере напрямую. 2. Статический сайт сначала собирается с помощью средств автоматизации GitHub Actions и публикуется также как в первом случае. Второй способ не будем рассматривать, так как он находится на этапе бета-тестирования. В этом режиме можно выбрать уже готовые решения, например, GitHub Pages Jekyll и Static HTML, а можно настроить свой воркфлоу. Рассмотрим в статье подробно первый способ. 👉 @frontendInterview

Бесплатное IT-образование в 2024 Отобрали для вас полезные телеграм-каналы, которые помогут освоить IT-направления Выбирайте нужное и подписывайтесь: — Frontend: t.me/+qWPopdiaxVMzZDgy — Backend: t.me/+X-zQb-NgzGNhMzRi — GitHub: t.me/+3BVAmDixuO9lYTFi — Книги айти: t.me/+IG2NAVECUXs4MGYy — Python: t.me/+vBSA5zgB_gA0OWRi — Java: t.me/+3BRKfZ09ewg0NDJi — C#: t.me/+O3pnFY4bpF5hNTEy — С/С++: t.me/+PGxPXpZZczQxODcy — Базы Данных & SQL: t.me/+530qWWydM8ExZjk6 — Golang: t.me/+FvTd7F-O-NNmNGMy — PHP: t.me/+jBvbaet0vpplNDQy — Моб. разработка: t.me/+Ikx5H4MrPihlOWZi — Разработка игр: t.me/+Z34knEvL8P9lZTAy — DevOps: t.me/+3wSgqmP5NOBhZGUy — Data Science: t.me/+-CuoNNa6P7VjOTRi — ИБ: t.me/+4jo8N5jtGDs1NTli — Тестирование: t.me/+MvFXlXbmmPFkM2Ey — Маркетинг: t.me/+lgiFPJTYp8M0ZjRi — Дизайн: t.me/+gmflvDFPc_c1YmIy Подписаться #реклама 16+ О рекламодателе

Всем привет! Хотите узнавать небанальное об интервью на английском? Получить оффер в валюте на удаленке или даже переехать? Тогда приглашаем вас, дорогие и уважаемые, в наш маленький канал! Мы очень стараемся постить всякие интересности регулярно, и, если поскроллить, то уже можно почитать бомбические советы по составлению резюме, байки про работу в айти и даже попрактиковаться в ответах на типичные вопросы собеседования. Будем очень рады вашей подписке, но еще больше - вашим вопросам и мнениям. Ваши Аня и Любовь из @acceleracio

Как можно оптимизировать перерисовки ? Оптимизация перерисовок (или "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

Find the unique string Есть массив строк. Все строки содержат одинаковые буквы, кроме одной. Попробуйте найти его! Пример:

findUniq([ 'Aa', 'aaa', 'aaaaa', 'BbBb', 'Aaaa', 'AaAaAa', 'a' ])  //  => 'BbBb'
findUniq([ 'abc', 'acb', 'bac', 'foo', 'bca', 'cab', 'cba' ])  //  => 'foo'

Строки могут содержать пробелы. Пробелы не имеют значения, имеют значение только символы, не являющиеся пробелами. Например, строка, содержащая только пробелы, аналогична пустой строке Гарантируется, что массив содержит более двух строк 👉 @frontendInterview

Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день. Присоединяйтесь: @FrontendPortal