7 дней бесплатного обучения разработке сайтов, которые не сделают из новичка опытного прогера и не устроят на работу…

Зато покажут, как, даже не имея опыта в программировании:

1. Сверстать качественный веб-сайт на HTML + CSS;
2. Оживить страницу с помощью JavaScript;
3. Понять фронтенд-фреймворк Angular;
4. Подключить Backend и загрузить сайт на хостинг.

А главное, там можно пообщаться с экспертами и получить совет по доработке своего проекта.

Оцени, как получилось у других новичков:
🔥 Алексей заработал $150 за сайт. Взял за основу домашку с курса.
🔥 Андрею заплатили 30 000₽ за сайт для свадебного агентства.
🔥 Оксана получила первый заказ на 10 000₽ и крутой опыт общения с клиентом.

👉 Успей ухватить курс бесплатно

⏳ 21 июня закроется регистрация на текущий поток.

👉 @frontendInterview

Загрузка файла с прогресс-баром

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

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

👉 @frontendInterview

Юнит-тестирование в Angular: лучшие практики и инструменты

В этой статье я хочу поделиться опытом, который накопил за годы работы с юнит-тестами в Angular. Вот о чём пойдёт речь:

- Почему важно писать юнит-тесты
- Зачем мокать зависимости и каковы плюсы и минусы
- Что такое SIFERS и почему это важно
- Что такое Angular Testing Library (ATL)
- Как тестировать с помощью SIFERS
- Как получать элементы DOM и генерировать события
- Что такое jest-auto-spies и observer-spy

👉 @frontendInterview

Если вы вдруг забыли как выглядит фуллстэк

👉 @frontendInterview

​В чем разница == и === ?

Операторы == (равно) и === (строго равно) используются для сравнения значений, но работают по-разному, что важно понимать для написания надёжного и предсказуемого кода.

Оператор == (равно)
Сравнивает значения двух переменных, но перед сравнением производит приведение типов, если переменные относятся к разным типам. Это означает, что если вы сравниваете число с строкой, JavaScript попытается преобразовать строку в число, а затем сравнить эти два значения. Этот процесс может привести к неинтуитивным результатам.

Примеры:

'2' == 2 // true, так как строка '2' преобразуется в число 2 перед сравнением
0 == false // true, так как 0 и false считаются эквивалентными
null == undefined // true, специальное правило языка

Оператор ===(строго равно)
В отличие от ==, он сравнивает и значения, и типы без приведения типов. Если типы различаются, оператор немедленно возвращает false, не пытаясь преобразовать один тип в другой. Это делает сравнение более строгим и предсказуемым.

Примеры:

'2' === 2 // false, так как типы различаются
0 === false // false, разные типы: число и булево значение
null === undefined // false, разные типы

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

👉 @frontendInterview

State Management with React Query: Improve developer and user experience by mastering server state in React

Начиная с краткой истории управления состоянием в экосистеме React, вы узнаете, что послужило причиной перехода от глобального состояния к состоянию клиента и сервера и, таким образом, поймете необходимость создания React Query. По мере продвижения по главам вы увидите, как React Query позволяет выполнять задачи, связанные с состоянием сервера, такие как выборка, кэширование, обновление и синхронизация данных с сервером. Но это еще не все: освоив React Query, вы сможете применить эти знания для работы с состоянием сервера в серверных фреймворках рендеринга. Вы также будете работать с паттернами для тестирования вашего кода, используя библиотеку тестирования и Mock Service Worker.

👉 @frontendInterview

Sort Numbers

Доработайте решение так, чтобы оно сортировало переданный массив чисел. Если функция передала пустой массив или значение null/nil, то она должна вернуть пустой массив.

Например:

solution([1, 2, 10, 50, 5]); // should return [1,2,5,10,50]
solution(null); // should return []

👉 @frontendInterview

Зачем нужен React Context?

React Context (React.createContext) предоставляет способ передачи данных через дерево компонентов без необходимости явно прокидывать пропсы на каждом уровне. Она полезна для управления состоянием, которое должно быть доступно во многих частях приложения, не пропуская его через каждый уровень компонентов.

Основные случаи использования React Context:

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

1. Темизация:
Context позволяет легко управлять темами (например, светлая/темная тема) и применять их к разным компонентам без необходимости передавать тему через пропсы.

2. Аутентификация:
Context может быть использован для хранения и передачи информации о текущем пользователе и его аутентификационном статусе.

3. Настройки локализации:
Context позволяет управлять и передавать текущие языковые настройки, обеспечивая локализацию и интернационализацию приложения.

Примеры использования React Context:

Создание контекста:

import React from 'react';

// Создание контекста с дефолтным значением
const ThemeContext = React.createContext('light');

Использование Provider для предоставления значения контекста:

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme}>Themed Button</button>}
    </ThemeContext.Consumer>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Преимущества использования React Context:

1. Упрощает управление состоянием:
Context позволяет избегать "prop drilling" — необходимости передавать пропсы через множество уровней компонентов.

2. Повышает читаемость и поддержку кода:
Централизованное управление состоянием и данными улучшает читаемость и упрощает поддержку кода.

Когда не следует использовать React Context:

1. Избыточное использование:
Контекст не следует использовать для данных, которые изменяются часто или предназначены только для узкой области компонента. Частые изменения данных в контексте могут привести к избыточному рендерингу компонентов.

2. Сложные состояния:
Для управления сложными состояниями и побочными эффектами лучше использовать специализированные библиотеки, такие как Redux или MobX.

👉 @frontendInterview

От кнопки до продакшена: как мы делаем Telegram Mini Apps

Telegram Mini Apps — это мощный инструмент, который позволяет создавать интерактивные веб-приложения, работающие прямо внутри мессенджера. Они идеально подходят для игр, маркетплейсов, сервисов бронирования и многого другого.

В этом туториале мы разберем процесс создания Mini App:
- настроим проект
- создадим фронтенд на React с поддержкой Telegram SDK
- реализуем бэкенд на Python (Django)
- свяжем все компоненты и развернем приложение.

👉 @frontendInterview

Стрелочные функции 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