2gis / makeup Goto Github PK
View Code? Open in Web Editor NEWJavaScript tool for comfortable manual testing of markup
Home Page: http://2gis.github.io/makeup
License: Mozilla Public License 2.0
JavaScript tool for comfortable manual testing of markup
Home Page: http://2gis.github.io/makeup
License: Mozilla Public License 2.0
Поиск по блокам/состояниям не работает. Он должен круто фильтровать левую панель, разворачивать нужные блоки, и т.д. и т.п.
Описать (или хотя бы упомянуть), что при нажатии на 1-4 будет выбран один из способов наложения.
Можно попросить отдать https://www.npmjs.com/package/makeup
Индикатор у блока, горящий красным или зелёным, показывающий валидность по каким-то встроенным линтерам css/html (или даже w3c) и кастомным плагинам. По клику показывает отчёт.
Exclude miniCard template from index.html of demo to separate file or to js.
Use history API where it is possible.
Найдены следующие баги:
Ошибка в консоли
Uncaught TypeError: miniCardTemplate is not a function
at Makeup._templating (http://2gis.github.io/makeup/demo/:40:37)
at Makeup._renderItem (http://2gis.github.io/makeup/demo/dist/makeup.js:25281:42)
at Makeup._obey (http://2gis.github.io/makeup/demo/dist/makeup.js:25142:22)
at Makeup._init (http://2gis.github.io/makeup/demo/dist/makeup.js:24721:18)
at Object.<anonymous> (http://2gis.github.io/makeup/demo/dist/makeup.js:24685:23)
at fire (http://2gis.github.io/makeup/demo/dist/makeup.js:3148:30)
at Object.fireWith [as resolveWith] (http://2gis.github.io/makeup/demo/dist/makeup.js:3260:7)
at Object.deferred.(anonymous function) [as resolve] (http://2gis.github.io/makeup/demo/dist/makeup.js:3350:34)
at http://2gis.github.io/makeup/demo/dist/makeup.js:24643:20
at dispatch (http://2gis.github.io/makeup/demo/dist/makeup.js:4670:9)
Make script.js, place it on github.io, make code-snippet for inserting that script on any web-page.
Script should download Makeup, parseDom and then init Makeup with found blocks.
Во-первых, ссылка в README.md на репозиторий, некорректная, исправьте пожалуйста.
Система: Mac OS X.
После клонирования проекта из репозитория и попытки установить, появляется ошибка следующего содержания:
andshulga@dev ~/shulga/test/makeup (master) $ npm i
-
> [email protected] preinstall /Users/andshulga/shulga/test/makeup/node_modules/gmsmith
> gm -version || convert -version
sh: gm: command not found
sh: convert: command not found
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/bin/npm" "install"
npm ERR! node v0.12.0
npm ERR! npm v2.1.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] preinstall: `gm -version || convert -version`
npm ERR! Exit status 127
npm ERR!
npm ERR! Failed at the [email protected] preinstall script.
npm ERR! This is most likely a problem with the gmsmith package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gm -version || convert -version
npm ERR! You can get their info via:
npm ERR! npm owner ls gmsmith
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/andshulga/shulga/test/makeup/npm-debug.log
Привет!
Заметил, что было бы удобно иметь возможность менять цвет фона в мэйкапе.
В идеале было бы здорово прикрутить палитру цветов или поле с вводом нужного цвета.
Подключаемый файл не должен быть минифицирован, сильно усложняет дебаг.
Предлагаю интернационализировать промосайт. Сделать переключатель English | Русский, по умолчанию показывать английский. Строки к сайту я переведу.
Для перевода можно использовать www.transifex.com, он бесплатен для опенсорса.
Install them on npm start
method() which returns array of string with all blocks names on page.
Make possibility to minimize makeup. Website behind it must be accessible.
В репе не должно быть dist, а в npm только она по сути и должна быть. См. как сделано у handlebars.
Problem: some data, templates, images etc. may be unavailable before window.onload.
Delay Makeup initialization up to that event.
Make button for inserting full data in auto mode for any block. (like smiley).
Also, fix smiley.
Еще раз здравствуйте)
Можно ли по принципу из этого вопроса указать для блока свою функцию template()
, которая вызавалась бы вместо функции, переданной в Makeup()
, и также как она генерировала html разметку?
Make it right way, with noConflict.
Remember, old version of handlebars has no noConflict method.
В списке горячих клавиш:
~
– Свернуть или развернуть меню со списком блоков.
Сейчас тильда только сворачивает меню, обратно только через кнопку.
Убрать зависимости от types, groupTypes и прочее. Входное дерево должно быть простым и любого уровня вложенности.
Привет.
Подключили Makeup к стартеркиту на вебпак. Для некоторых компонентов, после отрисовки, нужно выполнять скрипт, чтобы компонент принял окончательный внешний вид (используются jquery плагины). Можно ли среагировать на переключение элемента, чтобы после вставки элемента на страницу его проинициализировать?
Сейчас решили проблему так:
import pugTemplate from './index.pug';
import render from '../calendar';
const data = {
name: 'calendar',
type: 'module',
items: [{
name: 'default.calendar.component',
type: 'module',
}]
};
function template({module: blockName}) {
switch (blockName) {
case 'default.calendar.component': {
setTimeout(() => {render()}, 300);
return pugTemplate({});
}
}
}
export {
data,
template,
}
здесь функцию render()
нужно выполнить после отрисовки блока default.calendar.component
.
После смены формата попытка инициализировать на массиве фейлится - списка блоков нет. Но и в консоли нет ничего.
Посмотреть, может ещё каких ошибок добавить.
cmd+T is a common keyboard shortcut for fast "jump-to" search. We can make slack/sublime/github-like popup with fuzzy search.
Also we can use @romanyanke's idea with item tags.
gulp-clean считается depricated. Вместо него лучше использовать gulp-rimraf. А еще лучше npm-модуль del
Неправильно работает вложенный jQuery: асинхронные методы в итоге вызывают внешний инстанс jQuery, а не внутренний. Например, если у внешнего барона нет, а у внутреннего есть, всё пропало.
Make items instead of data
User should have as many freedom as we can give him.
Think about default values for item fields; structure freedom; simplicity of data structure.
Fix listeners on nested "makeup" block - they must not work.
Привет,
Большое спасибо за интересный проект и активный выход в опенсорс! Меня очень впечатляет ваш серьезный подход к разработке верстки, отсюда собственно и вопрос, как вы документируете UI компоненты в компании?
Возможно вы ранее уже видели/слышали, что я активно занимаюсь идеей создания Style Guide Platform и мы с ребятами разрабатываем движек для этого дела - SourceJS. Вижу что ваш инструмент легко вписывается в наше идеальное видение процесса разработки UI, вот например интерфейс Clarify в SourceJS http://sourcejs.com/specs/example-bootstrap-bundle/carousel/?clarify=true§ions=1.
Clarify берет компонент из общей странницы документации, и позволяет его тестировать в разных шаблонах, упрощая подход Living Style Guide Driven Development. Мы ранее планировали добавить туда плагин для image regression тестирование, было бы интересно совместить ваш инструмент с Clarify, как расширение/плагин.
Если у вас есть подобные решения, я бы с удовольствием хотел бы с вами пообщаться и обменяться опытом.
Если вы еще активно не разрабатываете стайл гайды для своих компонентов, вам так же может пригодиться мой обзор инструментов http://www.smashingmagazine.com/2015/04/13/an-in-depth-overview-of-living-style-guide-tools/.
Короче, дело к ночи.
Надо запилить режим, когда подключаешь либу на страницу, дёргаешь её без параметров, она парсит эту страницу, разбивая её на блоки, выводя эти блоки в сайдбаре и т.п.
То есть смысл в быстром старте и быстрой оценки возможностей Makeup рядовым верстальщиком.
Запилить демку
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.