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

От чего на самом деле зависит скорость загрузки сайта

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

Между тем неосторожно отмечу, что самое узкое место при загрузке сайта — скорость интернет соединения. Это логично до безобразия, не так ли? Загружались бы со скоростью в гигабайт в секунду — не было бы смысла корячиться с методами загрузки, работой с кэшем и подстраивать под это архитектуру.

Можно годами спорить о том, какой метод позволит быстрее загружать в каждом отдельно взятом случае, да оно и верно — не сидеть же сложа руки! Да и кривые оные поломают любое решение. Но на самом деле самую крупную работу в этом плане делаем вовсе не мы, рядовые, а те, кто может, например, поднять среднюю скорость интернет соединения раз в 5–10 по стране. Это не чудо, а новые технологии и оптимизации на глубоком уровне (вспомните, как развивался HTTP и WiFi).

Оптимизация — дело правое, но на нашем уровне — весьма незначительное.

Привет, друзья! 👋

Наткнулся на интересное видео со сравнением Filament и нашего MoonShine! 🎥

https://www.youtube.com/watch?v=HOQZi8E_ED8

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

Главный вывод автора — ключевое различие между пакетами в использовании Livewire. И тут я полностью согласен! Мы специально отказались от Livewire в MoonShine, чтобы добиться максимальной производительности. Например, при работе с модальными окнами мы делаем всего один запрос при первом открытии, а дальше работаем с кешированными данными.

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

Приятно видеть, что наши архитектурные решения замечают и ценят. Хотя, конечно, выбор между Filament и MoonShine всегда будет зависеть от конкретного проекта и предпочтений команды.

Есть специалисты по Filamet? Давайте обсудим 💬

Готовы вывести свои веб-приложения на новый уровень? 💻

Тогда новый бесплатный курс «Веб-разработка на практике» — для вас!

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

В рамках курса

🔹Разрабатываем и разворачиваем приложение на FastAPI . 

🔹Разбираемся, как написать Docker-файл и настроить конфигурацию nginx, чтобы задеплоить веб-приложение.

🔹Показываем, как создать и настроить мини-приложение ВКонтакте для отслеживания погоды, а после — задеплоить на облачный сервер.

Переходите в Академию Selectel, чтобы ознакомиться со всеми материалами! 

gRPC-стримы на практике: к чему готовиться и где применять — Сергей Антоничев / Ural Digital Weekend 2024

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

gRPC — штука для многих уже привычная и, казалось бы, понятная, когда дело касается простого «один запрос — один ответ». Но если этого становится мало, нужно «асинхронно», «много» или ««постоянно», есть смысл обратить внимание на gRPC-стримы. И тут-то появляются нюансы. Спикер обзорно рассказал о том, как работают gRPC-стримы, где и как их стоит применять, чтобы не сделать себе и другим больно.

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/ZrQZZi

Проблемы конфигурирования frontend-приложений — Александр Широчкин / Ural Digital Weekend 2024

Как frontend-приложения получают конфигурации? Об этом в докладе рассказал Александр. А также он разобрал, почему "нельзя просто так взять и зачитать из env". Помог понять, почему не стоит подключать js с параметрами на этапе деплоя или модифицировать index.html. А также узнать, почему не стоит использовать деплой-скрипты с заменой шаблонных параметров в коде. Познакомил с решениями, которые одобрят самые матёрые спецы по инфобезу.

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/0LPN6

Kubernetes «на сковородке». Простые советы и сложные рецепты — Игорь Титов / Ural Digital Weekend 2024

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

Kubernetes для всех. Простые советы и сложные рецепты. Экосистема Kubernetes.

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/VKYkri

Сайт, готовый ко всему — Никита Дубко / Ural Digital Weekend 2024

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

Вспомните, где вы обычно тестируете свое веб-приложение. Скорее всего, у вас есть несколько вьюпортов, в которых вы быстро проверяете верстку и, возможно, пишете автотесты. И багов от пользователей почти нет — значит, все делаете правильно. Но как вашим сайтом пользуются на самом деле? Что нужно предусмотреть, чтобы сайт работал действительно почти везде?

В докладе вы найдете множество интересных примеров и отсылок. Заходите посмотреть!

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/NRS

Что необходимо учесть при поднятии переменных?

В новой серии нашего открытого курса по JavaScript вместе с веб-разработчиком Василием Новиковым разбираем поднятие переменных как один из этапов выполнения кода.

Из нового выпуска вы узнаете:

• что такое поднятие переменных; 

• три ключевых слова: как объявлять переменные в JavaScript;

• два вида типизаций и условия их определения.

Не забывайте заглядывать в описание к видео — там ссылки на полезные материалы по теме.

Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.

Если у вас в Vite проекте есть данные в json файлах, то иногда удобней работать с json5 (+комментарии и переносы строк, как минимум)

Для этого надо:

1. Поставить Vite плагин vite-plugin-json5

2. Поставить расширение json5 для VS Code для подсветки синтаксиса

3. Чтобы не ругался TypeScript, прописать в index.d.ts:

declare module "*.json5" {
  const value: any;
  export default value;
}

Стало намного удобней.

Бандл не меняется.

Как бы выглядел Хабр в 1993 году.

Приветствую хабравчане, сидел я вечером за ПК, пил кофе и пришла ко мне идея, как бы Хабр выглядел в 1993 году на html 1.0.

Нашел старые сайты тех лет и попытался в простом варианте воспроизвести Хабр. Вот, что получилось. Довольно забавно:)

<HEADER>
<TITLE>Хабр</TITLE>
</HEADER>
<BODY>
<H1>Хабр</H1>

 <dt>Пришли статью, стань автором! <A NAME=69 HREF="">habr.mail.ru</A></dt>
<A NAME=69 HREF="">Моя лента</A>
<A NAME=69 HREF="">Все потоки</A>
<A NAME=69 HREF="">Разработка</A>
<A NAME=69 HREF="">Администрирование</A>
<A NAME=69 HREF="">Дизайн</A>
<A NAME=69 HREF="">Менеджмент</A>
<A NAME=69 HREF="">Маркетинг</A>
<A NAME=69 HREF="">Научпоп</A>


 <dl>
  <dt><H3>Вышел Linux версии 0.2</H3></dt>
  <dd>
Привет, Хабр!
Ядро Linux набирает обороты. Я расскажу как устроено ядро и почему многие энтузиасты выбирают Linux.
   </dd>
   <dd>
   <A NAME=69 HREF="">Читать</A>
    </dd>
 </dl>

 <dl>
  <dt><H3>Ричард Столман хоронит Windows</H3></dt>
  <dd>
В данной статье я приведу 10 причин, почему windows 3.1 и последующие её версии не будут иметь успеха.
   </dd>
   <dd>
   <A NAME=69 HREF="">Читать</A>
    </dd>
 </dl>

 <dl>
  <dt><H3>В программном обеспечении всё плохо</H3></dt>
  <dd>
 Программы тормозят, новые версии требуют всё более мощного железа им уже не хватает 386 процессора на целых 20mhz.

   </dd>
   <dd>
   <A NAME=69 HREF="">Читать</A>
    </dd>
 </dl>

  <dl>
  <dt><H3>Почему С самый лучшмй языка программирования</H3></dt>
  <dd>
Всем приве

Новые курсы Яндекс Практикума для специалистов с опытом

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

«Эксплуатация и разработка в Kubernetes» — за 3 месяца освоите и примените на практике технологии оркестрации контейнеров. Программу составляли инженеры и тимлиды, которые давно работают с Kubernetes. Благодаря этому, вы будете учиться только тому, что на самом деле пригодится в работе. Ближайший старт — 17 октября.

«Apache Kafka для разработки и архитектуры» — 3-месячный курс для тех, кто хочет влиять на масштабируемость и надёжность систем. С этой технологией вы будете работать с более сложными продуктами и сможете повысить грейд. Есть бесплатная вводная часть. Ближайший старт — 21 ноября. 

«Архитектура программного обеспечения» — за 6 месяцев освоите лучшие практики архитектуры и научитесь решать сложные архитектурные задачи. Есть бесплатная вводная часть. Ближайший старт — 24 октября и 28 ноября.

«Мидл Android-разработчик» — 5-месячная программа для Android-разработчиков с опытом. Курс фокусируется на углублении технических навыков, изучении передовых паттернов и технологий, а также на освоении инструментов и методов, применяемых в реальных проектах. Ближайший старт — 14 ноября.

Калькулятор финансов - теперь можете посчитать свои средства и данные сохранятся локально на устройстве)

Предтеча другого, более крупного проекта, который будет потом)

Как в нативе: эти Web API поднимут ваше веб-приложение в стратосферу

Салют, на связи Clevertec. Сейчас наша команда разрабатывает веб-версию банкинга с использованием React. С помощью Web API даем пользователям фичи, которые они привыкли получать в нативных приложениях. Отрываем от сердца список решений 😉

- Web Share API – для обмена ссылками, текстом и файлами с другими приложениями на устройстве. К примеру, удобно отправить чек об оплате в мессенджере, не покидая банковское приложение. 

- Contact Picker API позволяет делиться контактами из своего списка. Можно использовать для перевода по номеру телефона. Не нужно вводить цифры вручную – поле автоматически заполнится контактом из телефонной книги. 

- Media Capture and Streams API в нашем случае позволяет отсканировать QR-код с помощью камеры устройства. Нажимаешь на “Сканировать QR” – открывается окно с камерой, она считывает код и переводит пользователя в дерево платежей.

- Web OTP API открывает возможность автоматически вставлять код из смс. Например, для подтверждения оплаты на телефон приходит сообщение. Внизу экрана появляется модальное окно с подтверждением вставки. И после нажатия на “Разрешить” код отображается в поле ввода.

Подробнее про этот опыт использования Web API мы рассказали в отдельной статье. Что вы думаете о Web API, какие используете? Расскажите в комментариях, будем взаимно полезны друг другу.  

Объектная парадигма и всё, что нужно о ней знать

В седьмом выпуске нашего открытого курса по JavaScript вместе с веб-разработчиком Василием Новиковым рассказываем про:

• способы создания примитивов с помощью конструкторных функций и простой нотации; 

• доступ к методам строкового объекта и использование метода valueOf для получения примитивных значений; 

• концепции области видимости: глобальную, функциональную, блочную и модульную;

• введение в блочную область видимости, добавленную в ECMAScript 2016, и её применение; 

• понимание лексической среды и замыканий, которые позволяют функциям сохранять доступ к переменным родительских функций.

Не забывайте заглядывать в описание к видео — там ссылки на полезные материалы по теме.

Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.

@container запросы на основании стилей — давно забытое старое, да и сделано убого.

При взгляде на эту новую технологию вспоминается давно забывая спецификация для @extend, на которую все забили, кроме пары плагинов для PostCSS. Как и та спецификация, эта технология — чуть более сложный миксин или функция, копировать — вставить с условиями. Жаль только, что сделана настолько криво. Я конечно не ожидал от приемников создателей flex и grid чудес, но не настолько же.

1: Срабатывая неявно (достаточно иметь свойство с определённым значением), они делают код похожим на минное поле. Нужно либо помнить все свойства, что вызывают запросы, либо жёстко регулировать их применение (ещё один подводный камень который будет в разработке, очень удобно).

2: Какой мыслант гигысли додумался сделать это на основе контейнерных запросов? Ведь совершенно очевидно, что запрос с названием «container» будет принимать... стили.

Иначе выражаясь — переделывать.

Совет о Joomla: использование FileLayout для рендера элементов макета.

Этот механизм используется под капотом Joomla для рендера отображения почти всех элементов интерфейса как фронта, так и админки. Обычно переиспользуемые "запчасти" выносятся в отдельные файлы: кнопки, тулбары, меню, табы и т.д. Для унификации отображения каждого элемента нужны некие данные данные и/или параметры: например, заголовок таба, надпись или onclick для кнопки, CSS класс и т.д.

<?php
use Joomla\CMS\Layout\FileLayout;

/**
 * Method to instantiate the file-based layout.
 *
 * @param   string  $layoutId  Dot separated путь к файлу, включая имя файла относительно base path
 * @param   string  $basePath  Основной путь к папке с макетами
 * @param   mixed   $options   Данные, нужные для работы макета. Registry или массив
 *
 * @since   3.0
 */
 $layout = new FileLayout('layout_file_name', JPATH_SITE . '/path/to/your/layout', ['buttonName' => 'Button name']);
// Рендерим наш макет
echo $layout->render();

Внутрь файла (/path/to/your/layout/layout_file_name.php в нашем случае) передаются данные и параметры для рендера. Получить эти данные можно следующим образом.

<?php
// Это содержимое файла /path/to/your/layout/layout_file_name.php
// Переданные данные приходят в формате Registry. Можно указать значение по умолчанию
$buttonName = $this->options->get('buttonName', 'Default name if value is empty');
?>
<button class="btn btn-primary"><?php echo $buttonName;?></button>

Сделал небольшую страницу-шпаргалку для фронтенд-разработчиков.

Напоминалки и полезные функции для рутинных задач.

Буду рад предложениям, что еще полезного можно добавить)

Инструкция, как перенести сайты и домены с Wix в Рег.ру

Конструктор сайтов Wix прекращает работу в России с 12 сентября 2024 года. Сервис уже предупредил о блокировке аккаунтов российских пользователей и принадлежащих им сайтов. Рекомендуем уже в ближайшее время запросить в поддержке Wix копию сайта для переноса, чтобы продолжить работу и не потерять важные данные. 

Мы подготовили несколько инструкций, как быстро мигрировать с Wix:

1. С помощью функции «Импорт сайта» вы можете перенести сайт на партнерский «Конструктор сайтов». Специальный промокод SITE1R3MFORWIX на тариф «Бизнес» за 1 рубль на 3 месяца.

2. Импорт списка товаров можно произвести с помощью модуля WooCommerce в конструктор «Рег.сайт». Промокод RSREC00000H13L на 3 месяца бесплатного использования тарифа «Развитие». 

3. Если хочется большего, чем конструктор и готовые шаблоны, дарим промокод RegSolutions30 — скидка 30% на индивидуальное решение по созданию сайта в рамках Пакета услуг «Рег.решения».

Промокоды действуют до 10 декабря 2024 года. А если нужно перенести с Wix на Рег.ру не только сайт, но и домен, то сделать это можно по этой инструкции.

Вышел WT JoomShopping Bitrix24 PRO v.3.2.0, плагин интеграции с CRM Битрикс 24

Бесплатный плагин отправки заказов из интернет-магазина JoomShopping в CRM Битрикс24. Плагин передает лиды, сделки, создаёт контакты и повторные сделки. Обеспечивает смену статуса заказа в JoomShopping при изменении стадии сделки в Битрикс 24 (двухсторонняя интеграция).Плагин поддерживает работу с плагином обратной связи Radical Form, что позволяет его использовать не только вместе с JoomShopping.

 v.3.2.0 Что нового?

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

Настройки для Radical Form. Добавлены настройки данных, включаемых в комментарий к лиду/сделке для Radical Form.

Предобработка данных перед отправкой в Битрикс 24. Добавлена возможность обрабатывать данные непосредственно перед отправкой их в Битрикс 24 в собственных файлах в папке /plugins/system/wt_jshopping_b24_pro/src/Custompreprocess. Для использования этого функционала нужно обладать знаниями PHP и хотя бы минимальными знаниями Joomla API. Вы используете этот функционал на свой страх и риск! Подробнее на странице расширения.

Страница расширения GitHub расширения Joomla Extensions Directory

Как автоматизировать рассылку транзакционных уведомлений

Настройка уведомлений в сервисе — задача, напрямую не связанная с бизнес‑логикой и написанием кода, к которой часто привлекаются разработчики. Для её решения нужно погрузиться в тонкости настройки DNS‑протоколов (DKIM, DMARC, SPF), протоколов TLS и передачи данных.

Разгрузить команду разработки от непрофильных задач помогает Yandex Cloud Notification Service (CNS) — новый сервис для управления SMS и пуш‑нотификациями. С его помощью можно отправлять уведомления пользователям Android и iOS через FCM, HMS и APNs, передав обновление всех протоколов на сторону провайдера. Сервис включает логирование и мониторинг, его HTTP API совместим с Amazon SNS API.

Возможности для автоматизации email-нотификаций представлены в Yandex Postbox — управляемом сервисе для отправки почтовых уведомлений. Их совместное использование c CNS в облачной экосистеме облегчает мультиканальную коммуникацию с клиентом: если пуш-сообщение не прочитано, можно продублировать его на почту, или же оптимизировать расходы на авторизацию. Вместе сервисы также обеспечивают:

• соответствие стандарту почтовых сообщений RFC5322,

• защищённые протоколы пересылки и наличие настроенных DNS‑записей,

• ролевую модель (RBAC) для безопасного доступа к сервисам на основе политик избирательного управления правами,

• интеграцию с другими облачными сервисами Yandex Cloud (событий, BI),

• возможности выгрузки событий и построения своей аналитики, в том числе с визуализацией в DataLens.