Как frontend-разработчику получить оффер в Bigtech?

Ты уже давно в профессии, но до сих пор в компании, которая тебя не ценит. Зарплата не растёт, задачи скучные.

Хочешь сменить работу, но технические собеседования всё сложнее, а на отклики на hh только отказы и тестовые?

При этом вокруг кто-то постоянно получает офферы в Яндекс или VK, Т-Банк. Хочется стабильности, интересных задач и наконец-то попасть в сильную команду...

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Bigtech и сопровождаю на испытательном сроке.

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

🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки.

Подписывайся и получай максимум пользы, а нас уже больше 2000 🤓: https://t.iss.one/+1QWf4a2w72JiYTUy


Реклама, ИП Галактионов Тихон Витальевич, инн: 771618975809, erid: 2W5zFJVsn3A

Стрелочные функции JS, быстро, просто и без проблем

Сегодня мы заберем важную тему → "Стрелочные функции JS"

Содержание:
1. Стрелочные функции: arguments, hoisting
2. Работа с контекстом
3. Методы присваивания контекста
4. Обработчик событий

👉 @frontendInterview

Разраб доказывает тестировщику, что всё итак работает

👉 @frontendInterview

​Для чего был создан react?

React — это библиотека JavaScript для построения пользовательских интерфейсов, разработанная Facebook. React был создан для решения ряда проблем, с которыми сталкивались разработчики веб-приложений, особенно в крупных и динамических проектах. Давайте рассмотрим ключевые цели и преимущества, которые мотивировали создание React:

1. Компонентный подход:

Проблема: Разработка крупных веб-приложений становится сложной из-за сложности управления состоянием и взаимосвязями между различными частями пользовательского интерфейса.

Решение: React использует компонентный подход, который разбивает интерфейс на небольшие, изолированные и переиспользуемые компоненты. Каждый компонент управляет своим состоянием и логикой, что упрощает разработку и поддержку кода.

2. Виртуальный DOM:

Проблема: Операции с реальным DOM медленные и неэффективные, особенно при частых обновлениях пользовательского интерфейса.

Решение: React внедряет концепцию виртуального DOM, который представляет собой легковесную копию реального DOM. React сначала обновляет виртуальный DOM, затем вычисляет разницу (diff) с реальным DOM и минимально обновляет реальный DOM, что значительно повышает производительность.

3. Однонаправленный поток данных:

Проблема: Двусторонняя привязка данных в крупных приложениях может привести к сложностям в отслеживании изменений и ошибок.

Решение: React использует однонаправленный поток данных, где данные передаются вниз по дереву компонентов через свойства (props), а события и изменения поднимаются вверх. Это делает управление состоянием и данными более предсказуемым и легким для понимания.

Компонентный подход:

// Определение простого компонента
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Использование компонента
function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

export default App;

Виртуальный DOM:

React автоматически обрабатывает обновления виртуального DOM, что позволяет разработчикам сосредоточиться на логике и интерфейсе, а не на оптимизации работы с DOM.

// Компонент, который обновляет состояние и интерфейс
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Однонаправленный поток данных:

// Компонент родитель
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 'Initial Value' };
  }

  handleChange = (newValue) => {
    this.setState({ value: newValue });
  };

  render() {
    return (
      <div>
        <ChildComponent value={this.state.value} onChange={this.handleChange} />
      </div>
    );
  }
}

// Компонент потомок
function ChildComponent(props) {
  return (
    <div>
      <input
        type="text"
        value={props.value}
        onChange={(e) => props.onChange(e.target.value)}
      />
    </div>
  );
}

export default ParentComponent;

👉 @frontendInterview

Программирование без дураков

Хотите научиться программировать "less wrong"? Тогда эта книга - для вас. Ведь программирование - это во многом коммуникация. Стиль программирования, именование, комментирование, работа с чужим кодом - зачастую соглашения складываются именно там, где строгая регламентация на уровне языка программирования отсутствует.

👉 @frontendInterview

Greatest common divisor

Найдите наибольший общий делитель двух целых положительных чисел. Целые числа могут быть большими, поэтому необходимо найти умное решение.

Исходные данные x и y всегда больше или равны 1, поэтому наибольший общий делитель всегда будет целым числом, которое также больше или равно 1.

👉 @frontendInterview

​Как создать и использовать CSS спрайт?

CSS-спрайт – это метод объединения нескольких изображений в один файл для оптимизации загрузки и отображения на веб-странице.

Зачем нужны спрайты?
Уменьшают количество HTTP-запросов → вместо 10 изображений браузер загружает 1 файл
Ускоряют загрузку сайта → меньше сетевой нагрузки
Кэшируются в браузере → реже загружаются заново

Создание CSS-спрайта
Допустим, у нас есть 3 иконки:
icon-home.png
icon-user.png
icon-settings.png
Мы объединяем их в один файл (sprite.png):

Использование спрайта с CSS
Теперь нам нужно показать нужную часть изображения с помощью background-position.

.sprite {
  background: url("sprite.png") no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
}

/* Позиции каждой иконки */
.icon-home { background-position: 0 0; }  /* Первая иконка */
.icon-user { background-position: -32px 0; }  /* Вторая иконка */
.icon-settings { background-position: -64px 0; }  /* Третья иконка */

👉 @frontendInterview

👉 @frontendInterview

Задаём цвет в зависимости от темы операционной системы пользователя

Функция light-dark() позволяет переключаться между двумя цветами в зависимости от выбранной у пользователя тёмной или светлой темы.

Пример

div {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

Если пользователь выбрал светлый режим, у элемента будет чёрный текст на белом фоне, если тёмный — белый текст на чёрном фоне.

Чтобы функция light-dark() заработала, нужно прописать свойство color-scheme со значением light dark. Обычно это делают в псевдоклассе :root. Если это свойство не прописать, то функция всегда будет возвращать только первое значение.

Внутри круглых скобок через запятую указываются два цвета. Цвет может быть задан в любом доступном формате. Обратите внимание: можно передать только два аргумента. При большем или меньшем количестве аргументов, а также при невалидных аргументах, свойство не применится.

👉 @frontendInterview

Проективные вопросы на собеседованиях: не дайте себя подловить

Вас спрашивали на интервью «Почему люди внезапно увольняются?» или «В каких случаях допустимо опаздывать на работу?»

Знайте, это – проективные вопросы. Замаскированная ловушка. Из-за неё вы расскажете о себе больше, чем хотите.

Хотя речь вроде о других, при ответе вы опираетесь на личный опыт. Отталкиваетесь от своих убеждений. На основании сказанного интервьюер делает вывод о ваших мотивах и поведенческих паттернах.

Мне кажется, что проективные вопросы – это «имба». Соискателю заглядывают в душу, а он и не замечает. Такие вопросы противоречат принципам открытости и взаимного уважения. И хотя они вредят карме компаний, их всё равно задают.

Мы с коллегами так не делаем. В статье делюсь мнением, как из-за таких вопросов не потерять оффер.

👉 @frontendInterview

Только 🤫

👉 @frontendInterview

Когда использовать рекурсию, а когда лучше использовать цикл?

В программировании под рекурсией чаще всего понимают функцию, которая вызывает саму себя.

При решении некоторых задач мы можем обнаружить, что решение можно разбить на несколько простых действий и более простой вариант той же задачи.

Когда использовать рекурсию
Сама по себе рекурсия — это всего лишь инструмент. Нет чётких правил, когда её надо использовать, а когда — нет. Есть лишь некоторые рекомендации.

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

Когда использовать цикл
- Если рекурсивную функцию сложно читать или отлаживать, можно превратить её в цикл. Код станет менее лаконичным, но сил на отладку будет уходить меньше.
- Если вам жизненно необходимо оптимизировать работу программы, рекурсию можно переписать на цикл. Это почти всегда работает быстрее.

Веб-дизайн для начинающих. HTML, CSS, jаvascript и веб-графика

Книга поможет освоить веб-дизайн, не имея опыта. На практических примерах показано, как создать простой сайт и постепенно его совершенствовать. Рассказано о создании веб-страниц, содержащих текст, ссылки, изображения, таблицы и формы. Описано применение CSS для создания и выбора цвета, фона, форматирования текста, макетирования страниц и выполнения простой анимации. Даны основы JS и подчеркнута его важность в веб-дизайне. Описано создание, оптимизация и сокращение времени загрузки веб-изображений.

👉 @frontendInterview

Two Sum

Создайте функцию, которая принимает массив чисел и целевое число. Найдите в массиве два числа, которые в сумме дадут целевое число.

Пример:

 twoSum([1, 2, 3], 4) // returns [0, 2] or [2, 0]

👉 @frontendInterview

​Зачем нужен https?

HTTPS (HyperText Transfer Protocol Secure) — это безопасная версия HTTP, которая шифрует данные между браузером и сервером. Он защищает пользователей и сайты от перехвата данных, атак и подделки информации.

Главные причины использовать HTTPS

Шифрование данных (Защита от перехвата)
Без HTTPS злоумышленники могут перехватить* данные, например, пароли или банковские карты.
В HTTP данные передаются открытым текстом (их легко украсть в открытых Wi-Fi).
В HTTPS данные зашифрованы с помощью SSL/TLS, и даже если их перехватят, их невозможно прочитать.

Защита от атак "Человек посередине" (MITM)
Без HTTPS злоумышленник может подменить содержимое сайта.
Опасные сценарии:
Хакер в Wi-Fi кафе встраивает вредоносный код в сайт.
Вредоносный провайдер заменяет рекламу или ворует куки.

Google даёт больше доверия к HTTPS-сайтам
Google понижает в поиске сайты без HTTPS, а Chrome помечает их как "Небезопасные".

Обязателен для онлайн-платежей и авторизации
Для ввода паролей, карт и личных данных HTTPS обязателен по закону (например, PCI DSS для платежей).
Если сайт работает без HTTPS, браузеры блокируют передачу банковских данных.

👉 @frontendInterview