Веб-страница

Разница между SPA и PWA

Мы часто сталкиваемся с терминами SPA (Single Page Application) и PWA (Progressive Web App). Давайте разберемся, что они означают и в чем их основные отличия.

SPA — это веб-приложение, которое загрузится однажды и будет динамически обновлять контент на странице без необходимости перезагрузки. Это значит, что после начальной загрузки сайта пользователю не нужно ожидать, пока загрузится новая страница. Все взаимодействия происходят на одном HTML-документе, что делает работу с приложением более плавной и быстрой. Примеры SPA: Gmail, Google Maps.

Для создания простого SPA можно использовать библиотеки или фреймворки, такие как React или Vue.js. Вот небольшая структура на React:

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
    return (
        <div>
            <h1>Привет, мир!</h1>
            <p>Это простое SPA приложение.</p>
        </div>
    );
}
ReactDOM.render(<App />, document.getElementById('root'));

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

Для создания простого PWA вам нужно добавить файл манифеста и service worker. Пример манифеста:

{
    "name": "Мое PWA приложение",
    "short_name": "PWA",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

Основные отличия:

1. SPA нацелено на улучшение пользовательского опыта за счет динамической загрузки данных, в то время как PWA — на создание полноценного приложения, доступного на разных устройствах и с функциональностью, как у нативных приложений.

2. SPA может быть частью PWA. PWA включает все возможности SPA и добавляет дополнительные функции, такие как работа в офлайн-режиме, установка на устройство и поддержка push-уведомлений.

3. SPA чаще всего использует JavaScript-библиотеки и фреймворки (React, Angular, Vue), тогда как PWA требует дополнительных технологий, таких как сервисные работники и манифесты.

#простымисловами #spa #pwa

Разворачиваем микрофронты на Next.js

Это не пошаговый гайд, но наглядная демонстрация удобства использования микрофронтенда в проекте, где требуется множество разных модулей. В данном случае речь о единой админ-панели, которая должна отображать конкретные модули в зависимости от того, какого отдела компании эта админка.

Посмотреть полезно всем — кто хочет понять, что за микрофронты такие, и кто хочет научиться работать с ними более эффективно. Материал по ссылке: https://habr.com/ru/articles/889202/

#nextjs #микрофронтенд

Появился новый инструмент для разработки кроссплатформенных приложений

Lynx от ByteDance уже сейчас используется в приложениях TikTok, а теперь его можно использовать и в своих проектах. При этом он поддерживает интеграцию с React, что делает разработку ещё удобнее.

Подробнее о возможностях можно почитать на сайте платформы: https://lynxjs.org

#инструменты

Вместо тысячи слов

Необычные часы с «кодовым» циферблатом, реализованные с помощью CSS и JavaScript

Посмотреть код проекта можно здесь: https://codepen.io/MarkBoots/pen/zYbjaoR

#codepen

Пишем простое расширение для браузера

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

#туториал

Microsoft ускорила TypeScript в 10 раз

В TypeScript радикальные изменения — Microsoft решила сменить язык компилятора, перейдя на Go. Ещё не все работы закончены, но уже сейчас время компиляции сократилось в среднем в 10 раз!

Пока что TS будет работать на JavaScript. Полный переход состоится на версии 7.0, когда будут решены все вопросы с совместимостью версий. Но первую нативную версию обещают уже в середине 2025 года.

Что думаете? Стоит оно того?

#новости #typescript

Microsoft ускорила TypeScript в 10 раз

В TypeScript радикальные изменения — Microsoft решила сменить язык компилятора, перейдя на Go. Ещё не все работы закончены, но уже сейчас время компиляции сократилось в среднем в 10 раз!

Пока что TS будет работать на JavaScript. Полный переход состоится на версии 7.0, когда будут решены все вопросы с совместимостью версий. Но первую нативную версию обещают уже в середине 2025 года.

Что думаете? Стоит оно того?

#новости #typescript

Как создать мини-приложение в Telegram

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

Вы сможете создать простой кликер с таблицей лидеров. В основе будет React и Nest.js. Подробности по ссылке.

#telegram #бэкенд #фронтенд #react #nestjs

Разбираемся в разнице между Media Queries и Container Queries в CSS

Когда речь заходит о CSS, многие из нас знакомы с Media Queries. Это инструмент, который помогает адаптировать стиль вашего сайта в зависимости от размеров экрана. Но также есть и другой игрок — Container Queries. Давайте разберемся, в чем между ними разница и как использовать каждый из них.

Media Queries позволяют изменять стили в зависимости от характеристик устройства, на котором отображается ваш сайт, особенно от ширины окна браузера. Например, если вы хотите, чтобы ваш текст выглядел иначе на мобильном устройстве по сравнению с десктопом, вы можете использовать следующую конструкцию:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Этот код меняет цвет фона страницы на светло-голубой, если ширина экрана меньше 600 пикселей. Media Queries отлично подходят для общего адаптивного дизайна, где важен размер экрана устройства.

С другой стороны, Container Queries ориентированы не на размеры экрана, а на размеры контейнера, в котором находится элемент. Это может быть особенно полезным, когда вы проектируете компоненты, которые могут использоваться в разных местах и на разных экранах.

Предположим, вы хотите изменить стиль элемента, когда ширина его контейнера меньше заданного значения. Пример был бы таким:

.container {
  container-type: inline-size;
}
@container (max-width: 400px) {
  .my-element {
    color: red;
  }
}

В этом примере .my-element станет красным только если его родительский .container будет шире 400 пикселей, независимо от размеров экрана устройства. Это открывает огромные возможности для создания адаптивных компонентов.

Простыми словами, Media Queries реагируют на ширину экрана, а Container Queries — на ширину родительского контейнера. Это делает Container Queries более гибкими для разработки компонентов, которые могут изменяться в зависимости от контекста, в котором они используются.

#простымисловами #css