От кнопки до продакшена: как мы делаем 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

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

Хотите научиться программировать "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