Как веб-разработчик, вы должны быть знакомы с console.log() . Это наиболее простой подход к устранению любых неполадок путем регистрации значений переменных в инструментах разработчика. Но консольный API – это гораздо больше, он предоставляет множество других методов, которые могут помочь вам в отладке.

Список всех методов консоли, которые описаны в этой статье:

1. console.log()
2. console.clear()
3. console.warn()
4. console.table()
5. console.dir()
6. console.group и console .groupCollapsed()
7. console.count и console.countReset()
8. console.assert()
9. Console.error()
10. console.time и console.timeEnd()
11. console.trace()

Подробнее

В OpenCart заранее предустановлены целый список список оплаты, порядка 40шт. И часто встречается ситуация, когда надо создать свой, который просто показывался как очередной пункт выбора в корзине. Из админки этого сделать нельзя, т.к. под каждый методом оплаты кроется свой функционал. В статье не описывается как с нуля создать новый метод оплаты для OpenCart 3, в данном случае взяли уже существующий модуль и его клонировали под разными названиями.

Подробнее

Очень просто и доходчиво рассказано как использовать CSS Grid на практике.

Одной из самых быстрой и простой оптимизации производительности сайта является уменьшение времени загрузки изображений. Минимизацию изображений можно сделать с помощью таких инструментов, как ImageOptim и TinyPNG, использование URI и спрайтов данных, а также использование отложенной загрузки изображений (lazyload).

Lazy-load или «ленивая» загрузка — это способ отображения контента на сайте, когда элементы загружаются по мере необходимости (асинхронно), а не сразу вместе с запрашиваемой страницей.

Когда браузер «видит» у элемента атрибут src, то делает запрос по указанному в нём адресу, что увеличивает время полной загрузки документа. Соответственно, чем больше внешних ресурсов синхронно подключается к странице, тем медленнее она загружается. Чтобы избежать множества одновременных запросов и оптимизировать скорость загрузки, используется техника lazy-load.

Подробнее

Фильтры phx, позволяют манипулировать значением тега, прямо внутри шаблона.

Ну зачем они нужны?

Все довольно просто, модификаторы phx значительно облегчают жизнь разработчику сайта, например есть сайт и необходимо только на главной странице показывать слайдер, ну или любой зыбучий банер. В шаблоне сайта достаточно прописать [[*id:is=`1`:then=`[[$slider]]`]], где 1 – это id главной страницы, а $slider – чанк с html кодом слайдера… и т.д. и т.п. только глупцы создают новый шаблон и копируют туда весь html-код страницы, ради пары строчек слайдера/банера. Но все мы такими были, поэтому не отчаивайся и внедряй phx в разработку.

Подробнее

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

Как же подключить шрифт к странице? Существует несколько способов:

Подробнее

Полезное видео про узкие колонки, выравнивание текста, высоту строк, модульные шкалы.

Flexbox – это стандарт CSS, оптимизированный для проектирования пользовательских интерфейсов. Используя различные flexbox свойства можно создать страницу из блоков, которые легко позиционировать и изменять любым способом. Сайты и приложения, созданные таким образом хорошо адаптируются ко всем размерам экрана.
В этой статье мы рассмотрим пять flexbox подходов для решения проблем компоновки страницы. В статье показаны практические примеры для демонстрации сценариев из реальных html страниц, в которых эти методы применяются.

Подробнее