Веб-разработка *

Почему PWA лучше нативных приложений?

Прогрессивные веб-приложения полюбили крупные мировые бренды: маркетплейсы (AliExpress), крупные сетевые компании (Starbucks). А в России к ним присмотрелись банки, когда столкнулись с ограничениями сторов. Неограниченный доступ клиентов к услугам стал мощным преимуществом веба.

А какие еще плюсы у PWA для бизнеса и пользователей?

Они дешевле. Стоимость разработки прогрессивного веб-приложения примерно на 30% меньше нативной разработки. Над ним работает одна команда, а не две.

Не требуют принудительного обновления. Все обновления становятся мгновенно доступны пользователю. Бизнес не ждет апрува в сторах, а потом не тратит ресурсы, чтобы уговорить клиента обновить приложение.

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

Не забивают память смартфона. PWA занимает на устройстве на порядок меньше места, чем нативное приложение. Сравните: PWA обычно “весят” единицы мегабайт, а мобильные приложения – десятки или даже сотни мегабайт.

Согласны, у PWA есть не только плюсы.

Большая статья обо всех нюансах PWA vs Native от СТО Clevertec уже готова: PWA vs Native: где приложения для iOS и Android больше никогда не пригодятся

Вышел Go 1.23!

Привет, Хабр!

В этом посте я напишу все основные изменения в новой версии Go:

1. Range-over func

   Эксперимент с range-over func теперь основательно является частью Go

   Подробнее про range-over func читать здесь: https://go.dev/wiki/RangefuncExperiment

2. Телеметрия

   Добавили Go Telemetry для отслеживания работы Go Toolchain. Сами разработчики Golang советуют включить эту опцию, так как она еженедельно будет анонимно отсылать информацию на https://telemetry.go.dev/ для улучшения работы Toolchain

   Подробнее про команду "go telemetry" читать здесь: https://pkg.go.dev/cmd/go#hdr-Manage_telemetry_data_and_settings

3. Таймер

   Изменения также коснулись и "time.Timer" и "time.Ticker"

   Во-первых - "Тикеры" и "Таймеры", не упоминающиеся программой - становятся допустимыми для сборки мусора, даже если не был вызван метод "Stop"

   Во-вторых - теперь каналы "Таймера" и "Тикера" не буферированы. Это объясняется тем, что для вызова методов Reset или Stop не будет устаревших подготовленных значений

4. Unique

   Добавлен новый пакет "unique": https://pkg.go.dev/unique

5. Iter

   Добавлен новый пакет "iter": https://pkg.go.dev/iter

6. Slices

   В пакет "slices" добавили несколько функций, которые работают с итераторами: https://go.dev/doc/go1.23#iterators

7. Maps

   В пакет "maps" тоже добавили несколько функций для работы с итераторами: https://go.dev/doc/go1.23#iterators

8. Structs

   Добавлен новый пакет "structs", который предоставляет новые типы для struct-полей: https://pkg.go.dev/structs

Это и еще многое читайте на официальном сайте Go!

Как создать веб-приложение на базе VK Mini Apps 📱

Написали пошаговую инструкцию, в которой:

• показываем, как создать интерфейс на основе готовых адаптивных VKUI‑компонентов;

• затрагиваем все основные библиотеки социальной сети;

• устанавливаем сертификаты и подключаем проксирующий сервер;

• разворачиваем в облаке и загружаем на платформу VK;

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

Особые навыки администрирования не понадобятся. Берем небольшие вычислительные мощности (1 CPU с 512 МБ RAM) и простой Docker-файл.

Начать изучение →

Go: маршрутизация без лишних пакетов

Привет, Хабр!

Недавно я открыл для себя “net/http” - роутер, который изначально есть в Go. В этом посте я опишу его удобство и, возможно, Вы - как и я, начнете его использовать, пусть он и не такой быстрый, как маршрутизаторы, основанные на fasthttp.

1. Не надо подключать сторонние пакеты

Достаточно только написать строку import “net/http”. Не надо подключать сторонние пакеты и тратить время на написание команд в консоли

2. Отличные возможности

В нем есть почти все то, что есть современных маршрутизаторах по типу Chi или GoFiber. Это очень удобно

3. Возможность расширения

Вы сами пишете многие функции. Значит, что не ограничены возможностями роутера

4. Контроль

Многое придётся делать самому ⇒ Вы будете знать, почему и как все происходит

Многое придётся делать своими руками, а в таком случае будете знать, почему и как все работает

Но, конечно, есть минусы:

1. Middleware

Придется писать все middleware собственными руками

2. Скорость

Он не такой быстрый, как роутеры, написанные с использованием fasthttp

3. Ошибки

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

Напишите в комментариях каким роутером пользуетесь Вы и почему именно им!

В сети вышло видео FastHTML за 100 секунд.

FastHTML — это новый веб-фреймворк Python, который позволяет легко создавать интерактивные веб-приложения без необходимости изучать фреймворк JavaScript, такой как React или Angular. Проект использует HTMX под капотом для включения динамических обновлений контента без полной перезагрузки страницы.

Скрипт для отключения расширений, не входящих в ядро Joomla 3 (для обновления на Joomla 5+)

Перед обновлением сайта с Joomla 3 на Joomla 4 и выше нужно обновить все старые расширения до последних (для Joomla 3) версий. Затем отключить их, особенно системные плагины. Это делается для того, чтобы ничто не мешало процессу обновления. Для того, чтобы сделать это быстро - накидал скрипт, который отключает нестандартные расширения в Joomla 3.

➡️ Получить код скрипта (GitHub gist)

Файл disable_non_joomla3_extensions.php нужно положить в папку administrator вашего сайта и перейти по нему в браузере - yoursite.ru/administrator/disable_non_joomla3_extensions.php. Если всё успешно отключилось - выйдет сообщение.

XXX extensions that are not included in the Joomla 3 core have been detected and disabled. Make sure that they are disabled in the Site Admin Panel: Extensions - Extension Manager - Management.

Проверяем работу в менеджере расширений и после этого обновляем Joomla до Joomla 4 с помощью пакета обновлений Joomla 4.0.0. Обновляем Joomla 4 находясь на PHP 7.4 до конца. Меняем базу данных на MySQL 8+ (импорт-экспорт базы), поднимаем PHP до 8.1.

⚠️ Всё это делаем находясь ещё на Joomla 4. Обновиться нужно минимум до Joomla 4.4.0. Только после этого можно обновляться на Joomla 5 пакетом обновления 5.0.0. Затем обновляем все расширения и постепенно включаем их.

Amvera Cloud представила работу с несколькими ветками Git, бэкапы PostgreSQL и управление портами. Обзор релиза

С августа 2024 в Amvera стал доступен новый функционал.

К проектам можно привязать произвольные ветки репозитория и развернуть staging и prod окружения, используя один репозиторий.

Что это даёт 

• возможность командной работы.

• возможность создать для одного репозитория staging и prod проекты. 

Как это работает

• Вы создаёте нужное количество проектов со своими тарифами и переменными. Как пример - два проекта для стейджинга и прода вашего бота, где для стейджинга используется минимальный тариф, а для продакшн версии тариф с запасом;

• Привязываете к каждому проекту ваш GitLab/GitHub/Bitbucket;

• Выбираете ту ветку Git-репозитория, которая является основной для проекта;

• Делаете git push и ваш проект развернут.

  Управлять портами и TLS-сертификатами проектов

  Ранее SSL-сертификаты выписывались автоматически, теперь их можно отключить. Как и организовать работу приложения с несколькими открытыми портами.

  Подключать автоматические планы создания бэкапов кластеров PostgreSQL.

Amvera — облако, где вы можете развернуть и обновлять приложение через команду git push amvera master. Без настройки виртуальных машин, SSL и установки зависимостей.

Совет по Joomla: как получать данные из суперглобальных массивов $_POST, $_GET и других?

На основе данных из $_GET, $_POST порой строится логика работы кода начиная от шаблона Joomla и кончая модулями и плагинами. Для работы с этими данными используется объект Input, который мы получаем из Приложения Joomla.

Приведу пример, часто использующийся при разработке шаблонов Joomla

<?php
/** @var \Joomla\CMS\Application\CMSApplication $app */
$app   = Factory::getApplication();
/** @var \Joomla\Input\Input $input */
$input = $app->getInput();

// Имя параметра и его значение по умолчанию
$option   = $input->get('option','');
$view     = $input->get('view', 'category');
$layout   = $input->getCmd('layout', 'edit');
$task     = $input->getString('task', '');
$itemid   = $input->getInt('Itemid', '');

В методе $input->get() 2-й аргумент - это значение по умолчанию на случай, если данных не обнаружено. 3-й аргумент - параметры фильтрации данных - будьте с ним внимательны. Например, вы хотите получить данные, отправленные на ендпоинт в виде JSON.stringify.

<?php
/** @var \Joomla\Input\Input $input */
$input->json->get('title', '', 'RAW')
// ИЛИ
$data = $input->json->getArray();

Если вы уверены, что данные должны быть именно в $_POST и нигде более, то получайте их именно оттуда.

<?php
/** @var \Joomla\Input\Input $input */
$title = $input->post->get('title', '', 'RAW');

Подробнее в файле libraries/vendor/joomla/input/src/Input.php.

Работа с данными в JavaScript — в пятой серии открытого курса по JS

Это новый курс от инженеров AvitoTech — вместе с фронтендером Василием Новиковым разбираемся в базовых технологиях веб-разработки в JavaScript.

В этой серии изучаем проблемные числа, разбираемся с мантиссой, экспонентой и сдвигом, пытаемся понять арифметику стандарта IEEE 754. Знаете, почему 0,1 и 0,2 в сумме не дают 0,3? Смотрите, и всё поймёте!

А если знаете — всё равно смотрите, вспоминать базу всегда полезно!

Список устаревших классов ядра Joomla 1.6-3.10 и их современные аналоги в ядре Joomla 5.x

Разработчикам при обновлении расширений на архитектуру Joomla 4 / Joomla 5 нередко не сразу удаётся найти аналоги устаревших методов ядра. Особенно, если под рукой нет современной среды разработки (IDE), например PHP Storm, который подсказывает нужные методы ядра Joomla. Без него, конечно, разработка для Joomla становится непростым делом. В этой статье вы найдете табличку соответствия старых и новых названий PHP классов ядра Joomla и её расширений для того, чтобы быстрее и легче было обновить свои расширения. Эти классы пока что можно использовать в случае, если включён плагин обратной совместимости Joomla 4 / Joomla 5. Но в Joomla 6 или последующих версиях он может быть удалён.

Подробнее: Список устаревших классов ядра Joomla 1.6-3.10 и их современные аналоги в ядре Joomla 5.x.

Омар Шехата поделился одним из своих самых популярных проектов. Это крошечное веб-приложение JPEG Viewer для демонстрации алгоритмов, которые работают в формате сжатия JPEG.

Страница демонстрирует, как изображение разбивается на блоки 8×8 пикселей, каждый из которых затем подвергается алгоритму дискретного косинусного преобразования. Упрощённо можно сказать, что каждый из блоков математически преобразуется из двумерного изображения в сигнал, а затем представляется как сумма синусоид. Интересно в инструменте Омара то, что он допускает ручное редактирование преобразования каждого из блоков 8×8 пикселей.

Также Омар рекомендует свою статью про алгоритмы сжатия JPEG, в которой он применил схожие инструменты.

Представлен открытый проект Hyperscript. Это гибкий скрипт для обработки сложных конфигураций и запросов. Проект поддерживает различные методы HTTP, включая GET, POST, PUT и DELETE, и предоставляет обширные возможности для проверки ответов на соответствие указанным условиям.

Hyperscript поддерживает нескольких методов HTTP, включая опции простой настройки и тестирование запросов GET, POST, PUT и DELETE.

В Hyperscript есть редим гибкой проверки и проверки ответов на основе кодов состояния, типов содержимого и определённого содержимого.

Проект поддерживает настраиваемые условия, включая проверку наличия определённых значений в теле ответа или нахождения числовых полей в указанных диапазонах. Также в Hyperscript есть подробная отчётность и получение подробных сообщений об успешном и неудачном выполнении с дополнительным подробным выводом.

Проект написан на языке Python и опубликован под лицензией MIT.

Совет по Joomla: метод HTMLHelper::image() для рендера изображений

В API Joomla есть довольно богатый инструмент - класс HTMLHelper. С его помощью можно выводить различные HTML-элементы с нужными параметрами: модальные окна, аккордеоны, табы, изображения и т.д.

Наглядности и чистоты кода ради стоит использовать этот метод, дабы не делать бесконечную конкатенацию HTML с PHP кодом и не потерять глаза в поисках утерянной кавычки.

Самый простой способ рендера изображений - с 2-мя аргументами:

• $img - путь к изображению

• $alt - текст для атрибута alt изображения 3-й необязательный параметр - массив или строка с атрибутами изображения: class, title, различные data-атрибуты, onclick, loading и т.д. Я предпочитаю удобно и наглядно собрать атрибуты в массив, использовать условия в PHP, а не HTML коде.

<?php
use Joomla\CMS\HTML\HTMLHelper;

$img_src = 'images/banner.webp';
$img_attribs = [
    'loading' => 'lazy',
    'class'=>'img-fluid',
    'data-custom-attr'=>'your-custom-data-attr-value',
    'title'=> 'Title attribute for image'
];

echo HTMLHelper::image($img_src,'Alt text for image', $img_attribs);

Если изображение найдено - получим HTML-разметку <img src="..."/> с нашими данными. Если не найдено - null.

Ещё 2 параметра, которые используются реже и связаны с одной из главных фишек Joomla - функционалом переопределений. Но их описание не укладывается в размер поста на Хабре 😢

Go для веб-разработки

Привет, Хабр!

Одна из тех вещей, которыми я занимаюсь с использованием Go — веб разработка. Я могу написать как фулл‑стэк вебсайт, так и просто бэкэнд. В этом коротком посте я дам Вам несколько советов и практик по веб‑разработке с использованием Golang

1. Роутеры

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

1. Chi router — роутер, которым я пользуюсь. Полная совместимость со стандартным пакетом Go

2. Go fiber — скоростной роутер

2. Jet templates

Очень удобная библиотека для использование темплэйтов. Очень упростила мне жизнь, если Вы пользуетесь теплэйтами в Go — упростит и Вам

3. Используйте middleware

Не используете middleware — ошибка. Не используете встроенные в пакет роутера middleware — фатальная ошибка. Есть очень много хороших middleware, которые уже встроены в используемый Вами роутер, например — Chi. Очень полезно использовать «Recoverer», или подобные.

4. Используйте аккуратную и удобную Вам структуру проекта

Не создавайте все файлы вместе. Разбейте все по папкам, как удобно Вам, в интернете есть много примеров

Вот и все, надеюсь я хоть как‑то Вам помог! Еще можете почитать мои посты по темам Golang: лучшие практики, 5 библиотек Golang для эффективной разработки веб‑приложений и т. д.

Только не говорите, что я один этого не знал.

Если ссылку любого репозитория на GitHub, например такую:

https://github.com/Bednyakov/takewords

Дополнить строкой vscode.dev, чтобы получилось:

https://vscode.dev/github/Bednyakov/takewords

Проект откроется в онлайн редакторе Visual Studio Code.

Интернет-энциклопедия «Википедия» добавила в настольную и мобильную версии тёмную тему. Опцию можно выбрать в настройках цвета. В настоящий момент функция доступна только для англоязычных пользователей «Википедии».

В разделе «Цвет» есть возможность активировать три опции: «Светлый», «Темный» и «Автоматический», который выбирается на основе настроек системы. Новый режим «Википедии» несовместим с браузерными расширениями, которые сами делают «Википедию» темной.

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

Тёмная тема была одной из самых запрашиваемых функций от пользователей «Википедии». Первый запрос на это был зарегистрирован еще в июне 2010 года, однако разрабатывать функцию начали только в 2022 году.

Два основных подхода к разработке UI-китов

1. All-in подход. Подключение компонента вместе со стилями или без них. Здесь любой компонент — это самостоятельная единица, которая уже содержит всё нужное. Внутри этого подхода можно выделить два подвида:

• Инлайн-стили через Styled Components (возможно, добавить просто подключение стилей внутри компонента). Этот метод позволяет писать стили непосредственно в компоненте. При этом стили изолированы, что уменьшает возможность конфликтов между стилями разных компонентов.

• Без добавления стилей (Headless). В этом случае компоненты предоставляют только логику без UI, что позволяет самостоятельно управлять стилями. Для создания подобной библиотеки нужно также ознакомиться с паттерном Compound component.

2. Dependency CSS & Bundle CSS подход. Второй большой подход — когда стили и компонент подключаются по отдельности. В этом случае стили и логика компонента отделены друг от друга.

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

• Bundle CSS предполагает подключение всех стилей сразу и отдельно — компонента. По сути, в этом случае все стили объединены в общий бандл и импортируются в корне проекта. 

Но при написании они схожи, и стили к компоненту подключаются как модули.

О том, как создавать и подключать UI-киты, рассказываем в нашем гайде для начинающих Frontend-разработчиков. Там вы найдете примеры кода и полезные ссылки.

Иван Ярославцев про развитие отраслевого сообщества, три совета молодому digital-агентству

Мы встретились с Иваном Ярославцевым, CEO, Alto и организатором preparty UDW2024. Иван рассказал про свой путь развития отраслевого сообщества и дал три совета молодому digital-агентству.

Ссылка на интервью: https://www.youtube.com/watch?v=PPhhn44Tqug

Ural Digital Weekend 2024 — одна из крупнейших IT-конференций на Урале с насыщенной программой и аудиторией 400+ человек, организованная компаниями Spectr и Тэглайн. Билеты для посещения конференции уже могут приобрести все желающие на сайте Ural Digital Weekend 2024 — https://ural-digital-weekend.ru/. А по промокоду YAROSLAVCEVGIFT10 можно получить приятную скидку.

Опубликовали программу секции «Управление разработкой» Ural Digital Weekend 2024

Доклады секции 

• «Краткий курс по принятию управленческих решений», Александра Прокшина, Авито

• «Синергия тимлида и рекрутера: строим эффективный процесс взаимодействия», Евгений Антонов, Yandex Infrastructure

• «Как создавать идеальные фичи и избегать багов, объединяя тестировщиков и разработчиков», Олег Пендрак, Ozon банк

• «Почему хорошие программисты становятся плохими менеджерами», Фёдор Борщёв, Школа Сильных Программистов

• «Основы Управляемой Эволюции. Как проводить изменения с минимальным сопротивлением», Алексей Пименов, Neogenda

• «Три кита адаптации удаленных сотрудников. Базовые правила для компаний разного масштаба», Алла Стольникова, Directum

• «Самоорганизованные команды: формирование, принципы работы, контроль и адаптация под специфику процессов», Алексей Червон, Магнит

• «Эффективность Шредингера: метрики работы команды разработки, поиск и устранение узких мест в процессах», Полина Таран, Точка

• «Как добиться взаимопонимания между клиентами, менеджерами и программистами», Григорий Кирейчук, KozhinDev

• «Как создать ценность там, где про неё редко спрашивают», Алексей Мезенцев, ITPS

• «Почти универсальные проектные принципы или Как перестать зависеть от методологий», Егор Сизяков, Hawking Bros

• «Стеклянный потолок — проблема или возможность», Андрей Смирнов, X5 Tech

• Специальная тема, Глеб Михеев, Сбер

Билеты на сайте — Ural Digital Weekend.

Опубликовали программу секции «Разработка» Ural Digital Weekend 2024

В секции «Разработка» будут представлены прикладные доклады по направлениям Backend, Frontend, DevOps/SRE, ML/AI, Developer Experience. Большая часть докладов секции рассчитана на middle+ инженеров.

Программу секции сформировал Виктор Корейша, руководитель направления Managed Services в Ozon, ведущий замечательного подкаста о жизни в IT «Кода кода» и нового подкаста «Три тимлида заходят в бар».

Доклады секции 

• «Сайт, готовый ко всему», Никита Дубко, Яндекс 

• «Проблемы конфигурирования frontend-приложений», Александр Широчкин, Иннотех/Саня об IT

• «Как обрабатывать 5 млн изменяющихся форм в минуту с SLI 99.99%», Кирилл Грищук, Avito

• «gRPC-стримы на практике: к чему готовиться и где применять», Сергей Антоничев, Ozon

• «Обзор возможностей распознавания и генерации трехмерных тел с использованием алгоритмов Искусственного Интеллекта»,  Никита Петрушан, РЦТИ.рф

• «Kubernetes «на сковородке». Простые советы и сложные рецепты», Игорь Титов, Garage Eight

• «Оркестрация с помощью Temporal: как это устроено и как применять на практике», Антон Цитульский, Uzum Tezkor

• «Архитектура надёжности экосистемы», Алексей Мерсон, Т-банк

• «Трассировка микросервисов или когда метрик и логов недостаточно», Руслан Гайнанов, Т1

• «50 оттенков кеширования: от in memory к многоуровневому redis-кластеру», Леонид Ченский, Ozon Tech

• «Frontend Fortified: как стать неприступным для атак», Зар Захаров, VK Музыка

Билеты —  на сайте Ural Digital Weekend 2024.