Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

buslikdrev

Користувачі
  
 Профіль  Активність

  • Публікації

    4 046

  • З нами

  • Відвідування

 Тип публікації 

Записи блогу, опубліковані користувачем buslikdrev

  1. buslikdrev

    Критические стили / Critical CSS

    Автор: buslikdrev,


    Модули
    Критические стили - это стили необходимые для отрисовки видимой части страницы или применяемые на данной странице, то есть без лишних стилей.
    Как многие знают в стандартном шаблоне
    bootstrap.min.css
    font-awesome.min.css
    Блокируют рендер из-за неиспользуемых стилей в результате чего PageSpeed Insights ругается на ресурсы, блокирующие отображение и предлагает встроить критическую часть данных JS/CSS в код HTML и отложить загрузку остальных ресурсов. А чтобы сократить расход трафика, удалить ненужные правила из таблиц стилей и отложите загрузку кода CSS, который не используется в видимой части страницы.
     
    В интернете рекомендуют в основном такие библиотеки с сотнями файлов которые предназначены для node.js или сайты для ручной сборки критических стилей
    https://github.com/filamentgroup/criticalCSS
    https://github.com/pocketjoso/penthouse
     
    Глядя на все эти решения, то я написал для разработчиков лёгкую JavaScript библиотеку в один файл:
     
    А для других пользователей данная библиотека на JavaScript и PHP здесь:
     
  2. buslikdrev

    С#? Легко!

    Автор: buslikdrev,


    SEO, IT, JS, API
    Статья для обладателей Windows
     
    Вы спросите: "Зачем нам знать C# (СSharp - "Си Шарп"), если нам интересен PHP и OpenCart?". Отвечаю, что он вам не нужен. Но, хорошо было бы знать, что вы можете в любой момент легко начать писать на нём. А писать можно мобильные приложения, сайты как в php, игры и другие .exe файлы. Для начала программирования на C# даже устанавливать не придётся какие-либо программы, т.к. они у вас наверняка есть по-умолчанию в Windows. Например, в Windows 7 должен быть NET.Framework 2.0 - 3.5.1, который располагается по пути: "C:\Windows\Microsoft.NET\Framework*\v*\". В этих папках вы сможете найти MSBuild.exe - компилятор C# кода.
    Чтобы скомпилировать свою первую программу, нужен сам C# (*.cs файл) и настройка проекта (*.csproj файл) для компилятора. Также создать *.CMD файл.
     
    NET.Framework и языки к нему можно скачать здесь:

    Компилятор MSBuild можно скачать здесь:
     
     
    Приступаем к написанию кода и компиляции.
    1. Создаём текстовый файл с кодировкой UTF-8, например, myprogram.cs:
     
    2. Создаём текстовый файл с кодировкой UTF-8, например, myprogram.csproj:
     
    3. Создаём текстовый файл с кодировкой UTF-8, например, myprogram.cmd и указать путь к MSBuild:
     
    4. Запускаем myprogram.cmd и в папке наших файлов должен появиться исполняемый файл нашей программы myprogram.exe
     
     
    Про версии С# можно почитать здесь:
    https://learn.microsoft.com/ru-ru/dotnet/csharp/whats-new/csharp-version-history
    https://ru.wikipedia.org/wiki/C_Sharp
     
    Про версии NET.Framework можно почитать здесь:
    https://learn.microsoft.com/ru-ru/dotnet/framework/migration-guide/versions-and-dependencies
     
    Про версии MSBuild можно почитать здесь:
    https://en.wikipedia.org/wiki/MSBuild#Versions
    Добавлю ещё, что MSBuild есть в dotNET.Core v3.1+ и .csproj билдится (компилируется) такой строкой:
    "C:\Program Files\dotnet\dotnet.exe" build myproject.csproj
     
    Как компилируется и работает С# код:
    https://learn.microsoft.com/ru-ru/dotnet/standard/managed-execution-process
    https://ru.wikipedia.org/wiki/Common_Language_Runtime
     
     
    Следующая статья по C# будет, если доберусь до создания своего мобильного приложения (открытие сайта, как мобильное приложение). Возможно ещё будет статья, как легко начать программировать на С++.
    Если кто вдохновится, то можете изучить своими силами и написать об этом статью.

    Создание приложение для Android на C#:
    https://metanit.com/sharp/maui/1.1.php
    https://learn.microsoft.com/en-us/xamarin/android/deploy-test/building-apps/abi-specific-apks
     
    Компиляция приложения на С++ (аналогия, как при компиляции C#):
    https://learn.microsoft.com/ru-ru/cpp/build/walkthrough-using-msbuild-to-create-a-visual-cpp-project?view=msvc-170
  3. buslikdrev
    Нужен 1 сайт (действующий интернет-магазин) на Opencart 2 - 4+
    С меня оптимизация сайта оценкой от 80+ баллов и установка модуля без технической поддержки.
    С вас согласие, что ваш сайт попадёт на видео в качестве инструкции установки и настройки.
    Со стороны админ панели будут записаны страницы: главная страница (блоки информации будут все отключены на время, если OC 2.3+, либо замазаны), установка расширений, расширения, страница модуля.

  4. buslikdrev

    REST API OpenCart - подробности.

    Автор: buslikdrev,


    SEO, IT, JS, API
    Здесь описание работы стандартного API OpenCart. Благодаря этому описанию каждый поймёт возможности и варианты применения.
     
    Чтобы связать любой сайт с OpenCart, нужно в админ панели OpenCart/Система/Пользователи/API/Нажать кнопку добавить, дать название создаваемому API, например, название сайта которому даёте доступ, сгенерировать ключ доступа, установить статус включено, а во вкладке IP адрес добавить ip сайта.
     
    Далее сайт может подключиться к вашему сайту с помощью отправки сгенерированного ключа пост запросом и сохранения куков. Так как не у многих получается получить сессионную куку, то Daniel Kerr сделал напрямую вывод названия сессионной куки на страницу начиная с OpenCart 3
    https://github.com/opencart/opencart/blob/3.0.0.0/upload/catalog/controller/api/login.php
    $json['api_token'] = $session->getId();
     
    Пример авторизации и использование index.php?route=api/cart для OpenCart 2.X-3.X
     
     
  6. buslikdrev
    Рекомендую использовать этот код для определения блокировки куков в браузере, и чтобы сайт не кривился из-за ошибки при использовании localStorage, sessionStorage:
     
    <script type="text/javascript"><!-- try { window.localStorage.length; window.localStorage.status = true; window.sessionStorage.length; window.sessionStorage.status = true; } catch (e) { delete window.localStorage; delete window.sessionStorage; window.localStorage = { 'status':false, 'getItem':function(a) {}, 'setItem':function(a, b) {}, 'key':function(a) {}, 'removeItem':function(a) {}, 'clear':function() {}, 'length':0 }; window.sessionStorage = window.localStorage; } window.addEventListener('load', function(e) { if (!window.localStorage.status && !window.sessionStorage.status && !document.cookie) { setTimeout(function() { window.alert('Чтобы использовать все возможности сайта необходимо включить cookie.'); }, 10); } }); //--></script>  
  7. buslikdrev
    Цель статьи - реклама своего дополнения.
    Так как представленный список дополнений вас может расстроить, если вы когда-то купили из списка под номерами 2-9, то ставлю рекламу своего дополнения на первое место.
     
    1) Первое дополнение
     
     
    Плюсы:
    - сайт считается PWA https://googlechrome.github.io/lighthouse/viewer/?strategy=mobile&category=pwa&psiurl=https://demo2.buslikdrev.by/
    - есть описание в каких устройствах и браузерах должно работать приложение;
    - максимальная мультиязычность;
    - есть управление кэшем;
    - приложение работает в offline режиме;
    - notification и push уведомления о заказах, брошенной корзине, брошенных закладок, появлении новой статьи блога, новой информационной страницы, нового товара;
    - отправка push уведомления из админ панели с указанием даже изображения;
    - отправка индивидуального (конкретному пользователю) пуш-сообщения;
    - интеграция отправки push уведомления из любого модуля;
    - низкая цена;
    - тех. поддержка СНГ.
     
    Минусы:
    Мне сложно продумать минусы. Это сделать можешь ты (читатель этой темы) в комментариях.
     
    Планы на будущее:
    - сделать сохранение данных о том, что пользователь установил приложение и разделить пользователей ещё на устройства;
    - сделать дополнение мультимодульным, то есть для какой-то страницы создание своей иконки;
    - выгрузка PWA для установки на любой сайт (не на движке OpenCart тоже);
    - синхронизация данных (отправка запроса в очередь, когда нет интернета);
    - создание из админ панели скриншот сайта для выгрузки в магазин приложений;
     
    2) Второе дополнение в моём списке
    Knowband Opencart PWA Mobile App
     
    Плюсы:
    - свой шаблон с различными настройками для PWA на отдельной странице;
    - push уведомления о заказах и брошенной корзине, также по крону;
    - отправка push уведомления из админ панели с указанием даже изображения и ссылки (правда из списка ссылок);
    - авторизация через facebook и google;
    - низкая цена.
     
    Минусы:
    - свой шаблон это конечно же хорошо, не нужно основной сайт изменять, а свободно гуляться с кодом отдельного шаблона. Но при покупки этого модуля основной сайт не будет считаться PWA, и если Google ранжирует лучше сайты с PWA, то ваш сайт не поднимется в рейтинге.
    https://googlechrome.github.io/lighthouse/viewer/?strategy=mobile&category=pwa&psiurl=https://opencartdemo.knowband.com/3.0/pwa/
    Также из-за недоработки манифеста, приложение не считается полноценным PWA:
    https://googlechrome.github.io/lighthouse/viewer/?strategy=mobile&category=pwa&psiurl=https://opencartdemo.knowband.com/3.0/pwa/pwa-app/
    - нельзя управлять кэшем;
    - приложение не работает в offline режиме - что-то загружается, что-то нет;
    - неизвестна поддержка браузеров, например, PWA уже работает начиная с chrome 40, но более стабильная версия с chrome 87. Так вот, этот модуль не поддерживает минимум chrome 45 (сыпятся ошибки) - этот браузер ставился по-умолчанию на телефонах android 4-5;
    - мало настроек мультиязычности PWA;
    - нельзя отправлять индивидуальное (конкретному пользователю) пуш-сообщение;
    - при выборе ссылки для пуш-сообщения загружается весь товар списком (представьте, что будет при 10000 товаров);
    - долгая загрузка страниц 1.5-4 секунд;
    - не продуманный js-код;
    - тех. поддержка иностранная.
     
    3) Третье дополнение такое, как и второе
    Opencart Headless PWA
     
    Плюсы:
    - свой шаблон с различными настройками для PWA на отдельной странице;
    - отправка push уведомления из админ панели с указанием даже изображения и ссылки (правда из списка ссылок);
    - низкая цена покупки;
    - быстрая загрузка 0.3-2 секунды;
    - свой js-код.
     
    Минусы:
    - свой шаблон это конечно же хорошо, не нужно основной сайт изменять, а свободно гуляться с кодом отдельного шаблона. Но при покупки этого модуля основной сайт не будет считаться PWA, и если Google ранжирует лучше сайты с PWA, то ваш сайт не поднимется в рейтинге.
    https://googlechrome.github.io/lighthouse/viewer/?strategy=mobile&category=pwa&psiurl=https://pwa-oc.webkul.com/
    Также из-за недоработки манифеста, приложение не считается полноценным PWA:
    https://googlechrome.github.io/lighthouse/viewer/?strategy=mobile&category=pwa&psiurl=https://pwa-oc.webkul.com/react_pwa/
    - нельзя управлять кэшем;
    - приложение не работает в offline режиме - что-то загружается, что-то нет;
    - неизвестна поддержка браузеров, например, PWA уже работает начиная с chrome 40, но более стабильная версия с chrome 87. Так вот, этот модуль не поддерживает минимум chrome 45 (сыпятся ошибки) - этот браузер ставился по-умолчанию на телефонах android 4-5;
    - мало настроек именно PWA;
    - нельзя отправлять индивидуальное (конкретному пользователю) пуш-сообщение;
    - не продуманный js-код;
    - тех. поддержка иностранная.
     
     
    4) Четвёртое дополнение от автора третьего дополнения
    Opencart Progressive Web Application
     
    Плюсы:
    - отправка push уведомления из админ панели с указанием даже изображения и ссылки;
    - мультиязычность настроек;
    - был бы плюс, что делает сайт PWA, но на демо не работает модуль т.к. ошибки есть:
    https://googlechrome.github.io/lighthouse/viewer/?strategy=mobile&category=pwa&psiurl=https://oc.webkul.com/progressive_Web_App/
    - свой js-код.
     
    Минусы:
    - нельзя управлять кэшем;
    - приложение не работает в offline режиме - что-то загружается, что-то нет;
    - неизвестна поддержка браузеров, например, PWA уже работает начиная с chrome 40, но более стабильная версия с chrome 87. Так вот, этот модуль не поддерживает минимум chrome 45 (сыпятся ошибки) - этот браузер ставился по-умолчанию на телефонах android 4-5;
    - мало настроек именно PWA;
    - нельзя отправлять индивидуальное (конкретному пользователю) пуш-сообщение;
    - не продуманный js-код;
    - тех. поддержка иностранная;
    - высокая цена покупки, когда есть бесплатная версия с большими настройками https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=38760
     
    5) Пятое дополнение
    iSellSoft Web Application
     
    Плюсы:
    - есть настройки кэша;
    - был бы плюс, что делает сайт PWA, но на демо не работает модуль т.к. ошибки есть:
    https://googlechrome.github.io/lighthouse/viewer/?strategy=mobile&category=pwa&psiurl=https://isellsoft.net/opencart/v3/
    - низкая цена покупки.
    - свой js-код.
     
    Минусы:
    - приложение не работает в offline режиме - что-то загружается, что-то нет;
    - неизвестна поддержка браузеров, например, PWA уже работает начиная с chrome 40, но более стабильная версия с chrome 87. Так вот, этот модуль не поддерживает минимум chrome 45 (сыпятся ошибки) - этот браузер ставился по-умолчанию на телефонах android 4-5;
    - мало настроек именно PWA;
    - нельзя отправлять пуш-сообщения;
    - не продуманный js-код;
    - тех. поддержка иностранная.
     
     
    6) Шестое дополнение
    (PWA) Progressive Web Applications
     
    Плюсы:
    - свой шаблон с различными настройками для PWA на отдельной странице;
    - сайт считается PWA, но из-за недоработки манифеста не считается полноценным PWA:
    https://googlechrome.github.io/lighthouse/viewer/?strategy=mobile&category=pwa&psiurl=https://www.opencartextensions.in/pwa/
    - отправка push уведомления из админ панели с указанием даже изображения и ссылки (правда из списка ссылок);
    - свой js-код;
    - низкая цена покупки.
     
    Минусы:
    - нельзя управлять кэшем;
    - приложение не работает в offline режиме - что-то загружается, что-то нет;
    - неизвестна поддержка браузеров, например, PWA уже работает начиная с chrome 40, но более стабильная версия с chrome 87. Так вот, этот модуль не поддерживает минимум chrome 45 (сыпятся ошибки) - этот браузер ставился по-умолчанию на телефонах android 4-5;
    - мало настроек именно PWA;
    - долгая загрузка страниц 3.5-10 секунд;
    - не продуманный js-код;
    - тех. поддержка иностранная.
     
     
     7) Седьмое дополнение
    Opencart app ionic 5 with source code for iOS ,android and pwa
     
    Плюсы:
    - свой шаблон с различными настройками для PWA на отдельной странице;
    - сайт считается PWA, но из-за недоработки манифеста не считается полноценным PWA:
    https://googlechrome.github.io/lighthouse/viewer/?strategy=mobile&category=pwa&psiurl=https://pasajtak.ir/
    - есть установка через APK;
    - низкая цена покупки.
     
    Минусы:
    - нельзя управлять кэшем;
    - приложение не работает в offline режиме - что-то загружается, что-то нет;
    - неизвестна поддержка браузеров, например, PWA уже работает начиная с chrome 40, но более стабильная версия с chrome 87. Так вот, этот модуль не поддерживает минимум chrome 45 (сыпятся ошибки) - этот браузер ставился по-умолчанию на телефонах android 4-5;
    - мало настроек именно PWA;
    - долгая загрузка страниц;
    - не продуманный js-код;
    - тех. поддержка иностранная.
     
     
    8) Восьмое дополнение
     
     
    Плюсы:
    - сайт считается PWA, но из-за недоработки манифеста не считается полноценным PWA:
    - тех. поддержка СНГ.
     
    Минусы:
    - нельзя управлять кэшем;
    - приложение не работает в offline режиме - что-то загружается, что-то нет;
    - неизвестна поддержка браузеров, например, PWA уже работает начиная с chrome 40, но более стабильная версия с chrome 87. Так вот, этот модуль не поддерживает минимум chrome 45 (сыпятся ошибки) - этот браузер ставился по-умолчанию на телефонах android 4-5;
    - нет настроек (управление модулем);
    - не продуманный js-код;
    - высокая стоимость покупки:
     
     
     
    9) Самое конченное место:
    Модуль PWA 5 от студии которую выгнали
     
    Плюсы:
    - можно управлять кэшем;
     
    Минусы:
    - сайт не считается PWA;
    - приложение не работает в offline режиме - что-то загружается, что-то нет;
    - неизвестна поддержка браузеров, например, PWA уже работает начиная с chrome 40, но более стабильная версия с chrome 87. Так вот, этот модуль не поддерживает минимум chrome 45 (сыпятся ошибки) - этот браузер ставился по-умолчанию на телефонах android 4-5;
    - мало настроек мультиязычности PWA;
    - долгая загрузка страниц;
    - не продуманный js-код;
    - тех. поддержка иностранная;
    - закодированный код модуля;
    - сверх высокая стоимость покупки:
     

  8. buslikdrev
    Цель темы предотвратить темы, где спрашивают: "Какой шаблон выбрать?" и указать на замечания авторам шаблонов, чтобы они ещё больше их улучшили.
    Для попадания в список лучших шаблонов, на вашем шаблоне должна быть возможность получить оценку 90+ в Google PageSpeed не урезая функционал на демонстративном сайте, также исправление косяков шаблона должны производится не позже одного месяца. Ваш шаблон должен быть адаптирован под OpenCart 2.X+ Перед добавлением в список ваш шаблон будет проходить голосование (люди оценят привлекательность до 50 голосов или в течении до двух месяцев).
     
    В данном списке шаблонов не определяется занимаемое место - весь список считается хорошим, и время от времени будет изменяться.
    Оцениваться шаблон будет исходя из оценок в Google PageSpeed и Google lighthouse (accessibility, best-practices, seo)
    Ответ сервера учитываться не будет, если при прямом посещении отдача до 400 мс (Время от запроса к сайту до начала скачивания других файлов после загрузки документа). Также, если оценка шаблона не будет в зелёной зоне (90+ баллов) в Google PageSpeed, то в ручную буду стараться её довести (привести на равные условия среди списка).
     
    1. UltraStore для OpenCart 3.X
     
    Google PageSpeed (95)
    Главная страница Mobile 90-95 / Desctop 100
    Категория Mobile 91-98 / Desctop 100
    Товар Mobile 91-95 / Desctop 100
     
    Google lighthouse (81)
    Главная страница
    accessibility 80
    best-practices 87
    seo 75
    Категория
    accessibility 75
    best-practices 87
    seo 77
    Товар
    accessibility 82
    best-practices 93
    seo 77
     
    Ответ сервера
    Техническая поддержка - быстрая
    Обновления - выпускаются раньше месяца
    Ioncube Loader - нет
    Обращение к серверу разработчика - нет
     
    Рекомендации автору @octemplates:
    - настроить стили баннеров так, чтобы не скакали они, если отключены скрипты - это позволит сделать загрузку баннеров по взаимодействию пользователя с сайтом, что в свою очередь минимизирует работу основного потока (Total Blocking Time - TBT);
    - устранить ошибку скриптов, если отключены у пользователя куки;
    - предзагрузить стили (добавить атрибут rel="preload") - это снизит (Largest Contentful Paint - LCP);
    - применить скрипт сборки критических стилей - это снизит (First Contentful Paint - FCP);
    - устранить ошибки Google lighthouse;
    - установить атрибуты ширины и высоты на изображения которые нельзя менять из админ панели;
     
    2. UniShop2 для OpenCart 3.X
    Голосование прошло
    Купон на скидку 20%
    723925-console
     
     
    Google PageSpeed (94)
    Главная страница Mobile 85-95 / Desctop 100
    Категория Mobile 89-94 / Desctop 100
    Товар Mobile 89-95 / Desctop 100
     
    Google lighthouse (85)
    Главная страница
    accessibility 90
    best-practices 85
    seo 89
    Категория
    accessibility 84
    best-practices 85
    seo 83
    Товар
    accessibility 71
    best-practices 85
    seo 91
     
    Ответ сервера
    Техническая поддержка - быстрая
    Обновления - выпускаются раньше месяца
    Ioncube Loader - да
    Обращение к серверу разработчика - да
     
    Рекомендации автору @spectrum:
    - настроить стили баннеров так, чтобы не скакали они, если отключены скрипты - это позволит сделать загрузку баннеров по взаимодействию пользователя с сайтом, что в свою очередь минимизирует работу основного потока (Total Blocking Time - TBT);
    - применить скрипт сборки критических стилей - это снизит (First Contentful Paint - FCP);
    - устранить ошибки Google lighthouse;
     
    3. NewStore для OpenCart 2.X
    В процессе голосования
     
    4. Decor для OpenCart 3.X
    В процессе голосования
     
    5. ExlusiveTuning для OpenCart 2.X-3.X (NEW)
    В процессе голосования

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду