Марк

Правильная означает близка к реальной разработке на каком-нибудь из перечисленных фреймворках.

1. «Реальная» разработка часто полный антоним «правильной». Причин тому много: фантастические дедлайны, талантливые сотрудники, проверенный временем легаси код, эффективные менеджеры. Худший код, с которым я сталкивался, был в самых дорогих b2b энтерпрайз решениях — реальнее некуда.

2. Перечисленные фреймворки к вопросу не приложились, но т.к. в тегах жаваскрипт, будем считать, что реакт.

Из последнего, на что натыкался, мне понравился Doctocat — это сделанный в Гитхабе шаблон для Gatsby. На мой взгляд, это реально классный пример интеграции реакт-компонент. Используется в продакшене, так что реальная разработка, все дела.

На что обратить внимание:

– Собственно компоненты, их композиция.
– Как задается тема (цвета, шрифты), и как это попадает в стили
– Интеграция с third parties: подсветка кода, поиск
– Кастомизация: через shadowing и всякий ad-hoc
– Работа с MDX, реэкспорт layouts и т.п.

Лучше всего с этим работать так: поднять сайт на этой штуке на локалхосте. Попробовать кастомизировать его. Сделать выводы: что помогает, что мешает.

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

С радостью отвечу на вопросы, тут же есть ЛС, правда?

Удачи!

Я вот тут реализовал сравнение HTML фрагментов без кучи ненужных зависимостей: https://www.npmjs.com/package/assert-equal-html

Корректно работает с классами, атрибутами, self-closing / void элементами, игнорирует комментарии и doctype.

Вот очень простой пример кода: jsfiddle.net/JJ8Jc/3234

Можно забрать файл util.js из Node.js.

Вот эта функция же: https://github.com/joyent/node/blob/master/lib/uti...

У нее пара зависимостей всего.

Повесить на body в CSS display: none, а когда все загрузилось, в жаваскрипте отменить.

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

derbyjs.com — у этой штуки в примерах кода есть несложный «совместный текстовый редактор», допилить до состояния WYSIWYG можно запросто.

Ссылка в гитхаб: https://github.com/derbyjs/derby-examples

Стопроцентной уверенности автоматический способ не даст.

obj['method_' + 'name']();

File API поддерживает IE 10 preview 2 и выше. В младших версиях только плагинами, похоже.

Можно применить какой-то Selenium и выполнить всё браузером (медленно, но очень достоверно).
Можно, как писали выше, имитировать поведение js в своем парсере (быстро, но иногда достаточно сложно).
Смотря какая задача.

Обычно использую для таких штук datejs.

Date.today().add(1).months();
// или даже так
var n = 1;
n.months().fromNow();

Если у элемента есть id, то '#' + id — селектор, однозначно определяющий этот элемент на странице.
Если у элемента нет id, нужно сгенерировать уникальный id; GOTO 10

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

960gs, и Zen Coding (там html:5 пишешь, и получается шаблон html-страницы с DOCTYPE и meta charset).

По стандарту там запятую нельзя. Прав IE (это, наверное, единственный такой случай).