Вопрос на собеседовании по CSS: Что такое схлопывание отступов? | CSS | Собеседование

В этом видео рассмотрим важную концепцию CSS — схлопывание отступов. Если вы готовитесь к собеседованию на позицию разработчика, понимание этой темы может оказаться ключевым. Я постараюсь на примере объяснить, что такое схлопывание отступов и как его избежать.

https://www.youtube.com/watch?v=s4YTfgj4vOY

#frontend #css

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

Основные характеристики JavaScript:

1. Высокоуровневый: JavaScript обеспечивает абстракцию от аппаратных деталей, предоставляя удобный синтаксис и встроенные функции для работы с данными, манипуляций с DOM и сетевыми запросами.
2. Интерпретируемый: Исторически JavaScript выполнялся интерпретатором, который считывает, анализирует и выполняет код непосредственно во время его выполнения. Однако современные движки JavaScript, такие как V8 от Google, используют Just-In-Time (JIT) компиляцию, что позволяет ускорить выполнение кода.
3. Компилируемый во время выполнения (JIT): Современные JavaScript-движки компилируют код в машинный язык непосредственно перед его выполнением, что позволяет добиться высокой производительности при сохранении гибкости интерпретируемого языка.
4. Динамически типизированный: В JavaScript типы переменных определяются во время выполнения. Переменная может изменять свой тип в процессе работы программы, что обеспечивает гибкость, но может приводить к ошибкам времени выполнения.
5. Однопоточный: JavaScript выполняется в одном потоке, что означает выполнение одной операции в каждый момент времени. Это упрощает модель конкурентного выполнения, но требует использования асинхронных механизмов для обработки долгих операций, чтобы не блокировать основной поток.
6. Асинхронное выполнение: JavaScript поддерживает асинхронное программирование через механизмы колбэков, промисов и async/await, что позволяет эффективно обрабатывать операции ввода-вывода без блокировки основного потока.
7. Мультипарадигмальный: JavaScript поддерживает несколько парадигм программирования, включая императивное, объектно-ориентированное и функциональное программирование.
8. Событийно-ориентированный: JavaScript часто используется для создания событийно-ориентированных программ, где выполнение кода инициируется событиями, такими как клики мыши или сетевые запросы.
9. Встроенный в браузеры: JavaScript является неотъемлемой частью веб-браузеров, обеспечивая динамическое взаимодействие с веб-страницами. Все современные браузеры включают JavaScript-движки для выполнения кода.

#javascript #frontend

REBASE

Чтобы избежать трудоемкого слияния в будущем, многие разработчики периодически делают ребейзинг своей ветки.

Представим, что вы работали над фичей 3 недели. За это время другие разработчики 10 раз сделали слияние. Ваш код отличается на 10 коммитов. В таком случае слияние может стать довольно сложной задачей.

Периодически делайте ребейзинг своей ветки. Это позволит:

- Сохранить актуальную историю коммитов.
- Избежать конфликтов при слиянии.

Как сделать ребейзинг:

1. Перейдите на ветку develop.

git checkout develop

2. Обновите ее

git pull

3. Перейдите на свою ветку

git checkout my-branch

4. Сделайте ребейс

git rebase develop

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

Ребейзинг – это простой и эффективный способ избежать проблем при слиянии. Используйте его, чтобы ваша работа с Git была более продуктивной.

#git #rebase

Как браузер читает JSX?

Браузер не может напрямую прочитать и понять JSX, так как JSX - это расширение языка JavaScript, которое используется во фреймворке React для создания пользовательского интерфейса. JSX выглядит как комбинация JavaScript и HTML.

Чтобы браузер мог понять JSX, необходимо преобразовать его в обычный JavaScript. Этот процесс называется транспиляцией. Для этого обычно используются специальные инструменты или сборщики (например, Babel), которые преобразуют JSX в эквивалентный JavaScript код.

const element = <h1>Hello, World!</h1>;

const element = React.createElement('h1', null, 'Hello, World!');

В примере выше JSX трансформируется в вызов React.createElement, который создает элемент с тегом h1 и содержанием "Hello, World!".

После транспиляции JSX в JavaScript, браузер может вычитать и исполнять этот JavaScript код для отображения веб-страницы пользователю.

#frontend #react #jsx

Задача с собеседования

Интересная задача попалась на позицию Middle.

// Что выведет этот код?

function foo() {
  const x = 10;

  return {
    x: 20,
    bar: () => {
      console.log(this.x)
    },
    baz: function() {
      console.log(this.x)
    }
  };
}

const obj1 = foo();

obj1.bar();    // ...
obj1.baz();   // ...

const obj2 = foo.call({ x: 30 });
obj2.bar();    // ..
obj2.baz();   // ...

Какой ответ будет?