Фронтенд Гайд

Какие особенности в js ? Спросят с вероятностью 3% Это высокоуровневый, интерпретируемый язык программирования, который обладает рядом уникальных особенностей и возможностей. Рассмотрим основные из них: 1️⃣Динамическая типизация Является языком с динамической типизацией, что означает, что тип переменной определяется во время выполнения, а не во время компиляции. Тип переменной может изменяться в процессе выполнения программы.

let variable = 42; // Число
variable = 'Hello, world!'; // Строка

2️⃣Функции первого класса Являются объектами первого класса, что означает, что функции могут быть присвоены переменным, переданы как аргументы другим функциям и возвращены из других функций.

function greet(name) {
  return Hello, ${name};
}

const sayHello = greet;
console.log(sayHello('Alice')); // Hello, Alice

function executeFunction(fn, value) {
  return fn(value);
}

console.log(executeFunction(greet, 'Bob')); // Hello, Bob

3️⃣Замыкания (Closures) Это функции, которые имеют доступ к переменным из своей внешней функции даже после того, как внешняя функция завершила выполнение. Это позволяет создавать функции с привязанными к ним переменными из внешнего окружения.

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

4️⃣Прототипное наследование Использует прототипное наследование вместо классового. Каждый объект в JavaScript имеет скрытое свойство [[Prototype]], которое указывает на другой объект, используемый в качестве прототипа.

const animal = {
  speak: function() {
    console.log(${this.name} издает звук);
  }
};

const dog = Object.create(animal);
dog.name = 'Рекс';
dog.speak(); // Рекс издает звук

5️⃣Асинхронность и события Поддерживает асинхронное выполнение через коллбеки, промисы и async/await. Это позволяет обрабатывать события и операции ввода-вывода без блокировки основного потока выполнения. Использование коллбеков:

function fetchData(callback) {
  setTimeout(() => {
    callback('Данные получены');
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Данные получены (через 1 секунду)
});

Использование промисов:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные получены');
    }, 1000);
  });
}

fetchData().then(data => {
  console.log(data); // Данные получены (через 1 секунду)
});

Использование async/await:

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Данные получены');
    }, 1000);
  });
}

async function getData() {
  const data = await fetchData();
  console.log(data); // Данные получены (через 1 секунду)
}

getData();

6️⃣Интуитивно понятная работа с объектами Имеет мощные встроенные функции для работы с объектами, такие как деструктуризация, операторы расширения и методы объектов. Деструктуризация:

const person = {
  name: 'Alice',
  age: 30
};

const { name, age } = person;
console.log(name); // Alice
console.log(age); // 30

Операторы расширения:

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 3, c: 4 }

🌟 Animated Star Rating Каждая звезда - это радио кнопка, при нажатии на которую задействуются свои CSS-стили.

SCSS Washing machine Стиральная машинка на HTML и SCSS.

Changing background colour with CSS - Ползунок с изменением заднего фона сайта.

Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT. Опыт в программировании не нужен. Завтра запускаем бесплатный онлайн-интенсив по Frontend-разработке, где будем показывать, как разрабатывать сайты и веб-приложения. За 7 дней обучения ты: 1. Создашь полноценный веб-сайт на HTML и CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Узнаешь сколько можно зарабатывать и как работать; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в следующем году зарабатывать от 1000$ на вёрстке сайтов. 👉 Проскочить на интенсив бесплатно 🔥 С нас обучение, практика и помощь с выходом на фриланс.

Что такое merge и rebase, в чем отличие друг от друга ? Спросят с вероятностью 7% merge и rebase — это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев. Merge (слияние) Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния. 1️⃣Предположим, у вас есть две ветки: main и feature. 2️⃣В ветке feature вы сделали несколько коммитов. 3️⃣Вы хотите объединить изменения из feature в main.

git checkout main
git merge feature

В результате получается история, включающая коммит слияния:

A---B---C---F---G (main)
     \       /
      D---E (feature)

Где F и G — коммиты в ветке main, а D и E — коммиты в ветке feature. Коммит G — это коммит слияния, который объединяет изменения из feature в main. Rebase (перебазирование) Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов. 1️⃣Предположим, у вас есть две ветки: main и feature. 1️⃣В ветке feature вы сделали несколько коммитов. 3️⃣Вы хотите перенести изменения из feature на текущий конец main.

git checkout feature
git rebase main

В результате история переписывается, как если бы коммиты из feature были сделаны на основе самой свежей версии main:

A---B---C---F---G (main)
                 
D'---E' (feature)

Где D' и E' — это новые коммиты, созданные при перебазировании, основанные на последних изменениях из main. Основные отличия 1️⃣История коммитов: ✅Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток. ✅Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений. 2️⃣Коммиты слияния: ✅Merge: Создает новый коммит слияния, который объединяет изменения из двух веток. ✅Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую. 3️⃣Конфликты: ✅Merge: Конфликты решаются один раз при слиянии. ✅Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно. 4️⃣Применение: ✅Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе. ✅Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master. Когда использовать ✅Используйте merge, когда вы хотите сохранить всю историю разработки, включая все ветвления и слияния. Это полезно для командной работы, где важно видеть весь контекст изменений. ✅Используйте rebase, когда вы хотите поддерживать чистую и линейную историю. Это особенно полезно для интеграции изменений в основную ветку перед созданием pull request'ов, чтобы история коммитов была более понятной. Merge объединяет изменения из одной ветки в другую, создавая новый коммит слияния и сохраняя всю историю. Rebase переписывает историю, делая её линейной, перемещая коммиты из одной ветки на базу другой.

⚡️ Noisy Risograph Gradient Celestial Body - Генератор градиентов, выполненный с помощью SCSS и JavaScript

Курс графического дизайна с нуля. Бесплатное обучение! Выбери свое направление в дизайне: графический дизайн, веб-дизайн, UX/UI-дизайн. И изучи бесплатно основы дизайна с личным наставником! 3 работы в портфолио. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе