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

👉 @frontendInterview

Готовишься к собеседованию? Разбираем для тебя самые актуальные вопросы для подготовки Выбирай направление: 👩‍💻 Frontend 🖥 Backend 👩‍💻 JS 👩‍💻 Python 👩‍💻 Go 👩‍💻 Java 👩‍💻 C/C++ 👩‍💻 C# 👩‍💻 PHP 👩‍💻 QA 📊 SQL 👩‍💻 Git

​Зачем нужен ref в React? ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React. Основные случаи использования ref: - Доступ к DOM-элементам: - Использование в сторонних библиотеках: - Сохранение состояния вне дерева компонентов: Примеры использования ref: Установка фокуса на элемент:

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // Установить фокус на текстовое поле
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Установить фокус</button>
    </div>
  );
}

export default TextInputWithFocusButton;

Измерение элемента:

import React, { useRef, useEffect, useState } from 'react';

function MeasureDiv() {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (divRef.current) {
      const { width, height } = divRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Измеряемый элемент
      </div>
      <p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
    </div>
  );
}

export default MeasureDiv;

Доступ к методам компонента:

import React, { Component } from 'react';

class CustomComponent extends Component {
  customMethod() {
    console.log('Метод компонента вызван');
  }

  render() {
    return <div>Custom Component</div>;
  }
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.customComponentRef = React.createRef();
  }

  handleClick = () => {
    this.customComponentRef.current.customMethod();
  };

  render() {
    return (
      <div>
        <CustomComponent ref={this.customComponentRef} />
        <button onClick={this.handleClick}>Вызвать метод компонента</button>
      </div>
    );
  }
}

export default ParentComponent;

Важно помнить - Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо. - Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам. - Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом. 👉 @frontendInterview

Count consonants Напишите функцию, которая принимает строку англоязычного текста и возвращает количество согласных в строке. Согласные - это все буквы, используемые для написания английского языка, за исключением гласных a, e, i, o, u. Пример:

consonantCount('') => 0
consonantCount('aaaaa') => 0
consonantCount('XaeiouX') => 2

👉 @frontendInterview

Ум программиста. Как понять и осмыслить любой код Книга освещает практические основы когнитивистики для программистов. Основные темы: осмысление и развитие чужого и собственного кода, изучение новых языков программирования, мнемонические приемы для программистов, поддержка кода в читаемом состоянии. Объяснено, как снижать когнитивную нагрузку при работе программиста, как делать код логичным и понятным для себя и коллег. 👉 @frontendInterview

​Зачем нужен Webpack? Webpack — это мощный инструмент сборки модулей для современных JavaScript-приложений. Он используется для упаковки и оптимизации всех ресурсов вашего приложения, таких как JavaScript, CSS, изображения и другие файлы, в один или несколько файлов, которые можно эффективно загрузить в браузер. Основные функции 1. Сборка модулей (Module Bundling) Webpack анализирует ваше приложение, начиная с одного или нескольких входных файлов (entry points), и строит граф зависимостей всех модулей, используемых в вашем приложении. Он объединяет эти модули в один или несколько выходных файлов (bundles), которые можно загрузить в браузер. 2. Обработка ресурсов (Asset Management) Webpack может обрабатывать различные типы файлов, такие как JavaScript, CSS, изображения и шрифты, используя загрузчики (loaders) и плагины (plugins). Загрузчики позволяют вам преобразовывать файлы перед включением их в сборку. Например, загрузка CSS, преобразование ES6+ кода в ES5 с использованием Babel, оптимизация изображений и т.д. 3. Оптимизация производительности (Performance Optimization) Webpack предлагает множество встроенных функций для оптимизации выходных файлов, включая минификацию JavaScript и CSS, разделение кода (code splitting), удаление неиспользуемого кода (tree shaking) и др. 4. Горячая перезагрузка (Hot Module Replacement) Эта функция позволяет обновлять модули приложения в реальном времени без перезагрузки всей страницы. Это значительно ускоряет процесс разработки и тестирования. Основные компоненты 1. Входные точки (Entry Points) Входные точки указывают Webpack, с какого файла или файлов начать построение графа зависимостей.

// webpack.config.js
module.exports = {
  entry: './src/index.js',
};

2. Выходные точки (Output) Выходные точки определяют, где Webpack должен сохранить сгенерированные файлы и как их называть.

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

3. Загрузчики (Loaders) Загрузчики используются для обработки различных типов файлов. Они позволяют вам преобразовывать файлы перед их включением в сборку.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

👉 @frontendInterview

Дешёвую рабочую силу теряет 👉 @frontendInterview

Мебель Lioste – сочетание эргономики и эстетики Мебель Lioste сохраняет традиции итальянских мастеров и дизайнеров. Что это значит для нас: - элегантный декор - продуманность и удобство - сочетание комфорта, функциональности - филигранное сочетание рациональности и эмоций Да, весь этот микс представлен в наших коллекциях в Три Кита и Гранд. Есть шикарные столы и стулья, диваны, комоды и тумбы. Будем рады поделиться с вами нотками солнечной Сицилии в зимней Москве! Перейти на сайт #реклама lioste.ru О рекламодателе

Курс "Дизайн карточек для WB и Ozon". Бесплатно и с нуля Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰 Научись ей бесплатно! - Бесплатный доступ - Разбор ДЗ от наставника - Мощные кейсы в портфолио Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

Почему джуны путаются в асинхронном коде (и как научиться с ним работать) Асинхронная модель — одна из самых сложных и одновременно важных тем в современном программировании, особенно в веб‑разработке. Если посмотреть на боль новичков (да и не только новичков), то одна из самых частых жалоб — непонимание, что там происходит под капотом, почему код скачет и не дает предсказуемых результатов, или почему программа не ждет выполнения функции. В этой статье разберем, в чем корень путаницы, какие есть ключевые концепции асинхронности, и как к ним прикипеть, чтобы перестать путаться и научиться эффективно писать, отлаживать и поддерживать асинхронный код. 👉 @frontendInterview

Офисы от 380 000 ₽/м² с НДС в БЦ TALLER. м.Павелецкая TALLER - Новая высота вашего бизнеса! Офисы А класса. Павелецкий деловой район. 1 км до Садового кольца. Высокая стадия готовности. Помещения под любой тип бизнеса площадью от 64 до 1840 м² в шаговой доступности от набережной. Рассрочка 0% от застройщика. Продажа по ДДУ. От 380 000 ₽/м². Выгода до 25% на офисы площадью от 300 м²! Перейти на сайт Проектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО "Специализированный застройщик "ТАЛЛЕР" #реклама tr-8.ru О рекламодателе

Как сделать градиентную границу у кнопки? В этой статье рассматривается CSS свойство background-clip и его значение border-area, при помощи которого можно создавать уникальные границы блоков. 👉 @frontendInterview

🌐 Единая точка входа в IT! Хочешь освоить полный стек технологий, подготовиться к реальным собеседованиям и получить работу мечты? Мы собрали всё необходимое для твоего роста и развития в одном месте! Выбирай направление и становись частью IT сообщества: 👩‍💻 React Frontend 👩‍💻 Ruby Backend 👩‍💻 iOS Mobile 👩‍💻 Android Mobile 🖥 PHP Backend 👩‍💻 Node.js Backend 👩‍💻 Rust Backend 👩‍💻 Java Backend 👣 Golang Backend 👩‍💻 Python Backend 👩‍💻 QA & Testing 🖥 Общее IT 👨‍💻 Вакансии IT 📅 Митапы IT А также у нас есть собственная платформа для подготовки к собеседованиям! 🔹 1000+ вопросов по всем направлениям 🔹 Удобные тренажеры для отработки навыков 🔹 Система фильтров по технологиям и уровню сложности 🔹 Персональная статистика прогресса и история подготовки YeaHub помогает расти и достигать целей. ⚡

👉 @frontendInterview

Т-Банк открыл набор на новый поток стажировок 💻 Есть много направлений: разработка (на восьми языках программирования!), ML, SRE, QA, аналитика, менеджмент, редактура, маркетинг и юриспруденция. Ждут студентов и начинающих специалистов, готовых посвящать работе от 20 часов в неделю. Стажировки оплачиваются, а по результатам нескольких месяцев вас могут пригласить на интервью в штат. Вы будете участвовать в реальных проектах и разрабатывать решения с нуля с полным погружением в бизнес-процессы. Стажеры отлично справляются с тем, чтобы совмещать работу и учебу: менторы и руководители относятся к этому с пониманием. Выберите направление, отправьте заявку и решите экзамены до 30 января

​Почему лучше не встраивать строки непосредственно в DOM? Передача строки непосредственно в 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