[Malleys]

Обнулить стили у кнопки Корзины получается, но не до конца. Убрал у неё все бутстраповские классы, которые подсасывает openCart, за исключением `.dropdown-toggle`... После нажатия на кнопку она всё равно стилизуется как показано в скриншотах:

Сейчас настал черёд стилизации карусели, тот ещё гимор я так понимаю.
Главное свою не написать случайно )) А то я могу )))

Для редактирования текста Opencart использует редактор Summernote.
Хотел немножко стили под себя подправить, иду сюда admin/view/javascript/summernote/summernote.css
Открываю стили, а они сборщиком минифицированы...

Вы можете в Chrome DevTools выбрать на сайте нужный элемент и увидеть всю цепочку наследовании CSS. И можете менять стили элемента «вживую»! Рабочие пространства Chrome DevTools позволяют вам сохранить изменения в файле на сайте, внесенные вами в Devtools, в локальную копию того же файла на вашем компьютере. Например, предположим:

• У вас есть исходный код вашего opencart проекта на рабочем столе.
• Вы используете локальный веб-сервер (корень сайта — каталог исходного кода), так что ваш сайт доступен, например, по адресу localhost:8080.

Так что когда вы откроете localhost:8080 в Google Chrome, и вы будете использовать DevTools для изменения CSS сайта, то при включенных рабочих пространствах, изменения CSS, которые вы вносите в DevTools, сохраняются в исходном коде вашего opencart проекта. (localhost:8080 — это как пример, на самом деле может быть любой адрес)

Самый простой способ добавить папку проекта в рабочее пространство — открыть в Chrome DevTools панель Sources и перетащить туда папку. (https://youtu.be/DJfdjdlSJho?t=56)

Открываю стили, а они сборщиком минифицированы.
Вот на хрена так спрашивается делать, блин?

А исходники? Хотя вы теперь знаете, что это не проблема!

На чем тренировки производятся, на удаленном сервере? Ставьте локальный сервер и тренируйтесь на нем, делая вывод в браузер данных дабы проверить себя, и прочее, что на реальном сервере конечно же делать не стоит.

Я заметил, что иногда рекомендуете устанавливать Open Server, почему не более приближённое к реальности, например, при помощи docker? (Как начать с docker? https://www.youtube.com/watch?v=VzzwnsLX_5o Краткое описание… https://habr.com/ru/post/309556/)

Я не совсем понял. JS-ки за пределами папки кастомной темы не меняются через модификаторы? Просто там на старом синтаксисе ES5 всё написано. Я уже стал от него отвыкать. В новом с вебпаком всё так здорово - подключил файл, расширил класс. А тут... Как мне в своём кастомном js-файле например расширить с добавлением новых свойств и методов класс псевдокласс `cart`, построенный по-старинке на объекте?

А с чего вы взяли, что это класс? cart — это экземпляр класса Object. Даже если написать отдельный класс Cart, то его всевозможные экземпляры будут выполнять одно и тоже.

Если вы хотите, чтобы cart был экземпляром класса Cart, то вы можете сделать так...

function Cart() {
	throw new TypeError("Illegal constructor");
}

Object.defineProperty(Cart, Symbol.hasInstance, {
	value: instance => cart === instance
});
Cart.prototype = cart;
Cart.prototype.constructor = Cart;

/* долгожданное наследование */
class SuperCart extends Cart {
	myNewMethod() {}
}

/* теперь вместо cart используйте myCart */
const myCart = Object.create(SuperCart.prototype);

// > cart instanceof Cart
// < true
// > myCart instanceof Cart
// < true
// > myCart.add
// < ƒ (product_id, quantity)

Но действительно ли вам нужен класс в данном случае? Вы исходили из ложной предпосылки, что cart — класс, а на деле это — объект типа Object.

Как мне в своём кастомном js-файле например расширить с добавлением новых свойств и методов класс псевдокласс `cart`, построенный по-старинке на объекте?

Дело в том, что это не класс, а объект (экземпляр класса Object). Вы можете дописать в объект нужные функции и свойства...

Object.assign(cart, {
	myNewMethod: function() {}
});

некоторые неправильно называют такие вещи как animate.css библиотеками, а я взял и повторил это.

Что к чему и что за такая странная библиотека (и откуда она вообще могла появиться) animate.css.

Всё верно, это библиотека CSS анимации. Что может быть странного и удивительного в том, чтобы часто используемые анимации вынести в отдельную библиотеку? Вот ещё больше полезных библиотек CSS анимации — https://css-tricks.com/css-animation-libraries/

А CSS - это каскадные таблицы стилей, и коли это файл, то подключаемая. Можно конечно говорить о библиотеке, которая занимается стилями оформления темы/элементов приложения, но в среде системного программирования это ни как не .css будет.

Обычные программы тоже могут быть оформлены при помощи CSS — Skype, Discord, WhatsApp, Visual Studio Code и пр. И даже операционная система — Chrome OS.

CSS3 настолько мощная штука...

Такой вещи вообще не существует! Никто не может точно сказать и определить, что это такое! (Я спрашивал, человек, говорит — «ну там transform есть в CSS3...» смотрим в документацию — а там — CSS Transforms Module Level 1, вообще отдельный модуль!)

На самом деле уже с 2007 года существует «CSS Snapshot» (т.е. «снимок» состояния CSS) — периодически обновляемый документ (https://w3.org/TR/css), один из разделов которого называется — «Официальное определение CSS».

the modal dialog

Модальное окно — окно, которое блокирует работу пользователя с приложением до тех пор, пока пользователь это окно не закроет.

Вот вам диалоги не убогие, это практически полноценные приложения, с гораздо большими возможностями чем confirm и promt. Как видите во всех браузерах открывается, но все это симуляция кроме в IE. Откройте эту ссылку в IE и посмотрите, чувствуется разница.

Стоит учитывать, что showModalDialog раньше работал и в Firefox и в Chrome (Ещё работает в Safari, но планируется к удалению), но в последствии был объявлен устаревшим и удалён, поскольку существует стандартизированное и более гибкое решение, которое предоставляет спецификация HTML.

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

Почему window.showModalDialog был объявлен устаревшим?
В общем, идея реализации диалогового окна в браузере была действительно хорошей идеей, но window.showModalDialog было плохой реализацией, изобилующей проблемами.

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

Хотя важно, чтобы модальные диалоги не позволяли пользователю взаимодействовать с исходным окном, нет никаких причин, по которым ему нельзя разрешать взаимодействовать с другими вкладками или встроенными элементами управления браузера (назад/вперёд, избранное, адресная строка и пр.)

Что использовать взамен? Спецификация HTML 5.3 представляет элемент <dialog>, который используется для отображения диалогов, включая модальные.

Элемент <dialog> представляет часть приложения, с которой пользователь может взаимодействовать, чтобы выполнить определённую задачу — диалоговое окно.

На данный момент диалоговые окна полностью поддерживаются в Chrome и Opera, в Firefox — частичная поддержка под флагом, а остальные — нет (решается при помощи полифила, но что тебе стоит потребовать у разработчиков твоего любимого браузера все доделать?)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- polyfill -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.js"></script>
	<script>
if("showModal" in document.createElement('dialog') === false)
new MutationObserver(function(mutationsList, observer) {
	mutationsList.forEach(function(mutation) {
		mutation.addedNodes.forEach(function(node) {
			if(node.tagName === "DIALOG" && "showModal" in dialog === false)
				dialogPolyfill.registerDialog(node);
		});
	});
}).observe(document.documentElement, { childList: true, subtree: true });
	</script>
	<!-- end of polyfill -->
</head>
<body>
	<button id="button">open modal dialog</button>
	<dialog id="dialog">
 		<form method="dialog">
 			<h1>Hi!</h1>
			<p>I am a modal dialog.</p>
			<button>Close me</button>
		</form>
	</dialog>
	<script>
		button.addEventListener("click", event => {
			dialog.showModal();
		});
	</script>
</body>
</html>