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

Размеченные объединения в 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, а также возможность делиться данными с пользователями ПК и смартфонов.

⚡Хочешь разработать решение технологического кейса для внедрения в работу НКО?  Тогда регистрируйся на Smart Social: Хакатон! Smart Social: Хакатон – это командное соревнование для программистов, дизайнеров, менеджеров, аналитиков и других IT-специалистов, которые в сжатые сроки решают технологическую задачу. 👨‍💻Кейсы: - Приложение для туристических маршрутов - Сервис сбора информации для профилактики социально значимых заболеваний - Онлайн-игра для повышения информированности населения о профилактике ВИЧ - Видеоигра для посетителей музейного пространства 📆Даты хакатона: C 10 по 18 Июня 2024 г. 📍Формат: Гибридный - финальная питч-сессия пройдёт в Москве, командам из регионов доступно подключение онлайн.  🔥Дедлайн регистрации: 6 Июня, 23:59 (МСК) Не нашел для себя задачу? Смотри еще кейсы по ссылке: https://tglink.io/a5eed50f4e8a  🚀Сделай Добро – помоги НКО!

📚 Book reviews - Верстка реализована при помощи CSS Grid. Анимации созданы библиотекой gsap.