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

Что такое адаптивная верстка ? Спросят с вероятностью 7% Адаптивная верстка — это метод создания веб-страниц, которые автоматически подстраиваются под различные размеры экранов и устройства, обеспечивая оптимальное отображение и удобство использования. Это означает, что один и тот же сайт будет хорошо выглядеть и функционировать как на настольных компьютерах с большими экранами, так и на планшетах и смартфонах с меньшими экранами. Основные техники и принципы адаптивной верстки включают: 1️⃣Медиа-запросы (Media Queries): CSS-инструмент, который позволяет применять разные стили в зависимости от характеристик устройства, таких как ширина и высота экрана, ориентация и разрешение.

   
     /* Стили по умолчанию для мобильных устройств /
    body {
        font-size: 16px;
    }

    / Стили для планшетов /
    @media (min-width: 768px) {
        body {
            font-size: 18px;
        }
    }

    / Стили для настольных компьютеров /
    @media (min-width: 1024px) {
        body {
            font-size: 20px;
        }
    }

2️⃣Гибкие макеты (Fluid Grids): Использование процентных значений для размеров элементов вместо фиксированных пикселей. Это позволяет элементам изменять размер в зависимости от размера экрана

        .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    .column {
        float: left;
        width: 50%;
    }

3️⃣Гибкие изображения (Flexible Images): Изображения, которые изменяют размер в зависимости от размеров родительского контейнера.

        img {
        max-width: 100%;
        height: auto;
    }

4️⃣ Использование фреймворков: популярные CSS-фреймворки, такие как Bootstrap и Foundation, предоставляют готовые решения для адаптивной верстки

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <div class="container">
        <div class="row">
            <div class="col-md-6">Контент 1</div>
            <div class="col-md-6">Контент 2</div>
        </div>
    </div>

5️⃣ Мобильный подход (Mobile-First): разработка сайта сначала для мобильных устройств, а затем добавление стилей для более крупных экранов.

        / Стили для мобильных устройств /
    body {
        font-size: 16px;
    }

    / Стили для более крупных экранов */
    @media (min-width: 768px) {
        body {
            font-size: 18px;
        }
    }

Размеченные объединения в TypeScript Вместо того чтобы сразу погружаться в теорию, давайте начнем с практического примера. Требования: 1. Необходимо создать функцию, которая возвращает одну из трех фигур (квадрат, прямоугольник или круг). 2. Функция должна принимать только соответствующие параметры. 3. Параметры для каждой фигуры разные, и они следующие: - круг: радиус ("radius"); - квадрат: размер ("size"); - прямоугольник: высота и ширина ("height & width"). Один из самых простых способов сделать это в TypeScript — создать тип следующим образом:

type CustomShapeProps = {
  kind: "square" | "rectangle" | "circle";
  size?: number;
  width?: number;
  height?: number;
  radius?: number;
};

ZUMA Легендарная игра, реализованная на HTML, SCSS и TypeScript.

🖥 Turndown — конвертер HTML в MD на JavaScript — npm install turndown Позволяет легко преобразовать HTML в Markdown

It's just CSS Эффект при наведении на картинку, выполненный на чистом CSS, без использования JavaScript.

🖥 OpenSaaS.sh — open-source SaaS-шаблон на TypeScript

curl -sSL https://get.wasp-lang.dev/installer.sh | sh
wasp new -t saas

OpenSaaS поможет создать готовые к продакшену SaaS-приложения; полностью open-source и имеет массу возможностей из коробки

🖥 Rotating border Граница сделана из псевдоэлементов, которые анимируются в CSS.

Как работает React? Спросят с вероятностью 7% React - это библиотека для создания пользовательских интерфейсов. Она позволяет разрабатывать сложные и интерактивные UI из множества изолированных компонентов. React основан на нескольких ключевых концепциях, которые обеспечивают его эффективность и гибкость. 1️⃣ Компонентный подход: Приложения в React состоят из компонентов, которые являются независимыми и могут быть использованы повторно. Каждый компонент имеет свое состояние и пропсы (параметры, передаваемые от родительского компонента). 2️⃣ JSX: React использует JSX - синтаксис, похожий на HTML, для описания структуры интерфейса. Это делает код компонентов более читаемым и упрощает процесс их создания.

      function App() {
     return <div>Привет, мир!</div>;
   }
   

3️⃣ Виртуальный DOM: React использует виртуальный DOM, что позволяет оптимизировать обновления интерфейса, применяя изменения к виртуальному DOM перед их применением к реальному DOM. Это повышает производительность, особенно при работе с большими объемами данных. 4️⃣ Однонаправленный поток данных: Данные в React течут строго от родителей к детям через пропсы, что упрощает отладку и понимание приложений. 5️⃣ Хуки: В React появились хуки, которые позволяют использовать состояние и другие возможности без написания классов. Например, хук useState позволяет добавить состояние к функциональному компоненту.

      import { useState } from 'react';

   function Counter() {
     const [count, setCount] = useState(0);

     return (
       <div>
         <p>Вы кликнули {count} раз</p>
         <button onClick={() => setCount(count + 1)}>
           Нажми на меня
         </button>
       </div>
     );
   }
   

React предлагает мощный набор инструментов для быстрой и эффективной разработки интерактивных пользовательских интерфейсов. Он помогает создавать веб-страницы, реагирующие на действия пользователя без перезагрузки страницы, делая взаимодействие с сайтом более плавным и приятным.

Для чего нужны миксины ? Спросят с вероятностью 3% Миксины (или миксины) представляют собой классы, которые предназначены для предоставления методов другим классам через множественное наследование. Они используются для "смешивания" функциональности в другие классы без использования стандартного наследования. Это позволяет повторно использовать код, улучшать модульность и избегать дублирования.

Пример:

class LogMixin:
    def log(self, message):
        print(f"[LOG]: {message}")

class SaveMixin:
    def save(self):
        print("Data saved")

class MyClass(LogMixin, SaveMixin):
    def do_something(self):
        self.log("Doing something")
        self.save()

# Использование
obj = MyClass()
obj.do_something()

В этом примере LogMixin и SaveMixin предоставляют дополнительные методы log и save, которые могут быть использованы в MyClass. Это позволяет MyClass использовать функциональность логирования и сохранения данных, не повторяя этот код. Миксины нужны для добавления функциональности к классам через множественное наследование, что позволяет повторно использовать код и избегать дублирования. Они также способствуют модульности и изоляции функциональности, делая код более легким в управлении.

🖥 Rotating border Граница сделана из псевдоэлементов, которые анимируются в CSS.

CesiumJS - это JavaScript библиотека для создания 3D-глобусов и карт мирового класса. Установить её можно с помощью команды npm install cesium –save. CesiumJS позволяет разрабатывать интерактивные веб-приложения для обмена динамическими геопространственными данными с максимальной производительностью, точностью, визуальным качеством и простотой использования. Разработчики из различных отраслей, таких как аэрокосмическая промышленность, умные города и беспилотники, используют CesiumJS. Библиотека основана на открытых форматах, что обеспечивает надежную совместимость и масштабирование для работы с огромными массивами данных. Она также поддерживает потоковую передачу данных в формате 3D Tiles и других стандартных форматах из Cesium ion или других источников, визуализацию и анализ на высокоточном глобусе WGS84, а также возможность делиться данными с пользователями ПК и смартфонов.